diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html index cac217716..9e9a73124 100644 --- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html +++ b/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> diff --git a/src-ui/src/app/pipes/filter.pipe.spec.ts b/src-ui/src/app/pipes/filter.pipe.spec.ts index 9c4bfb372..08b14ccf9 100644 --- a/src-ui/src/app/pipes/filter.pipe.spec.ts +++ b/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]]) + }) }) diff --git a/src-ui/src/app/pipes/filter.pipe.ts b/src-ui/src/app/pipes/filter.pipe.ts index 64765bd6a..90ac3da1c 100644 --- a/src-ui/src/app/pipes/filter.pipe.ts +++ b/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) - .filter( - (key) => - typeof item[key] === 'string' || typeof item[key] === 'number' - ) - .some((key) => { - return String(item[key]) - .toLowerCase() - .includes(searchText.toLowerCase()) - }) + const keys = key + ? [key] + : Object.keys(item).filter( + (key) => + typeof item[key] === 'string' || typeof item[key] === 'number' + ) + return keys.some((key) => { + return String(item[key]) + .toLowerCase() + .includes(searchText.toLowerCase()) + }) }) } }