feat(admin-ui): Add filtering to FacetListComponent

packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.html

@@ -1,16 +1,27 @@
 <vdr-action-bar>
     <vdr-ab-left>
-        <vdr-language-selector
-            [availableLanguageCodes]="availableLanguages$ | async"
-            [currentLanguageCode]="contentLanguage$ | async"
-            (languageCodeChange)="setLanguage($event)"
-        ></vdr-language-selector>
+        <div class="flex center wrap">
+            <vdr-language-selector
+                [availableLanguageCodes]="availableLanguages$ | async"
+                [currentLanguageCode]="contentLanguage$ | async"
+                (languageCodeChange)="setLanguage($event)"
+            ></vdr-language-selector>
+            <input
+                type="text"
+                name="searchTerm"
+                [formControl]="filterTermControl"
+                [placeholder]="'catalog.filter-by-name' | translate"
+                class="clr-input search-input ml4"
+            />
+        </div>
     </vdr-ab-left>
     <vdr-ab-right>
         <vdr-action-bar-items locationId="facet-list"></vdr-action-bar-items>
-        <a class="btn btn-primary"
-           *vdrIfPermissions="['CreateCatalog', 'CreateFacet']"
-           [routerLink]="['./create']">
+        <a
+            class="btn btn-primary"
+            *vdrIfPermissions="['CreateCatalog', 'CreateFacet']"
+            [routerLink]="['./create']"
+        >
             <clr-icon shape="plus"></clr-icon>
             {{ 'catalog.create-new-facet' | translate }}
         </a>
@@ -57,7 +68,9 @@
         </td>
         <td class="left align-middle" [class.private]="facet.isPrivate">
             <vdr-chip>
-                <ng-container *ngIf="!facet.isPrivate; else private">{{ 'catalog.public' | translate }}</ng-container>
+                <ng-container *ngIf="!facet.isPrivate; else private">{{
+                    'catalog.public' | translate
+                }}</ng-container>
                 <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>
             </vdr-chip>
         </td>

packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.ts

@@ -1,13 +1,20 @@
 import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { BaseListComponent, LanguageCode, ServerConfigService } from '@vendure/admin-ui/core';
-import { DeletionResult, GetFacetList } from '@vendure/admin-ui/core';
-import { NotificationService } from '@vendure/admin-ui/core';
-import { DataService } from '@vendure/admin-ui/core';
-import { ModalService } from '@vendure/admin-ui/core';
+import {
+    BaseListComponent,
+    DataService,
+    DeletionResult,
+    GetFacetList,
+    LanguageCode,
+    ModalService,
+    NotificationService,
+    ServerConfigService,
+} from '@vendure/admin-ui/core';
+import { SortOrder } from '@vendure/common/lib/generated-shop-types';
 import { EMPTY, Observable } from 'rxjs';
-import { map, switchMap, tap } from 'rxjs/operators';
+import { debounceTime, filter, map, switchMap, takeUntil, tap } from 'rxjs/operators';
 
 @Component({
     selector: 'vdr-facet-list',
@@ -16,7 +23,9 @@ import { map, switchMap, tap } from 'rxjs/operators';
 })
 export class FacetListComponent
     extends BaseListComponent<GetFacetList.Query, GetFacetList.Items>
-    implements OnInit {
+    implements OnInit
+{
+    filterTermControl = new FormControl('');
     availableLanguages$: Observable<LanguageCode[]>;
     contentLanguage$: Observable<LanguageCode>;
     readonly initialLimit = 3;
@@ -33,6 +42,20 @@ export class FacetListComponent
         super.setQueryFn(
             (...args: any[]) => this.dataService.facet.getFacets(...args).refetchOnChannelChange(),
             data => data.facets,
+            (skip, take) => ({
+                options: {
+                    skip,
+                    take,
+                    filter: {
+                        name: {
+                            contains: this.filterTermControl.value,
+                        },
+                    },
+                    sort: {
+                        createdAt: SortOrder.DESC,
+                    },
+                },
+            }),
         );
     }
 
@@ -43,6 +66,13 @@ export class FacetListComponent
             .uiState()
             .mapStream(({ uiState }) => uiState.contentLanguage)
             .pipe(tap(() => this.refresh()));
+        this.filterTermControl.valueChanges
+            .pipe(
+                filter(value => 2 <= value.length || value.length === 0),
+                debounceTime(250),
+                takeUntil(this.destroy$),
+            )
+            .subscribe(() => this.refresh());
     }
 
     toggleDisplayLimit(facet: GetFacetList.Items) {