From cae26521ccf763a8e1d21581ed138a1544469fdf Mon Sep 17 00:00:00 2001 From: Thomas Rittson <31796059+eliykat@users.noreply.github.com> Date: Wed, 4 Aug 2021 08:58:37 +1000 Subject: [PATCH] Move ciphers paging logic from jslib to web (#436) * Remove paging logic from ciphers base class * Fix linting * Fix spacing * Remove ngx-infinite-scroll (moved to web) --- angular/package-lock.json | 44 ------------------ angular/package.json | 1 - angular/src/components/ciphers.component.ts | 50 +++------------------ 3 files changed, 5 insertions(+), 90 deletions(-) diff --git a/angular/package-lock.json b/angular/package-lock.json index a28ed9f7fa..f5e834548b 100644 --- a/angular/package-lock.json +++ b/angular/package-lock.json @@ -20,7 +20,6 @@ "@angular/router": "^11.2.11", "@bitwarden/jslib-common": "file:../common", "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git", - "ngx-infinite-scroll": "10.0.1", "rxjs": "6.6.7", "tldjs": "^2.3.1", "zone.js": "0.11.4" @@ -180,12 +179,6 @@ "resolved": "../common", "link": true }, - "node_modules/@scarf/scarf": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.1.0.tgz", - "integrity": "sha512-b2iE8kjjzzUo2WZ0xuE2N77kfnTds7ClrDxcz3Atz7h2XrNVoAPUoT75i7CY0st5x++70V91Y+c6RpBX9MX7Jg==", - "hasInstallScript": true - }, "node_modules/@types/duo_web_sdk": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/@types/duo_web_sdk/-/duo_web_sdk-2.7.1.tgz", @@ -273,16 +266,6 @@ "node": "*" } }, - "node_modules/ngx-infinite-scroll": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-10.0.1.tgz", - "integrity": "sha512-7is0eJZ9kJPsaHohRmMhJ/QFHAW9jp9twO5HcHRvFM/Yl/R8QCiokgjwmH0/CR3MuxUanxfHZMfO3PbYTwlBEg==", - "hasInstallScript": true, - "dependencies": { - "@scarf/scarf": "^1.1.0", - "opencollective-postinstall": "^2.0.2" - } - }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -292,14 +275,6 @@ "wrappy": "1" } }, - "node_modules/opencollective-postinstall": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz", - "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==", - "bin": { - "opencollective-postinstall": "index.js" - } - }, "node_modules/parse5": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz", @@ -493,11 +468,6 @@ "zxcvbn": "^4.4.2" } }, - "@scarf/scarf": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.1.0.tgz", - "integrity": "sha512-b2iE8kjjzzUo2WZ0xuE2N77kfnTds7ClrDxcz3Atz7h2XrNVoAPUoT75i7CY0st5x++70V91Y+c6RpBX9MX7Jg==" - }, "@types/duo_web_sdk": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/@types/duo_web_sdk/-/duo_web_sdk-2.7.1.tgz", @@ -575,15 +545,6 @@ "brace-expansion": "^1.1.7" } }, - "ngx-infinite-scroll": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-10.0.1.tgz", - "integrity": "sha512-7is0eJZ9kJPsaHohRmMhJ/QFHAW9jp9twO5HcHRvFM/Yl/R8QCiokgjwmH0/CR3MuxUanxfHZMfO3PbYTwlBEg==", - "requires": { - "@scarf/scarf": "^1.1.0", - "opencollective-postinstall": "^2.0.2" - } - }, "once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -593,11 +554,6 @@ "wrappy": "1" } }, - "opencollective-postinstall": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz", - "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==" - }, "parse5": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz", diff --git a/angular/package.json b/angular/package.json index be48560992..3425171c18 100644 --- a/angular/package.json +++ b/angular/package.json @@ -36,7 +36,6 @@ "@angular/router": "^11.2.11", "@bitwarden/jslib-common": "file:../common", "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git", - "ngx-infinite-scroll": "10.0.1", "rxjs": "6.6.7", "tldjs": "^2.3.1", "zone.js": "0.11.4" diff --git a/angular/src/components/ciphers.component.ts b/angular/src/components/ciphers.component.ts index 1c06516a07..e6b62cb1dc 100644 --- a/angular/src/components/ciphers.component.ts +++ b/angular/src/components/ciphers.component.ts @@ -19,19 +19,14 @@ export class CiphersComponent { loaded: boolean = false; ciphers: CipherView[] = []; - pagedCiphers: CipherView[] = []; searchText: string; searchPlaceholder: string = null; filter: (cipher: CipherView) => boolean = null; deleted: boolean = false; protected searchPending = false; - protected didScroll = false; - protected pageSize = 100; private searchTimeout: any = null; - private pagedCiphersCount = 0; - private refreshing = false; constructor(protected searchService: SearchService) { } @@ -41,37 +36,12 @@ export class CiphersComponent { this.loaded = true; } - 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, deleted: boolean = false) { this.loaded = false; this.ciphers = []; await this.load(filter, deleted); } - async refresh() { - try { - this.refreshing = true; - await this.reload(this.filter, this.deleted); - } finally { - this.refreshing = false; - } - } - async applyFilter(filter: (cipher: CipherView) => boolean = null) { this.filter = filter; await this.search(null); @@ -82,16 +52,13 @@ export class CiphersComponent { if (this.searchTimeout != null) { clearTimeout(this.searchTimeout); } - const deletedFilter: (cipher: CipherView) => boolean = c => c.isDeleted === this.deleted; if (timeout == null) { - this.ciphers = await this.searchService.searchCiphers(this.searchText, [this.filter, deletedFilter], indexedCiphers); - await this.resetPaging(); + this.doSearch(indexedCiphers); return; } this.searchPending = true; this.searchTimeout = setTimeout(async () => { - this.ciphers = await this.searchService.searchCiphers(this.searchText, [this.filter, deletedFilter], indexedCiphers); - await this.resetPaging(); + this.doSearch(indexedCiphers); this.searchPending = false; }, timeout); } @@ -116,16 +83,9 @@ export class CiphersComponent { 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; - } + protected deletedFilter: (cipher: CipherView) => boolean = c => c.isDeleted === this.deleted; - async resetPaging() { - this.pagedCiphers = []; - this.loadMore(); + protected async doSearch(indexedCiphers?: CipherView[]) { + this.ciphers = await this.searchService.searchCiphers(this.searchText, [this.filter, this.deletedFilter], indexedCiphers); } }