get vault working

src/app/vault/vault.component.ts

@@ -1,13 +1,214 @@
+import { Location } from '@angular/common';
 import {
     Component,
+    ComponentFactoryResolver,
+    OnInit,
+    ViewChild,
+    ViewContainerRef,
 } from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
 
 import { CipherType } from 'jslib/enums/cipherType';
 
+import { CipherView } from 'jslib/models/view/cipherView';
+import { FolderView } from 'jslib/models/view/folderView';
+
+import { ModalComponent } from '../modal.component';
+
+import { AttachmentsComponent } from './attachments.component';
+import { CiphersComponent } from './ciphers.component';
+import { FolderAddEditComponent } from './folder-add-edit.component';
+import { GroupingsComponent } from './groupings.component';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { SyncService } from 'jslib/abstractions/sync.service';
+
 @Component({
     selector: 'app-vault',
     templateUrl: 'vault.component.html',
 })
-export class VaultComponent {
+export class VaultComponent implements OnInit {
+    @ViewChild(GroupingsComponent) groupingsComponent: GroupingsComponent;
+    @ViewChild(CiphersComponent) ciphersComponent: CiphersComponent;
+    @ViewChild('attachments', { read: ViewContainerRef }) attachmentsModalRef: ViewContainerRef;
+    @ViewChild('folderAddEdit', { read: ViewContainerRef }) folderAddEditModalRef: ViewContainerRef;
 
+    cipherId: string = null;
+    favorites: boolean = false;
+    type: CipherType = null;
+    folderId: string = null;
+    collectionId: string = null;
+
+    private modal: ModalComponent = null;
+
+    constructor(private syncService: SyncService, private route: ActivatedRoute,
+        private router: Router, private location: Location,
+        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver) { }
+
+    async ngOnInit() {
+        this.route.queryParams.subscribe(async (params) => {
+            await this.syncService.fullSync(true);
+            await this.groupingsComponent.load();
+
+            if (params == null) {
+                this.groupingsComponent.selectedAll = true;
+                await this.ciphersComponent.load();
+                return;
+            }
+
+            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();
+            }
+        });
+    }
+
+    editCipher(cipher: CipherView) {
+        console.log(cipher);
+    }
+
+    addCipher(type: CipherType = null) {
+        //
+    }
+
+    async clearGroupingFilters() {
+        this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchVault');
+        await this.ciphersComponent.load();
+        this.clearFilters();
+        this.go();
+    }
+
+    async filterFavorites() {
+        this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchFavorites');
+        await this.ciphersComponent.load((c) => c.favorite);
+        this.clearFilters();
+        this.favorites = true;
+        this.go();
+    }
+
+    async filterCipherType(type: CipherType) {
+        this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchType');
+        await this.ciphersComponent.load((c) => c.type === type);
+        this.clearFilters();
+        this.type = type;
+        this.go();
+    }
+
+    async filterFolder(folderId: string) {
+        folderId = folderId === 'none' ? null : folderId;
+        this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchFolder');
+        await this.ciphersComponent.load((c) => c.folderId === folderId);
+        this.clearFilters();
+        this.folderId = folderId == null ? 'none' : folderId;
+        this.go();
+    }
+
+    async filterCollection(collectionId: string) {
+        this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchCollection');
+        await this.ciphersComponent.load((c) => c.collectionIds.indexOf(collectionId) > -1);
+        this.clearFilters();
+        this.collectionId = collectionId;
+        this.go();
+    }
+
+    editCipherAttachments(cipher: CipherView) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.attachmentsModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<AttachmentsComponent>(AttachmentsComponent, this.attachmentsModalRef);
+
+        childComponent.cipherId = cipher.id;
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+    async addFolder() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.folderAddEditModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<FolderAddEditComponent>(
+            FolderAddEditComponent, this.folderAddEditModalRef);
+
+        childComponent.folderId = null;
+        childComponent.onSavedFolder.subscribe(async (folder: FolderView) => {
+            this.modal.close();
+            await this.groupingsComponent.loadFolders();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+    async editFolder(folderId: string) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.folderAddEditModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<FolderAddEditComponent>(
+            FolderAddEditComponent, this.folderAddEditModalRef);
+
+        childComponent.folderId = folderId;
+        childComponent.onSavedFolder.subscribe(async (folder: FolderView) => {
+            this.modal.close();
+            await this.groupingsComponent.loadFolders();
+        });
+        childComponent.onDeletedFolder.subscribe(async (folder: FolderView) => {
+            this.modal.close();
+            await this.groupingsComponent.loadFolders();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+    private clearFilters() {
+        this.folderId = null;
+        this.collectionId = null;
+        this.favorites = false;
+        this.type = null;
+    }
+
+    private go(queryParams: any = null) {
+        if (queryParams == null) {
+            queryParams = {
+                cipherId: this.cipherId,
+                favorites: this.favorites ? true : null,
+                type: this.type,
+                folderId: this.folderId,
+                collectionId: this.collectionId,
+            };
+        }
+
+        const url = this.router.createUrlTree(['vault'], { queryParams: queryParams }).toString();
+        this.location.go(url);
+    }
 }