@sankhyalabs/ezui 4.1.0 → 4.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{constants-5a75e2f3.js → constants-5d588e38.js} +2 -0
- package/dist/cjs/ez-check.cjs.entry.js +12 -1
- package/dist/cjs/ez-combo-box.cjs.entry.js +1 -1
- package/dist/cjs/ez-form-view.cjs.entry.js +1 -1
- package/dist/cjs/ez-form.cjs.entry.js +64 -36
- package/dist/cjs/ez-grid.cjs.entry.js +242 -110
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-check/ez-check.js +14 -1
- package/dist/collection/components/ez-grid/controller/DataUnitBridge.js +15 -0
- package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +71 -14
- package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js +9 -1
- package/dist/collection/components/ez-grid/ez-grid.js +163 -94
- package/dist/collection/components/ez-grid/subcomponents/selection-counter.js +2 -2
- package/dist/collection/utils/constants.js +1 -0
- package/dist/collection/utils/form/DataBinder.js +47 -30
- package/dist/collection/utils/form/FormMetadata.js +17 -6
- package/dist/custom-elements/index.js +320 -149
- package/dist/esm/constants-76d2e931.js +4 -0
- package/dist/esm/ez-check.entry.js +12 -1
- package/dist/esm/ez-combo-box.entry.js +1 -1
- package/dist/esm/ez-form-view.entry.js +1 -1
- package/dist/esm/ez-form.entry.js +64 -36
- package/dist/esm/ez-grid.entry.js +242 -110
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-1f841f3c.entry.js +1 -0
- package/dist/ezui/{p-50883460.entry.js → p-878646a0.entry.js} +1 -1
- package/dist/ezui/{p-468799e1.entry.js → p-96df1a0e.entry.js} +2 -2
- package/dist/ezui/p-a3ce3710.entry.js +1 -0
- package/dist/ezui/p-b01e3085.js +1 -0
- package/dist/ezui/{p-e748b5d3.entry.js → p-b7ea9791.entry.js} +1 -1
- package/dist/types/components/ez-check/ez-check.d.ts +1 -0
- package/dist/types/components/ez-grid/controller/EzGridController.d.ts +10 -2
- package/dist/types/components/ez-grid/controller/ag-grid/AgGridController.d.ts +5 -2
- package/dist/types/components/ez-grid/ez-grid.d.ts +20 -15
- package/dist/types/components/ez-grid/subcomponents/selection-counter.d.ts +2 -1
- package/dist/types/utils/constants.d.ts +1 -0
- package/dist/types/utils/form/DataBinder.d.ts +3 -2
- package/package.json +1 -1
- package/dist/esm/constants-ca136201.js +0 -3
- package/dist/ezui/p-08f4a048.entry.js +0 -1
- package/dist/ezui/p-3f4ae3a3.js +0 -1
- package/dist/ezui/p-a323b415.entry.js +0 -1
|
@@ -15,6 +15,16 @@ export class EzCheck {
|
|
|
15
15
|
if (newValue != oldValue) {
|
|
16
16
|
this._inputElem.checked = newValue;
|
|
17
17
|
}
|
|
18
|
+
if (this._inputElem.indeterminate != this.indeterminate) {
|
|
19
|
+
this._inputElem.indeterminate = this.indeterminate;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
observeIndeterminate(newValue, oldValue) {
|
|
23
|
+
if (!this._inputElem)
|
|
24
|
+
return;
|
|
25
|
+
if (newValue != oldValue) {
|
|
26
|
+
this._inputElem.indeterminate = newValue;
|
|
27
|
+
}
|
|
18
28
|
}
|
|
19
29
|
//---------------------------------------------
|
|
20
30
|
// Public methods
|
|
@@ -125,7 +135,7 @@ export class EzCheck {
|
|
|
125
135
|
},
|
|
126
136
|
"indeterminate": {
|
|
127
137
|
"type": "boolean",
|
|
128
|
-
"mutable":
|
|
138
|
+
"mutable": true,
|
|
129
139
|
"complexType": {
|
|
130
140
|
"original": "boolean",
|
|
131
141
|
"resolved": "boolean",
|
|
@@ -228,6 +238,9 @@ export class EzCheck {
|
|
|
228
238
|
return [{
|
|
229
239
|
"propName": "value",
|
|
230
240
|
"methodName": "observeValue"
|
|
241
|
+
}, {
|
|
242
|
+
"propName": "indeterminate",
|
|
243
|
+
"methodName": "observeIndeterminate"
|
|
231
244
|
}];
|
|
232
245
|
}
|
|
233
246
|
}
|
|
@@ -18,6 +18,21 @@ export default class DataUnitBridge {
|
|
|
18
18
|
const { selection } = action.payload;
|
|
19
19
|
this._gridController.selectRows(selection);
|
|
20
20
|
break;
|
|
21
|
+
case Action.SELECTION_REMOVED:
|
|
22
|
+
const { unselection } = action.payload;
|
|
23
|
+
const filteredRecords = this._dataUnit.getSelection()
|
|
24
|
+
.filter((selectedRecord) => {
|
|
25
|
+
return !unselection.some((unselectedRecord) => {
|
|
26
|
+
return unselectedRecord.__record__id__ === selectedRecord.__record__id__;
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
if ((filteredRecords === null || filteredRecords === void 0 ? void 0 : filteredRecords.length) > 0) {
|
|
30
|
+
this._gridController.selectRows(filteredRecords);
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
this._gridController.deselectAll();
|
|
34
|
+
}
|
|
35
|
+
break;
|
|
21
36
|
case Action.NEXT_SELECTED:
|
|
22
37
|
case Action.PREVIOUS_SELECTED:
|
|
23
38
|
this._gridController.selectRows(this._dataUnit.getSelection());
|
|
@@ -6,6 +6,7 @@ import getHeaderColumnTemplate from "./template/HeaderColumnTemplate.js";
|
|
|
6
6
|
import DataSource from "./DataSource";
|
|
7
7
|
import { CellRenderer } from "./components/cellRenderer";
|
|
8
8
|
import SelectionHeader from "./components/selectionHeader";
|
|
9
|
+
import { ALL_RECORD } from "../../../../utils/constants";
|
|
9
10
|
export default class AgGridController {
|
|
10
11
|
constructor(enterprise) {
|
|
11
12
|
this.DEFAULT_ROW_HEIGHT = 30;
|
|
@@ -161,30 +162,72 @@ export default class AgGridController {
|
|
|
161
162
|
opt.suppressDragLeaveHidesColumns = true;
|
|
162
163
|
opt.suppressMenuHide = true;
|
|
163
164
|
}
|
|
165
|
+
isAllRecordSetted(allSelection) {
|
|
166
|
+
return allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((selectedRecord) => {
|
|
167
|
+
return selectedRecord.__record__id__ === ALL_RECORD;
|
|
168
|
+
});
|
|
169
|
+
}
|
|
164
170
|
getSelectionHeaderStatus() {
|
|
165
171
|
const records = this._dataUnit.records;
|
|
166
172
|
if (records && records.length === 0) {
|
|
167
173
|
return false;
|
|
168
174
|
}
|
|
169
|
-
const
|
|
170
|
-
if (
|
|
175
|
+
const allSelection = this._dataUnit.getSelection();
|
|
176
|
+
if (allSelection == undefined || allSelection.length === 0) {
|
|
171
177
|
return false;
|
|
172
178
|
}
|
|
173
|
-
if (
|
|
179
|
+
if (this.isAllRecordSetted(allSelection)) {
|
|
180
|
+
return true;
|
|
181
|
+
}
|
|
182
|
+
if (allSelection.length != records.length) {
|
|
183
|
+
return undefined;
|
|
184
|
+
}
|
|
185
|
+
const selectedRecords = this._dataUnit.getSelectedRecords();
|
|
186
|
+
if (selectedRecords.length < allSelection.length) {
|
|
174
187
|
return undefined;
|
|
175
188
|
}
|
|
176
189
|
let status = undefined;
|
|
177
190
|
for (let i = 0; i < records.length; i++) {
|
|
178
|
-
const current =
|
|
191
|
+
const current = allSelection.some((selectedRecord) => {
|
|
192
|
+
return selectedRecord.__record__id__ === records[i].__record__id__;
|
|
193
|
+
});
|
|
179
194
|
if (status != undefined && current !== status) {
|
|
180
|
-
return
|
|
195
|
+
return;
|
|
181
196
|
}
|
|
182
197
|
status = current;
|
|
183
198
|
}
|
|
184
199
|
return status;
|
|
185
200
|
}
|
|
186
|
-
updateSelectionForAll(selectAll) {
|
|
187
|
-
|
|
201
|
+
async updateSelectionForAll(selectAll) {
|
|
202
|
+
if (this._dataUnit == undefined) {
|
|
203
|
+
return;
|
|
204
|
+
}
|
|
205
|
+
let allSelection = this._dataUnit.getSelection();
|
|
206
|
+
if (allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((sel) => sel.__record__id__ === ALL_RECORD)) {
|
|
207
|
+
await this._dataUnit.clearSelection();
|
|
208
|
+
}
|
|
209
|
+
let updateSelection = [];
|
|
210
|
+
const records = this._dataUnit.records;
|
|
211
|
+
const selectedRecords = this._dataUnit.getSelectedRecords();
|
|
212
|
+
allSelection = this._dataUnit.getSelection();
|
|
213
|
+
if (selectAll && selectedRecords.length < records.length) {
|
|
214
|
+
updateSelection = records;
|
|
215
|
+
allSelection.forEach((selectedRecord) => {
|
|
216
|
+
const recordIds = updateSelection.map((record) => record.__record__id__);
|
|
217
|
+
if (!recordIds.includes(selectedRecord.__record__id__)) {
|
|
218
|
+
updateSelection.push(selectedRecord);
|
|
219
|
+
}
|
|
220
|
+
});
|
|
221
|
+
}
|
|
222
|
+
else {
|
|
223
|
+
updateSelection = allSelection.filter((selectedRecord) => {
|
|
224
|
+
return !(records || [])
|
|
225
|
+
.some((record) => {
|
|
226
|
+
return record.__record__id__ === selectedRecord.__record__id__;
|
|
227
|
+
});
|
|
228
|
+
});
|
|
229
|
+
}
|
|
230
|
+
this._dataUnit.setSelection(updateSelection);
|
|
188
231
|
}
|
|
189
232
|
setData(data) {
|
|
190
233
|
if (this._grid === undefined) {
|
|
@@ -208,7 +251,7 @@ export default class AgGridController {
|
|
|
208
251
|
}
|
|
209
252
|
this._gridOptions.api.forEachNode(node => {
|
|
210
253
|
var _a;
|
|
211
|
-
if (rowIds && rowIds.
|
|
254
|
+
if (rowIds && rowIds.find(row => row.__record__id__ === node.id)) {
|
|
212
255
|
node.setSelected(true);
|
|
213
256
|
(_a = this._gridOptions.api) === null || _a === void 0 ? void 0 : _a.ensureNodeVisible(node);
|
|
214
257
|
}
|
|
@@ -216,10 +259,7 @@ export default class AgGridController {
|
|
|
216
259
|
node.setSelected(false);
|
|
217
260
|
}
|
|
218
261
|
});
|
|
219
|
-
|
|
220
|
-
if (selectionHeader) {
|
|
221
|
-
selectionHeader.updateCheckbox();
|
|
222
|
-
}
|
|
262
|
+
this.updateCheckbox();
|
|
223
263
|
}
|
|
224
264
|
removeRows() {
|
|
225
265
|
if (this._grid === undefined) {
|
|
@@ -314,7 +354,7 @@ export default class AgGridController {
|
|
|
314
354
|
if (this._grid === undefined) {
|
|
315
355
|
throw new Error("Erro interno: Grid ainda não inicializado.");
|
|
316
356
|
}
|
|
317
|
-
const colDef = this._gridOptions.columnApi.
|
|
357
|
+
const colDef = this._gridOptions.columnApi.getColumns();
|
|
318
358
|
return colDef.filter(c => ![this.CHECK_BOX_COL_ID, this.STATUS_COL_ID].includes(c.getColId())).map(c => {
|
|
319
359
|
const def = c.getColDef();
|
|
320
360
|
const colDef = { name: def.field, label: def.headerName };
|
|
@@ -332,12 +372,16 @@ export default class AgGridController {
|
|
|
332
372
|
if (this._grid === undefined) {
|
|
333
373
|
throw new Error("Erro interno: Grid ainda não inicializado.");
|
|
334
374
|
}
|
|
375
|
+
const colDef = this._gridOptions.columnApi.getColumns();
|
|
335
376
|
let columns = this.getColumnsDef();
|
|
336
377
|
let visibleColumns = [];
|
|
378
|
+
//Existem colunas implícitas que não tem estado, essas colunas são sempre as primeiras.
|
|
379
|
+
//Como vamos reordenar, precisamos considerar o deslocamento provocado por elas.
|
|
380
|
+
const columnsOffset = colDef.length - columns.length;
|
|
337
381
|
let sort = [];
|
|
338
382
|
state.forEach((cfgColumn, index) => {
|
|
339
383
|
const colWidth = this.getColumnWidth(cfgColumn);
|
|
340
|
-
this._gridOptions.columnApi.moveColumn(cfgColumn.name, index +
|
|
384
|
+
this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + columnsOffset);
|
|
341
385
|
this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, colWidth);
|
|
342
386
|
visibleColumns.push(cfgColumn.name);
|
|
343
387
|
if (cfgColumn.ascending !== undefined) {
|
|
@@ -398,6 +442,19 @@ export default class AgGridController {
|
|
|
398
442
|
var _a;
|
|
399
443
|
(_a = this._gridOptions.api.getDisplayedRowAtIndex(index)) === null || _a === void 0 ? void 0 : _a.setSelected(true);
|
|
400
444
|
}
|
|
445
|
+
deselectAll() {
|
|
446
|
+
var _a, _b;
|
|
447
|
+
(_b = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.deselectAll();
|
|
448
|
+
this.updateCheckbox();
|
|
449
|
+
}
|
|
450
|
+
updateCheckbox() {
|
|
451
|
+
var _a, _b;
|
|
452
|
+
const selectionHeader = (_b = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.selectionHeader;
|
|
453
|
+
if (selectionHeader == undefined) {
|
|
454
|
+
return;
|
|
455
|
+
}
|
|
456
|
+
selectionHeader.updateCheckbox();
|
|
457
|
+
}
|
|
401
458
|
buildColDef(source) {
|
|
402
459
|
var _a, _b, _c;
|
|
403
460
|
let tooltip = undefined;
|
|
@@ -25,6 +25,7 @@ export default class DataSource {
|
|
|
25
25
|
this._controller.refresh();
|
|
26
26
|
break;
|
|
27
27
|
case Action.SELECTION_CHANGED:
|
|
28
|
+
case Action.SELECTION_REMOVED:
|
|
28
29
|
case Action.NEXT_SELECTED:
|
|
29
30
|
case Action.PREVIOUS_SELECTED:
|
|
30
31
|
this.updateSelection();
|
|
@@ -38,7 +39,14 @@ export default class DataSource {
|
|
|
38
39
|
this._dataUnit.subscribe(this.duObserver);
|
|
39
40
|
}
|
|
40
41
|
updateSelection() {
|
|
41
|
-
|
|
42
|
+
var _a;
|
|
43
|
+
const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
|
|
44
|
+
if ((selection === null || selection === void 0 ? void 0 : selection.length) > 0) {
|
|
45
|
+
this._controller.selectRows(selection);
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
this._controller.deselectAll();
|
|
49
|
+
}
|
|
42
50
|
}
|
|
43
51
|
getRows(params) {
|
|
44
52
|
if (this.needReload(params)) {
|
|
@@ -2,14 +2,17 @@ import { ElementIDUtils, JSUtils } from "@sankhyalabs/core";
|
|
|
2
2
|
import { h, Host } from "@stencil/core";
|
|
3
3
|
import AgGridController from "./controller/ag-grid/AgGridController";
|
|
4
4
|
import { SelectionCounter } from "./subcomponents/selection-counter";
|
|
5
|
+
import { ALL_RECORD } from "../../utils/constants";
|
|
5
6
|
export class EzGrid {
|
|
6
7
|
constructor() {
|
|
7
8
|
this._gridController = new AgGridController(false);
|
|
8
9
|
this._debounceTimer = 500;
|
|
10
|
+
this._selectionAll = false;
|
|
9
11
|
this._paginationInfo = undefined;
|
|
10
12
|
this._paginationChangedByKeyboard = true;
|
|
11
|
-
this._selectionCount = 0;
|
|
12
13
|
this._showSelectionCounter = false;
|
|
14
|
+
this._selectionCount = 0;
|
|
15
|
+
this._selectionPageCount = 0;
|
|
13
16
|
this.multipleSelection = undefined;
|
|
14
17
|
this.config = undefined;
|
|
15
18
|
this.serverUrl = undefined;
|
|
@@ -64,32 +67,94 @@ export class EzGrid {
|
|
|
64
67
|
async quickFilter(term) {
|
|
65
68
|
this._gridController.quickFilter(term);
|
|
66
69
|
}
|
|
70
|
+
observeConfig(config) {
|
|
71
|
+
this._gridController.setColumnsState(config.columns);
|
|
72
|
+
}
|
|
67
73
|
onSelectionChange(evt) {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
74
|
+
const { selection } = evt === null || evt === void 0 ? void 0 : evt.detail;
|
|
75
|
+
if (selection == undefined || this.dataUnit == undefined) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
if (this.isAllRecordSetted()) {
|
|
79
|
+
this.updateSelectionPage(selection);
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
this.setSelection(selection);
|
|
83
|
+
}
|
|
84
|
+
updateSelectionPage(selection) {
|
|
85
|
+
if (this._selectionAll) {
|
|
86
|
+
this._selectionAll = false;
|
|
87
|
+
}
|
|
88
|
+
else {
|
|
89
|
+
this.dataUnit.clearSelection()
|
|
90
|
+
.then(() => {
|
|
91
|
+
const records = this.dataUnit.records;
|
|
92
|
+
const selectionPage = selection.filter((selectedRecord) => {
|
|
93
|
+
return records.some((record) => {
|
|
94
|
+
return record.__record__id__ === selectedRecord.__record__id__;
|
|
95
|
+
});
|
|
96
|
+
});
|
|
97
|
+
this._gridController.selectRows(selectionPage);
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
isAllRecordSetted() {
|
|
102
|
+
var _a;
|
|
103
|
+
const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
|
|
104
|
+
return allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((selectedRecord) => {
|
|
105
|
+
return selectedRecord.__record__id__ === ALL_RECORD;
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
setSelection(selection) {
|
|
109
|
+
if ((selection === null || selection === void 0 ? void 0 : selection.length) > 0) {
|
|
110
|
+
this.dataUnit.setSelection(selection)
|
|
111
|
+
.then(this.controlSelectionCounter.bind(this));
|
|
112
|
+
}
|
|
113
|
+
else {
|
|
114
|
+
this.dataUnit.clearSelection()
|
|
115
|
+
.then(this.controlSelectionCounter.bind(this));
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
setAutoSelectAll() {
|
|
119
|
+
var _a, _b, _c, _d;
|
|
120
|
+
const { total } = (_a = this._paginationInfo) !== null && _a !== void 0 ? _a : {};
|
|
121
|
+
if (total == undefined) {
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
this._selectionCount = total;
|
|
125
|
+
this._selectionAll = true;
|
|
126
|
+
this._showSelectionCounter = true;
|
|
127
|
+
(_b = this._gridController) === null || _b === void 0 ? void 0 : _b.selectRows((_d = (_c = this.dataUnit) === null || _c === void 0 ? void 0 : _c.records) !== null && _d !== void 0 ? _d : []);
|
|
71
128
|
}
|
|
72
|
-
|
|
129
|
+
controlSelectionCounter() {
|
|
130
|
+
var _a, _b;
|
|
131
|
+
const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
|
|
132
|
+
const counter = (_b = allSelection === null || allSelection === void 0 ? void 0 : allSelection.length) !== null && _b !== void 0 ? _b : 0;
|
|
133
|
+
if (this.isAllRecordSetted()) {
|
|
134
|
+
this.setAutoSelectAll();
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
73
137
|
if (!this.multipleSelection || !this.isPaginationActived()) {
|
|
74
138
|
this._showSelectionCounter = false;
|
|
75
139
|
setTimeout(this.setSelectionCount.bind(this), this._debounceTimer);
|
|
76
140
|
return;
|
|
77
141
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
var _a;
|
|
81
|
-
const counter = (_a = records === null || records === void 0 ? void 0 : records.length) !== null && _a !== void 0 ? _a : 0;
|
|
82
|
-
this._showSelectionCounter = counter > 1;
|
|
83
|
-
if (this._showSelectionCounter) {
|
|
142
|
+
if (counter > 1) {
|
|
143
|
+
setTimeout(() => {
|
|
84
144
|
this.setSelectionCount(counter);
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
145
|
+
this._showSelectionCounter = true;
|
|
146
|
+
}, this._debounceTimer);
|
|
147
|
+
}
|
|
148
|
+
else {
|
|
149
|
+
this._showSelectionCounter = false;
|
|
150
|
+
setTimeout(this.setSelectionCount.bind(this, counter), this._debounceTimer);
|
|
151
|
+
}
|
|
90
152
|
}
|
|
91
153
|
setSelectionCount(value = 0) {
|
|
154
|
+
var _a, _b;
|
|
92
155
|
this._selectionCount = value;
|
|
156
|
+
const selectPageRecords = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelectedRecords();
|
|
157
|
+
this._selectionPageCount = (_b = selectPageRecords === null || selectPageRecords === void 0 ? void 0 : selectPageRecords.length) !== null && _b !== void 0 ? _b : 0;
|
|
93
158
|
}
|
|
94
159
|
isPaginationActived() {
|
|
95
160
|
var _a;
|
|
@@ -100,60 +165,23 @@ export class EzGrid {
|
|
|
100
165
|
return Math.ceil(total / (lastRecord - firstRecord + 1)) > 1;
|
|
101
166
|
}
|
|
102
167
|
onSelectAllRecords() {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
this.
|
|
168
|
+
const allRecord = {
|
|
169
|
+
__record__id__: ALL_RECORD,
|
|
170
|
+
filter: this.dataUnit.getFilters(),
|
|
171
|
+
sort: this.dataUnit.getSort()
|
|
172
|
+
};
|
|
173
|
+
this.setSelection([allRecord]);
|
|
109
174
|
}
|
|
110
175
|
onSelectPageRecords() {
|
|
111
|
-
|
|
176
|
+
var _a;
|
|
177
|
+
(_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.clearSelection().then(() => {
|
|
178
|
+
var _a, _b, _c;
|
|
179
|
+
(_a = this._gridController) === null || _a === void 0 ? void 0 : _a.selectRows((_c = (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.records) !== null && _c !== void 0 ? _c : []);
|
|
180
|
+
});
|
|
112
181
|
}
|
|
113
182
|
onClearSelectedRecords() {
|
|
114
183
|
var _a;
|
|
115
|
-
(_a = this.
|
|
116
|
-
}
|
|
117
|
-
onColumnStateChange(type, state, info) {
|
|
118
|
-
var _a;
|
|
119
|
-
this.ezColumnStateChange.emit({ type, state, isUserChange: info.isUserChange });
|
|
120
|
-
if (info.isUserChange) {
|
|
121
|
-
if (type === 'columnMovedEnd' && !info.isElementResize) {
|
|
122
|
-
let newConfig;
|
|
123
|
-
if (this.config) {
|
|
124
|
-
newConfig = { columns: [] };
|
|
125
|
-
state.forEach(columnState => {
|
|
126
|
-
let newConfigColumn = this.config.columns.find(column => column.name === columnState.name);
|
|
127
|
-
if (newConfigColumn) {
|
|
128
|
-
newConfigColumn.width = columnState.width;
|
|
129
|
-
newConfig.columns.push(newConfigColumn);
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
}
|
|
133
|
-
else {
|
|
134
|
-
newConfig = this.createConfigFromState(state);
|
|
135
|
-
}
|
|
136
|
-
if (newConfig.columns.length > 0) {
|
|
137
|
-
this.configChange.emit(newConfig);
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
else if (type === 'columnResize') {
|
|
141
|
-
if ((_a = info.column) === null || _a === void 0 ? void 0 : _a.colId) {
|
|
142
|
-
let newConfig;
|
|
143
|
-
if (this.config) {
|
|
144
|
-
newConfig = Object.assign({}, this.config);
|
|
145
|
-
}
|
|
146
|
-
else {
|
|
147
|
-
newConfig = this.createConfigFromState(state);
|
|
148
|
-
}
|
|
149
|
-
let newColumn = newConfig.columns.find(column => column.name === info.column.colId);
|
|
150
|
-
if (newColumn) {
|
|
151
|
-
newColumn.customWidth = info.column.actualWidth;
|
|
152
|
-
this.configChange.emit(newConfig);
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
}
|
|
184
|
+
(_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.clearSelection();
|
|
157
185
|
}
|
|
158
186
|
createConfigFromState(state) {
|
|
159
187
|
let newConfig = { columns: [] };
|
|
@@ -219,34 +247,46 @@ export class EzGrid {
|
|
|
219
247
|
this._resizeObserver.observe(this._element);
|
|
220
248
|
this.resizeSelectionCounter();
|
|
221
249
|
}
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
if (
|
|
229
|
-
|
|
250
|
+
onColumnStateChange(type, state, info) {
|
|
251
|
+
var _a;
|
|
252
|
+
this.ezColumnStateChange.emit({ type, state, isUserChange: info.isUserChange });
|
|
253
|
+
if (info.isUserChange) {
|
|
254
|
+
if (type === 'columnMovedEnd' && !info.isElementResize) {
|
|
255
|
+
let newConfig;
|
|
256
|
+
if (this.config) {
|
|
257
|
+
newConfig = { columns: [] };
|
|
258
|
+
state.forEach(columnState => {
|
|
259
|
+
let newConfigColumn = this.config.columns.find(column => column.name === columnState.name);
|
|
260
|
+
if (newConfigColumn) {
|
|
261
|
+
newConfigColumn.width = columnState.width;
|
|
262
|
+
newConfig.columns.push(newConfigColumn);
|
|
263
|
+
}
|
|
264
|
+
});
|
|
230
265
|
}
|
|
231
266
|
else {
|
|
232
|
-
this.
|
|
233
|
-
this._paginationChangedByKeyboard = true;
|
|
267
|
+
newConfig = this.createConfigFromState(state);
|
|
234
268
|
}
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
269
|
+
if (newConfig.columns.length > 0) {
|
|
270
|
+
this.configChange.emit(newConfig);
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
else if (type === 'columnResize') {
|
|
274
|
+
if ((_a = info.column) === null || _a === void 0 ? void 0 : _a.colId) {
|
|
275
|
+
let newConfig;
|
|
276
|
+
if (this.config) {
|
|
277
|
+
newConfig = Object.assign({}, this.config);
|
|
278
|
+
}
|
|
279
|
+
else {
|
|
280
|
+
newConfig = this.createConfigFromState(state);
|
|
281
|
+
}
|
|
282
|
+
let newColumn = newConfig.columns.find(column => column.name === info.column.colId);
|
|
283
|
+
if (newColumn) {
|
|
284
|
+
newColumn.customWidth = info.column.actualWidth;
|
|
285
|
+
this.configChange.emit(newConfig);
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
}
|
|
247
289
|
}
|
|
248
|
-
this.buildDataElementId();
|
|
249
|
-
this.setEvents();
|
|
250
290
|
}
|
|
251
291
|
buildDataElementId() {
|
|
252
292
|
const dataInfo = { dataUnit: this.dataUnit };
|
|
@@ -277,17 +317,45 @@ export class EzGrid {
|
|
|
277
317
|
}
|
|
278
318
|
return null;
|
|
279
319
|
}
|
|
280
|
-
|
|
281
|
-
this._gridController.
|
|
320
|
+
componentDidLoad() {
|
|
321
|
+
this._gridController.initDatagrid(this._container, {
|
|
322
|
+
onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
|
|
323
|
+
onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
|
|
324
|
+
onPaginationChange: (paginationInfo) => {
|
|
325
|
+
var _a;
|
|
326
|
+
if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > (paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.currentPage) && this._paginationChangedByKeyboard) {
|
|
327
|
+
this._gridController.setFocusLastRow();
|
|
328
|
+
}
|
|
329
|
+
else {
|
|
330
|
+
this._gridController.setFocusFirstRow();
|
|
331
|
+
this._paginationChangedByKeyboard = true;
|
|
332
|
+
}
|
|
333
|
+
this._paginationInfo = paginationInfo;
|
|
334
|
+
this._gridController.updateCheckbox();
|
|
335
|
+
this.controlSelectionCounter();
|
|
336
|
+
},
|
|
337
|
+
onDoubleClick: (row) => {
|
|
338
|
+
this.ezDoubleClick.emit(row);
|
|
339
|
+
},
|
|
340
|
+
allowMultipleSelection: this.multipleSelection,
|
|
341
|
+
serverURL: this.serverUrl,
|
|
342
|
+
dataUnit: this.dataUnit,
|
|
343
|
+
statusResolver: this.statusResolver
|
|
344
|
+
});
|
|
345
|
+
if (this.config) {
|
|
346
|
+
this.observeConfig(this.config);
|
|
347
|
+
}
|
|
348
|
+
this.buildDataElementId();
|
|
349
|
+
this.setEvents();
|
|
282
350
|
}
|
|
283
351
|
componentWillRender() {
|
|
284
352
|
this.configSelectionCounter();
|
|
285
353
|
}
|
|
286
354
|
render() {
|
|
287
|
-
var _a, _b;
|
|
355
|
+
var _a, _b, _c;
|
|
288
356
|
return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => this._refPaginationControl = ref }, this.getPaginationControl())), h("div", { ref: (ref) => this._gridSelectionCounter = ref, class: `grid__selection-counter
|
|
289
357
|
${this._showSelectionCounter ? "grid__selection-counter--opened" : ""}
|
|
290
|
-
` }, h(SelectionCounter, { selectionCount: this._selectionCount, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total,
|
|
358
|
+
` }, h(SelectionCounter, { selectionCount: this._selectionCount, selectionPageCount: this._selectionPageCount, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, recordsLength: (_c = (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.records) === null || _c === void 0 ? void 0 : _c.length, onSelectAll: this.onSelectAllRecords.bind(this), onSelectPage: this.onSelectPageRecords.bind(this), onClearAll: this.onClearSelectedRecords.bind(this), onClose: () => this._showSelectionCounter = false })), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" })));
|
|
291
359
|
}
|
|
292
360
|
static get is() { return "ez-grid"; }
|
|
293
361
|
static get encapsulation() { return "scoped"; }
|
|
@@ -404,8 +472,9 @@ export class EzGrid {
|
|
|
404
472
|
return {
|
|
405
473
|
"_paginationInfo": {},
|
|
406
474
|
"_paginationChangedByKeyboard": {},
|
|
475
|
+
"_showSelectionCounter": {},
|
|
407
476
|
"_selectionCount": {},
|
|
408
|
-
"
|
|
477
|
+
"_selectionPageCount": {}
|
|
409
478
|
};
|
|
410
479
|
}
|
|
411
480
|
static get events() {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ElementIDUtils } from "@sankhyalabs/core";
|
|
2
2
|
import { h } from "@stencil/core";
|
|
3
3
|
export const SelectionCounter = (props) => {
|
|
4
|
-
const { selectionCount, total,
|
|
5
|
-
const pageSelectedRecords =
|
|
4
|
+
const { selectionCount, selectionPageCount, total, recordsLength, onSelectAll, onSelectPage, onClearAll, onClose } = props;
|
|
5
|
+
const pageSelectedRecords = selectionPageCount === recordsLength;
|
|
6
6
|
const allSelectedRecords = selectionCount === total;
|
|
7
7
|
return (h("div", Object.assign({ class: "ez-box ez-box--shadow-small" }, getElementID("ezGridSelectionCounter")), h("div", { class: "ez-flex ez-flex--align-items-center ez-size-width--full ez-padding-horizontal--medium" }, h("div", { class: "ez-flex ez-flex--wrap ez-flex--align-items-baseline ez-flex--justify-center" }, h("label", Object.assign({ innerHTML: getText(selectionCount, allSelectedRecords), class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium ez-margin-top--medium" }, getElementID("ezGridSelectionCounter_label"))), h("div", { class: "ez-flex ez-margin-right--medium" }, (pageSelectedRecords || allSelectedRecords) &&
|
|
8
8
|
h("ez-button", Object.assign({ class: "ez-margin-right--medium", label: `Selecionar ${allSelectedRecords ? "apenas a página atual" : `todos os ${total} registros`}`, mode: "link", onClick: allSelectedRecords ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allSelectedRecords ? "Page" : "All"}`))), h("ez-button", Object.assign({ class: "grid__btn-clear", label: "Limpar", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: "Fechar", onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
|