@sankhyalabs/sankhyablocks 0.0.0-feat-dev-kb-4158.0

package/dist/collection/components/snk-filter-bar/filter-modal/snk-filter-modal.js

@@ -0,0 +1,345 @@
+import { h } from '@stencil/core';
+import { ModalAction } from "@sankhyalabs/ezui/dist/collection/components/ez-modal-container";
+import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
+import FilterType from '../types/filter-type.enum';
+import FilterItemType from '../filter-item/filter-item-type.enum';
+import { ObjectUtils } from '@sankhyalabs/core';
+import { PersonalizedFilterUtils } from '../../snk-personalized-filter/subcomponents/snk-filter-param-config/utils/PersonalizedFilterUtils';
+export class SnkFilterModal {
+  constructor() {
+    this.getMessage = undefined;
+    this.configName = undefined;
+    this.filters = undefined;
+    this.applyFilters = undefined;
+    this.closeModal = undefined;
+    this.addPersonalizedFilter = undefined;
+    this.editPersonalizedFilter = undefined;
+  }
+  getCustomMessage(key, params) {
+    var _a;
+    return (_a = this.getMessage) === null || _a === void 0 ? void 0 : _a.call(this, `snkFilterBar.filterModal.${key}`, params);
+  }
+  //TODO: tratar clear all dos filtros personalizados
+  handleClearAll() {
+    const { customFilters, quickFilters, otherFilters, multiListFilters } = this.filters.reduce((acc, filter) => {
+      if (filter.type === FilterItemType.MULTI_LIST) {
+        acc.multiListFilters.push(filter);
+        return acc;
+      }
+      if (filter.filterType === FilterType.QUICK_FILTER) {
+        acc.quickFilters.push(filter);
+        return acc;
+      }
+      if (filter.filterType === FilterType.CUSTOM_FILTER) {
+        acc.customFilters.push(filter);
+        return acc;
+      }
+      if (filter.filterType === FilterType.OTHER_FILTERS) {
+        acc.otherFilters.push(filter);
+        return acc;
+      }
+      return acc;
+    }, { quickFilters: [], customFilters: [], otherFilters: [], multiListFilters: [] });
+    this.handleClearFilterList(quickFilters);
+    this.handleClearCustomFilters(customFilters);
+    this.handleClearOthersFilters(otherFilters);
+    multiListFilters.forEach(multiListFilter => this.handleClearSigleFilter(multiListFilter));
+  }
+  handleClearOthersFilters(otherFilters) {
+    this.filters = this.filters.map(filter => otherFilters.includes(filter) ? (Object.assign(Object.assign({}, filter), { value: undefined })) : filter);
+  }
+  handleClearCustomFilters(customFilters) {
+    this.filters.forEach((filter, index) => {
+      if (filter.filterType === FilterType.CUSTOM_FILTER)
+        this.filters[index] = this.clearAllCustomFilter(customFilters).shift();
+    });
+  }
+  clearAllCustomFilter(filterConfigSnapshot) {
+    return filterConfigSnapshot.map(filterItem => {
+      const copy = Object.assign({}, filterItem);
+      delete copy.value;
+      copy.visible = false;
+      if (copy.groupedItems) {
+        copy.groupedItems = this.clearAllCustomFilter(copy.groupedItems);
+      }
+      return copy;
+    });
+  }
+  handleClose() {
+    const hasChangesToSave = ObjectUtils.objectToString(this.filters) !== ObjectUtils.objectToString(this._originalFilterConfig);
+    if (!hasChangesToSave) {
+      this.closeModal();
+      return;
+    }
+    return ApplicationUtils.confirm(this.getCustomMessage('validations.notSaved.title'), this.getCustomMessage('validations.notSaved.message')).then((cancelAction) => {
+      if (cancelAction)
+        this.closeModal();
+    });
+  }
+  handleApplyFilters() {
+    const filterPersonalized = this.filters.find(filter => filter.filterType === FilterType.CUSTOM_FILTER);
+    if (this.isValidCustomFilter(filterPersonalized)) {
+      this.applyFilters(this.filters);
+    }
+  }
+  isValidCustomFilter(filterPersonalized) {
+    const isValid = PersonalizedFilterUtils.validateVariableValues(filterPersonalized);
+    if (!isValid) {
+      ApplicationUtils.alert(this.getCustomMessage('validations.notFullFilled.title'), this.getCustomMessage('validations.notFullFilled.message'));
+      return false;
+    }
+    return true;
+  }
+  modalActionListener(evt) {
+    const modalAction = evt.detail;
+    switch (modalAction) {
+      case ModalAction.CANCEL:
+        this.handleClearAll();
+        break;
+      case ModalAction.OK:
+        this.handleApplyFilters();
+        break;
+      case ModalAction.CLOSE:
+        this.handleClose();
+        break;
+      default:
+        break;
+    }
+  }
+  handleFilterChange(filterConfig) {
+    this.filters = this.filters.map(filter => filter.id === filterConfig.id ? filterConfig : filter);
+  }
+  handleClearFilterList(filterList) {
+    this.filters = this.filters.map(filter => filterList.includes(filter) ? (Object.assign(Object.assign({}, filter), { value: undefined })) : filter);
+  }
+  handleClearSigleFilter(filterItem) {
+    if (FilterItemType.MULTI_LIST === filterItem.type) {
+      let filterItemCopy = ObjectUtils.copy(filterItem);
+      this.uncheckFilterValues(filterItemCopy.value);
+      const filterListCopy = ObjectUtils.copy(this.filters);
+      const index = filterListCopy.findIndex(item => item.id === filterItem.id);
+      filterListCopy.splice(index, 1, filterItemCopy);
+      this.filters = ObjectUtils.copy(filterListCopy);
+    }
+    else {
+      this.filters.find(filter => filter.id === filterItem.id).value = undefined;
+    }
+  }
+  uncheckFilterValues(valueList) {
+    valueList.forEach(value => {
+      if (!!value) {
+        value.check = false;
+      }
+    });
+    return valueList;
+  }
+  renderFilterItem(filterItem, fullRow) {
+    return (h("snk-filter-modal-item", { class: fullRow ? 'ez-col ez-col--sd-12' : 'ez-col ez-col--sd-6 ez-padding--small', filterItem: filterItem, configName: this.configName, onFilterChange: (event) => this.handleFilterChange(event.detail), onEditPersonalizedFilter: evt => this.editPersonalizedFilter(evt.detail), onAddPersonalizedFilter: () => this.addPersonalizedFilter() }));
+  }
+  mountFiltersLines(filters) {
+    const MAX_LINE_LENGTH = 2;
+    let currentLine = 0;
+    let forceAddCurrent = false;
+    const filtersLines = {};
+    for (let curr = 0; curr < filters.length; curr++) {
+      filtersLines[currentLine] = filtersLines[currentLine] || [];
+      const item = filters[curr];
+      const isLast = curr === filters.length - 1;
+      const currentItemMatch = [FilterItemType.TEXT, FilterItemType.NUMBER].includes(item.type);
+      const nextItemMatch = isLast ? false : [FilterItemType.TEXT, FilterItemType.NUMBER].includes(filters[curr + 1].type);
+      if ((currentItemMatch && nextItemMatch) || forceAddCurrent) {
+        filtersLines[currentLine].push(item);
+        forceAddCurrent = filtersLines[currentLine].length < MAX_LINE_LENGTH;
+        if (filtersLines[currentLine].length === MAX_LINE_LENGTH)
+          ++currentLine;
+        continue;
+      }
+      filtersLines[currentLine] = filtersLines[currentLine] || [];
+      filtersLines[currentLine].push(item);
+      ++currentLine;
+    }
+    return Object.values(filtersLines);
+  }
+  renderFilterLine(filters) {
+    const fullLine = filters.length === 1;
+    return filters.map((filter) => this.renderFilterItem(filter, fullLine));
+  }
+  getIformedFiltersCount(listItems) {
+    let countInformedItens = 0;
+    listItems.forEach(item => {
+      var _a, _b, _c, _d, _e;
+      if (FilterItemType.MULTI_LIST === item.type) {
+        countInformedItens += (_e = (_d = (_c = ((_b = (_a = item.value) === null || _a === void 0 ? void 0 : _a.elements) !== null && _b !== void 0 ? _b : item.value)) === null || _c === void 0 ? void 0 : _c.filter(value => value === null || value === void 0 ? void 0 : value.check)) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0;
+        return;
+      }
+      if (item.groupedItems != undefined) {
+        countInformedItens = item.groupedItems.filter(item => item.visible).length;
+        return;
+      }
+      if (!!item.value) {
+        countInformedItens++;
+      }
+    });
+    return countInformedItens;
+  }
+  renderCollapsibleFilterBox(label, listItems, isSingleItem, shouldRenderFooter = true) {
+    if (!listItems.length)
+      return null;
+    const appliedFilters = this.getIformedFiltersCount(listItems);
+    const lines = this.mountFiltersLines(listItems);
+    return (h("ez-collapsible-box", { class: "snk-filter-modal__collapsible-box", headerSize: "medium", value: true, label: label }, !!appliedFilters && (h("ez-badge", { class: "ez-badge--primary-subtle", slot: "rightSlot", label: appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.toString() })), h("div", { class: "ez-row snk-filter-modal__rendered-items" }, lines.map(this.renderFilterLine.bind(this))), shouldRenderFooter && (h("div", { class: "ez-flex ez-flex--justify-end grow" }, h("ez-button", { class: "ez-button--tertiary", size: "medium", label: "Limpar", onClick: () => isSingleItem ? this.handleClearSigleFilter(listItems[0]) : this.handleClearFilterList(listItems) })))));
+  }
+  componentWillRender() {
+    this._modalTitle = this.getCustomMessage('title');
+    this._okButtonLabel = this.getCustomMessage('okButtonLabel');
+    this._cancelButtonLabel = this.getCustomMessage('cancelButtonLabel');
+  }
+  componentDidLoad() {
+    if (!this._originalFilterConfig)
+      this._originalFilterConfig = this.filters;
+  }
+  render() {
+    const customFilters = this.filters.filter(filter => filter.filterType === FilterType.CUSTOM_FILTER);
+    const quickFilters = this.filters.filter(filter => filter.filterType === FilterType.QUICK_FILTER);
+    const otherFilters = this.filters.filter(filter => filter.filterType === FilterType.OTHER_FILTERS);
+    return (h("ez-modal-container", { class: "snk-filter-modal__container", modalTitle: this._modalTitle, cancelButtonLabel: this._cancelButtonLabel, okButtonLabel: this._okButtonLabel, onEzModalAction: this.modalActionListener.bind(this) }, h("div", { class: "snk-filter-modal__content ez-col--sd-12" }, this.renderCollapsibleFilterBox(this.getCustomMessage('customFilters'), customFilters, false, false), this.renderCollapsibleFilterBox(this.getCustomMessage('quickFilters'), quickFilters, false), otherFilters.map(filter => this.renderCollapsibleFilterBox(filter.label, [filter], true)))));
+  }
+  static get is() { return "snk-filter-modal"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-filter-modal.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-filter-modal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "getMessage": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(key: string, props?: any) => string",
+          "resolved": "(key: string, props?: any) => string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado pra flexibilizar os verbetes e mensagens de acordo com o SnkMessageBuilder."
+        }
+      },
+      "configName": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome da config para buscar no resourceId"
+        },
+        "attribute": "config-name",
+        "reflect": false
+      },
+      "filters": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<SnkFilterItemConfig>",
+          "resolved": "SnkFilterItemConfig[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../filter-item/snk-filter-item"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Filtros a serem apresentados"
+        }
+      },
+      "applyFilters": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(updatedFilterConfig: Array<SnkFilterItemConfig>) => void",
+          "resolved": "(updatedFilterConfig: SnkFilterItemConfig[]) => void",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../filter-item/snk-filter-item"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A\u00E7\u00E3o executada ao aplicar os filtros"
+        }
+      },
+      "closeModal": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => void",
+          "resolved": "() => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A\u00E7\u00E3o disparada ao fechar o modal"
+        }
+      },
+      "addPersonalizedFilter": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => void",
+          "resolved": "() => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A\u00E7\u00E3o executada ao adicionar um filtro personalizado"
+        }
+      },
+      "editPersonalizedFilter": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(id:string) => void",
+          "resolved": "(id: string) => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A\u00E7\u00E3o executada ao editart um filtro personalizado"
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/snk-filter-bar/filter-modal/subcomponents/snk-filter-modal-item.css

@@ -0,0 +1,8 @@
+
+.grow{
+    flex-grow: 1;
+  }
+
+.gap{
+  gap: 4px;
+}

package/dist/collection/components/snk-filter-bar/filter-modal/subcomponents/snk-filter-modal-item.js

@@ -0,0 +1,214 @@
+import { h, Host } from '@stencil/core';
+import { ApplicationContext, ElementIDUtils, ObjectUtils } from '@sankhyalabs/core';
+import FilterItemType from '../../filter-item/filter-item-type.enum';
+import { EPresentationMode } from '../../filter-item/editors/enum/presentationMode';
+import { ConfigStorage } from '../../../../lib/configs/ConfigStorage';
+import FilterType from '../../types/filter-type.enum';
+export class SnkFilterModalItem {
+  constructor() {
+    this.filterItem = undefined;
+    this.configName = undefined;
+  }
+  observeFilterItem(newValue) {
+    var _a, _b;
+    this._editor && (this._editor["config"] = newValue);
+    (_b = (_a = this._editor) === null || _a === void 0 ? void 0 : _a['reloadList']) === null || _b === void 0 ? void 0 : _b.call(_a);
+    this.filterChange.emit(newValue);
+    //isso faz o filtro salvar o estado precocemente. Caso: Botão limpar filtro dispara dezenas de vezes
+    //this.saveConfig();
+  }
+  getContentEditorConfig() {
+    const props = { presentationMode: EPresentationMode.MODAL };
+    switch (this.filterItem.type) {
+      case FilterItemType.BINARY_SELECT:
+        return { tag: "snk-filter-binary-select", props };
+      case FilterItemType.MULTI_SELECT:
+        return { tag: "snk-filter-multi-select" };
+      case FilterItemType.PERIOD:
+        return { tag: "snk-filter-period", props };
+      case FilterItemType.SEARCH:
+        return { tag: "snk-filter-search" };
+      case FilterItemType.NUMBER:
+        return { tag: "snk-filter-number" };
+      case FilterItemType.PERSONALIZED:
+        return this.buildSnkFilterPersonalizedProps();
+      case FilterItemType.MULTI_LIST:
+        return { tag: "snk-entity-list", props: { maxHeightList: "640px", rightListSlotBuilder: item => this.buildRightSlot(item) } };
+    }
+    return { tag: "snk-filter-text" };
+  }
+  buildSnkFilterPersonalizedProps() {
+    return {
+      tag: "snk-personalized-filter-editor", props: {
+        onDeleteFilter: (event) => this.handleDeleteFilter(event.detail, FilterItemType.PERSONALIZED),
+        onEditFilter: (event) => this.editPersonalizedFilter.emit(event.detail),
+        onAddFilter: () => this.addPersonalizedFilter.emit(),
+      }
+    };
+  }
+  isVisible(newValue) {
+    return !this.filterItem.visible ? newValue !== undefined : true;
+  }
+  updateFilterValue(data) {
+    const newValue = (data === null || data === void 0 ? void 0 : data.value) !== undefined ? data.value : data;
+    if (this.filterItem.groupedItems != undefined) {
+      this.filterItem = Object.assign(Object.assign({}, this.filterItem), { visible: newValue > 0, value: newValue, groupedItems: data.items });
+    }
+    else {
+      this.filterItem = Object.assign(Object.assign({}, this.filterItem), { value: this.filterItem.type === FilterItemType.SEARCH ? data : newValue, visible: this.isVisible(newValue) });
+    }
+    this.saveConfig();
+  }
+  handleDeleteFilter(filter, filterItemType) {
+    if (filterItemType === FilterItemType.PERSONALIZED) {
+      ConfigStorage.removePersonalizedFilter(filter, this.configName);
+    }
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+      const dataElementIdDoFilterItem = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+      this._idContentEditor = `${dataElementIdDoFilterItem}_${this.filterItem.id}`;
+      this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    }
+  }
+  buildRightSlot(item) {
+    return (h("ez-icon", { iconName: "delete", onClick: () => this.removeValueFromConfig(item) }));
+  }
+  removeValueFromConfig(item) {
+    var _a, _b, _c;
+    const index = (_b = (_a = this.filterItem) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.findIndex(({ id }) => id === item.id);
+    const filterItemCopy = ObjectUtils.copy(this.filterItem);
+    (_c = filterItemCopy === null || filterItemCopy === void 0 ? void 0 : filterItemCopy.value) === null || _c === void 0 ? void 0 : _c.splice(index, 1);
+    this.updateFilterValue(filterItemCopy.value);
+  }
+  canShowDetailModal() {
+    const { CUSTOM_FILTER, OTHER_FILTERS } = FilterType;
+    return ![CUSTOM_FILTER, OTHER_FILTERS].includes(this.filterItem.filterType) && this.filterItem.type !== FilterItemType.BINARY_SELECT;
+  }
+  saveConfig() {
+    //Precisa ser rediscutido... não podemos salvar configuração por conta própria. Não temos autonomia pra isso.
+    /*if(FilterItemType.MULTI_LIST !== this.filterItem.type) return;
+
+    this._application?.getResourceID().then(resourceId => {
+      const fetcher = new FilterBarConfigFetcher();
+      fetcher.saveEntityListConfig(this.filterItem, resourceId, this._application.configName);
+    });*/
+  }
+  render() {
+    const { tag: ContentEditor, props } = this.getContentEditorConfig();
+    return (h(Host, null, h("div", { class: "ez-flex ez-flex--column grow" }, this.canShowDetailModal() && (h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, h("div", { class: "ez-title ez-title--small ez-title--primary grow" }, this.filterItem.detailModal))), h(ContentEditor, Object.assign({ ref: ref => this._editor = ref, config: this.filterItem, value: this.filterItem.value, onValueChanged: (event) => this.updateFilterValue(event.detail), "data-element-id": this._idContentEditor }, props)))));
+  }
+  static get is() { return "snk-filter-modal-item"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-filter-modal-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-filter-modal-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "filterItem": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkFilterItemConfig",
+          "resolved": "SnkFilterItemConfig",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../../filter-item/snk-filter-item"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "configName": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome da config para buscar no resourceId"
+        },
+        "attribute": "config-name",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "filterChange",
+        "name": "filterChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SnkFilterItemConfig",
+          "resolved": "SnkFilterItemConfig",
+          "references": {
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "../../filter-item/snk-filter-item"
+            }
+          }
+        }
+      }, {
+        "method": "editPersonalizedFilter",
+        "name": "editPersonalizedFilter",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "addPersonalizedFilter",
+        "name": "addPersonalizedFilter",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "filterItem",
+        "methodName": "observeFilterItem"
+      }];
+  }
+}