feat: save and edit search config component

libs/portal-integration-angular/assets/i18n/de.json

@@ -16,6 +16,11 @@
       "RIGHT": "Rechts"
     }
   },
+  "OCX_SEARCH_CONFIG": {
+    "PLACEHOLDER": "Bitte geben Sie den Namen der Suchkonfiguration an.",
+    "SAVE_COLUMNS_OPTION": "Möchten Sie die angezeigten Spalten speichern?",
+    "SAVE_INPUT_FIELDS_OPTION": "Möchten Sie die Werte aus den Suchfeldern speichern?"
+  },
   "OCX_LIST_GRID_SORT": {
     "DROPDOWN": {
       "PLACEHOLDER": "Sortierung auswählen",

libs/portal-integration-angular/assets/i18n/en.json

@@ -16,6 +16,11 @@
       "RIGHT": "Right"
     }
   },
+  "OCX_SEARCH_CONFIG": {
+    "PLACEHOLDER": "Please enter the name of the search configuration",
+    "SAVE_COLUMNS_OPTION": "Do you want to save the shown columns?",
+    "SAVE_INPUT_FIELDS_OPTION": "Do you want to save the input values from the input fields?"
+  },
   "OCX_LIST_GRID_SORT": {
     "DROPDOWN": {
       "PLACEHOLDER": "Select sorting",

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

@@ -56,6 +56,7 @@ export * from './lib/core/components/search-config/search-config.component'
 export * from './lib/core/components/loading-indicator/loading-indicator.component'
 export * from './lib/core/components/content-container/content-container.component'
 export * from './lib/core/components/content/content.component'
+export * from './lib/core/components/create-or-edit-search-config-dialog/create-or-edit-search-config-dialog.component'
 
 // services
 export * from './lib/services/app.menu.service'

libs/portal-integration-angular/src/lib/core/components/create-or-edit-search-config-dialog/create-or-edit-search-config-dialog.component.html

@@ -0,0 +1,27 @@
+<form [formGroup]="searchConfigFormGroup" [class]="'searchConfigDialog'">
+  <div>
+    <input
+      type="text"
+      pInputText
+      formControlName="searchConfigName"
+      id="searchConfigName"
+      [placeholder]="placeHolderKey | translate"
+    />
+  </div>
+
+  <div>
+    <p-checkbox formControlName="saveInputValues" [value]="saveInputValues" [binary]="true" inputId="saveInputValuesId">
+    </p-checkbox>
+    <label for="saveInputValuesId">{{ ("OCX_SEARCH_CONFIG.SAVE_INPUT_FIELDS_OPTION" | translate) }}</label>
+  </div>
+
+  <div>
+    <p-checkbox
+      formControlName="saveColumns"
+      [value]="saveColumns"
+      [binary]="true"
+      inputId="saveColumnsId"
+    ></p-checkbox>
+    <label for="saveColumnsId">{{ ("OCX_SEARCH_CONFIG.SAVE_COLUMNS_OPTION" | translate) }}</label>
+  </div>
+</form>

libs/portal-integration-angular/src/lib/core/components/create-or-edit-search-config-dialog/create-or-edit-search-config-dialog.component.scss

@@ -0,0 +1,14 @@
+.searchConfigDialog {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  margin-bottom: 1em;
+}
+
+:host ::ng-deep .p-inputtext {
+  width: 100%;
+}
+
+:host ::ng-deep .p-checkbox {
+  margin-right: 1em;
+}

libs/portal-integration-angular/src/lib/core/components/create-or-edit-search-config-dialog/create-or-edit-search-config-dialog.component.spec.ts

@@ -0,0 +1,147 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { CreateOrEditSearchConfigDialogComponent } from './create-or-edit-search-config-dialog.component'
+import { CheckboxModule } from 'primeng/checkbox'
+import { MockAuthModule } from '../../../mock-auth/mock-auth.module'
+import { TranslateTestingModule } from 'ngx-translate-testing'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { TranslateService } from '@ngx-translate/core'
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'
+import { PCheckboxHarness, CreateOrEditSearchConfigDialogHarness } from '../../../../../testing'
+import { DialogState } from '../../../services/portal-dialog.service'
+import { ReactiveFormsModule } from '@angular/forms'
+import { InputTextModule } from 'primeng/inputtext'
+
+describe('CreateOrEditSearchConfigDialogComponent', () => {
+  let component: CreateOrEditSearchConfigDialogComponent
+  let fixture: ComponentFixture<CreateOrEditSearchConfigDialogComponent>
+  let translateService: TranslateService
+  let dialogHarness: CreateOrEditSearchConfigDialogHarness
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CreateOrEditSearchConfigDialogComponent],
+      imports: [
+        CheckboxModule,
+        MockAuthModule,
+        TranslateTestingModule.withTranslations({
+          en: require('./../../../../../assets/i18n/en.json'),
+          de: require('./../../../../../assets/i18n/de.json'),
+        }),
+        HttpClientTestingModule,
+        ReactiveFormsModule,
+        InputTextModule,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(CreateOrEditSearchConfigDialogComponent)
+    component = fixture.componentInstance
+
+    translateService = TestBed.inject(TranslateService)
+    translateService.setDefaultLang('en')
+    translateService.use('en')
+
+    fixture.detectChanges()
+    dialogHarness = await TestbedHarnessEnvironment.harnessForFixture(fixture, CreateOrEditSearchConfigDialogHarness)
+  })
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should load the CreateOrEditSearchConfigDialogHarness', async () => {
+    expect(dialogHarness).toBeTruthy()
+  })
+
+  it('should set the DialogResult of the saveInputValuesId checkbox to true when the saveInputValuesId checkbox is checked', async () => {
+    const saveInputValuesCheckbox = await dialogHarness.getHarness(
+      PCheckboxHarness.with({ inputid: 'saveInputValuesId' })
+    )
+    await saveInputValuesCheckbox.click()
+    const _state: DialogState<CreateOrEditSearchConfigDialogComponent> = { button: 'primary', result: undefined }
+    component.ocxDialogButtonClicked(_state)
+    const dialogResult = {
+      searchConfigName: '',
+      saveInputValues: true,
+      saveColumns: false,
+    }
+    expect(component.dialogResult).toEqual(dialogResult)
+  })
+
+  it('should set the DialogResult of the saveColumnsId checkbox initially false', async () => {
+    const _state: DialogState<CreateOrEditSearchConfigDialogComponent> = { button: 'primary', result: undefined }
+    await component.ocxDialogButtonClicked(_state)
+    const dialogResult = {
+      searchConfigName: '',
+      saveInputValues: false,
+      saveColumns: false,
+    }
+    expect(component.dialogResult).toEqual(dialogResult)
+  })
+
+  it('should set the DialogResult of the searchConfig input Field to the entered value', async () => {
+    await (await dialogHarness.getSearchConfigInputHarness()).setValue('search Config')
+    const _state: DialogState<CreateOrEditSearchConfigDialogComponent> = { button: 'primary', result: undefined }
+    await component.ocxDialogButtonClicked(_state)
+    const dialogResult = {
+      searchConfigName: 'search Config',
+      saveInputValues: false,
+      saveColumns: false,
+    }
+    expect(component.dialogResult).toEqual(dialogResult)
+  })
+
+  it('should set the saveColumnsId checkbox initially to unchecked', async () => {
+    const saveInputValuesCheckbox = await dialogHarness.getSaveColumnsCheckboxHarness()
+    const checked = await saveInputValuesCheckbox.isChecked()
+    expect(checked).toBeFalsy()
+  })
+
+  it('should set the saveInputValues checkbox initially to unchecked', async () => {
+    const saveInputValuesCheckbox = await dialogHarness.getSaveInputValuesCheckboxHarness()
+    const checked = await saveInputValuesCheckbox.isChecked()
+    expect(checked).toBeFalsy()
+  })
+
+  it('should set the saveInputValues checkbox to true when it is clicked', async () => {
+    const saveInputValuesCheckbox = await dialogHarness.getSaveInputValuesCheckboxHarness()
+    await saveInputValuesCheckbox.click()
+    const checked = await saveInputValuesCheckbox.isChecked()
+    expect(checked).toBeTruthy()
+  })
+
+  it('should emit true when the searchConfig name is not an empty string and the saveColumnsCheckBox is clicked', async () => {
+    let done: () => void
+    const finished = new Promise<void>((resolve) => (done = resolve))
+    let enabled = false
+    component.primaryButtonEnabled.subscribe((v) => {
+      enabled = v
+      done()
+    })
+
+    const searchConfigInputHarness = await dialogHarness.getSearchConfigInputHarness()
+    searchConfigInputHarness.setValue('test')
+    const saveInputValuesCheckbox = await dialogHarness.getSaveColumnsCheckboxHarness()
+    await saveInputValuesCheckbox.click()
+
+    await finished
+    expect(enabled).toEqual(true)
+  })
+
+  it('emit true when the searchConfig Name is not an empty string and the saveInputValuesCheckbox is clicked', async () => {
+    let done: () => void
+    const finished = new Promise<void>((resolve) => (done = resolve))
+    let enabled = false
+    component.primaryButtonEnabled.subscribe((v) => {
+      enabled = v
+      done()
+    })
+
+    const searchConfigInputHarness = await dialogHarness.getSearchConfigInputHarness()
+    searchConfigInputHarness.setValue('test')
+    const saveInputValuesCheckbox = await dialogHarness.getSaveInputValuesCheckboxHarness()
+    await saveInputValuesCheckbox.click()
+
+    await finished
+    expect(enabled).toEqual(true)
+  })
+})

libs/portal-integration-angular/src/lib/core/components/create-or-edit-search-config-dialog/create-or-edit-search-config-dialog.component.ts

@@ -0,0 +1,59 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { FormControl, FormGroup } from '@angular/forms'
+import {
+  DialogButtonClicked,
+  DialogPrimaryButtonDisabled,
+  DialogResult,
+  DialogState,
+} from '../../../services/portal-dialog.service'
+import { Observable, map } from 'rxjs'
+
+export type CreateOrEditSearchDialogContent = {
+  searchConfigName: string
+  saveInputValues: boolean
+  saveColumns: boolean
+}
+@Component({
+  selector: 'ocx-create-or-edit-search-config-dialog',
+  templateUrl: './create-or-edit-search-config-dialog.component.html',
+  styleUrls: ['./create-or-edit-search-config-dialog.component.scss'],
+})
+export class CreateOrEditSearchConfigDialogComponent
+  implements
+    DialogPrimaryButtonDisabled,
+    DialogResult<CreateOrEditSearchDialogContent>,
+    DialogButtonClicked<CreateOrEditSearchConfigDialogComponent>
+{
+  @Input() searchConfigName: string | undefined
+  @Input() saveInputValues: boolean | undefined
+  @Input() saveColumns: boolean | undefined
+  placeHolderKey = 'OCX_SEARCH_CONFIG.PLACEHOLDER'
+  @Output() primaryButtonEnabled: EventEmitter<boolean> = new EventEmitter()
+  searchConfigFormGroup: FormGroup = new FormGroup({
+    searchConfigName: new FormControl<string>(''),
+    saveInputValues: new FormControl<boolean>(false),
+    saveColumns: new FormControl<boolean>(false),
+  })
+  dialogResult: CreateOrEditSearchDialogContent = { searchConfigName: '', saveInputValues: false, saveColumns: false }
+  constructor() {
+    this.searchConfigFormGroup.valueChanges
+      .pipe(
+        map(
+          (dialogFormValues: CreateOrEditSearchDialogContent) =>
+            !!dialogFormValues.searchConfigName && (dialogFormValues.saveInputValues || dialogFormValues.saveColumns)
+        )
+      )
+      .subscribe(this.primaryButtonEnabled)
+  }
+
+  ocxDialogButtonClicked(
+    _state: DialogState<CreateOrEditSearchConfigDialogComponent>
+  ): boolean | Observable<boolean> | Promise<boolean> | undefined {
+    this.dialogResult = {
+      searchConfigName: this.searchConfigFormGroup?.get('searchConfigName')?.value,
+      saveInputValues: this.searchConfigFormGroup?.get('saveInputValues')?.value,
+      saveColumns: this.searchConfigFormGroup?.get('saveColumns')?.value,
+    }
+    return true
+  }
+}

libs/portal-integration-angular/src/lib/core/components/interactive-data-view/interactive-data-view.component.ts

@@ -59,6 +59,7 @@ export class InteractiveDataViewComponent implements OnInit {
   @Input() tablePaginator = true
   @Input() page = 0
   @Input() selectedRows: Row[] = []
+  @Input() displayedColumns: DataTableColumn[] = []
   @ContentChild('tableCell') tableCell: TemplateRef<any> | undefined
   @ContentChild('tableDateCell') tableDateCell: TemplateRef<any> | undefined
   @ContentChild('tableRelativeDateCell') tableRelativeDateCell: TemplateRef<any> | undefined
@@ -78,8 +79,8 @@ export class InteractiveDataViewComponent implements OnInit {
   @Output() dataViewLayoutChange = new EventEmitter<'grid' | 'list' | 'table'>()
   @Output() displayedColumnsChange = new EventEmitter<DataTableColumn[]>()
   @Output() selectionChanged: EventEmitter<Row[]> = new EventEmitter()
+
   @Output() pageChanged: EventEmitter<number> = new EventEmitter()
-  displayedColumns: DataTableColumn[] = []
   selectedGroupKey = ''
   isDeleteItemObserved: boolean | undefined
   isViewItemObserved: boolean | undefined

libs/portal-integration-angular/src/lib/core/components/search-config/search-config.component.spec.ts

@@ -30,7 +30,7 @@ describe('SearchConfigComponent', () => {
     },
   ]
 
-  const searchConfigsEntries: SearchConfig[] = [
+  const searchConfigs: SearchConfig[] = [
     {
       id: '01',
       name: 'Basic search config',
@@ -82,7 +82,7 @@ describe('SearchConfigComponent', () => {
 
     fixture = TestBed.createComponent(SearchConfigComponent)
     component = fixture.componentInstance
-    component.searchConfigs = searchConfigsEntries
+    component.searchConfigs = searchConfigs
     translateService = TestBed.inject(TranslateService)
     translateService.setDefaultLang('en')
     translateService.use('en')
@@ -110,7 +110,7 @@ describe('SearchConfigComponent', () => {
     const searchConfigHarness = await TestbedHarnessEnvironment.harnessForFixture(fixture, SearchConfigHarness)
     const dropdown = await searchConfigHarness.getSearchConfigDropdown()
     const items = await dropdown?.getDropdownItems()
-    expect(items?.length).toEqual(searchConfigsEntries.length)
+    expect(items?.length).toEqual(searchConfigs.length)
   })
 
   it('should display no dropdown if the search config is empty', async () => {
@@ -124,22 +124,22 @@ describe('SearchConfigComponent', () => {
     const searchConfigHarness = await TestbedHarnessEnvironment.harnessForFixture(fixture, SearchConfigHarness)
     const dropdown = await searchConfigHarness.getSearchConfigDropdown()
     const selectedDropdownItem = await dropdown?.selectedDropdownItemText(0)
-    expect(selectedDropdownItem).toEqual(searchConfigsEntries[0].name)
+    expect(selectedDropdownItem).toEqual(searchConfigs[0].name)
   })
 
   it('should display the values in the fields after selecting the fist hard coded search config', async () => {
     const searchConfigHarness = await TestbedHarnessEnvironment.harnessForFixture(fixture, SearchConfigHarness)
     const dropdown = await searchConfigHarness.getSearchConfigDropdown()
     const selectedDropdownItem = await dropdown?.selectedDropdownItemText(1)
-    expect(selectedDropdownItem).toEqual(searchConfigsEntries[1].name)
+    expect(selectedDropdownItem).toEqual(searchConfigs[1].name)
   })
 
   it('should display the values in the fields correctly after selecting the fist search config and then selecting the second search config', async () => {
     const searchConfigHarness = await TestbedHarnessEnvironment.harnessForFixture(fixture, SearchConfigHarness)
     const dropdown = await searchConfigHarness.getSearchConfigDropdown()
     let selectedDropdownItem = await dropdown?.selectedDropdownItemText(0)
     selectedDropdownItem = await dropdown?.selectedDropdownItemText(1)
-    expect(selectedDropdownItem).toEqual(searchConfigsEntries[1].name)
+    expect(selectedDropdownItem).toEqual(searchConfigs[1].name)
   })
 
   it('should have the option to remove the selection', async () => {

libs/portal-integration-angular/src/lib/core/components/search-config/search-config.component.ts

@@ -14,7 +14,7 @@ export class SearchConfigComponent implements OnInit {
   @Input() placeholderKey = 'OCX_SEARCH_HEADER.OCX_SEARCH_CONFIG.DROPDOWN_DEFAULT'
 
   @Output()
-  selectedSearchConfig: EventEmitter<SearchConfig[]> = new EventEmitter()
+  selectedSearchConfigChanged: EventEmitter<SearchConfig> = new EventEmitter()
 
   formGroup: FormGroup | undefined
   ngOnInit(): void {
@@ -23,7 +23,7 @@ export class SearchConfigComponent implements OnInit {
     })
   }
 
-  onSearchConfigChange(event: SearchConfig[]) {
-    this.selectedSearchConfig?.emit(event)
+  onSearchConfigChange(searchConfig: SearchConfig) {
+    this.selectedSearchConfigChanged?.emit(searchConfig)
   }
 }

libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.html

@@ -4,7 +4,8 @@
   [actions]="headerActions"
 >
   <ng-template #additionalToolbarContent>
-    <ocx-search-config [searchConfigs]="searchConfigsEntries"> </ocx-search-config>
+    <ocx-search-config [searchConfigs]="searchConfigs" (selectedSearchConfigChanged)="confirmSearchConfig($event)">
+    </ocx-search-config>
     <ng-container *ngIf="_additionalToolbarContent" [ngTemplateOutlet]="_additionalToolbarContent"></ng-container>
   </ng-template>
   <div class="search-criteria-container">