From a3a009d744cd8fbe6203fdd99c7f85d4b8b826d6 Mon Sep 17 00:00:00 2001 From: markuczy <129275100+markuczy@users.noreply.github.com> Date: Mon, 4 Mar 2024 10:59:24 +0100 Subject: [PATCH] feat: basic search to simple search with aria labels improvements (#146) * refactor: basic renamed to simple * feat: search header now has buttons with informational aria labels * feat: german translations * refactor: reverted naming changes * fix: basic directive error throw adjusted * feat: search-header tooltips --- .../assets/i18n/de.json | 18 +++++++++++++++-- .../assets/i18n/en.json | 20 +++++++++++++++---- .../page-header/page-header.component.html | 1 + .../search-config.component.spec.ts | 2 +- .../search-criteria.component.stories.ts | 4 ++-- .../search-criteria.component.ts | 18 ++++++++--------- .../search-header.component.html | 12 +++++------ .../search-header/search-header.component.ts | 10 +++++++--- .../services/portal-dialog.service.spec.ts | 2 +- .../testing/search-header.harness.ts | 12 +++++------ 10 files changed, 65 insertions(+), 34 deletions(-) diff --git a/libs/portal-integration-angular/assets/i18n/de.json b/libs/portal-integration-angular/assets/i18n/de.json index 75b31ce0..28e5d56f 100644 --- a/libs/portal-integration-angular/assets/i18n/de.json +++ b/libs/portal-integration-angular/assets/i18n/de.json @@ -70,13 +70,27 @@ }, "OCX_SEARCH_HEADER": { "TOGGLE_BUTTON": { - "BASIC": "Basis", - "ADVANCED": "Erweitert" + "SIMPLE": { + "TEXT": "Einfach", + "DETAIL": "Zu einfachen Suchkriterien wechseln" + }, + "ADVANCED": { + "TEXT": "Erweitert", + "DETAIL": "Zu erweiterten Suchkriterien wechseln" + } }, "OCX_SEARCH_CONFIG": { "DROPDOWN_DEFAULT": "Gespeicherte Suchvorlage auswählen" }, "HEADER": "Suche", + "RESET_BUTTON": { + "TEXT": "Zurücksetzen", + "DETAIL": "Suchkriterien zurücksetzen" + }, + "SEARCH_BUTTON": { + "TEXT": "Suchen", + "DETAIL": "Suche starten" + }, "RESET_BUTTON_TEXT": "Zurücksetzen", "SEARCH_BUTTON_TEXT": "Suchen", "EXPORT": "Alle Ereignisse exportieren" diff --git a/libs/portal-integration-angular/assets/i18n/en.json b/libs/portal-integration-angular/assets/i18n/en.json index a6523cc1..920444cc 100644 --- a/libs/portal-integration-angular/assets/i18n/en.json +++ b/libs/portal-integration-angular/assets/i18n/en.json @@ -70,15 +70,27 @@ }, "OCX_SEARCH_HEADER": { "TOGGLE_BUTTON": { - "BASIC": "Basic", - "ADVANCED": "Advanced" + "SIMPLE": { + "TEXT": "Simple", + "DETAIL": "Switch to simple search criteria" + }, + "ADVANCED": { + "TEXT": "Advanced", + "DETAIL": "Switch to advanced search criteria" + } }, "OCX_SEARCH_CONFIG": { "DROPDOWN_DEFAULT": "Pick predefined template" }, "HEADER": "Search", - "RESET_BUTTON_TEXT": "Reset", - "SEARCH_BUTTON_TEXT": "Search", + "RESET_BUTTON": { + "TEXT": "Reset", + "DETAIL": "Reset search criteria" + }, + "SEARCH_BUTTON": { + "TEXT": "Search", + "DETAIL": "Start search" + }, "EXPORT": "Export all events" }, "OCX_PAGE_HEADER": { diff --git a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.html b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.html index cb9d8ab7..bd778301 100644 --- a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.html +++ b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.html @@ -48,6 +48,7 @@

{{ subheader }}

[title]="(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)" [disabled]="action.disabled ? action.disabled : false" [attr.name]="action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'" + [ariaLabel]="(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)" > 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 7f7789b9..55df9b2a 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 @@ -33,7 +33,7 @@ describe('SearchConfigComponent', () => { const searchConfigs: SearchConfig[] = [ { id: '01', - name: 'Basic search config', + name: 'Simple search config', fieldListVersion: 1, isReadonly: true, isAdvanced: true, diff --git a/libs/portal-integration-angular/src/lib/core/components/search-criteria/search-criteria.component.stories.ts b/libs/portal-integration-angular/src/lib/core/components/search-criteria/search-criteria.component.stories.ts index 6910a6fc..31c3a5fb 100644 --- a/libs/portal-integration-angular/src/lib/core/components/search-criteria/search-criteria.component.stories.ts +++ b/libs/portal-integration-angular/src/lib/core/components/search-criteria/search-criteria.component.stories.ts @@ -47,7 +47,7 @@ export default { MenuModule, BreadcrumbModule, SkeletonModule, - StorybookTranslateModule + StorybookTranslateModule, ], providers: [], }), @@ -117,7 +117,7 @@ const TemplateWithProjectionAndExtraToolbar: StoryFn = `, }) -export const Basic = { +export const Simple = { render: Template, args: { diff --git a/libs/portal-integration-angular/src/lib/core/components/search-criteria/search-criteria.component.ts b/libs/portal-integration-angular/src/lib/core/components/search-criteria/search-criteria.component.ts index ab571295..ce969d20 100644 --- a/libs/portal-integration-angular/src/lib/core/components/search-criteria/search-criteria.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/search-criteria/search-criteria.component.ts @@ -51,7 +51,7 @@ export class SearchCriteriaComponent extends PageHeaderComponent implements OnIn protected advancedSearchActive = false - // in BASIC mode ... enable switching to ADVANCED + // in SIMPLE mode ... enable switching to ADVANCED private enableAdvancedSearch: Action = { label: 'Advanced', title: 'Switch to Advanced Search', @@ -60,10 +60,10 @@ export class SearchCriteriaComponent extends PageHeaderComponent implements OnIn this.activateAdvancedSearch(true) }, } - // in ADVANCED mode ... enable switching to BASIC - private enableBasicSearch: Action = { - label: 'Basic', - title: 'Switch to Basic Search', + // in ADVANCED mode ... enable switching to SIMPLE + private enableSimpleSearch: Action = { + label: 'Simple', + title: 'Switch to Simple Search', show: 'always', actionCallback: () => { this.activateAdvancedSearch(false) @@ -75,7 +75,7 @@ export class SearchCriteriaComponent extends PageHeaderComponent implements OnIn translateService: TranslateService, appStateService: AppStateService, userService: UserService, - @Inject(PortalSearchPage) @Optional() private searchPage?: PortalSearchPage, + @Inject(PortalSearchPage) @Optional() private searchPage?: PortalSearchPage ) { super(breadcrumbs, translateService, appStateService, userService) } @@ -111,12 +111,12 @@ export class SearchCriteriaComponent extends PageHeaderComponent implements OnIn this.advancedSearchActive = advanced const actions = [...(this.actions || [])] const index = actions.findIndex( - (a) => (advanced && a === this.enableAdvancedSearch) || (!advanced && a === this.enableBasicSearch) + (a) => (advanced && a === this.enableAdvancedSearch) || (!advanced && a === this.enableSimpleSearch) ) if (index >= 0) { - actions[index] = advanced ? this.enableBasicSearch : this.enableAdvancedSearch + actions[index] = advanced ? this.enableSimpleSearch : this.enableAdvancedSearch } else { - actions.push(advanced ? this.enableBasicSearch : this.enableAdvancedSearch) + actions.push(advanced ? this.enableSimpleSearch : this.enableAdvancedSearch) } this.actions = actions } diff --git a/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.html b/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.html index a4a2918f..b6845003 100644 --- a/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.html +++ b/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.html @@ -17,20 +17,20 @@ id="resetButton" *ngIf="resetted.observed" (onClick)="onResetClicked()" - label="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON_TEXT' | translate }}" + label="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}" icon="pi pi-eraser" - [attr.aria-label]="'OCX_SEARCH_HEADER.RESET_BUTTON_TEXT' | translate" - title="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON_TEXT' | translate }}" + [ariaLabel]="'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate" + title="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}" > diff --git a/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.ts b/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.ts index e6fb8975..e93520af 100644 --- a/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.ts @@ -89,13 +89,17 @@ export class SearchHeaderComponent implements AfterViewInit { const headerActions: Action[] = [] if (this.hasAdvanced) { headerActions.push({ - id: 'basicAdvancedButton', + id: 'simpleAdvancedButton', labelKey: this.viewMode === 'basic' - ? 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.ADVANCED' - : 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.BASIC', + ? 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.ADVANCED.TEXT' + : 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.SIMPLE.TEXT', actionCallback: () => this.toggleViewMode(), show: 'always', + titleKey: + this.viewMode === 'basic' + ? 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.ADVANCED.DETAIL' + : 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.SIMPLE.DETAIL', }) } this.headerActions = headerActions.concat(this.actions) diff --git a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.spec.ts b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.spec.ts index 6b73a77d..1831233f 100644 --- a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.spec.ts +++ b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.spec.ts @@ -209,7 +209,7 @@ describe('PortalDialogService', () => { let fixture: ComponentFixture const translations = { - TITLE_TRANSLATE: 'basicTitle', + TITLE_TRANSLATE: 'simpleTitle', TITLE_TRANSLATE_PARAM: 'translatedTitle {{val}}', MESSAGE: 'myMessage', MESSAGE_PARAM: 'myMessage {{val}}', diff --git a/libs/portal-integration-angular/testing/search-header.harness.ts b/libs/portal-integration-angular/testing/search-header.harness.ts index c1cc8e37..226d6ae3 100644 --- a/libs/portal-integration-angular/testing/search-header.harness.ts +++ b/libs/portal-integration-angular/testing/search-header.harness.ts @@ -18,9 +18,9 @@ export class SearchHeaderHarness extends ContentContainerComponentHarness { }) ) - getBasicAdvancedButton = this.locatorForOptional( + getSimpleAdvancedButton = this.locatorForOptional( ButtonHarness.with({ - id: 'basicAdvancedButton', + id: 'simpleAdvancedButton', }) ) @@ -34,11 +34,11 @@ export class SearchHeaderHarness extends ContentContainerComponentHarness { await (await this.getResetButton()).click() } - async toggleBasicAdvanced() { - if (await this.getBasicAdvancedButton()) { - await (await this.getBasicAdvancedButton())?.click() + async toggleSimpleAdvanced() { + if (await this.getSimpleAdvancedButton()) { + await (await this.getSimpleAdvancedButton())?.click() } else { - console.warn('No BasicAdvancedButton is being displayed to toggle, because no advanced form field is defined.') + console.warn('No SimpleAdvancedButton is being displayed to toggle, because no advanced form field is defined.') } } }