feat(UI): esc key to cancel cell edit

This commit is contained in:
Fabio Di Stasio 2021-02-27 18:29:47 +01:00
parent b4ead6992c
commit 45351faeae
2 changed files with 24 additions and 0 deletions

View File

@ -74,6 +74,12 @@ export default {
else return ''; else return '';
} }
}, },
created () {
window.addEventListener('keydown', this.onKey);
},
beforeDestroy () {
window.removeEventListener('keydown', this.onKey);
},
methods: { methods: {
confirmModal () { confirmModal () {
this.$emit('confirm'); this.$emit('confirm');
@ -82,6 +88,11 @@ export default {
hideModal () { hideModal () {
this.$emit('hide'); this.$emit('hide');
},
onKey (e) {
e.stopPropagation();
if (e.key === 'Escape')
this.hideModal();
} }
} }
}; };

View File

@ -336,6 +336,8 @@ export default {
editON (event, content, field) { editON (event, content, field) {
if (!this.isEditable) return; if (!this.isEditable) return;
window.addEventListener('keydown', this.onKey);
const type = this.fields[field].type.toUpperCase(); ; const type = this.fields[field].type.toUpperCase(); ;
this.originalContent = content; this.originalContent = content;
this.editingType = type; this.editingType = type;
@ -380,6 +382,8 @@ export default {
this.isInlineEditor = { ...this.isInlineEditor, ...obj }; this.isInlineEditor = { ...this.isInlineEditor, ...obj };
}, },
editOFF () { editOFF () {
if (!this.editingField) return;
this.isInlineEditor[this.editingField] = false; this.isInlineEditor[this.editingField] = false;
let content; let content;
if (!BLOB.includes(this.editingType)) { if (!BLOB.includes(this.editingType)) {
@ -405,6 +409,7 @@ export default {
this.editingType = null; this.editingType = null;
this.editingField = null; this.editingField = null;
window.removeEventListener('keydown', this.onKey);
}, },
hideEditorModal () { hideEditorModal () {
this.isTextareaEditor = false; this.isTextareaEditor = false;
@ -446,6 +451,14 @@ export default {
if (keyName.includes('.')) if (keyName.includes('.'))
return this.keyUsage.find(key => key.field === keyName.split('.').pop()); return this.keyUsage.find(key => key.field === keyName.split('.').pop());
return this.keyUsage.find(key => key.field === keyName); return this.keyUsage.find(key => key.field === keyName);
},
onKey (e) {
e.stopPropagation();
if (e.key === 'Escape') {
this.isInlineEditor[this.editingField] = false;
this.editingField = null;
window.removeEventListener('keydown', this.onKey);
}
} }
} }
}; };