diff --git a/libs/angular-accelerator/src/lib/components/filter-view/filter-view.component.html b/libs/angular-accelerator/src/lib/components/filter-view/filter-view.component.html index caf311a2..257d7149 100644 --- a/libs/angular-accelerator/src/lib/components/filter-view/filter-view.component.html +++ b/libs/angular-accelerator/src/lib/components/filter-view/filter-view.component.html @@ -97,28 +97,16 @@ - - + ColumnFilterData[] = (filters) => limit(filters, 3, { reverse: true }) @Input() chipStyleClass: string = '' + @Input() pageSize: number | undefined + @Input() pageSizes: number[] = [5, 10, 25] + @Input() paginator: boolean = true @Output() filtered: EventEmitter = new EventEmitter() @Output() componentStateChanged: EventEmitter = new EventEmitter() @@ -174,6 +177,7 @@ export class FilterViewComponent implements OnInit { return data.map((v) => { return { id: `${v.column.id}-${v.filter.value}`, + columnId: v.column.id, column: v.column.nameKey, value: v.filter.value, } @@ -269,6 +273,15 @@ export class FilterViewComponent implements OnInit { }) } + onFilterDelete(row: Row) { + const filters = this.filters.filter((f) => !(f.columnId === row['columnId'] && f.value === row['value'])) + this.filters = filters + this.filtered.emit(filters) + this.componentStateChanged.emit({ + filters: filters, + }) + } + showPanel(event: any) { this.panel.toggle(event) } diff --git a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html index d17abb07..442f456d 100644 --- a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html +++ b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html @@ -15,6 +15,9 @@ [showChips]="showFilterViewChips" [selectDisplayedChips]="selectDisplayedChips" [chipStyleClass]="filterViewChipStyleClass" + [pageSize]="filterViewPageSize" + [pageSizes]="filterViewPageSizes" + [paginator]="filterViewPaginator" (filtered)="filtering($event)" (componentStateChanged)="filterViewComponentState$.next($event)" > diff --git a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts index 067c9c69..e0ed3715 100644 --- a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts +++ b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts @@ -41,7 +41,14 @@ import { limit } from '../../utils/filter.utils' type InteractiveDataViewInputTypes = Pick< InteractiveDataViewComponent, - 'data' | 'columns' | 'emptyResultsMessage' | 'disableFilterView' | 'showFilterViewChips' | 'selectDisplayedChips' + | 'data' + | 'columns' + | 'emptyResultsMessage' + | 'disableFilterView' + | 'showFilterViewChips' + | 'selectDisplayedChips' + | 'filterViewPageSize' + | 'filterViewPageSizes' > const InteractiveDataViewComponentSBConfig: Meta = { title: 'InteractiveDataViewComponent', @@ -178,6 +185,8 @@ const defaultComponentArgs: InteractiveDataViewInputTypes = { disableFilterView: true, showFilterViewChips: false, selectDisplayedChips: (columnFilterData) => limit(columnFilterData, 1, { reverse: true }), + filterViewPageSize: undefined, + filterViewPageSizes: [5, 10, 25], } export const WithMockData = { @@ -557,4 +566,15 @@ export const WithFilterViewCustomChipSelection = { }, } +export const WithFilterViewCustomTable = { + render: Template, + args: { + ...defaultComponentArgs, + disableFilterView: false, + showFilterViewChips: false, + filterViewPageSize: 2, + filterViewPageSizes: [2, 4, 6], + }, +} + export default InteractiveDataViewComponentSBConfig diff --git a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts index e1aed0b7..a2a000ac 100644 --- a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts +++ b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts @@ -123,6 +123,9 @@ export class InteractiveDataViewComponent implements OnInit, AfterContentInit { @Input() disableFilterView = true @Input() showFilterViewChips = false @Input() filterViewChipStyleClass: string = '' + @Input() filterViewPageSize: number | undefined + @Input() filterViewPageSizes: number[] = [5, 10, 25] + @Input() filterViewPaginator: boolean = true @Input() selectDisplayedChips: (filters: ColumnFilterData[]) => ColumnFilterData[] = (filters) => limit(filters, 3, { reverse: true }) @Input() page = 0