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)
This commit is contained in:
parent
65c998dd0d
commit
cae26521cc
|
@ -20,7 +20,6 @@
|
||||||
"@angular/router": "^11.2.11",
|
"@angular/router": "^11.2.11",
|
||||||
"@bitwarden/jslib-common": "file:../common",
|
"@bitwarden/jslib-common": "file:../common",
|
||||||
"duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git",
|
"duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git",
|
||||||
"ngx-infinite-scroll": "10.0.1",
|
|
||||||
"rxjs": "6.6.7",
|
"rxjs": "6.6.7",
|
||||||
"tldjs": "^2.3.1",
|
"tldjs": "^2.3.1",
|
||||||
"zone.js": "0.11.4"
|
"zone.js": "0.11.4"
|
||||||
|
@ -180,12 +179,6 @@
|
||||||
"resolved": "../common",
|
"resolved": "../common",
|
||||||
"link": true
|
"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": {
|
"node_modules/@types/duo_web_sdk": {
|
||||||
"version": "2.7.1",
|
"version": "2.7.1",
|
||||||
"resolved": "https://registry.npmjs.org/@types/duo_web_sdk/-/duo_web_sdk-2.7.1.tgz",
|
"resolved": "https://registry.npmjs.org/@types/duo_web_sdk/-/duo_web_sdk-2.7.1.tgz",
|
||||||
|
@ -273,16 +266,6 @@
|
||||||
"node": "*"
|
"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": {
|
"node_modules/once": {
|
||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||||
|
@ -292,14 +275,6 @@
|
||||||
"wrappy": "1"
|
"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": {
|
"node_modules/parse5": {
|
||||||
"version": "5.1.1",
|
"version": "5.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
|
||||||
|
@ -493,11 +468,6 @@
|
||||||
"zxcvbn": "^4.4.2"
|
"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": {
|
"@types/duo_web_sdk": {
|
||||||
"version": "2.7.1",
|
"version": "2.7.1",
|
||||||
"resolved": "https://registry.npmjs.org/@types/duo_web_sdk/-/duo_web_sdk-2.7.1.tgz",
|
"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"
|
"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": {
|
"once": {
|
||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||||
|
@ -593,11 +554,6 @@
|
||||||
"wrappy": "1"
|
"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": {
|
"parse5": {
|
||||||
"version": "5.1.1",
|
"version": "5.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
|
||||||
|
|
|
@ -36,7 +36,6 @@
|
||||||
"@angular/router": "^11.2.11",
|
"@angular/router": "^11.2.11",
|
||||||
"@bitwarden/jslib-common": "file:../common",
|
"@bitwarden/jslib-common": "file:../common",
|
||||||
"duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git",
|
"duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git",
|
||||||
"ngx-infinite-scroll": "10.0.1",
|
|
||||||
"rxjs": "6.6.7",
|
"rxjs": "6.6.7",
|
||||||
"tldjs": "^2.3.1",
|
"tldjs": "^2.3.1",
|
||||||
"zone.js": "0.11.4"
|
"zone.js": "0.11.4"
|
||||||
|
|
|
@ -19,19 +19,14 @@ export class CiphersComponent {
|
||||||
|
|
||||||
loaded: boolean = false;
|
loaded: boolean = false;
|
||||||
ciphers: CipherView[] = [];
|
ciphers: CipherView[] = [];
|
||||||
pagedCiphers: CipherView[] = [];
|
|
||||||
searchText: string;
|
searchText: string;
|
||||||
searchPlaceholder: string = null;
|
searchPlaceholder: string = null;
|
||||||
filter: (cipher: CipherView) => boolean = null;
|
filter: (cipher: CipherView) => boolean = null;
|
||||||
deleted: boolean = false;
|
deleted: boolean = false;
|
||||||
|
|
||||||
protected searchPending = false;
|
protected searchPending = false;
|
||||||
protected didScroll = false;
|
|
||||||
protected pageSize = 100;
|
|
||||||
|
|
||||||
private searchTimeout: any = null;
|
private searchTimeout: any = null;
|
||||||
private pagedCiphersCount = 0;
|
|
||||||
private refreshing = false;
|
|
||||||
|
|
||||||
constructor(protected searchService: SearchService) { }
|
constructor(protected searchService: SearchService) { }
|
||||||
|
|
||||||
|
@ -41,37 +36,12 @@ export class CiphersComponent {
|
||||||
this.loaded = true;
|
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) {
|
async reload(filter: (cipher: CipherView) => boolean = null, deleted: boolean = false) {
|
||||||
this.loaded = false;
|
this.loaded = false;
|
||||||
this.ciphers = [];
|
this.ciphers = [];
|
||||||
await this.load(filter, deleted);
|
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) {
|
async applyFilter(filter: (cipher: CipherView) => boolean = null) {
|
||||||
this.filter = filter;
|
this.filter = filter;
|
||||||
await this.search(null);
|
await this.search(null);
|
||||||
|
@ -82,16 +52,13 @@ export class CiphersComponent {
|
||||||
if (this.searchTimeout != null) {
|
if (this.searchTimeout != null) {
|
||||||
clearTimeout(this.searchTimeout);
|
clearTimeout(this.searchTimeout);
|
||||||
}
|
}
|
||||||
const deletedFilter: (cipher: CipherView) => boolean = c => c.isDeleted === this.deleted;
|
|
||||||
if (timeout == null) {
|
if (timeout == null) {
|
||||||
this.ciphers = await this.searchService.searchCiphers(this.searchText, [this.filter, deletedFilter], indexedCiphers);
|
this.doSearch(indexedCiphers);
|
||||||
await this.resetPaging();
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.searchPending = true;
|
this.searchPending = true;
|
||||||
this.searchTimeout = setTimeout(async () => {
|
this.searchTimeout = setTimeout(async () => {
|
||||||
this.ciphers = await this.searchService.searchCiphers(this.searchText, [this.filter, deletedFilter], indexedCiphers);
|
this.doSearch(indexedCiphers);
|
||||||
await this.resetPaging();
|
|
||||||
this.searchPending = false;
|
this.searchPending = false;
|
||||||
}, timeout);
|
}, timeout);
|
||||||
}
|
}
|
||||||
|
@ -116,16 +83,9 @@ export class CiphersComponent {
|
||||||
return !this.searchPending && this.searchService.isSearchable(this.searchText);
|
return !this.searchPending && this.searchService.isSearchable(this.searchText);
|
||||||
}
|
}
|
||||||
|
|
||||||
isPaging() {
|
protected deletedFilter: (cipher: CipherView) => boolean = c => c.isDeleted === this.deleted;
|
||||||
const searching = this.isSearching();
|
|
||||||
if (searching && this.didScroll) {
|
|
||||||
this.resetPaging();
|
|
||||||
}
|
|
||||||
return !searching && this.ciphers.length > this.pageSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
async resetPaging() {
|
protected async doSearch(indexedCiphers?: CipherView[]) {
|
||||||
this.pagedCiphers = [];
|
this.ciphers = await this.searchService.searchCiphers(this.searchText, [this.filter, this.deletedFilter], indexedCiphers);
|
||||||
this.loadMore();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue