Begins implementation of new hierarchy logic in Terms List.

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

@@ -28,13 +28,16 @@
                     }" 
                     :style="{'margin-left': (term.depth * 40) + 'px'}"
                     v-for="(term, index) in orderedTermsList"
-                    :key="term.id"> 
+                    :key="term.id"
+                    @click.prevent="isEditingTerm ? null : loadTerms(term.id)"> 
                 <a
-                        class="is-medium"
+                        class="is-small"
                         type="button"
                         @click="addNewChildTerm(term, index)"
                         :disabled="isEditingTerm">
-                    <b-icon icon="plus-circle"/>
+                    <b-icon 
+                            size="is-small"
+                            icon="plus-circle"/>
                 </a>
                 <span 
                         class="term-name" 
@@ -125,7 +128,7 @@ export default {
             this.generateOrderedTerms();
         },
         taxonomyId() {
-            this.loadTerms();
+            this.loadTerms(0);
         }
     },
     components: {
@@ -135,6 +138,7 @@ export default {
         ...mapActions('taxonomy', [
             'updateTerm',
             'deleteTerm',
+            'fetchChildTerms',
             'fetchTerms'
         ]),
         ...mapGetters('taxonomy',[
@@ -142,7 +146,7 @@ export default {
         ]),
         onChangeOrder() {
             this.order == 'asc' ? this.order = 'desc' : this.order = 'asc';
-            this.loadTerms();
+            this.loadTerms(0);
         },
         addNewTerm() {
             if (this.isEditingTerm) {
@@ -214,18 +218,20 @@ export default {
             } 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)) {
 
+                    if (JSON.stringify(term) != JSON.stringify(originalTerm))
                         term.saved = false;
-                    } else {
+                    else 
                         term.saved = true;
-                    }
+                    
                 } else {
                     term.saved = false;
                 }
+                this.isEditingTerm = false;
             }
             
             term.opened = !term.opened;
@@ -343,9 +349,10 @@ export default {
             else 
                 return term.name;
         },
-        loadTerms() {
+        loadTerms(parentId) {
+            
             this.isLoadingTerms = true;
-            this.fetchTerms({ taxonomyId: this.taxonomyId, fetchOnly: '', search: '', all: '', order: this.order})
+            this.fetchChildTerms({ parentId: parentId, taxonomyId: this.taxonomyId, fetchOnly: '', search: '', all: '', order: this.order})
                 .then(() => {
                     // Fill this.form data with current data.
                     this.isLoadingTerms = false;
@@ -358,7 +365,7 @@ export default {
     },
     created() {
         if (this.taxonomyId !== String) {
-            this.loadTerms();
+            this.loadTerms(0);
         }
     }
     
@@ -424,7 +431,7 @@ export default {
                 position: relative;
                 i, i:before { font-size: 20px; }
                 .mdi-plus-circle, .mdi-plus-circle:before{
-                    font-size: 18px;
+                    font-size: 14px;
                 }
                 a {
                     margin-right: 8px;

src/api/class-tainacan-rest-controller.php

@@ -78,8 +78,8 @@ class REST_Controller extends \WP_REST_Controller {
 			'metacompare'  => 'meta_compare',
 			'hideempty'    => 'hide_empty',
 			'perpage'      => 'posts_per_page',
-			'number'       => 'number',
-			'parent'       => 'parent',
+			'number'	   => 'number',
+			'parent'	   => 'parent',
 			'paged'        => 'paged',
 			'postin'       => 'post__in',
 			'relation'     => 'relation',

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

@@ -197,3 +197,32 @@ export const fetchTerms = ({ commit }, {taxonomyId, fetchOnly, search, all, orde
             });
     });
 };
+
+export const fetchChildTerms = ({ commit }, { parentId, taxonomyId, fetchOnly, search, all, order }) => {
+
+    let query = '';
+    if (order == undefined) {
+        order = 'asc';
+    }
+
+    if (fetchOnly && search && !all) {
+        query = `?order=${order}&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`;
+    } else if (fetchOnly && search && all) {
+        query = `?hideempty=0&order=${order}&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`;
+    } else {
+        query = `?hideempty=0&order=${order}`;
+    }
+    query += '&parent=' + parentId;
+
+    return new Promise((resolve, reject) => {
+        axios.tainacan.get(`/taxonomy/${taxonomyId}/terms${query}`)
+            .then(res => {
+                let terms = res.data;
+                commit('setChildTerms', { terms: terms, parent: parentId });
+                resolve(terms);
+            })
+            .catch(error => {
+                reject(error);
+            });
+    });
+};

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

@@ -36,6 +36,24 @@ export const setTerms = (state, terms) => {
     state.terms = terms;
 };
 
+export const setChildTerms = (state, { terms, parent }) => {
+    let index = state.terms.findIndex(aTerm => aTerm.id == parent);
+    if (index >= 0) {
+        let newIndex = 1;
+        for (let i = 0; i < terms.length; i++) {
+            let termIndex = state.terms.findIndex(aTerm => aTerm.id == terms[i].id);
+            if (termIndex >= 0) {
+                state.terms[termIndex] = terms[i];
+            } else {
+                state.terms.splice(index + newIndex, 0, terms[i]);
+                newIndex++;
+            }
+        }
+    } else {
+        state.terms = terms;
+    }
+};
+
 export const deleteTerm = ( state, termId ) => {
     let index = state.terms.findIndex(deletedTerm => deletedTerm.id === termId);
     if (index >= 0) {