From 08b66d5e5a4efd1bed176a40e31e8368759e3cfd Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Tue, 4 Dec 2018 23:37:39 +0200
Subject: [PATCH] Functional sort buttons

---
 client/src/ui/components/bd/ThemesView.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 57b2e84f..779540d3 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -40,10 +40,10 @@
                     </div>
                     <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
                         <div class="bd-searchSort bd-flex bd-flexGrow">
-                            <div class="bd-sort bd-active">Name<MiChevronDown size="18"/></div>
-                            <div class="bd-sort">Updated</div>
-                            <div class="bd-sort">Installs</div>
-                            <div class="bd-sort">Users</div>
+                            <div class="bd-sort" @click="sortBy('name')" :class="{'bd-active': sort === 'name', 'bd-flipY': ascending}">Name<MiChevronDown v-if="sort === 'name'" size="18"/></div>
+                            <div class="bd-sort" @click="sortBy('updated')" :class="{'bd-active': sort === 'updated', 'bd-flipY': ascending}">Updated<MiChevronDown v-if="sort === 'updated'" size="18" /></div>
+                            <div class="bd-sort" @click="sortBy('installs')" :class="{'bd-active': sort === 'installs', 'bd-flipY': ascending}">Installs<MiChevronDown v-if="sort === 'installs'" size="18" /></div>
+                            <div class="bd-sort" @click="sortBy('users')" :class="{'bd-active': sort === 'users', 'bd-flipY': ascending}">Users<MiChevronDown v-if="sort === 'users'" size="18" /></div>
                         </div>
                     </div>
                 </div>
@@ -83,7 +83,9 @@
                 pagination: {
                     page: 1,
                     pages: 1
-                }
+                },
+                sort: 'name',
+                ascending: false
             };
         },
         components: {
@@ -164,6 +166,15 @@
                 } finally {
                     this.loadingMore = false;
                 }
+            },
+            async sortBy(by) {
+                if (this.loadingOnline || this.loadingMore) return;
+                if (this.sort === by) {
+                    this.ascending = !this.ascending;
+                } else {
+                    this.sort = by;
+                    this.ascending = false;
+                }
             }
         }
     }