Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[AAE-4241] Populate date and datetime widgets on retrieve metadata #6412

Merged
merged 6 commits into from
Jan 11, 2021
Merged

[AAE-4241] Populate date and datetime widgets on retrieve metadata #6412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d904033
AAE-4241 Populate date and datetime widget on retrieve metadata
pmartinezga Dec 3, 2020
99f9277
AAE-4241 Trigger build
pmartinezga Dec 22, 2020
931ca57
AAE-4241 Use on change to allow inline editing
pmartinezga Dec 28, 2020
d93982b
AAE-4241 Fix unit tests
pmartinezga Jan 4, 2021
7ab42e7
AAE-4241 Increase coverage
pmartinezga Jan 7, 2021
8bbbd4a
AAE-4241 Add coverage
pmartinezga Jan 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
107 changes: 107 additions & 0 deletions lib/core/form/components/widgets/date-time/date-time.widget.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { setupTestBed } from '../../../../testing/setup-test-bed';
import { CoreTestingModule } from '../../../../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { MatTooltipModule } from '@angular/material/tooltip';
import { SimpleChanges } from '@angular/core';

describe('DateTimeWidgetComponent', () => {

Expand Down Expand Up @@ -185,4 +186,110 @@ describe('DateTimeWidgetComponent', () => {
expect(tooltip).toEqual(widget.field.tooltip);
}));
});

it('should display always the json value', () => {
const field = new FormFieldModel(new FormModel(), {
id: 'date-field-id',
name: 'datetime-field-name',
value: '12-30-9999 10:30 AM',
type: 'datetime',
readOnly: 'false'
});
field.isVisible = true;
field.dateDisplayFormat = 'MM-DD-YYYY HH:mm A';
widget.field = field;
widget.ngOnInit();
fixture.detectChanges();
fixture.whenStable()
.then(() => {
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 newField = { ...field, value: '03-02-2020 12:00 AM' };

const changes: SimpleChanges = {
'field': {
previousValue: field,
currentValue: newField,
firstChange: false,
isFirstChange(): boolean { return this.firstChange; }
}
};
widget.ngOnChanges(changes);
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(dateElement.value).toContain('03-02-2020 12:00 AM');
});
});
});

it('should not call on change when is first change or field is not set or the field value does not change', () => {
const field = new FormFieldModel(new FormModel(), {
id: 'datetime-field-id',
name: 'datetime-field-name',
value: '12-30-9999 10:30 AM',
type: 'datetime',
readOnly: 'false'
});
field.isVisible = true;
field.dateDisplayFormat = 'MM-DD-YYYY HH:mm A',
widget.field = field;
widget.ngOnInit();
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(element.querySelector('#datetime-field-id')).toBeDefined();
expect(element.querySelector('#datetime-field-id')).not.toBeNull();
const dateTimeElement: any = element.querySelector('#datetime-field-id');
expect(dateTimeElement.value).toContain('12-30-9999 10:30 AM');

const newField = { ...field, value: '03-02-2020 12:00 AM' };

let changes: SimpleChanges = {
'field': {
previousValue: field,
currentValue: newField,
firstChange: true,
isFirstChange(): boolean { return this.firstChange; }
}
};
widget.ngOnChanges(changes);
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(dateTimeElement.value).toContain('12-30-9999 10:30 AM');
changes = {};
widget.ngOnChanges(changes);
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(dateTimeElement.value).toContain('12-30-9999 10:30 AM');
changes = {
'field': {
previousValue: field,
currentValue: field,
firstChange: false,
isFirstChange(): boolean { return this.firstChange; }
}
};
widget.ngOnChanges(changes);
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(dateTimeElement.value).toContain('12-30-9999 10:30 AM');
changes = null;
widget.ngOnChanges(changes);
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(dateTimeElement.value).toContain('12-30-9999 10:30 AM');
});
});
});
});
});
});
});
11 changes: 9 additions & 2 deletions lib/core/form/components/widgets/date-time/date-time.widget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

/* tslint:disable:component-selector */

import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
import { Component, OnInit, ViewEncapsulation, OnDestroy, OnChanges, SimpleChanges } 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';
Expand All @@ -43,7 +43,7 @@ import { takeUntil } from 'rxjs/operators';
styleUrls: ['./date-time.widget.scss'],
encapsulation: ViewEncapsulation.None
})
export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy, OnChanges {

minDate: Moment;
maxDate: Moment;
Expand Down Expand Up @@ -81,6 +81,13 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit,
'minutes');
}

ngOnChanges(changes: SimpleChanges): void {
if (changes && changes.field && !changes.field.firstChange && changes.field.currentValue.value !== changes.field.previousValue.value) {
this.displayDate = moment(changes.field.currentValue.value, this.field.dateDisplayFormat)
.add(moment(changes.field.currentValue.value, this.field.dateDisplayFormat).utcOffset(), 'minutes');
}
}

ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
Expand Down
107 changes: 107 additions & 0 deletions lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { setupTestBed, FormFieldModel, FormModel } from '@alfresco/adf-core';
import moment from 'moment-es6';
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { SimpleChanges } from '@angular/core';

describe('DateWidgetComponent', () => {

Expand Down Expand Up @@ -196,4 +197,110 @@ describe('DateWidgetComponent', () => {
expect(tooltip).toEqual(widget.field.tooltip);
}));
});

it('should display always the json value', () => {
const field = new FormFieldModel(new FormModel(), {
id: 'date-field-id',
name: 'date-name',
value: '12-30-9999',
type: 'date',
readOnly: 'false'
});
field.isVisible = true;
field.dateDisplayFormat = 'MM-DD-YYYY';
widget.field = field;
widget.ngOnInit();
fixture.detectChanges();
fixture.whenStable()
.then(() => {
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');

const newField = { ...field, value: '03-02-2020' };

const changes: SimpleChanges = {
'field': {
previousValue: field,
currentValue: newField,
firstChange: false,
isFirstChange(): boolean { return this.firstChange; }
}
};
widget.ngOnChanges(changes);
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(dateElement.value).toContain('03-02-2020');
});
});
});

it('should not call on change when is first change or field is not set or the field value does not change', () => {
const field = new FormFieldModel(new FormModel(), {
id: 'date-field-id',
name: 'date-name',
value: '12-30-9999',
type: 'date',
readOnly: 'false'
});
field.isVisible = true;
field.dateDisplayFormat = 'MM-DD-YYYY';
widget.field = field;
widget.ngOnInit();
fixture.detectChanges();
fixture.whenStable()
.then(() => {
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');

const newField = { ...field, value: '03-02-2020' };

let changes: SimpleChanges = {
'field': {
previousValue: field,
currentValue: newField,
firstChange: true,
isFirstChange(): boolean { return this.firstChange; }
}
};
widget.ngOnChanges(changes);
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(dateElement.value).toContain('12-30-9999');
changes = {};
widget.ngOnChanges(changes);
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(dateElement.value).toContain('12-30-9999');
changes = {
'field': {
previousValue: field,
currentValue: field,
firstChange: false,
isFirstChange(): boolean { return this.firstChange; }
}
};
widget.ngOnChanges(changes);
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(dateElement.value).toContain('12-30-9999');
changes = null;
widget.ngOnChanges(changes);
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(dateElement.value).toContain('12-30-9999');
});
});
});
});
});
});
});
10 changes: 8 additions & 2 deletions lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

/* tslint:disable:component-selector */

import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
import { Component, OnInit, ViewEncapsulation, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import moment from 'moment-es6';
import { Moment } from 'moment';
Expand Down Expand Up @@ -46,7 +46,7 @@ import { MOMENT_DATE_FORMATS, MomentDateAdapter, WidgetComponent,
},
encapsulation: ViewEncapsulation.None
})
export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, OnDestroy, OnChanges {

typeId = 'DateCloudWidgetComponent';
DATE_FORMAT_CLOUD = 'YYYY-MM-DD';
Expand Down Expand Up @@ -84,6 +84,12 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
this.displayDate = moment(this.field.value, this.field.dateDisplayFormat);
}

ngOnChanges(changes: SimpleChanges): void {
if (changes && changes.field && !changes.field.firstChange && changes.field.currentValue.value !== changes.field.previousValue.value) {
this.displayDate = moment(changes.field.currentValue.value, this.field.dateDisplayFormat);
}
}

ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
Expand Down