I have eventbus that is fired when a button is clicked, the challenge is that the code inside the callback is not working but the console logging inside same callback works.
This is how I'm firing the event.
editCampaign (campaign) {
eventBus.$emit('editCampaign', campaign);
this.$router.push('/campaign/create');
}
And below is how I'm listening to the event.
created() {
this.getDetails();
eventBus.$on('deleted-message', (messages) => {
this.messageDeleted(messages)
});
let self = this;
eventBus.$on('editCampaign', function(campaign) {
console.log('campaign edited');
self.edit = true;
self.campaign = campaign
})
}
It console logged campaign edited but the edit and campaign were not updated.
data() {
return {
campaign: '',
edit: false
}
},
Related
I am building an add-in for Outlook, using Office.JS.
My add-in retrieves the (signed-in) user's contacts.
I am trying to achieve the following:
After the contacts are retrieved, when the user is in compose mode, add the loaded contacts to the recipient's field.
It should only be added for the period of creating the message (I don't want to add it permanently to the user's contact list),
Thanks
I have not found a proper way yet, according to the documentation, that allows achieving this.
when the user is in compose mode, add the loaded contacts to the recipient's field. It should only be added for the period of creating the message (I don't want to add it permanently to the user's contact list)
The Office JavaScript API provides asynchronous methods (Recipients.getAsync, Recipients.setAsync, or Recipients.addAsync) to respectively get, set, or add recipients in a compose form of an appointment or message. These asynchronous methods are available to only compose add-ins. For example, to set recipients for your message you can use the following code:
let item;
Office.initialize = function () {
item = Office.context.mailbox.item;
// Checks for the DOM to load using the jQuery ready method.
$(document).ready(function () {
// After the DOM is loaded, app-specific code can run.
// Set recipients of the composed item.
setRecipients();
});
}
// Set the display name and email addresses of the recipients of
// the composed item.
function setRecipients() {
// Local objects to point to recipients of either
// the appointment or message that is being composed.
// bccRecipients applies to only messages, not appointments.
let toRecipients, ccRecipients, bccRecipients;
// Verify if the composed item is an appointment or message.
if (item.itemType == Office.MailboxEnums.ItemType.Appointment) {
toRecipients = item.requiredAttendees;
ccRecipients = item.optionalAttendees;
}
else {
toRecipients = item.to;
ccRecipients = item.cc;
bccRecipients = item.bcc;
}
// Use asynchronous method setAsync to set each type of recipients
// of the composed item. Each time, this example passes a set of
// names and email addresses to set, and an anonymous
// callback function that doesn't take any parameters.
toRecipients.setAsync(
[{
"displayName":"Graham Durkin",
"emailAddress":"graham#contoso.com"
},
{
"displayName" : "Donnie Weinberg",
"emailAddress" : "donnie#contoso.com"
}],
function (asyncResult) {
if (asyncResult.status == Office.AsyncResultStatus.Failed){
write(asyncResult.error.message);
}
else {
// Async call to set to-recipients of the item completed.
}
}); // End to setAsync.
// Set any cc-recipients.
ccRecipients.setAsync(
[{
"displayName":"Perry Horning",
"emailAddress":"perry#contoso.com"
},
{
"displayName" : "Guy Montenegro",
"emailAddress" : "guy#contoso.com"
}],
function (asyncResult) {
if (asyncResult.status == Office.AsyncResultStatus.Failed){
write(asyncResult.error.message);
}
else {
// Async call to set cc-recipients of the item completed.
}
}); // End cc setAsync.
// If the item has the bcc field, i.e., item is message,
// set bcc-recipients.
if (bccRecipients) {
bccRecipients.setAsync(
[{
"displayName":"Lewis Cate",
"emailAddress":"lewis#contoso.com"
},
{
"displayName" : "Francisco Stitt",
"emailAddress" : "francisco#contoso.com"
}],
function (asyncResult) {
if (asyncResult.status == Office.AsyncResultStatus.Failed){
write(asyncResult.error.message);
}
else {
// Async call to set bcc-recipients of the item completed.
// Do whatever appropriate for your scenario.
}
}); // End bcc setAsync.
}
}
// Writes to a div with id='message' on the page.
function write(message){
document.getElementById('message').innerText += message;
}
And if you need to add recipients:
// Add specified recipients as required attendees of
// the composed appointment.
function addAttendees() {
if (item.itemType == Office.MailboxEnums.ItemType.Appointment) {
item.requiredAttendees.addAsync(
[{
"displayName":"Kristie Jensen",
"emailAddress":"kristie#contoso.com"
},
{
"displayName" : "Pansy Valenzuela",
"emailAddress" : "pansy#contoso.com"
}],
function (asyncResult) {
if (asyncResult.status == Office.AsyncResultStatus.Failed){
write(asyncResult.error.message);
}
else {
// Async call to add attendees completed.
// Do whatever appropriate for your scenario.
}
}); // End addAsync.
}
}
These operations are not temporary, the changes made will be saved to the message.
New to cypress, but did a couple projects in Protractor and TestCafe.
I'm aware of the controversy using PO's in cypress, but due to the complexity / nature of our app, we're going with it.
Refactoring the test to remove PO's and include the app ID's works. With the page objects, we get the 'requires a DOM element' error.
// myPo.js
class LoginPage {
loginPageCon() {
return cy.get('#page-login');
}
forgotPasswordLnk() {
return cy.get('#forgotPassword');
}
emailTxt() {
return cy.get('#email');
}
forgotPasswordCon() {
return cy.get('#page-forgot-password');
}
}
export default LoginPage;
// myTest.spec.js
import loginPage from '../pageObjects/myPo.js';
const loginPage = new LoginPage();
describe('Authorization', () => {
it('can direct to the azure instance', () => {
cy.visitHome();
cy.get(loginPage.loginPageCon);
});
describe('Forgot Password', () => {
it('clicking forgot password sends you to the correct screen', () => {
cy.get(loginPage.forgotPasswordLnk).click();
cy.get(loginPage.forgotPasswordCon);
});
});
});
You are returning a function reference to cy.get() when you call cy.get(loginPage.forgotPasswordLink).
Change It to:
loginPage.forgotPasswordLink().click()
Your page object is already returning a chainable of cy.get()
all!
I need to get axios Promise reject in my vue component using vuex.
I have serviceApi.js file:
export default {
postAddService(service) {
return axios.post('api/services', service);
}
}
my action in vuex:
actions: {
addService(state, service) {
state.commit('setServiceLoadStatus', 1);
ServicesAPI.postAddService(service)
.then( ({data}) => {
state.commit('setServiceLoadStatus', 2);
})
.catch(({response}) => {
state.commit('setServiceLoadStatus', 2);
console.log(response.data.message);
return Promise.reject(response); // <= can't catch this one
});
}
}
and in my vue component:
methods: {
addService() {
this.$store.dispatch('addService', this.service)
.then(() => {
this.forceLeave = true;
this.$router.push({name: 'services'});
this.$store.dispatch('snackbar/fire', {
text: 'New Service has been added',
color: 'success'
}).then()
})
.catch((err) => { // <== This never hapens
this.$store.dispatch('snackbar/fire', {
text: err.response.data.message || err.response.data.error,
color: 'error'
}).then();
});
}
When i use axios directly in my component all work well. I get both success and error messages.
But when i work using vuex i can't get error message in component, hoever in vuex action console.log prints what i need.
I'm always getting only successfull messages, even when bad things hapen on beckend.
How can i handle this situation using vuex ?
Wellcome to stackoverflow. One should not want to expect anything back from an action. After calling an action. Any response should be set/saved in the state via mutations. So rather have an error property on your state. Something like this should work
actions: {
async addService(state, service) {
try {
state.commit('setServiceLoadStatus', 1);
const result = await ServicesAPI.postAddService(service);
state.commit('setServiceLoadStatus', 2);
} catch (error) {
state.commit("error", "Could not add service");
state.commit('setServiceLoadStatus', 2);
console.log(response.data.message);
}
}
}
And in your component you can just have an alert that listens on your state.error
Edit: Only time you are going expect something back from an action is if you want to call other actions synchronously using async /await. In that case the result would be a Promise.
I'm running echo server and redis. Private channels work perfectly, and messaging I have built for it works. Now I'm trying to get the whisper to work for the typing status as well but no luck. Does whisper require a pusher to work?
What I have tried on keyup (jquery)
Echo.private(chat- + userid)
.whisper('typing',{e: 'i am is typing...'});
console.log('key up'); // this one works so the keyup is triggered
then I'm of course listening the channel what I am whispering into:
Echo.private(chat- + userid).listenForWhisper('typing', (e) => {
console.log(e + ' this is typing');
});
But I get absolutely nothing anywhere. (debugging on at the echo server, nothing on console etc) Any help how to get this to work would be much appreciated.
Your input event:
$('input').on('keydown', function(){
let channel = Echo.private('chat')
setTimeout( () => {
channel.whisper('typing', {
user: userid,
typing: true
})
}, 300)
})
Your listening event:
Echo.private('chat')
.listenForWhisper('typing', (e) => {
e.typing ? $('.typing').show() : $('.typing').hide()
})
setTimeout( () => {
$('.typing').hide()
}, 1000)
Of course you have to have setup the authentication for this channel ahead of time to ensure that the trusted parties have access:
Broadcast::channel('chat', function ($user) {
return Auth::check();
});
Where $user will be the userid we passed to the user param in our object on the front end.
This is what my ReactJS componentDidMount looks like.
Your listening event.
componentDidMount() {
let timer; // timer variable to be cleared every time the user whispers
Echo.join('chatroom')
.here(...)
.joining(...)
.leaving(...)
.listen(...)
}).listenForWhisper('typing', (e) => {
this.setState({
typing: e.name
});
clearTimeout(timer); // <-- clear
// Take note of the 'clearTimeout' before setting another 'setTimeout' timer.
// This will clear previous timer that will make your typing status
// 'blink' if not cleared.
timer = setTimeout(() => {
this.setState({
typing: null
});
}, 500);
});
}
I have SPA application on Vue.js + Laravel. Authorization logic, completely delegated to Laravel app. However, i need check auth status, when routing has changed. I create small class, which responsible for it.
export default {
user: {
authenticated : false
},
check: function(context) {
context.$http.get('/api/v1/user').then((response) => {
if (response.body.user != null) {
this.user.authenticated = true
}
}, (response) =>{
console.log(response)
});
}
Within the component has a method that is called when a change url.
beforeRouteEnter (to, from, next) {
next(vm =>{
Auth.check(vm);
if (!Auth.user.authenticated) {
next({path:'/login'});
}
})
}
Function next() given Vue app instance, then check user object. If user false, next() call again for redirect to login page. All it works, but only when the page is already loaded. If i'll reload /account page, there is a redirect to /login page, because request to Api not completed yet, but code will continue execute. Any idea?
Quite simple to do, you need to make your code work asynchronously and hold routing before request is completed.
export default {
user: {
authenticated : false
},
check: function(context) {
return context.$http.get('/api/v1/user').then((response) => {
if (response.body.user != null) {
this.user.authenticated = true
}
}, (response) => {
console.log(response)
});
}
}
then
beforeRouteEnter (to, from, next) {
next(vm => {
Auth.check(vm).then(() => {
if (!Auth.user.authenticated) {
next({path:'/login'});
} else {
next()
}
}
})
}
Other pro tips
Display some loading indicator when loading so your application doesn't seem to freeze (you can use global router hooks for that)
If you are using vue-resource, consider using interceptors (perhaps in addition to the routing checks)
Consider using router.beforeEach so that you don't have to copy-paste beforeRouteEnter to every component
Done. Need to return promise like that
check: function(context) {
return context.$http.get('/api/v1/user').then((response) => {
if (response.body.user != null) {
this.user.authenticated = true
}
}, (response) =>{
console.log(response)
});
}
and then
beforeRouteEnter (to, from, next) {
Auth.check().then(()=>{
if(!Auth.user.authenticated)
next({path:'/login'})
else
next();
})
}