From cc706a48dadf9af151d7b6e2c27550b0b38c425f Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Tue, 19 Mar 2019 12:44:22 -0400 Subject: [PATCH] paging ciphers for better performance --- jslib | 2 +- package-lock.json | 10 +++++----- package.json | 2 +- src/app/app.module.ts | 2 ++ src/app/organizations/vault/ciphers.component.ts | 5 ++--- src/app/organizations/vault/vault.component.ts | 8 ++++---- src/app/vault/ciphers.component.html | 9 +++++---- src/app/vault/ciphers.component.ts | 1 + src/app/vault/vault.component.ts | 15 ++++++++------- 9 files changed, 29 insertions(+), 25 deletions(-) diff --git a/jslib b/jslib index d4c2b20a25..d8f9177c03 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit d4c2b20a2594fcac1fdabf312b7289657b4af0c8 +Subproject commit d8f9177c03549667cf6d1e5f30536d010acc7b7d diff --git a/package-lock.json b/package-lock.json index 75aaefa264..59b45dcb73 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3332,7 +3332,7 @@ }, "external-editor": { "version": "2.2.0", - "resolved": "http://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz", + "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz", "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==", "requires": { "chardet": "^0.4.0", @@ -7662,9 +7662,9 @@ "dev": true }, "ngx-infinite-scroll": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-6.0.1.tgz", - "integrity": "sha512-20WcD+3Qh3O0IEFyIjt55JPTKw5W1hAxERXMUDgGDRveS3IBpBxv2DuX5vuHG/bNGC+WoTDlNR/XXScNNicRpw==", + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-7.0.1.tgz", + "integrity": "sha512-be9DAAuabV7VGI06/JUnS6pXC6mcBOzA4+SBCwOcP9WwJ2r5GjdZyOa34ls9hi1MnCOj3zrXLvPKQ/UDp6csIw==", "requires": { "opencollective": "^1.0.3" } @@ -7686,7 +7686,7 @@ }, "node-fetch": { "version": "1.6.3", - "resolved": "http://registry.npmjs.org/node-fetch/-/node-fetch-1.6.3.tgz", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.6.3.tgz", "integrity": "sha1-3CNO3WSJmC1Y6PDbT2lQKavNjAQ=", "requires": { "encoding": "^0.1.11", diff --git a/package.json b/package.json index 61cd668bee..5c53ab399d 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "font-awesome": "4.7.0", "jquery": "3.3.1", "lunr": "2.3.3", - "ngx-infinite-scroll": "6.0.1", + "ngx-infinite-scroll": "7.0.1", "node-forge": "0.7.6", "papaparse": "4.6.0", "popper.js": "1.14.4", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2e745a869e..65ef7a970e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,6 +3,7 @@ import 'core-js'; import { ToasterModule } from 'angular2-toaster'; import { Angulartics2Module } from 'angulartics2'; import { Angulartics2GoogleAnalytics } from 'angulartics2/ga'; +import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { AppRoutingModule } from './app-routing.module'; @@ -223,6 +224,7 @@ registerLocaleData(localeZhTw, 'zh-TW'); }, }), ToasterModule.forRoot(), + InfiniteScrollModule, ], declarations: [ AcceptOrganizationComponent, diff --git a/src/app/organizations/vault/ciphers.component.ts b/src/app/organizations/vault/ciphers.component.ts index abf4fc9ee4..d68856d2a7 100644 --- a/src/app/organizations/vault/ciphers.component.ts +++ b/src/app/organizations/vault/ciphers.component.ts @@ -13,8 +13,6 @@ import { I18nService } from 'jslib/abstractions/i18n.service'; import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; import { SearchService } from 'jslib/abstractions/search.service'; -import { CipherData } from 'jslib/models/data/cipherData'; -import { Cipher } from 'jslib/models/domain/cipher'; import { Organization } from 'jslib/models/domain/organization'; import { CipherView } from 'jslib/models/view/cipherView'; @@ -59,7 +57,7 @@ export class CiphersComponent extends BaseCiphersComponent { } } - search(timeout: number = null) { + async search(timeout: number = null) { if (!this.organization.isAdmin) { return super.search(timeout); } @@ -73,6 +71,7 @@ export class CiphersComponent extends BaseCiphersComponent { } else { this.ciphers = this.searchService.searchCiphersBasic(filteredCiphers, this.searchText); } + await this.resetPaging(); } checkCipher(c: CipherView) { diff --git a/src/app/organizations/vault/vault.component.ts b/src/app/organizations/vault/vault.component.ts index 228d792406..edb5651808 100644 --- a/src/app/organizations/vault/vault.component.ts +++ b/src/app/organizations/vault/vault.component.ts @@ -90,7 +90,7 @@ export class VaultComponent implements OnInit, OnDestroy { if (qParams == null) { this.groupingsComponent.selectedAll = true; - await this.ciphersComponent.load(); + await this.ciphersComponent.reload(); } else { if (qParams.type) { const t = parseInt(qParams.type, null); @@ -101,7 +101,7 @@ export class VaultComponent implements OnInit, OnDestroy { await this.filterCollection(qParams.collectionId, true); } else { this.groupingsComponent.selectedAll = true; - await this.ciphersComponent.load(); + await this.ciphersComponent.reload(); } } @@ -136,7 +136,7 @@ export class VaultComponent implements OnInit, OnDestroy { this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchType'); const filter = (c: CipherView) => c.type === type; if (load) { - await this.ciphersComponent.load(filter); + await this.ciphersComponent.reload(filter); } else { await this.ciphersComponent.applyFilter(filter); } @@ -156,7 +156,7 @@ export class VaultComponent implements OnInit, OnDestroy { } }; if (load) { - await this.ciphersComponent.load(filter); + await this.ciphersComponent.reload(filter); } else { await this.ciphersComponent.applyFilter(filter); } diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html index 599ad6d23f..297ca38496 100644 --- a/src/app/vault/ciphers.component.html +++ b/src/app/vault/ciphers.component.html @@ -1,7 +1,8 @@ - - + +
- + @@ -62,7 +63,7 @@
-
+

{{'noItemsInList' | i18n}}

diff --git a/src/app/vault/ciphers.component.ts b/src/app/vault/ciphers.component.ts index 7fbabaad48..769c5f5b51 100644 --- a/src/app/vault/ciphers.component.ts +++ b/src/app/vault/ciphers.component.ts @@ -39,6 +39,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy protected toasterService: ToasterService, protected i18nService: I18nService, protected platformUtilsService: PlatformUtilsService, protected cipherService: CipherService) { super(searchService); + this.pageSize = 150; } ngOnDestroy() { diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts index 79e59af221..5c3f76cddc 100644 --- a/src/app/vault/vault.component.ts +++ b/src/app/vault/vault.component.ts @@ -102,7 +102,7 @@ export class VaultComponent implements OnInit, OnDestroy { if (params == null) { this.groupingsComponent.selectedAll = true; - await this.ciphersComponent.load(); + await this.ciphersComponent.reload(); } else { if (params.favorites) { this.groupingsComponent.selectedFavorites = true; @@ -120,7 +120,7 @@ export class VaultComponent implements OnInit, OnDestroy { await this.filterCollection(params.collectionId); } else { this.groupingsComponent.selectedAll = true; - await this.ciphersComponent.load(); + await this.ciphersComponent.reload(); } } @@ -154,7 +154,7 @@ export class VaultComponent implements OnInit, OnDestroy { async clearGroupingFilters() { this.ciphersComponent.showAddNew = true; this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchVault'); - await this.ciphersComponent.load(); + await this.ciphersComponent.reload(); this.clearFilters(); this.go(); } @@ -162,7 +162,7 @@ export class VaultComponent implements OnInit, OnDestroy { async filterFavorites() { this.ciphersComponent.showAddNew = true; this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchFavorites'); - await this.ciphersComponent.load((c) => c.favorite); + await this.ciphersComponent.reload((c) => c.favorite); this.clearFilters(); this.favorites = true; this.go(); @@ -171,7 +171,7 @@ export class VaultComponent implements OnInit, OnDestroy { async filterCipherType(type: CipherType) { this.ciphersComponent.showAddNew = true; this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchType'); - await this.ciphersComponent.load((c) => c.type === type); + await this.ciphersComponent.reload((c) => c.type === type); this.clearFilters(); this.type = type; this.go(); @@ -181,7 +181,7 @@ export class VaultComponent implements OnInit, OnDestroy { this.ciphersComponent.showAddNew = true; folderId = folderId === 'none' ? null : folderId; this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchFolder'); - await this.ciphersComponent.load((c) => c.folderId === folderId); + await this.ciphersComponent.reload((c) => c.folderId === folderId); this.clearFilters(); this.folderId = folderId == null ? 'none' : folderId; this.go(); @@ -190,7 +190,8 @@ export class VaultComponent implements OnInit, OnDestroy { async filterCollection(collectionId: string) { this.ciphersComponent.showAddNew = true; this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchCollection'); - await this.ciphersComponent.load((c) => c.collectionIds != null && c.collectionIds.indexOf(collectionId) > -1); + await this.ciphersComponent.reload((c) => c.collectionIds != null && + c.collectionIds.indexOf(collectionId) > -1); this.clearFilters(); this.collectionId = collectionId; this.go();