Adds parent selection via autocomplete to Term Edition Form.
This commit is contained in:
parent
157bd4d441
commit
293d57fc7f
|
@ -89,6 +89,7 @@
|
|||
<label class="label is-inline">
|
||||
{{ $i18n.get('label_parent_term') }}
|
||||
<b-switch
|
||||
@input="showCheckboxesWarning = true; clearErrors('parent');"
|
||||
id="tainacan-checkbox-has-parent"
|
||||
size="is-small"
|
||||
v-model="hasParent" />
|
||||
|
@ -105,7 +106,7 @@
|
|||
@select="onSelectParentTerm($event)"
|
||||
:loading="isFetchingParentTerms"
|
||||
@input="fecthParentTerms($event)"
|
||||
@focus="showCheckboxesWarning = true; clearErrors('parent');"
|
||||
@focus="clearErrors('parent');"
|
||||
:disabled="!hasParent">
|
||||
<template slot-scope="props">
|
||||
{{ props.option.name }}
|
||||
|
@ -115,7 +116,7 @@
|
|||
<transition name="fade">
|
||||
<p
|
||||
class="checkboxes-warning"
|
||||
v-show="showCheckboxesWarning">
|
||||
v-show="showCheckboxesWarning == true">
|
||||
{{ $i18n.get('info_warning_changing_parent_term') }}
|
||||
</p>
|
||||
</transition>
|
||||
|
@ -167,7 +168,9 @@
|
|||
parentTerms: [],
|
||||
parentTermName: '',
|
||||
showCheckboxesWarning: false,
|
||||
hasParent: false
|
||||
hasParent: false,
|
||||
hasChangedParent: false,
|
||||
initialParentId: undefined
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
@ -195,7 +198,7 @@
|
|||
headerImageId: this.editForm.header_image_id,
|
||||
})
|
||||
.then((term) => {
|
||||
this.$emit('onEditionFinished', term);
|
||||
this.$emit('onEditionFinished', {term: term, hasChangedParent: this.hasChangedParent });
|
||||
this.editForm = {};
|
||||
this.formErrors = {};
|
||||
})
|
||||
|
@ -218,9 +221,9 @@
|
|||
parent: this.hasParent ? this.editForm.parent : 0,
|
||||
headerImageId: this.editForm.header_image_id,
|
||||
})
|
||||
.then(() => {
|
||||
.then((term) => {
|
||||
this.formErrors = {};
|
||||
this.$emit('onEditionFinished', this.editForm);
|
||||
this.$emit('onEditionFinished', { term: term, hasChangedParent: this.hasChangedParent });
|
||||
})
|
||||
.catch((errors) => {
|
||||
for (let error of errors.errors) {
|
||||
|
@ -289,26 +292,35 @@
|
|||
});
|
||||
},
|
||||
onSelectParentTerm(selectedParentTerm) {
|
||||
this.hasChangedParent = this.initialParentId != selectedParentTerm.id;
|
||||
this.editForm.parent = selectedParentTerm.id;
|
||||
this.selectedParentTerm = selectedParentTerm;
|
||||
this.parentTermName = selectedParentTerm.name;
|
||||
this.showCheckboxesWarning = true;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.showCheckboxesWarning = false;
|
||||
this.hasParent = this.editForm.parent != undefined && this.editForm.parent > 0;
|
||||
|
||||
this.initialParentId = this.editForm.parent;
|
||||
this.initializeMediaFrames();
|
||||
|
||||
this.isFetchingParentTerms = true;
|
||||
this.fetchParentName({ taxonomyId: this.taxonomyId, parentId: this.editForm.parent })
|
||||
.then((parentName) => {
|
||||
this.parentTermName = parentName;
|
||||
this.isFetchingParentTerms = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.error(error);
|
||||
this.isFetchingParentTerms = false;
|
||||
});
|
||||
if (this.hasParent) {
|
||||
this.isFetchingParentTerms = true;
|
||||
this.showCheckboxesWarning = false;
|
||||
this.fetchParentName({ taxonomyId: this.taxonomyId, parentId: this.editForm.parent })
|
||||
.then((parentName) => {
|
||||
this.parentTermName = parentName;
|
||||
this.isFetchingParentTerms = false;
|
||||
this.showCheckboxesWarning = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.error(error);
|
||||
this.isFetchingParentTerms = false;
|
||||
this.showCheckboxesWarning = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -333,7 +333,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.controls.is-disabled a, .children-dropdown.is-disabled {
|
||||
.controls.is-disabled a, .children-dropdown i.is-disabled {
|
||||
color: $gray4 !important;
|
||||
cursor: not-allowed !important;
|
||||
user-select: none;
|
||||
|
@ -341,7 +341,7 @@ export default {
|
|||
|
||||
&.opened-term:first-child {
|
||||
cursor: default;
|
||||
background-color: $blue1;
|
||||
background-color: $gray1;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
|
@ -352,7 +352,7 @@ export default {
|
|||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent transparent $blue1;
|
||||
border-color: transparent transparent transparent $gray1;
|
||||
border-left-width: 24px;
|
||||
border-top-width: 20px;
|
||||
border-bottom-width: 20px;
|
||||
|
|
|
@ -358,7 +358,7 @@ export default {
|
|||
}
|
||||
this.$termsListBus.$on('editTerm', (term) => {
|
||||
|
||||
// Position edit form in a visible area
|
||||
// Position edit form in a visible area
|
||||
let container = document.getElementById('repository-container');
|
||||
if (container && container.scrollTop && container.scrollTop > 80)
|
||||
this.termEditionFormTop = container.scrollTop - 80;
|
||||
|
@ -368,9 +368,12 @@ export default {
|
|||
this.editTerm = term;
|
||||
this.isEditingTerm = true;
|
||||
});
|
||||
this.$termsListBus.$on('termEditionSaved', () => {
|
||||
this.$termsListBus.$on('termEditionSaved', ({hasChangedParent}) => {
|
||||
this.isEditingTerm = false;
|
||||
this.editTerm = null;
|
||||
|
||||
if (hasChangedParent)
|
||||
this.loadTerms(0);
|
||||
});
|
||||
this.$termsListBus.$on('termEditionCanceled', () => {
|
||||
this.isEditingTerm = false;
|
||||
|
|
|
@ -10,8 +10,8 @@ export default {
|
|||
onEditTerm(term) {
|
||||
this.$emit('editTerm', term);
|
||||
},
|
||||
onTermEditionSaved(term) {
|
||||
this.$emit('termEditionSaved', term);
|
||||
onTermEditionSaved({term, hasChangedParent}) {
|
||||
this.$emit('termEditionSaved', { term: term, hasChangedParent: hasChangedParent });
|
||||
},
|
||||
onTermEditionCanceled(term) {
|
||||
this.$emit('termEditionCanceled', term);
|
||||
|
|
Loading…
Reference in New Issue