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

Browse Source
This commit is contained in:
SheenaMalhotra182
2023-09-20 15:44:58 +05:30
parent 16ab6e3306
commit 70cf1ead3c
14 changed files with 212 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/form/components/form-renderer.component.spec.ts
+10 -5
View File
@@ -48,6 +48,7 @@ import { TextWidgetComponent } from './widgets';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { FormRulesManager } from '../models/form-rules.model';
import { format } from 'date-fns';
const typeIntoInput = (targetInput: HTMLInputElement, message: string) => {
expect(targetInput).toBeTruthy('Expected input to set to be valid and not null');
@@ -112,7 +113,7 @@ describe('Form Renderer Component', () => {
fixture.destroy();
});
describe('Display Date Widget ', () => {
describe('Display Date Widget ', async() => {
it('Should be able to see a widget when the visibility condition refers to another fields with specific date', async () => {
formRendererComponent.formDefinition = formService.parseForm(formDateVisibility.formRepresentation.formDefinition);
fixture.detectChanges();
@@ -122,11 +123,13 @@ describe('Form Renderer Component', () => {
let displayTextElementContainer: HTMLInputElement = fixture.nativeElement.querySelector('#field-Text0pqd1u-container');
expectElementToBeHidden(displayTextElementContainer);
typeIntoDate(inputDateTestOne, { srcElement: { value: '2019-11-19' } });
let formattedDate = format(new Date('2019-11-19'), 'd-M-yyyy');
typeIntoDate(inputDateTestOne, { srcElement: { value: formattedDate } });
fixture.detectChanges();
await fixture.whenStable();
displayTextElementContainer = fixture.nativeElement.querySelector('#field-Text0pqd1u-container');
displayTextElementContainer = fixture.nativeElement.querySelector('#field-Text0uyqd3-container');
expectElementToBeVisible(displayTextElementContainer);
});
@@ -139,11 +142,13 @@ describe('Form Renderer Component', () => {
let displayTextElementContainer: HTMLDivElement = fixture.nativeElement.querySelector('#field-Text0uyqd3-container');
expectElementToBeVisible(displayTextElementContainer);
typeIntoDate(inputDateTestOne, { srcElement: { value: '2019-11-19' } });
let formattedDate = format(new Date('2019-11-19'), 'd-M-yyyy');
typeIntoDate(inputDateTestOne, { srcElement: { value: formattedDate } });
fixture.detectChanges();
await fixture.whenStable();
displayTextElementContainer = fixture.nativeElement.querySelector('#field-Text0uyqd3-container');
displayTextElementContainer = fixture.nativeElement.querySelector('#field-Text0pqd1u-container');
expectElementToBeHidden(displayTextElementContainer);
});
lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts
+3 -3
View File
@@ -1505,7 +1505,7 @@ export const formDateVisibility = {
existingColspan: 1,
maxColspan: 2
},
dateDisplayFormat: 'YYYY-MM-DD'
dateDisplayFormat: 'd-M-yyyy'
}
],
2: [
@@ -1525,7 +1525,7 @@ export const formDateVisibility = {
leftType: 'field',
leftValue: 'Date0hwq20',
operator: '==',
rightValue: '2019-11-19',
rightValue: '19-11-2019',
rightType: 'value',
nextConditionOperator: '',
nextCondition: null
@@ -1562,7 +1562,7 @@ export const formDateVisibility = {
leftType: 'field',
leftValue: 'Date0hwq20',
operator: '!=',
rightValue: '2019-11-19',
rightValue: '19-11-2019',
rightType: 'value',
nextConditionOperator: '',
nextCondition: null
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
+1 -1
View File
@@ -25,7 +25,7 @@
<input
type="hidden"
[matDatetimepicker]="datetimePicker"
[value]="field.value | adfMomentDate: field.dateDisplayFormat"
[value]="field.value | adfDate: DATE_TIME_FORMAT"
[min]="minDate"
[max]="maxDate"
[disabled]="field.readOnly"
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts
+8 -8
View File
@@ -16,7 +16,6 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import moment from 'moment';
import { FormFieldModel } from '../core/form-field.model';
import { FormModel } from '../core/form.model';
import { DateTimeWidgetComponent } from './date-time.widget';
@@ -25,6 +24,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FormFieldTypes } from '../core/form-field-types';
import { By } from '@angular/platform-browser';
import { isSameDay, parse } from 'date-fns';
describe('DateTimeWidgetComponent', () => {
@@ -52,7 +52,7 @@ describe('DateTimeWidgetComponent', () => {
});
it('should setup min value for date picker', () => {
const minValue = '1982-03-13T10:00:000Z';
const minValue = '7-8-2023 02:45 PM';
widget.field = new FormFieldModel(null, {
id: 'date-id',
name: 'date-name',
@@ -62,8 +62,8 @@ describe('DateTimeWidgetComponent', () => {
fixture.detectChanges();
const expected = moment(minValue, 'YYYY-MM-DDTHH:mm:ssZ');
expect(widget.minDate.isSame(expected)).toBeTruthy();
const expected = parse(minValue, widget.DATE_TIME_FORMAT, new Date());
expect(isSameDay(widget.minDate, expected)).toBeTruthy();
});
it('should date field be present', () => {
@@ -79,14 +79,14 @@ describe('DateTimeWidgetComponent', () => {
});
it('should setup max value for date picker', () => {
const maxValue = '1982-03-13T10:00:000Z';
const maxValue = '20-9-2023 02:45 PM';
widget.field = new FormFieldModel(null, {
maxValue
});
fixture.detectChanges();
const expected = moment(maxValue, 'YYYY-MM-DDTHH:mm:ssZ');
expect(widget.maxDate.isSame(expected)).toBeTruthy();
const expected = parse(maxValue, widget.DATE_TIME_FORMAT, new Date());
expect(isSameDay(widget.maxDate, expected)).toBeTruthy();
});
it('should eval visibility on date changed', () => {
@@ -101,7 +101,7 @@ describe('DateTimeWidgetComponent', () => {
});
widget.field = field;
const mockDate = moment('1982-03-13T10:00:000Z', 'YYYY-MM-DDTHH:mm:ssZ');
const mockDate = parse('1982-03-13T10:00:000Z', widget.DATE_TIME_FORMAT, new Date());
widget.onDateChanged(mockDate);
expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts
+12 -12
View File
@@ -21,7 +21,6 @@ import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { DatetimeAdapter, MAT_DATETIME_FORMATS } from '@mat-datetimepicker/core';
import { MomentDatetimeAdapter, MAT_MOMENT_DATETIME_FORMATS } from '@mat-datetimepicker/moment';
import moment, { Moment } from 'moment';
import { UserPreferencesService, UserPreferenceValues } from '../../../../common/services/user-preferences.service';
import { MomentDateAdapter } from '../../../../common/utils/moment-date-adapter';
import { MOMENT_DATE_FORMATS } from '../../../../common/utils/moment-date-formats.model';
@@ -29,6 +28,8 @@ import { FormService } from '../../../services/form.service';
import { WidgetComponent } from '../widget.component';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { DateFnsAdapter } from '@angular/material-date-fns-adapter';
import { format, isValid, parse } from 'date-fns';
@Component({
providers: [
@@ -44,13 +45,15 @@ import { takeUntil } from 'rxjs/operators';
})
export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
minDate: Moment;
maxDate: Moment;
DATE_TIME_FORMAT = 'd-M-yyyy hh:mm a';
minDate: Date;
maxDate: Date;
private onDestroy$ = new Subject<boolean>();
constructor(public formService: FormService,
private dateAdapter: DateAdapter<Moment>,
private dateAdapter: DateAdapter<DateFnsAdapter>,
private userPreferencesService: UserPreferencesService) {
super(formService);
}
@@ -61,16 +64,13 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit,
.pipe(takeUntil(this.onDestroy$))
.subscribe(locale => this.dateAdapter.setLocale(locale));
const momentDateAdapter = this.dateAdapter as MomentDateAdapter;
momentDateAdapter.overrideDisplayFormat = this.field.dateDisplayFormat;
if (this.field) {
if (this.field.minValue) {
this.minDate = moment.utc(this.field.minValue, 'YYYY-MM-DDTHH:mm:ssZ');
this.minDate = parse(this.field.minValue, this.DATE_TIME_FORMAT, new Date());
}
if (this.field.maxValue) {
this.maxDate = moment.utc(this.field.maxValue, 'YYYY-MM-DDTHH:mm:ssZ');
this.maxDate = parse(this.field.maxValue, this.DATE_TIME_FORMAT, new Date());
}
}
}
@@ -81,9 +81,9 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit,
}
onDateChanged(newDateValue) {
const date = moment(newDateValue, this.field.dateDisplayFormat, true);
if (date.isValid()) {
this.field.value = moment(date).utc().local().format(this.field.dateDisplayFormat);
const date = new Date(newDateValue);
if (isValid(date)) {
this.field.value = format(date, this.DATE_TIME_FORMAT);
} else {
this.field.value = newDateValue;
}
lib/core/src/lib/form/components/widgets/date/date.widget.html
+2 -2
View File
@@ -14,11 +14,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: DATE_FORMAT" [disabled]="field.readOnly"></mat-datepicker>
<input
type="hidden"
[matDatepicker]="datePicker"
[value]="field.value | adfMomentDate: field.dateDisplayFormat"
[value]="field.value | adfDate: DATE_FORMAT"
[min]="minDate"
[max]="maxDate"
[disabled]="field.readOnly"
lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts
+8 -6
View File
@@ -16,13 +16,13 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import moment from 'moment';
import { FormFieldModel } from '../core/form-field.model';
import { FormModel } from '../core/form.model';
import { DateWidgetComponent } from './date.widget';
import { CoreTestingModule } from '../../../../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { FormFieldTypes } from '../core/form-field-types';
import { isSameDay, parse } from 'date-fns';
describe('DateWidgetComponent', () => {
@@ -63,8 +63,9 @@ describe('DateWidgetComponent', () => {
widget.ngOnInit();
const expected = moment(minValue, widget.field.dateDisplayFormat);
expect(widget.minDate.isSame(expected)).toBeTruthy();
const expected = parse(minValue, widget.DATE_FORMAT, new Date());
const widgetDate = parse(widget.minDate, widget.DATE_FORMAT, new Date());
expect(isSameDay(widgetDate, expected)).toBeTruthy();
});
it('should date field be present', () => {
@@ -86,8 +87,9 @@ describe('DateWidgetComponent', () => {
});
widget.ngOnInit();
const expected = moment(maxValue, widget.field.dateDisplayFormat);
expect(widget.maxDate.isSame(expected)).toBeTruthy();
const expected = parse(maxValue, widget.DATE_FORMAT, new Date());
const widgetDate = parse(widget.maxDate, widget.DATE_FORMAT, new Date());
expect(isSameDay(widgetDate, expected)).toBeTruthy();
});
it('should eval visibility on date changed', () => {
@@ -101,7 +103,7 @@ describe('DateWidgetComponent', () => {
readOnly: 'false'
});
widget.field = field;
widget.onDateChanged({ value: moment('12/12/2012', widget.field.dateDisplayFormat) });
widget.onDateChanged({ value: parse('12/12/2012', widget.DATE_FORMAT, new Date()) });
expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
});
lib/core/src/lib/form/components/widgets/date/date.widget.ts
+15 -23
View File
@@ -18,21 +18,21 @@
/* eslint-disable @angular-eslint/component-selector */
import { UserPreferencesService, UserPreferenceValues } from '../../../../common/services/user-preferences.service';
import { MomentDateAdapter } from '../../../../common/utils/moment-date-adapter';
import { MOMENT_DATE_FORMATS } from '../../../../common/utils/moment-date-formats.model';
import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import moment, { Moment } from 'moment';
import { FormService } from '../../../services/form.service';
import { WidgetComponent } from '../widget.component';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { format, isValid } from 'date-fns';
import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
import { DateFnsUtils } from '../../../../../..';
@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.widget.html',
styleUrls: ['./date.widget.scss'],
host: {
@@ -50,15 +50,15 @@ import { takeUntil } from 'rxjs/operators';
})
export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
DATE_FORMAT = 'DD-MM-YYYY';
DATE_FORMAT = 'd-M-yyyy';
minDate: Moment;
maxDate: Moment;
minDate: string;
maxDate: string;
private onDestroy$ = new Subject<boolean>();
constructor(public formService: FormService,
private dateAdapter: DateAdapter<Moment>,
private dateAdapter: DateAdapter<DateFnsAdapter>,
private userPreferencesService: UserPreferencesService) {
super(formService);
}
@@ -67,19 +67,11 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe
this.userPreferencesService
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe(locale => this.dateAdapter.setLocale(locale));
const momentDateAdapter = this.dateAdapter as MomentDateAdapter;
momentDateAdapter.overrideDisplayFormat = this.field.dateDisplayFormat;
.subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale)));
if (this.field) {
if (this.field.minValue) {
this.minDate = moment(this.field.minValue, this.DATE_FORMAT);
}
if (this.field.maxValue) {
this.maxDate = moment(this.field.maxValue, this.DATE_FORMAT);
}
this.minDate = isValid(this.field.minValue) ? format(new Date(this.field.minValue), this.DATE_FORMAT) : this.field.minValue;
this.maxDate = isValid(this.field.maxValue) ? format(new Date(this.field.maxValue), this.DATE_FORMAT) : this.field.maxValue;
}
}
@@ -89,9 +81,9 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe
}
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 = format(date, this.DATE_FORMAT);
} else {
this.field.value = newDateValue;
}
lib/core/src/lib/pipes/adf-date.pipe.spec.ts
+75
View File
@@ -0,0 +1,75 @@
/*!
* @license
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { TestBed } from '@angular/core/testing';
import { CoreTestingModule } from '../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { ADFDatePipe } from './adf-date.pipe';
describe('DatePipe', () => {
let datePipe: ADFDatePipe;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), CoreTestingModule],
providers: [ADFDatePipe],
});
datePipe = new ADFDatePipe();
});
it('should return the formatted date string when given a valid date object', () => {
const inputDate = new Date('2023-08-14');
const dateFormat = 'dd-MM-yyyy';
const expectedOutput = '14-08-2023';
const result = datePipe.transform(inputDate, dateFormat);
expect(result).toBe(expectedOutput);
});
it('should return the input value when given an invalid date object', () => {
const inputDate = new Date('invalid');
const dateFormat = 'dd-MM-yyyy';
const expectedOutput = inputDate.toString();
const result = datePipe.transform(inputDate, dateFormat);
expect(result).toBe(expectedOutput);
});
it('should return the formatted date string when given a valid date string', () => {
const inputDate = '2023-08-14';
const dateFormat = 'dd-MM-yyyy';
const expectedOutput = '14-08-2023';
const result = datePipe.transform(inputDate, dateFormat);
expect(result).toBe(expectedOutput);
});
it('should return the input value when given an invalid date string', () => {
const inputDate = 'not_a_valid_date';
const dateFormat = 'dd-MM-yyyy';
const expectedOutput = inputDate;
const result = datePipe.transform(inputDate, dateFormat);
expect(result).toBe(expectedOutput);
});
});
lib/core/src/lib/pipes/adf-date.pipe.ts
+27
View File
@@ -0,0 +1,27 @@
/*!
* @license
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Pipe, PipeTransform } from '@angular/core';
import { format, isValid} from 'date-fns';
@Pipe({ name: 'adfDate' })
export class ADFDatePipe implements PipeTransform {
transform(value: Date | string, dateFormat: string): string {
const date = value instanceof Date ? value : new Date(value);
return isValid(date) ? format(date, dateFormat) : value.toString();
}
}
lib/core/src/lib/pipes/pipe.module.ts
+4
View File
@@ -36,6 +36,7 @@ import { MomentDateTimePipe } from './moment-datetime.pipe';
import { FilterStringPipe } from './filter-string.pipe';
import { FilterOutArrayObjectsByPropPipe } from './filter-out-every-object-by-prop.pipe';
import { DateTimePipe } from './date-time.pipe';
import { ADFDatePipe } from './adf-date.pipe';
@NgModule({
imports: [
@@ -56,6 +57,7 @@ import { DateTimePipe } from './date-time.pipe';
DecimalNumberPipe,
LocalizedRolePipe,
MomentDatePipe,
ADFDatePipe,
MomentDateTimePipe,
DateTimePipe,
FilterStringPipe,
@@ -74,6 +76,7 @@ import { DateTimePipe } from './date-time.pipe';
DecimalNumberPipe,
LocalizedRolePipe,
MomentDatePipe,
ADFDatePipe,
MomentDateTimePipe,
DateTimePipe,
FilterStringPipe,
@@ -93,6 +96,7 @@ import { DateTimePipe } from './date-time.pipe';
DecimalNumberPipe,
LocalizedRolePipe,
MomentDatePipe,
ADFDatePipe,
MomentDateTimePipe,
DateTimePipe,
FilterStringPipe,
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>
<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: DATE_FORMAT" [disabled]="field.readOnly"></mat-datepicker>
<input
type="hidden"
[matDatepicker]="datePicker"
[value]="field.value | adfMomentDate: field.dateDisplayFormat"
[value]="field.value | adfDate: DATE_FORMAT"
[min]="minDate"
[max]="maxDate"
[disabled]="field.readOnly"
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts
+23 -24
View File
@@ -18,11 +18,10 @@
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, isSameDay, subDays } from 'date-fns';
describe('DateWidgetComponent', () => {
@@ -43,7 +42,7 @@ describe('DateWidgetComponent', () => {
});
it('should setup min value for date picker', () => {
const minValue = '1982-03-13';
const minValue = '3-3-1982';
widget.field = new FormFieldModel(null, {
id: 'date-id',
name: 'date-name',
@@ -52,8 +51,8 @@ describe('DateWidgetComponent', () => {
widget.ngOnInit();
const expected = moment(minValue, DATE_FORMAT_CLOUD);
expect(widget.minDate.isSame(expected)).toBeTruthy();
const expected = format(new Date(minValue), widget.DATE_FORMAT);
expect(isSameDay(new Date(widget.minDate), new Date(expected))).toBeTruthy();
});
it('should date field be present', () => {
@@ -69,14 +68,14 @@ describe('DateWidgetComponent', () => {
});
it('should setup max value for date picker', () => {
const maxValue = '1982-03-13';
const maxValue = '3-3-1982';
widget.field = new FormFieldModel(null, {
maxValue
});
widget.ngOnInit();
const expected = moment(maxValue, DATE_FORMAT_CLOUD);
expect(widget.maxDate.isSame(expected)).toBeTruthy();
const expected = format(new Date(maxValue), widget.DATE_FORMAT);
expect(isSameDay(new Date(widget.maxDate), new Date(expected))).toBeTruthy();
});
it('should eval visibility on date changed', () => {
@@ -91,8 +90,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, widget.DATE_FORMAT) });
expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
});
@@ -293,9 +292,9 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const todayDate = moment().format(DATE_FORMAT_CLOUD);
const expected = moment(todayDate).subtract(widget.field.minDateRangeValue, 'days');
expect(widget.minDate).toEqual(expected);
const todayDate = new Date();
const expected = subDays(todayDate, widget.field.minDateRangeValue);
expect(widget.minDate).toEqual(format(expected, widget.DATE_FORMAT));
});
it('should min date and max date be undefined if dynamic min and max date are not set', async () => {
@@ -343,9 +342,9 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const todayDate = moment().format(DATE_FORMAT_CLOUD);
const expected = moment(todayDate).add(widget.field.maxDateRangeValue, 'days');
expect(widget.maxDate).toEqual(expected);
const todayDate = new Date();
const expected = addDays(todayDate, widget.field.maxDateRangeValue);
expect(widget.maxDate).toEqual(format(expected, widget.DATE_FORMAT));
});
it('should maxDate and minDate be undefined if minDateRangeValue and maxDateRangeValue are null', async () => {
@@ -392,7 +391,7 @@ 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');
spyOn(widget, 'getTodaysFormattedDate').and.returnValue(new Date('2022-07-22'));
widget.field = new FormFieldModel(null, {
dynamicDateRangeSelection: true,
maxDateRangeValue: null,
@@ -404,7 +403,7 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expectedMinValueString = '2022-07-21';
const expectedMinValueString = format(new Date('2022-07-21'), widget.DATE_FORMAT);
expect(widget.field.minValue).toEqual(expectedMinValueString);
expect(widget.maxDate).toBeUndefined();
@@ -412,7 +411,7 @@ describe('DateWidgetComponent', () => {
});
it('should maxValue be equal to today date plus maxDateRangeValue', async () => {
spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22');
spyOn(widget, 'getTodaysFormattedDate').and.returnValue(new Date('2022-07-22'));
widget.field = new FormFieldModel(null, {
dynamicDateRangeSelection: true,
maxDateRangeValue: 8,
@@ -424,7 +423,7 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expectedMaxValueString = '2022-07-30';
const expectedMaxValueString = format(new Date('2022-07-30'), widget.DATE_FORMAT);
expect(widget.field.maxValue).toEqual(expectedMaxValueString);
expect(widget.minDate).toBeUndefined();
@@ -432,7 +431,7 @@ describe('DateWidgetComponent', () => {
});
it('should maxValue and minValue be null if maxDateRangeValue and minDateRangeValue are null', async () => {
spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22');
spyOn(widget, 'getTodaysFormattedDate').and.returnValue(new Date('22-07-2022'));
widget.field = new FormFieldModel(null, {
dynamicDateRangeSelection: true,
maxDateRangeValue: null,
@@ -451,7 +450,7 @@ 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');
spyOn(widget, 'getTodaysFormattedDate').and.returnValue(new Date('2022-07-22'));
widget.field = new FormFieldModel(null, {
dynamicDateRangeSelection: true,
maxDateRangeValue: 8,
@@ -463,8 +462,8 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expectedMaxValueString = '2022-07-30';
const expectedMinValueString = '2022-07-12';
const expectedMaxValueString = format(new Date('2022-07-30'), widget.DATE_FORMAT);
const expectedMinValueString = format(new Date('2022-07-12'), widget.DATE_FORMAT);
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
+22 -25
View File
@@ -19,20 +19,17 @@
import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import moment, { Moment } from 'moment';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import {
MOMENT_DATE_FORMATS, MomentDateAdapter, WidgetComponent,
UserPreferencesService, UserPreferenceValues, FormService
} from '@alfresco/adf-core';
import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
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';
@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,13 +48,15 @@ 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;
DATE_FORMAT = 'd-M-yyyy';
private onDestroy$ = new Subject<boolean>();
constructor(public formService: FormService,
private dateAdapter: DateAdapter<Moment>,
private dateAdapter: DateAdapter<DateFnsAdapter>,
private userPreferencesService: UserPreferencesService) {
super(formService);
}
@@ -66,36 +65,34 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
this.userPreferencesService
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe(locale => this.dateAdapter.setLocale(locale));
const momentDateAdapter = this.dateAdapter as MomentDateAdapter;
momentDateAdapter.overrideDisplayFormat = this.field.dateDisplayFormat;
.subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale)));
if (this.field) {
if (this.field.dynamicDateRangeSelection) {
const today = this.getTodaysFormattedDate();
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 = format(subDays(today, this.field.minDateRangeValue), this.DATE_FORMAT);
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 = format(addDays(today, this.field.maxDateRangeValue), this.DATE_FORMAT);
this.field.maxValue = this.maxDate;
}
} else {
if (this.field.minValue) {
this.minDate = moment(this.field.minValue, DATE_FORMAT_CLOUD);
this.minDate = format(new Date(this.field.minValue), this.DATE_FORMAT);
}
if (this.field.maxValue) {
this.maxDate = moment(this.field.maxValue, DATE_FORMAT_CLOUD);
this.maxDate = format(new Date(this.field.maxValue), this.DATE_FORMAT);
}
}
}
}
getTodaysFormattedDate() {
return moment().format(DATE_FORMAT_CLOUD);
return new Date();
}
ngOnDestroy() {
@@ -104,9 +101,9 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
}
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 = format(date, this.DATE_FORMAT);
} else {
this.field.value = newDateValue;
}