Skip to content

Commit

Permalink
fix: data table column filter templating (#599)
Browse files Browse the repository at this point in the history 
* fix: filter options computed correctly

* fix: data table uses filter templates

---------

Co-authored-by: kim.tran <[email protected]>
Co-authored-by: Kim Tran <[email protected]>
  • Loading branch information
@markuczy @KimFFVII
3 people authored Nov 13, 2024
1 parent 308abe8 commit 132c7d5
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 39 deletions.
68 changes: 35 additions & 33 deletions libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,42 +155,44 @@
[attr.aria-label]="('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})"
></button>
<ng-container *ngIf="currentEqualFilterOptions$ | async as equalFilterOptions">
<p-multiSelect
class="filterMultiSelect"
*ngIf="column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)"
[options]="equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []"
[ngModel]="(currentEqualSelectedFilters$ | async) || []"
[showToggleAll]="true"
emptyFilterMessage="{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}"
[displaySelectedLabel]="false"
[resetFilterOnHide]="true"
(onChange)="onMultiselectFilterChange(column, $event)"
placeholder="Icon"
appendTo="body"
(onFocus)="onFilterChosen(column)"
[title]="'OCX_DATA_TABLE.FILTER_TITLE' | translate"
[ariaLabel]="'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate"
[ariaFilterLabel]="('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})"
>
<ng-template pTemplate="selectedItems" let-value>
<div
class="pi"
[class.pi-filter]="!((filterAmounts$ | async) || {})[column.id]"
[class.pi-filter-fill]="((filterAmounts$ | async) || {})[column.id] > 0"
></div>
</ng-template>
<ng-template pTemplate="item" let-value>
<ng-container
*ngIf="columnTemplates[column.id] as template"
[ngTemplateOutlet]="template"
[ngTemplateOutletContext]="{
<ng-container *ngIf="columnFilterTemplates$ | async as columnFilterTemplates">
<p-multiSelect
class="filterMultiSelect"
*ngIf="column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)"
[options]="equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []"
[ngModel]="(currentEqualSelectedFilters$ | async) || []"
[showToggleAll]="true"
emptyFilterMessage="{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}"
[displaySelectedLabel]="false"
[resetFilterOnHide]="true"
(onChange)="onMultiselectFilterChange(column, $event)"
placeholder="Icon"
appendTo="body"
(onFocus)="onFilterChosen(column)"
[title]="'OCX_DATA_TABLE.FILTER_TITLE' | translate"
[ariaLabel]="'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate"
[ariaFilterLabel]="('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})"
>
<ng-template pTemplate="selectedItems" let-value>
<div
class="pi"
[class.pi-filter]="!((filterAmounts$ | async) || {})[column.id]"
[class.pi-filter-fill]="((filterAmounts$ | async) || {})[column.id] > 0"
></div>
</ng-template>
<ng-template pTemplate="item" let-value>
<ng-container
*ngIf="columnFilterTemplates[column.id] as template"
[ngTemplateOutlet]="template"
[ngTemplateOutletContext]="{
rowObject: getRowObjectFromMultiselectItem(value, column),
column: column
}"
>
</ng-container>
</ng-template>
</p-multiSelect>
>
</ng-container>
</ng-template>
</p-multiSelect>
</ng-container>
</ng-container>
<p-multiSelect
class="filterMultiSelect"
Expand Down
43 changes: 37 additions & 6 deletions libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
this?._sortColumn$.next(value)
}
columnTemplates$: Observable<Record<string, TemplateRef<any> | null>> | undefined
columnFilterTemplates$: Observable<Record<string, TemplateRef<any> | null>> | undefined
_columns$ = new BehaviorSubject<DataTableColumn[]>([])
@Input()
get columns(): DataTableColumn[] {
Expand All @@ -134,9 +135,13 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
set columns(value: DataTableColumn[]) {
this._columns$.next(value)
const obs = value.map((c) => this.getTemplate(c, TemplateType.CELL))
const filterObs = value.map((c) => this.getTemplate(c, TemplateType.FILTERCELL))
this.columnTemplates$ = combineLatest(obs).pipe(
map((values) => Object.fromEntries(value.map((c, i) => [c.id, values[i]])))
)
this.columnFilterTemplates$ = combineLatest(filterObs).pipe(
map((values) => Object.fromEntries(value.map((c, i) => [c.id, values[i]])))
)
}
@Input() clientSideFiltering = true
@Input() clientSideSorting = true
Expand Down Expand Up @@ -783,18 +788,44 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon

filterTemplatesData: TemplatesData = {
templatesObservables: {},
idSuffix: ['IdTableFilterCell', 'IdFilterCell'],
idSuffix: ['IdTableFilterCell', 'IdFilterCell', 'IdTableCell', 'IdCell'],
templateNames: {
[ColumnType.DATE]: ['dateFilterCell', 'dateTableFilterCell', 'defaultDateCell'],
[ColumnType.NUMBER]: ['numberFilterCell', 'numberTableFilterCell', 'defaultNumberCell'],
[ColumnType.RELATIVE_DATE]: ['relativeDateFilterCell', 'relativeDateTableFilterCell', 'defaultRelativeDateCell'],
[ColumnType.DATE]: ['dateFilterCell', 'dateTableFilterCell', 'dateCell', 'dateTableCell', 'defaultDateCell'],
[ColumnType.NUMBER]: [
'numberFilterCell',
'numberTableFilterCell',
'numberCell',
'numberTableCell',
'defaultNumberCell',
],
[ColumnType.RELATIVE_DATE]: [
'relativeDateFilterCell',
'relativeDateTableFilterCell',
'relativeDateCell',
'relativeDateTableCell',
'defaultRelativeDateCell',
],
[ColumnType.TRANSLATION_KEY]: [
'translationKeyFilterCell',
'translationKeyTableFilterCell',
'defaultTranslationKeyCell',
'translationKeyCell',
'translationKeyTableCell',
],
[ColumnType.CUSTOM]: [
'customFilterCell',
'customTableFilterCell',
'customCell',
'customTableCell',
'defaultCustomCell',
],
[ColumnType.STRING]: [
'stringFilterCell',
'stringTableFilterCell',
'stringCell',
'stringTableCell',
'defaultStringCell',
],
[ColumnType.CUSTOM]: ['customFilterCell', 'customTableFilterCell', 'defaultCustomCell'],
[ColumnType.STRING]: ['stringFilterCell', 'stringTableFilterCell', 'defaultStringCell'],
},
}

Expand Down

0 comments on commit 132c7d5

Please sign in to comment.