Merge pull request #58 from UiPath/feature/grid_reset_filters

feat(grid): define inline header buttons

Author: toxik

projects/angular/components/ui-grid/src/header/ui-grid-header-button.directive.ts

@@ -19,7 +19,7 @@ export class UiGridHeaderButtonDirective {
    *
    */
   @Input()
-    public type?: 'action' | 'main';
+    public type?: 'action' | 'main' | 'inline';
 
   /**
    * Configure if the button is visible or not.

projects/angular/components/ui-grid/src/header/ui-grid-header.directive.ts

@@ -75,6 +75,12 @@ export class UiGridHeaderDirective<T> implements AfterViewInit, OnDestroy {
      */
     public actionButtons?: UiGridHeaderButtonDirective[];
 
+    /**
+     * @internal
+     * @ignore
+     */
+    public inlineButtons?: UiGridHeaderButtonDirective[];
+
     @ContentChildren(UiGridHeaderButtonDirective)
     private _buttons!: QueryList<UiGridHeaderButtonDirective>;
 
@@ -85,6 +91,7 @@ export class UiGridHeaderDirective<T> implements AfterViewInit, OnDestroy {
     ngAfterViewInit() {
         this.mainButton = this._buttons.find(b => b.type === 'main');
         this.actionButtons = this._buttons.filter(b => b.type === 'action');
+        this.inlineButtons = this._buttons.filter(b => b.type === 'inline');
     }
 
     /**

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

@@ -4,12 +4,12 @@
     </div>
 </ng-container>
 <div *ngIf="header?.actionButtons?.length ||
+            header?.inlineButtons?.length ||
             header?.search ||
             (isAnyFilterDefined$ | async)"
      class="ui-grid-filter-container">
     <ng-container *ngIf="!selectionManager.hasValue() ||
-                   !header?.actionButtons?.length"
-                  class="ui-grid-filter-options">
+                   !header?.actionButtons?.length">
         <ui-grid-search *ngIf="header?.search"
                         [debounce]="header!.searchDebounce"
                         [maxLength]="header!.searchMaxLength"
@@ -68,6 +68,16 @@
             </ng-container>
         </ng-container>
     </ng-container>
+
+    <ng-container *ngIf="!selectionManager.hasValue()">
+        <ng-container *ngFor="let button of header?.inlineButtons">
+            <ng-container *ngIf="button.visible">
+                <ng-container *ngTemplateOutlet="button.html">
+                </ng-container>
+            </ng-container>
+        </ng-container>
+    </ng-container>
+
     <ng-container *ngIf="selectionManager.hasValue()"
                   class="ui-grid-action-buttons">
         <ng-container *ngFor="let button of header?.actionButtons">

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

@@ -504,6 +504,11 @@ describe('Component: UiGrid', () => {
                             <button class="main-action-button">Main Action</button>
                         </ng-template>
                     </ui-header-button>
+                    <ui-header-button type="inline">
+                        <ng-template>
+                            <button class="inline-action-button">Inline Action</button>
+                        </ng-template>
+                    </ui-header-button>
                     <ui-header-button type="action">
                         <ng-template>
                             <button class="selection-action-button">Selection Action</button>
@@ -568,6 +573,14 @@ describe('Component: UiGrid', () => {
                 expect(mainHeaderAction.nativeElement.innerText).toEqual('Main Action');
             });
 
+            it('should display an inline header button', () => {
+                const inlineHeaderAction = fixture.debugElement.query(By.css('.inline-action-button'));
+
+                expect(inlineHeaderAction).toBeDefined();
+                expect(inlineHeaderAction.nativeElement).toBeDefined();
+                expect(inlineHeaderAction.nativeElement.innerText).toEqual('Inline Action');
+            });
+
             it('should NOT display the selection action button if no row is selected', () => {
                 const headerSelectionAction = fixture.debugElement.query(By.css('.selection-action-button'));
 
@@ -589,6 +602,20 @@ describe('Component: UiGrid', () => {
                 expect(headerSelectionAction.nativeElement).toBeDefined();
                 expect(headerSelectionAction.nativeElement.innerText).toEqual('Selection Action');
             });
+
+            it('should NOT display the inline header button if at least one row is selected', () => {
+                const rowCheckboxInputList = fixture.debugElement
+                    .queryAll(By.css('.ui-grid-row .ui-grid-cell.ui-grid-checkbox-cell input'));
+
+                const checkboxInput = faker.helpers.randomize(rowCheckboxInputList);
+
+                checkboxInput.nativeElement.dispatchEvent(EventGenerator.click);
+
+                fixture.detectChanges();
+
+                const inlineHeaderAction = fixture.debugElement.query(By.css('.inline-action-button'));
+                expect(inlineHeaderAction).toBeFalsy();
+            });
         });
 
         describe('Configuration: with search', () => {