@sankhyalabs/ezui 1.2.0-beta.4 → 1.2.0-beta.7

package/dist/ezui/ez-grid-config.entry.js

@@ -0,0 +1,433 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-1e9d524f.js';
+import { d as StringUtils } from './index-b96183c8.js';
+import { A as ApplicationUtils } from './ApplicationUtils-30a69eb0.js';
+import { D as DialogType } from './DialogType-72afa679.js';
+
+const ezGridConfigCss = ".sc-ez-grid-config-h{--ez-grid-config__footer--padding-top:var(--space--medium, 12px);--ez-grid-config__main--padding-right:var(--space--medium, 12px);--ez-grid-config__tabselector-container--padding:var(--space--medium, 12px);--ez-grid-config__button-close--padding-left:var(--space--medium, 12px);--ez-grid-config__subtitle--font-family:var(--font-pattern, \"Sora\");--ez-grid-config__title--font-family:var(--font-pattern, \"Sora\");--ez-grid-config__title--font-weight:var(--text-weight--large, 700);--ez-grid-config__subtitle--font-size:var(--text--medium, 14px);--ez-grid-config__scrollbar--width:var(--space--medium, 12px);--ez-grid-config__scrollbar--background-color:var(--text--primary, #626e82);--ez-grid-config__scrollbar--border-radius:var(--border--radius-medium, 12px);--ez-grid-config__group--font-family:var(--font-pattern, \"Sora\");--ez-grid-config__group--font-size:var(--text--medium, 14px);--ez-grid-config__group--font-weight:var(--text-weight--large, 600);--ez-grid-config__group--padding-bottom:var(--space-small, 6px);display:grid;grid-template-rows:auto 1fr auto;max-height:100%;width:100%}@media screen and (min-width: 480px){.sc-ez-grid-config-h{width:359px;max-width:359px}}.padding-right--medium.sc-ez-grid-config{padding-right:var(--space--medium)}ez-list.sc-ez-grid-config{height:100%}.height-calc.sc-ez-grid-config{max-height:calc(100% - 24px)}.grid-config__footer.sc-ez-grid-config{display:flex;justify-content:flex-end;width:100%;padding-top:var(--ez-grid-config__footer--padding-top)}.hidden.sc-ez-grid-config{display:none}.grid-config__main.sc-ez-grid-config{overflow-y:auto;padding-right:var(--ez-grid-config__main--padding-right)}.tabselector-container.sc-ez-grid-config{padding:var(--ez-grid-config__tabselector-container--padding) 0}.button-close.sc-ez-grid-config{padding-left:var(--ez-grid-config__button-close--padding-left)}.title-container.sc-ez-grid-config{display:flex;justify-content:space-between;align-items:center;width:100%}.subtitle.sc-ez-grid-config{font-family:var(--ez-grid-config__subtitle--font-family);font-size:var(--ez-grid-config__subtitle--font-size);color:var(--text--primary)}.title.sc-ez-grid-config{display:flex;margin:0;line-height:normal;letter-spacing:0em;text-align:left;color:var(--title--primary);font-family:var(--ez-grid-config__title--font-family);font-size:var(--title--large);font-weight:var(--ez-grid-config__title--font-weight)}.grid-config__main.sc-ez-grid-config::-webkit-scrollbar-track{background-color:#f0f2f5}.grid-config__main.sc-ez-grid-config::-webkit-scrollbar-thumb{background-color:var(--ez-grid-config__scrollbar--background-color);border-radius:var(--ez-grid-config__scrollbar--border-radius)}.grid-config__main.sc-ez-grid-config::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-grid-config__scrollbar--width);max-width:var(--ez-grid-config__scrollbar--width);min-width:var(--ez-grid-config__scrollbar--width)}.group-name.sc-ez-grid-config{font-family:var(--ez-grid-config__group--font-family);font-size:var(--ez-grid-config__group--font-size);font-weight:var(--ez-grid-config__group--font-weight);padding-bottom:var(--ez-grid-config__group--padding-bottom)}";
+
+let EzGridConfig = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.configFinish = createEvent(this, "configFinish", 7);
+    this.configCancel = createEvent(this, "configCancel", 7);
+    this._orderListItems = [];
+    this._orderPriorityList = [];
+    this._columListItems = [];
+    this._selectedIndex = -1;
+    this._dataChanged = false;
+    this._componenteInternalKey = Date.now();
+    this.selectedTab = "Colunas";
+  }
+  /* Creation Methods */
+  createOrderList() {
+    let newList = [];
+    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 => {
+      var _a;
+      let configItem = (_a = this.config) === null || _a === void 0 ? void 0 : _a.columns.find(item => item.name === column.name);
+      let item = { name: column.name, label: column.label };
+      if (configItem) {
+        item['orderIndex'] = configItem.orderIndex;
+        item['ascending'] = configItem.ascending;
+      }
+      if (!column.hidden) {
+        newList.push(item);
+      }
+    });
+    newList.sort((a, b) => {
+      //OS dois tem order index 0 e pelo menos um deles tem orientação de ordenação.
+      if (a.orderIndex == 0 && b.orderIndex == 0 && (a.ascending != undefined || b.ascending != undefined)) {
+        if (a.ascending != undefined)
+          return -1;
+        if (b.ascending != undefined)
+          return 1;
+        return 0;
+        //Pelo menos um deles tem order index diferente de 0 e os dois tem orientação de ordenação.
+      }
+      else if (a.ascending != undefined && b.ascending != undefined) {
+        return (a.orderIndex - b.orderIndex);
+        //Pelo menos um deles tem order index diferente de 0 e pelo menos um deles tem orientação de ordenação.
+      }
+      else if (a.ascending != undefined || b.ascending != undefined) {
+        if (a.ascending != undefined)
+          return -1;
+        if (b.ascending != undefined)
+          return 1;
+        return 0;
+      }
+      return (a.orderIndex - b.orderIndex);
+    });
+    this._orderListItems = newList;
+  }
+  createColumnList() {
+    let visibleGroup = {
+      group: 'Visíveis',
+      items: [],
+    };
+    let hiddenGroup = {
+      group: 'Ocultas',
+      items: [],
+      sort: 'ASC'
+    };
+    this.columns.forEach(column => {
+      let item = { label: column.label };
+      if (column.hidden) {
+        hiddenGroup.items.push(item);
+      }
+      else {
+        visibleGroup.items.push(item);
+      }
+    });
+    this._columListItems = [visibleGroup, hiddenGroup];
+  }
+  buildColumnListSlot(item, group) {
+    return (h("div", null, h("ez-check", { mode: 'switch', id: 'switch' + item + group, value: group.group === "Visíveis", onEzChange: (ev) => { this.switchColumnGroup(ev, item); } })));
+  }
+  buildOrderListSlot(item) {
+    let selectedOption = "na";
+    if ((item === null || item === void 0 ? void 0 : item.ascending) != undefined) {
+      selectedOption = item.ascending == true ? 'asc' : 'desc';
+    }
+    return (h("div", null, h("ez-select-box", { selectedOption: selectedOption, key: 'ez-select-box-' + this._componenteInternalKey + '-' + item, onEzChange: (ev) => { ev.stopPropagation(); this.updateOrder(ev.detail, item.label); } })));
+  }
+  updateOrder(sortOrder, updatedItemLabel) {
+    var _a;
+    this._dataChanged = true;
+    let newList = [...this.columns];
+    let newItem = newList.find(item => item.label === updatedItemLabel);
+    if (newItem) {
+      newItem.sort = sortOrder.value === "na" ? undefined : sortOrder.value;
+    }
+    let orderArray;
+    if (((_a = this._orderPriorityList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this._orderPriorityList.find(item => item.label === newItem.label).sort = sortOrder;
+      this._orderPriorityList.filter(item => item.sort).map((item, index) => {
+        if (item.label === newItem.label) {
+          newItem.sortIndex = index;
+        }
+      });
+    }
+    else {
+      orderArray = newList.filter(item => item.sort && item.hidden !== true).map((item, index) => {
+        return { label: item.label, orderIndex: index };
+      });
+      orderArray.forEach(element => {
+        newList.find(item => item.label === element.label).sortIndex = element.orderIndex;
+      });
+    }
+    this.columns = newList;
+  }
+  /* Actions Methods */
+  switchColumnGroup(ev, switchedItem) {
+    ev.stopPropagation();
+    let newList = [...this._columListItems];
+    this._dataChanged = true;
+    if (ev.detail === true) {
+      let hiddenGroup = newList.find(group => group.group === "Ocultas");
+      let index = hiddenGroup.items.findIndex(item => item.label === switchedItem.label);
+      if (index >= 0) {
+        hiddenGroup.items.splice(index, 1);
+      }
+      let visibleGroup = newList.find(group => group.group === "Visíveis");
+      visibleGroup.items.push(switchedItem);
+      this._columListItems = newList;
+      this.createOrderList();
+    }
+    else if (ev.detail === false) {
+      let visibleGroup = newList.find(group => group.group === "Visíveis");
+      let index = visibleGroup.items.findIndex(item => item.label === switchedItem.label);
+      if (index >= 0) {
+        visibleGroup.items.splice(index, 1);
+      }
+      let hiddenGroup = newList.find(group => group.group === "Ocultas");
+      hiddenGroup.items.push(switchedItem);
+      this._columListItems = newList;
+      this.createOrderList();
+    }
+  }
+  finish() {
+    let newColumnList = [];
+    this._columListItems.forEach(group => {
+      group.items.forEach(item => {
+        const baseColumn = this.columns.find(column => column.label === item.label);
+        let newColumnItem = Object.assign({}, baseColumn);
+        if (group.group === "Ocultas") {
+          newColumnItem.hidden = true;
+        }
+        else {
+          newColumnItem.hidden = false;
+        }
+        newColumnList.push(newColumnItem);
+      });
+    });
+    this.columns = newColumnList;
+    this._dataChanged = false;
+    this.closeConfig();
+    ApplicationUtils.info("As configurações foram salvas com sucesso!");
+    this.save();
+  }
+  save() {
+    var _a;
+    let _newConfig;
+    if (this.config) {
+      _newConfig = this.config;
+    }
+    else {
+      _newConfig = this.createConfigFromState(this.columns);
+    }
+    let _newColumnConfigList = [];
+    let orderArray;
+    if (((_a = this._orderPriorityList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      orderArray = this.columns.filter(item => item.sort && item.hidden !== true).map((item) => {
+        return { label: item.label, orderIndex: 0 };
+      });
+      let indexCount = 0;
+      let newOrderArray = [];
+      this._orderPriorityList.forEach((orderPriorityItem) => {
+        let item = orderArray.find(column => column.label === orderPriorityItem.label);
+        if (item) {
+          item.orderIndex = indexCount;
+          newOrderArray.push(item);
+          indexCount++;
+        }
+      });
+      if (newOrderArray.length > 0) {
+        orderArray = newOrderArray;
+      }
+    }
+    for (let i = 0; i < this.columns.length; i++) {
+      const column = this.columns[i];
+      let _newColumnConfig = _newConfig.columns.find(_newColumnConfig => column.name === _newColumnConfig.name);
+      if (column.hidden === true && _newColumnConfig) {
+        continue;
+      }
+      if (_newColumnConfig) {
+        _newColumnConfig.width = column.width;
+      }
+      else if (column.hidden === false) {
+        _newColumnConfig = { name: column.name, width: column.width, orderIndex: 0 };
+      }
+      if (_newColumnConfig) {
+        if (column.sort) {
+          _newColumnConfig.ascending = column.sort.toUpperCase() === "ASC" ? true : false;
+          if (orderArray) {
+            adjustPriorityOrder(column, _newColumnConfig);
+          }
+          else {
+            _newColumnConfig.orderIndex = column.sortIndex;
+          }
+        }
+        else {
+          delete _newColumnConfig.ascending;
+          _newColumnConfig.orderIndex = 0;
+        }
+        _newColumnConfigList.push(_newColumnConfig);
+      }
+    }
+    _newConfig.columns = _newColumnConfigList;
+    this.configFinish.emit(_newConfig);
+    this._orderList.clearHistory();
+    function adjustPriorityOrder(column, _newColumnConfig) {
+      if (orderArray) {
+        let orderItem = orderArray.find(item => item.label === column.label);
+        if (orderItem) {
+          _newColumnConfig.orderIndex = orderItem.orderIndex;
+        }
+      }
+    }
+  }
+  createConfigFromState(state) {
+    let newConfig = { columns: [] };
+    state.forEach(columnState => {
+      if (!columnState.hidden) {
+        let newConfigColumn = { name: columnState.name };
+        if (columnState.width) {
+          newConfigColumn['width'] = columnState.width;
+        }
+        if (columnState.sort) {
+          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === 'ASC');
+          newConfigColumn['orderIndex'] = columnState.sortIndex;
+        }
+        else {
+          newConfigColumn['orderIndex'] = 0;
+        }
+        if (newConfigColumn) {
+          newConfig.columns.push(newConfigColumn);
+        }
+      }
+    });
+    return newConfig;
+  }
+  async locateColumn(evt, searchingText) {
+    var _a;
+    const hitEnter = evt.key === "Enter";
+    if (!searchingText) {
+      searchingText = (_a = evt.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    let newSelected = -1;
+    if (this.selectedTab === "Ordenação das linhas") {
+      if (searchingText) {
+        const matchedIndexes = [];
+        let orderListDatasource;
+        await this._orderList.getList().then(listGroup => {
+          orderListDatasource = listGroup;
+          orderListDatasource.forEach((column, index) => {
+            if (this.compareWords(column, searchingText)) {
+              matchedIndexes.push(index);
+            }
+          });
+        });
+        if (matchedIndexes.length > 0) {
+          if (hitEnter) {
+            for (let j = 0; j < matchedIndexes.length; j++) {
+              if (matchedIndexes[j] > this._selectedIndex) {
+                newSelected = matchedIndexes[j];
+                break;
+              }
+            }
+          }
+          if (newSelected === -1) {
+            newSelected = matchedIndexes[0];
+          }
+        }
+        this._selectedIndex = newSelected;
+        let selectedColumn;
+        selectedColumn = orderListDatasource[newSelected];
+        if (selectedColumn) {
+          this._orderList.setSelection({ label: selectedColumn.label }, true);
+        }
+        else {
+          this._orderList.setSelection(undefined);
+        }
+      }
+      else {
+        this._orderList.setSelection(undefined);
+      }
+    }
+    else {
+      if (searchingText) {
+        const matchedIndexes = [];
+        this.columns.forEach((column, index) => {
+          if (this.compareWords(column, searchingText)) {
+            matchedIndexes.push(index);
+          }
+        });
+        if (matchedIndexes.length > 0) {
+          if (hitEnter) {
+            for (let j = 0; j < matchedIndexes.length; j++) {
+              if (matchedIndexes[j] > this._selectedIndex) {
+                newSelected = matchedIndexes[j];
+                break;
+              }
+            }
+          }
+          if (newSelected === -1) {
+            newSelected = matchedIndexes[0];
+          }
+        }
+        this._selectedIndex = newSelected;
+        let selectedColumn = this.columns[newSelected];
+        if (selectedColumn) {
+          this._columnList.setSelection({ label: selectedColumn.label }, true);
+        }
+        else {
+          this._columnList.setSelection(undefined);
+        }
+      }
+      else {
+        this._columnList.setSelection(undefined);
+      }
+    }
+  }
+  compareWords(column, searchingText) {
+    if (StringUtils.replaceAccentuatedChars(column.label).indexOf(StringUtils.replaceAccentuatedChars(searchingText)) > -1) {
+      return true;
+    }
+    return false;
+  }
+  closeConfig() {
+    this._orderList.scrollToTop();
+    this._columnList.scrollToTop();
+    this._searchElement.value = "";
+    if (this._dataChanged) {
+      let options = {
+        canClose: false,
+        labelCancel: "Descartar",
+        labelConfirm: "Salvar",
+        btnConfirmDanger: false
+      };
+      ApplicationUtils.confirm("Aviso", "As alterações realizadas serão descartadas. Gostaria de salvar antes de sair?", null, DialogType.WARN, options)
+        .then(response => {
+        if (!response) {
+          this._dataChanged = false;
+          this.configCancel.emit();
+          this._orderList.clearHistory();
+          this._componenteInternalKey = Date.now();
+        }
+        else {
+          this.finish();
+        }
+      });
+    }
+    else {
+      this.configCancel.emit();
+      this._orderList.clearHistory();
+    }
+  }
+  /* Handlers */
+  handleTabChange(ev) {
+    var _a;
+    if ((_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.selectedTab) {
+      if (this.selectedTab !== ev.target.selectedTab) {
+        if (ev.target.selectedTab === "Colunas") {
+          this._orderList.scrollToTop();
+        }
+        else if (ev.target.selectedTab === "Ordenação das linhas") {
+          this._columnList.scrollToTop();
+        }
+        this._searchElement.value = "";
+      }
+      if (ev.target.selectedTab === "Ordenação das linhas") {
+        this.createOrderList();
+      }
+      this.selectedTab = ev.target.selectedTab;
+    }
+  }
+  handleColumnListChange(ev) {
+    var _a;
+    if (ev.detail) {
+      let visibleItems = (_a = ev.detail.find(group => group.group === "Visíveis")) === null || _a === void 0 ? void 0 : _a.items;
+      if (visibleItems) {
+        this._dataChanged = true;
+        this._orderListItems = visibleItems;
+      }
+    }
+  }
+  handleOrderListChange(ev) {
+    if (ev.detail) {
+      let orderPriorityList = ev.detail;
+      if (orderPriorityList) {
+        this._dataChanged = true;
+        this._orderPriorityList = orderPriorityList;
+      }
+    }
+  }
+  componentWillRender() {
+    var _a;
+    if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.createColumnList();
+    }
+  }
+  componentDidRender() {
+    var _a;
+    if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.locateColumn(new KeyboardEvent("arrow-right", { key: "ArrowRight" }), this._searchElement.value);
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, "Configura\u00E7\u00E3o da Grade"), h("label", { class: "subtitle" }, "Defina visibilidade e ordem das colunas.")), h("div", { class: "button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "tabselector-container" }, h("ez-tabselector", { selectedTab: this.selectedTab, selectedIndex: 0, onEzChange: (ev) => { this.handleTabChange(ev); }, tabs: 'Colunas, Ordena\u00E7\u00E3o das linhas' })), h("div", null, h("ez-text-input", { ref: (el) => this._searchElement = el, label: "Localizar coluna", onKeyUp: evt => this.locateColumn(evt) }, h("ez-icon", { slot: "leftIcon", size: "medium", iconName: "search" })))), h("div", { class: "grid-config__main" }, h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedTab === "Colunas" ? "" : "hidden", dataSource: this._columListItems, onEzChange: ev => this.handleColumnListChange(ev), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }), h("div", { class: this.selectedTab === "Ordenação das linhas" ? "group-name" : "hidden" }, "Sequ\u00EAncia da ordena\u00E7\u00E3o"), h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "height-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: ev => this.handleOrderListChange(ev), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }), h("ez-button", { label: "Concluir", class: "ez-button--primary", onClick: () => this.finish() }))));
+  }
+  static get assetsDirs() { return ["../assets"]; }
+};
+EzGridConfig.style = ezGridConfigCss;
+
+export { EzGridConfig as ez_grid_config };