inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[APPS-2108] date-fns adapter for datetime pickers, many datetime parsing and validation fixes (#8992)

Browse Source 
* migrate cloud date widget to date-fns, fix test bugs

* [ci:force] update docs

* [ci:force] remove commented out code

* [APPS-2232] date cell validator, unit tests

* improved moment adapter, code cleanup

* datetime adapter, many code fixes

* code review fixes

* code cleanup

* cleanup

* fix max datetime validation, update tests

* remove e2e already covered by unit tests

* fix search date range

* remove fake demo shell e2e for search

* remove fake demo shell e2e for search page

* cleanup e2e

* migrate dynamic table to date-fns

* fix e2e formatting

* migrate protractor to unit tests

* cleanup e2e
This commit is contained in:
Denys Vuika
2023-10-15 15:58:22 +01:00
committed by GitHub
parent c637f3eb2a
commit 2f36da5765
37 changed files with 881 additions and 1059 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts
View File

@@ -18,7 +18,7 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { DateAdapter } from '@angular/material/core';
import { UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
import { MomentDateAdapter, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
import { SearchWidget } from '../../models/search-widget.interface';
import { SearchWidgetSettings } from '../../models/search-widget-settings.interface';
import { SearchQueryBuilderService } from '../../services/search-query-builder.service';
@@ -26,7 +26,7 @@ import { LiveErrorStateMatcher } from '../../forms/live-error-state-matcher';
import { Moment } from 'moment';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter } from '@angular/material-moment-adapter';
import { MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
export interface DateRangeValue {
from: string;
@@ -100,6 +100,9 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
.pipe(takeUntil(this.onDestroy$))
.subscribe((locale) => this.setLocale(locale));
const customDateAdapter = this.dateAdapter as MomentDateAdapter;
customDateAdapter.overrideDisplayFormat = this.datePickerFormat;
const validators = Validators.compose([Validators.required]);
if (this.settings?.maxDate) {

1
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
View File

@@ -79,7 +79,6 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe(locale => {
this.dateAdapter.setLocale(locale);
this.property.locale = locale;
});

17
lib/core/src/lib/common/utils/date-fns-adapter.ts
View File

@@ -46,6 +46,23 @@ import { Locale } from 'date-fns';
adapter.displayFormat = '<custom date-fns format>';
* }
*/
/**
* Material date formats for Date-fns
*/
export const ADF_DATE_FORMATS: MatDateFormats = {
parse: {
dateInput: 'dd-MM-yyyy'
},
display: {
dateInput: 'dd-MM-yyyy',
monthLabel: 'LLL',
monthYearLabel: 'LLL uuuu',
dateA11yLabel: 'PP',
monthYearA11yLabel: 'LLLL uuuu'
}
};
@Injectable()
export class AdfDateFnsAdapter extends DateFnsAdapter {
private _displayFormat?: string = null;

38
lib/core/src/lib/common/utils/date-fns-utils.spec.ts
View File

@@ -25,9 +25,14 @@ describe('DateFnsUtils', () => {
expect(dateFnsFormat).toBe('yyyy-MM-dd');
});
it('should convert moment datetime format', () => {
it('should convert moment datetime format with zone', () => {
const dateFnsFormat = DateFnsUtils.convertMomentToDateFnsFormat('YYYY-MM-DDTHH:mm:ssZ');
expect(dateFnsFormat).toBe(`yyyy-MM-dd'T'HH:mm:ss'Z'`);
expect(dateFnsFormat).toBe(`yyyy-MM-dd'T'HH:mm:ssXXX`);
});
it('should convert moment datetime format with zone hours and mins', () => {
const dateFnsFormat = DateFnsUtils.convertMomentToDateFnsFormat('YYYY-MM-DDTHH:mm:ssZZ');
expect(dateFnsFormat).toBe(`yyyy-MM-dd'T'HH:mm:ssXX`);
});
it('should convert custom moment datetime format', () => {
@@ -81,20 +86,29 @@ describe('DateFnsUtils', () => {
expect(result).toEqual(expectedParsedDate);
});
it('should format ISO datetime from date', () => {
const result = DateFnsUtils.formatDate(
new Date('2023-10-10T18:28:50.082Z'),
`yyyy-MM-dd'T'HH:mm:ss.SSS'Z'`
it('should parse alternative ISO datetime', () => {
const result = DateFnsUtils.parseDate(
'1982-03-13T10:00:000Z',
`yyyy-MM-dd'T'HH:mm:sssXXX`
);
expect(result).toBe('2023-10-10T18:28:50.082Z');
expect(result.toISOString()).toBe('1982-03-13T10:00:00.000Z');
});
it('should format ISO datetime from string', () => {
const result = DateFnsUtils.formatDate(
'2023-10-10T18:28:50.082Z',
`yyyy-MM-dd'T'HH:mm:ss.SSS'Z'`
it('should parse the datetime with zone', () => {
const result = DateFnsUtils.parseDate(
'1982-03-13T10:00:000+01:00',
`yyyy-MM-dd'T'HH:mm:sssXXX`
);
expect(result).toBe('2023-10-10T18:28:50.082Z');
expect(result.toISOString()).toBe('1982-03-13T09:00:00.000Z');
});
it('should parse datetime with zone in moment format', () => {
const result = DateFnsUtils.parseDate(
'1982-03-13T10:00:00+0100',
`YYYY-MM-DDTHH:mm:ssZZ`
);
expect(result.toISOString()).toBe('1982-03-13T09:00:00.000Z');
});
it('should validate datetime with moment format', () => {

15
lib/core/src/lib/common/utils/date-fns-utils.ts
View File

@@ -87,7 +87,8 @@ export class DateFnsUtils {
A: 'a',
ll: 'PP',
T: `'T'`,
Z: `'Z'`
ZZ: 'XX',
Z: `XXX`
};
/**
@@ -99,9 +100,7 @@ export class DateFnsUtils {
static convertMomentToDateFnsFormat(dateDisplayFormat: string): string {
if (dateDisplayFormat && dateDisplayFormat.trim() !== '') {
// normalise the input to support double conversion of the same string
dateDisplayFormat = dateDisplayFormat
.replace(`'T'`, 'T')
.replace(`'Z'`, 'Z');
dateDisplayFormat = dateDisplayFormat.replace(`'T'`, 'T');
for (const [search, replace] of Object.entries(this.momentToDateFnsMap)) {
dateDisplayFormat = dateDisplayFormat.replace(new RegExp(search, 'g'), replace);
@@ -194,4 +193,12 @@ export class DateFnsUtils {
static isAfterDate(source: Date, target: Date): boolean {
return isAfter(source, target);
}
static utcToLocal(date: Date): Date {
return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
}
static localToUtc(date: Date): Date {
return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
}
}

141
lib/core/src/lib/common/utils/datetime-fns-adapter.ts Normal file
View File

@@ -0,0 +1,141 @@
/*!
* @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 { Inject, Injectable, Optional } from '@angular/core';
import { DateFnsUtils } from './date-fns-utils';
import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimeFormats } from '@mat-datetimepicker/core';
import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
import { Locale, addHours, addMinutes } from 'date-fns';
/**
* Material date/time formats for Date-fns (mat-datetimepicker)
*/
export const ADF_DATETIME_FORMATS: MatDatetimeFormats = {
parse: {
dateInput: 'P', // L
monthInput: 'LLLL', // MMMM
timeInput: 'p', // LT
datetimeInput: 'Pp' // L LT
},
display: {
dateInput: 'P', // L
monthInput: 'LLLL', // MMMM
datetimeInput: 'Pp', // L LT
timeInput: 'p', // LT
monthYearLabel: 'LLL uuuu', // MMM YYYY
dateA11yLabel: 'PP', // LL
monthYearA11yLabel: 'LLLL uuuu', // MMMM YYYY
popupHeaderDateLabel: 'ccc, dd MMM' // ddd, DD MMM
}
};
/** The default hour names to use if Intl API is not available. */
const DEFAULT_HOUR_NAMES = range(24, (i) => String(i));
/** The default minute names to use if Intl API is not available. */
const DEFAULT_MINUTE_NAMES = range(60, (i) => String(i));
// eslint-disable-next-line jsdoc/require-jsdoc
function range<T>(length: number, valueFunction: (index: number) => T): T[] {
const valuesArray = Array(length);
for (let i = 0; i < length; i++) {
valuesArray[i] = valueFunction(i);
}
return valuesArray;
}
@Injectable()
export class AdfDateTimeFnsAdapter extends DatetimeAdapter<Date> {
private _displayFormat?: string = null;
get displayFormat(): string | null {
return this._displayFormat;
}
set displayFormat(value: string | null) {
this._displayFormat = value ? DateFnsUtils.convertMomentToDateFnsFormat(value) : null;
}
constructor(
@Optional() @Inject(MAT_DATE_LOCALE) matDateLocale: Locale,
@Optional() @Inject(MAT_DATETIME_FORMATS) private formats: MatDatetimeFormats,
dateAdapter: DateAdapter<Date, Locale>
) {
super(dateAdapter);
this.setLocale(matDateLocale);
}
getHour(date: Date): number {
return date.getHours();
}
getMinute(date: Date): number {
return date.getMinutes();
}
getFirstDateOfMonth(date: Date): Date {
const result = new Date();
result.setFullYear(date.getFullYear(), date.getMonth(), 1);
return result;
}
isInNextMonth(startDate: Date, endDate: Date): boolean {
const nextMonth = this.getDateInNextMonth(startDate);
return this.sameMonthAndYear(nextMonth, endDate);
}
getHourNames(): string[] {
return DEFAULT_HOUR_NAMES;
}
getMinuteNames(): string[] {
return DEFAULT_MINUTE_NAMES;
}
addCalendarHours(date: Date, hours: number): Date {
return addHours(date, hours);
}
addCalendarMinutes(date: Date, minutes: number): Date {
return addMinutes(date, minutes);
}
createDatetime(year: number, month: number, date: number, hour: number, minute: number): Date {
const result = new Date();
result.setFullYear(year, month, date);
result.setHours(hour, minute, 0, 0);
return result;
}
private getDateInNextMonth(date: Date) {
return new Date(date.getFullYear(), date.getMonth() + 1, 1, date.getHours(), date.getMinutes());
}
override parse(value: any, parseFormat: any): Date {
return this._delegate.parse(value, parseFormat);
}
override format(date: Date, displayFormat: any): string {
displayFormat = DateFnsUtils.convertMomentToDateFnsFormat(displayFormat);
if (this.displayFormat && displayFormat === this.formats?.display?.datetimeInput) {
return this._delegate.format(date, this.displayFormat || displayFormat);
}
return this._delegate.format(date, displayFormat);
}
}

9
lib/core/src/lib/common/utils/moment-date-adapter.ts
View File

@@ -18,6 +18,7 @@
import { Injectable } from '@angular/core';
import { DateAdapter } from '@angular/material/core';
import moment, { isMoment, Moment } from 'moment';
import { UserPreferencesService, UserPreferenceValues } from '../services/user-preferences.service';
@Injectable()
export class MomentDateAdapter extends DateAdapter<Moment> {
@@ -25,6 +26,14 @@ export class MomentDateAdapter extends DateAdapter<Moment> {
overrideDisplayFormat: string;
constructor(preferences: UserPreferencesService) {
super();
preferences.select(UserPreferenceValues.Locale).subscribe((locale: string) => {
this.setLocale(locale);
});
}
getYear(date: Moment): number {
return date.year();
}

1
lib/core/src/lib/common/utils/public-api.ts
View File

@@ -22,3 +22,4 @@ export * from './moment-date-adapter';
export * from './string-utils';
export * from './date-fns-utils';
export * from './date-fns-adapter';
export * from './datetime-fns-adapter';

4
lib/core/src/lib/core.module.ts
View File

@@ -65,6 +65,8 @@ import { AppConfigService } from './app-config/app-config.service';
import { StorageService } from './common/services/storage.service';
import { AlfrescoApiLoaderService, createAlfrescoApiInstance } from './api-factories/alfresco-api-v2-loader.service';
import { AdfDateFnsAdapter } from './common/utils/date-fns-adapter';
import { MomentDateAdapter } from './common/utils/moment-date-adapter';
import { AdfDateTimeFnsAdapter } from './common/utils/datetime-fns-adapter';
@NgModule({
imports: [
@@ -150,6 +152,8 @@ export class CoreModule {
TranslateService,
{ provide: TranslateLoader, useClass: TranslateLoaderService },
AdfDateFnsAdapter,
AdfDateTimeFnsAdapter,
MomentDateAdapter,
{
provide: APP_INITIALIZER,
useFactory: loadAppConfig,

32
lib/core/src/lib/form/components/widgets/core/form-field-validator.spec.ts
View File

@@ -706,7 +706,7 @@ describe('FormFieldValidator', () => {
});
it('should take into account that max value is in UTC and NOT fail validating value checking the time', () => {
const localValidValue = '2018-3-30 11:59 PM';
const localValidValue = '2018-03-30T22:59:00.000Z';
const field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.DATETIME,
@@ -718,7 +718,7 @@ describe('FormFieldValidator', () => {
});
it('should take into account that max value is in UTC and fail validating value checking the time', () => {
const localInvalidValue = '2018-3-31 12:01 AM';
const localInvalidValue = '2018-03-30T23:01:00.000Z';
const field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.DATETIME,
@@ -735,8 +735,8 @@ describe('FormFieldValidator', () => {
it('should succeed validating value checking the time', () => {
const field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.DATETIME,
value: '08-02-9999 09:10 AM',
maxValue: '9999-02-08 10:10 AM'
value: '9999-02-08T09:10:00.000Z',
maxValue: '9999-02-08T10:10:00.000Z'
});
expect(validator.validate(field)).toBeTruthy();
@@ -745,8 +745,8 @@ describe('FormFieldValidator', () => {
it('should fail validating value checking the time', () => {
const field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.DATETIME,
value: '08-02-9999 11:10 AM',
maxValue: '9999-02-08 10:10 AM'
value: '9999-02-08T11:10:00.000Z',
maxValue: '9999-02-08T10:10:00.000Z'
});
field.validationSummary = new ErrorMessageModel();
@@ -757,8 +757,8 @@ describe('FormFieldValidator', () => {
it('should succeed validating value checking the date', () => {
const field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.DATETIME,
value: '08-02-9999 09:10 AM',
maxValue: '9999-02-08 10:10 AM'
value: '9999-02-08T09:10:00.000Z',
maxValue: '9999-02-08T10:10:00.000Z'
});
expect(validator.validate(field)).toBeTruthy();
@@ -825,12 +825,12 @@ describe('FormFieldValidator', () => {
});
it('should take into account that min value is in UTC and NOT fail validating value checking the time', () => {
const localValidValue = '2018-3-02 06:01 AM';
const localValidValue = '2018-03-02T06:01:00.000Z';
const field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.DATETIME,
value: localValidValue,
minValue: '2018-03-02T06:00:00+00:00'
minValue: '2018-03-02T06:00:00.000Z'
});
expect(validator.validate(field)).toBeTruthy();
@@ -874,8 +874,8 @@ describe('FormFieldValidator', () => {
it('should fail validating value by time', () => {
const field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.DATETIME,
value: '08-02-9999 09:00 AM',
minValue: '9999-02-08 09:10 AM'
value: '9999-08-02T08:10:00.000Z',
minValue: '9999-08-02T08:11:00.000Z'
});
field.validationSummary = new ErrorMessageModel();
@@ -886,8 +886,8 @@ describe('FormFieldValidator', () => {
it('should fail validating value by date', () => {
const field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.DATETIME,
value: '07-02-9999 09:10 AM',
minValue: '9999-02-08 09:10 AM'
value: '9999-02-07T09:10:00.000Z',
minValue: '9999-02-08T09:10:00.000Z'
});
field.validationSummary = new ErrorMessageModel();
@@ -1110,9 +1110,9 @@ describe('FormFieldValidator', () => {
it('should not validate dateTime format with default format', () => {
const field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.DATETIME,
value: '2021-06-09 14:10' // 14:10 does not conform to A
value: '2021-06-09 14:10 AM' // 14:10 does not conform to A
});
expect(field.value).toBe('2021-06-09 14:10');
expect(field.value).toBe('2021-06-09 14:10 AM');
expect(field.dateDisplayFormat).toBe('D-M-YYYY hh:mm A');
expect(validator.validate(field)).toBeFalse();
});

37
lib/core/src/lib/form/components/widgets/core/form-field-validator.ts
View File

@@ -21,6 +21,7 @@ import { FormFieldTypes } from './form-field-types';
import { isNumberValue } from './form-field-utils';
import { FormFieldModel } from './form-field.model';
import { DateFnsUtils } from '../../../../common/utils/date-fns-utils';
import { isValid as isDateValid, isBefore, isAfter } from 'date-fns';
export interface FormFieldValidator {
@@ -171,18 +172,18 @@ export class DateTimeFieldValidator implements FormFieldValidator {
FormFieldTypes.DATETIME
];
// Validates that the input string is a valid date formatted as <dateFormat> (default D-M-YYYY)
static isValidDate(inputDate: string, dateFormat: string = 'YYYY-MM-DD HH:mm'): boolean {
return DateFnsUtils.isValidDate(inputDate, dateFormat);
}
isSupported(field: FormFieldModel): boolean {
return field && this.supportedTypes.indexOf(field.type) > -1;
}
static isValidDateTime(input: string): boolean {
const date = new Date(input);
return isDateValid(date);
}
validate(field: FormFieldModel): boolean {
if (this.isSupported(field) && field.value && field.isVisible) {
if (DateFieldValidator.isValidDate(field.value, field.dateDisplayFormat)) {
if (DateTimeFieldValidator.isValidDateTime(field.value)) {
return true;
}
field.validationSummary.message = field.dateDisplayFormat;
@@ -298,24 +299,22 @@ export class MinDateTimeFieldValidator implements FormFieldValidator {
validate(field: FormFieldModel): boolean {
let isValid = true;
if (this.isSupported(field) && field.value && field.isVisible) {
const dateFormat = field.dateDisplayFormat;
if (!DateFieldValidator.isValidDate(field.value, dateFormat)) {
if (!DateTimeFieldValidator.isValidDateTime(field.value)) {
field.validationSummary.message = 'FORM.FIELD.VALIDATOR.INVALID_DATE';
isValid = false;
} else {
isValid = this.checkDateTime(field, dateFormat);
isValid = this.checkDateTime(field);
}
}
return isValid;
}
private checkDateTime(field: FormFieldModel, dateFormat: string): boolean {
private checkDateTime(field: FormFieldModel): boolean {
let isValid = true;
const fieldValueDate = DateFnsUtils.parseDate(field.value, dateFormat);
const fieldValueDate = new Date(field.value);
const min = new Date(field.minValue);
if (DateFnsUtils.isBeforeDate(fieldValueDate, min)) {
if (isBefore(fieldValueDate, min)) {
field.validationSummary.message = `FORM.FIELD.VALIDATOR.NOT_LESS_THAN`;
field.validationSummary.attributes.set(
'minValue',
@@ -349,24 +348,22 @@ export class MaxDateTimeFieldValidator implements FormFieldValidator {
validate(field: FormFieldModel): boolean {
let isValid = true;
if (this.isSupported(field) && field.value && field.isVisible) {
const dateFormat = field.dateDisplayFormat;
if (!DateFieldValidator.isValidDate(field.value, dateFormat)) {
if (!DateTimeFieldValidator.isValidDateTime(field.value)) {
field.validationSummary.message = 'FORM.FIELD.VALIDATOR.INVALID_DATE';
isValid = false;
} else {
isValid = this.checkDateTime(field, dateFormat);
isValid = this.checkDateTime(field);
}
}
return isValid;
}
private checkDateTime(field: FormFieldModel, dateFormat: string): boolean {
private checkDateTime(field: FormFieldModel): boolean {
let isValid = true;
const fieldValueDate = DateFnsUtils.parseDate(field.value, dateFormat);
const fieldValueDate = new Date(field.value);
const max = new Date(field.maxValue);
if (DateFnsUtils.isAfterDate(fieldValueDate, max)) {
if (isAfter(fieldValueDate, max)) {
field.validationSummary.message = `FORM.FIELD.VALIDATOR.NOT_GREATER_THAN`;
field.validationSummary.attributes.set(
'maxValue',

41
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
View File

@@ -6,29 +6,30 @@
<mat-form-field class="adf-date-time-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" *ngIf="isRequired()">*</span></label>
<input matInput
[id]="field.id"
[value]="field.value"
[required]="isRequired()"
[disabled]="field.readOnly"
(change)="onDateChanged($any($event).srcElement.value)"
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
matTooltipShowDelay="1000"
(focus)="datetimePicker.open()">
[matDatetimepicker]="datetimePicker"
[id]="field.id"
[(ngModel)]="value"
[required]="isRequired()"
[disabled]="field.readOnly"
(change)="onValueChanged($event)"
(dateChange)="onDateChanged($event)"
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
matTooltipShowDelay="1000"
[min]="minDate"
[max]="maxDate">
<mat-datetimepicker-toggle matSuffix [for]="datetimePicker" [disabled]="field.readOnly"></mat-datetimepicker-toggle>
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<mat-datetimepicker #datetimePicker type="datetime" [touchUi]="true" [timeInterval]="5" [disabled]="field.readOnly"></mat-datetimepicker>
<input
type="hidden"
[matDatetimepicker]="datetimePicker"
[value]="field.value | adfMomentDate: field.dateDisplayFormat"
[min]="minDate"
[max]="maxDate"
[disabled]="field.readOnly"
(dateInput)="onDateChanged($any($event).targetElement.value)">
<mat-datetimepicker #datetimePicker
type="datetime"
[touchUi]="true"
[openOnFocus]="true"
[timeInterval]="5"
[disabled]="field.readOnly">
</mat-datetimepicker>
</div>
</div>

244
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts
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,12 +24,14 @@ 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 { DateFieldValidator, DateTimeFieldValidator } from '../core';
describe('DateTimeWidgetComponent', () => {
let widget: DateTimeWidgetComponent;
let fixture: ComponentFixture<DateTimeWidgetComponent>;
let element: HTMLElement;
let form: FormModel;
beforeEach(() => {
TestBed.configureTestingModule({
@@ -44,6 +45,9 @@ describe('DateTimeWidgetComponent', () => {
element = fixture.nativeElement;
widget = fixture.componentInstance;
form = new FormModel();
form.fieldValidators = [new DateFieldValidator(), new DateTimeFieldValidator() ];
});
afterEach(() => {
@@ -51,9 +55,9 @@ describe('DateTimeWidgetComponent', () => {
TestBed.resetTestingModule();
});
it('should setup min value for date picker', () => {
const minValue = '1982-03-13T10:00:000Z';
widget.field = new FormFieldModel(null, {
it('should setup min value for date picker', async () => {
const minValue = '1982-03-13T10:00:00Z';
widget.field = new FormFieldModel(form, {
id: 'date-id',
name: 'date-name',
type: 'datetime',
@@ -61,13 +65,13 @@ describe('DateTimeWidgetComponent', () => {
});
fixture.detectChanges();
await fixture.whenStable();
const expected = moment(minValue, 'YYYY-MM-DDTHH:mm:ssZ');
expect(widget.minDate.isSame(expected)).toBeTruthy();
expect(widget.minDate.toISOString()).toBe(`1982-03-13T10:00:00.000Z`);
});
it('should date field be present', () => {
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
id: 'date-id',
name: 'date-name',
type: 'datetime'
@@ -78,35 +82,161 @@ describe('DateTimeWidgetComponent', () => {
expect(element.querySelector('#data-time-widget')).not.toBeNull();
});
it('should setup max value for date picker', () => {
const maxValue = '1982-03-13T10:00:000Z';
it('should setup max value for date picker', async () => {
const maxValue = '1982-03-13T10:00:00Z';
widget.field = new FormFieldModel(null, {
maxValue
});
fixture.detectChanges();
await fixture.whenStable();
const expected = moment(maxValue, 'YYYY-MM-DDTHH:mm:ssZ');
expect(widget.maxDate.isSame(expected)).toBeTruthy();
expect(widget.maxDate.toISOString()).toBe('1982-03-13T10:00:00.000Z');
});
it('should eval visibility on date changed', () => {
spyOn(widget, 'onFieldChanged').and.callThrough();
const field = new FormFieldModel(new FormModel(), {
const field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '09-12-9999 10:00 AM',
type: 'datetime',
readOnly: 'false'
value: '9999-09-12T09:00:00.000Z',
type: 'datetime'
});
widget.field = field;
const mockDate = moment('1982-03-13T10:00:000Z', 'YYYY-MM-DDTHH:mm:ssZ');
widget.onDateChanged(mockDate);
widget.onDateChanged({ value: new Date('1982-03-13T10:00:00.000Z') } as any);
expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
});
it('should validate the initial datetime value', async () => {
const field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '9999-09-12T09:00:00.000Z',
type: 'datetime'
});
widget.field = field;
fixture.whenStable();
await fixture.whenStable();
expect(field.isValid).toBeTrue();
});
it('should validate the updated datetime value', async () => {
const field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '9999-09-12T09:00:00.000Z',
type: 'datetime'
});
widget.field = field;
fixture.whenStable();
await fixture.whenStable();
widget.onDateChanged({ value: new Date('9999-09-12T09:10:00.000Z') } as any);
expect(field.value).toBe('9999-09-12T09:10:00.000Z');
expect(field.isValid).toBeTrue();
});
it('should forwad the incorrect datetime input for further validation', async () => {
const field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '9999-09-12T09:00:00.000Z',
type: 'datetime'
});
widget.field = field;
fixture.detectChanges();
await fixture.whenStable();
widget.onDateChanged({
value: null,
targetElement: {
value: '123abc'
}
} as any);
fixture.detectChanges();
await fixture.whenStable();
expect(field.value).toBe('123abc');
expect(field.isValid).toBeFalse();
expect(field.validationSummary.message).toBe('D-M-YYYY hh:mm A');
});
it('should process direct keyboard input', async () => {
const field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '9999-09-12T09:00:00.000Z',
type: 'datetime'
});
widget.field = field;
fixture.whenStable();
await fixture.whenStable();
widget.onValueChanged({ target: { value: '9999-09-12T09:10:00.000Z' } } as any);
expect(field.value).toBe('9999-09-12T09:10:00.000Z');
expect(field.isValid).toBeTrue();
});
it('should fail validating incorrect keyboard input', async () => {
const field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '9999-09-12T09:00:00.000Z',
type: 'datetime'
});
widget.field = field;
fixture.detectChanges();
await fixture.whenStable();
widget.onValueChanged({
target: {
value: '123abc'
}
} as any);
fixture.detectChanges();
await fixture.whenStable();
expect(field.value).toBe('123abc');
expect(field.isValid).toBeFalse();
expect(field.validationSummary.message).toBe('D-M-YYYY hh:mm A');
});
it('should allow empty dates when not required', async () => {
const field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '9999-09-12T09:00:00.000Z',
type: 'datetime'
});
widget.field = field;
fixture.whenStable();
await fixture.whenStable();
widget.onDateChanged({ value: null, targetElement: { value: '' } } as any);
expect(field.value).toBe('');
expect(field.isValid).toBeTrue();
});
describe('when tooltip is set', () => {
beforeEach(() => {
@@ -166,97 +296,95 @@ describe('DateTimeWidgetComponent', () => {
it('should be able to display label with asterisk', () => {
fixture.detectChanges();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
const asterisk = element.querySelector<HTMLElement>('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
expect(asterisk).not.toBeNull();
expect(asterisk?.textContent).toEqual('*');
});
});
describe('template check', () => {
it('should show visible date widget', () => {
widget.field = new FormFieldModel(new FormModel(), {
it('should show visible date widget', async () => {
widget.field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '30-11-9999 10:30 AM',
type: 'datetime',
readOnly: 'false'
value: '9999-11-30T10:30:00.000Z',
type: 'datetime'
});
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement: any = element.querySelector('#date-field-id');
expect(dateElement.value).toBe('30-11-9999 10:30 AM');
const dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
expect(dateElement).not.toBeNull();
expect(dateElement?.value).toBe('30-11-9999 10:30 AM');
});
it('should show the correct format type', () => {
widget.field = new FormFieldModel(new FormModel(), {
it('should show the correct format type', async () => {
widget.field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '12-30-9999 10:30 AM',
value: '9999-12-30T10:30:00.000Z',
dateDisplayFormat: 'MM-DD-YYYY HH:mm A',
type: 'datetime',
readOnly: 'false'
type: 'datetime'
});
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement: any = element.querySelector('#date-field-id');
expect(dateElement.value).toContain('12-30-9999 10:30 AM');
const dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
expect(dateElement).not.toBeNull();
expect(dateElement?.value).toContain('12-30-9999 10:30 AM');
});
it('should disable date button when is readonly', () => {
widget.field = new FormFieldModel(new FormModel(), {
widget.field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '12-30-9999 10:30 AM',
value: '9999-12-30T10:30:00.000Z',
dateDisplayFormat: 'MM-DD-YYYY HH:mm A',
type: 'datetime',
readOnly: 'false'
type: 'datetime'
});
fixture.detectChanges();
let dateButton = element.querySelector<HTMLButtonElement>('button');
expect(dateButton.disabled).toBeFalsy();
expect(dateButton).not.toBeNull();
expect(dateButton?.disabled).toBeFalsy();
widget.field.readOnly = true;
fixture.detectChanges();
dateButton = element.querySelector<HTMLButtonElement>('button');
expect(dateButton.disabled).toBeTruthy();
expect(dateButton).not.toBeNull();
expect(dateButton?.disabled).toBeTruthy();
});
});
it('should display always the json value', () => {
const field = new FormFieldModel(new FormModel(), {
it('should display always the json value', async () => {
const field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'datetime-field-name',
value: '12-30-9999 10:30 AM',
value: '9999-12-30T10:30:00.000Z',
type: 'datetime',
readOnly: 'false'
dateDisplayFormat: 'MM-DD-YYYY HH:mm A'
});
field.isVisible = true;
field.dateDisplayFormat = 'MM-DD-YYYY HH:mm A';
widget.field = field;
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
expect(dateElement).not.toBeNull();
expect(dateElement?.value).toContain('12-30-9999 10:30 AM');
const dateElement: any = element.querySelector('#date-field-id');
expect(dateElement.value).toContain('12-30-9999 10:30 AM');
widget.field.value = '2020-03-02T00:00:00.000Z';
widget.field.value = '03-02-2020 12:00 AM';
fixture.componentInstance.ngOnInit();
fixture.detectChanges();
await fixture.whenStable();
expect(dateElement.value).toContain('03-02-2020 12:00 AM');
expect(dateElement?.value).toContain('03-02-2020 00:00 AM');
});
describe('when form model has left labels', () => {

84
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts
View File

@@ -17,76 +17,88 @@
/* eslint-disable @angular-eslint/component-selector */
import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
import { Component, Input, OnInit, ViewEncapsulation } 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';
import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepickerInputEvent } from '@mat-datetimepicker/core';
import { FormService } from '../../../services/form.service';
import { WidgetComponent } from '../widget.component';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ADF_DATE_FORMATS, AdfDateFnsAdapter } from '../../../../common/utils/date-fns-adapter';
import { ADF_DATETIME_FORMATS, AdfDateTimeFnsAdapter } from '../../../../common/utils/datetime-fns-adapter';
import { DateFnsUtils } from '../../../../common';
import { isValid } from 'date-fns';
@Component({
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter },
{ provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS },
{ provide: DatetimeAdapter, useClass: MomentDatetimeAdapter },
{ provide: MAT_DATETIME_FORMATS, useValue: MAT_MOMENT_DATETIME_FORMATS }
{ provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS },
{ provide: MAT_DATETIME_FORMATS, useValue: ADF_DATETIME_FORMATS },
{ provide: DateAdapter, useClass: AdfDateFnsAdapter },
{ provide: DatetimeAdapter, useClass: AdfDateTimeFnsAdapter }
],
selector: 'date-time-widget',
templateUrl: './date-time.widget.html',
styleUrls: ['./date-time.widget.scss'],
encapsulation: ViewEncapsulation.None
})
export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
export class DateTimeWidgetComponent extends WidgetComponent implements OnInit {
minDate: Date;
maxDate: Date;
minDate: Moment;
maxDate: Moment;
private onDestroy$ = new Subject<boolean>();
@Input()
value: any = null;
constructor(public formService: FormService,
private dateAdapter: DateAdapter<Moment>,
private userPreferencesService: UserPreferencesService) {
private dateAdapter: DateAdapter<Date>,
private dateTimeAdapter: DatetimeAdapter<Date>) {
super(formService);
}
ngOnInit() {
this.userPreferencesService
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe(locale => this.dateAdapter.setLocale(locale));
if (this.field.dateDisplayFormat) {
const dateAdapter = this.dateAdapter as AdfDateFnsAdapter;
dateAdapter.displayFormat = this.field.dateDisplayFormat;
const momentDateAdapter = this.dateAdapter as MomentDateAdapter;
momentDateAdapter.overrideDisplayFormat = this.field.dateDisplayFormat;
const dateTimeAdapter = this.dateTimeAdapter as AdfDateTimeFnsAdapter;
dateTimeAdapter.displayFormat = this.field.dateDisplayFormat;
}
if (this.field) {
if (this.field.minValue) {
this.minDate = moment.utc(this.field.minValue, 'YYYY-MM-DDTHH:mm:ssZ');
this.minDate = DateFnsUtils.localToUtc(new Date(this.field.minValue));
}
if (this.field.maxValue) {
this.maxDate = moment.utc(this.field.maxValue, 'YYYY-MM-DDTHH:mm:ssZ');
this.maxDate = DateFnsUtils.localToUtc(new Date(this.field.maxValue));
}
if (this.field.value) {
this.value = DateFnsUtils.localToUtc(new Date(this.field.value));
}
}
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
onValueChanged(event: Event) {
const input = event.target as HTMLInputElement;
const newValue = this.dateTimeAdapter.parse(input.value, this.field.dateDisplayFormat);
if (isValid(newValue)) {
this.field.value = DateFnsUtils.utcToLocal(newValue).toISOString();
} else {
this.field.value = input.value;
}
this.onFieldChanged(this.field);
}
onDateChanged(newDateValue) {
const date = moment(newDateValue, this.field.dateDisplayFormat, true);
if (date.isValid()) {
this.field.value = moment(date).utc().local().format(this.field.dateDisplayFormat);
onDateChanged(event: MatDatetimepickerInputEvent<Date>) {
const newValue = event.value;
const input = event.targetElement as HTMLInputElement;
if (newValue && isValid(newValue)) {
this.field.value = DateFnsUtils.utcToLocal(newValue).toISOString();
} else {
this.field.value = newDateValue;
this.field.value = input.value;
}
this.onFieldChanged(this.field);
}
}

5
lib/core/src/lib/form/components/widgets/date/date.widget.ts
View File

@@ -23,13 +23,12 @@ import { FormService } from '../../../services/form.service';
import { WidgetComponent } from '../widget.component';
import { Subject } from 'rxjs';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { ADF_FORM_DATE_FORMATS } from '../../../date-formats';
import { AdfDateFnsAdapter } from '../../../../common/utils/date-fns-adapter';
import { ADF_DATE_FORMATS, AdfDateFnsAdapter } from '../../../../common/utils/date-fns-adapter';
@Component({
selector: 'date-widget',
providers: [
{ provide: MAT_DATE_FORMATS, useValue: ADF_FORM_DATE_FORMATS },
{ provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS },
{ provide: DateAdapter, useClass: AdfDateFnsAdapter }
],
templateUrl: './date.widget.html',

41
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
View File

@@ -7,29 +7,26 @@
<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"
*ngIf="isRequired()">*</span></label>
<input matInput
[id]="field.id"
[value]="field.value"
[required]="isRequired()"
[disabled]="field.readOnly"
(change)="onDateChanged($any($event).srcElement.value)"
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
matTooltipShowDelay="1000">
<mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" ></mat-datepicker-toggle>
<input matInput [matDatepicker]="datePicker"
[id]="field.id"
[(ngModel)]="value"
[required]="field.required"
[placeholder]="field.placeholder"
[min]="minDate"
[max]="maxDate"
[disabled]="field.readOnly"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000"
(dateChange)="onDateChanged($event)"
(blur)="markAsTouched()">
<mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly"></mat-datepicker-toggle>
<mat-datepicker #datePicker
[startAt]="startAt"
[disabled]="field.readOnly">
</mat-datepicker>
</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>
<input
type="hidden"
[matDatepicker]="datePicker"
[value]="field.value | adfMomentDate: field.dateDisplayFormat"
[min]="minDate"
[max]="maxDate"
[disabled]="field.readOnly"
(dateInput)="onDateChanged($any($event).targetElement.value)">
</div>
</div>
</div>

168
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts
View File

@@ -17,18 +17,20 @@
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 { FormFieldModel, FormModel, FormFieldTypes, DateFieldValidator, MinDateFieldValidator, MaxDateFieldValidator } from '@alfresco/adf-core';
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 { DateAdapter } from '@angular/material/core';
import { isEqual, subDays, addDays } from 'date-fns';
describe('DateWidgetComponent', () => {
let widget: DateCloudWidgetComponent;
let fixture: ComponentFixture<DateCloudWidgetComponent>;
let element: HTMLElement;
let adapter: DateAdapter<Date>;
let form: FormModel;
beforeEach(() => {
TestBed.configureTestingModule({
@@ -37,7 +39,13 @@ describe('DateWidgetComponent', () => {
ProcessServiceCloudTestingModule
]
});
form = new FormModel();
form.fieldValidators = [new DateFieldValidator(), new MinDateFieldValidator(), new MaxDateFieldValidator()];
fixture = TestBed.createComponent(DateCloudWidgetComponent);
adapter = fixture.debugElement.injector.get(DateAdapter);
widget = fixture.componentInstance;
element = fixture.nativeElement;
});
@@ -52,13 +60,14 @@ describe('DateWidgetComponent', () => {
widget.ngOnInit();
const expected = moment(minValue, DATE_FORMAT_CLOUD);
expect(widget.minDate.isSame(expected)).toBeTruthy();
const expected = adapter.parse(minValue, widget.DATE_FORMAT);
expect(isEqual(widget.minDate, expected)).toBeTrue();
});
it('should date field be present', () => {
const minValue = '1982-03-13';
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
minValue
});
@@ -70,29 +79,29 @@ describe('DateWidgetComponent', () => {
it('should setup max value for date picker', () => {
const maxValue = '1982-03-13';
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
maxValue
});
widget.ngOnInit();
const expected = moment(maxValue, DATE_FORMAT_CLOUD);
expect(widget.maxDate.isSame(expected)).toBeTruthy();
const expected = adapter.parse(maxValue, widget.DATE_FORMAT);
expect(isEqual(widget.maxDate, expected)).toBeTrue();
});
it('should eval visibility on date changed', () => {
spyOn(widget, 'onFieldChanged').and.callThrough();
const field = new FormFieldModel(new FormModel(), {
const field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
id: 'date-field-id',
name: 'date-name',
value: '9999-9-9',
type: 'date',
readOnly: 'false'
});
widget.field = field;
const todayDate = moment().format(DATE_FORMAT_CLOUD);
widget.onDateChanged({ value: todayDate });
widget.onDateChanged({ value: adapter.today() } as any);
expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
});
@@ -105,48 +114,46 @@ describe('DateWidgetComponent', () => {
});
it('should show visible date widget', async () => {
widget.field = new FormFieldModel(new FormModel(), {
widget.field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
// always stored as dd-MM-yyyy
value: '9999-9-9',
type: 'date',
readOnly: 'false'
type: FormFieldTypes.DATE
});
widget.field.isVisible = true;
widget.ngOnInit();
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
expect(dateElement.value).toContain('9-9-9999');
expect(dateElement).not.toBeNull();
expect(dateElement?.value).toContain('9-9-9999');
});
it('should show the correct format type', async () => {
widget.field = new FormFieldModel(new FormModel(), {
widget.field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '9999-30-12',
type: 'date',
readOnly: 'false'
// always stored as dd-MM-yyyy
value: '30-12-9999',
type: FormFieldTypes.DATE,
dateDisplayFormat: 'YYYY-DD-MM'
});
widget.field.isVisible = true;
widget.field.dateDisplayFormat = 'YYYY-DD-MM';
widget.ngOnInit();
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
expect(dateElement.value).toContain('9999-30-12');
});
it('should disable date button when is readonly', async () => {
widget.field = new FormFieldModel(new FormModel(), {
widget.field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '9999-9-9',
type: 'date',
type: FormFieldTypes.DATE,
readOnly: 'false'
});
widget.field.isVisible = true;
@@ -170,7 +177,7 @@ describe('DateWidgetComponent', () => {
id: 'date-field-id',
name: 'date-name',
value: 'aa',
type: 'date',
type: FormFieldTypes.DATE,
readOnly: 'false'
});
widget.field.isVisible = true;
@@ -184,31 +191,31 @@ describe('DateWidgetComponent', () => {
});
it('should display always the json value', async () => {
const field = new FormFieldModel(new FormModel(), {
const field = new FormFieldModel(form, {
id: 'date-field-id',
name: 'date-name',
value: '12-30-9999',
type: 'date',
readOnly: 'false'
// always stored as dd-MM-yyyy
value: '30-12-9999',
type: FormFieldTypes.DATE,
readOnly: 'false',
dateDisplayFormat: 'MM-DD-YYYY'
});
field.isVisible = true;
field.dateDisplayFormat = 'MM-DD-YYYY';
widget.field = field;
widget.ngOnInit();
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement: any = element.querySelector('#date-field-id');
const dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
expect(dateElement).toBeDefined();
expect(dateElement.value).toContain('12-30-9999');
widget.field.value = '03-02-2020';
fixture.componentInstance.ngOnInit();
fixture.detectChanges();
await fixture.whenStable();
expect(dateElement.value).toContain('03-02-2020');
expect(dateElement.value).toContain('02-03-2020');
});
describe('when form model has left labels', () => {
@@ -285,7 +292,8 @@ describe('DateWidgetComponent', () => {
describe('Set dynamic dates', () => {
it('should min date equal to the today date minus minimum date range value', async () => {
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
dynamicDateRangeSelection: true,
minDateRangeValue: 4
});
@@ -293,13 +301,13 @@ 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 expected = subDays(adapter.today(), widget.field.minDateRangeValue);
expect(widget.minDate.toDateString()).toBe(expected.toDateString());
});
it('should min date and max date be undefined if dynamic min and max date are not set', async () => {
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
dynamicDateRangeSelection: true
});
@@ -311,7 +319,8 @@ describe('DateWidgetComponent', () => {
});
it('should max date be undefined if only minimum date range value is set', async () => {
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
dynamicDateRangeSelection: true,
minDateRangeValue: 4
});
@@ -323,7 +332,8 @@ describe('DateWidgetComponent', () => {
});
it('should min date be undefined if only maximum date range value is set', async () => {
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
dynamicDateRangeSelection: true,
maxDateRangeValue: 4
});
@@ -335,7 +345,8 @@ describe('DateWidgetComponent', () => {
});
it('should max date equal to the today date plus maximum date range value', async () => {
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
dynamicDateRangeSelection: true,
maxDateRangeValue: 5
});
@@ -343,13 +354,13 @@ 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 expected = addDays(adapter.today(), widget.field.maxDateRangeValue);
expect(widget.maxDate.toDateString()).toBe(expected.toDateString());
});
it('should maxDate and minDate be undefined if minDateRangeValue and maxDateRangeValue are null', async () => {
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
dynamicDateRangeSelection: true,
maxDateRangeValue: null,
minDateRangeValue: null
@@ -363,7 +374,8 @@ describe('DateWidgetComponent', () => {
});
it('should minDate be undefined if minDateRangeValue is null and maxDateRangeValue is greater than 0', async () => {
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
dynamicDateRangeSelection: true,
maxDateRangeValue: 15,
minDateRangeValue: null
@@ -377,7 +389,8 @@ describe('DateWidgetComponent', () => {
});
it('should maxDate be undefined if maxDateRangeValue is null and minDateRangeValue is greater than 0', async () => {
widget.field = new FormFieldModel(null, {
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
dynamicDateRangeSelection: true,
maxDateRangeValue: null,
minDateRangeValue: 10
@@ -392,8 +405,10 @@ 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, {
spyOn(adapter, 'today').and.returnValue(new Date('2022-07-22'));
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
dynamicDateRangeSelection: true,
maxDateRangeValue: null,
minDateRangeValue: 1,
@@ -404,16 +419,16 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expectedMinValueString = '2022-07-21';
expect(widget.field.minValue).toEqual(expectedMinValueString);
expect(widget.field.minValue).toEqual('21-07-2022');
expect(widget.maxDate).toBeUndefined();
expect(widget.field.maxValue).toBeNull();
});
it('should maxValue be equal to today date plus maxDateRangeValue', async () => {
spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22');
widget.field = new FormFieldModel(null, {
spyOn(adapter, 'today').and.returnValue(new Date('2022-07-22'));
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
dynamicDateRangeSelection: true,
maxDateRangeValue: 8,
minDateRangeValue: null,
@@ -424,16 +439,16 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expectedMaxValueString = '2022-07-30';
expect(widget.field.maxValue).toEqual(expectedMaxValueString);
expect(widget.field.maxValue).toEqual('30-07-2022');
expect(widget.minDate).toBeUndefined();
expect(widget.field.minValue).toBeNull();
});
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, {
spyOn(adapter, 'today').and.returnValue(new Date('2022-07-22'));
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
dynamicDateRangeSelection: true,
maxDateRangeValue: null,
minDateRangeValue: null,
@@ -451,8 +466,10 @@ 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, {
spyOn(adapter, 'today').and.returnValue(new Date('2022-07-22'));
widget.field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
dynamicDateRangeSelection: true,
maxDateRangeValue: 8,
minDateRangeValue: 10,
@@ -463,11 +480,8 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expectedMaxValueString = '2022-07-30';
const expectedMinValueString = '2022-07-12';
expect(widget.field.maxValue).toEqual(expectedMaxValueString);
expect(widget.field.minValue).toEqual(expectedMinValueString);
expect(widget.field.minValue).toEqual('12-07-2022');
expect(widget.field.maxValue).toEqual('30-07-2022');
});
});
});

81
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts
View File

@@ -17,22 +17,20 @@
/* eslint-disable @angular-eslint/component-selector */
import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
import { Component, OnInit, ViewEncapsulation, OnDestroy, Input } 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, FormService, AdfDateFnsAdapter, DateFnsUtils } from '@alfresco/adf-core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { CLOUD_FORM_DATE_FORMATS } from '../../../date-formats';
import { addDays, subDays } from 'date-fns';
@Component({
selector: 'date-widget',
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter },
{ provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }],
{ provide: MAT_DATE_FORMATS, useValue: CLOUD_FORM_DATE_FORMATS },
{ provide: DateAdapter, useClass: AdfDateFnsAdapter }
],
templateUrl: './date-cloud.widget.html',
styleUrls: ['./date-cloud.widget.scss'],
host: {
@@ -50,52 +48,58 @@ import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
})
export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
typeId = 'DateCloudWidgetComponent';
readonly DATE_FORMAT = 'dd-MM-yyyy';
minDate: Moment;
maxDate: Moment;
minDate: Date;
maxDate: Date;
startAt: Date;
/**
* Current date value.
* The value is always stored in the format `dd-MM-yyyy`,
* but displayed in the UI component using `dateDisplayFormat`
*/
@Input()
value: any = null;
private onDestroy$ = new Subject<boolean>();
constructor(public formService: FormService,
private dateAdapter: DateAdapter<Moment>,
private userPreferencesService: UserPreferencesService) {
private dateAdapter: DateAdapter<Date>) {
super(formService);
}
ngOnInit() {
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;
if (this.field.dateDisplayFormat) {
const adapter = this.dateAdapter as AdfDateFnsAdapter;
adapter.displayFormat = this.field.dateDisplayFormat;
}
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 = subDays(this.dateAdapter.today(), this.field.minDateRangeValue);
this.field.minValue = DateFnsUtils.formatDate(this.minDate, this.DATE_FORMAT);
}
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 = addDays(this.dateAdapter.today(), this.field.maxDateRangeValue);
this.field.maxValue = DateFnsUtils.formatDate(this.maxDate, this.DATE_FORMAT);
}
} else {
if (this.field.minValue) {
this.minDate = moment(this.field.minValue, DATE_FORMAT_CLOUD);
this.minDate = this.dateAdapter.parse(this.field.minValue, this.DATE_FORMAT);
}
if (this.field.maxValue) {
this.maxDate = moment(this.field.maxValue, DATE_FORMAT_CLOUD);
this.maxDate = this.dateAdapter.parse(this.field.maxValue, this.DATE_FORMAT);
}
}
}
}
getTodaysFormattedDate() {
return moment().format(DATE_FORMAT_CLOUD);
if (this.field.value) {
this.startAt = this.dateAdapter.parse(this.field.value, this.DATE_FORMAT);
this.value = this.dateAdapter.parse(this.field.value, this.DATE_FORMAT);
}
}
}
ngOnDestroy() {
@@ -103,13 +107,16 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
this.onDestroy$.complete();
}
onDateChanged(newDateValue) {
const date = moment(newDateValue, this.field.dateDisplayFormat, true);
if (date.isValid()) {
this.field.value = date.format(this.field.dateDisplayFormat);
onDateChanged(event: MatDatepickerInputEvent<Date>) {
const value = event.value;
const input = event.targetElement as HTMLInputElement;
if (value) {
this.field.value = this.dateAdapter.format(value, this.DATE_FORMAT);
} else {
this.field.value = newDateValue;
this.field.value = input.value;
}
this.onFieldChanged(this.field);
}
}

13
lib/core/src/lib/form/date-formats.ts → lib/process-services-cloud/src/lib/form/date-formats.ts
View File

@@ -17,12 +17,19 @@
import { MatDateFormats } from '@angular/material/core';
export const ADF_FORM_DATE_FORMATS: MatDateFormats = {
/**
* Provides date/time display formatting for the cloud components.
*
* Notes for developers: display formats are different from the storage formats.
* Components have a fixed format for saving dates and datetime values,
* while dynamic format for UI display.
*/
export const CLOUD_FORM_DATE_FORMATS: MatDateFormats = {
parse: {
dateInput: 'dd-MM-yyyy'
dateInput: 'yyyy-MM-dd'
},
display: {
dateInput: 'dd-MM-yyyy',
dateInput: 'yyyy-MM-dd',
monthLabel: 'LLL',
monthYearLabel: 'LLL uuuu',
dateA11yLabel: 'PP',

1
lib/process-services-cloud/src/lib/form/public-api.ts
View File

@@ -40,3 +40,4 @@ export * from './services/content-cloud-node-selector.service';
export * from './services/process-cloud-content.service';
export * from './form-cloud.module';
export * from './date-formats';

4
lib/process-services/src/lib/form/widgets/dynamic-table/editors/date/date.editor.html
View File

@@ -5,11 +5,11 @@
id="dateInput"
type="text"
[matDatepicker]="datePicker"
[value]="value"
[(ngModel)]="value"
[id]="column.id"
[required]="column.required"
[disabled]="!column.editable"
(focusout)="onDateChanged($any($event).srcElement)"
(focusout)="onDateChanged($any($event).target.value)"
(dateChange)="onDateChanged($event)">
<mat-datepicker-toggle *ngIf="column.editable" matSuffix [for]="datePicker" class="adf-date-editor-button" ></mat-datepicker-toggle>
</mat-form-field>

5
lib/process-services/src/lib/form/widgets/dynamic-table/editors/date/date.editor.spec.ts
View File

@@ -22,7 +22,6 @@ import { DynamicTableRow } from '../models/dynamic-table-row.model';
import { DynamicTableModel } from '../models/dynamic-table.widget.model';
import { DateEditorComponent } from './date.editor';
import { By } from '@angular/platform-browser';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { TranslateModule } from '@ngx-translate/core';
describe('DateEditorComponent', () => {
@@ -55,7 +54,7 @@ describe('DateEditorComponent', () => {
describe('using Date Piker', () => {
it('should update row value on change', () => {
const input = {value: '14-03-2016'} as MatDatepickerInputEvent<any>;
const input = {value: '2016-03-14'} as any;
component.ngOnInit();
component.onDateChanged(input);
@@ -66,7 +65,7 @@ describe('DateEditorComponent', () => {
it('should flush value on user input', () => {
spyOn(table, 'flushValue').and.callThrough();
const input = {value: '14-03-2016'} as MatDatepickerInputEvent<any>;
const input = { value: '2016-03-14' } as any;
component.ngOnInit();
component.onDateChanged(input);

64
lib/process-services/src/lib/form/widgets/dynamic-table/editors/date/date.editor.ts
View File

@@ -15,32 +15,29 @@
* limitations under the License.
*/
/* eslint-disable @angular-eslint/component-selector */
import { UserPreferencesService, UserPreferenceValues, MomentDateAdapter, MOMENT_DATE_FORMATS } from '@alfresco/adf-core';
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { ADF_DATE_FORMATS, AdfDateFnsAdapter, DateFnsUtils } from '@alfresco/adf-core';
import { Component, Input, OnInit } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import moment, { Moment } from 'moment';
import { DynamicTableColumn } from '../models/dynamic-table-column.model';
import { DynamicTableRow } from '../models/dynamic-table-row.model';
import { DynamicTableModel } from '../models/dynamic-table.widget.model';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { isValid } from 'date-fns';
@Component({
selector: 'adf-date-editor',
templateUrl: './date.editor.html',
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter },
{ provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }
{ provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS },
{ provide: DateAdapter, useClass: AdfDateFnsAdapter }
],
styleUrls: ['./date.editor.scss']
})
export class DateEditorComponent implements OnInit, OnDestroy {
export class DateEditorComponent implements OnInit {
DATE_FORMAT: string = 'DD-MM-YYYY';
value: any;
@Input()
value: Date;
@Input()
table: DynamicTableModel;
@@ -51,43 +48,32 @@ export class DateEditorComponent implements OnInit, OnDestroy {
@Input()
column: DynamicTableColumn;
minDate: Moment;
maxDate: Moment;
minDate: Date;
maxDate: Date;
private onDestroy$ = new Subject<boolean>();
constructor(private dateAdapter: DateAdapter<Moment>, private userPreferencesService: UserPreferencesService) {}
constructor(private dateAdapter: DateAdapter<Date>) {}
ngOnInit() {
this.userPreferencesService
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe((locale) => this.dateAdapter.setLocale(locale));
const momentDateAdapter = this.dateAdapter as AdfDateFnsAdapter;
momentDateAdapter.displayFormat = this.DATE_FORMAT;
const momentDateAdapter = this.dateAdapter as MomentDateAdapter;
momentDateAdapter.overrideDisplayFormat = this.DATE_FORMAT;
this.value = moment(this.table.getCellValue(this.row, this.column), this.DATE_FORMAT);
this.value = this.table.getCellValue(this.row, this.column) as Date;
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
onDateChanged(newDateValue: MatDatepickerInputEvent<Date> | string) {
if (typeof newDateValue === 'string') {
const newValue = DateFnsUtils.parseDate(newDateValue, this.DATE_FORMAT);
onDateChanged(newDateValue: MatDatepickerInputEvent<any> | HTMLInputElement) {
if (newDateValue?.value) {
/* validates the user inputs */
const momentDate = moment(newDateValue.value, this.DATE_FORMAT, true);
if (!momentDate.isValid()) {
this.row.value[this.column.id] = newDateValue.value;
} else {
this.row.value[this.column.id] = `${momentDate.format('YYYY-MM-DD')}T00:00:00.000Z`;
if (isValid(newValue)) {
this.row.value[this.column.id] = `${DateFnsUtils.formatDate(newValue, 'yyyy-MM-dd')}T00:00:00.000Z`;
this.table.flushValue();
} else {
this.row.value[this.column.id] = newDateValue;
}
} else {
/* removes the date */
} else if (newDateValue?.value) {
this.row.value[this.column.id] = `${DateFnsUtils.formatDate(newDateValue?.value, 'yyyy-MM-dd')}T00:00:00.000Z`;
this.table.flushValue();
} else {
this.row.value[this.column.id] = '';
}
}

2
lib/process-services/src/lib/form/widgets/dynamic-table/editors/datetime/datetime.editor.html
View File

@@ -7,7 +7,7 @@
[id]="column.id"
[required]="column.required"
[disabled]="!column.editable"
(focusout)="onDateChanged($any($event).srcElement.value)"
(focusout)="onDateChanged($any($event).target.value)"
(dateChange)="onDateChanged($event)">
<mat-datetimepicker-toggle
matSuffix

16
lib/process-services/src/lib/form/widgets/dynamic-table/editors/datetime/datetime.editor.spec.ts
View File

@@ -16,7 +16,6 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import moment from 'moment';
import { FormFieldModel, FormModel, CoreTestingModule } from '@alfresco/adf-core';
import { DynamicTableColumn } from '../models/dynamic-table-column.model';
import { DynamicTableRow } from '../models/dynamic-table-row.model';
@@ -52,26 +51,27 @@ describe('DateTimeEditorComponent', () => {
component.column = column;
});
it('should update fow value on change', () => {
it('should update row value on change', () => {
component.ngOnInit();
const newDate = moment('22-6-2018 04:20 AM', 'D-M-YYYY hh:mm A');
component.onDateChanged(newDate);
expect(moment(row.value[column.id]).isSame(newDate)).toBeTruthy();
const newDate = new Date('2018-6-22 04:20 AM');
component.onDateChanged({ value: newDate } as any);
expect(row.value[column.id]).toBe('22/06/2018 04:20');
});
it('should update row value upon user input', () => {
const input = '22-6-2018 04:20 AM';
const input = '22/6/2018 04:20';
component.ngOnInit();
component.onDateChanged(input);
const actual = row.value[column.id];
expect(actual).toBe('22-6-2018 04:20 AM');
expect(actual).toBe('2018-06-22T04:20:00.000Z');
});
it('should flush value on user input', () => {
spyOn(table, 'flushValue').and.callThrough();
const input = '22-6-2018 04:20 AM';
const input = '22/6/2018 04:20';
component.ngOnInit();
component.onDateChanged(input);

66
lib/process-services/src/lib/form/widgets/dynamic-table/editors/datetime/datetime.editor.ts
View File

@@ -15,35 +15,31 @@
* limitations under the License.
*/
/* eslint-disable @angular-eslint/component-selector */
import { MOMENT_DATE_FORMATS, MomentDateAdapter, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { ADF_DATETIME_FORMATS, ADF_DATE_FORMATS, AdfDateFnsAdapter, AdfDateTimeFnsAdapter, /*MOMENT_DATE_FORMATS, MomentDateAdapter*/
DateFnsUtils} from '@alfresco/adf-core';
import { Component, Input, OnInit } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import moment, { Moment } from 'moment';
import { DynamicTableColumn } from '../models/dynamic-table-column.model';
import { DynamicTableRow } from '../models/dynamic-table-row.model';
import { DynamicTableModel } from '../models/dynamic-table.widget.model';
import { DatetimeAdapter, MAT_DATETIME_FORMATS } from '@mat-datetimepicker/core';
import { MomentDatetimeAdapter, MAT_MOMENT_DATETIME_FORMATS } from '@mat-datetimepicker/moment';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepickerInputEvent } from '@mat-datetimepicker/core';
@Component({
selector: 'adf-datetime-editor',
templateUrl: './datetime.editor.html',
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter },
{ provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS },
{ provide: DatetimeAdapter, useClass: MomentDatetimeAdapter },
{ provide: MAT_DATETIME_FORMATS, useValue: MAT_MOMENT_DATETIME_FORMATS }
{ provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS },
{ provide: MAT_DATETIME_FORMATS, useValue: ADF_DATETIME_FORMATS },
{ provide: DateAdapter, useClass: AdfDateFnsAdapter },
{ provide: DatetimeAdapter, useClass: AdfDateTimeFnsAdapter }
],
styleUrls: ['./datetime.editor.scss']
})
export class DateTimeEditorComponent implements OnInit, OnDestroy {
export class DateTimeEditorComponent implements OnInit {
DATE_TIME_FORMAT: string = 'DD/MM/YYYY HH:mm';
value: any;
@Input()
value: Date;
@Input()
table: DynamicTableModel;
@@ -54,40 +50,28 @@ export class DateTimeEditorComponent implements OnInit, OnDestroy {
@Input()
column: DynamicTableColumn;
minDate: Moment;
maxDate: Moment;
minDate: Date;
maxDate: Date;
private onDestroy$ = new Subject<boolean>();
constructor(private dateAdapter: DateAdapter<Moment>, private userPreferencesService: UserPreferencesService) {}
constructor(private dateAdapter: DateAdapter<Date>) {}
ngOnInit() {
this.userPreferencesService
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe((locale) => this.dateAdapter.setLocale(locale));
const momentDateAdapter = this.dateAdapter as AdfDateFnsAdapter;
momentDateAdapter.displayFormat = this.DATE_TIME_FORMAT;
const momentDateAdapter = this.dateAdapter as MomentDateAdapter;
momentDateAdapter.overrideDisplayFormat = this.DATE_TIME_FORMAT;
this.value = moment(this.table.getCellValue(this.row, this.column), this.DATE_TIME_FORMAT);
this.value = this.table.getCellValue(this.row, this.column) as Date;
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
onDateChanged(newDateValue) {
if (newDateValue?.value) {
const newValue = moment(newDateValue.value, this.DATE_TIME_FORMAT);
this.row.value[this.column.id] = newDateValue.value.format(this.DATE_TIME_FORMAT);
onDateChanged(newDateValue: MatDatetimepickerInputEvent<Date> | string) {
if (typeof newDateValue === 'string') {
const newValue = DateFnsUtils.parseDate(newDateValue, this.DATE_TIME_FORMAT);
this.value = newValue;
this.row.value[this.column.id] = newValue.toISOString();
this.table.flushValue();
} else if (newDateValue) {
const newValue = moment(newDateValue, this.DATE_TIME_FORMAT);
this.value = newValue;
this.row.value[this.column.id] = newDateValue;
} else if (newDateValue.value) {
const newValue = DateFnsUtils.formatDate(newDateValue.value, this.DATE_TIME_FORMAT);
this.row.value[this.column.id] = newValue;
this.value = newDateValue.value;
this.table.flushValue();
} else {
this.row.value[this.column.id] = '';

94
lib/process-services/src/lib/form/widgets/dynamic-table/editors/models/date-cell-validator-model.spec.ts Normal file
View File

@@ -0,0 +1,94 @@
/*!
* @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 { DateCellValidator } from './date-cell-validator-model';
import { DynamicTableColumn } from './dynamic-table-column.model';
import { DynamicTableRow } from './dynamic-table-row.model';
import { DynamicRowValidationSummary } from './dynamic-row-validation-summary.model';
describe('DateCellValidator', () => {
let validator: DateCellValidator;
beforeEach(() => {
validator = new DateCellValidator();
});
it('should require column to validate', () => {
expect(validator.isSupported(null)).toBeFalse();
});
it('should support only editable columns', () => {
const readonly = { editable: false, type: DateCellValidator.DATE_TYPE } as DynamicTableColumn;
expect(validator.isSupported(readonly)).toBeFalse();
const editable = { editable: true, type: DateCellValidator.DATE_TYPE } as DynamicTableColumn;
expect(validator.isSupported(editable)).toBeTrue();
});
it('should support only date column type', () => {
const date = { editable: true, type: DateCellValidator.DATE_TYPE } as DynamicTableColumn;
expect(validator.isSupported(date)).toBeTrue();
const unsupported = { editable: true, type: 'unknown' } as DynamicTableColumn;
expect(validator.isSupported(unsupported)).toBeFalse();
});
it('should skip validating unsupported columns', () => {
const column = { editable: true, type: 'unknown' } as DynamicTableColumn;
const row = {} as DynamicTableRow;
expect(validator.validate(row, column)).toBeTrue();
});
it('should reject when required column has no value', () => {
const column = { id: 'col1', required: true, editable: true, type: DateCellValidator.DATE_TYPE } as DynamicTableColumn;
const row = { value: { col1: null } } as DynamicTableRow;
expect(validator.validate(row, column)).toBeFalse();
});
it('should approve when optional column has no value', () => {
const column = { id: 'col1', required: false, editable: true, type: DateCellValidator.DATE_TYPE } as DynamicTableColumn;
const row = { value: { col1: null } } as DynamicTableRow;
expect(validator.validate(row, column)).toBeTrue();
});
it('should approve the valid datetime value', () => {
const column = { id: 'col1', required: true, editable: true, type: DateCellValidator.DATE_TYPE } as DynamicTableColumn;
const row = { value: { col1: '2023-10-12T10:59:24.773Z' } } as DynamicTableRow;
expect(validator.validate(row, column)).toBeTrue();
});
it('should reject invalid datetime value', () => {
const column = { id: 'col1', required: true, editable: true, type: DateCellValidator.DATE_TYPE } as DynamicTableColumn;
const row = { value: { col1: '!2023-10-12T10:59:24.773Z' } } as DynamicTableRow;
expect(validator.validate(row, column)).toBeFalse();
});
it('should update validation summary of rejection', () => {
const column = { id: 'col1', name: 'created_on', required: true, editable: true, type: DateCellValidator.DATE_TYPE } as DynamicTableColumn;
const row = { value: { col1: '!2023-10-12T10:59:24.773Z' } } as DynamicTableRow;
const summary = new DynamicRowValidationSummary();
expect(validator.validate(row, column, summary)).toBeFalse();
expect(summary.isValid).toBeFalse();
expect(summary.message).toBe(`Invalid 'created_on' format.`);
});
});

24
lib/process-services/src/lib/form/widgets/dynamic-table/editors/models/date-cell-validator-model.ts
View File

@@ -17,34 +17,40 @@
/* eslint-disable @angular-eslint/component-selector */
import moment from 'moment';
import { CellValidator } from './cell-validator.model';
import { DynamicRowValidationSummary } from './dynamic-row-validation-summary.model';
import { DynamicTableColumn } from './dynamic-table-column.model';
import { DynamicTableRow } from './dynamic-table-row.model';
import { isValid } from 'date-fns';
export class DateCellValidator implements CellValidator {
private supportedTypes: string[] = ['Date'];
static DATE_TYPE = 'Date';
private supportedTypes: string[] = [DateCellValidator.DATE_TYPE];
isSupported(column: DynamicTableColumn): boolean {
return column?.editable && this.supportedTypes.indexOf(column.type) > -1;
return !!(column?.editable && this.supportedTypes.indexOf(column?.type) > -1);
}
validate(row: DynamicTableRow, column: DynamicTableColumn, summary?: DynamicRowValidationSummary): boolean {
if (this.isSupported(column)) {
const value = row.value[column.id];
const value = row?.value[column.id];
if (!value && !column.required) {
return true;
}
if (value) {
const dateValue = new Date(value);
if (isValid(dateValue)) {
return true;
}
const dateValue = moment(value, 'YYYY-MM-DDTHH:mm:ss.SSSSZ', true);
if (!dateValue.isValid()) {
if (summary) {
summary.isValid = false;
summary.message = `Invalid '${column.name}' format.`;
}
return false;
} else {
return !column.required;
}
}

6
lib/process-services/src/lib/form/widgets/dynamic-table/editors/models/dynamic-row-validation-summary.model.ts
View File

@@ -17,14 +17,12 @@
import { ErrorMessageModel } from '@alfresco/adf-core';
/* eslint-disable @angular-eslint/component-selector */
export class DynamicRowValidationSummary extends ErrorMessageModel {
isValid: boolean;
constructor(json?: any) {
super(json);
this.isValid = json.isValid;
this.isValid = json?.isValid;
}
}

5
lib/process-services/src/lib/form/widgets/dynamic-table/editors/models/dynamic-table.widget.model.ts
View File

@@ -15,9 +15,6 @@
* limitations under the License.
*/
/* eslint-disable @angular-eslint/component-selector */
import moment from 'moment';
import { ValidateDynamicTableRowEvent } from '../../../../events/validate-dynamic-table-row.event';
import { FormService, FormFieldModel, FormWidgetModel } from '@alfresco/adf-core';
import { CellValidator } from './cell-validator.model';
@@ -178,7 +175,7 @@ export class DynamicTableModel extends FormWidgetModel {
if (column.type === 'Date') {
if (rowValue) {
return moment(rowValue.split('T')[0], 'YYYY-MM-DD').format('DD-MM-YYYY');
return new Date(rowValue.split('T')[0]);
}
}

6
lib/testing/src/lib/protractor/process-services-cloud/pages/edit-task-filter-cloud-component.page.ts
View File

@@ -16,7 +16,6 @@
*/
import { browser, protractor, ElementFinder, $$, $ } from 'protractor';
import { EditTaskFilterDialogPage } from './dialog/edit-task-filter-dialog.page';
import { BrowserVisibility } from '../../core/utils/browser-visibility';
import { BrowserActions } from '../../core/utils/browser-actions';
import { DropdownPage } from '../../core/pages/material/dropdown.page';
@@ -59,7 +58,6 @@ export class EditTaskFilterCloudComponentPage {
dueDateRangeDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-dueDateRange']`));
dueDateRangeWithin = new DatePickerPage($(`mat-datepicker-toggle[data-automation-id='adf-cloud-edit-picker-date-range-dueDateRange']`));
editTaskFilterDialogPage = new EditTaskFilterDialogPage();
peopleCloudComponent = new PeopleCloudComponentPage();
groupCloudComponent = new GroupCloudComponentPage();
@@ -68,10 +66,6 @@ export class EditTaskFilterCloudComponentPage {
private expansionPanelExtended = this.rootElement.$('mat-expansion-panel-header.mat-expanded');
private content = this.rootElement.$('div.mat-expansion-panel-content[style*="visible"]');
editTaskFilterDialog(): EditTaskFilterDialogPage {
return this.editTaskFilterDialogPage;
}
async isFilterDisplayed(): Promise<boolean> {
return BrowserVisibility.waitUntilElementIsVisible(this.filter);
}