diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table-row.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table-row.ts index f6015e901b..ce471b13b2 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table-row.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table-row.ts @@ -17,6 +17,7 @@ export interface DynamicTableRow { + isNew: boolean; selected: boolean; value: any; diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table.model.ts index 1ca9ae732d..65271329c1 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table.model.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table.model.ts @@ -104,4 +104,24 @@ export class DynamicTableModel extends FormWidgetModel { } } } + + getCellValue(row: DynamicTableRow, column: DynamicTableColumn): any { + let result = row.value[column.id]; + + if (column.type === 'Dropdown') { + return result.name; + } + + if (column.type === 'Boolean') { + return result ? true : false; + } + + if (column.type === 'Date') { + if (result) { + return moment(result.split('T')[0], 'YYYY-M-D').format('DD-MM-YYYY'); + } + } + + return result || ''; + } } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.css b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.css index 7f133c4f0a..58fad7d660 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.css +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.css @@ -11,6 +11,10 @@ width: 100%; } +.dynamic-table-widget__table-editor { + width: 100%; +} + .dynamic-table-widget__invalid .mdl-textfield__input { border-color: #d50000; } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html index 799bc19d86..8d4c92bb1e 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html @@ -1,54 +1,99 @@ -
+
{{content.name}}
- - - - - - - - - - - -
- {{column.name}} -
- {{row.value[column.id]}} -
+
+ + + + + + + + + + + +
+ {{column.name}} +
+ {{ getCellValue(row, column) }} +
-
- - - - - -
+
+ + + + + +
+
- {{content.validationSummary}} +
+
+
+
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+
+
+
+ + +
+
+ +
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts index cab933f33a..6e8cc88ead 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts @@ -15,9 +15,9 @@ * limitations under the License. */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, ElementRef } from '@angular/core'; import { WidgetComponent } from './../widget.component'; -import { DynamicTableModel, DynamicTableRow } from './../core/index'; +import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../core/index'; @Component({ moduleId: module.id, @@ -30,6 +30,13 @@ export class DynamicTableWidget extends WidgetComponent implements OnInit { @Input() content: DynamicTableModel; + editMode: boolean; + editRow: DynamicTableRow; + + constructor(private elementRef: ElementRef) { + super(); + } + ngOnInit() { } @@ -55,17 +62,67 @@ export class DynamicTableWidget extends WidgetComponent implements OnInit { } } - addNewRow() { - console.log('add new row clicked'); - } - deleteSelection() { if (this.content) { this.content.deleteRow(this.content.selectedRow); } } + addNewRow() { + if (this.content) { + this.editRow = { selected: false, value: {} }; + this.editMode = true; + } + } + editSelection() { - console.log('edit selection clicked'); + if (this.content) { + this.editRow = this.copyRow(this.content.selectedRow); + this.editMode = true; + } + } + + getCellValue(row: DynamicTableRow, column: DynamicTableColumn): any { + if (this.content) { + return this.content.getCellValue(row, column); + } + return null; + } + + onSaveChanges() { + if (this.content) { + if (this.editRow.isNew) { + // TODO: create new record + } else { + this.content.selectedRow.value = this.copyObject(this.editRow.value); + } + this.content.flushValue(); + } + this.editMode = false; + } + + onCancelChanges() { + this.editMode = false; + this.editRow = null; + } + + private copyRow(row: DynamicTableRow): DynamicTableRow { + return { + value: this.copyObject(row.value) + }; + } + + private copyObject(obj: any): any { + let result = Object.assign({}, obj); + + if (typeof obj === 'object' && obj !== null && obj !== undefined) { + Object.keys(obj).forEach(key => { + if (typeof obj[key] === 'object') { + result[key] = this.copyObject(obj[key]); + } + }); + } + + return result; } } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.css b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.html b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.html new file mode 100644 index 0000000000..88488cc509 --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.html @@ -0,0 +1,9 @@ + diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.ts new file mode 100644 index 0000000000..8a322801d6 --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.ts @@ -0,0 +1,35 @@ +/*! + * @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 { Component } from '@angular/core'; +import { CellEditorComponent } from './../cell.editor'; +import { DynamicTableRow, DynamicTableColumn } from './../../../core/index'; + +@Component({ + moduleId: module.id, + selector: 'alf-boolean-editor', + templateUrl: './boolean.editor.html', + styleUrls: ['./boolean.editor.css'] +}) +export class BooleanEditorComponent extends CellEditorComponent { + + onValueChanged(row: DynamicTableRow, column: DynamicTableColumn, event: Event) { + let value: boolean = (event.srcElement).checked; + row.value[column.id] = value; + } + +} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/cell.editor.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/cell.editor.ts new file mode 100644 index 0000000000..1ae25c438d --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/cell.editor.ts @@ -0,0 +1,32 @@ +/*! + * @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 { Input } from '@angular/core'; +import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../../core/index'; + +export abstract class CellEditorComponent { + + @Input() + table: DynamicTableModel; + + @Input() + row: DynamicTableRow; + + @Input() + column: DynamicTableColumn; + +} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.css b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.css new file mode 100644 index 0000000000..9101330a83 --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.css @@ -0,0 +1,7 @@ +.date-editor { + width: 100%; +} + +.date-editor--button { + margin-top: 15px; +} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.html b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.html new file mode 100644 index 0000000000..64e481278c --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.html @@ -0,0 +1,21 @@ +
+
+
+ + +
+
+
+ +
+
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts new file mode 100644 index 0000000000..6fee69784a --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts @@ -0,0 +1,74 @@ +/*! + * @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 { Component, OnInit, ElementRef } from '@angular/core'; +import { CellEditorComponent } from './../cell.editor'; + +@Component({ + moduleId: module.id, + selector: 'alf-date-editor', + templateUrl: './date.editor.html', + styleUrls: ['./date.editor.css'] +}) +export class DateEditorComponent extends CellEditorComponent implements OnInit { + + DATE_FORMAT: string = 'DD-MM-YYYY'; + + datePicker: any; + + constructor(private elementRef: ElementRef) { + super(); + } + + ngOnInit() { + let settings: any = { + type: 'date', + future: moment().add(21, 'years'), + init: moment(this.table.getCellValue(this.row, this.column), this.DATE_FORMAT) + }; + + this.datePicker = new mdDateTimePicker.default(settings); + if (this.elementRef) { + this.datePicker.trigger = this.elementRef.nativeElement.querySelector('#dateInput'); + } + } + + onDateSelected(event: CustomEvent) { + let newValue = this.datePicker.time.format('YYYY-MM-DD'); + this.row.value[this.column.id] = newValue + 'T00:00:00.000Z'; + this.table.flushValue(); + + if (this.elementRef) { + this.setupMaterialTextField(this.elementRef, componentHandler, newValue); + } + } + + setupMaterialTextField(elementRef: ElementRef, handler: any, value: string): boolean { + if (elementRef && handler) { + let el = elementRef.nativeElement; + if (el) { + let container = el.querySelector('.mdl-textfield'); + if (container) { + container.MaterialTextfield.change(value); + return true; + } + } + } + return false; + } + +} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.css b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.css new file mode 100644 index 0000000000..0db743bfa6 --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.css @@ -0,0 +1,3 @@ +.dropdown-editor__select { + width: 100%; +} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.html b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.html new file mode 100644 index 0000000000..4d4fb3b4ab --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.html @@ -0,0 +1,11 @@ +
+ +
+ +
+
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.ts new file mode 100644 index 0000000000..1adc51e220 --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.ts @@ -0,0 +1,36 @@ +/*! + * @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 { Component } from '@angular/core'; +import { CellEditorComponent } from './../cell.editor'; +import { DynamicTableRow, DynamicTableColumn } from './../../../core/index'; + +@Component({ + moduleId: module.id, + selector: 'alf-dropdown-editor', + templateUrl: './dropdown.editor.html', + styleUrls: ['./dropdown.editor.css'] +}) +export class DropdownEditorComponent extends CellEditorComponent { + + onValueChanged(row: DynamicTableRow, column: DynamicTableColumn, event: Event) { + let value: any = (event.srcElement).value; + value = column.options.find(opt => opt.name === value); + row.value[column.id] = value; + } + +} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.css b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.html b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.html new file mode 100644 index 0000000000..5c6ce90112 --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.html @@ -0,0 +1,9 @@ +
+ + +
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.ts new file mode 100644 index 0000000000..3f57684ad9 --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.ts @@ -0,0 +1,35 @@ +/*! + * @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 { Component } from '@angular/core'; +import { CellEditorComponent } from './../cell.editor'; +import { DynamicTableRow, DynamicTableColumn } from './../../../core/index'; + +@Component({ + moduleId: module.id, + selector: 'alf-text-editor', + templateUrl: './text.editor.html', + styleUrls: ['./text.editor.css'] +}) +export class TextEditorComponent extends CellEditorComponent { + + onValueChanged(row: DynamicTableRow, column: DynamicTableColumn, event: Event) { + let value: any = (event.srcElement).value; + row.value[column.id] = value; + } + +} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/index.ts b/ng2-components/ng2-activiti-form/src/components/widgets/index.ts index 78b3835020..ddb8200b3e 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/index.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/index.ts @@ -35,6 +35,10 @@ import { PeopleWidget } from './people/people.widget'; import { DateWidget } from './date/date.widget'; import { AmountWidget } from './amount/amount.widget'; import { DynamicTableWidget } from './dynamic-table/dynamic-table.widget'; +import { DateEditorComponent } from './dynamic-table/editors/date/date.editor'; +import { DropdownEditorComponent } from './dynamic-table/editors/dropdown/dropdown.editor'; +import { BooleanEditorComponent } from './dynamic-table/editors/boolean/boolean.editor'; +import { TextEditorComponent } from './dynamic-table/editors/text/text.editor'; // core export * from './widget.component'; @@ -63,6 +67,12 @@ export * from './date/date.widget'; export * from './amount/amount.widget'; export * from './dynamic-table/dynamic-table.widget'; +// editors (dynamic table) +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 const WIDGET_DIRECTIVES: any[] = [ TabsWidget, ContainerWidget, @@ -82,5 +92,10 @@ export const WIDGET_DIRECTIVES: any[] = [ PeopleWidget, DateWidget, AmountWidget, - DynamicTableWidget + + DynamicTableWidget, + DateEditorComponent, + DropdownEditorComponent, + BooleanEditorComponent, + TextEditorComponent ]; diff --git a/ng2-components/ng2-alfresco-core/src/components/material/index.ts b/ng2-components/ng2-alfresco-core/src/components/material/index.ts index 8760c82be1..84f30ce07b 100644 --- a/ng2-components/ng2-alfresco-core/src/components/material/index.ts +++ b/ng2-components/ng2-alfresco-core/src/components/material/index.ts @@ -19,15 +19,18 @@ import { MDL } from './MaterialDesignLiteUpgradeElement'; import { AlfrescoMdlButtonDirective } from './mdl-button.directive'; import { AlfrescoMdlMenuDirective } from './mdl-menu.directive'; import { AlfrescoMdlTabsDirective } from './mdl-tabs.directive'; +import { AlfrescoMdlTextFieldDirective } from './mdl-textfield.directive'; export * from './MaterialDesignLiteUpgradeElement'; export * from './mdl-button.directive'; export * from './mdl-menu.directive'; export * from './mdl-tabs.directive'; +export * from './mdl-textfield.directive'; export const MATERIAL_DESIGN_DIRECTIVES: [any] = [ MDL, AlfrescoMdlButtonDirective, AlfrescoMdlMenuDirective, - AlfrescoMdlTabsDirective + AlfrescoMdlTabsDirective, + AlfrescoMdlTextFieldDirective ]; diff --git a/ng2-components/ng2-alfresco-core/src/components/material/mdl-textfield.directive.ts b/ng2-components/ng2-alfresco-core/src/components/material/mdl-textfield.directive.ts new file mode 100644 index 0000000000..d8e0a1be0b --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/material/mdl-textfield.directive.ts @@ -0,0 +1,38 @@ +/*! + * @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 { Directive, ElementRef, AfterViewInit } from '@angular/core'; + +declare var componentHandler; + +@Directive({ + selector: '[alfresco-mdl-textfield]' +}) +export class AlfrescoMdlTextFieldDirective implements AfterViewInit { + + constructor(private element: ElementRef) {} + + ngAfterViewInit() { + if (componentHandler) { + let el = this.element.nativeElement; + el.classList.add('mdl-textfield'); + el.classList.add('mdl-js-textfield'); + el.classList.add('mdl-textfield--floating-label'); + componentHandler.upgradeElement(el, 'MaterialTextfield'); + } + } +}