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

[ADF-4716] Dynamic Table not working properly (regression) (#4896)

Browse Source 
* [ADF-4716] Dynamic Table not working properly (regression)
[ADF-4722] Wrong date is displayed when updating row of dynamic table
* removing dynamic table date added

* * fix e2e
This commit is contained in:
dhrn
2019-07-09 16:10:27 +05:30
committed by Eugenio Romano
parent 080eef891b
commit cdc39759ca
5 changed files with 101 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
lib/core/form/components/widgets/dynamic-table/date-cell-validator-model.ts
View File

@@ -37,7 +37,12 @@ export class DateCellValidator implements CellValidator {
if (this.isSupported(column)) {
const value = row.value[column.id];
const dateValue = moment(value, 'D-M-YYYY');
if (!value && !column.required) {
return true;
}
const dateValue = moment(value, 'YYYY-MM-DDTHH:mm:ss.SSSSZ', true);
if (!dateValue.isValid()) {
if (summary) {
summary.isValid = false;

4
lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.html
View File

@@ -1,6 +1,6 @@
<div>
<mat-form-field class="adf-date-editor">
<label [attr.for]="column.id">{{column.name}} (DATE_FORMAT)</label>
<label [attr.for]="column.id">{{column.name}} ({{DATE_FORMAT}})</label>
<input matInput
id="dateInput"
type="text"
@@ -9,7 +9,7 @@
[id]="column.id"
[required]="column.required"
[disabled]="!column.editable"
(focusout)="onDateChanged($event.srcElement.value)"
(focusout)="onDateChanged($event.srcElement)"
(dateChange)="onDateChanged($event)">
<mat-datepicker-toggle *ngIf="column.editable" matSuffix [for]="datePicker" class="adf-date-editor-button" ></mat-datepicker-toggle>
</mat-form-field>

102
lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.spec.ts
View File

@@ -16,15 +16,16 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import moment from 'moment-es6';
import { FormFieldModel, FormModel } from '../../../index';
import { DynamicTableColumn } from './../../dynamic-table-column.model';
import { DynamicTableRow } from './../../dynamic-table-row.model';
import { DynamicTableColumn } from './../../dynamic-table-column.model';
import { DynamicTableRow } from './../../dynamic-table-row.model';
import { DynamicTableModel } from './../../dynamic-table.widget.model';
import { DateEditorComponent } from './date.editor';
import { setupTestBed } from '../../../../../../testing/setupTestBed';
import { CoreModule } from '../../../../../../core.module';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { By } from '@angular/platform-browser';
import { MatDatepickerInputEvent } from '@angular/material';
describe('DateEditorComponent', () => {
let component: DateEditorComponent;
@@ -59,31 +60,90 @@ describe('DateEditorComponent', () => {
expect(fixture.componentInstance instanceof DateEditorComponent).toBe(true, 'should create DateEditorComponent');
});
it('should update fow value on change', () => {
component.ngOnInit();
const newDate = moment('14-03-1879', 'DD-MM-YYYY');
component.onDateChanged(newDate);
expect(row.value[column.id]).toBe('1879-03-14T00:00:00.000Z');
describe('using Date Piker', () => {
it('should update row value on change', () => {
const input = <MatDatepickerInputEvent<any>> {value: '14-03-2016' };
component.ngOnInit();
component.onDateChanged(input);
const actual = row.value[column.id];
expect(actual).toBe('2016-03-14T00:00:00.000Z');
});
it('should flush value on user input', () => {
spyOn(table, 'flushValue').and.callThrough();
const input = <MatDatepickerInputEvent<any>> {value: '14-03-2016' };
component.ngOnInit();
component.onDateChanged(input);
expect(table.flushValue).toHaveBeenCalled();
});
});
it('should update row value upon user input', () => {
const input = {value: '14-03-2016' };
describe('user manual input', () => {
component.ngOnInit();
component.onDateChanged(input);
beforeEach(() => {
spyOn(component, 'onDateChanged').and.callThrough();
spyOn(table, 'flushValue').and.callThrough();
});
const actual = row.value[column.id];
expect(actual).toBe('2016-03-14T00:00:00.000Z');
});
it('should update row value upon user input', () => {
const inputElement = fixture.debugElement.query(By.css('input'));
inputElement.nativeElement.value = '14-03-1879';
inputElement.nativeElement.dispatchEvent(new Event('focusout'));
fixture.detectChanges();
it('should flush value on user input', () => {
spyOn(table, 'flushValue').and.callThrough();
const input = {value: '14-03-2016' };
expect(component.onDateChanged).toHaveBeenCalled();
const actual = row.value[column.id];
expect(actual).toBe('1879-03-14T00:00:00.000Z');
});
component.ngOnInit();
component.onDateChanged(input);
it('should flush value on user input', () => {
const inputElement = fixture.debugElement.query(By.css('input'));
inputElement.nativeElement.value = '14-03-1879';
inputElement.nativeElement.dispatchEvent(new Event('focusout'));
fixture.detectChanges();
expect(table.flushValue).toHaveBeenCalled();
});
it('should not flush value when user input is wrong', () => {
const inputElement = fixture.debugElement.query(By.css('input'));
inputElement.nativeElement.value = 'ab-bc-de';
inputElement.nativeElement.dispatchEvent(new Event('focusout'));
fixture.detectChanges();
expect(table.flushValue).not.toHaveBeenCalled();
inputElement.nativeElement.value = '12';
inputElement.nativeElement.dispatchEvent(new Event('focusout'));
fixture.detectChanges();
expect(table.flushValue).not.toHaveBeenCalled();
inputElement.nativeElement.value = '12-11';
inputElement.nativeElement.dispatchEvent(new Event('focusout'));
fixture.detectChanges();
expect(table.flushValue).not.toHaveBeenCalled();
inputElement.nativeElement.value = '12-13-12';
inputElement.nativeElement.dispatchEvent(new Event('focusout'));
fixture.detectChanges();
expect(table.flushValue).not.toHaveBeenCalled();
});
it('should remove the date when user removes manually', () => {
const inputElement = fixture.debugElement.query(By.css('input'));
inputElement.nativeElement.value = '';
inputElement.nativeElement.dispatchEvent(new Event('focusout'));
fixture.detectChanges();
expect(component.onDateChanged).toHaveBeenCalled();
const actual = row.value[column.id];
expect(actual).toBe('');
});
expect(table.flushValue).toHaveBeenCalled();
});
});

12
lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.ts
View File

@@ -22,7 +22,7 @@ import { UserPreferencesService, UserPreferenceValues } from '../../../../../../
import { MomentDateAdapter } from '../../../../../../utils/momentDateAdapter';
import { MOMENT_DATE_FORMATS } from '../../../../../../utils/moment-date-formats.model';
import { Component, Input, OnInit } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
import { DateAdapter, MAT_DATE_FORMATS, MatDatepickerInputEvent } from '@angular/material';
import moment from 'moment-es6';
import { Moment } from 'moment';
import { DynamicTableColumn } from './../../dynamic-table-column.model';
@@ -67,19 +67,23 @@ export class DateEditorComponent implements OnInit {
const momentDateAdapter = <MomentDateAdapter> this.dateAdapter;
momentDateAdapter.overrideDisplayFormat = this.DATE_FORMAT;
this.value = moment(this.table.getCellValue(this.row, this.column), 'YYYY-MM-DD');
this.value = moment(this.table.getCellValue(this.row, this.column), this.DATE_FORMAT);
}
onDateChanged(newDateValue) {
onDateChanged(newDateValue: MatDatepickerInputEvent<any> | HTMLInputElement) {
if (newDateValue && newDateValue.value) {
/* validates the user inputs */
const momentDate = moment(newDateValue.value, this.DATE_FORMAT, true);
if (!momentDate.isValid()) {
this.row.value[this.column.id] = '';
this.row.value[this.column.id] = newDateValue.value;
} else {
this.row.value[this.column.id] = `${momentDate.format('YYYY-MM-DD')}T00:00:00.000Z`;
this.table.flushValue();
}
} else {
/* removes the date */
this.row.value[this.column.id] = '';
}
}