@sankhyalabs/sankhyablocks 9.1.0-dev.2 → 9.1.0-dev.3
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/{SnkMessageBuilder-e3b7850b.js → SnkMessageBuilder-221cc88d.js} +10 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sankhyablocks.cjs.js +1 -1
- package/dist/cjs/snk-actions-button_8.cjs.entry.js +56 -197
- package/dist/cjs/snk-application.cjs.entry.js +1 -1
- package/dist/cjs/snk-data-exporter.cjs.entry.js +2 -2
- package/dist/cjs/{snk-data-unit-3684c96e.js → snk-data-unit-bf45314d.js} +1 -1
- package/dist/cjs/snk-data-unit.cjs.entry.js +2 -2
- package/dist/cjs/snk-detail-view.cjs.entry.js +1 -1
- package/dist/cjs/snk-grid.cjs.entry.js +1 -2
- package/dist/cjs/snk-simple-crud.cjs.entry.js +1 -1
- package/dist/collection/components/snk-grid/snk-grid.js +1 -2
- package/dist/collection/components/snk-grid-config/snk-grid-config.css +7 -41
- package/dist/collection/components/snk-grid-config/snk-grid-config.js +58 -193
- package/dist/collection/components/snk-grid-config/snk-select-box/snk-select-box.css +1 -0
- package/dist/collection/components/snk-simple-crud/snk-simple-crud.js +1 -1
- package/dist/collection/components/snk-simple-form-config/snk-simple-form-config.css +1 -0
- package/dist/collection/components/snk-simple-form-config/snk-simple-form-config.js +1 -1
- package/dist/collection/lib/message/resources/snk-grid.msg.js +10 -2
- package/dist/components/SnkMessageBuilder.js +10 -2
- package/dist/components/snk-grid-config2.js +56 -195
- package/dist/components/snk-grid2.js +1 -2
- package/dist/components/snk-select-box2.js +1 -1
- package/dist/components/snk-simple-crud2.js +1 -1
- package/dist/components/snk-simple-form-config2.js +2 -2
- package/dist/esm/{SnkMessageBuilder-9c269caf.js → SnkMessageBuilder-da87a821.js} +10 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sankhyablocks.js +1 -1
- package/dist/esm/snk-actions-button_8.entry.js +56 -197
- package/dist/esm/snk-application.entry.js +1 -1
- package/dist/esm/snk-data-exporter.entry.js +2 -2
- package/dist/esm/{snk-data-unit-027bca56.js → snk-data-unit-ba90734a.js} +1 -1
- package/dist/esm/snk-data-unit.entry.js +2 -2
- package/dist/esm/snk-detail-view.entry.js +1 -1
- package/dist/esm/snk-grid.entry.js +1 -2
- package/dist/esm/snk-simple-crud.entry.js +1 -1
- package/dist/sankhyablocks/{p-65c5d430.entry.js → p-05f3a2da.entry.js} +1 -1
- package/dist/sankhyablocks/p-3bf2f5cd.entry.js +1 -0
- package/dist/sankhyablocks/{p-09e60995.entry.js → p-3d452f27.entry.js} +1 -1
- package/dist/sankhyablocks/{p-67d6d0c8.entry.js → p-50b68b68.entry.js} +1 -1
- package/dist/sankhyablocks/{p-0cb295c1.entry.js → p-6a1b38d2.entry.js} +1 -1
- package/dist/sankhyablocks/{p-2bde486e.js → p-97bc6983.js} +1 -1
- package/dist/sankhyablocks/{p-e3521eae.entry.js → p-aa72089a.entry.js} +1 -1
- package/dist/sankhyablocks/p-b31cc92d.entry.js +1 -0
- package/dist/sankhyablocks/p-fc4eac32.js +1 -0
- package/dist/sankhyablocks/sankhyablocks.esm.js +1 -1
- package/dist/types/components/snk-grid-config/snk-grid-config.d.ts +7 -20
- package/package.json +1 -1
- package/dist/sankhyablocks/p-3a48bff3.entry.js +0 -1
- package/dist/sankhyablocks/p-3f24c9b2.js +0 -1
- package/dist/sankhyablocks/p-b8b4c6b2.entry.js +0 -1
@@ -55,17 +55,14 @@
|
|
55
55
|
/*@doc Define a largura da barra de rolagem do componente.*/
|
56
56
|
--snk-grid-config__scrollbar--width: var(--space--small, 6px);
|
57
57
|
|
58
|
-
display:
|
59
|
-
|
58
|
+
display: flex;
|
59
|
+
flex-direction: column;
|
60
60
|
max-height: 100%;
|
61
61
|
width: 100%;
|
62
62
|
}
|
63
63
|
|
64
|
-
|
65
|
-
|
66
|
-
width: 359px;
|
67
|
-
max-width: 359px;
|
68
|
-
}
|
64
|
+
.grid-config__body {
|
65
|
+
overflow: auto;
|
69
66
|
}
|
70
67
|
|
71
68
|
.padding-right--medium {
|
@@ -134,42 +131,11 @@ ez-list {
|
|
134
131
|
.grid-config__main {
|
135
132
|
overflow-y: auto;
|
136
133
|
scrollbar-width: thin;
|
134
|
+
width: 100%;
|
135
|
+
padding-bottom: 20px;
|
137
136
|
|
138
137
|
/*public*/
|
139
138
|
scrollbar-color: var(--snk-grid-config__scrollbar--color-clicked) var(--snk-grid-config__scrollbar--color-background);
|
140
|
-
padding-right: var(--snk-grid-config__main--padding-right);
|
141
|
-
}
|
142
|
-
|
143
|
-
.grid-config__main::-webkit-scrollbar {
|
144
|
-
/*public*/
|
145
|
-
width: var(--snk-grid-config__scrollbar--width);
|
146
|
-
max-width: var(--snk-grid-config__scrollbar--width);
|
147
|
-
min-width: var(--snk-grid-config__scrollbar--width);
|
148
|
-
background-color: var(--snk-grid-config__scrollbar--color-background);
|
149
|
-
}
|
150
|
-
|
151
|
-
.grid-config__main::-webkit-scrollbar-track {
|
152
|
-
/*public*/
|
153
|
-
background-color: var(--snk-grid-config__scrollbar--color-background);
|
154
|
-
border-radius: var(--snk-grid-config__scrollbar--border-radius);
|
155
|
-
}
|
156
|
-
|
157
|
-
.grid-config__main::-webkit-scrollbar-thumb {
|
158
|
-
/*public*/
|
159
|
-
background-color: var(--snk-grid-config__scrollbar--color-default);
|
160
|
-
border-radius: var(--snk-grid-config__scrollbar--border-radius);
|
161
|
-
}
|
162
|
-
|
163
|
-
.grid-config__main::-webkit-scrollbar-thumb:vertical:hover,
|
164
|
-
.grid-config__main::-webkit-scrollbar-thumb:horizontal:hover {
|
165
|
-
/*public*/
|
166
|
-
background-color: var(--snk-grid-config__scrollbar--color-hover);
|
167
|
-
}
|
168
|
-
|
169
|
-
.grid-config__main::-webkit-scrollbar-thumb:vertical:active,
|
170
|
-
.grid-config__main::-webkit-scrollbar-thumb:horizontal:active {
|
171
|
-
/*public*/
|
172
|
-
background-color: var(--snk-grid-config__scrollbar--color-clicked);
|
173
139
|
}
|
174
140
|
|
175
141
|
.group-name {
|
@@ -178,4 +144,4 @@ ez-list {
|
|
178
144
|
font-size: var(--snk-grid-config__group--font-size);
|
179
145
|
font-weight: var(--snk-grid-config__group--font-weight);
|
180
146
|
padding-bottom: var(--snk-grid-config__group--padding-bottom);
|
181
|
-
}
|
147
|
+
}
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import { StringUtils, ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
|
2
2
|
import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
|
3
|
-
import { CheckMode } from '@sankhyalabs/ezui/dist/collection/components/ez-check/CheckMode';
|
4
3
|
import { h, Host } from '@stencil/core';
|
5
4
|
import { ConfigStorage } from '../../lib/configs/ConfigStorage';
|
6
5
|
import { ORDER_VALUES } from '../../lib/utils/constants';
|
@@ -8,8 +7,9 @@ export class SnkGridConfig {
|
|
8
7
|
constructor() {
|
9
8
|
this._orderListItems = [];
|
10
9
|
this._orderPriorityList = [];
|
10
|
+
this._visibleList = [];
|
11
|
+
this._hiddenList = [];
|
11
12
|
this._columListItems = [];
|
12
|
-
this._selectedIndex = -1;
|
13
13
|
this._dataChanged = false;
|
14
14
|
this._componenteInternalKey = Date.now();
|
15
15
|
this.selectedIndex = 0;
|
@@ -17,6 +17,8 @@ export class SnkGridConfig {
|
|
17
17
|
this.config = undefined;
|
18
18
|
this.configName = undefined;
|
19
19
|
this.resourceID = undefined;
|
20
|
+
this._collapsibleBoxListOrder = true;
|
21
|
+
this._collapsibleBoxListSelect = false;
|
20
22
|
}
|
21
23
|
/* Creation Methods */
|
22
24
|
/**
|
@@ -26,15 +28,15 @@ export class SnkGridConfig {
|
|
26
28
|
* Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-grid.msg.ts"
|
27
29
|
*/
|
28
30
|
getMessage(key, params) {
|
29
|
-
const application = ApplicationContext.getContextValue(
|
31
|
+
const application = ApplicationContext.getContextValue('__SNK__APPLICATION__');
|
30
32
|
return application.messagesBuilder.getMessage(key, params);
|
31
33
|
}
|
32
34
|
getSortableColumns() {
|
33
35
|
let newList = [];
|
34
|
-
this.columns.filter(col => { var _a; return StringUtils.getBooleanValue((_a = col === null || col === void 0 ? void 0 : col.props) === null || _a === void 0 ? void 0 : _a.get(
|
35
|
-
var _a;
|
36
|
+
this.columns.filter(col => { var _a; return StringUtils.getBooleanValue((_a = col === null || col === void 0 ? void 0 : col.props) === null || _a === void 0 ? void 0 : _a.get('sortable'), true); }).forEach((column) => {
|
37
|
+
var _a, _b;
|
36
38
|
let configItem = (_a = this.config) === null || _a === void 0 ? void 0 : _a.columns.find((item) => item.name === column.name);
|
37
|
-
let item = {
|
39
|
+
let item = { label: column.label, sort: (_b = column === null || column === void 0 ? void 0 : column.sort) !== null && _b !== void 0 ? _b : ORDER_VALUES.asc.value, id: column.name };
|
38
40
|
if (configItem) {
|
39
41
|
item['orderIndex'] = configItem.orderIndex;
|
40
42
|
item['ascending'] = configItem.ascending;
|
@@ -74,16 +76,22 @@ export class SnkGridConfig {
|
|
74
76
|
}
|
75
77
|
createColumnList() {
|
76
78
|
let visibleGroup = {
|
77
|
-
group: this.getMessage(
|
79
|
+
group: this.getMessage('snkGridConfig.group.visible'),
|
78
80
|
items: [],
|
79
81
|
};
|
80
82
|
let hiddenGroup = {
|
81
|
-
group: this.getMessage(
|
83
|
+
group: this.getMessage('snkGridConfig.group.hidden'),
|
82
84
|
items: [],
|
83
|
-
sort: ORDER_VALUES.asc.value
|
85
|
+
sort: ORDER_VALUES.asc.value,
|
84
86
|
};
|
85
87
|
this.columns.forEach((column) => {
|
86
|
-
|
88
|
+
var _a;
|
89
|
+
let item = {
|
90
|
+
label: column.label,
|
91
|
+
selected: false,
|
92
|
+
sort: (_a = column === null || column === void 0 ? void 0 : column.sort) !== null && _a !== void 0 ? _a : ORDER_VALUES.asc.value,
|
93
|
+
id: column.name,
|
94
|
+
};
|
87
95
|
if (column.hidden) {
|
88
96
|
hiddenGroup.items.push(item);
|
89
97
|
}
|
@@ -92,13 +100,9 @@ export class SnkGridConfig {
|
|
92
100
|
}
|
93
101
|
});
|
94
102
|
this._columListItems = [visibleGroup, hiddenGroup];
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
}
|
99
|
-
buildColumnListSlot(item, group) {
|
100
|
-
const dataElementId = this.createColumnListSlotDataElementId(item);
|
101
|
-
return (h("div", null, h("ez-check", { mode: CheckMode.SWITCH, id: CheckMode.SWITCH + ((item === null || item === void 0 ? void 0 : item.label) || '') + ((group === null || group === void 0 ? void 0 : group.group) || ''), value: group.group === this.getMessage("snkGridConfig.group.visible"), "data-element-id": dataElementId, onEzChange: (evt) => { this.switchColumnGroup(evt, item); } })));
|
103
|
+
this._visibleList = visibleGroup.items;
|
104
|
+
this._hiddenList = hiddenGroup.items;
|
105
|
+
this.createOrderList();
|
102
106
|
}
|
103
107
|
createOrderListSlotDataElementId(item) {
|
104
108
|
return `${this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)}_configItem_${StringUtils.toCamelCase(item.label)}`;
|
@@ -109,7 +113,10 @@ export class SnkGridConfig {
|
|
109
113
|
if ((item === null || item === void 0 ? void 0 : item.ascending) != undefined) {
|
110
114
|
selectedOption = item.ascending == true ? ORDER_VALUES.asc.value : ORDER_VALUES.desc.value;
|
111
115
|
}
|
112
|
-
return (h("
|
116
|
+
return (h("snk-select-box", { selectedOption: selectedOption, key: 'snk-select-box-' + this._componenteInternalKey + '-' + item, "data-element-id": dataElementId, onEzChange: (evt) => {
|
117
|
+
evt.stopPropagation();
|
118
|
+
this.updateOrder(evt.detail, item.label);
|
119
|
+
} }));
|
113
120
|
}
|
114
121
|
updateOrder(sortOrder, updatedItemLabel) {
|
115
122
|
var _a;
|
@@ -139,34 +146,6 @@ export class SnkGridConfig {
|
|
139
146
|
}
|
140
147
|
this.columns = newList;
|
141
148
|
}
|
142
|
-
/* Actions Methods */
|
143
|
-
switchColumnGroup(evt, switchedItem) {
|
144
|
-
evt.stopPropagation();
|
145
|
-
let newList = [...this._columListItems];
|
146
|
-
this._dataChanged = true;
|
147
|
-
if (evt.detail === true) {
|
148
|
-
let hiddenGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.hidden"));
|
149
|
-
let index = hiddenGroup.items.findIndex((item) => item.label === switchedItem.label);
|
150
|
-
if (index >= 0) {
|
151
|
-
hiddenGroup.items.splice(index, 1);
|
152
|
-
}
|
153
|
-
let visibleGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.visible"));
|
154
|
-
visibleGroup.items.push(switchedItem);
|
155
|
-
this._columListItems = newList;
|
156
|
-
this.createOrderList();
|
157
|
-
}
|
158
|
-
else if (evt.detail === false) {
|
159
|
-
let visibleGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.visible"));
|
160
|
-
let index = visibleGroup.items.findIndex((item) => item.label === switchedItem.label);
|
161
|
-
if (index >= 0) {
|
162
|
-
visibleGroup.items.splice(index, 1);
|
163
|
-
}
|
164
|
-
let hiddenGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.hidden"));
|
165
|
-
hiddenGroup.items.push(switchedItem);
|
166
|
-
this._columListItems = newList;
|
167
|
-
this.createOrderList();
|
168
|
-
}
|
169
|
-
}
|
170
149
|
finish() {
|
171
150
|
if (!this._dataChanged) {
|
172
151
|
this.closeConfig();
|
@@ -177,7 +156,7 @@ export class SnkGridConfig {
|
|
177
156
|
group.items.forEach((item) => {
|
178
157
|
const baseColumn = this.columns.find((column) => column.label === item.label);
|
179
158
|
let newColumnItem = Object.assign({}, baseColumn);
|
180
|
-
if (group.group === this.getMessage(
|
159
|
+
if (group.group === this.getMessage('snkGridConfig.group.hidden')) {
|
181
160
|
newColumnItem.hidden = true;
|
182
161
|
}
|
183
162
|
else {
|
@@ -195,8 +174,7 @@ export class SnkGridConfig {
|
|
195
174
|
ConfigStorage.saveGridConfig(_newConfig, this.configName, this.resourceID)
|
196
175
|
.then((savedConfig) => {
|
197
176
|
this.configChange.emit(savedConfig);
|
198
|
-
this.
|
199
|
-
ApplicationUtils.info(this.getMessage("snkGridConfig.info.successfullyConfigSaved"), { iconName: "check" });
|
177
|
+
ApplicationUtils.info(this.getMessage('snkGridConfig.info.successfullyConfigSaved'), { iconName: 'check' });
|
200
178
|
});
|
201
179
|
}
|
202
180
|
reOrderPriorityColumns(columns, orderPriorityList) {
|
@@ -295,132 +273,19 @@ export class SnkGridConfig {
|
|
295
273
|
});
|
296
274
|
return newConfig;
|
297
275
|
}
|
298
|
-
async locateColumn(evt, searchingText) {
|
299
|
-
var _a;
|
300
|
-
const hitEnter = evt.key === "Enter";
|
301
|
-
searchingText = searchingText || ((_a = evt.currentTarget) === null || _a === void 0 ? void 0 : _a.value);
|
302
|
-
if (!searchingText) {
|
303
|
-
this.removeSelection();
|
304
|
-
return;
|
305
|
-
}
|
306
|
-
const matchedIndexes = await this.getMatchedIndexes(searchingText);
|
307
|
-
const newSelected = this.getNewSelectedIndex(matchedIndexes, hitEnter);
|
308
|
-
this._selectedIndex = newSelected;
|
309
|
-
if (this.selectedIndex === 1) {
|
310
|
-
this.updateOrderListSelection(newSelected);
|
311
|
-
}
|
312
|
-
else {
|
313
|
-
this.updateColumnListSelection(newSelected);
|
314
|
-
}
|
315
|
-
}
|
316
|
-
async getMatchedIndexes(searchingText) {
|
317
|
-
const matchedIndexes = [];
|
318
|
-
if (this.selectedIndex === 1) {
|
319
|
-
const orderListDatasource = await this._orderList.getList();
|
320
|
-
orderListDatasource.forEach((column, index) => {
|
321
|
-
if (this.compareWords(column, searchingText)) {
|
322
|
-
matchedIndexes.push(index);
|
323
|
-
}
|
324
|
-
});
|
325
|
-
}
|
326
|
-
else {
|
327
|
-
this.columns.forEach((column, index) => {
|
328
|
-
if (this.compareWords(column, searchingText)) {
|
329
|
-
matchedIndexes.push(index);
|
330
|
-
}
|
331
|
-
});
|
332
|
-
}
|
333
|
-
return matchedIndexes;
|
334
|
-
}
|
335
|
-
getNewSelectedIndex(matchedIndexes, hitEnter) {
|
336
|
-
if (matchedIndexes.length === 0)
|
337
|
-
return -1;
|
338
|
-
if (hitEnter) {
|
339
|
-
for (const index of matchedIndexes) {
|
340
|
-
if (index > this._selectedIndex) {
|
341
|
-
return index;
|
342
|
-
}
|
343
|
-
}
|
344
|
-
}
|
345
|
-
return matchedIndexes[0];
|
346
|
-
}
|
347
|
-
updateOrderListSelection(newSelected) {
|
348
|
-
if (newSelected === -1) {
|
349
|
-
this._orderList.removeSelection();
|
350
|
-
return;
|
351
|
-
}
|
352
|
-
this._orderList.getList().then((orderListDatasource) => {
|
353
|
-
const selectedColumn = orderListDatasource[newSelected];
|
354
|
-
if (selectedColumn) {
|
355
|
-
this._orderList.setSelection(selectedColumn, true);
|
356
|
-
}
|
357
|
-
else {
|
358
|
-
this._orderList.removeSelection();
|
359
|
-
}
|
360
|
-
});
|
361
|
-
}
|
362
|
-
updateColumnListSelection(newSelected) {
|
363
|
-
if (newSelected === -1) {
|
364
|
-
this._columnList.removeSelection();
|
365
|
-
return;
|
366
|
-
}
|
367
|
-
const selectedColumn = this.columns[newSelected];
|
368
|
-
if (selectedColumn) {
|
369
|
-
const listItem = this._columListItems
|
370
|
-
.map(group => group.items)
|
371
|
-
.flat()
|
372
|
-
.find(item => item.label === selectedColumn.label);
|
373
|
-
if (listItem) {
|
374
|
-
this._columnList.setSelection(listItem, true);
|
375
|
-
}
|
376
|
-
else {
|
377
|
-
this._columnList.removeSelection();
|
378
|
-
}
|
379
|
-
}
|
380
|
-
else {
|
381
|
-
this._columnList.removeSelection();
|
382
|
-
}
|
383
|
-
}
|
384
|
-
removeSelection() {
|
385
|
-
if (this.selectedIndex === 1) {
|
386
|
-
this._orderList.removeSelection();
|
387
|
-
}
|
388
|
-
else {
|
389
|
-
this._columnList.removeSelection();
|
390
|
-
}
|
391
|
-
}
|
392
|
-
compareWords(column, searchingText) {
|
393
|
-
var _a, _b;
|
394
|
-
const columnLabel = (_a = StringUtils.replaceAccentuatedChars(column === null || column === void 0 ? void 0 : column.label)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
|
395
|
-
const argument = (_b = StringUtils.replaceAccentuatedChars(searchingText)) === null || _b === void 0 ? void 0 : _b.toUpperCase();
|
396
|
-
if (StringUtils.isEmpty(columnLabel) || StringUtils.isEmpty(argument)) {
|
397
|
-
return false;
|
398
|
-
}
|
399
|
-
return columnLabel.includes(argument);
|
400
|
-
}
|
401
|
-
getColumnNames() {
|
402
|
-
const listNames = [];
|
403
|
-
listNames.push(this.getMessage("snkGridConfig.tab.columns"));
|
404
|
-
listNames.push(this.getMessage("snkGridConfig.tab.lineOrdering"));
|
405
|
-
return listNames.join(',');
|
406
|
-
}
|
407
276
|
closeConfig() {
|
408
|
-
this._orderList.scrollToTop();
|
409
|
-
this._columnList.scrollToTop();
|
410
|
-
this._searchElement.value = "";
|
411
277
|
if (this._dataChanged) {
|
412
278
|
let options = {
|
413
279
|
canClose: false,
|
414
|
-
labelCancel: this.getMessage(
|
415
|
-
labelConfirm: this.getMessage(
|
416
|
-
btnConfirmDanger: false
|
280
|
+
labelCancel: this.getMessage('snkGridConfig.confirm.cancel'),
|
281
|
+
labelConfirm: this.getMessage('snkGridConfig.confirm.save'),
|
282
|
+
btnConfirmDanger: false,
|
417
283
|
};
|
418
|
-
ApplicationUtils.confirm(this.getMessage(
|
284
|
+
ApplicationUtils.confirm(this.getMessage('snkGridConfig.confirm.alert'), this.getMessage('snkGridConfig.confirm.msgCancel'), null, DialogType.WARN, options)
|
419
285
|
.then((response) => {
|
420
286
|
if (!response) {
|
421
287
|
this._dataChanged = false;
|
422
288
|
this.configCancel.emit();
|
423
|
-
this._orderList.clearHistory();
|
424
289
|
this._componenteInternalKey = Date.now();
|
425
290
|
}
|
426
291
|
else {
|
@@ -430,31 +295,12 @@ export class SnkGridConfig {
|
|
430
295
|
}
|
431
296
|
else {
|
432
297
|
this.configCancel.emit();
|
433
|
-
this._orderList.clearHistory();
|
434
|
-
}
|
435
|
-
}
|
436
|
-
/* Handlers */
|
437
|
-
handleTabChange(tab) {
|
438
|
-
if ((tab === null || tab === void 0 ? void 0 : tab.index) != undefined) {
|
439
|
-
if (this.selectedIndex !== tab.index) {
|
440
|
-
if (tab.index === 0) {
|
441
|
-
this._orderList.scrollToTop();
|
442
|
-
}
|
443
|
-
else if (tab.index === 1) {
|
444
|
-
this._columnList.scrollToTop();
|
445
|
-
}
|
446
|
-
this._searchElement.value = "";
|
447
|
-
}
|
448
|
-
if (tab.index === 1) {
|
449
|
-
this.createOrderList();
|
450
|
-
}
|
451
|
-
this.selectedIndex = tab.index;
|
452
298
|
}
|
453
299
|
}
|
454
300
|
handleColumnListChange(evt) {
|
455
301
|
var _a;
|
456
302
|
if (evt.detail) {
|
457
|
-
let visibleItems = (_a = evt.detail.find((group) => group.group === this.getMessage(
|
303
|
+
let visibleItems = (_a = evt.detail.find((group) => group.group === this.getMessage('snkGridConfig.group.visible'))) === null || _a === void 0 ? void 0 : _a.items;
|
458
304
|
if (visibleItems) {
|
459
305
|
this._dataChanged = true;
|
460
306
|
this._orderListItems = visibleItems;
|
@@ -476,17 +322,30 @@ export class SnkGridConfig {
|
|
476
322
|
this.createColumnList();
|
477
323
|
}
|
478
324
|
}
|
479
|
-
componentDidRender() {
|
480
|
-
var _a;
|
481
|
-
if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
482
|
-
this.locateColumn(new KeyboardEvent("arrow-right", { key: "ArrowRight" }), this._searchElement.value);
|
483
|
-
}
|
484
|
-
}
|
485
325
|
componentDidLoad() {
|
486
326
|
ElementIDUtils.addIDInfo(this._element);
|
487
327
|
}
|
328
|
+
handleRightListChange(rightList) {
|
329
|
+
const visibleGroup = this._columListItems.find(group => group.group === this.getMessage('snkGridConfig.group.visible'));
|
330
|
+
if (visibleGroup && visibleGroup.items != rightList) {
|
331
|
+
visibleGroup.items = rightList;
|
332
|
+
this._dataChanged = true;
|
333
|
+
}
|
334
|
+
}
|
335
|
+
getListSlots() {
|
336
|
+
return {
|
337
|
+
RIGHT_LIST: {
|
338
|
+
itemRightSlotBuilder: (item) => this.buildOrderListSlot(item),
|
339
|
+
},
|
340
|
+
};
|
341
|
+
}
|
488
342
|
render() {
|
489
|
-
return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, this.getMessage(
|
343
|
+
return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "ez-margin-bottom--medium" }, h("label", { class: "title" }, this.getMessage('snkGridConfig.gridConfiguration')), h("label", { class: "subtitle" }, this.getMessage('snkGridConfig.columnVisibilityOrder'))), h("div", { class: "button-close" }, h("ez-button", { mode: "icon", iconName: "close", size: "medium", class: "ez-button--tertiary", onClick: () => this.closeConfig() })))), h("div", { class: "grid-config__body" }, h("ez-collapsible-box", { id: 'group-select-columns', label: this.getMessage('snkGridConfig.columnsSelection'), "header-size": "medium", key: 'key_group-select-columns', value: this._collapsibleBoxListSelect, onEzChange: ({ detail }) => this._collapsibleBoxListOrder = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { leftList: this._hiddenList, leftTitle: this.getMessage('snkGridConfig.availableColumns'), rightList: this._visibleList, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), onEzRightListChanged: ({ detail }) => this.handleRightListChange(detail), emptyMessage: {
|
344
|
+
LEFT_LIST: this.getMessage('snkGridConfig.emptyMensage.left'),
|
345
|
+
RIGHT_LIST: this.getMessage('snkGridConfig.emptyMensage.right'),
|
346
|
+
}, entityLabel: 'coluna', entityLabelPlural: 'colunas' }))), h("ez-collapsible-box", { id: 'ID_group-order-columns', label: this.getMessage('snkGridConfig.dataOrdering'), "header-size": "medium", key: 'KEY_group-order-columns', value: this._collapsibleBoxListOrder, onEzChange: ({ detail }) => this._collapsibleBoxListSelect = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { rightList: this._orderListItems, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), useOnlyRightList: true, slotsListBuilder: this.getListSlots(), emptyMessage: {
|
347
|
+
RIGHT_LIST: this.getMessage('snkGridConfig.emptyMensage.right'),
|
348
|
+
}, entityLabel: 'coluna', entityLabelPlural: 'colunas' })))), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: this.getMessage('snkGridConfig.cancel'), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage('snkGridConfig.complete'), class: "ez-button--primary", onClick: () => this.finish() }))));
|
490
349
|
}
|
491
350
|
static get is() { return "snk-grid-config"; }
|
492
351
|
static get encapsulation() { return "scoped"; }
|
@@ -600,6 +459,12 @@ export class SnkGridConfig {
|
|
600
459
|
}
|
601
460
|
};
|
602
461
|
}
|
462
|
+
static get states() {
|
463
|
+
return {
|
464
|
+
"_collapsibleBoxListOrder": {},
|
465
|
+
"_collapsibleBoxListSelect": {}
|
466
|
+
};
|
467
|
+
}
|
603
468
|
static get events() {
|
604
469
|
return [{
|
605
470
|
"method": "configChange",
|
@@ -780,7 +780,7 @@ export class SnkSimpleCrud {
|
|
780
780
|
}
|
781
781
|
return (h("snk-data-unit", { ref: ref => this._snkDataUnit = ref, class: "simple-crud__container", dataUnit: this.dataUnit, useCancelConfirm: this.useCancelConfirm, onDataStateChange: evt => this.onDataStateChange(evt), onCancelEdition: this.handleCancelEdit.bind(this), pageSize: this.getPageSize(), onInsertionMode: this.handleDataUnitOnInsertionMode.bind(this), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail, onDataUnitFieldsHidded: this.updateFormConfig.bind(this), domainMessagesBuilder: this.domainMessagesBuilder }, h("header", null, h("slot", { name: "snkSimpleCrudHeader" })), h("section", { class: `ez-box ez-box--no-outline ${this.outlineMode ? 'ez-box--outline' : 'ez-box--shadow'} simple-crud__container-section`, ref: (ref) => this._container = ref, tabindex: "0" }, h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, h("stack-item", null, h("ez-grid", { class: "ez-margin-bottom--large ez-box--no-outline", ref: ref => this._grid = ref, dataUnit: this.dataUnit, config: this.gridConfig, "no-header": true, multipleSelection: this.multipleSelection, onEzDoubleClick: () => this.goToView(VIEW_MODE.FORM), onConfigChange: evt => this.gridConfigChangeHandler(evt), columnfilterDataSource: this.dataUnit.name && this.dataUnit.name.includes(InMemoryLoader.IN_MEMORY_DATA_UNIT_NAME)
|
782
782
|
? undefined
|
783
|
-
: this._multiSelectionListDataSource, useEnterLikeTab: this.useEnterLikeTab, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableContinuousInsert: this.enableContinuousInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, outlineMode: this.outlineMode, tabindex: "0", paginationCounterMode: this.paginationCounterMode }, this.renderTaskbarContent(VIEW_MODE.GRID), h("div", { slot: "footer" }, h("slot", { name: "snkSimpleCrudFooter" })))), h("stack-item", null, this.renderTaskbarContent(VIEW_MODE.FORM), h("ez-form", { ref: (ref) => this._form = ref, class: `ez-margin-top--large ez-box--no-outline`, dataUnit: this.dataUnit, config: this.getFormConfig(), fieldToFocus: this._fieldToGetFocus, onEzFormSetFields: (evt) => this.handleFormSetFields(evt.detail), onEzFormRequestClearFieldToFocus: this.clearFieldToFocusHandler.bind(this), elementFocusSearchField: this._container, tabindex: "0" }), h("snk-simple-form-config", { ref: (ref) => this._snkSimpleFormConfig = ref, dataUnit: this.dataUnit, onSnkConfigSaved: this.handleFormConfigSaved.bind(this), configName: (_a = this.formLegacyConfigName) !== null && _a !== void 0 ? _a : this.configName })), this.messagesBuilder && h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.goToView(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showConfiguratorButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this.resolveResourceID(), customContainerId: this._customContainerId, layoutFormConfig: this.layoutFormConfig })), h("div", { id: `${this._customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }))), h("ez-
|
783
|
+
: this._multiSelectionListDataSource, useEnterLikeTab: this.useEnterLikeTab, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableContinuousInsert: this.enableContinuousInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, outlineMode: this.outlineMode, tabindex: "0", paginationCounterMode: this.paginationCounterMode }, this.renderTaskbarContent(VIEW_MODE.GRID), h("div", { slot: "footer" }, h("slot", { name: "snkSimpleCrudFooter" })))), h("stack-item", null, this.renderTaskbarContent(VIEW_MODE.FORM), h("ez-form", { ref: (ref) => this._form = ref, class: `ez-margin-top--large ez-box--no-outline`, dataUnit: this.dataUnit, config: this.getFormConfig(), fieldToFocus: this._fieldToGetFocus, onEzFormSetFields: (evt) => this.handleFormSetFields(evt.detail), onEzFormRequestClearFieldToFocus: this.clearFieldToFocusHandler.bind(this), elementFocusSearchField: this._container, tabindex: "0" }), h("snk-simple-form-config", { ref: (ref) => this._snkSimpleFormConfig = ref, dataUnit: this.dataUnit, onSnkConfigSaved: this.handleFormConfigSaved.bind(this), configName: (_a = this.formLegacyConfigName) !== null && _a !== void 0 ? _a : this.configName })), this.messagesBuilder && h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.goToView(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showConfiguratorButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this.resolveResourceID(), customContainerId: this._customContainerId, layoutFormConfig: this.layoutFormConfig })), h("div", { id: `${this._customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }))), h("ez-popup", { size: "medium", heightMode: "auto", useHeader: false, opened: this._showPopUpGridConfig, onEzClosePopup: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this.gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resolveResourceID() }))));
|
784
784
|
}
|
785
785
|
static get is() { return "snk-simple-crud"; }
|
786
786
|
static get encapsulation() { return "scoped"; }
|
@@ -80,7 +80,7 @@ export class SnkSimpleFormConfig {
|
|
80
80
|
this.snkConfigSaved.emit();
|
81
81
|
}
|
82
82
|
render() {
|
83
|
-
return (h("ez-popup", { ref: (ref) => this.ezPopupRef = ref, heightMode: 'auto', size: '
|
83
|
+
return (h("ez-popup", { ref: (ref) => this.ezPopupRef = ref, heightMode: 'auto', size: 'medium', ezTitle: 'Configurar formul\u00E1rio' }, h("div", { class: 'config-container' }, h("div", { class: 'config-lists' }, h("ez-double-list", { ref: (ref) => this.ezDoubleListRef = ref, leftList: this.avaliableFields, leftTitle: 'Campos disponíveis', rightList: this.selectedFields, rightTitle: 'Campos selecionados', onEzRightListChanged: ({ detail }) => this.fieldsToSave = [...detail], entityLabel: 'campo', entityLabelPlural: 'campos' })), h("div", { class: 'config-actions' }, h("ez-button", { label: 'Restaurar', onClick: this.handleResetConfigs.bind(this), size: 'small' }), h("ez-button", { label: 'Cancelar', onClick: this.handleCancel.bind(this), size: 'small' }), h("ez-button", { label: 'Salvar', class: 'ez-button--primary', onClick: this.handleSave.bind(this), size: 'small' })))));
|
84
84
|
}
|
85
85
|
static get is() { return "snk-simple-form-config"; }
|
86
86
|
static get originalStyleUrls() {
|
@@ -7,14 +7,22 @@ export const snkGridMessages = {
|
|
7
7
|
};
|
8
8
|
export const snkGridConfigMessages = {
|
9
9
|
gridConfiguration: "Configuração da Grade",
|
10
|
-
columnVisibilityOrder: "
|
10
|
+
columnVisibilityOrder: "Arraste os itens para definir a ordem e visibilidade das colunas da sua grade.",
|
11
11
|
sortingSequence: "Sequência da ordenação",
|
12
12
|
findColumn: "Localizar coluna",
|
13
13
|
cancel: "Cancelar",
|
14
14
|
complete: "Concluir",
|
15
|
+
columnsSelection: "Seleção de colunas",
|
16
|
+
availableColumns: "Colunas disponíveis",
|
17
|
+
selectedColumns: "Colunas selecionadas",
|
18
|
+
dataOrdering: "Ordenação de dados",
|
19
|
+
emptyMensage: {
|
20
|
+
left: "Nenhuma coluna disponível",
|
21
|
+
right: "Nenhuma coluna selecionada"
|
22
|
+
},
|
15
23
|
tab: {
|
16
24
|
columns: "Colunas",
|
17
|
-
lineOrdering: "Ordenação das linhas"
|
25
|
+
lineOrdering: "Ordenação das linhas"
|
18
26
|
},
|
19
27
|
info: {
|
20
28
|
successfullyConfigSaved: "As configurações foram salvas com sucesso!"
|
@@ -280,14 +280,22 @@ const snkGridMessages = {
|
|
280
280
|
};
|
281
281
|
const snkGridConfigMessages = {
|
282
282
|
gridConfiguration: "Configuração da Grade",
|
283
|
-
columnVisibilityOrder: "
|
283
|
+
columnVisibilityOrder: "Arraste os itens para definir a ordem e visibilidade das colunas da sua grade.",
|
284
284
|
sortingSequence: "Sequência da ordenação",
|
285
285
|
findColumn: "Localizar coluna",
|
286
286
|
cancel: "Cancelar",
|
287
287
|
complete: "Concluir",
|
288
|
+
columnsSelection: "Seleção de colunas",
|
289
|
+
availableColumns: "Colunas disponíveis",
|
290
|
+
selectedColumns: "Colunas selecionadas",
|
291
|
+
dataOrdering: "Ordenação de dados",
|
292
|
+
emptyMensage: {
|
293
|
+
left: "Nenhuma coluna disponível",
|
294
|
+
right: "Nenhuma coluna selecionada"
|
295
|
+
},
|
288
296
|
tab: {
|
289
297
|
columns: "Colunas",
|
290
|
-
lineOrdering: "Ordenação das linhas"
|
298
|
+
lineOrdering: "Ordenação das linhas"
|
291
299
|
},
|
292
300
|
info: {
|
293
301
|
successfullyConfigSaved: "As configurações foram salvas com sucesso!"
|