From be6de64fcd357403a2ef83d1cc2b36273abd77b8 Mon Sep 17 00:00:00 2001 From: Sascha Szott Date: Thu, 6 Feb 2025 22:05:36 +0100 Subject: [PATCH] use translation service to determine placeholder values of date picker (#2827) * use translation service to determine placeholder values * added translation of date-picker placeholder values * added German translations of date-picker placeholder values * fix lint warning: added missing comma * fix lint warning: removed trailing spaces * fixed broken tests * fixed lint warning * try to mock TranslateService correctly * remove TranslateService mock * removed imports * fixed lint warnings * fixed lint warnings * fixed lint warning * fixed lint warning * fixed lint error * fixed lint errors * removed TestComponent * added imports * removed declarations * fixed lint error * fix lint error (invalid sorting) * finally fixing lint error * use translation pipe directly in template * move translation of placeholders into HTML template * remove TranslateService dependency --- .../models/date-picker/date-picker.component.html | 6 +++--- .../models/date-picker/date-picker.component.spec.ts | 6 +++++- .../models/date-picker/date-picker.component.ts | 6 ++---- src/assets/i18n/de.json5 | 10 ++++++++++ src/assets/i18n/en.json5 | 6 ++++++ 5 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html index 3bf02c4abd..3dab2d214a 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html @@ -14,7 +14,7 @@ [(ngModel)]="initialYear" [value]="year" [invalid]="showErrorMessages" - [placeholder]='yearPlaceholder' + [placeholder]="'form.date-picker.placeholder.year' | translate" (blur)="onBlur($event)" (change)="onChange($event)" (focus)="onFocus($event)" @@ -29,7 +29,7 @@ [size]="6" [(ngModel)]="initialMonth" [value]="month" - [placeholder]="monthPlaceholder" + [placeholder]="'form.date-picker.placeholder.month' | translate" [disabled]="!year || model.disabled" (blur)="onBlur($event)" (change)="onChange($event)" @@ -45,7 +45,7 @@ [size]="2" [(ngModel)]="initialDay" [value]="day" - [placeholder]="dayPlaceholder" + [placeholder]="'form.date-picker.placeholder.day' | translate" [disabled]="!month || model.disabled" (blur)="onBlur($event)" (change)="onChange($event)" diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts index a6cf7a29f2..54bec75f0f 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts @@ -24,7 +24,10 @@ import { DynamicFormLayoutService, DynamicFormValidationService, } from '@ng-dynamic-forms/core'; -import { TranslateService } from '@ngx-translate/core'; +import { + TranslateModule, + TranslateService, +} from '@ngx-translate/core'; import { of as observableOf } from 'rxjs'; import { @@ -80,6 +83,7 @@ describe('DsDatePickerComponent test suite', () => { NgbModule, DsDatePickerComponent, TestComponent, + TranslateModule.forRoot(), ], providers: [ ChangeDetectorRef, diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts index f398ea6965..360b37e31c 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts @@ -22,6 +22,7 @@ import { DynamicFormLayoutService, DynamicFormValidationService, } from '@ng-dynamic-forms/core'; +import { TranslateModule } from '@ngx-translate/core'; import isEqual from 'lodash/isEqual'; import { BtnDisabledDirective } from '../../../../../btn-disabled.directive'; @@ -42,6 +43,7 @@ export const DS_DATE_PICKER_SEPARATOR = '-'; NgIf, NumberPickerComponent, FormsModule, + TranslateModule, BtnDisabledDirective, ], standalone: true, @@ -74,10 +76,6 @@ export class DsDatePickerComponent extends DynamicFormControlComponent implement minDay = 1; maxDay = 31; - yearPlaceholder = 'year'; - monthPlaceholder = 'month'; - dayPlaceholder = 'day'; - disabledMonth = true; disabledDay = true; diff --git a/src/assets/i18n/de.json5 b/src/assets/i18n/de.json5 index 2a627919d1..1d0480015a 100644 --- a/src/assets/i18n/de.json5 +++ b/src/assets/i18n/de.json5 @@ -5998,4 +5998,14 @@ // "workspace-item.delete.notification.error.content": "The workspace item could not be deleted", "workspace-item.delete.notification.error.content": "Das Workspace-Item konnte nicht gelöscht werden.", + + + // "form.date-picker.placeholder.year": "Year", + "form.date-picker.placeholder.year": "Jahr", + + // "form.date-picker.placeholder.month": "Month", + "form.date-picker.placeholder.month": "Monat", + + // "form.date-picker.placeholder.day": "Day", + "form.date-picker.placeholder.day": "Tag", } diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 053e5133d9..7da72f0fb3 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -6758,6 +6758,12 @@ "search.filters.filter.notifyEndorsement.label": "Search Notify Endorsement", + "form.date-picker.placeholder.year": "Year", + + "form.date-picker.placeholder.month": "Month", + + "form.date-picker.placeholder.day": "Day", + "item.page.cc.license.title": "Creative Commons license", "item.page.cc.license.disclaimer": "Except where otherwised noted, this item's license is described as",