Skip to content

Commit

Permalink
feat(stark-ui): date-range-picker - add support for timestamp mask
Browse files Browse the repository at this point in the history
ISSUES CLOSED: #1231
  • Loading branch information
SuperITMan committed Apr 2, 2019
1 parent a6007bd commit 0403dea
Show file tree
Hide file tree
Showing 15 changed files with 201 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import isEqual from "lodash-es/isEqual";
export type StarkDatePickerFilter = "OnlyWeekends" | "OnlyWeekdays" | ((date: Date) => boolean) | undefined;

/**
* Type expected by `mastConfig` @Input.
* Type expected by `maskConfig` @Input.
*/
export type StarkDatePickerMaskConfig = StarkTimestampMaskConfig | boolean | undefined;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
[placeholder]="startDateLabel | translate"
[min]="startMinDate"
[max]="startMaxDate"
[dateMask]="dateMask"
(dateChange)="onDateStartChanged($event)"
>
</stark-date-picker>
Expand All @@ -24,6 +25,7 @@
[placeholder]="endDateLabel | translate"
[min]="endMinDate"
[max]="endMaxDate"
[dateMask]="dateMask"
(dateChange)="onDateEndChanged($event)"
>
</stark-date-picker>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ describe("DateRangePickerComponent", () => {

it("should NOT have any inputs set", () => {
expect(component.dateFilter).toBeUndefined();
expect(component.dateMask).toBeUndefined();
expect(component.endDate).toBeUndefined();
expect(component.endDateLabel).toBeDefined();
expect(component.endDateLabel).toEqual("STARK.DATE_RANGE_PICKER.TO");
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output, Renderer2, ViewChild, ViewEncapsulation } from "@angular/core";
import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
import moment from "moment";
import { StarkDatePickerComponent, StarkDatePickerFilter } from "../../date-picker/components/date-picker.component";
import {
StarkDatePickerComponent,
StarkDatePickerFilter,
StarkDatePickerMaskConfig
} from "../../date-picker/components/date-picker.component";
import { AbstractStarkUiComponent } from "../../../common/classes/abstract-component";
import { StarkDateRangePickerEvent } from "./date-range-picker-event.intf";

Expand Down Expand Up @@ -30,6 +34,15 @@ export class StarkDateRangePickerComponent extends AbstractStarkUiComponent impl
@Input()
public dateFilter?: StarkDatePickerFilter;

/**
* Timestamp Mask Configuration to apply on the start/end date-picker.
* If `true` is passed, the default mask config is applied: {DEFAULT_DATE_MASK_CONFIG|DEFAULT_DATE_MASK_CONFIG}
* If `false` is passed or if `dateMask` is not present, the directive is disabled.
* If a `StarkTimestampMaskConfig` is passed, it is set as the date mask config.
*/
@Input()
public dateMask: StarkDatePickerMaskConfig;

/**
* Source Date to be bound to the end datepicker model
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,59 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
</div>
<mat-checkbox [(ngModel)]="isDisabled">isDisabled</mat-checkbox>
</example-viewer>

<example-viewer
[extensions]="['HTML', 'TS']"
filesPath="date-range-picker/date-mask"
exampleTitle="SHOWCASE.DEMO.DATE_RANGE_PICKER.DEFAULT_MASK"
>
<div>
<stark-date-range-picker
rangePickerId="date-mask-range-picker"
rangePickerName="date-mask-range-picker"
[isDisabled]="isDisabledDateMask"
dateMask
[dateFilter]="customDateFilter"
[startDate]="startDate"
startDateLabel="STARK.DATE_RANGE_PICKER.FROM"
[endDate]="endDate"
endDateLabel="STARK.DATE_RANGE_PICKER.TO"
[startMinDate]="minDate"
[startMaxDate]="maxDate"
[endMinDate]="startDate || minDate"
[endMaxDate]="maxDate"
(dateRangeChanged)="onDateChanged($event)"
>
</stark-date-range-picker>
</div>
<mat-checkbox [(ngModel)]="isDisabledDateMask">isDisabled</mat-checkbox>
</example-viewer>

<example-viewer
[extensions]="['HTML', 'TS']"
filesPath="date-range-picker/custom-date-mask"
[exampleTitle]="'SHOWCASE.DEMO.DATE_RANGE_PICKER.CUSTOM_MASK' | translate: { mask: customDateMask.format }"
>
<div>
<stark-date-range-picker
rangePickerId="custom-date-mask-range-picker"
rangePickerName="custom-date-mask-range-picker"
[isDisabled]="isDisabledCustomDateMask"
[dateFilter]="customDateFilter"
[dateMask]="customDateMask"
[startDate]="startDate"
startDateLabel="STARK.DATE_RANGE_PICKER.FROM"
[endDate]="endDate"
endDateLabel="STARK.DATE_RANGE_PICKER.TO"
[startMinDate]="minDate"
[startMaxDate]="maxDate"
[endMinDate]="startDate || minDate"
[endMaxDate]="maxDate"
(dateRangeChanged)="onDateChanged($event)"
>
</stark-date-range-picker>
</div>
<mat-checkbox [(ngModel)]="isDisabledCustomDateMask">isDisabled</mat-checkbox>
</example-viewer>
</section>
<stark-reference-block [links]="referenceList"></stark-reference-block>
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Component, Inject, OnInit } from "@angular/core";
import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
import { StarkDatePickerFilter, StarkDateRangePickerEvent } from "@nationalbankbelgium/stark-ui";
import { StarkDatePickerFilter, StarkDateRangePickerEvent, StarkTimestampMaskConfig } from "@nationalbankbelgium/stark-ui";
import { ReferenceLink } from "../../../shared/components";

@Component({
Expand All @@ -9,12 +9,17 @@ import { ReferenceLink } from "../../../shared/components";
})
export class DemoDateRangePickerPageComponent implements OnInit {
public isDisabled: boolean;
public isDisabledDateMask: boolean;
public isDisabledCustomDateMask: boolean;
public startDate?: Date;
public endDate?: Date;
public minDate: Date;
public maxDate: Date;
public customDateFilter: StarkDatePickerFilter;
public referenceList: ReferenceLink[];
public customDateMask: StarkTimestampMaskConfig = {
format: "DD-MM-YYYY"
};

public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<div>
<stark-date-range-picker
rangePickerId="custom-date-mask-range-picker"
rangePickerName="custom-date-mask-range-picker"
[isDisabled]="isDisabled"
[dateFilter]="customDateFilter"
[dateMask]="customDateMask"
[startDate]="startDate"
startDateLabel="From"
[startMinDate]="minDate"
[startMaxDate]="maxDate"
[endDate]="endDate"
endDateLabel="To"
[endMinDate]="startDate || minDate"
[endMaxDate]="maxDate"
(dateRangeChanged)="onDateChanged($event)"
>
</stark-date-range-picker>
</div>
<mat-checkbox [(ngModel)]="isDisabled">isDisabled</mat-checkbox>
39 changes: 39 additions & 0 deletions showcase/src/assets/examples/date-range-picker/custom-date-mask.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { Component, Inject, OnInit } from "@angular/core";
import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
import { StarkDatePickerFilter, StarkTimestampMaskConfig } from "@nationalbankbelgium/stark-ui";

@Component({
selector: "demo-date-range-picker",
templateUrl: "./demo-date-range-picker.component.html"
})
export class DemoDateRangePickerComponent implements OnInit {
public isDisabled: boolean;
public startDate: Date;
public endDate: Date;
public minDate: Date;
public maxDate: Date;
public customDateFilter: StarkDatePickerFilter;
public customDateMask: StarkTimestampMaskConfig = {
format: "DD-MM-YYYY"
};

public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}

public ngOnInit(): void {
this.startDate = new Date();
this.endDate = new Date();
this.endDate.setMonth(this.endDate.getMonth() + 1);
this.minDate = new Date();
this.maxDate = new Date();
this.maxDate.setMonth(this.maxDate.getMonth() + 6);

this.customDateFilter = (date: Date): boolean => {
const day: number = date.getDay();
return day !== 0;
};
}

public onDateChanged(event: Object): void {
this.logger.debug(event);
}
}
20 changes: 20 additions & 0 deletions showcase/src/assets/examples/date-range-picker/date-mask.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<div>
<stark-date-range-picker
rangePickerId="date-mask-range-picker"
rangePickerName="date-mask-range-picker"
[isDisabled]="isDisabled"
[dateFilter]="customDateFilter"
dateMask
[startDate]="startDate"
startDateLabel="From"
[endDate]="endDate"
endDateLabel="To"
[startMinDate]="minDate"
[startMaxDate]="maxDate"
[endMinDate]="startDate || minDate"
[endMaxDate]="maxDate"
(dateRangeChanged)="onDateChanged($event)"
>
</stark-date-range-picker>
<mat-checkbox [(ngModel)]="isDisabled">isDisabled</mat-checkbox>
</div>
36 changes: 36 additions & 0 deletions showcase/src/assets/examples/date-range-picker/date-mask.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Component, Inject, OnInit } from "@angular/core";
import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
import { StarkDatePickerFilter } from "@nationalbankbelgium/stark-ui";

@Component({
selector: "demo-date-range-picker",
templateUrl: "./demo-date-range-picker.component.html"
})
export class DemoDateRangePickerComponent implements OnInit {
public isDisabled: boolean;
public startDate: Date;
public endDate: Date;
public minDate: Date;
public maxDate: Date;
public customDateFilter: StarkDatePickerFilter;

public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}

public ngOnInit(): void {
this.startDate = new Date();
this.endDate = new Date();
this.endDate.setMonth(this.endDate.getMonth() + 1);
this.minDate = new Date();
this.maxDate = new Date();
this.maxDate.setMonth(this.maxDate.getMonth() + 6);

this.customDateFilter = (date: Date): boolean => {
const day: number = date.getDay();
return day !== 0;
};
}

public onDateChanged(event: Object): void {
this.logger.debug(event);
}
}
2 changes: 1 addition & 1 deletion showcase/src/assets/examples/date-range-picker/full.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
[startMaxDate]="maxDate"
[endDate]="endDate"
endDateLabel="To"
[endMinDate]="minDate"
[endMinDate]="startDate || minDate"
[endMaxDate]="maxDate"
(dateRangeChanged)="onDateChanged($event)"
>
Expand Down
1 change: 1 addition & 0 deletions showcase/src/assets/examples/date-range-picker/full.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { StarkDatePickerFilter } from "@nationalbankbelgium/stark-ui";
templateUrl: "./demo-date-range-picker.component.html"
})
export class DemoDateRangePickerComponent implements OnInit {
public isDisabled: boolean;
public startDate: Date;
public endDate: Date;
public minDate: Date;
Expand Down
2 changes: 2 additions & 0 deletions showcase/src/assets/translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@
"TITLE": "Date picker"
},
"DATE_RANGE_PICKER": {
"CUSTOM_MASK": "Date range picker - Custom date mask ({{ mask }})",
"DEFAULT_MASK": "Date range picker - Default date mask",
"TITLE": "Date range picker"
},
"DIALOGS": {
Expand Down
2 changes: 2 additions & 0 deletions showcase/src/assets/translations/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@
"TITLE": "Date picker"
},
"DATE_RANGE_PICKER": {
"CUSTOM_MASK": "Date range picker - Masque de date personnalisé ({{ mask }})",
"DEFAULT_MASK": "Date range picker - Masque de date par défaut",
"TITLE": "Date range picker"
},
"DIALOGS": {
Expand Down
2 changes: 2 additions & 0 deletions showcase/src/assets/translations/nl.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@
"TITLE": "Date picker"
},
"DATE_RANGE_PICKER": {
"CUSTOM_MASK": "Date range picker - Aangepast datummasker ({{ mask }})",
"DEFAULT_MASK": "Date range picker - Standaard datummasker",
"TITLE": "Date range picker"
},
"DIALOGS": {
Expand Down

0 comments on commit 0403dea

Please sign in to comment.