I am working with Angular5 , I have a big issue (please see the below code)
In simple words it is a asynchronous execution issue, how to reduce this
let confirmData = {
dlgHeader: 'Add',
msgTxt: 'Are you sure to Add Language!!',
eventName: 'locationmanagement_languages_assign'
};
this.confirmService.confirmData = confirmData;
(1) this.confirmationService.setShowConfirm(true);
(2) this.confirmAnchor.createConfirmation(ConfirmationComponent);
this.confirmService.getReturnValue()
.subscribe(
suc => {
if (suc.eventName == 'locationmanagement_languages_assign') {
this.assignLanguage(suc);
}
});
in above (1) line of code is responsible to create confirmation.(i have created custom confirmation component)
inside custom confirmation user can click CONFIRM/CANCEL buttons.
I want to stop (2) line code execution until user click CONFIRM/CANCEL buttons in custom confirmation component.
Now i am using as below in language.component.ts ,, but i am calling the getReturnValue() in ngOnInit().
I dont want to use ngOnInit() to get action from custom confirmation component either it is CONFIRM/CANCEL action
ngOnInit() {
this.getReturnValueEvent();
}
assignLanguageEvent() {
debugger;
this.requestedData = [];
for (let data of this.selectedAssignLanguages) {
this.requestedData.push({
id: data.value.id,
set_value: data.value.setValue
});
}
console.log('Requested Data::', this.requestedData);
let confirmData = {
dlgHeader: 'Add',
msgTxt: 'Are you sure to Add Language!!',
eventName: 'locationmanagement_languages_assign'
};
this.confirmService.confirmData = confirmData;
this.confirmationService.setShowConfirm(true);
this.confirmAnchor.createConfirmation(ConfirmationComponent);
}
getReturnValueEvent() {
this.subscription1 = this.confirmService.getReturnValue()
.subscribe(
suc => {
if (suc.eventName == 'locationmanagement_languages_assign') {
this.assignLanguage(suc);
}
}
);
}
Related
I am working on a vuex-electron application.
There are several buttons on the main page, when clicked, a file is stored in a specific folder, and at the same time, the property of the button turns to [saved], when this [saved] button is clicked again, a message pops up, asking whether to overwrite or not the old file.
But the problem is : when the app is restarted, all of the buttons' property is initialized to [not saved], so, even though the same file has already been stored, when button is clicked, the old file is overwritten without any pop-ups asking whether to overwrite the existing file or not.
I want to change the feature as below:
when the app is restarted, check file existence first, then based on the result, change button property to [saved].
Is this possible?
If possible, where should I add the logic in.
I am a complete beginner on vue.js.
Have been looking up for a while, but did not find any useful information.
From the following thread, learned that state data is stored in a json file, does this mean I need to change the state? Currently, button properties are not saved in this json file.
Where is the state of a Electron-Vue application stored?
//code
v-for="(btn,i) in buttons" :key="i" #click="save(btn)"
computed: {
buttons() {
let r = this.$store.state.App.aData.filter(x=> {
if (this.aType==='abc') {
return x.video.toString() === '1'
} else {
return !x.video
}
}).map(x => {
let y = this.$copy(x)
y.saved = this.savedData.includes(x.index)
y.disabled = this.appState !== 'def'
return y
})
let index = this.aType==='abc'?998:999
r.push({
index,
a_name:'others',
e_number:this.aType==='abc'?'N':'999',
disabled: this.appState !== 'def',
saved: this.savedData.includes(index),
video:''
})
return r
},
},
methods:{
save(btn) {
if (btn.disabled) {
return
}
if (btn.saved) {
this.$buefy.dialog.confirm({
message: '??',
confirmText: 'overwrite?',
cancelText: 'cancel',
type: 'is-danger',
hasIcon: true,
onConfirm: () => {
if (this.aType==='xyz') {
this.saveXyz(btn)
}
if (this.aType==='abc') {
this.saveAbc(btn)
}
}
})
return
}
if (this.aType==='xyz') {
this.saveXyz(btn)
}
if (this.shootingType==='abc') {
this.saveAbc(btn)
}
},
saveXyz(data) {
if (this.xyzBuffer) {
//create a file and store to a folder
this.savedData.push(data.index)
let idx = this.$store.state.App.aData.findIndex(x=>x.index===data.index)
if (idx > -1) {
idx++
if (idx < this.$store.state.App.aData.length) {
this.selectedData = idx
this.aType = this.$store.state.App.aData[this.selectedData].video ? 'abc' : 'xyz'
this.scrollTo(this.selectedData)
}
}
this.cancel()
})
}
}
},
saveAbc(data) {
if (this.recording) {
return
}
//create a file and store to a folder
this.savedData.push(data.index)
let idx = this.$store.state.App.aData.findIndex(x=>x.index===data.index)
if (idx > -1) {
idx++
if (idx < this.$store.state.App.aData.length) {
this.selectedData = idx
this.aType = this.$store.state.App.aData[this.selectedData].video ? 'abc' : 'xyz'
this.scrollTo(this.selectedData)
}
}
this.cancel()
}
})
},
},
I'm pretty new to Vue and Snotify, so please forgive the newb question. I've scanned the docs, and nothing jumps out at me.
Here's the deal: I have a Vue component that deletes files, using a Snotify confirm box. Like this:
destroy() {
this.$snotify.confirm('', 'Delete File?', {
buttons: [
{
text: 'Yes',
action: (toast) => {
axios.delete([API endpoint])
.then(response => {
// destroy the vue listeners, etc
this.$destroy();
// remove the element from the DOM
this.$el.parentNode.removeChild(this.$el);
});
this.$snotify.remove(toast.id);
}
},
{
text: 'No',
action: (toast) => {
this.$snotify.remove(toast.id)
}
}
]
})
}
The problem is that if you click the "Delete" button a second time, another "Delete File?" confirmation appears above the first. Expected behavior is that the second click make the confirmation go away.
Any help you can offer would be greatly appreciated.
this.$snotify.confirm() returns the toast info, which includes an ID that could be passed to this.$snotify.remove() for removal:
export default {
methods: {
destroy() {
if (this._toast) {
this.$snotify.remove(this._toast.id, true /* immediate */)
}
this._toast = this.$snotify.confirm('', 'Delete File?', {/*...*/})
}
}
}
demo
I am using element ui el-image. And I want to preview my image when clicked with (:preview-src-list). But When I click first time it doesnt preview anything. just add's my downloaded image. So I need to click 2 times. But I want to click 1 time.
Here is my template code:
<el-image :src="src"
:preview-src-list="srcList"
#click="imgClick"></el-image>
ts code:
src = null;
srcList = [];
product = 'shoe1';
imgClick() {
prevImg(product).then(resp => {
const url = window.URL.createObjectURL(new Blob([resp.data]));
this.srclist = [url];
});
}
#Watch("product")
changed(value) {
getProductImage(value).then(resp => {
const url = window.URL.createObjectURL(new Blob([resp.data]));
this.src = url;
}).catc(e => {
alert(e);
});
}
mounted() {
this.changed(product);
}
I think these things happen because when you click on that image it will trigger clickHandler:
...
clickHandler() {
// don't show viewer when preview is false
if (!this.preview) {
return;
}
...
}
...
From source
And the preview is the computed property:
...
preview() {
const { previewSrcList } = this;
return Array.isArray(previewSrcList) && previewSrcList.length > 0;
}
...
From source
So nothing happened in the first click but after that you set preview-src-list and click it again then it works.
If you code is synchronous you can use event like mousedown which will trigger before click event.
<el-image
:src="url"
:preview-src-list="srcList"
#mousedown="loadImages">
</el-image>
Example
But if you code is asynchronous you can use refs and call clickHandler after that.
...
// fetch something
this.$nextTick(() => {
this.$refs.elImage.clickHandler()
})
...
Example
In my laravel 5.8 / vue 2.5.17 / vuex^3.1.0 I have a problem that with dialog opened I have event duplication.
I have an event for item deletion :
In my vue file:
...
mounted() {
bus.$on('dialog_confirmed', (paramsArray) => {
if (paramsArray.key == this.deleteFromUserListsKey(paramsArray.user_list_id)) {
this.runDeleteFromUserLists(paramsArray.user_list_id, paramsArray.index);
}
})
bus.$on('onUserListDeleteSuccess', (response) => {
this.is_page_updating = false
this.showPopupMessage("User lists", 'User\'s list was successfully deleted!', 'success');
})
bus.$on('onUserListDeleteFailure', (error) => {
this.$setLaravelValidationErrorsFromResponse(error.message);
this.is_page_updating = false
this.showRunTimeError(error, this);
this.showPopupMessage("User lists", 'Error adding user\'s list !', 'error');
})
}, // mounted() {
methods: {
confirmDeleteUserList(user_list_id, user_list_title, index) {
this.confirmMsg("Do you want to exclude '" + user_list_title + "' user list ?", {
key: this.deleteFromUserListsKey(user_list_id), user_list_id: user_list_id, index: index
}, 'Confirm', bus);
}, //confirmDeleteUserList(id, user_list_title, index) {
deleteFromUserListsKey(user_list_id) {
return 'user_list__remove_' + user_list_id;
},
runDeleteFromUserLists(user_list_id, index) {
this.$store.dispatch('userListDelete', { logged_user_id : this.currentLoggedUser.id, user_list_id : user_list_id } );
}, // runDeleteFromUserLists() {
and in resources/js/store.js :
state : {
...
userLists: [],
...
actions : {
userListDelete(context, paramsArray ) {
axios({
method: ( 'delete' ),
url: this.getters.apiUrl + '/personal/user-lists/' + paramsArray.user_list_id,
}).then((response) => {
let L = this.getters.userLists.length
for (var I = 0; I < L; I++) {
if (response.data.id == this.getters.userLists[I].id) {
this.getters.userLists.splice(this.getters.userLists.indexOf(this.getters.userLists[I]), 1)
context.commit('refreshUserLists', this.getters.userLists);
break;
}
}
bus.$emit( 'onUserListDeleteSuccess', response );
}).catch((error) => {
bus.$emit('onUserListDeleteFailure', error);
});
}, // userListDelete(context, paramsArray ) {
confirmMsg (based on https://github.com/euvl/vue-js-modal )is defined in my mixing :
confirmMsg: function (question, paramsArray, title, bus) {
this.$modal.show('dialog', {
title: title,
text: question,
buttons: [
{
title: 'Yes',
default: true, // Will be triggered by default if 'Enter' pressed.
handler: () => {
bus.$emit('dialog_confirmed', paramsArray);
this.$modal.hide('dialog')
}
},
{
title: '', // Button title
handler: () => {
} // Button click handler
},
{
title: 'Cancel'
}
]
})
},
it worked ok, until I moved userListDelete method from my vue file into store.js.
As a result on 1st event item is deleted ok, the the second item raise error that item was not found and I do not know event is doubled...
How to fix it ?
UPDATED BLOCK :
I still search for valid decision :
I uploaded live demo at :
http://178.128.145.48/login
demo#demo.com wdemo
http://178.128.145.48/websites-blogs will be opened.
Please, try to go to “User's lists” by link at top left menu https://prnt.sc/nq4qiy
and back several times. When on “User's lists” page I try to delete 1 user list it is deleted, but I got several messages
and url in “network” section of my browser : https://imgur.com/a/4ubFB0g
Looks like events are duplicated. And looks like that is move between pages number of guplications is raised.
Why and how to fix it ?
I use #click.prevent in triggering the event to show confirm delete message.
There is “ Add Demo Data” to add more demo rows.
Thanks!
Well, it is quite obvious.
Take a closer look at the Vue component lifecycle diagram.
Your component is mounted each time you enter a route.
So, bus.$on inside your mounted block executed each time you enter this route.
I suggest you move bus event handlers to some other location. For example app.js/ App.vue mounted hook or directly into the store. Since all you do inside handler is calling store actions.
I'm trying to find a way to simulate a "change" event when doing E2E testing (with selenium or cypress) and slate.js
In our UI, when the user clicks on a word, we pop-up a modal (related to that word). I've been unable to make this happen as I can't get the change event to trigger
The Cypress input commands (e.g. cy.type() and cy.clear()) work by dispatching input and change events - in the case of cy.type(), one per character. This mimics the behavior of a real browser as a user types on their keyboard and is enough to trigger the behavior of most application JavaScript.
However, Slate relies almost exclusively on the beforeinput event (see here https://docs.slatejs.org/concepts/xx-migrating#beforeinput) which is a new browser technology and an event which the Cypress input commands don’t simulate. Hopefully the Cypress team will update their input commands to dispatch the beforeinput event, but until they do I’ve created a couple of simple custom commands which will trigger Slate’s input event listeners and make it respond.
// commands.js
Cypress.Commands.add('getEditor', (selector) => {
return cy.get(selector)
.click();
});
Cypress.Commands.add('typeInSlate', { prevSubject: true }, (subject, text) => {
return cy.wrap(subject)
.then(subject => {
subject[0].dispatchEvent(new InputEvent('beforeinput', { inputType: 'insertText', data: text }));
return subject;
})
});
Cypress.Commands.add('clearInSlate', { prevSubject: true }, (subject) => {
return cy.wrap(subject)
.then(subject => {
subject[0].dispatchEvent(new InputEvent('beforeinput', { inputType: 'deleteHardLineBackward' }))
return subject;
})
});
// slateEditor.spec.js
cy.getEditor('[data-testid=slateEditor1] [contenteditable]')
.typeInSlate('Some input text ');
cy.getEditor('[data-testid=slateEditor2] [contenteditable]')
.clearInSlate()
.typeInSlate('http://httpbin.org/status/409');
If you need to support other inputTypes, all of the inputTypes supported by Slate are listed in the source code for editable.tsx
Found a solution:
1) Add a ref to the Editor
<Editor
ref={this.editor}
/>
2) Add a document listener for a custom event
componentDidMount() {
document.addEventListener("Test_SelectWord", this.onTestSelectWord)
}
componentWillUnmount() {
document.removeEventListener("Test_SelectWord", this.onTestSelectWord)
}
3) Create a handler that creates a custom select event
onTestSelectWord(val: any) {
let slateEditor = val.detail.parentElement.parentElement.parentElement.parentElement
// Events are special, can't use spread or Object.keys
let selectEvent: any = {}
for (let key in val) {
if (key === 'currentTarget') {
selectEvent['currentTarget'] = slateEditor
}
else if (key === 'type') {
selectEvent['type'] = "select"
}
else {
selectEvent[key] = val[key]
}
}
// Make selection
let selection = window.getSelection();
let range = document.createRange();
range.selectNodeContents(val.detail);
selection.removeAllRanges();
selection.addRange(range)
// Fire select event
this.editor.current.onEvent("onSelect", selectEvent)
}
4) User the following in your test code:
arr = Array.from(document.querySelectorAll(".cl-token-node"))
text = arr.filter(element => element.children[0].innerText === "*WORD_YOU_ARE_SELECTING*")[0].children[0].children[0]
var event = new CustomEvent("Test_SelectWord", {detail: text})
document.dispatchEvent(event, text)
Cypress can explicitly trigger events: https://docs.cypress.io/api/commands/trigger.html#Syntax
This may work for you:
cy.get(#element).trigger("change")