Adds parent selection via autocomplete to Term Edition Form.

This commit is contained in:
Mateus Machado Luna 2018-08-23 15:00:29 -03:00
parent 157bd4d441
commit 293d57fc7f
4 changed files with 39 additions and 24 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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;

View File

@ -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);