Merge pull request #470 from UiPath/feat/grid-swap-filter-containers

feat(grid): allow swapping filter containers
UiPath · Apr 9, 2024 · d5660a9 · d5660a9
2 parents 477db1e + 942d781
commit d5660a9
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 82 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# v15.2.5 (2024-04-09)
+* **grid** allow swapping filter containers
+* **chore** update readme with new package from apollo-design
+
 # v15.2.4 (2024-02-22)
 * **grid** remove reserved space for actions if scrollable
 * **grid** update font and icon sizes for high density mode

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-components",
-  "version": "15.2.4",
+  "version": "15.2.5",
   "author": {
     "name": "UiPath Inc",
     "url": "https://uipath.com"

diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.html b/projects/angular/components/ui-grid/src/ui-grid.component.html
@@ -11,88 +11,16 @@
                 (isAnyFilterDefined$ | async)"
      class="ui-grid-filter-container">
     <div class="ui-grid-filter-container-lhs-group">
-        <div class="ui-grid-filter-container-lhs-group-actions">
-            <ng-container *ngIf="filterManager.hasCustomFilter$ | async; else noCustomFilter">
-                <ng-container *ngTemplateOutlet="toggleColumnsTmpl"></ng-container>
-                <button *ngIf="!(hasSelection$ | async)"
-                        (click)="clearCustomFilter()"
-                        mat-flat-button
-                        type="button"
-                        data-cy="clear-custom-filter">
-                    {{ intl.clearCustomFilter }}
-                </button>
-            </ng-container>
-            <ng-template #noCustomFilter>
-                <ng-container>
-                    <ng-container *ngIf="!(hasSelection$ | async) ||
-                                !header?.actionButtons?.length">
-                        <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>
-
-                        <ng-container *ngTemplateOutlet="filtersTmpl">
-                        </ng-container>
-                    </ng-container>
-
-                    <div *ngIf="!(hasSelection$ | async)"
-                         class="ui-grid-action-buttons ui-grid-action-buttons-inline">
-                        <ng-container *ngFor="let button of header?.inlineButtons">
-                            <ng-container *ngIf="button.visible">
-                                <ng-container *ngTemplateOutlet="button.html ?? null">
-                                </ng-container>
-                            </ng-container>
-                        </ng-container>
-                    </div>
-                </ng-container>
-            </ng-template>
-
-            <div #gridActionButtons
-                 *ngIf="hasSelection$ | async"
-                 class="ui-grid-action-buttons ui-grid-action-buttons-selection">
-                <ng-container *ngFor="let button of header?.actionButtons">
-                    <ng-container *ngIf="button.visible">
-                        <ng-container *ngTemplateOutlet="button.html?? null">
-                        </ng-container>
-                    </ng-container>
-                </ng-container>
-            </div>
-        </div>
-        <div *ngIf="showFilters &&
-                (hasAnyFiltersVisible$ | async) &&
-                (filterManager.hasCustomFilter$ | async) === false &&
-                !(hasSelection$ | async)"
-             [@filters-container]
-             class="ui-grid-filter-container-lhs-group-filters">
-            <ng-container *ngTemplateOutlet="inlineFiltersTmpl"></ng-container>
-        </div>
+        <ng-container *ngIf="swapFilterContainers; else gridFilterContainerLeft">
+            <ng-container *ngTemplateOutlet="gridFilterContainerRight"></ng-container>
+        </ng-container>
     </div>
 
     <div class="ui-grid-filter-container-rhs-group"
          *ngLet="(hasSelection$ | async) as hasSelections">
-        <div class="ui-grid-action-buttons ui-grid-action-buttons-main">
-            <ng-container *ngFor="let button of header?.mainButtons">
-                <ng-container *ngIf="button.visible">
-                    <ng-container *ngTemplateOutlet="button.html ?? null">
-                    </ng-container>
-                </ng-container>
-            </ng-container>
-        </div>
+         <ng-container *ngIf="swapFilterContainers; else gridFilterContainerRight">
+            <ng-container *ngTemplateOutlet="gridFilterContainerLeft"></ng-container>
+        </ng-container>
     </div>
 </div>
 
@@ -827,3 +755,87 @@
                             (visibleColumnsToggled)="visibleColumnsToggle$.next($event)">
     </ui-grid-toggle-columns>
 </ng-template>
+
+<ng-template #gridFilterContainerLeft>
+    <div class="ui-grid-filter-container-lhs-group-actions">
+        <ng-container *ngIf="filterManager.hasCustomFilter$ | async; else noCustomFilter">
+            <ng-container *ngTemplateOutlet="toggleColumnsTmpl"></ng-container>
+            <button *ngIf="!(hasSelection$ | async)"
+                    (click)="clearCustomFilter()"
+                    mat-flat-button
+                    type="button"
+                    data-cy="clear-custom-filter">
+                {{ intl.clearCustomFilter }}
+            </button>
+        </ng-container>
+        <ng-template #noCustomFilter>
+            <ng-container>
+                <ng-container *ngIf="!(hasSelection$ | async) ||
+                            !header?.actionButtons?.length">
+                    <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>
+
+                    <ng-container *ngTemplateOutlet="filtersTmpl">
+                    </ng-container>
+                </ng-container>
+
+                <div *ngIf="!(hasSelection$ | async)"
+                     class="ui-grid-action-buttons ui-grid-action-buttons-inline">
+                    <ng-container *ngFor="let button of header?.inlineButtons">
+                        <ng-container *ngIf="button.visible">
+                            <ng-container *ngTemplateOutlet="button.html ?? null">
+                            </ng-container>
+                        </ng-container>
+                    </ng-container>
+                </div>
+            </ng-container>
+        </ng-template>
+
+        <div #gridActionButtons
+             *ngIf="hasSelection$ | async"
+             class="ui-grid-action-buttons ui-grid-action-buttons-selection">
+            <ng-container *ngFor="let button of header?.actionButtons">
+                <ng-container *ngIf="button.visible">
+                    <ng-container *ngTemplateOutlet="button.html?? null">
+                    </ng-container>
+                </ng-container>
+            </ng-container>
+        </div>
+    </div>
+    <div *ngIf="showFilters &&
+            (hasAnyFiltersVisible$ | async) &&
+            (filterManager.hasCustomFilter$ | async) === false &&
+            !(hasSelection$ | async)"
+         [@filters-container]
+         class="ui-grid-filter-container-lhs-group-filters">
+        <ng-container *ngTemplateOutlet="inlineFiltersTmpl"></ng-container>
+    </div>
+</ng-template>
+
+<ng-template #gridFilterContainerRight>
+    <div class="ui-grid-action-buttons ui-grid-action-buttons-main">
+        <ng-container *ngFor="let button of header?.mainButtons">
+            <ng-container *ngIf="button.visible">
+                <ng-container *ngTemplateOutlet="button.html ?? null">
+                </ng-container>
+            </ng-container>
+        </ng-container>
+    </div>
+</ng-template>
diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.ts b/projects/angular/components/ui-grid/src/ui-grid.component.ts
@@ -469,6 +469,13 @@ export class UiGridComponent<T extends IGridDataEntry>
     @Input()
     selectablePageIndex: boolean;
 
+    /**
+     * Configure if the filter containers should be swapped
+     *
+     */
+    @Input()
+    swapFilterContainers = false;
+
     /**
      * Emits an event with the sort model when a column sort changes.
      *

diff --git a/projects/angular/package.json b/projects/angular/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@uipath/angular",
-    "version": "15.2.4",
+    "version": "15.2.5",
     "license": "MIT",
     "author": {
         "name": "UiPath Inc",

diff --git a/projects/playground/src/app/pages/grid/component/grid.component.html b/projects/playground/src/app/pages/grid/component/grid.component.html
@@ -19,6 +19,7 @@
          [resizeStrategy]="inputs.isScrollable ? scrollableGridStrategy : immediateNeighbourHaltStrategy"
          [customFilterValue]="inputs.customFilter ? [{property: 'parity', method: 'eq', value: 'odd'}] : []"
          [allowHighlight]="inputs.allowHighlight"
+         [swapFilterContainers]="inputs.swapFilterContainers"
          [selectablePageIndex]="inputs.selectablePageIndex">
 
     <ui-grid-header [search]="header.searchable">

diff --git a/projects/playground/src/app/pages/grid/grid.models.ts b/projects/playground/src/app/pages/grid/grid.models.ts
@@ -35,6 +35,7 @@ export interface IInputs {
     hideTotalCount: boolean;
     isScrollable: boolean;
     allowHighlight: boolean;
+    swapFilterContainers: boolean;
     selectablePageIndex: boolean;
 }
 

diff --git a/projects/playground/src/app/pages/grid/grid.page.ts b/projects/playground/src/app/pages/grid/grid.page.ts
@@ -67,6 +67,7 @@ export class GridPageComponent implements AfterViewInit, OnDestroy {
         'useCardView',
         'isScrollable',
         'allowHighlight',
+        'swapFilterContainers',
         'selectablePageIndex',
     ];
 
@@ -134,6 +135,7 @@ export class GridPageComponent implements AfterViewInit, OnDestroy {
                 useCardView: [false],
                 isScrollable: [false],
                 allowHighlight: [false],
+                swapFilterContainers: [false],
                 selectablePageIndex: [true],
             }),
             header: this._fb.group({