Refactor: allow filterpipe to specify key

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html

@@ -35,7 +35,7 @@
       </div>
       @if (selectionModel.items) {
         <div class="items" #buttonItems>
-          @for (item of selectionModel.itemsSorted | filter: filterText; track item; let i = $index) {
+          @for (item of selectionModel.itemsSorted | filter: filterText:'name'; track item; let i = $index) {
             @if (allowSelectNone || item.id) {
               <pngx-toggleable-dropdown-button
                 [item]="item" [hideCount]="hideCount(item)" [state]="selectionModel.get(item.id)" [count]="getUpdatedDocumentCount(item.id)" (toggle)="selectionModel.toggle(item.id)" (exclude)="excludeClicked(item.id)" (click)="setButtonItemIndex(i - 1)" [disabled]="disabled">
@@ -45,13 +45,13 @@
         </div>
       }
       @if (editing) {
-        @if ((selectionModel.itemsSorted | filter: filterText).length === 0 && createRef !== undefined) {
+        @if ((selectionModel.itemsSorted | filter: filterText:'name').length === 0 && createRef !== undefined) {
           <button class="list-group-item list-group-item-action bg-light" (click)="createClicked()" [disabled]="disabled">
             <small class="ms-2"><ng-container i18n>Create</ng-container> "{{filterText}}"</small>
             <i-bs width="1.5em" height="1em" name="plus"></i-bs>
           </button>
         }
-        @if ((selectionModel.itemsSorted | filter: filterText).length > 0) {
+        @if ((selectionModel.itemsSorted | filter: filterText:'name').length > 0) {
           <button class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
             <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
             <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>

src-ui/src/app/pipes/filter.pipe.spec.ts

@@ -25,4 +25,25 @@ describe('FilterPipe', () => {
     itemsReturned = pipe.transform(items, null)
     expect(itemsReturned).toEqual(items)
   })
+
+  it('should filter matchingmodel items by key', () => {
+    const pipe = new FilterPipe()
+    const items: MatchingModel[] = [
+      {
+        id: 1,
+        name: 'Hello World',
+        slug: 'slug-1',
+      },
+      {
+        id: 2,
+        name: 'Hello with slug',
+        slug: 'not this',
+      },
+    ]
+    let itemsReturned = pipe.transform(items, 'slug')
+    expect(itemsReturned).toEqual(items)
+
+    itemsReturned = pipe.transform(items, 'slug', 'slug')
+    expect(itemsReturned).toEqual([items[0]])
+  })
 })

src-ui/src/app/pipes/filter.pipe.ts

@@ -5,21 +5,26 @@ import { MatchingModel } from '../data/matching-model'
   name: 'filter',
 })
 export class FilterPipe implements PipeTransform {
-  transform(items: MatchingModel[], searchText: string): MatchingModel[] {
+  transform(
+    items: MatchingModel[],
+    searchText: string,
+    key?: string
+  ): MatchingModel[] {
     if (!items) return []
     if (!searchText) return items
 
     return items.filter((item) => {
-      return Object.keys(item)
+      const keys = key
-        .filter(
+        ? [key]
-          (key) =>
+        : Object.keys(item).filter(
-            typeof item[key] === 'string' || typeof item[key] === 'number'
+            (key) =>
-        )
+              typeof item[key] === 'string' || typeof item[key] === 'number'
-        .some((key) => {
+          )
-          return String(item[key])
+      return keys.some((key) => {
-            .toLowerCase()
+        return String(item[key])
-            .includes(searchText.toLowerCase())
+          .toLowerCase()
-        })
+          .includes(searchText.toLowerCase())
+      })
     })
   }
 }