1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 16:53:34 +00:00

page ciphers list for better performance

This commit is contained in:
Kyle Spearrin
2019-03-19 11:34:56 -04:00
parent 8231b6f09f
commit f02debb03b
8 changed files with 293 additions and 14 deletions

View File

@@ -4,6 +4,7 @@ import 'zone.js/dist/zone';
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';
import { ServicesModule } from './services.module';
@@ -136,6 +137,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
},
}),
ToasterModule.forRoot(),
InfiniteScrollModule,
],
declarations: [
AddEditComponent,

View File

@@ -6,10 +6,13 @@
</div>
</div>
<div class="content">
<ng-container *ngIf="ciphers">
<div class="list" *ngIf="ciphers.length > 0">
<a *ngFor="let c of ciphers" appStopClick (click)="selectCipher(c)" (contextmenu)="rightClickCipher(c)"
href="#" title="{{'viewItem' | i18n}}" [ngClass]="{'active': c.id === activeCipherId}">
<ng-container *ngIf="(isPaging() ? pagedCiphers : ciphers) as filteredCiphers">
<div class="list" *ngIf="filteredCiphers.length" infiniteScroll [infiniteScrollDistance]="1"
[infiniteScrollContainer]="'#items .content'" [fromRoot]="true" [infiniteScrollDisabled]="!isPaging()"
(scrolled)="loadMore()">
<a *ngFor="let c of filteredCiphers" appStopClick (click)="selectCipher(c)"
(contextmenu)="rightClickCipher(c)" href="#" title="{{'viewItem' | i18n}}"
[ngClass]="{'active': c.id === activeCipherId}">
<app-vault-icon [cipher]="c"></app-vault-icon>
<span class="text">
{{c.name}}
@@ -19,7 +22,7 @@
<span class="detail">{{c.subTitle}}</span>
</a>
</div>
<div class="no-items" *ngIf="ciphers.length === 0">
<div class="no-items" *ngIf="!filteredCiphers.length">
<i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
<ng-container *ngIf="loaded">
<i class="fa fa-frown-o fa-4x"></i>

View File

@@ -11,5 +11,6 @@ import { CiphersComponent as BaseCiphersComponent } from 'jslib/angular/componen
export class CiphersComponent extends BaseCiphersComponent {
constructor(searchService: SearchService) {
super(searchService);
this.pageSize = 250;
}
}

View File

@@ -7,7 +7,9 @@
{{'share' | i18n}}
</div>
<div class="box-content" *ngIf="!organizations || !organizations.length">
{{'noOrganizationsList' | i18n}}
<div class="box-content-row">
{{'noOrganizationsList' | i18n}}
</div>
</div>
<div class="box-content" *ngIf="organizations && organizations.length">
<div class="box-content-row" appBoxRow>

View File

@@ -168,7 +168,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.cipherId) {
const cipherView = new CipherView();
@@ -198,7 +198,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();
}
}
if (queryParamsSub != null) {
@@ -422,14 +422,14 @@ export class VaultComponent implements OnInit, OnDestroy {
async clearGroupingFilters() {
this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchVault');
await this.ciphersComponent.load();
await this.ciphersComponent.reload();
this.clearFilters();
this.go();
}
async filterFavorites() {
this.ciphersComponent.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();
@@ -437,7 +437,7 @@ export class VaultComponent implements OnInit, OnDestroy {
async filterCipherType(type: CipherType) {
this.ciphersComponent.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();
@@ -446,7 +446,7 @@ export class VaultComponent implements OnInit, OnDestroy {
async filterFolder(folderId: string) {
folderId = folderId === 'none' ? null : folderId;
this.ciphersComponent.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();
@@ -454,7 +454,8 @@ export class VaultComponent implements OnInit, OnDestroy {
async filterCollection(collectionId: string) {
this.ciphersComponent.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.updateCollectionProperties();