From 56e09acc4d312b9006da378817fa944f3f1eec59 Mon Sep 17 00:00:00 2001 From: Annika Nowak <139357202+anninowak@users.noreply.github.com> Date: Wed, 28 Feb 2024 14:55:58 +0100 Subject: [PATCH] fix: adapt SearchConfig interface and use the type PrimeIcon for icons (#152) * fix: adapt SearchConfig interface and use the type PrimeIcon for icons --- libs/portal-integration-angular/src/index.ts | 1 + .../button-dialog.component.html | 48 +++++++------- .../data-layout-selection.component.ts | 5 +- .../data-view-controls.component.ts | 13 +++- .../components/diagram/diagram.component.ts | 19 ++++-- .../page-header/page-header.component.spec.ts | 64 +++++++------------ .../page-header/page-header.component.ts | 3 +- .../search-config.component.spec.ts | 8 +-- .../src/lib/core/utils/primeicon.utils.ts | 5 ++ .../src/lib/model/button-dialog.ts | 4 +- .../src/lib/model/search-config.ts | 4 +- .../src/lib/services/portal-dialog.service.ts | 4 +- .../testing/data-layout-selection.harness.ts | 3 +- .../testing/index.ts | 2 + .../testing/utils/primeicon.utils.ts | 3 + package-lock.json | 4 +- 16 files changed, 102 insertions(+), 88 deletions(-) create mode 100644 libs/portal-integration-angular/src/lib/core/utils/primeicon.utils.ts create mode 100644 libs/portal-integration-angular/testing/utils/primeicon.utils.ts diff --git a/libs/portal-integration-angular/src/index.ts b/libs/portal-integration-angular/src/index.ts index 939d6229..55151a9f 100644 --- a/libs/portal-integration-angular/src/index.ts +++ b/libs/portal-integration-angular/src/index.ts @@ -128,3 +128,4 @@ export * from './lib/core/utils/add-initialize-module-guard.utils' export * from './lib/core/utils/translate-service-initializer.utils' export * from './lib/core/utils/portal-api-configuration.utils' export * from './lib/core/utils/caching-translate-loader.utils' +export * from './lib/core/utils/primeicon.utils' diff --git a/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html b/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html index d5e3ce3b..0f8b1934 100644 --- a/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html +++ b/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html @@ -1,25 +1,25 @@
- - -
- - -
-
\ No newline at end of file + + +
+ + +
+ diff --git a/libs/portal-integration-angular/src/lib/core/components/data-layout-selection/data-layout-selection.component.ts b/libs/portal-integration-angular/src/lib/core/components/data-layout-selection/data-layout-selection.component.ts index 1c2cf7e7..c706e006 100644 --- a/libs/portal-integration-angular/src/lib/core/components/data-layout-selection/data-layout-selection.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/data-layout-selection/data-layout-selection.component.ts @@ -1,8 +1,9 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' import { PrimeIcons } from 'primeng/api' +import { PrimeIcon } from '../../utils/primeicon.utils' interface ViewingLayouts { - icon: PrimeIcons + icon: PrimeIcon layout: 'grid' | 'list' | 'table' title?: string titleKey: string @@ -39,7 +40,7 @@ export class DataLayoutSelectionComponent implements OnInit { this.layout = 'table' } - onDataViewLayoutChange(event: { icon: PrimeIcons; layout: 'grid' | 'list' | 'table' }): void { + onDataViewLayoutChange(event: { icon: PrimeIcon; layout: 'grid' | 'list' | 'table' }): void { this.dataViewLayoutChange.emit(event.layout) } } diff --git a/libs/portal-integration-angular/src/lib/core/components/data-view-controls/data-view-controls.component.ts b/libs/portal-integration-angular/src/lib/core/components/data-view-controls/data-view-controls.component.ts index c9f6e7ca..3ced3701 100644 --- a/libs/portal-integration-angular/src/lib/core/components/data-view-controls/data-view-controls.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/data-view-controls/data-view-controls.component.ts @@ -6,15 +6,22 @@ import { ColumnViewTemplate } from '../../../model/column-view-template' import { ColumnTogglerComponent } from './column-toggler-component/column-toggler.component' import { ViewTemplatePickerComponent } from './view-template-picker/view-template-picker.component' import { PrimeIcons } from 'primeng/api' +import { PrimeIcon } from '../../utils/primeicon.utils' interface ViewingModes { - icon: PrimeIcons + icon: PrimeIcon mode: string title?: string titleKey?: string } -const ALL_VIEW_MODES = [ +type ViewMode = { + icon: PrimeIcon + mode: string + titleKey: string +} + +const ALL_VIEW_MODES: ViewMode[] = [ { icon: PrimeIcons.LIST, mode: 'list', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST' }, { icon: PrimeIcons.TH_LARGE, mode: 'grid', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID' }, { icon: PrimeIcons.TABLE, mode: 'table', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE' }, @@ -249,7 +256,7 @@ export class DataViewControlsComponent implements OnInit, OnChanges { }) } - viewModeChange(event: { icon: PrimeIcons; mode: string }): void { + viewModeChange(event: { icon: PrimeIcon; mode: string }): void { this.dataViewChange.emit(event.mode) this.enableToggleColumnButton(event.mode) } diff --git a/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts b/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts index 4d8c873f..f050e15c 100644 --- a/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts @@ -6,9 +6,10 @@ import { PrimeIcons } from 'primeng/api' import { DiagramData } from '../../../model/diagram-data' import { DiagramType } from '../../../model/diagram-type' import { ColorUtils } from '../../utils/colorutils' +import { PrimeIcon } from '../../utils/primeicon.utils' export interface DiagramLayouts { - icon: PrimeIcons + icon: PrimeIcon layout: DiagramType title?: string titleKey: string @@ -16,14 +17,22 @@ export interface DiagramLayouts { const allDiagramTypes: DiagramLayouts[] = [ { icon: PrimeIcons.CHART_PIE, layout: DiagramType.PIE, titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.PIE' }, - { icon: PrimeIcons.BARS, layout: DiagramType.HORIZONTAL_BAR, titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR' }, - { icon: PrimeIcons.CHART_BAR, layout: DiagramType.VERTICAL_BAR, titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.VERTICAL_BAR' }, + { + icon: PrimeIcons.BARS, + layout: DiagramType.HORIZONTAL_BAR, + titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR', + }, + { + icon: PrimeIcons.CHART_BAR, + layout: DiagramType.VERTICAL_BAR, + titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.VERTICAL_BAR', + }, ] @Component({ selector: 'ocx-diagram', templateUrl: './diagram.component.html', - styleUrls: ['./diagram.component.scss'] + styleUrls: ['./diagram.component.scss'], }) export class DiagramComponent implements OnInit, OnChanges { @Input() data: DiagramData[] | undefined @@ -41,7 +50,7 @@ export class DiagramComponent implements OnInit, OnChanges { this.chartType = this.diagramTypeToChartType(value) } private _supportedDiagramTypes: DiagramType[] = [] - @Input() + @Input() get supportedDiagramTypes(): DiagramType[] { return this._supportedDiagramTypes } diff --git a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.spec.ts b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.spec.ts index ebb3f250..90345b46 100644 --- a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.spec.ts +++ b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.spec.ts @@ -1,5 +1,5 @@ import { ComponentFixture, TestBed, getTestBed } from '@angular/core/testing' -import { Action, PageHeaderComponent } from './page-header.component' +import { Action, ObjectDetailItem, PageHeaderComponent } from './page-header.component' import { RouterTestingModule } from '@angular/router/testing' import { ConfigurationService } from '../../../services/configuration.service' import { HttpClientTestingModule } from '@angular/common/http/testing' @@ -115,22 +115,14 @@ describe('PageHeaderComponent', () => { }) it('should check permissions and render buttons accordingly', async () => { - expect( - await pageHeaderHarness.getInlineActionButtons() - ).toHaveLength(0) - expect( - await pageHeaderHarness.getOverflowActionButtons() - ).toHaveLength(0) + expect(await pageHeaderHarness.getInlineActionButtons()).toHaveLength(0) + expect(await pageHeaderHarness.getOverflowActionButtons()).toHaveLength(0) component.actions = mockActions - expect( - await pageHeaderHarness.getInlineActionButtons() - ).toHaveLength(1) + expect(await pageHeaderHarness.getInlineActionButtons()).toHaveLength(1) expect(await pageHeaderHarness.getElementByTitle('My Test Action')).toBeTruthy() - expect( - await pageHeaderHarness.getOverflowActionButtons() - ).toHaveLength(1) + expect(await pageHeaderHarness.getOverflowActionButtons()).toHaveLength(1) expect(await pageHeaderHarness.getElementByTitle('More actions')).toBeTruthy() expect(userServiceSpy).toHaveBeenCalledTimes(3) }) @@ -140,27 +132,19 @@ describe('PageHeaderComponent', () => { userServiceSpy.mockReturnValue(false) - expect( - await pageHeaderHarness.getInlineActionButtons() - ).toHaveLength(0) - expect( - await pageHeaderHarness.getOverflowActionButtons() - ).toHaveLength(0) + expect(await pageHeaderHarness.getInlineActionButtons()).toHaveLength(0) + expect(await pageHeaderHarness.getOverflowActionButtons()).toHaveLength(0) component.actions = mockActions - expect( - await pageHeaderHarness.getInlineActionButtons() - ).toHaveLength(0) + expect(await pageHeaderHarness.getInlineActionButtons()).toHaveLength(0) expect(await pageHeaderHarness.getElementByTitle('My Test Action')).toBeFalsy() - expect( - await pageHeaderHarness.getOverflowActionButtons() - ).toHaveLength(0) + expect(await pageHeaderHarness.getOverflowActionButtons()).toHaveLength(0) expect(await pageHeaderHarness.getElementByTitle('More actions')).toBeFalsy() expect(userServiceSpy).toHaveBeenCalledTimes(3) }) - it("should render objectDetails as object info in the page header", async () => { + it('should render objectDetails as object info in the page header', async () => { const objectDetailsWithoutIcons = [ { label: 'Venue', @@ -174,7 +158,7 @@ describe('PageHeaderComponent', () => { expect((await pageHeaderHarness.getObjectInfos()).length).toEqual(0) component.objectDetails = objectDetailsWithoutIcons - + expect((await pageHeaderHarness.getObjectInfos()).length).toEqual(2) const objectDetailLabels = await pageHeaderHarness.getObjectDetailLabels() const objectDetailValues = await pageHeaderHarness.getObjectDetailValues() @@ -192,8 +176,8 @@ describe('PageHeaderComponent', () => { }) }) - it("should render objectDetails with icons as object info in the page header", async () => { - const objectDetailsWithIcons = [ + it('should render objectDetails with icons as object info in the page header', async () => { + const objectDetailsWithIcons: ObjectDetailItem[] = [ { label: 'Venue', value: 'AIE Munich', @@ -201,20 +185,20 @@ describe('PageHeaderComponent', () => { { label: 'Status', value: 'Confirmed', - icon: PrimeIcons.CHECK + icon: PrimeIcons.CHECK, }, { label: 'Done?', - icon: PrimeIcons.EXCLAMATION_CIRCLE + icon: PrimeIcons.EXCLAMATION_CIRCLE, }, { - label: 'Empty' - } + label: 'Empty', + }, ] expect((await pageHeaderHarness.getObjectInfos()).length).toEqual(0) component.objectDetails = objectDetailsWithIcons - + expect((await pageHeaderHarness.getObjectInfos()).length).toEqual(4) const objectDetailLabels = await pageHeaderHarness.getObjectDetailLabels() const objectDetailValues = await pageHeaderHarness.getObjectDetailValues() @@ -228,7 +212,7 @@ describe('PageHeaderComponent', () => { }) objectDetailValues.forEach(async (value, i) => { - if(objectDetailsWithIcons[i].value) { + if (objectDetailsWithIcons[i].value) { expect(await value.text()).toEqual(objectDetailsWithIcons[i].value) } }) @@ -248,8 +232,8 @@ describe('PageHeaderComponent', () => { const menuItems = await pageHeaderHarness.getOverFlowMenuItems() expect(menuItems.length).toBe(2) - expect(await menuItems[0].getText()).toBe("My Test Overflow Action") - expect(await menuItems[1].getText()).toBe("My Test Overflow Disabled Action") + expect(await menuItems[0].getText()).toBe('My Test Overflow Action') + expect(await menuItems[1].getText()).toBe('My Test Overflow Disabled Action') }) it('should use provided action callback on overflow button click', async () => { @@ -258,7 +242,7 @@ describe('PageHeaderComponent', () => { component.actions = mockActions const menuOverflowButtons = await pageHeaderHarness.getOverflowActionButtons() - + expect(menuOverflowButtons).toBeTruthy() expect(menuOverflowButtons.length).toBe(1) await menuOverflowButtons[0].click() @@ -266,7 +250,7 @@ describe('PageHeaderComponent', () => { const menuItems = await pageHeaderHarness.getOverFlowMenuItems() expect(menuItems.length).toBe(2) const enabledActionElement = await menuItems[0].host() - expect(await(enabledActionElement.hasClass('p-disabled'))).toBe(false) + expect(await enabledActionElement.hasClass('p-disabled')).toBe(false) await enabledActionElement.click() expect(console.log).toHaveBeenCalledTimes(1) }) @@ -283,7 +267,7 @@ describe('PageHeaderComponent', () => { const overFlowMenuItems = await pageHeaderHarness.getOverFlowMenuItems() const disabledActionElement = overFlowMenuItems[1] - + expect(overFlowMenuItems).toBeTruthy() expect(overFlowMenuItems?.length).toBe(2) expect(disabledActionElement).toBeTruthy() diff --git a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.ts b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.ts index 59e480f9..859d5ca4 100644 --- a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.ts @@ -17,6 +17,7 @@ import { BreadcrumbService } from '../../../services/breadcrumb.service' import { TranslateService } from '@ngx-translate/core' import { AppStateService } from '../../../services/app-state.service' import { UserService } from '../../../services/user.service' +import { PrimeIcon } from '../../utils/primeicon.utils' /** * Action definition. @@ -46,7 +47,7 @@ export interface ObjectDetailItem { label: string value?: string tooltip?: string - icon?: PrimeIcons + icon?: PrimeIcon labelPipe?: Type valuePipe?: Type valuePipeArgs?: string diff --git a/libs/portal-integration-angular/src/lib/core/components/search-config/search-config.component.spec.ts b/libs/portal-integration-angular/src/lib/core/components/search-config/search-config.component.spec.ts index 50de2329..7f7789b9 100644 --- a/libs/portal-integration-angular/src/lib/core/components/search-config/search-config.component.spec.ts +++ b/libs/portal-integration-angular/src/lib/core/components/search-config/search-config.component.spec.ts @@ -34,16 +34,16 @@ describe('SearchConfigComponent', () => { { id: '01', name: 'Basic search config', - version: 1, - readonly: true, + fieldListVersion: 1, + isReadonly: true, isAdvanced: true, values: searchConfigurations[0], }, { id: '02', name: 'Adapted search config', - version: 1, - readonly: true, + fieldListVersion: 1, + isReadonly: true, isAdvanced: true, values: searchConfigurations[1], }, diff --git a/libs/portal-integration-angular/src/lib/core/utils/primeicon.utils.ts b/libs/portal-integration-angular/src/lib/core/utils/primeicon.utils.ts new file mode 100644 index 00000000..f8fa2c41 --- /dev/null +++ b/libs/portal-integration-angular/src/lib/core/utils/primeicon.utils.ts @@ -0,0 +1,5 @@ +import { PrimeIcons } from 'primeng/api' +/** + * @example let myIcon : PrimeIcon = PrimeIcons.myIcon + */ +export type PrimeIcon = (typeof PrimeIcons)[keyof Omit] diff --git a/libs/portal-integration-angular/src/lib/model/button-dialog.ts b/libs/portal-integration-angular/src/lib/model/button-dialog.ts index ee383173..2e5edaae 100644 --- a/libs/portal-integration-angular/src/lib/model/button-dialog.ts +++ b/libs/portal-integration-angular/src/lib/model/button-dialog.ts @@ -1,5 +1,5 @@ import { Type } from '@angular/core' -import { PrimeIcons } from 'primeng/api' +import { PrimeIcon } from '../core/utils/primeicon.utils' /** * Object describing details for button rendering containing key for translation, optional icon and optional parameters for translation @@ -22,7 +22,7 @@ import { PrimeIcons } from 'primeng/api' */ export interface ButtonDialogButtonDetails { key: string - icon?: PrimeIcons + icon?: PrimeIcon parameters?: Record } diff --git a/libs/portal-integration-angular/src/lib/model/search-config.ts b/libs/portal-integration-angular/src/lib/model/search-config.ts index a88a91a5..95c35bb3 100644 --- a/libs/portal-integration-angular/src/lib/model/search-config.ts +++ b/libs/portal-integration-angular/src/lib/model/search-config.ts @@ -2,8 +2,8 @@ export type SearchConfigPrimitive = string | number | bigint | boolean | Date | export interface SearchConfig { id: string name: string - version: number - readonly: boolean + fieldListVersion: number + isReadonly: boolean isAdvanced: boolean values: Record } diff --git a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts index d072dcdb..86c87b61 100644 --- a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts +++ b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts @@ -6,7 +6,7 @@ import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dy import { ButtonDialogComponent } from '../core/components/button-dialog/button-dialog.component' import { ButtonDialogButtonDetails, ButtonDialogData } from '../model/button-dialog' import { DialogMessageContentComponent } from '../core/components/button-dialog/dialog-message-content/dialog-message-content.component' -import { PrimeIcons } from 'primeng/api' +import { PrimeIcon } from '../core/utils/primeicon.utils' /** * Object containing key for translation with parameters object for translation @@ -62,7 +62,7 @@ type TranslationKey = string | TranslationKeyWithParameters * } * ``` */ -type DialogMessage = { message: TranslationKey; icon: PrimeIcons } +type DialogMessage = { message: TranslationKey; icon: PrimeIcon } /** * Implement via component class to be displayed by {@link PortalDialogService.openDialog} diff --git a/libs/portal-integration-angular/testing/data-layout-selection.harness.ts b/libs/portal-integration-angular/testing/data-layout-selection.harness.ts index dd179eb7..3e7da442 100644 --- a/libs/portal-integration-angular/testing/data-layout-selection.harness.ts +++ b/libs/portal-integration-angular/testing/data-layout-selection.harness.ts @@ -1,6 +1,7 @@ import { ContentContainerComponentHarness, TestElement } from '@angular/cdk/testing' import { PSelectButtonHarness } from './primeng/p-selectButton.harness' import { PrimeIcons } from 'primeng/api' +import { PrimeIcon } from './utils/primeicon.utils' export class DataLayoutSelectionHarness extends ContentContainerComponentHarness { static hostSelector = 'ocx-data-layout-selection' @@ -29,7 +30,7 @@ export class DataLayoutSelectionHarness extends ContentContainerComponentHarness await (await this.getListLayoutSelectionButton())?.click() } - private async isDesiredButton(value: TestElement[], icon: PrimeIcons) { + private async isDesiredButton(value: TestElement[], icon: PrimeIcon) { for (let index = 0; index < value.length; index++) { if ((await value[index].getAttribute('aria-labelledby')) === icon) { return value[index] diff --git a/libs/portal-integration-angular/testing/index.ts b/libs/portal-integration-angular/testing/index.ts index ecd99352..4dc030a1 100644 --- a/libs/portal-integration-angular/testing/index.ts +++ b/libs/portal-integration-angular/testing/index.ts @@ -37,5 +37,7 @@ export * from './p-tableCheckbox.harness' export * from './create-or-edit-search-config-dialog.harness' export * from './lifecycle.harness' +export * from './utils/primeicon.utils' + export * from '@angular/cdk/testing' export * from '@angular/cdk/testing/testbed' diff --git a/libs/portal-integration-angular/testing/utils/primeicon.utils.ts b/libs/portal-integration-angular/testing/utils/primeicon.utils.ts new file mode 100644 index 00000000..6386a7d2 --- /dev/null +++ b/libs/portal-integration-angular/testing/utils/primeicon.utils.ts @@ -0,0 +1,3 @@ +import { PrimeIcons } from 'primeng/api' + +export type PrimeIcon = (typeof PrimeIcons)[keyof Omit] diff --git a/package-lock.json b/package-lock.json index 337af6ef..2e0e611a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@onecx/onecx-portal-ui-libs", - "version": "4.5.0", + "version": "4.8.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@onecx/onecx-portal-ui-libs", - "version": "4.5.0", + "version": "4.8.0", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": {