Improvements on Terms list refactoring.
This commit is contained in:
parent
8c912a0cc4
commit
3f70734942
|
@ -130,7 +130,7 @@
|
|||
},
|
||||
methods: {
|
||||
...mapActions('taxonomy', [
|
||||
'sendTerm',
|
||||
'sendChildTerm',
|
||||
'updateChildTerm',
|
||||
]),
|
||||
...mapGetters('taxonomy', [
|
||||
|
@ -139,7 +139,7 @@
|
|||
saveEdition(term) {
|
||||
|
||||
if (term.id === 'new') {
|
||||
this.sendTerm({
|
||||
this.sendChildTerm({
|
||||
taxonomyId: this.taxonomyId,
|
||||
name: this.editForm.name,
|
||||
description: this.editForm.description,
|
||||
|
@ -170,7 +170,6 @@
|
|||
headerImageId: this.editForm.header_image_id,
|
||||
})
|
||||
.then(() => {
|
||||
this.editForm.saved = true;
|
||||
this.formErrors = {};
|
||||
this.$emit('onEditionFinished', this.editForm);
|
||||
})
|
||||
|
|
|
@ -20,14 +20,14 @@
|
|||
class="label-details">
|
||||
<span
|
||||
class="not-saved"
|
||||
v-if="!term.saved">
|
||||
v-if="term.id == 'new'">
|
||||
{{ $i18n.get('info_not_saved') }}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="children-dropdown"
|
||||
:class="{'is-disabled': isEditingTerm}"
|
||||
v-if="!isEditingTerm && term.total_children > 0"
|
||||
v-if="term.total_children > 0"
|
||||
@click.prevent="loadChildTerms(term.id, index)">
|
||||
<span class="icon">
|
||||
<i
|
||||
|
@ -89,7 +89,7 @@ export default {
|
|||
isEditingTerm: false,
|
||||
searchQuery: '',
|
||||
order: 'asc',
|
||||
showChildren: false
|
||||
showChildren: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
@ -104,16 +104,15 @@ export default {
|
|||
...mapActions('taxonomy', [
|
||||
'updateChildTerm',
|
||||
'deleteChildTerm',
|
||||
'fetchChildTerms',
|
||||
'fetchTerms'
|
||||
'fetchChildTerms'
|
||||
]),
|
||||
addNewChildTerm() {
|
||||
this.showChildren = true;
|
||||
this.$termsListBus.onAddNewChildTerm(this.term.id);
|
||||
},
|
||||
loadChildTerms(parentId, parentIndex) {
|
||||
|
||||
if (this.term.children == undefined || this.term.children.length <= 0) {
|
||||
|
||||
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})
|
||||
|
@ -147,7 +146,7 @@ export default {
|
|||
tryToRemoveTerm() {
|
||||
|
||||
// Checks if user is deleting a term with unsaved info.
|
||||
if (this.term.id == 'new' || !this.term.saved) {
|
||||
if (this.term.id == 'new') {
|
||||
this.$modal.open({
|
||||
parent: this,
|
||||
component: CustomDialog,
|
||||
|
@ -187,21 +186,22 @@ export default {
|
|||
this.$console.log(error);
|
||||
});
|
||||
|
||||
// // Updates parent IDs for orphans
|
||||
// for (let orphanTerm of this.termsList) {
|
||||
// if (orphanTerm.parent == this.term.id) {
|
||||
// this.updateTerm({
|
||||
// taxonomyId: this.taxonomyId,
|
||||
// termId: orphanTerm.id,
|
||||
// name: orphanTerm.name,
|
||||
// description: orphanTerm.description,
|
||||
// parent: this.term.parent
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// this.$console.log(error);
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// Updates parent IDs for orphans
|
||||
if (this.term.children != undefined && this.term.children.length > 0) {
|
||||
for (let orphanTerm of this.term.children) {
|
||||
this.updateChildTerm({
|
||||
taxonomyId: this.taxonomyId,
|
||||
termId: orphanTerm.id,
|
||||
name: orphanTerm.name,
|
||||
description: orphanTerm.description,
|
||||
parent: this.term.parent,
|
||||
oldParent: this.term.id
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
</button>
|
||||
<b-field class="order-area">
|
||||
<button
|
||||
:disabled="orderedTermsList.length <= 0 || isLoadingTerms || isEditingTerm || order == 'asc'"
|
||||
:disabled="localTerms.length <= 0 || isLoadingTerms || isEditingTerm || order == 'asc'"
|
||||
class="button is-white is-small"
|
||||
@click="onChangeOrder('asc')">
|
||||
<b-icon
|
||||
|
@ -20,7 +20,7 @@
|
|||
icon="sort-ascending"/>
|
||||
</button>
|
||||
<button
|
||||
:disabled="orderedTermsList.length <= 0 || isLoadingTerms || isEditingTerm || order == 'desc'"
|
||||
:disabled="localTerms.length <= 0 || isLoadingTerms || isEditingTerm || order == 'desc'"
|
||||
class="button is-white is-small"
|
||||
@click="onChangeOrder('desc')">
|
||||
<b-icon
|
||||
|
@ -113,7 +113,6 @@ export default {
|
|||
isLoadingTerms: false,
|
||||
isEditingTerm: false,
|
||||
formWithErrors: '',
|
||||
orderedTermsList: [],
|
||||
order: 'asc',
|
||||
termEditionFormTop: 0,
|
||||
searchQuery: '',
|
||||
|
@ -126,19 +125,18 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
termsList() {
|
||||
console.log("Computei")
|
||||
return this.getTerms();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
termsList: {
|
||||
handler() {
|
||||
console.log("Senti")
|
||||
this.localTerms = JSON.parse(JSON.stringify(this.termsList));
|
||||
t.dfs(this.localTerms, [], term => {
|
||||
term.opened = false;
|
||||
term.saved = true
|
||||
});
|
||||
for (let aTerm of this.localTerms) {
|
||||
t.dfs(aTerm, [], (node) => {
|
||||
node.opened = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
|
@ -178,16 +176,15 @@ export default {
|
|||
if (parent == 0) {
|
||||
this.localTerms.unshift(newTerm);
|
||||
} else {
|
||||
console.log(parent)
|
||||
for (let term of this.localTerms) {
|
||||
let parentTerm = t.find(term, [], (node, par) => { return node.id == parent; });
|
||||
if (parentTerm != undefined) {
|
||||
if (parentTerm['children'] == undefined)
|
||||
if (parentTerm['children'] == undefined) {
|
||||
this.$set(parentTerm, 'children', []);
|
||||
parentTerm['children'].unshift(newTerm);
|
||||
|
||||
parentTerm.total_children = 1;
|
||||
}
|
||||
parentTerm['children'].unshift(newTerm);
|
||||
}
|
||||
console.log(parentTerm)
|
||||
}
|
||||
}
|
||||
this.$termsListBus.onEditTerm(newTerm);
|
||||
|
@ -197,14 +194,55 @@ export default {
|
|||
},
|
||||
onTermEditionCanceled(term) {
|
||||
|
||||
let originalIndex = this.termsList.findIndex(anOriginalTerm => anOriginalTerm.id == term.id);
|
||||
let canceledIndex = this.orderedTermsList.findIndex(canceledTerm => canceledTerm.id == term.id);
|
||||
if (originalIndex >= 0 && canceledIndex >= 0) {
|
||||
let originalTerm = JSON.parse(JSON.stringify(this.termsList[originalIndex]));
|
||||
this.orderedTermsList.splice(canceledIndex, 1, originalTerm);
|
||||
let originalTerm;
|
||||
for (let aTerm of this.termsList) {
|
||||
if (aTerm.id == term.id)
|
||||
originalTerm = aTerm;
|
||||
else {
|
||||
let childOriginalTerm = t.find(aTerm, [], (node, par) => { return node.id == term.id} );
|
||||
if (childOriginalTerm != undefined)
|
||||
originalTerm = childOriginalTerm;
|
||||
}
|
||||
}
|
||||
|
||||
if (originalTerm != undefined) {
|
||||
for (let i = 0; i < this.localTerms.length; i++) {
|
||||
if (this.localTerms[i].id == term.id) {
|
||||
this.$set(this.localTerms, i, JSON.parse(JSON.stringify(originalTerm)));
|
||||
break;
|
||||
} else {
|
||||
let canceledParent = t.find(this.localTerms[i], [], (node, par) => { return node.id == originalTerm.parent });
|
||||
if (canceledParent != undefined) {
|
||||
for (let j = 0; j < canceledParent['children'].length; j++){
|
||||
if (canceledParent['children'][j].id == originalTerm.id) {
|
||||
this.$set(canceledParent['children'], j, JSON.parse(JSON.stringify(originalTerm)));
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (term.id == 'new')
|
||||
this.removeTerm(term);
|
||||
if (term.id == 'new') {
|
||||
for (let i = 0; i < this.localTerms.length; i++) {
|
||||
if (this.localTerms[i].id == term.id) {
|
||||
this.localTerms.splice(i, 1);
|
||||
break;
|
||||
} else {
|
||||
let canceledParent = t.find(this.localTerms[i], [], (node, par) => { return node.id == term.parent });
|
||||
if (canceledParent != undefined) {
|
||||
for (let j = 0; j < canceledParent['children'].length; j++){
|
||||
if (canceledParent['children'][j].id == term.id) {
|
||||
canceledParent['children'].splice(j, i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$termsListBus.onTermEditionCanceled(term);
|
||||
},
|
||||
|
|
|
@ -232,7 +232,26 @@ export const fetchChildTerms = ({ commit }, { parentId, taxonomyId, fetchOnly, s
|
|||
});
|
||||
};
|
||||
|
||||
export const updateChildTerm = ({ commit }, { taxonomyId, termId, name, description, parent, headerImageId }) => {
|
||||
export const sendChildTerm = ({ commit }, { taxonomyId, name, description, parent, headerImageId }) => {
|
||||
return new Promise(( resolve, reject ) => {
|
||||
axios.tainacan.post(`/taxonomy/${taxonomyId}/terms/`, {
|
||||
name: name,
|
||||
description: description,
|
||||
parent: parent,
|
||||
header_image_id: headerImageId,
|
||||
})
|
||||
.then( res => {
|
||||
let term = res.data;
|
||||
commit('addChildTerm', {term: term, parent: parent });
|
||||
resolve( term );
|
||||
})
|
||||
.catch(error => {
|
||||
reject({ error_message: error['response']['data'].error_message, errors: error['response']['data'].errors });
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const updateChildTerm = ({ commit }, { taxonomyId, termId, name, description, parent, headerImageId, oldParent }) => {
|
||||
return new Promise(( resolve, reject ) => {
|
||||
axios.tainacan.patch(`/taxonomy/${taxonomyId}/terms/${termId}`, {
|
||||
name: name,
|
||||
|
@ -242,7 +261,7 @@ export const updateChildTerm = ({ commit }, { taxonomyId, termId, name, descript
|
|||
})
|
||||
.then( res => {
|
||||
let term = res.data;
|
||||
commit('updateChildTerm', {term: term, parent: parent });
|
||||
commit('updateChildTerm', { term: term, parent: parent, oldParent: oldParent });
|
||||
resolve( term );
|
||||
})
|
||||
.catch(error => {
|
||||
|
|
|
@ -41,7 +41,7 @@ export const clearTerms = (state) => {
|
|||
state.terms = [];
|
||||
};
|
||||
|
||||
|
||||
// Hierarchy usage of terms list -----------------
|
||||
export const setChildTerms = (state, { terms, parent }) => {
|
||||
|
||||
if (parent > 0 ) {
|
||||
|
@ -68,13 +68,17 @@ export const setChildTerms = (state, { terms, parent }) => {
|
|||
}
|
||||
};
|
||||
|
||||
export const updateChildTerm = (state, { term, parent }) => {
|
||||
export const addChildTerm = (state, { term, parent }) => {
|
||||
|
||||
if (parent > 0 ) {
|
||||
for (let aTerm of state.terms) {
|
||||
let childTerm = t.find(aTerm, [], (node, par) => { return node.id == term; });
|
||||
if (childTerm != undefined) {
|
||||
childTerm = term;
|
||||
let parentTerm = t.find(aTerm, [], (node, par) => { return node.id == parent; });
|
||||
if (parentTerm != undefined) {
|
||||
if (parentTerm['children'] == undefined) {
|
||||
Vue.set(parentTerm, 'children', []);
|
||||
}
|
||||
parentTerm['children'].unshift(term);
|
||||
parentTerm.total_children = parentTerm.children.length;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
@ -90,15 +94,45 @@ export const updateChildTerm = (state, { term, parent }) => {
|
|||
}
|
||||
};
|
||||
|
||||
export const updateChildTerm = (state, { term, parent, oldParent }) => {
|
||||
|
||||
if (oldParent == undefined) {
|
||||
if (parent > 0 ) {
|
||||
for (let aTerm of state.terms) {
|
||||
let childTerm = t.find(aTerm, [], (node, par) => { return node.id == term.id; });
|
||||
if (childTerm != undefined) {
|
||||
childTerm = term;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (state.terms != undefined) {
|
||||
for (let i = 0; i < state.terms.length; i++) {
|
||||
if (state.terms[i].id == term.id)
|
||||
Vue.set(state.terms, i, term);
|
||||
}
|
||||
} else {
|
||||
state.terms = []
|
||||
state.terms.unshift(term);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Removes from old parent
|
||||
this.deleteChildTerm(term.id, oldParent)
|
||||
// Adds it to new one
|
||||
this.addChildTerm(term, parent);
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteChildTerm = ( state, {termId, parent} ) => {
|
||||
|
||||
if (parent > 0 ) {
|
||||
for (let aTerm of state.terms) {
|
||||
let parentTerm = t.bfs(aTerm, [], (node, par) => { return node.id == parent; });
|
||||
for (let i = 0; i < state.terms.length; i++) {
|
||||
let parentTerm = t.find(state.terms[i], [], (node, par) => { return node.id == parent; });
|
||||
if (parentTerm != undefined) {
|
||||
let index = parentTerm.children.findIndex(deletedTerm => deletedTerm.id == termId);
|
||||
if (index >= 0) {
|
||||
parentTerm.children.splice(index, 1);
|
||||
parentTerm.total_children = parentTerm.children.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue