Merge pull request #431 from UiPath/feat/uigrid_custom_search

feat(ui-grid): add support for using a custom search

Author: toxik

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

@@ -0,0 +1,15 @@
+import {
+    ContentChild,
+    Directive,
+    TemplateRef,
+} from '@angular/core';
+
+@Directive({
+    selector: '[uiGridCustomSearch], ui-grid-custom-search',
+})
+export class UiGridCustomSearchDirective {
+    @ContentChild(TemplateRef, {
+        static: true,
+    })
+    html?: TemplateRef<any>;
+}

projects/angular/components/ui-grid/src/public_api.ts

@@ -19,6 +19,7 @@ export { UiGridRowCardViewDirective } from './body/ui-grid-row-card-view.directi
 export { UiGridLoadingDirective } from './body/ui-grid-loading.directive';
 export { UiGridNoContentDirective } from './body/ui-grid-no-content.directive';
 export { UiGridSearchComponent } from './components/ui-grid-search/ui-grid-search.component';
+export { UiGridCustomSearchDirective } from './components/ui-grid-search/ui-grid-custom-search.directive';
 export { UiGridSearchModule } from './components/ui-grid-search/ui-grid-search.module';
 export { UiGridToggleColumnsModule } from './components/ui-grid-toggle-columns/ui-grid-toggle-columns.module';
 export { UiGridToggleColumnsComponent } from './components/ui-grid-toggle-columns/ui-grid-toggle-columns.component';

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

@@ -26,17 +26,23 @@
                 <ng-container>
                     <ng-container *ngIf="!(hasSelection$ | async) ||
                                 !header?.actionButtons?.length">
-                        <ui-grid-search *ngIf="header?.search"
-                                        [debounce]="header!.searchDebounce"
-                                        [maxLength]="header!.searchMaxLength"
-                                        [placeholder]="intl.searchPlaceholder"
-                                        [searchTooltip]="intl.searchTooltip"
-                                        [clearTooltip]="intl.clearTooltip"
-                                        [tooltipDisabled]="resizeManager.isResizing"
-                                        [value]="header!.searchValue!"
-                                        (searchChange)="filterManager.searchChange($event, header!, footer)"
-                                        class="ui-grid-search ui-grid-filter-option">
-                        </ui-grid-search>
+                        <ng-container *ngIf="!!search; else defaultSearch">
+                            <ng-container *ngTemplateOutlet="search.html ?? null"></ng-container>
+                        </ng-container>
+
+                        <ng-template #defaultSearch>
+                            <ui-grid-search *ngIf="header?.search"
+                                            [debounce]="header!.searchDebounce"
+                                            [maxLength]="header!.searchMaxLength"
+                                            [placeholder]="intl.searchPlaceholder"
+                                            [searchTooltip]="intl.searchTooltip"
+                                            [clearTooltip]="intl.clearTooltip"
+                                            [tooltipDisabled]="resizeManager.isResizing"
+                                            [value]="header!.searchValue!"
+                                            (searchChange)="filterManager.searchChange($event, header!, footer)"
+                                            class="ui-grid-search ui-grid-filter-option">
+                            </ui-grid-search>
+                        </ng-template>
 
                         <ng-container *ngTemplateOutlet="toggleColumnsTmpl"></ng-container>
 

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

@@ -76,6 +76,7 @@ import { UiGridNoContentDirective } from './body/ui-grid-no-content.directive';
 import { UiGridRowActionDirective } from './body/ui-grid-row-action.directive';
 import { UiGridRowCardViewDirective } from './body/ui-grid-row-card-view.directive';
 import { UiGridRowConfigDirective } from './body/ui-grid-row-config.directive';
+import { UiGridCustomSearchDirective } from './components/ui-grid-search/ui-grid-custom-search.directive';
 import { ISuggestDropdownValueData } from './filters/ui-grid-dropdown-filter.directive';
 import { UiGridSearchFilterDirective } from './filters/ui-grid-search-filter.directive';
 import { UiGridFooterDirective } from './footer/ui-grid-footer.directive';
@@ -548,6 +549,16 @@ export class UiGridComponent<T extends IGridDataEntry>
     })
     header?: UiGridHeaderDirective<T>;
 
+    /**
+     * Custom search directive reference.
+     *
+     * @ignore
+     */
+    @ContentChild(UiGridCustomSearchDirective, {
+        static: true,
+    })
+    search?: UiGridCustomSearchDirective;
+
     /**
      * Column directive reference list.
      *

projects/angular/components/ui-grid/src/ui-grid.module.ts

@@ -16,6 +16,7 @@ import { UiSuggestModule } from '@uipath/angular/components/ui-suggest';
 import { UiNgLetModule } from '@uipath/angular/directives/ui-ng-let';
 import { UiVirtualScrollViewportResizeModule } from '@uipath/angular/directives/ui-virtual-scroll-viewport-resize';
 
+import { UiGridCustomSearchDirective } from './components/ui-grid-search/ui-grid-custom-search.directive';
 import { UiGridColumnDirective } from './body/ui-grid-column.directive';
 import { UiGridExpandedRowDirective } from './body/ui-grid-expanded-row.directive';
 import { UiGridLoadingDirective } from './body/ui-grid-loading.directive';
@@ -69,6 +70,7 @@ import { UiGridComponent } from './ui-grid.component';
         UiGridNoContentDirective,
         UiGridLoadingDirective,
         UiGridRowCardViewDirective,
+        UiGridCustomSearchDirective,
     ],
     exports: [
         UiGridComponent,
@@ -84,6 +86,7 @@ import { UiGridComponent } from './ui-grid.component';
         UiGridNoContentDirective,
         UiGridLoadingDirective,
         UiGridRowCardViewDirective,
+        UiGridCustomSearchDirective,
     ],
 })
 export class UiGridModule { }