Target specific Element UI notification - vue.js

I'm starting to use Element UI on a Vue app and can't see any obvious way to target a specific Notification instance.
As an example. I have a Vuex action that is triggering an info notification like so
Notification.info({
duration: 0,
title: 'Generating PDF',
message: 'Please standby...',
position: 'bottom-left'
})
Once I get a response from the rest of the action, I then want to dismiss that particular notification and replace it with another, but the options for a notification doesn't have even as much as an id option to tap into.
I can't be alone in having the need to target a specific notification instance?

According to the documentation of element ui:
Notification and this.$notify returns the current Notification
instance. To manually close the instance, you can call close on it.
Or Notification.closeAll to close all notifications at once

Related

Vue server side events and showing components

How can I use server side events(sse) in vue? I'm receiving sse from backend and I need to implement that when I receive first event, I will show ringing panel on screen. Then I can accept that call and then show different panel and when I click on hang up I will show again screen like before events. It will be a call centrum.
I created method for receieving and handling event.
setupStream(){
let evtSource = new EventSource('/hzs/events.sse')
evtSource.addEventListener('call_status', event => {
let data = JSON.parse(event.data)
this.channels.push(data);
}, false)
}
Now, when I call I get something like this:
Where first curly brackets are incoming call, second are after I pick up phone and last are after I hang up.
How can I use this in app and show for example green ringing bar on screen based on events? So for every event I need different UI components.
Do I need to use vuex?
Thanks

branch.io custom event in react native is not triggering reward rule

I have a react native project that is dedicated towards building iOS application. I set identity branch.setIdentity('yashKalwani'); this way then i create a branch universal object as shown in documentation.
let branchUniversalObject = await branch.createBranchUniversalObject('canonicalIdentifier', {
title: 'Cool Content!',
contentDescription: 'Cool Content Description',
contentMetadata: {
customMetadata: {
customMetadata1: 'abcd',
customMetadata2: 'efgh'
}
}
});
I now trigger a custom event new BranchEvent('threepoints', branchUniversalObject).logEvent() but this custom event does not trigger the rule that I have inside my rewards in branch.io dashboard.
Rule: all acting users get 3 default credits every time they trigger the event threepoints.
Am i missing out on something? Why is the rule not triggering even though the event is being logged in my Dashboard. I am able to view that the custom event has been fired via my liveview event tracking feature.
Currently for the referrals feature, v2 events are not supported:
https://docs.branch.io/pages/viral/referrals/#guide
This means that you cannot use logEvent. You must use userCompletedAction instead e.g. branch.userCompletedAction('threepoints'):
Example

Saving state on back button press in vue-electron

I want to make a desktop app in vue-electron. I am new to both vue.js and electron.
I am having some problems while managing state.
When I click on login button https://cloudup.com/cFl9MTY6cnn I send data i.e sessionId and username to next screen https://cloudup.com/c76fmL8OGbF and on this screen I display these props https://cloudup.com/csahnc6Z04J using this code https://cloudup.com/cdR0F6Qyt-3 but as I go to the third screen https://cloudup.com/c0F1ztX8qu3 and then come back then this data disappears https://cloudup.com/cTFW32DxeRa
I am going back to second screen using router.go(-1) https://cloudup.com/cvpxk4GsIRx
The vue-router documentation https://router.vuejs.org/en/essentials/navigation.html says that
“router.push method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.”
and router.go(n) "This method takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack"
However in my case, lifecycle hooks are called again when I go back to history stack. So does that mean when we come to previous page that component is created again and not popped from stack. I actually don’t want to refresh / reload the page on back button.
You need to send the data to the third screen,too.
Instead of
<route-link to="third_screen"></router-link>
You need to write,
<router-link :to="{ path: 'third_screen', params: { session_id: this.session_id, userName:this.user_name}}">User</router-link>
And instead of router.go(-1) you need to send the data as params again to your second screen using router.push() method.
But I won't suggest the above method as you need to pass the same data as params to all routes.
You should also have a look at Vuex.
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
You should store your Session Id as cookie instead of passing it as props.
Update
Also have a look at <keep-alive></keep-alive>.
Reference

Silent param not working for Update item field values

I'm using version 0.7.9 of the java client library for the Podio API. When sending a value of the true for the silent param, the item update is still displayed in the item's activity stream.
updateItemValues(item.getId(), valuesUpdates, bSilent, bHook)
According to the API documentation that should not be the case.
If set to true, the object will not be bumped up in the stream
and notifications will not be generated.
Default value: false
Question: Is there a way to update an item via the Podio API so that the change is not displayed in the item's activity stream?
Item's activity stream is the only place where all item's changes are shown and only place where you can see who changed what and when and revert those changes. So, no, there is no way to hide this.
Silent parameter works well. There are number of other places where item's changes are shown: notifications, workspace activity stream, home activity stream. And silent parameter is silencing those changes as designed.

Handling the google interactive post onclick via javascript

My scenario is as follows:
Our application is building on top of google-plus and takes advantage of the google-plus connections.
Is this supported with Interactive posts? I want to:
Block showing the interactive post dialog on the button click if a certain condition is not met
Perform a certain action once the button to show the dialog is clicked - onClick works for this but I could not find documentation on it.
var options = {
contenturl: url,
clientid: googleappid,
cookiepolicy: "single_host_origin",
prefilltext: text,
calltoactionlabel: "START",
calltoactionurl: ctaurl,
recipients: connectionid,
onClick: specialFunctionToRunOnClick(params)
};
gapi.interactivepost.render('submitInvitationongoogle', options);
Is there something like beforeSend that can prevent the click from firing?
There currently is not an API for testing whether the user has created an interactive post on their stream. You can know when the interactive post was rendered to the user by logging the API calls for gapi.interactivepost.render and can use the call-to-action url for testing when the recipient clicked the button. You can also look at their public stream activity to test whether the post was shared publicly but this is probably not what you want.