inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding amount row editor for dynamic table (#5366)

Browse Source 
* Adding amount row editor for dynamic table

* Adding amount row editor for dynamic table
This commit is contained in:
Marouan Bentaleb 2020-01-15 14:26:30 +00:00 committed by Eugenio Romano
parent fd74811639
commit dac0f72b96
6 changed files with 137 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.html Normal file
View File

@ -0,0 +1,12 @@
<div class="adf-amount-editor">
<mat-form-field>
<label [attr.for]="column.id">{{displayName}}</label>
<input matInput
type="number"
[value]="table.getCellValue(row, column)"
(keyup)="onValueChanged(row, column, $event)"
[required]="column.required"
[disabled]="!column.editable"
[id]="column.id">
</mat-form-field>
</div>

6
lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.scss Normal file
View File

@ -0,0 +1,6 @@
.adf {
&-text-editor {
width: 100%;
}
}

41
lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.spec.ts Normal file
View File

@ -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 = <DynamicTableRow> { value: {} };
const column = <DynamicTableColumn> { id: 'key' };
const value = 100;
const event = { target: { value } };
editor.onValueChanged(row, column, event);
expect(row.value[column.id]).toBe(value);
});
});

52
lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.ts Normal file
View File

@ -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((<HTMLInputElement> event.target).value);
row.value[column.id] = value;
}
}

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

@ -1,5 +1,5 @@
<div class="row-editor mdl-shadow--2dp"
[class.row-editor__invalid]="!validationSummary.isValid">
[class.row-editor__invalid]="!validationSummary.isValid">
<div class="mdl-grid" *ngFor="let column of table.columns">
<div class="mdl-cell mdl-cell--6-col" [ngSwitch]="column.type">
<div *ngSwitchCase="'Dropdown'">
@ -8,29 +8,36 @@
[row]="row"
[column]="column">
</adf-dropdown-editor>
</div>
<div *ngSwitchCase="'Date'">
<adf-date-editor
</div>
<div *ngSwitchCase="'Date'">
<adf-date-editor
[table]="table"
[row]="row"
[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'">
</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"
[row]="row"
[column]="column">
</adf-boolean-editor>
</div>
<div *ngSwitchDefault>
</div>
<div *ngSwitchCase="'Amount'">
<adf-amount-editor
[table]="table"
[row]="row"
[column]="column">
</adf-amount-editor>
</div>
<div *ngSwitchDefault>
<adf-text-editor
[table]="table"
[row]="row"

5
lib/core/form/components/widgets/index.ts
View File

@ -32,6 +32,7 @@ import { DateTimeEditorComponent } from './dynamic-table/editors/datetime/dateti
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';
import { AmountEditorComponent } from './dynamic-table/editors/amount/amount.editor';
import { ErrorWidgetComponent } from './error/error.component';
import { FunctionalGroupWidgetComponent } from './functional-group/functional-group.widget';
import { HyperlinkWidgetComponent } from './hyperlink/hyperlink.widget';
@ -84,6 +85,7 @@ 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 './dynamic-table/editors/amount/amount.editor';
export * from './text/text-mask.component';
export const WIDGET_DIRECTIVES: any[] = [
@ -114,7 +116,8 @@ export const WIDGET_DIRECTIVES: any[] = [
DocumentWidgetComponent,
DateTimeWidgetComponent,
DateTimeEditorComponent,
JsonWidgetComponent
JsonWidgetComponent,
AmountEditorComponent
];
export const MASK_DIRECTIVE: any[] = [