delay load while syncing
This commit is contained in:
parent
092bdb5e07
commit
f80ae40b1a
|
@ -21,10 +21,13 @@
|
||||||
<span class="detail">{{c.subTitle}}</span>
|
<span class="detail">{{c.subTitle}}</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="loaded && searchedCiphers.length === 0" class="no-items">
|
<div class="no-items" *ngIf="searchedCiphers.length === 0">
|
||||||
<i class="fa fa-frown-o fa-4x"></i>
|
<i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
|
||||||
<p>{{'noItemsInList' | i18n}}</p>
|
<ng-container *ngIf="loaded">
|
||||||
<button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
|
<i class="fa fa-frown-o fa-4x"></i>
|
||||||
|
<p>{{'noItemsInList' | i18n}}</p>
|
||||||
|
<button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
|
||||||
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -35,32 +35,35 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h2>
|
<p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p>
|
||||||
{{'folders' | i18n}}
|
<ng-container *ngIf="loaded">
|
||||||
<button appBlurClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
|
<h2>
|
||||||
<i class="fa fa-plus fa-fw"></i>
|
{{'folders' | i18n}}
|
||||||
</button>
|
<button appBlurClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
|
||||||
</h2>
|
<i class="fa fa-plus fa-fw"></i>
|
||||||
<ul class="fa-ul">
|
</button>
|
||||||
<li *ngFor="let f of folders" [ngClass]="{active: selectedFolder && f.id === selectedFolderId}">
|
</h2>
|
||||||
<a href="#" appStopClick appBlurClick (click)="folder(f)">
|
|
||||||
<i class="fa-li fa fa-caret-right"></i> {{f.name}}
|
|
||||||
<span appStopProp appStopClick (click)="editFolder(f)" title="{{'editFolder' | i18n}}"
|
|
||||||
*ngIf="f.id">
|
|
||||||
<i class="fa fa-pencil fa-fw"></i>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div *ngIf="collections && collections.length">
|
|
||||||
<h2>{{'collections' | i18n}}</h2>
|
|
||||||
<ul class="fa-ul">
|
<ul class="fa-ul">
|
||||||
<li *ngFor="let c of collections" [ngClass]="{active: c.id === selectedCollectionId}">
|
<li *ngFor="let f of folders" [ngClass]="{active: selectedFolder && f.id === selectedFolderId}">
|
||||||
<a href="#" appStopClick appBlurClick (click)="collection(c)">
|
<a href="#" appStopClick appBlurClick (click)="folder(f)">
|
||||||
<i class="fa-li fa fa-caret-right"></i> {{c.name}}
|
<i class="fa-li fa fa-caret-right"></i> {{f.name}}
|
||||||
|
<span appStopProp appStopClick (click)="editFolder(f)" title="{{'editFolder' | i18n}}"
|
||||||
|
*ngIf="f.id">
|
||||||
|
<i class="fa fa-pencil fa-fw"></i>
|
||||||
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
<div *ngIf="collections && collections.length">
|
||||||
|
<h2>{{'collections' | i18n}}</h2>
|
||||||
|
<ul class="fa-ul">
|
||||||
|
<li *ngFor="let c of collections" [ngClass]="{active: c.id === selectedCollectionId}">
|
||||||
|
<a href="#" appStopClick appBlurClick (click)="collection(c)">
|
||||||
|
<i class="fa-li fa fa-caret-right"></i> {{c.name}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,7 +4,6 @@ import {
|
||||||
Component,
|
Component,
|
||||||
EventEmitter,
|
EventEmitter,
|
||||||
Input,
|
Input,
|
||||||
OnInit,
|
|
||||||
Output,
|
Output,
|
||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
|
|
||||||
|
@ -20,7 +19,7 @@ import { FolderService } from 'jslib/abstractions/folder.service';
|
||||||
selector: 'app-vault-groupings',
|
selector: 'app-vault-groupings',
|
||||||
template: template,
|
template: template,
|
||||||
})
|
})
|
||||||
export class GroupingsComponent implements OnInit {
|
export class GroupingsComponent {
|
||||||
@Output() onAllClicked = new EventEmitter();
|
@Output() onAllClicked = new EventEmitter();
|
||||||
@Output() onFavoritesClicked = new EventEmitter();
|
@Output() onFavoritesClicked = new EventEmitter();
|
||||||
@Output() onCipherTypeClicked = new EventEmitter<CipherType>();
|
@Output() onCipherTypeClicked = new EventEmitter<CipherType>();
|
||||||
|
@ -31,6 +30,7 @@ export class GroupingsComponent implements OnInit {
|
||||||
|
|
||||||
folders: any[];
|
folders: any[];
|
||||||
collections: any[];
|
collections: any[];
|
||||||
|
loaded: boolean = false;
|
||||||
cipherType = CipherType;
|
cipherType = CipherType;
|
||||||
selectedAll: boolean = false;
|
selectedAll: boolean = false;
|
||||||
selectedFavorites: boolean = false;
|
selectedFavorites: boolean = false;
|
||||||
|
@ -39,12 +39,15 @@ export class GroupingsComponent implements OnInit {
|
||||||
selectedFolderId: string = null;
|
selectedFolderId: string = null;
|
||||||
selectedCollectionId: string = null;
|
selectedCollectionId: string = null;
|
||||||
|
|
||||||
constructor(private collectionService: CollectionService, private folderService: FolderService) {
|
constructor(private collectionService: CollectionService, private folderService: FolderService) { }
|
||||||
// ctor
|
|
||||||
|
async load() {
|
||||||
|
await this.loadFolders();
|
||||||
|
await this.loadCollections();
|
||||||
|
this.loaded = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
async ngOnInit() {
|
async loadCollections() {
|
||||||
await this.loadFolders();
|
|
||||||
this.collections = await this.collectionService.getAllDecrypted();
|
this.collections = await this.collectionService.getAllDecrypted();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -33,6 +33,7 @@ import { CollectionView } from 'jslib/models/view/collectionView';
|
||||||
import { FolderView } from 'jslib/models/view/folderView';
|
import { FolderView } from 'jslib/models/view/folderView';
|
||||||
|
|
||||||
import { I18nService } from 'jslib/abstractions/i18n.service';
|
import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||||
|
import { SyncService } from 'jslib/abstractions/sync.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-vault',
|
selector: 'app-vault',
|
||||||
|
@ -57,7 +58,7 @@ export class VaultComponent implements OnInit {
|
||||||
constructor(private route: ActivatedRoute, private router: Router, private location: Location,
|
constructor(private route: ActivatedRoute, private router: Router, private location: Location,
|
||||||
private componentFactoryResolver: ComponentFactoryResolver, private i18nService: I18nService,
|
private componentFactoryResolver: ComponentFactoryResolver, private i18nService: I18nService,
|
||||||
private broadcasterService: BroadcasterService, private changeDetectorRef: ChangeDetectorRef,
|
private broadcasterService: BroadcasterService, private changeDetectorRef: ChangeDetectorRef,
|
||||||
private ngZone: NgZone) {
|
private ngZone: NgZone, private syncService: SyncService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
async ngOnInit() {
|
async ngOnInit() {
|
||||||
|
@ -92,40 +93,56 @@ export class VaultComponent implements OnInit {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
this.route.queryParams.subscribe(async (params) => {
|
while (this.syncService.syncInProgress) {
|
||||||
if (params.cipherId) {
|
await new Promise((resolve) => setTimeout(resolve, 200));
|
||||||
const cipherView = new CipherView();
|
}
|
||||||
cipherView.id = params.cipherId;
|
|
||||||
if (params.action === 'edit') {
|
|
||||||
this.editCipher(cipherView);
|
|
||||||
} else {
|
|
||||||
this.viewCipher(cipherView);
|
|
||||||
}
|
|
||||||
} else if (params.action === 'add') {
|
|
||||||
this.addCipher();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (params.favorites) {
|
this.route.queryParams.subscribe(async (params) => {
|
||||||
this.groupingsComponent.selectedFavorites = true;
|
await this.load(params);
|
||||||
await this.filterFavorites();
|
|
||||||
} else if (params.type) {
|
|
||||||
const t = parseInt(params.type, null);
|
|
||||||
this.groupingsComponent.selectedType = t;
|
|
||||||
await this.filterCipherType(t);
|
|
||||||
} else if (params.folderId) {
|
|
||||||
this.groupingsComponent.selectedFolder = true;
|
|
||||||
this.groupingsComponent.selectedFolderId = params.folderId;
|
|
||||||
await this.filterFolder(params.folderId);
|
|
||||||
} else if (params.collectionId) {
|
|
||||||
this.groupingsComponent.selectedCollectionId = params.collectionId;
|
|
||||||
await this.filterCollection(params.collectionId);
|
|
||||||
} else {
|
|
||||||
this.groupingsComponent.selectedAll = true;
|
|
||||||
await this.ciphersComponent.load();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async load(params?: { [key: string]: any }) {
|
||||||
|
if (params == null) {
|
||||||
|
this.groupingsComponent.selectedAll = true;
|
||||||
|
await this.groupingsComponent.load();
|
||||||
|
await this.ciphersComponent.load();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (params.cipherId) {
|
||||||
|
const cipherView = new CipherView();
|
||||||
|
cipherView.id = params.cipherId;
|
||||||
|
if (params.action === 'edit') {
|
||||||
|
this.editCipher(cipherView);
|
||||||
|
} else {
|
||||||
|
this.viewCipher(cipherView);
|
||||||
|
}
|
||||||
|
} else if (params.action === 'add') {
|
||||||
|
this.addCipher();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (params.favorites) {
|
||||||
|
this.groupingsComponent.selectedFavorites = true;
|
||||||
|
await this.filterFavorites();
|
||||||
|
} else if (params.type) {
|
||||||
|
const t = parseInt(params.type, null);
|
||||||
|
this.groupingsComponent.selectedType = t;
|
||||||
|
await this.filterCipherType(t);
|
||||||
|
} else if (params.folderId) {
|
||||||
|
this.groupingsComponent.selectedFolder = true;
|
||||||
|
this.groupingsComponent.selectedFolderId = params.folderId;
|
||||||
|
await this.filterFolder(params.folderId);
|
||||||
|
} else if (params.collectionId) {
|
||||||
|
this.groupingsComponent.selectedCollectionId = params.collectionId;
|
||||||
|
await this.filterCollection(params.collectionId);
|
||||||
|
} else {
|
||||||
|
this.groupingsComponent.selectedAll = true;
|
||||||
|
await this.groupingsComponent.load();
|
||||||
|
await this.ciphersComponent.load();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
viewCipher(cipher: CipherView) {
|
viewCipher(cipher: CipherView) {
|
||||||
if (this.action === 'view' && this.cipherId === cipher.id) {
|
if (this.action === 'view' && this.cipherId === cipher.id) {
|
||||||
return;
|
return;
|
||||||
|
|
|
@ -621,5 +621,8 @@
|
||||||
},
|
},
|
||||||
"account": {
|
"account": {
|
||||||
"message": "Account"
|
"message": "Account"
|
||||||
|
},
|
||||||
|
"loading": {
|
||||||
|
"message": "Loading..."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue