inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5857] made dateFormat configurable for DateCloudWidget

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
+2 -2
View File
@@ -22,11 +22,11 @@
</mat-form-field> </mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget> <error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></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 <input
type="hidden" type="hidden"
[matDatepicker]="datePicker" [matDatepicker]="datePicker"
[value]="field.value | adfDate: DATE_FORMAT" [value]="field.value | adfDate: field.dateDisplayFormat"
[min]="minDate" [min]="minDate"
[max]="maxDate" [max]="maxDate"
[disabled]="field.readOnly" [disabled]="field.readOnly"
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts
+10 -9
View File
@@ -22,6 +22,7 @@ import { ProcessServiceCloudTestingModule } from '../../../../testing/process-se
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { addDays, format, subDays } from 'date-fns'; import { addDays, format, subDays } from 'date-fns';
import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
describe('DateWidgetComponent', () => { describe('DateWidgetComponent', () => {
@@ -51,7 +52,7 @@ describe('DateWidgetComponent', () => {
widget.ngOnInit(); 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); expect(widget.minDate).toEqual(expected);
}); });
@@ -74,7 +75,7 @@ describe('DateWidgetComponent', () => {
}); });
widget.ngOnInit(); 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); expect(widget.maxDate).toEqual(expected);
}); });
@@ -91,7 +92,7 @@ describe('DateWidgetComponent', () => {
widget.field = field; widget.field = field;
const todayDate = new Date(); 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); expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
}); });
@@ -293,7 +294,7 @@ describe('DateWidgetComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
const todayDate = new Date(); 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); expect(widget.minDate).toEqual(expected);
}); });
@@ -343,7 +344,7 @@ describe('DateWidgetComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
const todayDate = new Date(); 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); expect(widget.maxDate).toEqual(expected);
}); });
@@ -403,7 +404,7 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); 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.field.minValue).toEqual(expectedMinValueString);
expect(widget.maxDate).toBeUndefined(); expect(widget.maxDate).toBeUndefined();
@@ -423,7 +424,7 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); 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.field.maxValue).toEqual(expectedMaxValueString);
expect(widget.minDate).toBeUndefined(); expect(widget.minDate).toBeUndefined();
@@ -462,8 +463,8 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); 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);
const expectedMinValueString = format(new Date('2022-07-12'), widget.DATE_FORMAT); const expectedMinValueString = format(new Date('2022-07-12'), DATE_FORMAT_CLOUD);
expect(widget.field.maxValue).toEqual(expectedMaxValueString); expect(widget.field.maxValue).toEqual(expectedMaxValueString);
expect(widget.field.minValue).toEqual(expectedMinValueString); expect(widget.field.minValue).toEqual(expectedMinValueString);
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts
+12 -8
View File
@@ -17,13 +17,14 @@
/* eslint-disable @angular-eslint/component-selector */ /* eslint-disable @angular-eslint/component-selector */
import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core'; import { Component, OnInit, ViewEncapsulation, OnDestroy, Inject } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; import { DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from '@angular/material/core';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { WidgetComponent, UserPreferencesService, UserPreferenceValues, FormService, DateFnsUtils } from '@alfresco/adf-core'; import { WidgetComponent, UserPreferencesService, UserPreferenceValues, FormService, DateFnsUtils } from '@alfresco/adf-core';
import { addDays, format, isValid, subDays } from 'date-fns'; import { addDays, format, isValid, subDays } from 'date-fns';
import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter'; import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
@Component({ @Component({
selector: 'date-widget', selector: 'date-widget',
@@ -57,7 +58,8 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
constructor(public formService: FormService, constructor(public formService: FormService,
private dateAdapter: DateAdapter<DateFnsAdapter>, private dateAdapter: DateAdapter<DateFnsAdapter>,
private userPreferencesService: UserPreferencesService) { private userPreferencesService: UserPreferencesService,
@Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) {
super(formService); super(formService);
} }
@@ -67,25 +69,27 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
.pipe(takeUntil(this.onDestroy$)) .pipe(takeUntil(this.onDestroy$))
.subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale))); .subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale)));
this.dateFormatConfig.display.dateInput = this.field.dateDisplayFormat;
if (this.field) { if (this.field) {
if (this.field.dynamicDateRangeSelection) { if (this.field.dynamicDateRangeSelection) {
const today = this.getTodaysFormattedDate(); const today = this.getTodaysFormattedDate();
if (Number.isInteger(this.field.minDateRangeValue)) { 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; this.field.minValue = this.minDate;
} }
if (Number.isInteger(this.field.maxDateRangeValue)) { 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; this.field.maxValue = this.maxDate;
} }
} else { } else {
if (this.field.minValue) { 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) { 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) { onDateChanged(newDateValue) {
const date = new Date(newDateValue); const date = new Date(newDateValue);
if (isValid(date)) { if (isValid(date)) {
this.field.value = format(date, this.DATE_FORMAT); this.field.value = format(date, this.field.dateDisplayFormat);
} else { } else {
this.field.value = newDateValue; this.field.value = newDateValue;
} }
lib/process-services-cloud/src/lib/models/date-format-cloud.model.ts
+1 -1
View File
@@ -15,4 +15,4 @@
* limitations under the License. * limitations under the License.
*/ */
export const DATE_FORMAT_CLOUD = 'YYYY-MM-DD'; export const DATE_FORMAT_CLOUD = 'yyyy-MM-dd';