[EC-627] feat: implement filter pipe

apps/web/src/app/shared/vault-filter/cipher-filter.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+import { CipherView } from "@bitwarden/common/models/view/cipher.view";
+
+import { NewVaultFilterModel } from "./vault-filter.model";
+
+@Pipe({
+  name: "cipherFilter",
+})
+export class CipherFilterPipe implements PipeTransform {
+  transform(ciphers: CipherView[], ...[filter]: [NewVaultFilterModel]) {
+    if (filter.collectionId) {
+      return ciphers.filter((c) => c.collectionIds.includes(filter.collectionId));
+    }
+
+    return ciphers;
+  }
+}

apps/web/src/app/shared/vault-filter/routed-vault-filter.service.ts

@@ -2,9 +2,7 @@ import { Injectable, OnDestroy } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { map, Observable, Subject, takeUntil, tap } from "rxjs";
 
-export interface NewVaultFilterModel {
+import { NewVaultFilterModel } from "./vault-filter.model";
-  collectionId?: string;
-}
 
 @Injectable()
 export class RoutedVaultFilterService implements OnDestroy {

apps/web/src/app/shared/vault-filter/vault-filter.model.ts

@@ -0,0 +1,3 @@
+export interface NewVaultFilterModel {
+  collectionId?: string;
+}

apps/web/src/app/shared/vault-filter/vault-filter.module.ts

@@ -2,11 +2,12 @@ import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
+import { CipherFilterPipe } from "./cipher-filter.pipe";
 import { VaultFilterComponent } from "./vault-filter.component";
 
 @NgModule({
-  declarations: [VaultFilterComponent],
+  declarations: [VaultFilterComponent, CipherFilterPipe],
   imports: [CommonModule, RouterModule],
-  exports: [VaultFilterComponent],
+  exports: [VaultFilterComponent, CipherFilterPipe],
 })
 export class VaultFilterModule {}

apps/web/src/app/vault/vault.component.html

@@ -51,7 +51,9 @@
       <app-callout type="warning" *ngIf="activeFilter.isDeleted" icon="bwi-exclamation-triangle">
         {{ trashCleanupWarning }}
       </app-callout>
-      <app-new-ciphers [ciphers]="ciphers$ | async"></app-new-ciphers>
+      <app-new-ciphers
+        [ciphers]="ciphers$ | async | cipherFilter: (filter$ | async)"
+      ></app-new-ciphers>
       <app-vault-ciphers
         (onCipherClicked)="editCipher($event)"
         (onAttachmentsClicked)="editCipherAttachments($event)"

apps/web/src/app/vault/vault.component.ts

@@ -72,6 +72,7 @@ export class VaultComponent implements OnInit, OnDestroy {
   activeFilter: VaultFilter = new VaultFilter();
 
   private refresh$ = new BehaviorSubject<void>(null);
+  filter$ = this.filterService.filter$;
   collections$ = this.refresh$.pipe(
     switchMap(() => from(this.collectionService.getAllDecrypted()))
   );
@@ -95,7 +96,8 @@ export class VaultComponent implements OnInit, OnDestroy {
     private vaultFilterService: VaultFilterService,
     private cipherService: CipherService,
     private passwordRepromptService: PasswordRepromptService,
-    private collectionService: CollectionService
+    private collectionService: CollectionService,
+    private filterService?: RoutedVaultFilterService
   ) {}
 
   async ngOnInit() {