feat(grid): add minchars and displaycount to search filter

CHANGELOG.md

@@ -1,3 +1,6 @@
+# v14.0.1 (2023-01-26)
+* **grid** add minchars and displaycount to search filter
+
 # v14.0.0 (2023-01-19)
 
 # v14.0.0-rc.3 (2023-01-13)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-components",
-  "version": "14.0.0",
+  "version": "14.0.1",
   "author": {
     "name": "UiPath Inc",
     "url": "https://uipath.com"

projects/angular/components/ui-grid/src/filters/ui-grid-search-filter.directive.ts

@@ -83,6 +83,21 @@ export class UiGridSearchFilterDirective<T> extends UiGridFilterDirective<T> imp
     @Input()
     multiple = false;
 
+    /**
+     * Configure the minimum number of characters that triggers the searchSourceFactory call
+     * This will have priority over the fetch strategy if set.
+     *
+     */
+    @Input()
+    minChars = 0;
+
+    /**
+     * The maximum number of items rendered in the viewport.
+     *
+     */
+    @Input()
+    displayCount = 10;
+
     /**
      * @ignore
      */

projects/angular/components/ui-grid/src/managers/filter-manager.spec.ts

@@ -281,6 +281,7 @@ describe('Component: UiGrid', () => {
                                 expect(filter).toBeDefined();
                                 expect(filter!.value).toEqual(columnOptionDefinition.option.id);
                                 expect(filter!.method).toBe(columnOptionDefinition.column.searchableDropdown!.method!);
+                                expect(filter!.meta).toEqual(columnOptionDefinition.option);
                             });
 
                         manager.searchableDropdownUpdate(columnOptionDefinition.column, columnOptionDefinition.option);
@@ -302,6 +303,7 @@ describe('Component: UiGrid', () => {
                             expect(filter).toBeDefined();
                             expect(filter.value).toEqual(columnOptionDefinition.option.id);
                             expect(filter.method).toBe(columnOptionDefinition.column.searchableDropdown!.method!);
+                            expect(filter.meta).toEqual(columnOptionDefinition.option);
                         });
 
                         manager.searchableDropdownUpdate(columnOptionDefinition.column, columnOptionDefinition.option);
@@ -329,6 +331,7 @@ describe('Component: UiGrid', () => {
                                     expect(filter).toBeDefined();
                                     expect(filter.value).toEqual(columnOptionDefinition.option.id);
                                     expect(filter.method).toBe(columnOptionDefinition.column.searchableDropdown!.method!);
+                                    expect(filter.meta).toEqual(columnOptionDefinition.option);
                                 });
                             });
                         });
@@ -376,6 +379,7 @@ describe('Component: UiGrid', () => {
                             expect(Array.isArray(filter.value)).toEqual(true);
                             expect(filter.value).toEqual([columnOptionDefinition.option.id] as unknown as []);
                             expect(filter.method).toBe(columnOptionDefinition.column.searchableDropdown!.method!);
+                            expect(filter.meta).toEqual([columnOptionDefinition.option]);
                         });
 
                         manager.searchableDropdownUpdate(columnOptionDefinition.column, columnOptionDefinition.option, true);

projects/angular/components/ui-grid/src/managers/filter-manager.ts

@@ -197,6 +197,7 @@ export class FilterManager<T> {
             value: column.searchableDropdown!.multiple ?
                 (column.searchableDropdown!.value! as ISuggestValue[]).map(value => value.id)
                 : (column.searchableDropdown!.value! as ISuggestValue).id,
+            meta: column.searchableDropdown!.value,
         } as IFilterModel<T>;
     }
 

projects/angular/components/ui-grid/src/models/filterModel.ts

@@ -1,3 +1,5 @@
+import { ISuggestValueData } from '@uipath/angular/components/ui-suggest';
+
 /**
  * The filter model schema.
  *
@@ -28,4 +30,10 @@ export interface IFilterModel<T> {
      *
      */
     type?: string;
+    /**
+     * The current filter meta.
+     * This will be additional suggest data sent to search filters in case you need more than the id from suggest.
+     *
+     */
+    meta?: ISuggestValueData<T> | ISuggestValueData<T>[] | null;
 }

projects/angular/components/ui-grid/src/ui-grid.component.html

@@ -582,6 +582,8 @@
                         [attr.data-cy]="getColumnName(column, 'ui-grid-search-filter')"
                         [multiple]="column.searchableDropdown!.multiple"
                         [compact]="column.searchableDropdown!.multiple"
+                        [displayCount]="column.searchableDropdown!.displayCount"
+                        [minChars]="column.searchableDropdown!.minChars ?? 0"
                         (selected)="filterManager.searchableDropdownUpdate(column, $event, true)"
                         (deselected)="filterManager.searchableDropdownUpdate(column, $event, false)"
                         (opened)="column.refetch && suggest.fetch()"

projects/angular/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uipath/angular",
-    "version": "14.0.0",
+    "version": "14.0.1",
     "license": "MIT",
     "author": {
         "name": "UiPath Inc",