feat: filter view component with chips and overlay

libs/angular-accelerator/assets/i18n/de.json

@@ -99,6 +99,28 @@
     "CUSTOM_GROUP": "Benutzerdefinierte Gruppe",
     "NO_GROUP_SELECTED": "Keine Gruppe ausgewählt"
   },
+  "OCX_FILTER_VIEW": {
+    "NO_FILTERS": "Keine Filter ausgewählt",
+    "RESET_FILTERS_BUTTON": {
+      "ARIA_LABEL": "Angewandte Filter zurücksetzen",
+      "DETAIL": "Angewandte Filter zurücksetzen"
+    },
+    "FILTER_YES": "Ja",
+    "FILTER_NO": "Nein",
+    "MANAGE_FILTERS_BUTTON": {
+      "LABEL": "Filter",
+      "ARIA_LABEL": "Aktive Filter verwalten",
+      "DETAIL": "Aktive Filter verwalten"
+    },
+    "TABLE": {
+      "COLUMN_NAME": "Spaltenname",
+      "VALUE": "Filterwert",
+      "ACTIONS": "Aktionen",
+      "REMOVE_FILTER_TITLE": "Filter löschen",
+      "REMOVE_FILTER_ARIA_LABEL": "Filter löschen"
+    },
+    "PANEL_TITLE": "Filter"
+  },
   "OCX_SEARCH_HEADER": {
     "TOGGLE_BUTTON": {
       "SIMPLE": {

libs/angular-accelerator/assets/i18n/en.json

@@ -99,6 +99,28 @@
     "CUSTOM_GROUP": "Custom group",
     "NO_GROUP_SELECTED": "No group selected"
   },
+  "OCX_FILTER_VIEW": {
+    "NO_FILTERS": "No filters selected",
+    "RESET_FILTERS_BUTTON": {
+      "ARIA_LABEL": "Reset applied filters",
+      "DETAIL": "Reset applied filters"
+    },
+    "FILTER_YES": "Yes",
+    "FILTER_NO": "No",
+    "MANAGE_FILTERS_BUTTON": {
+      "LABEL": "Filters",
+      "ARIA_LABEL": "Manage active filters",
+      "DETAIL": "Manage active filters"
+    },
+    "TABLE": {
+      "COLUMN_NAME": "Column name",
+      "VALUE": "Filter value",
+      "ACTIONS": "Actions",
+      "REMOVE_FILTER_TITLE": "Remove filter",
+      "REMOVE_FILTER_ARIA_LABEL": "Remove filter"
+    },
+    "PANEL_TITLE": "Filters"
+  },
   "OCX_SEARCH_HEADER": {
     "TOGGLE_BUTTON": {
       "SIMPLE": {

libs/angular-accelerator/src/index.ts

@@ -62,3 +62,5 @@ export * from './lib/utils/create-remote-component-translate-loader.utils'
 export * from './lib/utils/enum-to-dropdown-options.utils'
 export * from './lib/utils/criteria.utils'
 export * from './lib/utils/string-and-array-helper-functions.utils'
+export * from './lib/utils/template.utils'
+export * from './lib/utils/filter.utils'

libs/angular-accelerator/src/lib/angular-accelerator-primeng.module.ts

@@ -15,10 +15,14 @@ import { MessageModule } from 'primeng/message'
 import { SharedModule } from 'primeng/api'
 import { CheckboxModule } from 'primeng/checkbox'
 import { FloatLabelModule } from 'primeng/floatlabel'
+import { ChipModule } from 'primeng/chip'
+import { OverlayPanelModule } from 'primeng/overlaypanel'
+import { FocusTrapModule } from 'primeng/focustrap'
 
 @NgModule({
   imports: [
     BreadcrumbModule,
+    ChipModule,
     CheckboxModule,
     DropdownModule,
     ButtonModule,
@@ -33,10 +37,13 @@ import { FloatLabelModule } from 'primeng/floatlabel'
     SkeletonModule,
     MessageModule,
     FloatLabelModule,
+    OverlayPanelModule,
+    FocusTrapModule,
     SharedModule,
   ],
   exports: [
     BreadcrumbModule,
+    ChipModule,
     CheckboxModule,
     DropdownModule,
     ButtonModule,
@@ -51,6 +58,8 @@ import { FloatLabelModule } from 'primeng/floatlabel'
     SkeletonModule,
     MessageModule,
     FloatLabelModule,
+    OverlayPanelModule,
+    FocusTrapModule,
     SharedModule,
   ],
 })

libs/angular-accelerator/src/lib/angular-accelerator.module.ts

@@ -30,6 +30,7 @@ import { TooltipOnOverflowDirective } from './directives/tooltipOnOverflow.direc
 import { DynamicPipe } from './pipes/dynamic.pipe'
 import { OcxTimeAgoPipe } from './pipes/ocxtimeago.pipe'
 import { DynamicLocaleId } from './utils/dynamic-locale-id'
+import { FilterViewComponent } from './components/filter-view/filter-view.component'
 
 export class AngularAcceleratorMissingTranslationHandler implements MissingTranslationHandler {
   handle(params: MissingTranslationHandlerParams) {
@@ -75,6 +76,7 @@ function appInitializer(userService: UserService) {
     OcxTimeAgoPipe,
     AdvancedDirective,
     TooltipOnOverflowDirective,
+    FilterViewComponent,
   ],
   providers: [
     {

libs/angular-accelerator/src/lib/components/data-table/data-table.component.html

@@ -119,6 +119,8 @@
     (selectionChange)="onSelectionChange($event)"
     [selection]="(selectedRows$ | async) ?? []"
     [scrollable]="true"
+    scrollHeight="flex"
+    [style]="tableStyle"
     paginatorDropdownAppendTo="body"
   >
     <ng-template pTemplate="header">

libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts

@@ -40,6 +40,7 @@ import { ObjectUtils } from '../../utils/objectutils'
 import { DataSortBase } from '../data-sort-base/data-sort-base'
 import { MultiSelectItem } from 'primeng/multiselect'
 import { Filter, FilterType } from '../../model/filter.model'
+import { findTemplate } from '../../utils/template.utils'
 
 export type Primitive = number | string | boolean | bigint | Date
 export type Row = {
@@ -175,6 +176,7 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
   @Input() allowSelectAll = true
   @Input() paginator = true
   @Input() page = 0
+  @Input() tableStyle: { [klass: string]: any } | undefined
   @Input()
   get totalRecordsOnServer(): number | undefined {
     return this.params['totalRecordsOnServer'] ? Number(this.params['totalRecordsOnServer']) : undefined
@@ -786,17 +788,6 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
     [TemplateType.FILTERCELL]: this.filterTemplatesData,
   }
 
-  findTemplate(templates: PrimeTemplate[], names: string[]): PrimeTemplate | undefined {
-    for (let index = 0; index < names.length; index++) {
-      const name = names[index]
-      const template = templates.find((template) => template.name === name)
-      if (template) {
-        return template
-      }
-    }
-    return undefined
-  }
-
   getColumnTypeTemplate(templates: PrimeTemplate[], columnType: ColumnType, templateType: TemplateType) {
     let template: TemplateRef<any> | undefined
 
@@ -847,7 +838,7 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
 
     return (
       template ??
-      this.findTemplate(templates, this.templatesDataMap[templateType].templateNames[columnType])?.template ??
+      findTemplate(templates, this.templatesDataMap[templateType].templateNames[columnType])?.template ??
       null
     )
   }
@@ -863,7 +854,7 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
       ]).pipe(
         map(([t, vt, pt]) => {
           const templates = [...(t ?? []), ...(vt ?? []), ...(pt ?? [])]
-          const columnTemplate = this.findTemplate(
+          const columnTemplate = findTemplate(
             templates,
             templatesData.idSuffix.map((suffix) => column.id + suffix)
           )?.template