feat: search config slot in search header and column group slot in interactive-data-view

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

@@ -1,6 +1,6 @@
 {
     "OCX_CUSTOM_GROUP_COLUMN_SELECTOR": {
-      "DROPDOWN_LABEL": "Spalten",
+      "DROPDOWN_LABEL": "Spaltengruppe",
       "OPEN_BUTTON_DETAIL": "Dialog zur Auswahl einer benutzerdefinierten Gruppe öffnen",
       "ACTIVE_COLUMNS_LABEL": "Aktive Spalten",
       "INACTIVE_COLUMNS_LABEL": "Inaktive Spalten",

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

@@ -1,6 +1,6 @@
 {
     "OCX_CUSTOM_GROUP_COLUMN_SELECTOR": {
-      "DROPDOWN_LABEL": "Columns",
+      "DROPDOWN_LABEL": "Column group",
       "OPEN_BUTTON_DETAIL": "Open custom group selection dialog",
       "ACTIVE_COLUMNS_LABEL": "Active columns",
       "INACTIVE_COLUMNS_LABEL": "Inactive columns",

libs/angular-accelerator/src/index.ts

@@ -23,7 +23,6 @@ export * from './lib/components/search-header/search-header.component'
 // services
 export * from './lib/services/breadcrumb.service'
 export * from './lib/services/translation-cache.service'
-export * from './lib/services/app-config-service'
 
 // pipes
 export * from './lib/pipes/dynamic.pipe'

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

@@ -4,7 +4,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { MissingTranslationHandler, MissingTranslationHandlerParams, TranslateModule } from '@ngx-translate/core'
 
-import { UserService } from '@onecx/angular-integration-interface'
+import { AppConfigService, UserService } from '@onecx/angular-integration-interface'
+import { AngularRemoteComponentsModule } from '@onecx/angular-remote-components'
 
 import { AngularAcceleratorPrimeNgModule } from './angular-accelerator-primeng.module'
 import { ColumnGroupSelectionComponent } from './components/column-group-selection/column-group-selection.component'
@@ -26,7 +27,6 @@ import { HAS_PERMISSION_CHECKER, IfPermissionDirective } from './directives/if-p
 import { SrcDirective } from './directives/src.directive'
 import { DynamicPipe } from './pipes/dynamic.pipe'
 import { OcxTimeAgoPipe } from './pipes/ocxtimeago.pipe'
-import { AppConfigService } from './services/app-config-service'
 import { DynamicLocaleId } from './utils/dynamic-locale-id'
 import { firstValueFrom, skip } from 'rxjs'
 import { TooltipOnOverflowDirective } from './directives/tooltipOnOverflow.directive'
@@ -48,6 +48,7 @@ function appInitializer(userService: UserService) {
   imports: [
     CommonModule,
     AngularAcceleratorPrimeNgModule,
+    AngularRemoteComponentsModule,
     TranslateModule,
     FormsModule,
     RouterModule,

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

@@ -24,7 +24,14 @@
     </div>
 
     <div *ngIf="layout === 'table'" class="flex flex-wrap justify-content-between align-items-center gap-2">
+      <ocx-slot
+        *ngIf="isColumnGroupSelectionComponentDefined$ | async"
+        name="{{columnGroupSlotName}}"
+        [inputs]="{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey }"
+        [outputs]="{ groupSelectionChanged: groupSelectionChanged }"
+      ></ocx-slot>
       <ocx-column-group-selection
+        *ngIf="!(isColumnGroupSelectionComponentDefined$ | async)"
         [selectedGroupKey]="selectedGroupKey"
         [columns]="columns"
         [defaultGroupKey]="defaultGroupKey"

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

@@ -11,7 +11,7 @@ import {
   TemplateRef,
   ViewChild,
 } from '@angular/core'
-import { BehaviorSubject, Observable, ReplaySubject, combineLatest, map, startWith, timestamp } from 'rxjs'
+import { BehaviorSubject, Observable, ReplaySubject, combineLatest, map, startWith, tap, timestamp } from 'rxjs'
 import { DataAction } from '../../model/data-action'
 import { DataSortDirection } from '../../model/data-sort-direction'
 import { DataTableColumn } from '../../model/data-table-column.model'
@@ -26,6 +26,7 @@ import {
   ColumnSelectionChangedEvent,
   CustomGroupColumnSelectorComponentState,
 } from '../custom-group-column-selector/custom-group-column-selector.component'
+import { SLOT_SERVICE, SlotService } from '@onecx/angular-remote-components'
 import { DataLayoutSelectionComponentState } from '../data-layout-selection/data-layout-selection.component'
 import { DataListGridSortingComponentState } from '../data-list-grid-sorting/data-list-grid-sorting.component'
 import { Filter, Row, Sort } from '../data-table/data-table.component'
@@ -40,7 +41,10 @@ export type InteractiveDataViewComponentState = ColumnGroupSelectionComponentSta
   selector: 'ocx-interactive-data-view',
   templateUrl: './interactive-data-view.component.html',
   styleUrls: ['./interactive-data-view.component.css'],
-  providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }],
+  providers: [
+    { provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent },
+    { provide: SLOT_SERVICE, useExisting: SlotService },
+  ],
 })
 export class InteractiveDataViewComponent implements OnInit, AfterContentInit {
   _dataViewComponent: DataViewComponent | undefined
@@ -100,7 +104,7 @@ export class InteractiveDataViewComponent implements OnInit, AfterContentInit {
   @Input() selectedRows: Row[] = []
   displayedColumnKeys$ = new BehaviorSubject<string[]>([])
   displayedColumns$: Observable<DataTableColumn[]> | undefined
-  @Input() 
+  @Input()
   get displayedColumnKeys(): string[] {
     return this.displayedColumnKeys$.getValue()
   }
@@ -112,11 +116,11 @@ export class InteractiveDataViewComponent implements OnInit, AfterContentInit {
    */
   @Input()
   get displayedColumns(): DataTableColumn[] {
-      return (
-        (this.displayedColumnKeys
-          .map((d) => this.columns.find((c) => c.id === d))
-          .filter((d) => d) as DataTableColumn[]) ?? []
-      );
+    return (
+      (this.displayedColumnKeys
+        .map((d) => this.columns.find((c) => c.id === d))
+        .filter((d) => d) as DataTableColumn[]) ?? []
+    )
   }
   set displayedColumns(value: DataTableColumn[]) {
     this.displayedColumnKeys$.next(value.map((d) => d.id))
@@ -198,6 +202,7 @@ export class InteractiveDataViewComponent implements OnInit, AfterContentInit {
   @Output() displayedColumnsChange = new EventEmitter<DataTableColumn[]>()
   @Output() displayedColumnKeysChange = new EventEmitter<string[]>()
   @Output() selectionChanged: EventEmitter<Row[]> = new EventEmitter()
+  groupSelectionChanged = new EventEmitter<{ activeColumns: DataTableColumn[]; groupKey: string }>()
 
   @Output() pageChanged: EventEmitter<number> = new EventEmitter()
   @Output() pageSizeChanged = new EventEmitter<number>()
@@ -313,21 +318,40 @@ export class InteractiveDataViewComponent implements OnInit, AfterContentInit {
     this._data = value
   }
 
+  columnGroupSlotName = 'onecx-shell-column-group-selection'
+  isColumnGroupSelectionComponentDefined$: Observable<boolean>
+
+  constructor(private slotService: SlotService) {
+    this.isColumnGroupSelectionComponentDefined$ = this.slotService.isSomeComponentDefinedForSlot(
+      this.columnGroupSlotName
+    )
+
+    this.groupSelectionChanged.subscribe((event: { activeColumns: DataTableColumn[]; groupKey: string }) => {
+      this.displayedColumnKeys = event.activeColumns.map((col) => col.id)
+      this.selectedGroupKey = event.groupKey
+      // TODO: Remove following line once displayedColumns (deprecated) has been removed
+      this.displayedColumnsChange.emit(this.displayedColumns)
+      this.displayedColumnKeysChange.emit(this.displayedColumnKeys)
+    })
+  }
+
   ngOnInit(): void {
     this.selectedGroupKey = this.defaultGroupKey
-    if(!this.displayedColumns || this.displayedColumns.length === 0) {
+    if (!this.displayedColumns || this.displayedColumns.length === 0) {
       this.displayedColumnKeys = this.columns.map((column) => column.id)
     }
     if (this.defaultGroupKey) {
-      this.displayedColumnKeys = this.columns.filter((column) =>
-        column.predefinedGroupKeys?.includes(this.defaultGroupKey)
-      ).map((column) => column.id)
+      this.displayedColumnKeys = this.columns
+        .filter((column) => column.predefinedGroupKeys?.includes(this.defaultGroupKey))
+        .map((column) => column.id)
     }
-    this.displayedColumns$ = this.displayedColumnKeys$.pipe(map((columnKeys) => (
-      (columnKeys
-        .map((key) => this.columns.find((col) => col.id === key))
-        .filter((d) => d) as DataTableColumn[]) ?? []
-    )))
+    this.displayedColumns$ = this.displayedColumnKeys$.pipe(
+      map(
+        (columnKeys) =>
+          (columnKeys.map((key) => this.columns.find((col) => col.id === key)).filter((d) => d) as DataTableColumn[]) ??
+          []
+      )
+    )
     // TODO: Remove following line once displayedColumns (deprecated) has been removed
     this.displayedColumnsChange.emit(this.displayedColumns)
     this.displayedColumnKeysChange.emit(this.displayedColumnKeys)
@@ -566,5 +590,4 @@ export class InteractiveDataViewComponent implements OnInit, AfterContentInit {
     this.pageSize = event
     this.pageSizeChanged.emit(event)
   }
-
 }

libs/angular-accelerator/src/lib/components/search-header/search-header.component.html

@@ -5,8 +5,11 @@
   [actions]="headerActions"
 >
   <ng-template #additionalToolbarContentLeft>
-    <ocx-search-config [searchConfigs]="searchConfigs" (selectedSearchConfigChanged)="confirmSearchConfig($event)">
-    </ocx-search-config>
+    <ocx-slot
+      name="onecx-shell-search-config"
+      [inputs]="{ pageName: pageName, currentFieldValues: fieldValues$ | async, displayedColumnsIds: displayedColumnsIds, viewMode: viewMode}"
+      [outputs]="{ searchConfigSelected: selectedSearchConfigChanged }"
+    ></ocx-slot>
     <ng-container
       *ngIf="_additionalToolbarContentLeft"
       [ngTemplateOutlet]="_additionalToolbarContentLeft"
@@ -41,7 +44,7 @@
         icon="pi pi-search"
         [attr.aria-label]="'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate"
         title="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}"
-        [disabled]="searchButtonDisabled"
+        [disabled]="searchButtonDisabled || formGroup?.invalid"
       >
       </p-button>
     </div>

libs/angular-accelerator/src/lib/components/search-header/search-header.component.ts

@@ -1,4 +1,5 @@
 import {
+  AfterContentInit,
   AfterViewInit,
   Component,
   ContentChild,
@@ -10,11 +11,15 @@ import {
   ViewChild,
 } from '@angular/core'
 import { Action } from '../page-header/page-header.component'
-import { SearchConfigInfo } from '../../model/search-config-info'
+import { SLOT_SERVICE, SlotService } from '@onecx/angular-remote-components'
+// import { SearchConfigInfo } from '../../model/search-config-info'
+import { DataTableColumn } from '../../model/data-table-column.model'
+import { FormGroup, FormGroupDirective } from '@angular/forms'
+import { Observable, debounceTime, map, mergeMap, of } from 'rxjs'
 
 export interface SearchHeaderComponentState {
   activeViewMode?: 'basic' | 'advanced'
-  selectedSearchConfig?: SearchConfigInfo
+  // selectedSearchConfig?: SearchConfigInfo
 }
 
 /**
@@ -26,9 +31,9 @@ export interface SearchHeaderComponentState {
 @Component({
   selector: 'ocx-search-header',
   templateUrl: './search-header.component.html',
+  providers: [{ provide: SLOT_SERVICE, useExisting: SlotService }],
 })
-export class SearchHeaderComponent implements AfterViewInit {
-  @Input() searchConfigs: SearchConfigInfo[] | undefined
+export class SearchHeaderComponent implements AfterContentInit, AfterViewInit {
   @Input() header = ''
 
   /**
@@ -42,7 +47,22 @@ export class SearchHeaderComponent implements AfterViewInit {
     this.header = value
   }
   @Input() subheader: string | undefined
-  @Input() viewMode: 'basic' | 'advanced' = 'basic'
+  _viewMode: 'basic' | 'advanced' = 'basic'
+  @Input()
+  get viewMode(): 'basic' | 'advanced' {
+    return this._viewMode
+  }
+  set viewMode(viewMode: 'basic' | 'advanced') {
+    if (this.viewMode !== viewMode) {
+      this._viewMode = viewMode
+      this.viewModeChanged?.emit(this.viewMode)
+      this.componentStateChanged.emit({
+        activeViewMode: this.viewMode,
+      })
+      this.updateHeaderActions()
+      setTimeout(() => this.addKeyUpEventListener())
+    }
+  }
   @Input() manualBreadcrumbs = false
   _actions: Action[] = []
   @Input()
@@ -55,10 +75,29 @@ export class SearchHeaderComponent implements AfterViewInit {
   }
   @Input() searchButtonDisabled = false
   @Input() resetButtonDisabled = false
+  @Input() pageName: string = ''
+
+  _displayedColumnsIds: string[] = []
+  get displayedColumnsIds(): string[] {
+    return this._displayedColumnsIds
+  }
+
+  _displayedColumns: DataTableColumn[] = []
+  @Input() get displayedColumns(): DataTableColumn[] {
+    return this._displayedColumns
+  }
+  set displayedColumns(value: DataTableColumn[]) {
+    this._displayedColumns = [...value]
+    this._displayedColumnsIds = this._displayedColumns.map((column) => column.id)
+  }
 
   @Output() searched: EventEmitter<any> = new EventEmitter()
   @Output() resetted: EventEmitter<any> = new EventEmitter()
-  @Output() selectedSearchConfigChanged: EventEmitter<SearchConfigInfo> = new EventEmitter()
+  @Output() selectedSearchConfigChanged: EventEmitter<{
+    fieldValues: { [key: string]: string }
+    displayedColumnsIds: string[]
+    viewMode: 'basic' | 'advanced'
+  }> = new EventEmitter()
   @Output() viewModeChanged: EventEmitter<'basic' | 'advanced'> = new EventEmitter()
   @Output() componentStateChanged: EventEmitter<SearchHeaderComponentState> = new EventEmitter()
   @ContentChild('additionalToolbarContent')
@@ -74,23 +113,35 @@ export class SearchHeaderComponent implements AfterViewInit {
     return this.additionalToolbarContentLeft
   }
 
+  @ContentChild(FormGroupDirective) formGroup: FormGroup | undefined
   @ViewChild('searchParameterFields') searchParameterFields: ElementRef | undefined
 
   hasAdvanced = false
   headerActions: Action[] = []
 
+  fieldValues$: Observable<{ [key: string]: unknown }> | undefined = of({})
+
+  ngAfterContentInit(): void {
+    this.fieldValues$ = this.formGroup?.valueChanges.pipe(
+      debounceTime(500),
+      map((values) =>
+        Object.entries(values).reduce(
+          (acc, [key, value]) => ({
+            ...acc,
+            [key]: value || undefined,
+          }),
+          {}
+        )
+      )
+    )
+  }
+
   ngAfterViewInit(): void {
     this.addKeyUpEventListener()
   }
 
   toggleViewMode() {
     this.viewMode = this.viewMode === 'basic' ? 'advanced' : 'basic'
-    this.viewModeChanged?.emit(this.viewMode)
-    this.componentStateChanged.emit({
-      activeViewMode: this.viewMode
-    })
-    this.updateHeaderActions()
-    setTimeout(() => this.addKeyUpEventListener())
   }
 
   onResetClicked() {
@@ -136,11 +187,4 @@ export class SearchHeaderComponent implements AfterViewInit {
       this.onSearchClicked()
     }
   }
-
-  confirmSearchConfig(searchConfig: SearchConfigInfo) {
-    this.selectedSearchConfigChanged?.emit(searchConfig)
-    this.componentStateChanged.emit({
-      selectedSearchConfig: searchConfig
-    })
-  }
 }

libs/angular-integration-interface/mocks/index.ts

@@ -1,2 +1,3 @@
 export * from './mock-user-service'
 export * from './app-state-service-mock'
+export * from './fake-topic'

libs/angular-integration-interface/src/index.ts

@@ -1,4 +1,5 @@
 // services
+export * from './lib/services/app-config-service'
 export * from './lib/services/app-state.service'
 export * from './lib/services/configuration.service'
 export * from './lib/services/user.service'

libs/angular-remote-components/package.json

@@ -5,7 +5,7 @@
   "peerDependencies": {
     "@angular/common": "^18.0.5",
     "@angular/core": "^18.0.5",
-    "@onecx/angular-accelerator": "^5",
+    "@onecx/angular-integration-interface": "^5",
     "@onecx/integration-interface": "^5",
     "@ngx-translate/core": "^15.0.0",
     "@angular-architects/module-federation": "18.0.4",

libs/angular-remote-components/src/lib/angular-remote-components.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { SlotComponent } from './components/slot/slot.component'
-import { AppConfigService } from '@onecx/angular-accelerator'
+import { AppConfigService } from '@onecx/angular-integration-interface'
 
 @NgModule({
   imports: [CommonModule],

libs/angular-remote-components/src/lib/components/slot/slot.component.ts

@@ -118,8 +118,6 @@ export class SlotComponent implements OnInit, OnDestroy {
     })
   }
 
-  updateDataSub: Subscription | undefined
-
   _viewContainers$ = new BehaviorSubject<QueryList<ViewContainerRef> | undefined>(undefined)
   @ViewChildren('slot', { read: ViewContainerRef })
   set viewContainers(value: QueryList<ViewContainerRef>) {