feat(header): implement search on organization selector

Author: belsman

packages/modules/shared/src/lib/modules-shared.module.ts

@@ -1,4 +1,9 @@
 import { NgModule } from '@angular/core';
 
-@NgModule({})
+import { FuseSearchPipe } from './pipes';
+
+@NgModule({
+  declarations: [FuseSearchPipe],
+  exports: [FuseSearchPipe],
+})
 export class ModulesSharedModule {}

packages/modules/shared/src/lib/pipes/fuse-search.pipe.ts

@@ -4,7 +4,8 @@ import { FuseSearchService } from '../services';
 
 @Pipe({
   name: 'fuseSearch',
-  pure: false,
+  pure: true,
+  standalone: false,
 })
 export class FuseSearchPipe<T> implements PipeTransform {
   constructor(private searchService: FuseSearchService<T>) {}

packages/modules/shared/src/lib/pipes/index.ts

@@ -0,0 +1 @@
+export * from './fuse-search.pipe';

packages/modules/ui/src/lib/components/organisms/header/header-toolbar.component.html

@@ -87,7 +87,7 @@
       }
     </rc-toolbar>
 
-    <rc-searchbar />
+    <rc-searchbar (search)="searchTerm = $event" />
 
     <vcl-data-list
       [noBorder]="true"
@@ -102,7 +102,8 @@
         <div class="p-2">{{ vm.selectedParent.name }}</div>
       </vcl-data-list-item>
       <!-- | fuzzysearch: term  -->
-      } @for (organization of (vm.organizations); track $index) {
+      } @for (organization of (vm.organizations | fuseSearch: searchTerm :
+      ['name', 'description']); track $index) {
       <vcl-data-list-item [value]="organization.id">
         <div class="p-2">{{ organization?.name }}</div>
       </vcl-data-list-item>

packages/modules/ui/src/lib/components/organisms/header/header-toolbar.component.ts

@@ -32,6 +32,8 @@ export class RcHeaderToolbarComponent implements OnInit {
   @HostBinding('class.row')
   _hostClasses = true;
 
+  searchTerm = '';
+
   readonly vm$ = combineLatest({
     user: this.accountFacade.user$,
     organizations: this.organizationFacade.globalChildrenOrganizations$,

packages/modules/ui/src/lib/modules-ui.module.ts

@@ -33,6 +33,8 @@ import {
   VCLBadgeModule,
 } from '@vcl/ng-vcl';
 
+import { ModulesSharedModule } from '@console-modules/shared';
+
 import {
   RcBusyIndicatorComponent,
   RcCopyrightComponent,
@@ -153,6 +155,7 @@ const modules = [
   VCLButtonGroupModule,
   VCLBadgeModule,
   VCLFormControlGroupModule,
+  ModulesSharedModule,
 ];
 
 const atoms = [