paging ciphers for better performance
This commit is contained in:
parent
e4093209cc
commit
cc706a48da
2
jslib
2
jslib
|
@ -1 +1 @@
|
||||||
Subproject commit d4c2b20a2594fcac1fdabf312b7289657b4af0c8
|
Subproject commit d8f9177c03549667cf6d1e5f30536d010acc7b7d
|
|
@ -3332,7 +3332,7 @@
|
||||||
},
|
},
|
||||||
"external-editor": {
|
"external-editor": {
|
||||||
"version": "2.2.0",
|
"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==",
|
"integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"chardet": "^0.4.0",
|
"chardet": "^0.4.0",
|
||||||
|
@ -7662,9 +7662,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"ngx-infinite-scroll": {
|
"ngx-infinite-scroll": {
|
||||||
"version": "6.0.1",
|
"version": "7.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-6.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-7.0.1.tgz",
|
||||||
"integrity": "sha512-20WcD+3Qh3O0IEFyIjt55JPTKw5W1hAxERXMUDgGDRveS3IBpBxv2DuX5vuHG/bNGC+WoTDlNR/XXScNNicRpw==",
|
"integrity": "sha512-be9DAAuabV7VGI06/JUnS6pXC6mcBOzA4+SBCwOcP9WwJ2r5GjdZyOa34ls9hi1MnCOj3zrXLvPKQ/UDp6csIw==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"opencollective": "^1.0.3"
|
"opencollective": "^1.0.3"
|
||||||
}
|
}
|
||||||
|
@ -7686,7 +7686,7 @@
|
||||||
},
|
},
|
||||||
"node-fetch": {
|
"node-fetch": {
|
||||||
"version": "1.6.3",
|
"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=",
|
"integrity": "sha1-3CNO3WSJmC1Y6PDbT2lQKavNjAQ=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"encoding": "^0.1.11",
|
"encoding": "^0.1.11",
|
||||||
|
|
|
@ -79,7 +79,7 @@
|
||||||
"font-awesome": "4.7.0",
|
"font-awesome": "4.7.0",
|
||||||
"jquery": "3.3.1",
|
"jquery": "3.3.1",
|
||||||
"lunr": "2.3.3",
|
"lunr": "2.3.3",
|
||||||
"ngx-infinite-scroll": "6.0.1",
|
"ngx-infinite-scroll": "7.0.1",
|
||||||
"node-forge": "0.7.6",
|
"node-forge": "0.7.6",
|
||||||
"papaparse": "4.6.0",
|
"papaparse": "4.6.0",
|
||||||
"popper.js": "1.14.4",
|
"popper.js": "1.14.4",
|
||||||
|
|
|
@ -3,6 +3,7 @@ import 'core-js';
|
||||||
import { ToasterModule } from 'angular2-toaster';
|
import { ToasterModule } from 'angular2-toaster';
|
||||||
import { Angulartics2Module } from 'angulartics2';
|
import { Angulartics2Module } from 'angulartics2';
|
||||||
import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
|
import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
|
||||||
|
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
|
||||||
|
|
||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
|
|
||||||
|
@ -223,6 +224,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
ToasterModule.forRoot(),
|
ToasterModule.forRoot(),
|
||||||
|
InfiniteScrollModule,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
AcceptOrganizationComponent,
|
AcceptOrganizationComponent,
|
||||||
|
|
|
@ -13,8 +13,6 @@ import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||||
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
|
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
|
||||||
import { SearchService } from 'jslib/abstractions/search.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 { Organization } from 'jslib/models/domain/organization';
|
||||||
import { CipherView } from 'jslib/models/view/cipherView';
|
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) {
|
if (!this.organization.isAdmin) {
|
||||||
return super.search(timeout);
|
return super.search(timeout);
|
||||||
}
|
}
|
||||||
|
@ -73,6 +71,7 @@ export class CiphersComponent extends BaseCiphersComponent {
|
||||||
} else {
|
} else {
|
||||||
this.ciphers = this.searchService.searchCiphersBasic(filteredCiphers, this.searchText);
|
this.ciphers = this.searchService.searchCiphersBasic(filteredCiphers, this.searchText);
|
||||||
}
|
}
|
||||||
|
await this.resetPaging();
|
||||||
}
|
}
|
||||||
|
|
||||||
checkCipher(c: CipherView) {
|
checkCipher(c: CipherView) {
|
||||||
|
|
|
@ -90,7 +90,7 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
if (qParams == null) {
|
if (qParams == null) {
|
||||||
this.groupingsComponent.selectedAll = true;
|
this.groupingsComponent.selectedAll = true;
|
||||||
await this.ciphersComponent.load();
|
await this.ciphersComponent.reload();
|
||||||
} else {
|
} else {
|
||||||
if (qParams.type) {
|
if (qParams.type) {
|
||||||
const t = parseInt(qParams.type, null);
|
const t = parseInt(qParams.type, null);
|
||||||
|
@ -101,7 +101,7 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
await this.filterCollection(qParams.collectionId, true);
|
await this.filterCollection(qParams.collectionId, true);
|
||||||
} else {
|
} else {
|
||||||
this.groupingsComponent.selectedAll = true;
|
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');
|
this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchType');
|
||||||
const filter = (c: CipherView) => c.type === type;
|
const filter = (c: CipherView) => c.type === type;
|
||||||
if (load) {
|
if (load) {
|
||||||
await this.ciphersComponent.load(filter);
|
await this.ciphersComponent.reload(filter);
|
||||||
} else {
|
} else {
|
||||||
await this.ciphersComponent.applyFilter(filter);
|
await this.ciphersComponent.applyFilter(filter);
|
||||||
}
|
}
|
||||||
|
@ -156,7 +156,7 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
if (load) {
|
if (load) {
|
||||||
await this.ciphersComponent.load(filter);
|
await this.ciphersComponent.reload(filter);
|
||||||
} else {
|
} else {
|
||||||
await this.ciphersComponent.applyFilter(filter);
|
await this.ciphersComponent.applyFilter(filter);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
<ng-container *ngIf="ciphers">
|
<ng-container *ngIf="(isPaging() ? pagedCiphers : ciphers) as filteredCiphers">
|
||||||
<table class="table table-hover table-list table-ciphers" *ngIf="ciphers.length > 0">
|
<table class="table table-hover table-list table-ciphers" *ngIf="filteredCiphers.length" infiniteScroll
|
||||||
|
[infiniteScrollDistance]="1" [infiniteScrollDisabled]="!isPaging()" (scrolled)="loadMore()">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr *ngFor="let c of ciphers">
|
<tr *ngFor="let c of filteredCiphers">
|
||||||
<td (click)="checkCipher(c)" class="table-list-checkbox" *ngIf="!organization">
|
<td (click)="checkCipher(c)" class="table-list-checkbox" *ngIf="!organization">
|
||||||
<input type="checkbox" [(ngModel)]="c.checked" appStopProp>
|
<input type="checkbox" [(ngModel)]="c.checked" appStopProp>
|
||||||
</td>
|
</td>
|
||||||
|
@ -62,7 +63,7 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="no-items" *ngIf="ciphers.length === 0">
|
<div class="no-items" *ngIf="!filteredCiphers.length">
|
||||||
<i class="fa fa-spinner fa-spin text-muted" *ngIf="!loaded" title="{{'loading' | i18n}}"></i>
|
<i class="fa fa-spinner fa-spin text-muted" *ngIf="!loaded" title="{{'loading' | i18n}}"></i>
|
||||||
<ng-container *ngIf="loaded">
|
<ng-container *ngIf="loaded">
|
||||||
<p>{{'noItemsInList' | i18n}}</p>
|
<p>{{'noItemsInList' | i18n}}</p>
|
||||||
|
|
|
@ -39,6 +39,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
|
||||||
protected toasterService: ToasterService, protected i18nService: I18nService,
|
protected toasterService: ToasterService, protected i18nService: I18nService,
|
||||||
protected platformUtilsService: PlatformUtilsService, protected cipherService: CipherService) {
|
protected platformUtilsService: PlatformUtilsService, protected cipherService: CipherService) {
|
||||||
super(searchService);
|
super(searchService);
|
||||||
|
this.pageSize = 150;
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy() {
|
ngOnDestroy() {
|
||||||
|
|
|
@ -102,7 +102,7 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
if (params == null) {
|
if (params == null) {
|
||||||
this.groupingsComponent.selectedAll = true;
|
this.groupingsComponent.selectedAll = true;
|
||||||
await this.ciphersComponent.load();
|
await this.ciphersComponent.reload();
|
||||||
} else {
|
} else {
|
||||||
if (params.favorites) {
|
if (params.favorites) {
|
||||||
this.groupingsComponent.selectedFavorites = true;
|
this.groupingsComponent.selectedFavorites = true;
|
||||||
|
@ -120,7 +120,7 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
await this.filterCollection(params.collectionId);
|
await this.filterCollection(params.collectionId);
|
||||||
} else {
|
} else {
|
||||||
this.groupingsComponent.selectedAll = true;
|
this.groupingsComponent.selectedAll = true;
|
||||||
await this.ciphersComponent.load();
|
await this.ciphersComponent.reload();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -154,7 +154,7 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
async clearGroupingFilters() {
|
async clearGroupingFilters() {
|
||||||
this.ciphersComponent.showAddNew = true;
|
this.ciphersComponent.showAddNew = true;
|
||||||
this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchVault');
|
this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchVault');
|
||||||
await this.ciphersComponent.load();
|
await this.ciphersComponent.reload();
|
||||||
this.clearFilters();
|
this.clearFilters();
|
||||||
this.go();
|
this.go();
|
||||||
}
|
}
|
||||||
|
@ -162,7 +162,7 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
async filterFavorites() {
|
async filterFavorites() {
|
||||||
this.ciphersComponent.showAddNew = true;
|
this.ciphersComponent.showAddNew = true;
|
||||||
this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchFavorites');
|
this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchFavorites');
|
||||||
await this.ciphersComponent.load((c) => c.favorite);
|
await this.ciphersComponent.reload((c) => c.favorite);
|
||||||
this.clearFilters();
|
this.clearFilters();
|
||||||
this.favorites = true;
|
this.favorites = true;
|
||||||
this.go();
|
this.go();
|
||||||
|
@ -171,7 +171,7 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
async filterCipherType(type: CipherType) {
|
async filterCipherType(type: CipherType) {
|
||||||
this.ciphersComponent.showAddNew = true;
|
this.ciphersComponent.showAddNew = true;
|
||||||
this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchType');
|
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.clearFilters();
|
||||||
this.type = type;
|
this.type = type;
|
||||||
this.go();
|
this.go();
|
||||||
|
@ -181,7 +181,7 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
this.ciphersComponent.showAddNew = true;
|
this.ciphersComponent.showAddNew = true;
|
||||||
folderId = folderId === 'none' ? null : folderId;
|
folderId = folderId === 'none' ? null : folderId;
|
||||||
this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchFolder');
|
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.clearFilters();
|
||||||
this.folderId = folderId == null ? 'none' : folderId;
|
this.folderId = folderId == null ? 'none' : folderId;
|
||||||
this.go();
|
this.go();
|
||||||
|
@ -190,7 +190,8 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
async filterCollection(collectionId: string) {
|
async filterCollection(collectionId: string) {
|
||||||
this.ciphersComponent.showAddNew = true;
|
this.ciphersComponent.showAddNew = true;
|
||||||
this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchCollection');
|
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.clearFilters();
|
||||||
this.collectionId = collectionId;
|
this.collectionId = collectionId;
|
||||||
this.go();
|
this.go();
|
||||||
|
|
Loading…
Reference in New Issue