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] migrated adfMomentDate Pipe to date-fns equivalent

Browse Source
This commit is contained in:
SheenaMalhotra182
2023-10-04 01:15:31 +05:30
parent 43242b1185
commit ef587f576b
17 changed files with 446 additions and 132 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
+4 -4
View File
@@ -1,11 +1,11 @@
<div class="{{field.className}}" id="data-widget" [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-left-label-input-container]="field.leftLabels">
<div *ngIf="field.leftLabels">
<label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk"
<label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }} ({{dateFormatTranslationService.convertDateFnsToMomentFormat(field.dateDisplayFormat)}})<span class="adf-asterisk"
*ngIf="isRequired()">*</span></label>
</div>
<div>
<mat-form-field class="adf-date-widget" [class.adf-left-label-input-datepicker]="field.leftLabels" [hideRequiredMarker]="true">
<label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk"
<label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">{{field.name | translate }} ({{dateFormatTranslationService.convertDateFnsToMomentFormat(field.dateDisplayFormat)}})<span class="adf-asterisk"
*ngIf="isRequired()">*</span></label>
<input matInput
[id]="field.id"
@@ -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 | adfMomentDate: field.dateDisplayFormat" [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 | adfMomentDate: field.dateDisplayFormat"
[value]="field.value | adfDate: field.dateDisplayFormat"
[min]="minDate"
[max]="maxDate"
[disabled]="field.readOnly"
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts
+18 -19
View File
@@ -18,11 +18,11 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DateCloudWidgetComponent } from './date-cloud.widget';
import { FormFieldModel, FormModel, FormFieldTypes } from '@alfresco/adf-core';
import moment from 'moment';
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
import { By } from '@angular/platform-browser';
import { addDays, format, subDays } from 'date-fns';
describe('DateWidgetComponent', () => {
@@ -52,8 +52,8 @@ describe('DateWidgetComponent', () => {
widget.ngOnInit();
const expected = moment(minValue, DATE_FORMAT_CLOUD);
expect(widget.minDate.isSame(expected)).toBeTruthy();
const expected = format(new Date(minValue), DATE_FORMAT_CLOUD);
expect(widget.minDate).toEqual(expected);
});
it('should date field be present', () => {
@@ -75,8 +75,8 @@ describe('DateWidgetComponent', () => {
});
widget.ngOnInit();
const expected = moment(maxValue, DATE_FORMAT_CLOUD);
expect(widget.maxDate.isSame(expected)).toBeTruthy();
const expected = format(new Date(maxValue), DATE_FORMAT_CLOUD);
expect(widget.maxDate).toEqual(expected);
});
it('should eval visibility on date changed', () => {
@@ -91,8 +91,8 @@ describe('DateWidgetComponent', () => {
});
widget.field = field;
const todayDate = moment().format(DATE_FORMAT_CLOUD);
widget.onDateChanged({ value: todayDate });
const todayDate = new Date();
widget.onDateChanged({ value: format(todayDate, DATE_FORMAT_CLOUD) });
expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
});
@@ -293,8 +293,8 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const todayDate = moment().format(DATE_FORMAT_CLOUD);
const expected = moment(todayDate).subtract(widget.field.minDateRangeValue, 'days');
const todayDate = new Date();
const expected = format(subDays(todayDate, widget.field.minDateRangeValue), DATE_FORMAT_CLOUD);
expect(widget.minDate).toEqual(expected);
});
@@ -343,8 +343,8 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const todayDate = moment().format(DATE_FORMAT_CLOUD);
const expected = moment(todayDate).add(widget.field.maxDateRangeValue, 'days');
const todayDate = new Date();
const expected = format(addDays(todayDate, widget.field.maxDateRangeValue), DATE_FORMAT_CLOUD);
expect(widget.maxDate).toEqual(expected);
});
@@ -392,7 +392,6 @@ describe('DateWidgetComponent', () => {
describe('check date validation by dynamic date ranges', () => {
it('should minValue be equal to today date minus minDateRangeValue', async () => {
spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22');
widget.field = new FormFieldModel(null, {
dynamicDateRangeSelection: true,
maxDateRangeValue: null,
@@ -404,7 +403,8 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expectedMinValueString = '2022-07-21';
const currentDate = new Date();
const expectedMinValueString = format(subDays(currentDate, 1), DATE_FORMAT_CLOUD);
expect(widget.field.minValue).toEqual(expectedMinValueString);
expect(widget.maxDate).toBeUndefined();
@@ -412,7 +412,6 @@ describe('DateWidgetComponent', () => {
});
it('should maxValue be equal to today date plus maxDateRangeValue', async () => {
spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22');
widget.field = new FormFieldModel(null, {
dynamicDateRangeSelection: true,
maxDateRangeValue: 8,
@@ -424,7 +423,8 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expectedMaxValueString = '2022-07-30';
const currentDate = new Date();
const expectedMaxValueString = format(addDays(currentDate, 8), DATE_FORMAT_CLOUD);
expect(widget.field.maxValue).toEqual(expectedMaxValueString);
expect(widget.minDate).toBeUndefined();
@@ -432,7 +432,6 @@ describe('DateWidgetComponent', () => {
});
it('should maxValue and minValue be null if maxDateRangeValue and minDateRangeValue are null', async () => {
spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22');
widget.field = new FormFieldModel(null, {
dynamicDateRangeSelection: true,
maxDateRangeValue: null,
@@ -451,7 +450,6 @@ describe('DateWidgetComponent', () => {
});
it('should maxValue and minValue not be null if maxDateRangeVale and minDateRangeValue are not null', async () => {
spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22');
widget.field = new FormFieldModel(null, {
dynamicDateRangeSelection: true,
maxDateRangeValue: 8,
@@ -463,8 +461,9 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expectedMaxValueString = '2022-07-30';
const expectedMinValueString = '2022-07-12';
const currentDate = new Date();
const expectedMaxValueString = format(addDays(currentDate, 8), DATE_FORMAT_CLOUD);
const expectedMinValueString = format(subDays(currentDate, 10), DATE_FORMAT_CLOUD);
expect(widget.field.maxValue).toEqual(expectedMaxValueString);
expect(widget.field.minValue).toEqual(expectedMinValueString);
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts
+26 -28
View File
@@ -17,22 +17,23 @@
/* eslint-disable @angular-eslint/component-selector */
import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import moment, { Moment } from 'moment';
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 {
MOMENT_DATE_FORMATS, MomentDateAdapter, WidgetComponent,
UserPreferencesService, UserPreferenceValues, FormService
WidgetComponent,
UserPreferencesService, UserPreferenceValues, FormService, DateFormatTranslationService, DateFnsUtils
} from '@alfresco/adf-core';
import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
import { addDays, isValid, subDays } from 'date-fns';
@Component({
selector: 'date-widget',
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter },
{ provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }],
{ provide: DateAdapter, useClass: DateFnsAdapter },
{ provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS }],
templateUrl: './date-cloud.widget.html',
styleUrls: ['./date-cloud.widget.scss'],
host: {
@@ -51,14 +52,16 @@ import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
typeId = 'DateCloudWidgetComponent';
minDate: Moment;
maxDate: Moment;
minDate: string;
maxDate: string;
private onDestroy$ = new Subject<boolean>();
constructor(public formService: FormService,
private dateAdapter: DateAdapter<Moment>,
private userPreferencesService: UserPreferencesService) {
private dateAdapter: DateAdapter<DateFnsAdapter>,
private userPreferencesService: UserPreferencesService,
@Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats,
protected dateFormatTranslationService: DateFormatTranslationService) {
super(formService);
}
@@ -66,47 +69,42 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
this.userPreferencesService
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe(locale => this.dateAdapter.setLocale(locale));
.subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale)));
const momentDateAdapter = this.dateAdapter as MomentDateAdapter;
momentDateAdapter.overrideDisplayFormat = this.field.dateDisplayFormat;
this.dateFormatConfig.display.dateInput = this.field.dateDisplayFormat;
if (this.field) {
if (this.field.dynamicDateRangeSelection) {
const today = this.getTodaysFormattedDate();
const today = new Date();
if (Number.isInteger(this.field.minDateRangeValue)) {
this.minDate = moment(today).subtract(this.field.minDateRangeValue, 'days');
this.field.minValue = this.minDate.format(DATE_FORMAT_CLOUD);
this.minDate = this.dateFormatTranslationService.format(subDays(today, this.field.minDateRangeValue), DATE_FORMAT_CLOUD);
this.field.minValue = this.minDate;
}
if (Number.isInteger(this.field.maxDateRangeValue)) {
this.maxDate = moment(today).add(this.field.maxDateRangeValue, 'days');
this.field.maxValue = this.maxDate.format(DATE_FORMAT_CLOUD);
this.maxDate = this.dateFormatTranslationService.format(addDays(today, this.field.maxDateRangeValue), DATE_FORMAT_CLOUD);
this.field.maxValue = this.maxDate;
}
} else {
if (this.field.minValue) {
this.minDate = moment(this.field.minValue, DATE_FORMAT_CLOUD);
this.minDate = this.dateFormatTranslationService.format(new Date(this.field.minValue), DATE_FORMAT_CLOUD);
}
if (this.field.maxValue) {
this.maxDate = moment(this.field.maxValue, DATE_FORMAT_CLOUD);
this.maxDate = this.dateFormatTranslationService.format(new Date(this.field.maxValue), DATE_FORMAT_CLOUD);
}
}
}
}
getTodaysFormattedDate() {
return moment().format(DATE_FORMAT_CLOUD);
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
onDateChanged(newDateValue) {
const date = moment(newDateValue, this.field.dateDisplayFormat, true);
if (date.isValid()) {
this.field.value = date.format(this.field.dateDisplayFormat);
const date = new Date(newDateValue);
if (isValid(date)) {
this.field.value = this.dateFormatTranslationService.format(date, this.field.dateDisplayFormat);
} else {
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.
*/
export const DATE_FORMAT_CLOUD = 'YYYY-MM-DD';
export const DATE_FORMAT_CLOUD = 'yyyy-MM-dd';