From 4604683cc34b0b1e477e69986c689e4877e317a7 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Fri, 29 Jun 2018 11:07:20 -0300
Subject: [PATCH] Adds sorting toggle to Terms List. Ref. #72.

---
 src/admin/components/lists/terms-list.vue | 40 ++++++++++++++++++++---
 src/js/store/modules/taxonomy/actions.js  | 13 +++++---
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/admin/components/lists/terms-list.vue b/src/admin/components/lists/terms-list.vue
index ed38dc82e..ec94d5737 100644
--- a/src/admin/components/lists/terms-list.vue
+++ b/src/admin/components/lists/terms-list.vue
@@ -7,6 +7,17 @@
                     @click="addNewTerm()">
                 {{ $i18n.get('label_new_term') }}
             </button>
+            <b-field class="order-area">
+                <button
+                        :disabled="orderedTermsList.length <= 0 || isLoadingTerms || isEditingTerm"
+                        class="button is-white is-small"
+                        @click="onChangeOrder()">
+                    <b-icon 
+                            class="gray-icon"
+                            :icon="order === 'ASC' ? 'sort-ascending' : 'sort-descending'"/>
+                </button>
+            </b-field>
+
             <br>
             <br>
             <div    
@@ -94,13 +105,14 @@ export default {
     data(){
         return {
             isLoadingTerms: false,
+            isEditingTerm: false,
             formWithErrors: '',
-            orderedTermsList: []
+            orderedTermsList: [],
+            order: 'asc'
         }
     },
     props: {
         taxonomyId: String,
-        //taxonomyPath: ''
     },
     computed: {
         termsList() {
@@ -127,6 +139,10 @@ export default {
         ...mapGetters('taxonomy',[
             'getTerms'
         ]),
+        onChangeOrder() {
+            this.order == 'asc' ? this.order = 'desc' : this.order = 'asc';
+            this.loadTerms();
+        },
         addNewTerm() {
             let newTerm = {
                 taxonomyId: this.taxonomyId,
@@ -154,7 +170,7 @@ export default {
             this.editTerm(newTerm, parentIndex + 1);
         },
         editTerm(term, index) {
-     
+            this.isEditingTerm = true;
             if (!term.opened) {
 
                 for (let i = 0; i < this.orderedTermsList.length; i++) {
@@ -265,7 +281,7 @@ export default {
             }   
         },
         onTermEditionFinished() {   
-
+            this.isEditingTerm = false;
         },
         onTermEditionCanceled(term) {
 
@@ -278,6 +294,7 @@ export default {
                 if (term.id == 'new')
                     this.removeTerm(term);
             }
+            this.isEditingTerm = false;
         },
         buildOrderedTermsList(parentId, termDepth) {
 
@@ -315,7 +332,7 @@ export default {
         },
         loadTerms() {
             this.isLoadingTerms = true;
-            this.fetchTerms({ taxonomyId: this.taxonomyId, fetchOnly: '', search: '', all: ''})
+            this.fetchTerms({ taxonomyId: this.taxonomyId, fetchOnly: '', search: '', all: '', order: this.order})
                 .then(() => {
                     // Fill this.form data with current data.
                     this.isLoadingTerms = false;
@@ -339,6 +356,19 @@ export default {
 
     @import "../../scss/_variables.scss";
 
+    .order-area {
+        display: inline-block;
+        padding: 4px;
+        margin-left: 30px;
+
+        .gray-icon, .gray-icon .icon {
+            color: $tainacan-placeholder-color !important;
+        }
+        .gray-icon .icon i::before, .gray-icon i::before {
+            font-size: 21px !important;
+        }
+    }
+
     .term-item {
         font-size: 14px;
         padding: 0.7em 0.9em;
diff --git a/src/js/store/modules/taxonomy/actions.js b/src/js/store/modules/taxonomy/actions.js
index 666321ead..fd9fba272 100644
--- a/src/js/store/modules/taxonomy/actions.js
+++ b/src/js/store/modules/taxonomy/actions.js
@@ -170,16 +170,19 @@ export const updateTerm = ({ commit }, { taxonomyId, termId, name, description,
     });
 };
 
-export const fetchTerms = ({ commit }, {taxonomyId, fetchOnly, search, all}) => {
+export const fetchTerms = ({ commit }, {taxonomyId, fetchOnly, search, all, order}) => {
     
     let query = '';
-    
+    if (order == undefined) {
+        order = 'asc';
+    }
+
     if(fetchOnly && search && !all ){
-        query = `?order=asc&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`;
+        query = `?order=${order}&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`;
     } else if(fetchOnly && search && all ){ 
-        query = `?hideempty=0&order=asc&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`;
+        query = `?hideempty=0&order=${order}&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`;
     } else {
-        query = '?hideempty=0&order=asc';
+        query =`?hideempty=0&order=${order}`;
     }
 
     return new Promise((resolve, reject) => {