From dac0f72b96aa1bdac977b0a35b79d5da7673a58e Mon Sep 17 00:00:00 2001 From: Marouan Bentaleb <38426175+marouanbentaleb@users.noreply.github.com> Date: Wed, 15 Jan 2020 14:26:30 +0000 Subject: [PATCH] Adding amount row editor for dynamic table (#5366) * Adding amount row editor for dynamic table * Adding amount row editor for dynamic table --- .../editors/amount/amount.editor.html | 12 +++++ .../editors/amount/amount.editor.scss | 6 +++ .../editors/amount/amount.editor.spec.ts | 41 +++++++++++++++ .../editors/amount/amount.editor.ts | 52 +++++++++++++++++++ .../dynamic-table/editors/row.editor.html | 37 +++++++------ lib/core/form/components/widgets/index.ts | 5 +- 6 files changed, 137 insertions(+), 16 deletions(-) create mode 100644 lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.html create mode 100644 lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.scss create mode 100644 lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.spec.ts create mode 100644 lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.ts diff --git a/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.html b/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.html new file mode 100644 index 0000000000..013bfabb22 --- /dev/null +++ b/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.html @@ -0,0 +1,12 @@ +
+ + + + +
diff --git a/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.scss b/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.scss new file mode 100644 index 0000000000..2311edce72 --- /dev/null +++ b/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.scss @@ -0,0 +1,6 @@ + +.adf { + &-text-editor { + width: 100%; + } +} diff --git a/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.spec.ts b/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.spec.ts new file mode 100644 index 0000000000..1fd0b59d81 --- /dev/null +++ b/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.spec.ts @@ -0,0 +1,41 @@ +/*! + * @license + * Copyright 2019 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 { DynamicTableColumn } from './../../dynamic-table-column.model'; +import { DynamicTableRow } from './../../dynamic-table-row.model'; +import { AmountEditorComponent } from './amount.editor'; + +describe('AmountEditorComponent', () => { + + let editor: AmountEditorComponent; + + beforeEach(() => { + editor = new AmountEditorComponent(); + }); + + it('should update row value on change', () => { + const row = { value: {} }; + const column = { id: 'key' }; + + const value = 100; + const event = { target: { value } }; + + editor.onValueChanged(row, column, event); + expect(row.value[column.id]).toBe(value); + }); + +}); diff --git a/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.ts b/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.ts new file mode 100644 index 0000000000..e084ab7954 --- /dev/null +++ b/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.ts @@ -0,0 +1,52 @@ +/*! + * @license + * Copyright 2019 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 { Component, Input, OnInit } from '@angular/core'; +import { DynamicTableColumn } from './../../dynamic-table-column.model'; +import { DynamicTableRow } from './../../dynamic-table-row.model'; +import { DynamicTableModel } from './../../dynamic-table.widget.model'; + +@Component({ + selector: 'adf-amount-editor', + templateUrl: './amount.editor.html', + styleUrls: ['./amount.editor.scss'] +}) +export class AmountEditorComponent implements OnInit { + + @Input() + table: DynamicTableModel; + + @Input() + row: DynamicTableRow; + + @Input() + column: DynamicTableColumn; + + displayName: string; + + ngOnInit() { + this.displayName = this.table.getDisplayText(this.column); + } + + onValueChanged(row: DynamicTableRow, column: DynamicTableColumn, event: any) { + const value: number = Number(( event.target).value); + row.value[column.id] = value; + } + +} 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 7f283a27e5..ff7f626bfc 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 @@ -1,5 +1,5 @@
+ [class.row-editor__invalid]="!validationSummary.isValid">
@@ -8,29 +8,36 @@ [row]="row" [column]="column"> -
-
- +
+ -
-
- - -
-
+
+
+ + +
+
-
-
+
+
+ + +
+