Skip to content

Commit

Permalink
chore(stark-ui): more changes for the Stark Date Range picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@christophercr
christophercr committed May 28, 2019
1 parent 0e78064 commit 6f7fb72
Show file tree
Hide file tree
Showing 8 changed files with 775 additions and 417 deletions.
620 changes: 421 additions & 199 deletions ...ges/stark-ui/src/modules/date-range-picker/components/date-range-picker.component.spec.ts
View file

Large diffs are not rendered by default.

307 changes: 198 additions & 109 deletions packages/stark-ui/src/modules/date-range-picker/components/date-range-picker.component.ts
View file

Large diffs are not rendered by default.

21 changes: 15 additions & 6 deletions showcase/src/app/demo-ui/pages/date-range-picker/demo-date-range-picker-page.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,25 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
[required]="true"
#dateRangeComponent
>
<ng-container start-date-errors *ngFor="let error of getErrorMessages(dateRangeComponent.startDateFormControl)">
<ng-container
start-date-errors
*ngFor="let error of getErrorMessages(dateRangeComponent.startDateFormControl); trackBy: trackItemFn"
>
{{ error | translate }}
<br />
</ng-container>

<ng-container end-date-errors *ngFor="let error of getErrorMessages(dateRangeComponent.endDateFormControl)">
<ng-container
end-date-errors
*ngFor="let error of getErrorMessages(dateRangeComponent.endDateFormControl); trackBy: trackItemFn"
>
{{ error | translate }}
<br />
</ng-container>
</stark-date-range-picker>
<br /><br />
<mat-checkbox [(ngModel)]="modelDisabled">
{{ (modelDisabled ? "SHOWCASE.COMMON.DISABLED" : "SHOWCASE.COMMON.ENABLED") | translate }}
{{ "SHOWCASE.COMMON.DISABLED" | translate }}
</mat-checkbox>
</example-viewer>

Expand All @@ -41,19 +47,22 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
exampleTitle="SHOWCASE.DEMO.DATE_RANGE_PICKER.WITH_FORM_GROUP"
>
<stark-date-range-picker [rangeFormGroup]="dateRangeFormGroup" required>
<ng-container start-date-errors *ngFor="let error of getErrorMessages(dateRangeFormGroup.controls.startDate)">
<ng-container
start-date-errors
*ngFor="let error of getErrorMessages(dateRangeFormGroup.controls.startDate); trackBy: trackItemFn"
>
{{ error | translate }}
<br />
</ng-container>

<ng-container end-date-errors *ngFor="let error of getErrorMessages(dateRangeFormGroup.controls.endDate)">
<ng-container end-date-errors *ngFor="let error of getErrorMessages(dateRangeFormGroup.controls.endDate); trackBy: trackItemFn">
{{ error | translate }}
<br />
</ng-container>
</stark-date-range-picker>
<br /><br />
<mat-checkbox [checked]="dateRangeFormGroup.disabled" (change)="onDateRangeFormGroupDisableCheckboxChange($event)">
{{ (dateRangeFormGroup.disabled ? "SHOWCASE.COMMON.DISABLED" : "SHOWCASE.COMMON.ENABLED") | translate }}
{{ "SHOWCASE.COMMON.DISABLED" | translate }}
</mat-checkbox>
</example-viewer>

Expand Down
98 changes: 55 additions & 43 deletions showcase/src/app/demo-ui/pages/date-range-picker/demo-date-range-picker-page.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
/* tslint:disable:no-null-keyword trackBy-function */
/* tslint:disable:no-null-keyword */
import { Component, Inject, OnDestroy } from "@angular/core";
import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
import { StarkDateRangePickerEvent } from "@nationalbankbelgium/stark-ui";
import { AbstractControl, FormControl, FormGroup, ValidationErrors, Validators } from "@angular/forms";
import { MatCheckboxChange } from "@angular/material/checkbox";
import { Subscription } from "rxjs";
import { ReferenceLink } from "../../../shared/components";
import { StarkDateRangePickerEvent } from "@nationalbankbelgium/stark-ui";
import map from "lodash-es/map";

const MONTH_IN_MILLI = 2592000000;

Expand All @@ -26,39 +25,15 @@ export class DemoDateRangePickerPageComponent implements OnDestroy {
public dateRangeModel = { startDate: this.today, endDate: this.inOneMonth };
public modelDisabled = false;

// IMPORTANT: if the DateRangePicker should be required, then add the 'required' validator to both form controls too!
public dateRangeFormGroup = new FormGroup({
startDate: new FormControl(null, Validators.compose([DemoDateRangePickerPageComponent.noFebruaryValidator])),
endDate: new FormControl(null, Validators.compose([DemoDateRangePickerPageComponent.noFebruaryValidator]))
startDate: new FormControl(
undefined,
Validators.compose([Validators.required, DemoDateRangePickerPageComponent.noFebruaryValidator])
),
endDate: new FormControl(undefined, Validators.compose([Validators.required, DemoDateRangePickerPageComponent.noFebruaryValidator]))
});

public getErrorMessages: (control: AbstractControl) => string[] = () => [];

private _activateGetErrorMessages(): void {
this.getErrorMessages = (control: AbstractControl): string[] =>
map(
control.errors || {},
(_value: any, key: string): string => {
switch (key) {
case "required":
return "SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.REQUIRED";
case "matDatepickerMin":
return "SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.MIN_TODAY";
case "matDatepickerMax":
return "SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.MAX_MONTH";
case "matDatepickerFilter":
return "SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.WEEKDAY";
case "startBeforeEnd":
return "SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.START_BEFORE_END";
case "endAfterStart":
return "SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.END_AFTER_START";
case "inFebruary":
return "SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.IN_FEBRUARY";
default:
return "";
}
}
);
}
/**
* List of subscriptions to be unsubscribed when component is destroyed
*/
Expand All @@ -72,32 +47,69 @@ export class DemoDateRangePickerPageComponent implements OnDestroy {
];

public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {
this._subs.push(this.dateRangeFormGroup.valueChanges.subscribe((v: any) => this.logger.debug("formGroup:", v)));
this._subs.push(this.dateRangeFormGroup.valueChanges.subscribe((value: any) => this.logger.debug("formGroup:", value)));
}

// FIXME: For some reason validation is run on the internal formControls before the value is set.
// this results in a ExpressionChangedAfterItHasBeenCheckedError on the usage of getErrorMessages.
setTimeout(() => this._activateGetErrorMessages());
public ngOnDestroy(): void {
for (const subscription of this._subs) {
subscription.unsubscribe();
}
}

public getErrorMessages(control?: AbstractControl): string[] {
const errors: string[] = [];

if (control && control.errors) {
for (const key of Object.keys(control.errors)) {
switch (key) {
case "required":
errors.push("SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.REQUIRED");
break;
case "matDatepickerMin":
errors.push("SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.MIN_TODAY");
break;
case "matDatepickerMax":
errors.push("SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.MAX_MONTH");
break;
case "matDatepickerFilter":
errors.push("SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.WEEKDAY");
break;
case "startBeforeEnd":
errors.push("SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.START_BEFORE_END");
break;
case "endAfterStart":
errors.push("SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.END_AFTER_START");
break;
case "inFebruary":
errors.push("SHOWCASE.DEMO.DATE_RANGE_PICKER.ERROR_MESSAGES.IN_FEBRUARY");
break;
default:
errors.push(key);
}
}
}

return errors;
}

public onDateModelChange(): void {
this.logger.debug("ngModel", this.dateRangeModel);
}

public onDateRangeFormGroupDisableCheckboxChange(event: MatCheckboxChange): void {
// enable/disable the control without emitting a change event since the value did not change (to avoid unnecessary extra calls!)
if (event.checked) {
this.dateRangeFormGroup.disable();
this.dateRangeFormGroup.disable({ emitEvent: false });
} else {
this.dateRangeFormGroup.enable();
this.dateRangeFormGroup.enable({ emitEvent: false });
}
}

public onDateChange(dateRange: StarkDateRangePickerEvent): void {
this.logger.debug("onChange:", dateRange);
}

public ngOnDestroy(): void {
for (const subscription of this._subs) {
subscription.unsubscribe()
}
public trackItemFn(item: string): string {
return item;
}
}
8 changes: 3 additions & 5 deletions showcase/src/assets/examples/date-range-picker/form-group.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
<stark-date-range-picker [formGroup]="dateRangeFormGroup" required>
<ng-container start-date-errors *ngFor="let error of getErrorMessages(dateRangeFormGroup.controls.startDate)">
<ng-container start-date-errors *ngFor="let error of getErrorMessages(dateRangeFormGroup.controls.startDate); trackBy: trackItemFn">
{{ error }}
<br />
</ng-container>

<ng-container end-date-errors *ngFor="let error of getErrorMessages(dateRangeFormGroup.controls.endDate)">
<ng-container end-date-errors *ngFor="let error of getErrorMessages(dateRangeFormGroup.controls.endDate); trackBy: trackItemFn">
{{ error }}
<br />
</ng-container>
</stark-date-range-picker>
<br /><br />
<mat-checkbox [value]="dateRangeFormGroup.disabled" (change)="onDateRangeFormGroupDisableCheckboxChange($event)">
{{ dateRangeFormGroup.disabled ? "Disabled" : "Enabled" }}
</mat-checkbox>
<mat-checkbox [value]="dateRangeFormGroup.disabled" (change)="onDateRangeFormGroupDisableCheckboxChange($event)">Disabled</mat-checkbox>
66 changes: 44 additions & 22 deletions showcase/src/assets/examples/date-range-picker/form-group.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium
import { AbstractControl, FormControl, FormGroup, ValidationErrors, Validators } from "@angular/forms";
import { MatCheckboxChange } from "@angular/material/checkbox";
import { Subscription } from "rxjs";
import map from "lodash-es/map";

@Component({
selector: "demo-date-range-picker",
Expand All @@ -16,51 +15,74 @@ export class DemoDateRangePickerComponent implements OnDestroy {
return value instanceof Date && value.getMonth() === 1 ? { inFebruary: true } : null; // date counts months from 0
}

// IMPORTANT: if the DateRangePicker should be required, then add the 'required' validator to both form controls too!
public dateRangeFormGroup = new FormGroup({
startDate: new FormControl(null, Validators.compose([DemoDateRangePickerComponent.noFebruaryValidator])),
endDate: new FormControl(null, Validators.compose([DemoDateRangePickerComponent.noFebruaryValidator]))
startDate: new FormControl(undefined, Validators.compose([Validators.required, DemoDateRangePickerComponent.noFebruaryValidator])),
endDate: new FormControl(undefined, Validators.compose([Validators.required, DemoDateRangePickerComponent.noFebruaryValidator]))
});

/**
* List of subscriptions to be unsubscribed when component is destroyed
*/
private _subs: Subscription[] = [];

public getErrorMessages(control: AbstractControl): string[] {
return map(
control.errors || [],
(_value: any, key: string): string => {
public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {
this._subs.push(this.dateRangeFormGroup.valueChanges.subscribe((v: any) => this.logger.debug("formGroup:", v)));
}

public ngOnDestroy(): void {
for (const subscription of this._subs) {
subscription.unsubscribe();
}
}

public getErrorMessages(control?: AbstractControl): string[] {
const errors: string[] = [];

if (control && control.errors) {
for (const key of Object.keys(control.errors)) {
switch (key) {
case "required":
return "Date is required";
errors.push("Date is required");
break;
case "matDatepickerMin":
errors.push("Date should be after today");
break;
case "matDatepickerMax":
errors.push("Date should be in less than 1 month");
break;
case "matDatepickerFilter":
errors.push("Date should be a weekday");
break;
case "startBeforeEnd":
return "Start date should be before end date";
errors.push("Start date should be before end date");
break;
case "endAfterStart":
return "End date should be after start date";
errors.push("End date should be after start date");
break;
case "inFebruary":
return "Date should not be in February";
errors.push("Date should not be in February");
break;
default:
return "";
errors.push(key);
break;
}
}
);
}
}

public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {
this._subs.push(this.dateRangeFormGroup.valueChanges.subscribe((v: any) => this.logger.debug("formGroup:", v)));
return errors;
}

public onDateRangeFormGroupDisableCheckboxChange(event: MatCheckboxChange): void {
// enable/disable the control without emitting a change event since the value did not change (to avoid unnecessary extra calls!)
if (event.checked) {
this.dateRangeFormGroup.disable();
this.dateRangeFormGroup.disable({ emitEvent: false });
} else {
this.dateRangeFormGroup.enable();
this.dateRangeFormGroup.enable({ emitEvent: false });
}
}

public ngOnDestroy(): void {
for (const subscription of this._subs) {
subscription.unsubscribe()
}
public trackItemFn(item: string): string {
return item;
}
}
6 changes: 3 additions & 3 deletions showcase/src/assets/examples/date-range-picker/model.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@
[disabled]="modelDisabled"
#dateRangeComponent
>
<ng-container start-date-errors *ngFor="let error of getErrorMessages(dateRangeComponent.startDateFormControl)">
<ng-container start-date-errors *ngFor="let error of getErrorMessages(dateRangeComponent.startDateFormControl); trackBy: trackItemFn">
{{ error }}
<br />
</ng-container>

<ng-container end-date-errors *ngFor="let error of getErrorMessages(dateRangeComponent.endDateFormControl)">
<ng-container end-date-errors *ngFor="let error of getErrorMessages(dateRangeComponent.endDateFormControl); trackBy: trackItemFn">
{{ error }}
<br />
</ng-container>
</stark-date-range-picker>
<br /><br />
<mat-checkbox [(ngModel)]="modelDisabled">{{ modelDisabled ? "Disabled" : "Enabled" }}</mat-checkbox>
<mat-checkbox [(ngModel)]="modelDisabled">Disabled</mat-checkbox>
Loading

0 comments on commit 6f7fb72

Please sign in to comment.