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

Author: saschaszott

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)"

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,

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;
 

src/assets/i18n/de.json5

@@ -5992,4 +5992,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",
 }

src/assets/i18n/en.json5

@@ -6764,6 +6764,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",