feat(stark-ui): date-picker - add support to translate placeholder in…

…ternally ISSUES CLOSED: #1204
NationalBankBelgium · Mar 21, 2019 · 63545f8 · 63545f8
1 parent 89b577d
commit 63545f8
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 11 deletions.
diff --git a/packages/stark-ui/src/modules/date-picker/components/date-picker.component.html b/packages/stark-ui/src/modules/date-picker/components/date-picker.component.html
@@ -7,6 +7,7 @@
 	(dateChange)="onDateChange($event)"
 	[matDatepickerFilter]="dateFilterFnWrapper"
 	[min]="min"
+	[placeholder]="placeholder"
 	[disabled]="disabled"
 	[max]="max"
 	[name]="pickerName"

diff --git a/packages/stark-ui/src/modules/date-picker/components/date-picker.component.spec.ts b/packages/stark-ui/src/modules/date-picker/components/date-picker.component.spec.ts
@@ -61,7 +61,7 @@ class TestHostComponent {
 	selector: `host-form-control-component`,
 	template: `
 		<mat-form-field>
-			<stark-date-picker [required]="required" [dateMask]="dateMask" [formControl]="formControl"></stark-date-picker>
+			<stark-date-picker [required]="required" [placeholder]="placeholder" [dateMask]="dateMask" [formControl]="formControl"></stark-date-picker>
 		</mat-form-field>
 	`
 })
@@ -71,6 +71,7 @@ class TestHostFormControlComponent {
 
 	public dateMask: StarkDatePickerMaskConfig;
 	public formControl: FormControl = new FormControl();
+	public placeholder: string;
 	public required: boolean;
 }
 
@@ -133,7 +134,7 @@ describe("DatePickerComponent", () => {
 				expect(component.pickerId).toEqual("");
 				expect(component.pickerName).toBeDefined();
 				expect(component.pickerName).toEqual("");
-				expect(component.placeholder).toBeUndefined();
+				expect(component.placeholder).toEqual("");
 				expect(component.dateChange).toBeDefined();
 				expect(component.dateInput).toBeDefined();
 			});
@@ -300,7 +301,7 @@ describe("DatePickerComponent", () => {
 				expect(component.pickerId).toEqual("");
 				expect(component.pickerName).toBeDefined();
 				expect(component.pickerName).toEqual("");
-				expect(component.placeholder).toBeUndefined();
+				expect(component.placeholder).toEqual("");
 				expect(component.dateChange).toBeDefined();
 				expect(component.dateInput).toBeDefined();
 			});

diff --git a/packages/stark-ui/src/modules/date-picker/components/date-picker.component.ts b/packages/stark-ui/src/modules/date-picker/components/date-picker.component.ts
@@ -25,9 +25,10 @@ import { isStarkTimestampMaskConfig, StarkTimestampMaskConfig } from "../../inpu
 import { MAT_DATE_FORMATS, MatDateFormats } from "@angular/material/core";
 import { MatFormFieldControl } from "@angular/material/form-field";
 import { AbstractStarkUiComponent } from "../../../common/classes/abstract-component";
-import { Subject } from "rxjs";
+import { Subject, Subscription } from "rxjs";
 import { FocusMonitor, FocusOrigin } from "@angular/cdk/a11y";
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { TranslateService } from "@ngx-translate/core";
 
 /**
  * Type expected by `dateFilter` @Input.
@@ -161,6 +162,7 @@ export class StarkDatePickerComponent extends AbstractStarkUiComponent
 
 	/**
 	 * Placeholder to be displayed in the datepicker
+	 * Dynamically translated via the @ngx-translate service if the provided text is defined in the translation keys).
 	 */
 	@Input()
 	public placeholder: string;
@@ -269,6 +271,19 @@ export class StarkDatePickerComponent extends AbstractStarkUiComponent
 		return !this.value;
 	}
 
+	/**
+	 * @ignore
+	 * @internal
+	 * Original placeholder translation key to keep in memory to translate again when language changes.
+	 */
+	private originalPlaceholder: string = "";
+
+	/**
+	 * @ignore
+	 * @internal
+	 */
+	private translateOnLangChangeSubscription: Subscription;
+
 	/**
 	 * Class constructor
 	 * @param logger - The logger of the application
@@ -278,6 +293,7 @@ export class StarkDatePickerComponent extends AbstractStarkUiComponent
 	 * @param dateFormats - Reference to the date formats provided to MAT_DATE_FORMATS
 	 * @param fm - The Focus Monitor Service
 	 * @param injector - The Injector of the application
+	 * @param translateService - The Translate Service of the application
 	 */
 	public constructor(
 		@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService,
@@ -286,7 +302,8 @@ export class StarkDatePickerComponent extends AbstractStarkUiComponent
 		private cdRef: ChangeDetectorRef,
 		@Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
 		private fm: FocusMonitor,
-		private injector: Injector
+		private injector: Injector,
+		private translateService: TranslateService
 	) {
 		super(renderer, elementRef);
 
@@ -308,6 +325,16 @@ export class StarkDatePickerComponent extends AbstractStarkUiComponent
 		if (this.ngControl !== null) {
 			this.ngControl.valueAccessor = this;
 		}
+
+		this.translateOnLangChangeSubscription = this.translateService.onLangChange.subscribe(() => {
+			// Handle translation internally because mat-form-field uses the value of `@Input public placeholder` to display the label / placeholder
+			this.placeholder = this.originalPlaceholder
+				? this.translateService.instant(this.originalPlaceholder)
+				: this.originalPlaceholder;
+			this.stateChanges.next();
+		});
+
+		super.ngOnInit();
 	}
 
 	/**
@@ -321,11 +348,20 @@ export class StarkDatePickerComponent extends AbstractStarkUiComponent
 			);
 		}
 
-		if (changes["max"] || changes["min"] || changes["required"] || changes["placeholder"]) {
+		if (changes["max"] || changes["min"] || changes["required"]) {
 			this.stateChanges.next();
 			this.cdRef.detectChanges();
 			this._onValidatorChange();
 		}
+
+		if (changes["placeholder"]) {
+			this.originalPlaceholder = changes["placeholder"].currentValue || "";
+			// Handle translation internally because mat-form-field uses the value of `@Input public placeholder` to display the label / placeholder
+			this.placeholder = this.originalPlaceholder
+				? this.translateService.instant(this.originalPlaceholder)
+				: this.originalPlaceholder;
+			this.stateChanges.next();
+		}
 
 		if (changes["dateMask"]) {
 			if (isStarkTimestampMaskConfig(changes["dateMask"].currentValue)) {
@@ -369,6 +405,10 @@ export class StarkDatePickerComponent extends AbstractStarkUiComponent
 	public ngOnDestroy(): void {
 		this.stateChanges.complete();
 		this.fm.stopMonitoring(this.elementRef.nativeElement);
+
+		if (this.translateOnLangChangeSubscription) {
+			this.translateOnLangChangeSubscription.unsubscribe();
+		}
 	}
 
 	/**

diff --git a/showcase/src/app/demo-ui/pages/date-picker/demo-date-picker-page.component.html b/showcase/src/app/demo-ui/pages/date-picker/demo-date-picker-page.component.html
@@ -10,7 +10,7 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 			<stark-date-picker
 				pickerId="picker-reactive-form"
 				pickerName="picker-reactive-form"
-				[placeholder]="'SHOWCASE.DEMO.DATE_PICKER.PLACEHOLDER' | translate"
+				placeholder="SHOWCASE.DEMO.DATE_PICKER.PLACEHOLDER"
 				[dateFilter]="'OnlyWeekends'"
 				[min]="minDate"
 				[max]="maxDate"
@@ -38,7 +38,7 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 				pickerId="picker-ng-model"
 				pickerName="picker-ng-model"
 				[(ngModel)]="ngModelDate"
-				[placeholder]="'SHOWCASE.DEMO.DATE_PICKER.PLACEHOLDER' | translate"
+				placeholder="SHOWCASE.DEMO.DATE_PICKER.PLACEHOLDER"
 				[min]="minDate"
 				[max]="maxDate"
 				[disabled]="disabled"
@@ -61,7 +61,7 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 				pickerName="only-weekends"
 				[value]="currentDate"
 				[dateFilter]="'OnlyWeekends'"
-				[placeholder]="'SHOWCASE.DEMO.DATE_PICKER.PLACEHOLDER' | translate"
+				placeholder="SHOWCASE.DEMO.DATE_PICKER.PLACEHOLDER"
 				[min]="minDate"
 				[max]="maxDate"
 				[required]="required"
@@ -77,7 +77,7 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 				pickerName="only-weekdays"
 				[value]="currentDate"
 				[dateFilter]="'OnlyWeekdays'"
-				[placeholder]="'SHOWCASE.DEMO.DATE_PICKER.PLACEHOLDER' | translate"
+				placeholder="SHOWCASE.DEMO.DATE_PICKER.PLACEHOLDER"
 				[min]="minDate"
 				[max]="maxDate"
 				dateMask="true"
@@ -97,7 +97,7 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 				pickerName="custom-filter"
 				[value]="currentDate"
 				[dateFilter]="customDateFilter"
-				[placeholder]="'SHOWCASE.DEMO.DATE_PICKER.PLACEHOLDER' | translate"
+				placeholder="SHOWCASE.DEMO.DATE_PICKER.PLACEHOLDER"
 				[min]="minDate"
 				[max]="maxDate"
 				(dateChange)="onDateChanged($event)"