Pagination

client/src/dev/serveremu.js

@@ -7,21 +7,34 @@ export default class ServerEmu {
 
         await new Promise(r => setTimeout(r, Math.random() * 3000));
 
-        let docs = this._themes;
-
+        let docs = [];
+        
         if (args && args.sterm) {
             const { sterm } = args;
             const reg = new RegExp(sterm, 'gi');
-            docs = docs.filter(doc => doc.tags.includes(sterm) || reg.exec(doc.name) || reg.exec(doc.description));
+            docs = this._themes.filter(doc => doc.tags.includes(sterm) || reg.exec(doc.name) || reg.exec(doc.description));
+        } else {
+            docs = this._themes;
+        }
+
+        const total = docs.length;
+        const pages = Math.ceil(total / 9);
+
+        let page = 1;
+        if (args && args.page) {
+            page = args.page;
+            docs = docs.slice((page - 1) * 9, page * 9);
+        } else {
+            docs = docs.slice(0, 9);
         }
 
         return {
             docs,
             pagination: {
-                total: docs.length,
-                pages: docs.length / 9,
+                total,
+                pages,
                 limit: 9,
-                page: 1
+                page
             }
         }
     }

client/src/ui/components/bd/ThemesView.vue

@@ -79,7 +79,12 @@
                 onlineThemes: null,
                 loadingOnline: false,
                 loadingMore: false,
-                searchHint: ''
+                searchHint: '',
+                sterm: '',
+                pagination: {
+                    page: 1,
+                    pages: 1
+                }
             };
         },
         components: {
@@ -98,13 +103,14 @@
             async refreshLocal() {
                 await this.ThemeManager.refreshThemes();
             },
-            async refreshOnline(sterm) {
+            async refreshOnline() {
                 this.searchHint = '';
                 if (this.loadingOnline || this.loadingMore) return;
                 this.loadingOnline = true;
                 try {
-                    const getThemes = await BdWebApi.themes.get({ sterm });
+                    const getThemes = await BdWebApi.themes.get({ sterm: this.sterm });
                     this.onlineThemes = getThemes;
+                    this.pagination = this.onlineThemes.pagination;
                     if (!this.onlineThemes.docs) return;
                     this.searchHint = `${this.onlineThemes.pagination.total} Results`;
                 } catch (err) {
@@ -142,13 +148,16 @@
             },
             searchInput(e) {
                 if (this.loadingOnline || this.loadingMore) return;
-                this.refreshOnline(e.target.value);
+                this.sterm = e.target.value;
+                this.refreshOnline();
             },
             async scrollend(e) {
+                if (this.pagination.page >= this.pagination.pages) return;
                 if (this.loadingOnline || this.loadingMore) return;
                 this.loadingMore = true;
                 try {
-                    const getThemes = await BdWebApi.themes.get();
+                    this.pagination.page = this.pagination.page + 1;
+                    const getThemes = await BdWebApi.themes.get({ sterm: this.sterm, page: this.pagination.page });
                     this.onlineThemes.docs = [...this.onlineThemes.docs, ...getThemes.docs];
                 } catch (err) {
                     Logger.err('ThemesView', err);