group filtering

src/app/vault/ciphers.component.ts

@@ -21,16 +21,28 @@ export class CiphersComponent implements OnInit {
     @Output() onAddCipher = new EventEmitter();
 
     ciphers: CipherView[] = [];
+    private filter: (cipher: CipherView) => boolean = null;
 
     constructor(private cipherService: CipherService) {
     }
 
     async ngOnInit() {
-        await this.loadCiphers();
+        await this.load();
+    }
+
+    async load(filter: (cipher: CipherView) => boolean = null) {
+        this.filter = filter;
+        let ciphers = await this.cipherService.getAllDecrypted();
+
+        if (this.filter == null) {
+            this.ciphers = ciphers;
+        } else {
+            this.ciphers = ciphers.filter(this.filter);
+        }
     }
 
     async refresh() {
-        await this.loadCiphers();
+        await this.load(this.filter);
     }
 
     updateCipher(cipher: CipherView) {
@@ -54,8 +66,4 @@ export class CiphersComponent implements OnInit {
     addCipher() {
         this.onAddCipher.emit();
     }
-
-    private async loadCiphers() {
-        this.ciphers = await this.cipherService.getAllDecrypted();
-    }
 }

src/app/vault/groupings.component.html

@@ -1,27 +1,61 @@
 <div class="content">
     <div class="inner-content">
         <ul>
-            <li><a href="#"><i class="fa fa-fw fa-spinner"></i> {{'allItems' | i18n}}</a></li>
+            <li>
-            <li><a href="#"><i class="fa fa-fw fa-star"></i> {{'favorites' | i18n}}</a></li>
+                <a href="#" appStopClick (click)="all()">
+                    <i class="fa fa-fw fa-spinner"></i> {{'allItems' | i18n}}
+                </a>
+            </li>
+            <li>
+                <a href="#" appStopClick (click)="favorites()">
+                    <i class="fa fa-fw fa-star"></i> {{'favorites' | i18n}}
+                </a>
+            </li>
         </ul>
         <h2><i class="fa fa-tag"></i> {{'types' | i18n}}</h2>
         <ul>
-            <li><a href="#"><i class="fa fa-fw fa-globe"></i> {{'typeLogin' | i18n}}</a></li>
+            <li>
-            <li><a href="#"><i class="fa fa-fw fa-credit-card"></i> {{'typeCard' | i18n}}</a></li>
+                <a href="#" appStopClick (click)="type(cipherType.Login)">
-            <li><a href="#"><i class="fa fa-fw fa-id-card-o"></i> {{'typeIdentity' | i18n}}</a></li>
+                    <i class="fa fa-fw fa-globe"></i>
-            <li><a href="#"><i class="fa fa-fw fa-sticky-note-o"></i> {{'typeSecureNote' | i18n}}</a></li>
+                    {{'typeLogin' | i18n}}
+                </a>
+            </li>
+            <li>
+                <a href="#" appStopClick (click)="type(cipherType.Card)">
+                    <i class="fa fa-fw fa-credit-card"></i>
+                    {{'typeCard' | i18n}}
+                </a>
+            </li>
+            <li>
+                <a href="#" appStopClick (click)="type(cipherType.Identity)">
+                    <i class="fa fa-fw fa-id-card-o"></i>
+                    {{'typeIdentity' | i18n}}
+                </a>
+            </li>
+            <li>
+                <a href="#" appStopClick (click)="type(cipherType.SecureNote)">
+                    <i class="fa fa-fw fa-sticky-note-o"></i>
+                    {{'typeSecureNote' | i18n}}
+                </a>
+            </li>
         </ul>
         <h2><i class="fa fa-folder"></i> {{'folders' | i18n}}</h2>
         <ul class="fa-ul">
-            <li *ngFor="let folder of folders">
+            <li *ngFor="let f of folders">
-                <a href="#"><i class="fa-li fa fa-caret-right"></i> {{folder.name}}</a>
+                <a href="#" appStopClick (click)="folder(f)">
-            </li>
+                    <i class="fa-li fa fa-caret-right"></i> {{f.name}}
-        </ul>
+                </a>
-        <h2><i class="fa fa-cubes"></i> {{'collections' | i18n}}</h2>
-        <ul class="fa-ul">
-            <li *ngFor="let collection of collections">
-                <a href="#"><i class="fa-li fa fa-caret-right"></i> {{collection.name}}</a>
             </li>
         </ul>
+        <div *ngIf="collections && collections.length">
+            <h2><i class="fa fa-cubes"></i> {{'collections' | i18n}}</h2>
+            <ul class="fa-ul">
+                <li *ngFor="let c of collections">
+                    <a href="#" appStopClick (click)="collection(c)">
+                        <i class="fa-li fa fa-caret-right"></i> {{c.name}}
+                    </a>
+                </li>
+            </ul>
+        </div>
     </div>
 </div>

src/app/vault/groupings.component.ts

@@ -2,10 +2,17 @@ import * as template from './groupings.component.html';
 
 import {
     Component,
+    EventEmitter,
     Input,
     OnInit,
+    Output,
 } from '@angular/core';
 
+import { CipherType } from 'jslib/enums/cipherType';
+
+import { FolderView } from 'jslib/models/view/folderView';
+import { CollectionView } from 'jslib/models/view/collectionView';
+
 import { CollectionService } from 'jslib/abstractions/collection.service';
 import { FolderService } from 'jslib/abstractions/folder.service';
 
@@ -14,15 +21,42 @@ import { FolderService } from 'jslib/abstractions/folder.service';
     template: template,
 })
 export class GroupingsComponent implements OnInit {
+    @Output() onAllClicked = new EventEmitter();
+    @Output() onFavoritesClicked = new EventEmitter();
+    @Output() onCipherTypeClicked = new EventEmitter<CipherType>();
+    @Output() onFolderClicked = new EventEmitter<FolderView>();
+    @Output() onCollectionClicked = new EventEmitter<CollectionView>();
+
     folders: any[];
     collections: any[];
+    cipherType = CipherType;
 
     constructor(private collectionService: CollectionService, private folderService: FolderService) {
-
+        // ctor
     }
 
     async ngOnInit() {
         this.folders = await this.folderService.getAllDecrypted();
         this.collections = await this.collectionService.getAllDecrypted();
     }
+
+    all() {
+        this.onAllClicked.emit();
+    }
+
+    favorites() {
+        this.onFavoritesClicked.emit();
+    }
+
+    type(type: CipherType) {
+        this.onCipherTypeClicked.emit(type);
+    }
+
+    folder(folder: FolderView) {
+        this.onFolderClicked.emit(folder);
+    }
+
+    collection(collection: CollectionView) {
+        this.onCollectionClicked.emit(collection);
+    }
 }

src/app/vault/vault.component.html

@@ -1,5 +1,10 @@
 <div id="vault">
-    <app-vault-groupings id="groupings">
+    <app-vault-groupings id="groupings"
+                         (onAllClicked)="clearGroupingFilters()"
+                         (onFavoritesClicked)="filterFavorites()"
+                         (onCipherTypeClicked)="filterCipherType($event)"
+                         (onFolderClicked)="filterFolder($event)"
+                         (onCollectionClicked)="filterCollection($event)">
     </app-vault-groupings>
     <app-vault-ciphers id="items"
                        (onCipherClicked)="viewCipher($event)"

src/app/vault/vault.component.ts

@@ -15,7 +15,11 @@ import { Location } from '@angular/common';
 
 import { CiphersComponent } from './ciphers.component';
 
+import { CipherType } from 'jslib/enums/cipherType';
+
 import { CipherView } from 'jslib/models/view/cipherView';
+import { CollectionView } from 'jslib/models/view/collectionView';
+import { FolderView } from 'jslib/models/view/folderView';
 
 @Component({
     selector: 'app-vault',
@@ -100,6 +104,26 @@ export class VaultComponent implements OnInit {
         this.go({ action: this.action, cipherId: this.cipherId });
     }
 
+    async clearGroupingFilters() {
+        await this.ciphersComponent.load();
+    }
+
+    async filterFavorites() {
+        await this.ciphersComponent.load((c) => c.favorite);
+    }
+
+    async filterCipherType(type: CipherType) {
+        await this.ciphersComponent.load((c) => c.type === type);
+    }
+
+    async filterFolder(folder: FolderView) {
+        await this.ciphersComponent.load((c) => c.folderId === folder.id);
+    }
+
+    async filterCollection(collection: CollectionView) {
+        await this.ciphersComponent.load((c) => c.collectionIds.indexOf(collection.id) > -1);
+    }
+
     private go(queryParams: any) {
         const url = this.router.createUrlTree(['vault'], { queryParams: queryParams }).toString();
         this.location.go(url);