feat: data table improved

markuczy · Oct 31, 2024 · 2439812 · 2439812
1 parent 8211969
commit 2439812
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 23 deletions.
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
@@ -97,28 +97,16 @@
   <ng-template #filterTablePanel>
     <p-overlayPanel *ngIf="tableTemplates$ | async as templates" #op [showCloseIcon]="true">
       <ng-template pTemplate="content">
-        <!-- [frozenActionColumn]=""
-        [actionColumnPosition]=""
-        [paginator]=""
-        [page]=""
-        [filters]=""
-        [sortDirection]=""
-        [sortColumn]=""
-        [sortStates]=""
-        [clientSideFiltering]=""
-        [clientSideSorting]=""
-        [pageSizes]=""
-        (sorted)=""
-        (filtered)=""
-        (deleteTableRow)=""
-        [parentTemplates]="templatesForChildren$ | async"
-        (pageChanged)=""
-        (pageSizeChanged)=""
-        [pageSize]=""
-        (componentStateChanged)=""
-        [emptyResultsMessage]=""
-        -->
-        <ocx-data-table [rows]="(columnFilterDataRows$ | async) ?? []" [columns]="columnFilterTableColumns">
+        <ocx-data-table
+          [rows]="(columnFilterDataRows$ | async) ?? []"
+          [columns]="columnFilterTableColumns"
+          [emptyResultsMessage]="'OCX_FILTER_VIEW.NO_FILTERS' | translate"
+          [actionColumnPosition]="'right'"
+          [paginator]="paginator"
+          [pageSize]="pageSize"
+          [pageSizes]="pageSizes"
+          (deleteTableRow)="onFilterDelete($event)"
+        >
           <ng-template pTemplate="columnIdCell" let-rowObject="rowObject" let-column="column">
             <ng-container
               [ngTemplateOutlet]="_tableValueTemplate"

diff --git a/libs/angular-accelerator/src/lib/components/filter-view/filter-view.component.ts b/libs/angular-accelerator/src/lib/components/filter-view/filter-view.component.ts
@@ -65,6 +65,9 @@ export class FilterViewComponent implements OnInit {
   @Input() selectDisplayedChips: (filters: ColumnFilterData[]) => 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<Filter[]> = new EventEmitter()
   @Output() componentStateChanged: EventEmitter<FilterViewComponentState> = 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/...accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html b/...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)"
       ></ocx-filter-view>

diff --git a/...rator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts b/...rator/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<InteractiveDataViewComponent> = {
   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/...r-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts b/...r-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