From 3f707349423fb076700ee35ee1f42d86fba4755a Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Mon, 13 Aug 2018 11:30:25 -0300
Subject: [PATCH] Improvements on Terms list refactoring.

---
 .../components/edition/term-edition-form.vue  |  5 +-
 .../components/lists/recursive-terms-list.vue | 44 +++++-----
 src/admin/components/lists/terms-list.vue     | 80 ++++++++++++++-----
 src/js/store/modules/taxonomy/actions.js      | 23 +++++-
 src/js/store/modules/taxonomy/mutations.js    | 48 +++++++++--
 5 files changed, 145 insertions(+), 55 deletions(-)

diff --git a/src/admin/components/edition/term-edition-form.vue b/src/admin/components/edition/term-edition-form.vue
index 73e8c09a6..767337ad7 100644
--- a/src/admin/components/edition/term-edition-form.vue
+++ b/src/admin/components/edition/term-edition-form.vue
@@ -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);
                         })
diff --git a/src/admin/components/lists/recursive-terms-list.vue b/src/admin/components/lists/recursive-terms-list.vue
index 846aca36f..5e309bb38 100644
--- a/src/admin/components/lists/recursive-terms-list.vue
+++ b/src/admin/components/lists/recursive-terms-list.vue
@@ -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);
+                                    });                       
+                                }
+                            }
                         }   
                     },
                 }
diff --git a/src/admin/components/lists/terms-list.vue b/src/admin/components/lists/terms-list.vue
index fa5d15a69..01ba3bf5f 100644
--- a/src/admin/components/lists/terms-list.vue
+++ b/src/admin/components/lists/terms-list.vue
@@ -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);
         },
diff --git a/src/js/store/modules/taxonomy/actions.js b/src/js/store/modules/taxonomy/actions.js
index 58cbba28e..c873d5bef 100644
--- a/src/js/store/modules/taxonomy/actions.js
+++ b/src/js/store/modules/taxonomy/actions.js
@@ -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 => {
diff --git a/src/js/store/modules/taxonomy/mutations.js b/src/js/store/modules/taxonomy/mutations.js
index c1a2c4435..44059f599 100644
--- a/src/js/store/modules/taxonomy/mutations.js
+++ b/src/js/store/modules/taxonomy/mutations.js
@@ -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;
                 }
             }
         }