Fetch all data, filter and paginate locally

public/index.html

@@ -69,7 +69,7 @@
                         <input v-model="search_text" type="text" @input="search_table" placeholder="Filter"/>
                     </div>
                     <div id="filtered_count">
-                        Showing {{ filtered_items.length }} items
+                        Showing {{page_size * items_current_page}}-{{ page_size * items_current_page + page_items.length }} of {{ filtered_items.length }}
                     </div>
                 </div>
                 <table v-if="items.length > 0">
@@ -80,7 +80,7 @@
                         </tr>
                     </thead>
                     <tbody id="list_body">
-                        <tr class="list_item" v-for="item in filtered_items" :key="item.id">
+                        <tr class="list_item" v-for="item in page_items" :key="item.id">
                             <td><a v-on:click="display_item(item.id)">{{ item.type }}(#{{ item.id.slice(0,6) }}...)</a></td>
                             <td v-for="key in display_columns">
                                 <div v-if="item[key]">
@@ -129,10 +129,12 @@
                 </table>
                 <div class="pagination" v-if="items.length > 0">
                     <span v-on:click="prev" v-if="items_current_page > 0"><</span>
-                    <span v-for="index in [-2, -1, 0, 1, 2]" :key="index" v-on:click="set_page(items_current_page + index)" v-bind:class="{'emphasis': index == 0}" v-if="items_current_page+index >= 0 && items_pages[items_current_page+index + 1] > -1">
+                    <span v-if="items_current_page -2 > 0"><span v-on:click="set_page(0)">1 </span> . . .</span>
+                    <span v-for="index in [-2, -1, 0, 1, 2]" :key="index" v-on:click="set_page(items_current_page + index)" v-bind:class="{'emphasis': index == 0}" v-if="items_current_page+index >= 0 && items_current_page+index < number_of_pages">
                         {{ items_current_page + index + 1 }}
                     </span>
-                    <span v-on:click="next" v-if="items_pages[items_current_page + 2] != -1">></span>
+                    <span v-if="items_current_page + 2 < number_of_pages">. . . <span v-on:click="set_page(number_of_pages - 1)"> {{ number_of_pages }}</span></span>
+                    <span v-on:click="next" v-if="items_current_page + 1 < number_of_pages">></span>
                 </div>
             </div>
 

public/js/app.js

 const PAGE_SIZE = 32
+const BATCH_SIZE = 100
 const date_columns = ['dateCreated', 'dateModified']
 const ignore_columns = ['id', 'type', 'deleted', 'dateServerModified'] + date_columns
 const timestamp_to_string = ts => {
@@ -21,7 +22,7 @@ const format_item_dates = item => {
 }
 const get_display_columns = items => {
     columns = []
-    let merged = {...items[0], ...items[1], ...items[2]}
+    let merged = {...items[0], ...items[1], ...items[Math.ceil(items.length/2)], ...items[items.length - 1]}
     for (let key in merged) {
         if (ignore_columns.indexOf(key) == -1)
             columns.push(key)
@@ -41,6 +42,9 @@ var app = new Vue({
         item_types: ['Person', 'Account', 'MessageChannel', 'Message', 'Photo', 'File'],
         items: [],
         filtered_items: [],
+        page_size: PAGE_SIZE,
+        page_items: [],
+        number_of_pages: 0,
         items_pages: [0], // dateServerModified of each page
         items_current_page: 0,
         item_display: null,
@@ -54,7 +58,7 @@ var app = new Vue({
         display_columns: ['externalId'],
         query_key: 'type',
         query_text: '',
-        query_keys: ['type','id', 'externalId'],
+        query_keys: ['type', 'id', 'externalId'],
         data_keys_to_names: {
             id: 'ID',
             type: 'Type',
@@ -113,35 +117,41 @@ var app = new Vue({
             if (this.check_login()) {
                 let filters = {}
                 for (let i in this.item_filters) {
-                    if (this.item_filters[i] || this.item_filters[i] == {})
+                    if (this.item_filters[i] || this.item_filters[i] == {}) // "{}" is for "'[[edges]]' = {}"
                         filters[i] = this.item_filters[i]
                 }
-                filters['_limit'] = PAGE_SIZE
-                filters['dateServerModified>='] = this.items_pages[this.items_current_page]
+                filters['_limit'] = BATCH_SIZE
+                filters['dateServerModified>='] = 0
                 console.log("USED FILTERS", filters)
-                this.client.search(filters, true).then( items => {
-                    // mark the end of paging
-                    console.log(items);
-                    if (items.length == 0) {
-                        if (this.items_current_page > 0) {
-                            this.items_pages.push(-1)
-                            this.items_current_page--
-                        } else
-                            this.items = []
-                    } else {
-                        // save paging date index
-                        let last_date = items[items.length - 1].dateServerModified + 1
-                        if (this.items_pages.indexOf(last_date) == -1)
-                            this.items_pages.push(last_date)
-                        this.items = items.map( item => {
-                            return format_item_dates(item)
-                        })
-                        this.filtered_items = this.items
-                        this.display_columns = get_display_columns(items)
-                    }
-                })
+                this.fetch_recursive(filters)
             }
         },
+        fetch_recursive: function(filters) {
+            this.client.search(filters, true).then( items => {
+                // mark the end of paging
+                console.log(items);
+                // save paging date index
+                let last_date = items[items.length - 1].dateServerModified + 1
+                this.items = this.items.concat(items.map( item => {
+                    return format_item_dates(item)
+                }))
+                this.filtered_items = this.items
+                // set columns and page items
+                this.update_display()
+                // continue fetching if required
+                if (items.length >= BATCH_SIZE) {
+                    filters['dateServerModified>='] = last_date
+                    this.fetch_recursive(filters)
+                } else {
+                    console.log("Recursive fetch complete", items.length)
+                }
+            })
+        },
+        update_display: function () {
+            this.display_columns = get_display_columns(this.items)
+            this.page_items = this.filtered_items.slice(this.items_current_page * PAGE_SIZE, (this.items_current_page + 1) * PAGE_SIZE)
+            this.number_of_pages = Math.ceil(this.filtered_items.length / PAGE_SIZE)
+        },
         query_click: function(event) {
             this.reset_state()
             this.query()
@@ -161,19 +171,23 @@ var app = new Vue({
             }
         },
         search_table: function(event) {
-            if (!this.search_text || this.search_text.length < 3) {
+            if (!this.search_text || this.search_text.length < 2) {
                 this.filtered_items = this.items
-                return
+            } else {
+                this.filtered_items = this.search_items(this.items)
             }
-
-            let items = []
+            this.items_current_page = 0
+            this.update_display()
+        },
+        search_items: function() {
+            let filtered_items = []
             for (let item of this.items)
                 for (let key in item)
                     if ((item[key] + "").toLowerCase().indexOf(this.search_text.toLowerCase()) > -1) {
-                        items.push({...item})
+                        filtered_items.push({...item})
                         continue
                     }
-            this.filtered_items = items
+            return filtered_items
         },
         display_item: function (item_id) {
             this.item_image = ""
@@ -207,20 +221,19 @@ var app = new Vue({
         reset_state: function () {
             this.items = []
             this.items_current_page = 0
-            this.items_pages = [0]
             this.search_text = ""
         },
         next: function () {
             this.items_current_page++
-            this.query()
+            this.update_display()
         },
         prev: function () {
             this.items_current_page--
-            this.query()
+            this.update_display()
         },
         set_page: function (page_number) {
             this.items_current_page = page_number
-            this.query()
+            this.update_display()
         },
         delay_hide_messages: function () {
             setTimeout( () => {