@sankhyalabs/ezui 5.11.0-dev.4 → 5.11.0-dev.6
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/ez-combo-box.cjs.entry.js +8 -2
- package/dist/cjs/ez-form-view.cjs.entry.js +37 -1
- package/dist/cjs/ez-form.cjs.entry.js +1 -0
- package/dist/cjs/ez-grid.cjs.entry.js +87 -38
- package/dist/cjs/ez-multi-selection-list.cjs.entry.js +3 -1
- package/dist/cjs/ez-search.cjs.entry.js +2 -1
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/filter-column.cjs.entry.js +30 -7
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +26 -2
- package/dist/collection/components/ez-form/ez-form.js +20 -0
- package/dist/collection/components/ez-form-view/ez-form-view.js +23 -0
- package/dist/collection/components/ez-form-view/fieldbuilder/FieldBuilder.js +4 -1
- package/dist/collection/components/ez-form-view/structure/index.js +29 -0
- package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +1 -1
- package/dist/collection/components/ez-grid/controller/ag-grid/components/EzGridCustomHeader.js +1 -1
- package/dist/collection/components/ez-grid/ez-grid.js +11 -39
- package/dist/collection/components/ez-grid/subcomponents/filter-column.js +50 -8
- package/dist/collection/components/ez-grid/utils/InMemoryFilterColumnDataSource.js +78 -0
- package/dist/collection/components/ez-multi-selection-list/ez-multi-selection-list.js +21 -1
- package/dist/collection/components/ez-search/ez-search.js +20 -1
- package/dist/custom-elements/index.js +173 -55
- package/dist/esm/ez-combo-box.entry.js +8 -2
- package/dist/esm/ez-form-view.entry.js +37 -1
- package/dist/esm/ez-form.entry.js +1 -0
- package/dist/esm/ez-grid.entry.js +88 -39
- package/dist/esm/ez-multi-selection-list.entry.js +3 -1
- package/dist/esm/ez-search.entry.js +2 -1
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/filter-column.entry.js +30 -7
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-061f4d73.entry.js +1 -0
- package/dist/ezui/p-25562cf8.entry.js +1 -0
- package/dist/ezui/p-5e55a42b.entry.js +1 -0
- package/dist/ezui/{p-9f41b414.entry.js → p-6ab2f7c2.entry.js} +1 -1
- package/dist/ezui/p-7526f2b6.entry.js +1 -0
- package/dist/ezui/p-8fdff9cd.entry.js +1 -0
- package/dist/ezui/{p-fd54b5b4.entry.js → p-964e5571.entry.js} +2 -2
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +5 -0
- package/dist/types/components/ez-form/ez-form.d.ts +5 -0
- package/dist/types/components/ez-form-view/ez-form-view.d.ts +5 -0
- package/dist/types/components/ez-form-view/structure/index.d.ts +14 -0
- package/dist/types/components/ez-grid/controller/ag-grid/components/EzGridCustomHeader.d.ts +1 -1
- package/dist/types/components/ez-grid/ez-grid.d.ts +3 -5
- package/dist/types/components/ez-grid/subcomponents/filter-column.d.ts +8 -0
- package/dist/types/components/ez-grid/utils/InMemoryFilterColumnDataSource.d.ts +16 -0
- package/dist/types/components/ez-multi-selection-list/ez-multi-selection-list.d.ts +4 -0
- package/dist/types/components/ez-search/ez-search.d.ts +4 -0
- package/dist/types/components.d.ts +35 -0
- package/package.json +1 -1
- package/dist/ezui/p-2a0e1679.entry.js +0 -1
- package/dist/ezui/p-411f3579.entry.js +0 -1
- package/dist/ezui/p-4c8b029b.entry.js +0 -1
- package/dist/ezui/p-4e31b69b.entry.js +0 -1
- package/dist/ezui/p-5a1d8bf8.entry.js +0 -1
|
@@ -32,6 +32,7 @@ export class EzComboBox {
|
|
|
32
32
|
this.mode = "regular";
|
|
33
33
|
this.hideErrorOnFocusOut = true;
|
|
34
34
|
this.listOptionsPosition = undefined;
|
|
35
|
+
this.isTextSearch = false;
|
|
35
36
|
}
|
|
36
37
|
observeErrorMessage() {
|
|
37
38
|
var _a;
|
|
@@ -354,7 +355,6 @@ export class EzComboBox {
|
|
|
354
355
|
this._visibleOptions = [];
|
|
355
356
|
this.clearSource();
|
|
356
357
|
}
|
|
357
|
-
this.setFocus();
|
|
358
358
|
}
|
|
359
359
|
loadOptions(mode, argument = "") {
|
|
360
360
|
this._criteria = argument;
|
|
@@ -539,6 +539,12 @@ export class EzComboBox {
|
|
|
539
539
|
handlerIconClick() {
|
|
540
540
|
this.searchMode ? this.loadOptions(SearchMode.ADVANCED) : this.showOptions();
|
|
541
541
|
}
|
|
542
|
+
buildNumberArgument(argument) {
|
|
543
|
+
if (this.isTextSearch) {
|
|
544
|
+
return NaN;
|
|
545
|
+
}
|
|
546
|
+
return Number(argument || undefined);
|
|
547
|
+
}
|
|
542
548
|
onTextInputChangeHandler(event) {
|
|
543
549
|
var _a;
|
|
544
550
|
this.clearDeboucingTimeout();
|
|
@@ -549,7 +555,7 @@ export class EzComboBox {
|
|
|
549
555
|
return;
|
|
550
556
|
}
|
|
551
557
|
const argument = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
|
|
552
|
-
const argumentNumber =
|
|
558
|
+
const argumentNumber = this.buildNumberArgument(argument);
|
|
553
559
|
if (!this._criteria) {
|
|
554
560
|
this._textInput.value = event.data || argument;
|
|
555
561
|
}
|
|
@@ -952,6 +958,24 @@ export class EzComboBox {
|
|
|
952
958
|
"tags": [],
|
|
953
959
|
"text": "Define um posicionamento fixo para a lista de op\u00E7\u00F5es do CheckBox."
|
|
954
960
|
}
|
|
961
|
+
},
|
|
962
|
+
"isTextSearch": {
|
|
963
|
+
"type": "boolean",
|
|
964
|
+
"mutable": false,
|
|
965
|
+
"complexType": {
|
|
966
|
+
"original": "boolean",
|
|
967
|
+
"resolved": "boolean",
|
|
968
|
+
"references": {}
|
|
969
|
+
},
|
|
970
|
+
"required": false,
|
|
971
|
+
"optional": false,
|
|
972
|
+
"docs": {
|
|
973
|
+
"tags": [],
|
|
974
|
+
"text": "Informa se a pesquisa \u00E9 do tipo texto."
|
|
975
|
+
},
|
|
976
|
+
"attribute": "is-text-search",
|
|
977
|
+
"reflect": false,
|
|
978
|
+
"defaultValue": "false"
|
|
955
979
|
}
|
|
956
980
|
};
|
|
957
981
|
}
|
|
@@ -185,6 +185,26 @@ export class EzForm {
|
|
|
185
185
|
"resolved": "void",
|
|
186
186
|
"references": {}
|
|
187
187
|
}
|
|
188
|
+
}, {
|
|
189
|
+
"method": "formItemsReady",
|
|
190
|
+
"name": "formItemsReady",
|
|
191
|
+
"bubbles": true,
|
|
192
|
+
"cancelable": true,
|
|
193
|
+
"composed": true,
|
|
194
|
+
"docs": {
|
|
195
|
+
"tags": [],
|
|
196
|
+
"text": "Respons\u00E1vel por notificar quando ocorrer a renderiza\u00E7\u00E3o de itens do formul\u00E1rio."
|
|
197
|
+
},
|
|
198
|
+
"complexType": {
|
|
199
|
+
"original": "FormItems",
|
|
200
|
+
"resolved": "FormItems",
|
|
201
|
+
"references": {
|
|
202
|
+
"FormItems": {
|
|
203
|
+
"location": "import",
|
|
204
|
+
"path": "../ez-form-view/structure"
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
}
|
|
188
208
|
}];
|
|
189
209
|
}
|
|
190
210
|
static get methods() {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Host, h } from '@stencil/core';
|
|
2
2
|
import { fieldBuilder } from './fieldbuilder/FieldBuilder';
|
|
3
3
|
import { ElementIDUtils } from '@sankhyalabs/core';
|
|
4
|
+
import { FormItems } from './structure';
|
|
4
5
|
export class EzFormView {
|
|
5
6
|
constructor() {
|
|
6
7
|
this.fields = undefined;
|
|
@@ -28,6 +29,8 @@ export class EzFormView {
|
|
|
28
29
|
}
|
|
29
30
|
componentDidRender() {
|
|
30
31
|
this.ezContentReady.emit(Array.from(this._element.querySelectorAll("[data-field-name]")));
|
|
32
|
+
const formItems = new FormItems(Array.from(this._element.querySelectorAll("[data-form-item]")));
|
|
33
|
+
this.formItemsReady.emit(formItems);
|
|
31
34
|
}
|
|
32
35
|
render() {
|
|
33
36
|
ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
|
|
@@ -105,6 +108,26 @@ export class EzFormView {
|
|
|
105
108
|
}
|
|
106
109
|
}
|
|
107
110
|
}
|
|
111
|
+
}, {
|
|
112
|
+
"method": "formItemsReady",
|
|
113
|
+
"name": "formItemsReady",
|
|
114
|
+
"bubbles": true,
|
|
115
|
+
"cancelable": true,
|
|
116
|
+
"composed": true,
|
|
117
|
+
"docs": {
|
|
118
|
+
"tags": [],
|
|
119
|
+
"text": "Respons\u00E1vel por notificar quando ocorrer a renderiza\u00E7\u00E3o de itens do formul\u00E1rio."
|
|
120
|
+
},
|
|
121
|
+
"complexType": {
|
|
122
|
+
"original": "FormItems",
|
|
123
|
+
"resolved": "FormItems",
|
|
124
|
+
"references": {
|
|
125
|
+
"FormItems": {
|
|
126
|
+
"location": "import",
|
|
127
|
+
"path": "./structure"
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
108
131
|
}];
|
|
109
132
|
}
|
|
110
133
|
static get methods() {
|
|
@@ -23,5 +23,8 @@ uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
|
|
|
23
23
|
export const fieldBuilder = (field) => {
|
|
24
24
|
const builder = uiBuilders.get(field.userInterface) || buildTextInput;
|
|
25
25
|
const label = field.required ? `${field.label}${REQUIRED_INFO}` : field.label;
|
|
26
|
-
|
|
26
|
+
const builtElement = builder(Object.assign(Object.assign({}, field), { label }));
|
|
27
|
+
//@ts-ignore
|
|
28
|
+
builtElement.$attrs$['data-form-item'] = field.name;
|
|
29
|
+
return builtElement;
|
|
27
30
|
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
class FormItem {
|
|
2
|
+
constructor(elem) {
|
|
3
|
+
this.elem = elem;
|
|
4
|
+
}
|
|
5
|
+
addRightElement(el) {
|
|
6
|
+
el.classList.add('ez-padding-left--small');
|
|
7
|
+
this.elem.classList.add('ez-col--nowrap');
|
|
8
|
+
this.elem.appendChild(el);
|
|
9
|
+
}
|
|
10
|
+
get fieldName() {
|
|
11
|
+
return this.elem.getAttribute('data-form-item');
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
export class FormItems {
|
|
15
|
+
constructor(items, formId) {
|
|
16
|
+
this.items = new Map();
|
|
17
|
+
this.formId = formId;
|
|
18
|
+
items.forEach(item => {
|
|
19
|
+
const formItem = new FormItem(item);
|
|
20
|
+
this.items.set(formItem.fieldName, formItem);
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
getItem(name) {
|
|
24
|
+
return this.items.get(name);
|
|
25
|
+
}
|
|
26
|
+
get formName() {
|
|
27
|
+
return this.formId;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -603,7 +603,7 @@ export default class AgGridController {
|
|
|
603
603
|
tooltip: tooltip,
|
|
604
604
|
isSortable: propSortable,
|
|
605
605
|
hasFilter: () => this.hasFilterColumn(source.name),
|
|
606
|
-
showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name) }),
|
|
606
|
+
showColumnFilter: (leftPosition, fromIcon) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name), fromIcon }),
|
|
607
607
|
},
|
|
608
608
|
valueFormatter: params => {
|
|
609
609
|
if (params.value == undefined) {
|
package/dist/collection/components/ez-grid/controller/ag-grid/components/EzGridCustomHeader.js
CHANGED
|
@@ -36,7 +36,7 @@ export class EzGridCustomHeader {
|
|
|
36
36
|
onClickFilter() {
|
|
37
37
|
var _a;
|
|
38
38
|
const iconLeft = (_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
|
|
39
|
-
this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px
|
|
39
|
+
this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`, true);
|
|
40
40
|
}
|
|
41
41
|
configSortIcon() {
|
|
42
42
|
this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
|
|
@@ -1,26 +1,22 @@
|
|
|
1
|
-
import { ElementIDUtils, JSUtils,
|
|
1
|
+
import { ElementIDUtils, JSUtils, } from '@sankhyalabs/core';
|
|
2
2
|
import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
|
|
3
|
-
import {
|
|
3
|
+
import { h, Host } from '@stencil/core';
|
|
4
4
|
import AgGridController from './controller/ag-grid/AgGridController';
|
|
5
5
|
import { SelectionCounter } from './subcomponents/selection-counter';
|
|
6
6
|
import { ApplicationUtils } from '../../utils';
|
|
7
|
+
import InMemoryFilterColumnDataSource from './utils/InMemoryFilterColumnDataSource';
|
|
7
8
|
const windowInstace = window;
|
|
8
9
|
export class EzGrid {
|
|
9
10
|
constructor() {
|
|
10
11
|
this._gridController = new AgGridController(false);
|
|
11
12
|
this._messageFilterAppliedSuccess = 'Filtro de coluna aplicado com sucesso!';
|
|
12
|
-
this.onDataUnitAction = (action) => {
|
|
13
|
-
if (action.type === Action.DATA_SAVED || action.type === Action.RECORDS_REMOVED) {
|
|
14
|
-
this._originalRecords = this.dataUnit.records;
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
13
|
this._paginationInfo = undefined;
|
|
18
14
|
this._paginationChangedByKeyboard = true;
|
|
19
15
|
this._showSelectionCounter = false;
|
|
20
16
|
this._isAllSelection = false;
|
|
21
17
|
this._currentPageSelected = undefined;
|
|
22
18
|
this._selectionCount = undefined;
|
|
23
|
-
this.
|
|
19
|
+
this._hasLeftButtons = false;
|
|
24
20
|
this.multipleSelection = undefined;
|
|
25
21
|
this.config = undefined;
|
|
26
22
|
this.selectionToastConfig = undefined;
|
|
@@ -290,44 +286,20 @@ export class EzGrid {
|
|
|
290
286
|
});
|
|
291
287
|
}
|
|
292
288
|
componentWillLoad() {
|
|
289
|
+
this._hasLeftButtons = !!this._element.querySelector('[slot="leftButtons"]');
|
|
293
290
|
if (!this.dataUnit.name.includes("InMemoryDataUnit"))
|
|
294
291
|
return;
|
|
295
|
-
this.dataUnit.subscribe(this.onDataUnitAction);
|
|
296
292
|
}
|
|
297
293
|
getDataSource() {
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
buildDefaultDataSource() {
|
|
301
|
-
var _a, _b;
|
|
302
|
-
if (this._originalRecords.length === 0) {
|
|
303
|
-
this._originalRecords = (_b = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.records) !== null && _b !== void 0 ? _b : [];
|
|
304
|
-
}
|
|
305
|
-
return {
|
|
306
|
-
fetchData: (filterTerm, fieldName) => {
|
|
307
|
-
return new Promise(resolve => {
|
|
308
|
-
const filteredRecords = this._originalRecords.filter(record => {
|
|
309
|
-
var _a, _b;
|
|
310
|
-
const label = typeof record[fieldName] === "object" ? `${(_a = record[fieldName]) === null || _a === void 0 ? void 0 : _a.value} - ${(_b = record[fieldName]) === null || _b === void 0 ? void 0 : _b.label}` : record[fieldName];
|
|
311
|
-
return label === null || label === void 0 ? void 0 : label.toString().toLowerCase().includes(filterTerm.toLowerCase());
|
|
312
|
-
});
|
|
313
|
-
const options = filteredRecords.map(item => {
|
|
314
|
-
return { value: item[fieldName].toString(), label: this.formatLabel(fieldName, item[fieldName]), check: true };
|
|
315
|
-
});
|
|
316
|
-
resolve(options);
|
|
317
|
-
});
|
|
318
|
-
}
|
|
319
|
-
};
|
|
294
|
+
var _a;
|
|
295
|
+
return (_a = this.columnfilterDataSource) !== null && _a !== void 0 ? _a : new InMemoryFilterColumnDataSource(this.dataUnit);
|
|
320
296
|
}
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
if (userInterface === UserInterface.DATETIME) {
|
|
324
|
-
return DateUtils.formatDate(this.dataUnit.valueFromString(fieldName, value));
|
|
325
|
-
}
|
|
326
|
-
return String(this.dataUnit.getFormattedValue(fieldName, value));
|
|
297
|
+
hideHeader() {
|
|
298
|
+
return (!!this._element.getAttribute("no-header") && !this._paginationInfo);
|
|
327
299
|
}
|
|
328
300
|
render() {
|
|
329
301
|
var _a;
|
|
330
|
-
return (h(Host,
|
|
302
|
+
return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, 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
|
|
331
303
|
${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
|
|
332
304
|
` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
|
|
333
305
|
}
|
|
@@ -550,7 +522,7 @@ export class EzGrid {
|
|
|
550
522
|
"_isAllSelection": {},
|
|
551
523
|
"_currentPageSelected": {},
|
|
552
524
|
"_selectionCount": {},
|
|
553
|
-
"
|
|
525
|
+
"_hasLeftButtons": {}
|
|
554
526
|
};
|
|
555
527
|
}
|
|
556
528
|
static get events() {
|
|
@@ -8,19 +8,23 @@ const onSubmitFilter = new CustomEvent('onSubmitFilter', {
|
|
|
8
8
|
});
|
|
9
9
|
export class FilterColumn {
|
|
10
10
|
constructor() {
|
|
11
|
-
this.TOP_POSITION = '
|
|
11
|
+
this.TOP_POSITION = '65';
|
|
12
12
|
this.TOP_POSITION_HEADER_HIDDEN = '18';
|
|
13
|
+
this.TOP_POSITION_NO_TASKBAR = '32';
|
|
14
|
+
this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN = '20';
|
|
13
15
|
this.DEFAULT_HEIGHT = 430;
|
|
14
16
|
this.opened = true;
|
|
15
17
|
this.columnName = undefined;
|
|
16
18
|
this.columnLabel = undefined;
|
|
17
19
|
this.gridHeaderHidden = false;
|
|
20
|
+
this.noHeaderTaskBar = false;
|
|
18
21
|
this.dataSource = undefined;
|
|
19
22
|
this.dataUnit = undefined;
|
|
20
23
|
this.options = undefined;
|
|
21
24
|
this.selectedItems = undefined;
|
|
22
25
|
this.fieldDescriptor = undefined;
|
|
23
26
|
this.useOptions = false;
|
|
27
|
+
this.isTextSearch = false;
|
|
24
28
|
}
|
|
25
29
|
async hide() {
|
|
26
30
|
await this.ezPopoverElement.hide();
|
|
@@ -34,26 +38,45 @@ export class FilterColumn {
|
|
|
34
38
|
if (this.canShow(configs)) {
|
|
35
39
|
await this.hide();
|
|
36
40
|
this.fieldDescriptor = this.dataUnit.getField(configs.columnName);
|
|
41
|
+
this.buildIsTextSearch();
|
|
37
42
|
this.setOptions(configs.filteredOptions);
|
|
38
43
|
this.columnName = configs.columnName;
|
|
39
44
|
this.columnLabel = configs.columnLabel;
|
|
40
|
-
await this.ezPopoverElement.show(this.calcTopPosition(), configs
|
|
45
|
+
await this.ezPopoverElement.show(this.calcTopPosition(), this.calculateLeftPosition(configs));
|
|
41
46
|
}
|
|
42
47
|
}
|
|
48
|
+
calculateLeftPosition(configs) {
|
|
49
|
+
if (!configs.fromIcon) {
|
|
50
|
+
return configs.leftPosition;
|
|
51
|
+
}
|
|
52
|
+
const difference = this.ezPopoverElement.getBoundingClientRect().left;
|
|
53
|
+
const leftReference = parseInt(configs.leftPosition.replace('px', ''));
|
|
54
|
+
const leftResolved = (leftReference + 16) - difference;
|
|
55
|
+
return `${(leftResolved > 0 ? leftResolved : 0)}px`;
|
|
56
|
+
}
|
|
57
|
+
buildIsTextSearch() {
|
|
58
|
+
var _a, _b;
|
|
59
|
+
const userInterface = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) !== null && _b !== void 0 ? _b : UserInterface.SHORTTEXT;
|
|
60
|
+
this.isTextSearch = !(userInterface === UserInterface.DECIMALNUMBER || userInterface === UserInterface.INTEGERNUMBER);
|
|
61
|
+
}
|
|
43
62
|
calcTopPosition() {
|
|
44
|
-
const referencePosition = this.
|
|
45
|
-
? this.TOP_POSITION_HEADER_HIDDEN
|
|
46
|
-
: this.TOP_POSITION.replace('px', '');
|
|
63
|
+
const referencePosition = this.buildReferenceTopPosition();
|
|
47
64
|
const totalPopoverHeight = parseInt(referencePosition) + this.DEFAULT_HEIGHT;
|
|
48
65
|
const popoverPosition = Math.round(this.ezPopoverElement.getBoundingClientRect().top);
|
|
49
66
|
const popoverBottomPosition = popoverPosition + totalPopoverHeight;
|
|
50
67
|
const windowHeight = window.innerHeight;
|
|
51
68
|
if (windowHeight > popoverBottomPosition) {
|
|
52
|
-
return referencePosition
|
|
69
|
+
return `${referencePosition}px`;
|
|
53
70
|
}
|
|
54
71
|
const differenceBetween = windowHeight - popoverBottomPosition;
|
|
55
72
|
return `${differenceBetween}px`;
|
|
56
73
|
}
|
|
74
|
+
buildReferenceTopPosition() {
|
|
75
|
+
if (this.noHeaderTaskBar) {
|
|
76
|
+
return this.gridHeaderHidden ? this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN : this.TOP_POSITION_NO_TASKBAR;
|
|
77
|
+
}
|
|
78
|
+
return this.gridHeaderHidden ? this.TOP_POSITION_HEADER_HIDDEN : this.TOP_POSITION;
|
|
79
|
+
}
|
|
57
80
|
async clearConfigs() {
|
|
58
81
|
var _a;
|
|
59
82
|
await ((_a = this.ezMultiSelectionList) === null || _a === void 0 ? void 0 : _a.clearFilteredOptions());
|
|
@@ -111,7 +134,7 @@ export class FilterColumn {
|
|
|
111
134
|
}
|
|
112
135
|
}
|
|
113
136
|
render() {
|
|
114
|
-
return (h("ez-popover", { class: 'filter-column__popover', "overlay-type": 'none', ref: (element) => (this.ezPopoverElement = element), autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: 'filter-column' }, h("header", { class: 'filter-column__header' }, h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, "Filtro da coluna ", this.columnLabel), h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), h("ez-multi-selection-list", { columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail) }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: 'Aplicar', class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
|
|
137
|
+
return (h("ez-popover", { class: 'filter-column__popover', "overlay-type": 'none', ref: (element) => (this.ezPopoverElement = element), autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: 'filter-column' }, h("header", { class: 'filter-column__header' }, h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, "Filtro da coluna ", this.columnLabel), h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), h("ez-multi-selection-list", { columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail), isTextSearch: this.isTextSearch }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: 'Aplicar', class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
|
|
115
138
|
}
|
|
116
139
|
static get is() { return "filter-column"; }
|
|
117
140
|
static get originalStyleUrls() {
|
|
@@ -196,6 +219,24 @@ export class FilterColumn {
|
|
|
196
219
|
"reflect": false,
|
|
197
220
|
"defaultValue": "false"
|
|
198
221
|
},
|
|
222
|
+
"noHeaderTaskBar": {
|
|
223
|
+
"type": "boolean",
|
|
224
|
+
"mutable": true,
|
|
225
|
+
"complexType": {
|
|
226
|
+
"original": "boolean",
|
|
227
|
+
"resolved": "boolean",
|
|
228
|
+
"references": {}
|
|
229
|
+
},
|
|
230
|
+
"required": false,
|
|
231
|
+
"optional": false,
|
|
232
|
+
"docs": {
|
|
233
|
+
"tags": [],
|
|
234
|
+
"text": ""
|
|
235
|
+
},
|
|
236
|
+
"attribute": "no-header-task-bar",
|
|
237
|
+
"reflect": false,
|
|
238
|
+
"defaultValue": "false"
|
|
239
|
+
},
|
|
199
240
|
"dataSource": {
|
|
200
241
|
"type": "unknown",
|
|
201
242
|
"mutable": false,
|
|
@@ -262,7 +303,8 @@ export class FilterColumn {
|
|
|
262
303
|
return {
|
|
263
304
|
"selectedItems": {},
|
|
264
305
|
"fieldDescriptor": {},
|
|
265
|
-
"useOptions": {}
|
|
306
|
+
"useOptions": {},
|
|
307
|
+
"isTextSearch": {}
|
|
266
308
|
};
|
|
267
309
|
}
|
|
268
310
|
static get events() {
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { Action, DataType, DateUtils, UserInterface } from '@sankhyalabs/core';
|
|
2
|
+
export default class InMemoryFilterColumnDataSource {
|
|
3
|
+
constructor(dataUnit) {
|
|
4
|
+
var _a;
|
|
5
|
+
this.onDataUnitAction = (action) => {
|
|
6
|
+
if (action.type === Action.DATA_SAVED || action.type === Action.RECORDS_REMOVED) {
|
|
7
|
+
this.originalRecords = this.dataUnit.records;
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
this.dataUnit = dataUnit;
|
|
11
|
+
this.originalRecords = (_a = this.dataUnit.records) !== null && _a !== void 0 ? _a : [];
|
|
12
|
+
this.dataUnit.subscribe(this.onDataUnitAction);
|
|
13
|
+
}
|
|
14
|
+
fetchData(filterTerm, fieldName) {
|
|
15
|
+
return new Promise(resolve => {
|
|
16
|
+
const filteredRecords = this.originalRecords.filter(record => this.includesSearchTerm(record, fieldName, filterTerm));
|
|
17
|
+
const options = filteredRecords.map(item => this.buildFieldOption(item, fieldName));
|
|
18
|
+
resolve(this.removeDuplicatedOptions(options));
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
buildFieldOption(item, fieldName) {
|
|
22
|
+
return {
|
|
23
|
+
value: this.buildValue(item, fieldName),
|
|
24
|
+
label: this.formatLabel(fieldName, item[fieldName]),
|
|
25
|
+
check: true,
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
buildValue(item, fieldName) {
|
|
29
|
+
var _a;
|
|
30
|
+
let value = item[fieldName];
|
|
31
|
+
if (((_a = this.dataUnit.getField(fieldName)) === null || _a === void 0 ? void 0 : _a.dataType) === DataType.OBJECT) {
|
|
32
|
+
value = value.value;
|
|
33
|
+
}
|
|
34
|
+
return value === null || value === void 0 ? void 0 : value.toString();
|
|
35
|
+
}
|
|
36
|
+
removeDuplicatedOptions(options) {
|
|
37
|
+
const noDuplicatedOptions = [];
|
|
38
|
+
options.forEach(option => {
|
|
39
|
+
if (!noDuplicatedOptions.find(({ label }) => label === option.label)) {
|
|
40
|
+
noDuplicatedOptions.push(option);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
return noDuplicatedOptions;
|
|
44
|
+
}
|
|
45
|
+
includesSearchTerm(record, fieldName, filterTerm) {
|
|
46
|
+
let label = this.buildLabel(fieldName, record[fieldName]);
|
|
47
|
+
return label.toLowerCase().includes(filterTerm.toLowerCase());
|
|
48
|
+
}
|
|
49
|
+
buildLabel(fieldName, value) {
|
|
50
|
+
var _a;
|
|
51
|
+
const { dataType } = this.dataUnit.getField(fieldName);
|
|
52
|
+
if (dataType === DataType.NUMBER) {
|
|
53
|
+
return value === null || value === void 0 ? void 0 : value.toString().replace('.', ',');
|
|
54
|
+
}
|
|
55
|
+
if (dataType === DataType.DATE) {
|
|
56
|
+
return (typeof value === 'object')
|
|
57
|
+
? (_a = DateUtils.formatDate(this.dataUnit.valueFromString(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString()
|
|
58
|
+
: value === null || value === void 0 ? void 0 : value.toString();
|
|
59
|
+
}
|
|
60
|
+
if (dataType === DataType.OBJECT) {
|
|
61
|
+
return `${value === null || value === void 0 ? void 0 : value.value} - ${value === null || value === void 0 ? void 0 : value.label}`;
|
|
62
|
+
}
|
|
63
|
+
return value === null || value === void 0 ? void 0 : value.toString();
|
|
64
|
+
}
|
|
65
|
+
formatLabel(fieldName, value) {
|
|
66
|
+
var _a, _b;
|
|
67
|
+
const { userInterface, dataType } = this.dataUnit.getField(fieldName);
|
|
68
|
+
if (dataType === DataType.DATE) {
|
|
69
|
+
return (typeof value === 'object')
|
|
70
|
+
? DateUtils.formatDate(this.dataUnit.valueFromString(fieldName, value))
|
|
71
|
+
: value === null || value === void 0 ? void 0 : value.toString();
|
|
72
|
+
}
|
|
73
|
+
if (dataType === DataType.NUMBER && userInterface !== UserInterface.DECIMALNUMBER) {
|
|
74
|
+
return (_a = parseInt(this.dataUnit.getFormattedValue(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString();
|
|
75
|
+
}
|
|
76
|
+
return (_b = this.dataUnit.getFormattedValue(fieldName, value)) === null || _b === void 0 ? void 0 : _b.toString();
|
|
77
|
+
}
|
|
78
|
+
}
|
|
@@ -14,6 +14,7 @@ export class EzMuiltiSelectionList {
|
|
|
14
14
|
this.dataSource = undefined;
|
|
15
15
|
this.useOptions = false;
|
|
16
16
|
this.options = undefined;
|
|
17
|
+
this.isTextSearch = false;
|
|
17
18
|
this.filteredOptions = undefined;
|
|
18
19
|
this.displayOptions = undefined;
|
|
19
20
|
this.viewScenario = undefined;
|
|
@@ -96,6 +97,7 @@ export class EzMuiltiSelectionList {
|
|
|
96
97
|
this.filteredOptions = this.ordenationByCheckStateAndAlphabetically([...optionsToSort, event.detail]);
|
|
97
98
|
}
|
|
98
99
|
this.viewScenario = ViewScenarios.DATASOURCE_RESULTS;
|
|
100
|
+
this.searchInput.value = "";
|
|
99
101
|
}
|
|
100
102
|
handleRemoveItemFromOptions(item) {
|
|
101
103
|
this.filteredOptions = this.ordenationByCheckStateAndAlphabetically(this.filteredOptions.filter(i => i.value !== item.value));
|
|
@@ -159,7 +161,7 @@ export class EzMuiltiSelectionList {
|
|
|
159
161
|
return scenarios[view];
|
|
160
162
|
}
|
|
161
163
|
render() {
|
|
162
|
-
return (h(Host, null, h("div", { class: "multi-selection" }, this.useOptions ? (h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: `Buscar..`, onEzChange: this.handleSearchOnOption.bind(this) })) : (h("ez-search", { class: "multi-selection__input", label: `Buscar...`, ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this) })), h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
|
|
164
|
+
return (h(Host, null, h("div", { class: "multi-selection" }, this.useOptions ? (h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: `Buscar..`, onEzChange: this.handleSearchOnOption.bind(this) })) : (h("ez-search", { class: "multi-selection__input", label: `Buscar...`, ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this), isTextSearch: this.isTextSearch })), h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
|
|
163
165
|
}
|
|
164
166
|
static get is() { return "ez-multi-selection-list"; }
|
|
165
167
|
static get encapsulation() { return "scoped"; }
|
|
@@ -249,6 +251,24 @@ export class EzMuiltiSelectionList {
|
|
|
249
251
|
"tags": [],
|
|
250
252
|
"text": "Op\u00E7\u00F5es de filtros a serem exibidas na listagem."
|
|
251
253
|
}
|
|
254
|
+
},
|
|
255
|
+
"isTextSearch": {
|
|
256
|
+
"type": "boolean",
|
|
257
|
+
"mutable": false,
|
|
258
|
+
"complexType": {
|
|
259
|
+
"original": "boolean",
|
|
260
|
+
"resolved": "boolean",
|
|
261
|
+
"references": {}
|
|
262
|
+
},
|
|
263
|
+
"required": false,
|
|
264
|
+
"optional": false,
|
|
265
|
+
"docs": {
|
|
266
|
+
"tags": [],
|
|
267
|
+
"text": "Informa se a pesquisa \u00E9 do tipo texto."
|
|
268
|
+
},
|
|
269
|
+
"attribute": "is-text-search",
|
|
270
|
+
"reflect": false,
|
|
271
|
+
"defaultValue": "false"
|
|
252
272
|
}
|
|
253
273
|
};
|
|
254
274
|
}
|
|
@@ -15,6 +15,7 @@ export class EzSearch {
|
|
|
15
15
|
this.canShowError = true;
|
|
16
16
|
this.hideErrorOnFocusOut = true;
|
|
17
17
|
this.listOptionsPosition = undefined;
|
|
18
|
+
this.isTextSearch = false;
|
|
18
19
|
}
|
|
19
20
|
observeErrorMessage() {
|
|
20
21
|
if (this._comboElement) {
|
|
@@ -72,7 +73,7 @@ export class EzSearch {
|
|
|
72
73
|
}
|
|
73
74
|
render() {
|
|
74
75
|
ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
75
|
-
return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, hideErrorOnFocusOut: this.hideErrorOnFocusOut, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode, canShowError: this.canShowError, listOptionsPosition: this.listOptionsPosition }));
|
|
76
|
+
return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, hideErrorOnFocusOut: this.hideErrorOnFocusOut, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode, canShowError: this.canShowError, listOptionsPosition: this.listOptionsPosition, isTextSearch: this.isTextSearch }));
|
|
76
77
|
}
|
|
77
78
|
;
|
|
78
79
|
static get is() { return "ez-search"; }
|
|
@@ -320,6 +321,24 @@ export class EzSearch {
|
|
|
320
321
|
"tags": [],
|
|
321
322
|
"text": "Define um posicionamento fixo para a lista de op\u00E7\u00F5es do CheckBox."
|
|
322
323
|
}
|
|
324
|
+
},
|
|
325
|
+
"isTextSearch": {
|
|
326
|
+
"type": "boolean",
|
|
327
|
+
"mutable": false,
|
|
328
|
+
"complexType": {
|
|
329
|
+
"original": "boolean",
|
|
330
|
+
"resolved": "boolean",
|
|
331
|
+
"references": {}
|
|
332
|
+
},
|
|
333
|
+
"required": false,
|
|
334
|
+
"optional": false,
|
|
335
|
+
"docs": {
|
|
336
|
+
"tags": [],
|
|
337
|
+
"text": "Informa se a pesquisa \u00E9 do tipo texto."
|
|
338
|
+
},
|
|
339
|
+
"attribute": "is-text-search",
|
|
340
|
+
"reflect": false,
|
|
341
|
+
"defaultValue": "false"
|
|
323
342
|
}
|
|
324
343
|
};
|
|
325
344
|
}
|