-
Notifications
You must be signed in to change notification settings - Fork 134
/
cell-edit-toggle.ts
121 lines (116 loc) · 2.83 KB
/
cell-edit-toggle.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { resolve } from 'rsvp';
import { type ModelsTableDataItem } from '../../../../types/models-table-data-item.type';
import { type CellEditToggleSignature } from '../../../../interfaces/components/models-table/themes/default/cell-edit-toggle-signature.interface';
export interface RowActionPayload {
record: ModelsTableDataItem;
}
/**
* Component for cells used as toggle for edit-mode.
*
* Properties and event-handlers from {@link DefaultTheme.Cell | Cell} are bound here
*
* Usage example:
*
* ```html
* <ModelsTable
* @data={{this.data}}
* @columns={{this.columns}}
* @columnComponents={{hash
* editRow=(component
* "models-table/cell-edit-toggle"
* onSaveRow=this.onSaveRow
* onCancelRow=this.onCancelRow"
* )}}
* />
* ```
*
* ```js
* import Controller from '@ember/controller';
* import {action} from '@ember/object';
*
* export default class InLineEditController extends Controller {
*
* data = [];
*
* columns = [
* {propertyName: 'firstName'},
* {propertyName: 'lastName'},
* {
* title: 'Edit',
* component: 'editRow',
* editable: false // <--- IMPORTANT
* }
* ];
*
* @action
* onSaveRow(param) {
* return param.record.save();
* }
*
* @action
* onCancelRow({record}) {
* record.rollbackAttributes();
* return true;
* }
* }
* ```
*/
export default class CellEditToggle extends Component<CellEditToggleSignature> {
@action
protected onClick(event: Event): void {
event?.stopPropagation();
}
/**
* Fires when "Save" button is clicked. Edit-mode for row is turned off
*
* @event saveClicked
*/
@action
protected saveClicked(): void {
let actionResult = true;
if (this.args.onSaveRow) {
actionResult = this.args.onSaveRow({ record: this.args.record });
}
resolve(actionResult).then((result) => {
if (result) {
this.args.saveRow();
}
});
}
/**
* Fires when "Edit" button is clicked. Edit-mode for row is turned on
*
* @event editClicked
*/
@action
protected editClicked(): void {
let actionResult = true;
if (this.args.onEditRow) {
actionResult = this.args.onEditRow({ record: this.args.record });
}
resolve(actionResult).then((result) => {
if (result) {
this.args.editRow();
}
});
}
/**
* Fires when "Cancel Edit" button is clicked. Edit-mode for row is turned off
*
* @event cancelClicked
*/
@action
protected cancelClicked(): void {
let actionResult = true;
if (this.args.onCancelRow) {
actionResult = this.args.onCancelRow({ record: this.args.record });
}
resolve(actionResult).then((result) => {
if (result) {
this.args.cancelEditRow();
}
});
}
}