feat: column group slot + search-config slot adjustment

markuczy · Aug 28, 2024 · c5852a5 · c5852a5
1 parent 63fc40c
commit c5852a5
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 20 deletions.
diff --git a/libs/angular-accelerator/assets/i18n/de.json b/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",

diff --git a/libs/angular-accelerator/assets/i18n/en.json b/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",

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
@@ -22,14 +22,11 @@
     </div>
 
     <div *ngIf="layout === 'table'" class="flex flex-wrap justify-content-between align-items-center gap-2">
-      <ocx-column-group-selection
-        [selectedGroupKey]="selectedGroupKey"
-        [columns]="columns"
-        [defaultGroupKey]="defaultGroupKey"
-        [customGroupKey]="customGroupKey"
-        [placeholderKey]="groupSelectionNoGroupSelectedKey"
-        (groupSelectionChanged)="onColumnGroupSelectionChange($event)"
-      ></ocx-column-group-selection>
+      <ocx-slot
+        name="onecx-shell-column-group-selection"
+        [inputs]="{ pageName: pageName, placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey }"
+        [outputs]="{ groupSelectionChanged: groupSelectionChanged }"
+      ></ocx-slot>
 
       <ocx-custom-group-column-selector
         [columns]="columns"

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
@@ -3,18 +3,21 @@ import { DataTableColumn } from '../../model/data-table-column.model'
 import { DataSortDirection } from '../../model/data-sort-direction'
 import { Filter, Row, Sort } from '../data-table/data-table.component'
 import { DataViewComponent, RowListGridData } from '../data-view/data-view.component'
-import { GroupSelectionChangedEvent } from '../column-group-selection/column-group-selection.component'
 import {
   ActionColumnChangedEvent,
   ColumnSelectionChangedEvent,
 } from '../custom-group-column-selector/custom-group-column-selector.component'
 import { DataAction } from '../../model/data-action'
+import { SLOT_SERVICE, SlotService } from '@onecx/angular-remote-components'
 
 @Component({
   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 {
   _dataViewComponent: DataViewComponent | undefined
@@ -52,8 +55,9 @@ export class InteractiveDataViewComponent implements OnInit {
     DataSortDirection.DESCENDING,
     DataSortDirection.NONE,
   ]
+  @Input() pageName: string = ''
   @Input() pageSizes: number[] = [10, 25, 50]
-  @Input() pageSize: number | undefined;
+  @Input() pageSize: number | undefined
   @Input() totalRecordsOnServer: number | undefined
   @Input() layout: 'grid' | 'list' | 'table' = 'table'
   @Input() defaultGroupKey = ''
@@ -105,6 +109,7 @@ export class InteractiveDataViewComponent implements OnInit {
   @Output() dataViewLayoutChange = new EventEmitter<'grid' | 'list' | 'table'>()
   @Output() displayedColumnsChange = new EventEmitter<DataTableColumn[]>()
   @Output() selectionChanged: EventEmitter<Row[]> = new EventEmitter()
+  groupSelectionChanged = new EventEmitter<{ activeColumns: DataTableColumn[]; groupKey: string }>()
 
   @Output() pageChanged: EventEmitter<number> = new EventEmitter()
   selectedGroupKey = ''
@@ -174,6 +179,14 @@ export class InteractiveDataViewComponent implements OnInit {
     this._data = value
   }
 
+  constructor() {
+    this.groupSelectionChanged.subscribe((event: { activeColumns: DataTableColumn[]; groupKey: string }) => {
+      this.displayedColumns = event.activeColumns
+      this.selectedGroupKey = event.groupKey
+      this.displayedColumnsChange.emit(this.displayedColumns)
+    })
+  }
+
   ngOnInit(): void {
     this.selectedGroupKey = this.defaultGroupKey
     this.displayedColumns = this.columns
@@ -233,12 +246,6 @@ export class InteractiveDataViewComponent implements OnInit {
     this.sorted.emit({ sortColumn: this.sortField, sortDirection: this.sortDirection })
   }
 
-  onColumnGroupSelectionChange(event: GroupSelectionChangedEvent) {
-    this.displayedColumns = event.activeColumns
-    this.selectedGroupKey = event.groupKey
-    this.displayedColumnsChange.emit(this.displayedColumns)
-  }
-
   registerEventListenerForDataView() {
     if (this.deleteItem.observed) {
       this.isDeleteItemObserved = true

diff --git a/libs/angular-accelerator/src/lib/components/search-header/search-header.component.html b/libs/angular-accelerator/src/lib/components/search-header/search-header.component.html
@@ -7,7 +7,7 @@
   <ng-template #additionalToolbarContentLeft>
     <ocx-slot
       name="onecx-shell-search-config"
-      [inputs]="{ pageName: pageName, currentInputFieldValues: currentInputFieldValues, displayedColumns: displayedColumns}"
+      [inputs]="{ pageName: pageName, currentInputFieldValues: currentInputFieldValues, displayedColumns: displayedColumnsIds}"
       [outputs]="{ searchConfigSelected: selectedSearchConfigChanged }"
     ></ocx-slot>
     <ng-container

diff --git a/libs/angular-accelerator/src/lib/components/search-header/search-header.component.ts b/libs/angular-accelerator/src/lib/components/search-header/search-header.component.ts
@@ -63,12 +63,18 @@ export class SearchHeaderComponent implements AfterViewInit {
     }
   }
 
+  _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()

diff --git a/libs/angular-integration-interface/mocks/index.ts b/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'