From e3010fcd43f4c39f345801f4da209001fffeb1cd Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 5 Dec 2018 00:40:57 +0200
Subject: [PATCH] Functional sorting

---
 client/src/dev/serveremu.js                | 26 ++++++++++
 client/src/ui/components/bd/ThemesView.vue | 60 +++++++++++++---------
 2 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/client/src/dev/serveremu.js b/client/src/dev/serveremu.js
index 3df3bbad..e926296e 100644
--- a/client/src/dev/serveremu.js
+++ b/client/src/dev/serveremu.js
@@ -17,6 +17,27 @@ export default class ServerEmu {
             docs = this._themes;
         }
 
+        if (args.sort) {
+            switch (args.sort) {
+                case 'name':
+                    if (args.ascending) docs = docs.sort((docA, docB) => docA.name.toUpperCase() < docB.name.toUpperCase());
+                    else docs = docs.sort((docA, docB) => docA.name.toUpperCase() > docB.name.toUpperCase());
+                    break;
+                case 'updated':
+                    if (args.ascending) docs = docs.sort((docA, docB) => new Date(docA.updated).getTime() - new Date(docB.updated).getTime());
+                    else docs = docs.sort((docA, docB) => new Date(docB.updated).getTime() - new Date(docA.updated).getTime());
+                    break;
+                case 'installs':
+                    if (args.ascending) docs = docs.sort((docA, docB) => docA.installs - docB.installs);
+                    else docs = docs.sort((docA, docB) => docB.installs - docA.installs);
+                    break;
+                case 'users':
+                    if (args.ascending) docs = docs.sort((docA, docB) => docA.activeUsers - docB.activeUsers);
+                    else docs = docs.sort((docA, docB) => docB.activeUsers - docA.activeUsers);
+                    break;
+            }
+        }
+
         const total = docs.length;
         const pages = Math.ceil(total / 9);
 
@@ -30,6 +51,11 @@ export default class ServerEmu {
 
         return {
             docs,
+            filters: {
+                sterm: args.sterm || '',
+                ascending: args.ascending || false,
+                sort: args.sort || 'name'
+            },
             pagination: {
                 total,
                 pages,
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 779540d3..f0acef9a 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" @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 class="bd-sort" @click="sortBy('name')" :class="{'bd-active': onlineThemes.filters.sort === 'name', 'bd-flipY': onlineThemes.filters.ascending}">Name<MiChevronDown v-if="onlineThemes.filters.sort === 'name'" size="18"/></div>
+                            <div class="bd-sort" @click="sortBy('updated')" :class="{'bd-active': onlineThemes.filters.sort === 'updated', 'bd-flipY': onlineThemes.filters.ascending}">Updated<MiChevronDown v-if="onlineThemes.filters.sort === 'updated'" size="18" /></div>
+                            <div class="bd-sort" @click="sortBy('installs')" :class="{'bd-active': onlineThemes.filters.sort === 'installs', 'bd-flipY': onlineThemes.filters.ascending}">Installs<MiChevronDown v-if="onlineThemes.filters.sort === 'installs'" size="18" /></div>
+                            <div class="bd-sort" @click="sortBy('users')" :class="{'bd-active': onlineThemes.filters.sort === 'users', 'bd-flipY': onlineThemes.filters.ascending}">Users<MiChevronDown v-if="onlineThemes.filters.sort === 'users'" size="18" /></div>
                         </div>
                     </div>
                 </div>
@@ -75,17 +75,23 @@
                 ThemeManager,
                 local: true,
                 localThemes: ThemeManager.localThemes,
-                onlineThemes: null,
+                onlineThemes: {
+                    docs: [],
+                    filters: {
+                        sterm: '',
+                        sort: 'name',
+                        ascending: false
+                    },
+                    pagination: {
+                        total: 0,
+                        pages: 0,
+                        limit: 9,
+                        page: 1
+                    }
+                },
                 loadingOnline: false,
                 loadingMore: false,
-                searchHint: '',
-                sterm: '',
-                pagination: {
-                    page: 1,
-                    pages: 1
-                },
-                sort: 'name',
-                ascending: false
+                searchHint: ''
             };
         },
         components: {
@@ -110,9 +116,8 @@
                 if (this.loadingOnline || this.loadingMore) return;
                 this.loadingOnline = true;
                 try {
-                    const getThemes = await BdWebApi.themes.get({ sterm: this.sterm });
+                    const getThemes = await BdWebApi.themes.get(this.onlineThemes.filters);
                     this.onlineThemes = getThemes;
-                    this.pagination = this.onlineThemes.pagination;
                     if (!this.onlineThemes.docs) return;
                     this.searchHint = `${this.onlineThemes.pagination.total} Results`;
                 } catch (err) {
@@ -150,17 +155,25 @@
             },
             searchInput(e) {
                 if (this.loadingOnline || this.loadingMore) return;
-                this.sterm = e.target.value;
+                this.onlineThemes.filters.sterm = e.target.value;
                 this.refreshOnline();
             },
             async scrollend(e) {
-                if (this.pagination.page >= this.pagination.pages) return;
+                if (this.onlineThemes.pagination.page >= this.onlineThemes.pagination.pages) return;
                 if (this.loadingOnline || this.loadingMore) return;
                 this.loadingMore = true;
+
                 try {
-                    this.pagination.page = this.pagination.page + 1;
-                    const getThemes = await BdWebApi.themes.get({ sterm: this.sterm, page: this.pagination.page });
+                    const getThemes = await BdWebApi.themes.get({
+                        sterm: this.onlineThemes.filters.sterm,
+                        page: this.onlineThemes.pagination.page + 1,
+                        sort: this.onlineThemes.filters.sort,
+                        ascending: this.onlineThemes.filters.ascending
+                    });
+
                     this.onlineThemes.docs = [...this.onlineThemes.docs, ...getThemes.docs];
+                    this.onlineThemes.filters = getThemes.filters;
+                    this.onlineThemes.pagination = getThemes.pagination;
                 } catch (err) {
                     Logger.err('ThemesView', err);
                 } finally {
@@ -169,12 +182,13 @@
             },
             async sortBy(by) {
                 if (this.loadingOnline || this.loadingMore) return;
-                if (this.sort === by) {
-                    this.ascending = !this.ascending;
+                if (this.onlineThemes.filters.sort === by) {
+                    this.onlineThemes.filters.ascending = !this.onlineThemes.filters.ascending;
                 } else {
-                    this.sort = by;
-                    this.ascending = false;
+                    this.onlineThemes.filters.sort = by;
+                    this.onlineThemes.filters.ascending = false;
                 }
+                this.refreshOnline();
             }
         }
     }