Skip to content

Commit b8ab456

Browse files
dkorobeinikovdkorobeinikov
committed
feat(grid): allow swapping filter containers
1 parent 477db1e commit b8ab456

File tree

5 files changed

+101
-78
lines changed

5 files changed

+101
-78
lines changed

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

Lines changed: 90 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -11,88 +11,16 @@
1111
(isAnyFilterDefined$ | async)"
1212
class="ui-grid-filter-container">
1313
<div class="ui-grid-filter-container-lhs-group">
14-
<div class="ui-grid-filter-container-lhs-group-actions">
15-
<ng-container *ngIf="filterManager.hasCustomFilter$ | async; else noCustomFilter">
16-
<ng-container *ngTemplateOutlet="toggleColumnsTmpl"></ng-container>
17-
<button *ngIf="!(hasSelection$ | async)"
18-
(click)="clearCustomFilter()"
19-
mat-flat-button
20-
type="button"
21-
data-cy="clear-custom-filter">
22-
{{ intl.clearCustomFilter }}
23-
</button>
24-
</ng-container>
25-
<ng-template #noCustomFilter>
26-
<ng-container>
27-
<ng-container *ngIf="!(hasSelection$ | async) ||
28-
!header?.actionButtons?.length">
29-
<ng-container *ngIf="!!search; else defaultSearch">
30-
<ng-container *ngTemplateOutlet="search.html ?? null"></ng-container>
31-
</ng-container>
32-
33-
<ng-template #defaultSearch>
34-
<ui-grid-search *ngIf="header?.search"
35-
[debounce]="header!.searchDebounce"
36-
[maxLength]="header!.searchMaxLength"
37-
[placeholder]="intl.searchPlaceholder"
38-
[searchTooltip]="intl.searchTooltip"
39-
[clearTooltip]="intl.clearTooltip"
40-
[tooltipDisabled]="resizeManager.isResizing"
41-
[value]="header!.searchValue!"
42-
(searchChange)="filterManager.searchChange($event, header!, footer)"
43-
class="ui-grid-search ui-grid-filter-option">
44-
</ui-grid-search>
45-
</ng-template>
46-
47-
<ng-container *ngTemplateOutlet="toggleColumnsTmpl"></ng-container>
48-
49-
<ng-container *ngTemplateOutlet="filtersTmpl">
50-
</ng-container>
51-
</ng-container>
52-
53-
<div *ngIf="!(hasSelection$ | async)"
54-
class="ui-grid-action-buttons ui-grid-action-buttons-inline">
55-
<ng-container *ngFor="let button of header?.inlineButtons">
56-
<ng-container *ngIf="button.visible">
57-
<ng-container *ngTemplateOutlet="button.html ?? null">
58-
</ng-container>
59-
</ng-container>
60-
</ng-container>
61-
</div>
62-
</ng-container>
63-
</ng-template>
64-
65-
<div #gridActionButtons
66-
*ngIf="hasSelection$ | async"
67-
class="ui-grid-action-buttons ui-grid-action-buttons-selection">
68-
<ng-container *ngFor="let button of header?.actionButtons">
69-
<ng-container *ngIf="button.visible">
70-
<ng-container *ngTemplateOutlet="button.html?? null">
71-
</ng-container>
72-
</ng-container>
73-
</ng-container>
74-
</div>
75-
</div>
76-
<div *ngIf="showFilters &&
77-
(hasAnyFiltersVisible$ | async) &&
78-
(filterManager.hasCustomFilter$ | async) === false &&
79-
!(hasSelection$ | async)"
80-
[@filters-container]
81-
class="ui-grid-filter-container-lhs-group-filters">
82-
<ng-container *ngTemplateOutlet="inlineFiltersTmpl"></ng-container>
83-
</div>
14+
<ng-container *ngIf="swapFilterContainers; else gridFilterContainerLeft">
15+
<ng-container *ngTemplateOutlet="gridFilterContainerRight"></ng-container>
16+
</ng-container>
8417
</div>
8518

8619
<div class="ui-grid-filter-container-rhs-group"
8720
*ngLet="(hasSelection$ | async) as hasSelections">
88-
<div class="ui-grid-action-buttons ui-grid-action-buttons-main">
89-
<ng-container *ngFor="let button of header?.mainButtons">
90-
<ng-container *ngIf="button.visible">
91-
<ng-container *ngTemplateOutlet="button.html ?? null">
92-
</ng-container>
93-
</ng-container>
94-
</ng-container>
95-
</div>
21+
<ng-container *ngIf="swapFilterContainers; else gridFilterContainerRight">
22+
<ng-container *ngTemplateOutlet="gridFilterContainerLeft"></ng-container>
23+
</ng-container>
9624
</div>
9725
</div>
9826

@@ -827,3 +755,87 @@
827755
(visibleColumnsToggled)="visibleColumnsToggle$.next($event)">
828756
</ui-grid-toggle-columns>
829757
</ng-template>
758+
759+
<ng-template #gridFilterContainerLeft>
760+
<div class="ui-grid-filter-container-lhs-group-actions">
761+
<ng-container *ngIf="filterManager.hasCustomFilter$ | async; else noCustomFilter">
762+
<ng-container *ngTemplateOutlet="toggleColumnsTmpl"></ng-container>
763+
<button *ngIf="!(hasSelection$ | async)"
764+
(click)="clearCustomFilter()"
765+
mat-flat-button
766+
type="button"
767+
data-cy="clear-custom-filter">
768+
{{ intl.clearCustomFilter }}
769+
</button>
770+
</ng-container>
771+
<ng-template #noCustomFilter>
772+
<ng-container>
773+
<ng-container *ngIf="!(hasSelection$ | async) ||
774+
!header?.actionButtons?.length">
775+
<ng-container *ngIf="!!search; else defaultSearch">
776+
<ng-container *ngTemplateOutlet="search.html ?? null"></ng-container>
777+
</ng-container>
778+
779+
<ng-template #defaultSearch>
780+
<ui-grid-search *ngIf="header?.search"
781+
[debounce]="header!.searchDebounce"
782+
[maxLength]="header!.searchMaxLength"
783+
[placeholder]="intl.searchPlaceholder"
784+
[searchTooltip]="intl.searchTooltip"
785+
[clearTooltip]="intl.clearTooltip"
786+
[tooltipDisabled]="resizeManager.isResizing"
787+
[value]="header!.searchValue!"
788+
(searchChange)="filterManager.searchChange($event, header!, footer)"
789+
class="ui-grid-search ui-grid-filter-option">
790+
</ui-grid-search>
791+
</ng-template>
792+
793+
<ng-container *ngTemplateOutlet="toggleColumnsTmpl"></ng-container>
794+
795+
<ng-container *ngTemplateOutlet="filtersTmpl">
796+
</ng-container>
797+
</ng-container>
798+
799+
<div *ngIf="!(hasSelection$ | async)"
800+
class="ui-grid-action-buttons ui-grid-action-buttons-inline">
801+
<ng-container *ngFor="let button of header?.inlineButtons">
802+
<ng-container *ngIf="button.visible">
803+
<ng-container *ngTemplateOutlet="button.html ?? null">
804+
</ng-container>
805+
</ng-container>
806+
</ng-container>
807+
</div>
808+
</ng-container>
809+
</ng-template>
810+
811+
<div #gridActionButtons
812+
*ngIf="hasSelection$ | async"
813+
class="ui-grid-action-buttons ui-grid-action-buttons-selection">
814+
<ng-container *ngFor="let button of header?.actionButtons">
815+
<ng-container *ngIf="button.visible">
816+
<ng-container *ngTemplateOutlet="button.html?? null">
817+
</ng-container>
818+
</ng-container>
819+
</ng-container>
820+
</div>
821+
</div>
822+
<div *ngIf="showFilters &&
823+
(hasAnyFiltersVisible$ | async) &&
824+
(filterManager.hasCustomFilter$ | async) === false &&
825+
!(hasSelection$ | async)"
826+
[@filters-container]
827+
class="ui-grid-filter-container-lhs-group-filters">
828+
<ng-container *ngTemplateOutlet="inlineFiltersTmpl"></ng-container>
829+
</div>
830+
</ng-template>
831+
832+
<ng-template #gridFilterContainerRight>
833+
<div class="ui-grid-action-buttons ui-grid-action-buttons-main">
834+
<ng-container *ngFor="let button of header?.mainButtons">
835+
<ng-container *ngIf="button.visible">
836+
<ng-container *ngTemplateOutlet="button.html ?? null">
837+
</ng-container>
838+
</ng-container>
839+
</ng-container>
840+
</div>
841+
</ng-template>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -469,6 +469,13 @@ export class UiGridComponent<T extends IGridDataEntry>
469469
@Input()
470470
selectablePageIndex: boolean;
471471

472+
/**
473+
* Configure if the filter containers should be swapped
474+
*
475+
*/
476+
@Input()
477+
swapFilterContainers = false;
478+
472479
/**
473480
* Emits an event with the sort model when a column sort changes.
474481
*

‎projects/playground/src/app/pages/grid/component/grid.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
[resizeStrategy]="inputs.isScrollable ? scrollableGridStrategy : immediateNeighbourHaltStrategy"
2020
[customFilterValue]="inputs.customFilter ? [{property: 'parity', method: 'eq', value: 'odd'}] : []"
2121
[allowHighlight]="inputs.allowHighlight"
22+
[swapFilterContainers]="inputs.swapFilterContainers"
2223
[selectablePageIndex]="inputs.selectablePageIndex">
2324

2425
<ui-grid-header [search]="header.searchable">

‎projects/playground/src/app/pages/grid/grid.models.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export interface IInputs {
3535
hideTotalCount: boolean;
3636
isScrollable: boolean;
3737
allowHighlight: boolean;
38+
swapFilterContainers: boolean;
3839
selectablePageIndex: boolean;
3940
}
4041

‎projects/playground/src/app/pages/grid/grid.page.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ export class GridPageComponent implements AfterViewInit, OnDestroy {
6767
'useCardView',
6868
'isScrollable',
6969
'allowHighlight',
70+
'swapFilterContainers',
7071
'selectablePageIndex',
7172
];
7273

@@ -134,6 +135,7 @@ export class GridPageComponent implements AfterViewInit, OnDestroy {
134135
useCardView: [false],
135136
isScrollable: [false],
136137
allowHighlight: [false],
138+
swapFilterContainers: [false],
137139
selectablePageIndex: [true],
138140
}),
139141
header: this._fb.group({

0 commit comments

Comments
 (0)