diff --git a/lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.html b/lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.html new file mode 100644 index 0000000000..55be3f2f1c --- /dev/null +++ b/lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.html @@ -0,0 +1,20 @@ +
+ + + + + + +
diff --git a/lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.scss b/lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.scss new file mode 100644 index 0000000000..3be29ca848 --- /dev/null +++ b/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; + } +} diff --git a/lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.spec.ts b/lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.spec.ts new file mode 100644 index 0000000000..d0c635e82e --- /dev/null +++ b/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; + let row: DynamicTableRow; + let column: DynamicTableColumn; + let table: DynamicTableModel; + + setupTestBed({ + imports: [ + NoopAnimationsModule, + CoreModule.forRoot() + ] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DateTimeEditorComponent); + component = fixture.componentInstance; + + row = { value: { date: '1879-03-14T00:00:00.000Z' } }; + column = { 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(); + }); + +}); diff --git a/lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.ts b/lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.ts new file mode 100644 index 0000000000..32f1f32b26 --- /dev/null +++ b/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, + private preferences: UserPreferencesService) { + } + + ngOnInit() { + this.preferences.locale$.subscribe((locale) => { + this.dateAdapter.setLocale(locale); + }); + let 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] = ''; + } + } + +} diff --git a/lib/core/form/components/widgets/dynamic-table/editors/row.editor.html b/lib/core/form/components/widgets/dynamic-table/editors/row.editor.html index cc4b07d634..7f283a27e5 100644 --- a/lib/core/form/components/widgets/dynamic-table/editors/row.editor.html +++ b/lib/core/form/components/widgets/dynamic-table/editors/row.editor.html @@ -16,7 +16,13 @@ [column]="column"> - +
+ + +