[ACS-5857] made dateFormat configurable for DateCloudWidget

This commit is contained in:
SheenaMalhotra182
2023-09-20 15:47:19 +05:30
parent b7c6faf6b3
commit 7f63cd82cf
4 changed files with 25 additions and 20 deletions
@@ -22,11 +22,11 @@
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<mat-datepicker #datePicker [touchUi]="true" [startAt]="field.value | adfDate: DATE_FORMAT" [disabled]="field.readOnly"></mat-datepicker>
<mat-datepicker #datePicker [touchUi]="true" [startAt]="field.value | adfDate: field.dateDisplayFormat" [disabled]="field.readOnly"></mat-datepicker>
<input
type="hidden"
[matDatepicker]="datePicker"
[value]="field.value | adfDate: DATE_FORMAT"
[value]="field.value | adfDate: field.dateDisplayFormat"
[min]="minDate"
[max]="maxDate"
[disabled]="field.readOnly"
@@ -22,6 +22,7 @@ import { ProcessServiceCloudTestingModule } from '../../../../testing/process-se
import { TranslateModule } from '@ngx-translate/core';
import { By } from '@angular/platform-browser';
import { addDays, format, subDays } from 'date-fns';
import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
describe('DateWidgetComponent', () => {
@@ -51,7 +52,7 @@ describe('DateWidgetComponent', () => {
widget.ngOnInit();
const expected = format(new Date(minValue), widget.DATE_FORMAT);
const expected = format(new Date(minValue), DATE_FORMAT_CLOUD);
expect(widget.minDate).toEqual(expected);
});
@@ -74,7 +75,7 @@ describe('DateWidgetComponent', () => {
});
widget.ngOnInit();
const expected = format(new Date(maxValue), widget.DATE_FORMAT);
const expected = format(new Date(maxValue), DATE_FORMAT_CLOUD);
expect(widget.maxDate).toEqual(expected);
});
@@ -91,7 +92,7 @@ describe('DateWidgetComponent', () => {
widget.field = field;
const todayDate = new Date();
widget.onDateChanged({ value: format(todayDate, widget.DATE_FORMAT) });
widget.onDateChanged({ value: format(todayDate, DATE_FORMAT_CLOUD) });
expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
});
@@ -293,7 +294,7 @@ describe('DateWidgetComponent', () => {
await fixture.whenStable();
const todayDate = new Date();
const expected = format(subDays(todayDate, widget.field.minDateRangeValue), widget.DATE_FORMAT);
const expected = format(subDays(todayDate, widget.field.minDateRangeValue), DATE_FORMAT_CLOUD);
expect(widget.minDate).toEqual(expected);
});
@@ -343,7 +344,7 @@ describe('DateWidgetComponent', () => {
await fixture.whenStable();
const todayDate = new Date();
const expected = format(addDays(todayDate, widget.field.maxDateRangeValue), widget.DATE_FORMAT);
const expected = format(addDays(todayDate, widget.field.maxDateRangeValue), DATE_FORMAT_CLOUD);
expect(widget.maxDate).toEqual(expected);
});
@@ -403,7 +404,7 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expectedMinValueString = format(new Date('2022-07-21'), widget.DATE_FORMAT);
const expectedMinValueString = format(new Date('2022-07-21'), DATE_FORMAT_CLOUD);
expect(widget.field.minValue).toEqual(expectedMinValueString);
expect(widget.maxDate).toBeUndefined();
@@ -423,7 +424,7 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expectedMaxValueString = format(new Date('2022-07-30'), widget.DATE_FORMAT);
const expectedMaxValueString = format(new Date('2022-07-30'), DATE_FORMAT_CLOUD);
expect(widget.field.maxValue).toEqual(expectedMaxValueString);
expect(widget.minDate).toBeUndefined();
@@ -462,8 +463,8 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expectedMaxValueString = format(new Date('2022-07-30'), widget.DATE_FORMAT);
const expectedMinValueString = format(new Date('2022-07-12'), widget.DATE_FORMAT);
const expectedMaxValueString = format(new Date('2022-07-30'), DATE_FORMAT_CLOUD);
const expectedMinValueString = format(new Date('2022-07-12'), DATE_FORMAT_CLOUD);
expect(widget.field.maxValue).toEqual(expectedMaxValueString);
expect(widget.field.minValue).toEqual(expectedMinValueString);
@@ -17,13 +17,14 @@
/* eslint-disable @angular-eslint/component-selector */
import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { Component, OnInit, ViewEncapsulation, OnDestroy, Inject } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from '@angular/material/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { WidgetComponent, UserPreferencesService, UserPreferenceValues, FormService, DateFnsUtils } from '@alfresco/adf-core';
import { addDays, format, isValid, subDays } from 'date-fns';
import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
@Component({
selector: 'date-widget',
@@ -57,7 +58,8 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
constructor(public formService: FormService,
private dateAdapter: DateAdapter<DateFnsAdapter>,
private userPreferencesService: UserPreferencesService) {
private userPreferencesService: UserPreferencesService,
@Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) {
super(formService);
}
@@ -67,25 +69,27 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
.pipe(takeUntil(this.onDestroy$))
.subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale)));
this.dateFormatConfig.display.dateInput = this.field.dateDisplayFormat;
if (this.field) {
if (this.field.dynamicDateRangeSelection) {
const today = this.getTodaysFormattedDate();
if (Number.isInteger(this.field.minDateRangeValue)) {
this.minDate = format(subDays(today, this.field.minDateRangeValue), this.DATE_FORMAT);
this.minDate = format(subDays(today, this.field.minDateRangeValue), DATE_FORMAT_CLOUD);
this.field.minValue = this.minDate;
}
if (Number.isInteger(this.field.maxDateRangeValue)) {
this.maxDate = format(addDays(today, this.field.maxDateRangeValue), this.DATE_FORMAT);
this.maxDate = format(addDays(today, this.field.maxDateRangeValue), DATE_FORMAT_CLOUD);
this.field.maxValue = this.maxDate;
}
} else {
if (this.field.minValue) {
this.minDate = format(new Date(this.field.minValue), this.DATE_FORMAT);
this.minDate = format(new Date(this.field.minValue), DATE_FORMAT_CLOUD);
}
if (this.field.maxValue) {
this.maxDate = format(new Date(this.field.maxValue), this.DATE_FORMAT);
this.maxDate = format(new Date(this.field.maxValue), DATE_FORMAT_CLOUD);
}
}
}
@@ -103,7 +107,7 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
onDateChanged(newDateValue) {
const date = new Date(newDateValue);
if (isValid(date)) {
this.field.value = format(date, this.DATE_FORMAT);
this.field.value = format(date, this.field.dateDisplayFormat);
} else {
this.field.value = newDateValue;
}
@@ -15,4 +15,4 @@
* limitations under the License.
*/
export const DATE_FORMAT_CLOUD = 'YYYY-MM-DD';
export const DATE_FORMAT_CLOUD = 'yyyy-MM-dd';