diff --git a/src/admin/components/edition/term-edition-form.vue b/src/admin/components/edition/term-edition-form.vue index 50df00a55..6bdcc4b89 100644 --- a/src/admin/components/edition/term-edition-form.vue +++ b/src/admin/components/edition/term-edition-form.vue @@ -149,7 +149,7 @@ .then(() => { this.editForm = {}; this.formErrors = {}; - this.$emit('onEditionFinished'); + this.$termsListBus.onTermEditionSaved(this.editForm); }) .catch((errors) => { for (let error of errors.errors) { @@ -172,7 +172,7 @@ .then(() => { this.editForm.saved = true; this.formErrors = {}; - this.$emit('onEditionFinished'); + this.$termsListBus.onTermEditionSaved(this.editForm); }) .catch((errors) => { for (let error of errors.errors) { @@ -185,7 +185,7 @@ } }, cancelEdition() { - this.$emit('onEditionCanceled', this.editForm); + this.$termsListBus.onTermEditionCanceled(this.editForm); }, deleteHeaderImage() { this.editForm = Object.assign({}, diff --git a/src/admin/components/lists/recursive-terms-list.vue b/src/admin/components/lists/recursive-terms-list.vue index c80dede60..b5d863334 100644 --- a/src/admin/components/lists/recursive-terms-list.vue +++ b/src/admin/components/lists/recursive-terms-list.vue @@ -46,8 +46,8 @@ icon="plus-circle"/> + v-if="!isEditingTerm" + @click.prevent="editTerm()"> @@ -63,7 +63,7 @@
anOriginalTerm.id === otherTerm.id); - // if (originalIndex >= 0) { - // let originalTerm = JSON.parse(JSON.stringify(this.termsList[originalIndex])); - // originalTerm.saved = otherTerm.saved; - // originalTerm.opened = otherTerm.opened; - // if (JSON.stringify(otherTerm) != JSON.stringify(originalTerm)) { - // otherTerm.saved = false; - // } else { - // otherTerm.saved = true; - // } - // // A new term is being closed - // } else { - // otherTerm.saved = false; - // } - - // otherTerm.opened = false; - // this.orderedTermsList.splice(i, 1, otherTerm); - // } - // } - } else { - let originalIndex = this.termsList.findIndex(anOriginalTerm => anOriginalTerm.id === term.id); - if (originalIndex >= 0) { - - let originalTerm = JSON.parse(JSON.stringify(this.termsList[originalIndex])); - originalTerm.saved = term.saved; - originalTerm.opened = term.opened; - - if (JSON.stringify(term) != JSON.stringify(originalTerm)) - term.saved = false; - else - term.saved = true; - - } else { - term.saved = false; - } - this.isEditingTerm = false; - } - - term.opened = !term.opened; - this.$emit('') + this.$termsListBus.onEditTerm(this.term); // this.orderedTermsList.splice(index, 1, term); }, }, created() { - //this.loadChildTerms(this.term.id, this.index); + this.$termsListBus.$on('editTerm', (term) => { + this.isEditingTerm = true; + }); + this.$termsListBus.$on('termEditionSaved', (term) => { + this.isEditingTerm = false; + this.term.opened = false; + }); + this.$termsListBus.$on('termEditionCanceled', (term) => { + this.isEditingTerm = false; + this.term.opened = false; + }); } } diff --git a/src/admin/components/lists/terms-list.vue b/src/admin/components/lists/terms-list.vue index 1126a782d..d9bd7a2aa 100644 --- a/src/admin/components/lists/terms-list.vue +++ b/src/admin/components/lists/terms-list.vue @@ -57,7 +57,7 @@
+ class="column is-4 edit-forms-list" + v-show="isEditingTerm"> + @onEditionCanceled="onTermEditionCanceled(editTerm)" + @onErrorFound="formWithErrors = editTerm.id" + :edit-form="editTerm"/>
@@ -119,7 +117,8 @@ export default { order: 'asc', termEditionFormTop: 0, searchQuery: '', - termsColapses: [] + localTerms: [], + editTerm: null } }, props: { @@ -132,7 +131,7 @@ export default { }, watch: { termsList() { - this.generateOrderedTerms(); + this.localTerms = JSON.parse(JSON.stringify(this.termsList)); }, taxonomyId() { this.loadTerms(0); @@ -157,11 +156,6 @@ export default { this.loadTerms(0); }, addNewTerm() { - if (this.isEditingTerm) { - let editingTermIndex = this.orderedTermsList.findIndex(anEditingTerm => anEditingTerm.opened == true); - if (editingTermIndex >= 0) - this.onTermEditionCanceled(this.orderedTermsList[editingTermIndex]); - } let newTerm = { taxonomyId: this.taxonomyId, @@ -172,16 +166,9 @@ export default { saved: false, depth: 0 } - this.orderedTermsList.push(newTerm); + this.localTerms.push(newTerm); this.editTerm(newTerm, this.orderedTermsList.length - 1); }, - getOriginalTerm(termId){ - let index = this.orderedTermsList.findIndex(originalTerm => originalTerm.id == termId); - if (index >= 0) { - return this.termsList[index]; - } - return null - }, tryToRemoveTerm(term) { // Checks if user is deleting a term with unsaved info. @@ -247,9 +234,6 @@ export default { } }); }, - onTermEditionFinished() { - this.isEditingTerm = false; - }, onTermEditionCanceled(term) { let originalIndex = this.termsList.findIndex(anOriginalTerm => anOriginalTerm.id == term.id); @@ -263,76 +247,12 @@ export default { } this.isEditingTerm = false; }, - buildOrderedTermsList(parentId, termDepth) { - - for (let i = 0; i < this.termsList.length; i++) { - let term = this.termsList[i]; - - if (term.parent != parentId ) { - continue; - } - - term.depth = termDepth; - if (this.orderedTermsList[term.id] === undefined ) { - term.opened = false; - term.saved = true ; - } else { - term.opened = (this.orderedTermsList[term.id].opened === undefined ? false : this.orderedTermsList[term.id].opened); - term.saved = (this.orderedTermsList[term.id].saved === undefined ? true : this.orderedTermsList[term.id].saved); - } - if (term.taxonomy != null) { - let termCollapseIndex = this.termsColapses.findIndex(aTerm => aTerm.id == term.id); - if (termCollapseIndex >= 0) { - term.collapsed = this.termsColapses[termCollapseIndex].collapsed; - term.hasLoadedChildren = this.termsColapses[termCollapseIndex].hasLoadedChildren; - term.hasCollapsedChildren = this.termsColapses[termCollapseIndex].hasCollapsedChildren; - term.opened = this.termsColapses[termCollapseIndex].opened; - term.saved = this.termsColapses[termCollapseIndex].saved; - } - this.orderedTermsList.push(JSON.parse(JSON.stringify(term))); - } - - this.buildOrderedTermsList(term.id, termDepth + 1); - } - }, - generateOrderedTerms() { - this.termsColapses = JSON.parse(JSON.stringify(this.orderedTermsList)); - this.orderedTermsList = new Array(); - this.buildOrderedTermsList(0, 0); - }, - - collapseTermChildren(parentId, parentIndex) { - if (this.orderedTermsList[parentIndex].hasCollapsedChildren != undefined && !this.orderedTermsList[parentIndex].hasCollapsedChildren) { - for (let i = 0; i < this.orderedTermsList.length; i++) { - if (this.orderedTermsList[i].parent == parentId) { - this.$set(this.orderedTermsList[i], 'collapsed', true); - this.$set(this.orderedTermsList[i], 'hasCollapsedChildren', false); - this.collapseTermChildren(this.orderedTermsList[i].id, i); - } - } - this.$set(this.orderedTermsList[parentIndex], 'hasCollapsedChildren', true); - } else { - for (let i = 0; i < this.orderedTermsList.length; i++) { - if (this.orderedTermsList[i].parent == parentId) { - this.$set(this.orderedTermsList[i], 'collapsed', false); - this.collapseTermChildren(this.orderedTermsList[i].id, i); - } - } - this.$set(this.orderedTermsList[parentIndex], 'hasCollapsedChildren', false); - } - }, loadTerms(parentId, parentIndex) { this.isLoadingTerms = true; let search = (this.searchQuery != undefined && this.searchQuery != '') ? { searchterm: this.searchQuery } : ''; this.fetchChildTerms({ parentId: parentId, taxonomyId: this.taxonomyId, fetchOnly: '', search: search, all: '', order: this.order}) .then(() => { - - if (parentId != undefined && parentId > 0) { - this.orderedTermsList[parentIndex].hasLoadedChildren = true; - this.orderedTermsList[parentIndex].hasCollapsedChildren = false; - } - this.generateOrderedTerms(); this.isLoadingTerms = false; }) .catch((error) => { @@ -345,6 +265,19 @@ export default { if (this.taxonomyId !== String) { this.loadTerms(0); } + this.$termsListBus.$on('editTerm', (term) => { + this.editTerm = term; + this.isEditingTerm = true; + }); + this.$termsListBus.$on('termEditionSaved', (term) => { + this.isEditingTerm = false; + this.editTerm = null; + }); + this.$termsListBus.$on('termEditionCanceled', (term) => { + this.isEditingTerm = false; + this.editTerm = null; + this.onTermEditionCanceled(); + }); } } diff --git a/src/admin/js/main.js b/src/admin/js/main.js index 5706b6e71..2ed2ae0cd 100644 --- a/src/admin/js/main.js +++ b/src/admin/js/main.js @@ -44,6 +44,7 @@ import draggable from 'vuedraggable' import store from '../../js/store/store' import router from './router' import eventBusSearch from '../../js/event-bus-search'; +import termsListBus from './terms-list-bus.js'; import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin, UserCapabilitiesPlugin } from './utilities'; import VueTheMask from 'vue-the-mask'; @@ -90,6 +91,7 @@ Vue.component('help-button', HelpButton); Vue.component('draggable', draggable); Vue.component('tainacan-title', TainacanTitle); +Vue.use(termsListBus, {}); Vue.use(eventBusSearch, { store: store, router: router}); // Changing title of pages diff --git a/src/admin/js/terms-list-bus.js b/src/admin/js/terms-list-bus.js new file mode 100644 index 000000000..0226d0c0a --- /dev/null +++ b/src/admin/js/terms-list-bus.js @@ -0,0 +1,22 @@ +export default { + + install(Vue, options = {}) { + + Vue.prototype.$termsListBus = new Vue({ + + data: { + }, + methods: { + onEditTerm(term) { + this.$emit('editTerm', term); + }, + onTermEditionSaved(term) { + this.$emit('termEditionSaved', term); + }, + onTermEditionCanceled(term) { + this.$emit('termEditionCanceled', term); + } + } + }); + } +} \ No newline at end of file