[ADF-3268] added datetime widget for dynamic table (#3529)

lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.html

@@ -0,0 +1,20 @@
+<div>
+    <mat-form-field class="adf-date-editor">
+        <label [attr.for]="column.id">{{column.name}} {{DATE_FORMAT}}</label>
+        <input matInput
+            [matDatetimepicker]="datetimePicker"
+            [(ngModel)]="value"
+            [id]="column.id"
+            [required]="column.required"
+            [disabled]="!column.editable"
+            (focusout)="onDateChanged($event.srcElement.value)"
+            (dateChange)="onDateChanged($event)">
+            <mat-datetimepicker-toggle matSuffix [for]="datetimePicker"
+                            *ngIf="column.editable"
+                            class="adf-date-editor-button"></mat-datetimepicker-toggle>
+    </mat-form-field>
+    <mat-datetimepicker #datetimePicker
+                        type="datetime"
+                        openOnFocus="true"
+                        timeInterval="5"></mat-datetimepicker>
+</div>

lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.scss

@@ -0,0 +1,10 @@
+.adf {
+    &-date-editor {
+        width: 100%;
+    }
+
+    &-date-editor-button {
+        position: relative;
+        top: 25px;
+    }
+}

lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.spec.ts

@@ -0,0 +1,89 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * 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 { 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 { DynamicTableModel } from './../../dynamic-table.widget.model';
+import { DateTimeEditorComponent } from './datetime.editor';
+import { setupTestBed } from '../../../../../../testing/setupTestBed';
+import { CoreModule } from '../../../../../../core.module';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('DateTimeEditorComponent', () => {
+    let component: DateTimeEditorComponent;
+    let fixture: ComponentFixture<DateTimeEditorComponent>;
+    let row: DynamicTableRow;
+    let column: DynamicTableColumn;
+    let table: DynamicTableModel;
+
+    setupTestBed({
+        imports: [
+            NoopAnimationsModule,
+            CoreModule.forRoot()
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DateTimeEditorComponent);
+        component = fixture.componentInstance;
+
+        row = <DynamicTableRow> { value: { date: '1879-03-14T00:00:00.000Z' } };
+        column = <DynamicTableColumn> { id: 'datetime', type: 'Datetime' };
+        const field = new FormFieldModel(new FormModel());
+        table = new DynamicTableModel(field, null);
+        table.rows.push(row);
+        table.columns.push(column);
+        component.table = table;
+        component.row = row;
+        component.column = column;
+    });
+
+    it('should create instance of DateTimeEditorComponent', () => {
+        expect(fixture.componentInstance instanceof DateTimeEditorComponent).toBe(true, 'should create DateTimeEditorComponent');
+    });
+
+    it('should update fow value on change', () => {
+        component.ngOnInit();
+        let 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();
+    });
+
+    it('should update row value upon user input', () => {
+        const input = '22-6-2018 04:20 AM';
+
+        component.ngOnInit();
+        component.onDateChanged(input);
+
+        let actual = row.value[column.id];
+        expect(actual).toBe('22-6-2018 04:20 AM');
+    });
+
+    it('should flush value on user input', () => {
+        spyOn(table, 'flushValue').and.callThrough();
+        const input = '22-6-2018 04:20 AM';
+
+        component.ngOnInit();
+        component.onDateChanged(input);
+
+        expect(table.flushValue).toHaveBeenCalled();
+    });
+
+});

lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.ts

@@ -0,0 +1,92 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * 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.
+ */
+
+/* tslint:disable:component-selector  */
+
+import { UserPreferencesService } from '../../../../../../services/user-preferences.service';
+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 moment from 'moment-es6';
+import { Moment } from 'moment';
+import { DynamicTableColumn } from './../../dynamic-table-column.model';
+import { DynamicTableRow } from './../../dynamic-table-row.model';
+import { DynamicTableModel } from './../../dynamic-table.widget.model';
+import { DatetimeAdapter, MAT_DATETIME_FORMATS } from '@mat-datetimepicker/core';
+import { MomentDatetimeAdapter, MAT_MOMENT_DATETIME_FORMATS } from '@mat-datetimepicker/moment';
+
+@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 }
+    ],
+    styleUrls: ['./datetime.editor.scss']
+})
+export class DateTimeEditorComponent implements OnInit {
+
+    DATE_FORMAT: string = 'D-M-YYYY hh:mm A';
+
+    value: any;
+
+    @Input()
+    table: DynamicTableModel;
+
+    @Input()
+    row: DynamicTableRow;
+
+    @Input()
+    column: DynamicTableColumn;
+
+    minDate: Moment;
+    maxDate: Moment;
+
+    constructor(private dateAdapter: DateAdapter<Moment>,
+                private preferences: UserPreferencesService) {
+    }
+
+    ngOnInit() {
+        this.preferences.locale$.subscribe((locale) => {
+            this.dateAdapter.setLocale(locale);
+        });
+        let momentDateAdapter = <MomentDateAdapter> this.dateAdapter;
+        momentDateAdapter.overrideDisplyaFormat = this.DATE_FORMAT;
+
+        this.value = moment(this.table.getCellValue(this.row, this.column), this.DATE_FORMAT);
+    }
+
+    onDateChanged(newDateValue) {
+        if (newDateValue && newDateValue.value) {
+            const newValue = moment(newDateValue.value, this.DATE_FORMAT);
+            this.row.value[this.column.id] = newDateValue.value.format(this.DATE_FORMAT);
+            this.value = newValue;
+            this.table.flushValue();
+        } else if (newDateValue) {
+            const newValue = moment(newDateValue, this.DATE_FORMAT);
+            this.value = newValue;
+            this.row.value[this.column.id] = newDateValue;
+            this.table.flushValue();
+        } else {
+            this.row.value[this.column.id] = '';
+        }
+    }
+
+}

lib/core/form/components/widgets/dynamic-table/editors/row.editor.html

@@ -16,7 +16,13 @@
                     [column]="column">
                 </adf-date-editor>
                 </div>
-
+                <div *ngSwitchCase="'Datetime'">
+                    <adf-datetime-editor
+                        [table]="table"
+                        [row]="row"
+                        [column]="column">
+                    </adf-datetime-editor>
+                </div>
                 <div *ngSwitchCase="'Boolean'">
                 <adf-boolean-editor
                     [table]="table"

lib/core/form/components/widgets/index.ts

@@ -28,6 +28,7 @@ import { DropdownWidgetComponent } from './dropdown/dropdown.widget';
 import { DynamicTableWidgetComponent } from './dynamic-table/dynamic-table.widget';
 import { BooleanEditorComponent } from './dynamic-table/editors/boolean/boolean.editor';
 import { DateEditorComponent } from './dynamic-table/editors/date/date.editor';
+import { DateTimeEditorComponent } from './dynamic-table/editors/datetime/datetime.editor';
 import { DropdownEditorComponent } from './dynamic-table/editors/dropdown/dropdown.editor';
 import { RowEditorComponent } from './dynamic-table/editors/row.editor';
 import { TextEditorComponent } from './dynamic-table/editors/text/text.editor';
@@ -80,6 +81,7 @@ export * from './dynamic-table/editors/date/date.editor';
 export * from './dynamic-table/editors/dropdown/dropdown.editor';
 export * from './dynamic-table/editors/boolean/boolean.editor';
 export * from './dynamic-table/editors/text/text.editor';
+export * from './dynamic-table/editors/datetime/datetime.editor';
 export * from './text/text-mask.component';
 
 export const WIDGET_DIRECTIVES: any[] = [
@@ -108,7 +110,8 @@ export const WIDGET_DIRECTIVES: any[] = [
     RowEditorComponent,
     ErrorWidgetComponent,
     DocumentWidgetComponent,
-    DateTimeWidgetComponent
+    DateTimeWidgetComponent,
+    DateTimeEditorComponent
 ];
 
 export const MASK_DIRECTIVE: any[] = [