diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html index 3db8a034..088da586 100644 --- a/src/app/vault/ciphers.component.html +++ b/src/app/vault/ciphers.component.html @@ -21,10 +21,13 @@ {{c.subTitle}} -
- -

{{'noItemsInList' | i18n}}

- +
+ + + +

{{'noItemsInList' | i18n}}

+ +
diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html index b61747e0..cdc9fc2b 100644 --- a/src/app/vault/groupings.component.html +++ b/src/app/vault/groupings.component.html @@ -35,32 +35,35 @@ -

- {{'folders' | i18n}} - -

- -
-

{{'collections' | i18n}}

+

{{'loading' | i18n}}

+ +

+ {{'folders' | i18n}} + +

-
+
+

{{'collections' | i18n}}

+ +
+ diff --git a/src/app/vault/groupings.component.ts b/src/app/vault/groupings.component.ts index 581c695c..84240499 100644 --- a/src/app/vault/groupings.component.ts +++ b/src/app/vault/groupings.component.ts @@ -4,7 +4,6 @@ import { Component, EventEmitter, Input, - OnInit, Output, } from '@angular/core'; @@ -20,7 +19,7 @@ import { FolderService } from 'jslib/abstractions/folder.service'; selector: 'app-vault-groupings', template: template, }) -export class GroupingsComponent implements OnInit { +export class GroupingsComponent { @Output() onAllClicked = new EventEmitter(); @Output() onFavoritesClicked = new EventEmitter(); @Output() onCipherTypeClicked = new EventEmitter(); @@ -31,6 +30,7 @@ export class GroupingsComponent implements OnInit { folders: any[]; collections: any[]; + loaded: boolean = false; cipherType = CipherType; selectedAll: boolean = false; selectedFavorites: boolean = false; @@ -39,12 +39,15 @@ export class GroupingsComponent implements OnInit { selectedFolderId: string = null; selectedCollectionId: string = null; - constructor(private collectionService: CollectionService, private folderService: FolderService) { - // ctor + constructor(private collectionService: CollectionService, private folderService: FolderService) { } + + async load() { + await this.loadFolders(); + await this.loadCollections(); + this.loaded = true; } - async ngOnInit() { - await this.loadFolders(); + async loadCollections() { this.collections = await this.collectionService.getAllDecrypted(); } diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts index 15919b41..4ccc0fa2 100644 --- a/src/app/vault/vault.component.ts +++ b/src/app/vault/vault.component.ts @@ -33,6 +33,7 @@ import { CollectionView } from 'jslib/models/view/collectionView'; import { FolderView } from 'jslib/models/view/folderView'; import { I18nService } from 'jslib/abstractions/i18n.service'; +import { SyncService } from 'jslib/abstractions/sync.service'; @Component({ selector: 'app-vault', @@ -57,7 +58,7 @@ export class VaultComponent implements OnInit { constructor(private route: ActivatedRoute, private router: Router, private location: Location, private componentFactoryResolver: ComponentFactoryResolver, private i18nService: I18nService, private broadcasterService: BroadcasterService, private changeDetectorRef: ChangeDetectorRef, - private ngZone: NgZone) { + private ngZone: NgZone, private syncService: SyncService) { } async ngOnInit() { @@ -92,40 +93,56 @@ export class VaultComponent implements OnInit { }); }); - this.route.queryParams.subscribe(async (params) => { - 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(); - } + while (this.syncService.syncInProgress) { + await new Promise((resolve) => setTimeout(resolve, 200)); + } - 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.ciphersComponent.load(); - } + this.route.queryParams.subscribe(async (params) => { + await this.load(params); }); } + 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) { if (this.action === 'view' && this.cipherId === cipher.id) { return; diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 332bf40f..e0eb4957 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -621,5 +621,8 @@ }, "account": { "message": "Account" + }, + "loading": { + "message": "Loading..." } }