Several improvements on Terms List refactoring.

src/admin/components/edition/term-edition-form.vue

@@ -35,7 +35,7 @@
                             class="button is-rounded is-secondary"
                             id="button-delete-header"
                             :aria-label="$i18n.get('label_button_delete_thumb')"
-                            @click="deleteThumbnail()">
+                            @click="deleteHeaderImage()">
                         <b-icon 
                             size="is-small"
                             icon="delete" />
@@ -131,7 +131,7 @@
         methods: {
             ...mapActions('taxonomy', [
                 'sendTerm',
-                'updateTerm',
+                'updateChildTerm',
             ]),
             ...mapGetters('taxonomy', [
                 'getTerms'
@@ -149,7 +149,7 @@
                         .then(() => {
                             this.editForm = {};
                             this.formErrors = {};
-                            this.$termsListBus.onTermEditionSaved(this.editForm);
+                            this.$emit('onEditionFinished');
                         })
                         .catch((errors) => {
                             for (let error of errors.errors) {
@@ -161,7 +161,7 @@
                         });
 
                 } else {
-                    this.updateTerm({
+                    this.updateChildTerm({
                         taxonomyId: this.taxonomyId,
                         termId: this.editForm.id,
                         name: this.editForm.name,
@@ -172,7 +172,7 @@
                         .then(() => {
                             this.editForm.saved = true;
                             this.formErrors = {};
-                            this.$termsListBus.onTermEditionSaved(this.editForm);
+                            this.$emit('onEditionFinished', this.editForm);
                         })
                         .catch((errors) => {
                             for (let error of errors.errors) {
@@ -185,7 +185,7 @@
                 }
             },
             cancelEdition() {
-                this.$termsListBus.onTermEditionCanceled(this.editForm);
+                this.$emit('onEditionCanceled', this.editForm);
             },
             deleteHeaderImage() {
                 this.editForm = Object.assign({},
@@ -197,7 +197,6 @@
                 );
             },
             initializeMediaFrames() {
-
                 this.headerImageMediaFrame = new wpMediaFrames.headerImageControl(
                     'my-header-image-media-frame', {
                         button_labels: {
@@ -226,7 +225,7 @@
                 }
             },
         },
-        created() {
+        mounted() {
             this.initializeMediaFrames();
         }
     }

src/admin/components/lists/recursive-terms-list.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div style="width: 100%;">
     <div
             class="term-item"
             :class="{
@@ -13,7 +13,7 @@
         <span 
                 class="term-name" 
                 :class="{'is-danger': formWithErrors == term.id }">
-            {{ term.saved && !term.opened ? term.name : getUnsavedTermName(term) }}
+            {{ term.name }}
         </span>
         <span   
                 v-if="term.id != undefined"
@@ -26,36 +26,35 @@
         </span>
         <span 
                 class="children-dropdown"
+                :class="{'is-disabled': isEditingTerm}"
                 v-if="!isEditingTerm && term.total_children > 0"
                 @click.prevent="loadChildTerms(term.id, index)">
            <span class="icon">
                 <i 
                         :class="{ 
-                            'mdi-menu-right': !term.hasLoadedChildren || (term.hasCollapsedChildren && term.hasLoadedChildren),  
+                            'mdi-menu-right': !showChildren,  
-                            'mdi-menu-down': (!term.hasCollapsedChildren && term.hasLoadedChildren) || (term.hasCollapsedChildren != undefined && term.hasCollapsedChildren) }"
+                            'mdi-menu-down': showChildren }"
                         class="mdi mdi-24px"/>
             </span>
             <span>{{ term.total_children + ' ' + $i18n.get('label_children_terms') }}</span>
         </span>
-        <span class="controls" >
+        <span 
-            <a 
+                class="controls" 
-                    @click="addNewChildTerm(term, index)"
+                :class="{'is-disabled': isEditingTerm}">
-                    :disabled="isEditingTerm">
+            <a @click="addNewChildTerm(term, index)">
                 <b-icon 
                         size="is-small"
                         icon="plus-circle"/>
             </a>
             <a
-                    v-if="!isEditingTerm"
                     @click.prevent="editTerm()">
                 <b-icon 
-                        type="is-secondary" 
+                        size="is-small" 
                         icon="pencil"/>
             </a>
-            <a 
+            <a @click.prevent="tryToRemoveTerm()">
-                @click.prevent="tryToRemoveTerm(term)">
                 <b-icon 
-                        type="is-secondary" 
+                        size="is-small"
                         icon="delete"/>
             </a>
         </span>
@@ -80,6 +79,7 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import RecursiveTermsList from './recursive-terms-list.vue';
+import CustomDialog from '../other/custom-dialog.vue';
 
 export default {
     name: 'RecursiveTermsList',
@@ -102,36 +102,13 @@ export default {
     },
     methods: {
         ...mapActions('taxonomy', [
-            'updateTerm',
+            'updateChildTerm',
-            'deleteTerm',
+            'deleteChildTerm',
             'fetchChildTerms',
             'fetchTerms'
         ]),
-        addNewChildTerm(parent, parentIndex) {
+        addNewChildTerm() {
-            if (this.isEditingTerm) {
+            this.$termsListBus.onAddNewChildTerm(this.term.id);
-                let editingTermIndex = this.orderedTermsList.findIndex(anEditingTerm => anEditingTerm.opened == true);
-                if (editingTermIndex >= 0)
-                    this.onTermEditionCanceled(this.orderedTermsList[editingTermIndex]);
-            }
-
-            let newTerm = {
-                taxonomyId: this.taxonomyId,
-                name:  this.$i18n.get('label_term_without_name'),
-                description: '',
-                parent: parent.id,
-                id: 'new',
-                saved: false,
-                depth: parent.depth + 1
-            }
-            this.orderedTermsList.splice(parentIndex + 1, 0, newTerm);
-            this.editTerm(newTerm, parentIndex + 1);
-        },
-        getUnsavedTermName(term) {
-            // let originalIndex = this.termsList.findIndex(anOriginalTerm => anOriginalTerm.id == term.id);
-            // if (originalIndex >= 0)
-            //     return this.termsList[originalIndex].name;
-            // else 
-                return term.name;
         },        
         loadChildTerms(parentId, parentIndex) {
 
@@ -167,6 +144,69 @@ export default {
             // this.orderedTermsList.splice(index, 1, term);
         
         },
+        tryToRemoveTerm() {
+
+            // Checks if user is deleting a term with unsaved info.
+            if (this.term.id == 'new' || !this.term.saved) {
+                this.$modal.open({
+                    parent: this,
+                    component: CustomDialog,
+                    props: {
+                        icon: 'alert',
+                        title: this.$i18n.get('label_warning'),
+                        message: this.$i18n.get('info_warning_terms_not_saved'),
+                        onConfirm: () => { this.removeTerm(); },
+                    }
+                });  
+            } else {
+                this.removeTerm();
+            }
+
+        },
+        removeTerm() {
+
+            this.$modal.open({
+                parent: this,
+                component: CustomDialog,
+                props: {
+                    icon: 'alert',
+                    title: this.$i18n.get('label_warning'),
+                    message: this.$i18n.get('info_warning_selected_term_delete'),
+                    onConfirm: () => { 
+                        // If all checks passed, term can be deleted
+                        if (this.term.id == 'new') {
+                            let index = this.orderedTermsList.findIndex(deletedTerm => deletedTerm.id == 'new');
+                            if (index >= 0) {
+                                this.orderedTermsList.splice(index, 1);
+                            }
+                        } else {
+                            
+                            this.deleteChildTerm({taxonomyId: this.taxonomyId, termId: this.term.id, parent: this.term.parent })
+                                .then(() => {})
+                                .catch((error) => {
+                                    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);
+                            //         });
+                            //     }
+                            // }
+                        }   
+                    },
+                }
+            });  
+        }
     },
     created() {
         this.$termsListBus.$on('editTerm', (term) => {
@@ -199,8 +239,9 @@ export default {
         visibility: visible;
         opacity: 1;
         transition: display 0.3s, visibility 0.3s, opacity 0.3s;
+        width: 100%;
 
-        &:hover {
+        &:first-child:hover {
             background-color: $gray1 !important;
             .controls {
                 visibility: visible;
@@ -253,23 +294,29 @@ export default {
         .controls { 
             visibility: hidden;
             opacity: 0.0;
+            display: flex;
+            justify-content: space-between;
             background-color: $gray2;
-            padding: 0.4375rem 0.875rem;
+            padding: 0.76rem 0.875rem;
 
             a {
+                display: flex;
+                align-items: center;
                 margin: 0 0.375rem;
                 .icon {
                     bottom: 1px;   
                     position: relative;
                     i, i:before { font-size: 20px; }
-                    a {
-                        margin-right: 8px;
                 }
             }            
         }
+        .controls.is-disabled a, .children-dropdown.is-disabled {
+            color: $gray4 !important;
+            cursor: not-allowed !important;
+            user-select: none;
         }
 
-        &.opened-term {
+        &.opened-term:first-child {
             cursor: default;
             background-color: $blue1;
 

src/admin/components/lists/terms-list.vue

@@ -6,7 +6,7 @@
         <button
                 class="button is-secondary"
                 type="button"
-                @click="addNewTerm()"
+                @click="addNewTerm(0)"
                 :disabled="isEditingTerm">
             {{ $i18n.get('label_new_term') }}
         </button>
@@ -68,11 +68,11 @@
         </div>
         <div 
                 class="column is-4 edit-forms-list"
-                v-show="isEditingTerm">
+                v-if="isEditingTerm">
             <term-edition-form 
                     :style="{ 'top': termEditionFormTop + 'px'}"
                     :taxonomy-id="taxonomyId"
-                    @onEditionFinished="onTermEditionFinished()"
+                    @onEditionFinished="onTermEditionFinished(editTerm)"
                     @onEditionCanceled="onTermEditionCanceled(editTerm)"
                     @onErrorFound="formWithErrors = editTerm.id"
                     :edit-form="editTerm"/>
@@ -91,7 +91,7 @@
                 <button
                         id="button-create-term"
                         class="button is-secondary"
-                        @click="addNewTerm()">
+                        @click="addNewTerm(0)">
                     {{ $i18n.get('label_new_term') }}
                 </button>
             </div>
@@ -103,8 +103,8 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import TermEditionForm from '../edition/term-edition-form.vue';
-import CustomDialog from '../other/custom-dialog.vue';
 import RecursiveTermsList from './recursive-terms-list.vue'
+import t from 't';
 
 export default {
     name: 'TermsList',
@@ -126,12 +126,21 @@ export default {
     },
     computed: {
         termsList() {
+            console.log("Computei")
             return this.getTerms();
         }
     },
     watch: {
-        termsList() {
+        termsList: {
+            handler() { 
+                console.log("Senti")
                 this.localTerms = JSON.parse(JSON.stringify(this.termsList));
+                t.dfs(this.localTerms, [], term => { 
+                    term.opened = false; 
+                    term.saved = true 
+                });
+            },
+            deep: true
         },
         taxonomyId() {
             this.loadTerms(0);
@@ -143,10 +152,10 @@ export default {
     },
     methods: {
         ...mapActions('taxonomy', [
-            'updateTerm',
             'deleteTerm',
             'fetchChildTerms',
-            'fetchTerms'
+            'fetchTerms',
+            'clearTerms'
         ]),
         ...mapGetters('taxonomy',[
             'getTerms'
@@ -155,84 +164,36 @@ export default {
             this.order = newOrder;
             this.loadTerms(0);
         },
-        addNewTerm() {
+        addNewTerm(parent) {
 
             let newTerm = {
                 taxonomyId: this.taxonomyId,
                 name: this.$i18n.get('label_term_without_name'),
                 description: '',
-                parent: 0,
+                parent: parent,
                 id: 'new',
                 saved: false,
-                depth: 0
+                opened: true
             }
-            this.localTerms.push(newTerm);
+            if (parent == 0) {
-            this.editTerm(newTerm, this.orderedTermsList.length - 1);
+                this.localTerms.unshift(newTerm);
-        },
-        tryToRemoveTerm(term) {
-
-            // Checks if user is deleting a term with unsaved info.
-            if (term.id == 'new' || !term.saved || term.opened) {
-                this.$modal.open({
-                    parent: this,
-                    component: CustomDialog,
-                    props: {
-                        icon: 'alert',
-                        title: this.$i18n.get('label_warning'),
-                        message: this.$i18n.get('info_warning_terms_not_saved'),
-                        onConfirm: () => { this.removeTerm(term); },
-                    }
-                });  
             } else {
-                this.removeTerm(term);
+                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)
+                            this.$set(parentTerm, 'children', []);
+                        parentTerm['children'].unshift(newTerm);
                         
+                    }
+                    console.log(parentTerm)
+                }
+            }
+            this.$termsListBus.onEditTerm(newTerm);
         },
-        removeTerm(term) {
+        onTermEditionFinished(term) {
-
+            this.$termsListBus.onTermEditionSaved(term);
-            this.$modal.open({
-                parent: this,
-                component: CustomDialog,
-                props: {
-                    icon: 'alert',
-                    title: this.$i18n.get('label_warning'),
-                    message: this.$i18n.get('info_warning_selected_term_delete'),
-                    onConfirm: () => { 
-                        // If all checks passed, term can be deleted
-                        if (term.id == 'new') {
-                            let index = this.orderedTermsList.findIndex(deletedTerm => deletedTerm.id == 'new');
-                            if (index >= 0) {
-                                this.orderedTermsList.splice(index, 1);
-                            }
-                        } else {
-                            
-                            this.deleteTerm({taxonomyId: this.taxonomyId, termId: term.id})
-                            .then(() => {
-
-                            })
-                            .catch((error) => {
-                                this.$console.log(error);
-                            });
-
-                            // Updates parent IDs for orphans
-                            for (let orphanTerm of this.termsList) {
-                                if (orphanTerm.parent == term.id) {
-                                    this.updateTerm({
-                                        taxonomyId: this.taxonomyId, 
-                                        termId: orphanTerm.id, 
-                                        name: orphanTerm.name,
-                                        description: orphanTerm.description,
-                                        parent: term.parent
-                                    })
-                                    .catch((error) => {
-                                        this.$console.log(error);
-                                    });
-                                }
-                            }
-                        }   
-                    },
-                }
-            });  
         },
         onTermEditionCanceled(term) {
 
@@ -245,10 +206,12 @@ export default {
                 if (term.id == 'new')
                     this.removeTerm(term);
             }
-            this.isEditingTerm = false;
+            this.$termsListBus.onTermEditionCanceled(term);
         },
         loadTerms(parentId, parentIndex) {
 
+            this.clearTerms();
+
             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})
@@ -276,7 +239,9 @@ export default {
         this.$termsListBus.$on('termEditionCanceled', (term) => {
             this.isEditingTerm = false;
             this.editTerm = null;
-            this.onTermEditionCanceled();
+        });
+        this.$termsListBus.$on('addNewChildTerm', (parentId) => {
+            this.addNewTerm(parentId);
         });
     }
     

src/admin/js/main.js

@@ -8,7 +8,6 @@ import Buefy from 'buefy';
 import VTooltip from 'v-tooltip';
 import { VueHammer } from 'vue2-hammer';
 import VueMasonry from 'vue-masonry-css';
-import t from 't';
 
 // Custom elements
 import Text from '../../classes/metadata-types/text/Text.vue';
@@ -51,7 +50,6 @@ import VueTheMask from 'vue-the-mask';
 // Configure and Register Plugins
 Vue.use(Buefy);
 Vue.use(VTooltip);
-Vue.use(t);
 Vue.use(VueHammer);
 Vue.use(VueMasonry);
 Vue.use(I18NPlugin);

src/admin/js/terms-list-bus.js

@@ -15,6 +15,9 @@ export default {
                 },
                 onTermEditionCanceled(term) {
                     this.$emit('termEditionCanceled', term);
+                },
+                onAddNewChildTerm(parentId) {
+                    this.$emit('addNewChildTerm', parentId);
                 }
             }
         });

src/admin/pages/lists/collections-page.vue

@@ -158,6 +158,16 @@ export default {
     components: {
         CollectionsList
     },
+    computed: {
+        metadatum_mappers: {
+            get() {
+                return this.getMetadatumMappers();
+            }
+        },
+        collections() {
+            return this.getCollections(); 
+        }
+    },
     methods: {
          ...mapActions('collection', [
             'fetchCollections',
@@ -214,16 +224,6 @@ export default {
             });
         }
     },
-    computed: {
-        metadatum_mappers: {
-            get() {
-                return this.getMetadatumMappers();
-            }
-        },
-        collections() {
-            return this.getCollections(); 
-        }
-    },
     created() {
         this.collectionsPerPage = this.$userPrefs.get('collections_per_page');
         this.isLoadingMetadatumTypes = true;

src/js/store/modules/taxonomy/actions.js

@@ -200,6 +200,7 @@ export const fetchTerms = ({ commit }, {taxonomyId, fetchOnly, search, all, orde
     });
 };
 
+// Hierarchy usage of terms list -----------------
 export const fetchChildTerms = ({ commit }, { parentId, taxonomyId, fetchOnly, search, all, order }) => {
 
     let query = '';
@@ -230,3 +231,41 @@ export const fetchChildTerms = ({ commit }, { parentId, taxonomyId, fetchOnly, s
             });
     });
 };
+
+export const updateChildTerm = ({ commit }, { taxonomyId, termId, name, description, parent, headerImageId }) => {
+    return new Promise(( resolve, reject ) => {
+        axios.tainacan.patch(`/taxonomy/${taxonomyId}/terms/${termId}`, {
+            name: name,
+            description: description,
+            parent: parent,
+            header_image_id: headerImageId,
+        })
+            .then( res => {
+                let term = res.data;
+                commit('updateChildTerm', {term: term, parent: parent });
+                resolve( term );
+            })
+            .catch(error => {
+                reject({ error_message: error['response']['data'].error_message, errors: error['response']['data'].errors });
+            });
+    });
+};
+
+export const deleteChildTerm = ({ commit }, { taxonomyId, termId, parent }) => {
+    return new Promise(( resolve, reject ) => {
+        axios.tainacan.delete(`/taxonomy/${taxonomyId}/terms/${termId}?permanently=1`)
+            .then(res => {
+                let term = res.data;
+                commit('deleteChildTerm', { termId: termId, parent: parent });
+                resolve( term );
+            })
+            .catch(error => {
+                reject({ error_message: error['response']['data'].error_message, errors: error['response']['data'].errors });
+            });
+    });
+};
+
+
+export const clearTerms = ({ commit }) => {
+    commit('clearTerms');
+};

src/js/store/modules/taxonomy/mutations.js

@@ -37,6 +37,11 @@ export const setTerms = (state, terms) => {
     state.terms = terms;
 };
 
+export const clearTerms = (state) => {
+    state.terms = [];
+};
+
+
 export const setChildTerms = (state, { terms, parent }) => {
     
     if (parent > 0 ) {
@@ -47,7 +52,7 @@ export const setChildTerms = (state, { terms, parent }) => {
                     Vue.set(parentTerm, 'children', []);
 
                 for (let term of terms){
-                    parentTerm['children'].push(term);
+                    parentTerm['children'].unshift(term);
                 }     
             }
         }
@@ -55,7 +60,7 @@ export const setChildTerms = (state, { terms, parent }) => {
         if (state.terms != undefined) {
             
             for (let term of terms)
-                state.terms.push(term);
+                state.terms.unshift(term);
 
         } else {    
             state.terms = terms;
@@ -63,6 +68,50 @@ export const setChildTerms = (state, { terms, parent }) => {
     }
 };
 
+export const updateChildTerm = (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;   
+            }
+        }
+    } 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);
+        }
+    }
+};
+
+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; });
+            if (parentTerm != undefined) {
+                let index = parentTerm.children.findIndex(deletedTerm => deletedTerm.id == termId);
+                if (index >= 0) {
+                    parentTerm.children.splice(index, 1);
+                }
+            }
+        }
+    } else {
+        if (state.terms != undefined) {
+            for (let i = 0; i < state.terms.length; i++) {
+                if (state.terms[i].id == termId)
+                    state.terms.splice(i, 1);
+            }
+        }
+    }
+};
+
 export const deleteTerm = ( state, termId ) => {
     let index = state.terms.findIndex(deletedTerm => deletedTerm.id === termId);
     if (index >= 0) {