Improvements on Terms list refactoring.

This commit is contained in:
Mateus Machado Luna 2018-08-13 11:30:25 -03:00
parent 8c912a0cc4
commit 3f70734942
5 changed files with 145 additions and 55 deletions

View File

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

View File

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

View File

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

View File

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

View File

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