move ciphers paging in jslib for shared use

src/angular/components/ciphers.component.ts

@@ -17,13 +17,18 @@ export class CiphersComponent {
 
     loaded: boolean = false;
     ciphers: CipherView[] = [];
+    pagedCiphers: CipherView[] = [];
     searchText: string;
     searchPlaceholder: string = null;
     filter: (cipher: CipherView) => boolean = null;
 
     protected searchPending = false;
+    protected didScroll = false;
+    protected pageSize = 100;
 
     private searchTimeout: any = null;
+    private pagedCiphersCount = 0;
+    private refreshing = false;
 
     constructor(protected searchService: SearchService) { }
 
@@ -32,10 +37,35 @@ export class CiphersComponent {
         this.loaded = true;
     }
 
-    async refresh() {
+    loadMore() {
+        if (this.ciphers.length <= this.pageSize) {
+            return;
+        }
+        const pagedLength = this.pagedCiphers.length;
+        let pagedSize = this.pageSize;
+        if (this.refreshing && pagedLength === 0 && this.pagedCiphersCount > this.pageSize) {
+            pagedSize = this.pagedCiphersCount;
+        }
+        if (this.ciphers.length > pagedLength) {
+            this.pagedCiphers = this.pagedCiphers.concat(this.ciphers.slice(pagedLength, pagedLength + pagedSize));
+        }
+        this.pagedCiphersCount = this.pagedCiphers.length;
+        this.didScroll = this.pagedCiphers.length > this.pageSize;
+    }
+
+    async reload(filter: (cipher: CipherView) => boolean = null) {
         this.loaded = false;
         this.ciphers = [];
-        await this.load(this.filter);
+        await this.load(filter);
+    }
+
+    async refresh() {
+        try {
+            this.refreshing = true;
+            await this.reload(this.filter);
+        } finally {
+            this.refreshing = false;
+        }
     }
 
     async applyFilter(filter: (cipher: CipherView) => boolean = null) {
@@ -50,11 +80,13 @@ export class CiphersComponent {
         }
         if (timeout == null) {
             this.ciphers = await this.searchService.searchCiphers(this.searchText, this.filter);
+            await this.resetPaging();
             return;
         }
         this.searchPending = true;
         this.searchTimeout = setTimeout(async () => {
             this.ciphers = await this.searchService.searchCiphers(this.searchText, this.filter);
+            await this.resetPaging();
             this.searchPending = false;
         }, timeout);
     }
@@ -74,4 +106,21 @@ export class CiphersComponent {
     addCipherOptions() {
         this.onAddCipherOptions.emit();
     }
+
+    isSearching() {
+        return !this.searchPending && this.searchService.isSearchable(this.searchText);
+    }
+
+    isPaging() {
+        const searching = this.isSearching();
+        if (searching && this.didScroll) {
+            this.resetPaging();
+        }
+        return !searching && this.ciphers.length > this.pageSize;
+    }
+
+    async resetPaging() {
+        this.pagedCiphers = [];
+        this.loadMore();
+    }
 }