@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-78242.2 → 0.0.0-bugfix-dev-KB-80932.0

package/dist/collection/components/snk-pesquisa/pesquisa-tree/pesquisa-tree.js

@@ -0,0 +1,179 @@
+import { Fragment, h, Host } from '@stencil/core';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+export class PesquisaTree {
+  constructor() {
+    this.treeLoader = undefined;
+    this.argument = undefined;
+    this.allowsNonAnalytic = false;
+    this.items = [];
+  }
+  async applyFilter() {
+    await this._tree.applyFilter(this.argument);
+  }
+  async loadTree() {
+    if (!this.treeLoader || typeof this.treeLoader !== 'function')
+      return;
+    const response = await this.treeLoader((this.argument || '').trim());
+    this.items = [...response];
+  }
+  expandOrCloseAllItems(items, expanded) {
+    return items.map(item => (Object.assign(Object.assign({}, item), { expanded, children: item.children ? this.expandOrCloseAllItems(item.children, expanded) : undefined })));
+  }
+  handleExpandAll() {
+    this.items = [...this.expandOrCloseAllItems(this.items, true)];
+  }
+  handleCloseAll() {
+    this.items = [...this.expandOrCloseAllItems(this.items, false)];
+  }
+  handleDbClick(item) {
+    var _a;
+    if (!this.allowsNonAnalytic && !((_a = item['props']) === null || _a === void 0 ? void 0 : _a['analitico'])) {
+      const title = 'Erro';
+      const message = `Há pelo menos um registro inválido selecionado. Você deve selecionar itens do tipo 'analítico'.`;
+      ApplicationUtils.error(title, message);
+      return;
+    }
+    const option = {
+      value: item.id,
+      label: item.label,
+    };
+    this.pesquisaTreeSelectItem.emit(option);
+  }
+  async componentWillLoad() {
+    await this.loadTree();
+  }
+  renderEmptyMessate() {
+    return (h("div", { class: "ez-flex ez-flex--justify-center ez-flex--align-items-center ez-margin--large ez-text ez-text--xlarge ez-text--secondary" }, h("span", null, "Nenhum registro encontrado...")));
+  }
+  render() {
+    var _a;
+    return (h(Host, null, !((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) ?
+      this.renderEmptyMessate() :
+      h(Fragment, null, h("div", { class: 'actions-container' }, h("ez-button", { size: 'small', mode: 'icon', class: 'ez-margin-right--small', iconName: 'show-list', title: "Expandir", onClick: () => this.handleExpandAll() }), h("ez-button", { size: 'small', mode: 'icon', iconName: 'hide-list', title: "Recolher", onClick: () => this.handleCloseAll() })), h("ez-tree", { ref: (element) => this._tree = element, onEzDbClickItem: ({ detail }) => this.handleDbClick(detail), items: this.items }))));
+  }
+  static get is() { return "pesquisa-tree"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pesquisa-tree.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pesquisa-tree.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "treeLoader": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(text: string) => Promise<Array<ITreeItem>>",
+          "resolved": "(text: string) => Promise<ITreeItem[]>",
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Array": {
+              "location": "global"
+            },
+            "ITreeItem": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/.diststorybook/types/components/ez-tree/interfaces/ITreeItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o respons\u00E1vel por carregar a \u00E1rvore hier\u00E1rquica do componente"
+        }
+      },
+      "argument": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Argumentos que ser\u00E3o usados ao chamar a fun\u00E7\u00E3o treeLoader."
+        },
+        "attribute": "argument",
+        "reflect": false
+      },
+      "allowsNonAnalytic": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se permite sele\u00E7\u00E3o de items n\u00E3o anal\u00EDticos"
+        },
+        "attribute": "allows-non-analytic",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "items": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "pesquisaTreeSelectItem",
+        "name": "pesquisaTreeSelectItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IOption",
+          "resolved": "IOption",
+          "references": {
+            "IOption": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/.diststorybook/types/components/ez-combo-box/ez-combo-box"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "applyFilter": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/snk-pesquisa/pesquisaHelper.js

@@ -0,0 +1,89 @@
+import { DataType, UserInterface } from '@sankhyalabs/core';
+export function buildGridMetadata(rawValue) {
+  const fieldsMetadata = buildFieldsMetadata(rawValue.fieldsMetadata);
+  const duName = rawValue.descriptionField;
+  const duLabel = rawValue.entityDescription;
+  return {
+    label: duLabel,
+    name: duName,
+    fields: fieldsMetadata,
+  };
+}
+function buildFieldsMetadata(rawMetadata) {
+  if (!rawMetadata || !rawMetadata.length)
+    return [];
+  return rawMetadata.map(field => {
+    return {
+      name: field['fieldName'],
+      label: field['description'],
+      dataType: buildDataType(field['type']),
+      userInterface: buildUserInterface(field),
+      properties: bildProperties(field)
+    };
+  });
+}
+function bildProperties(field) {
+  const properties = {};
+  properties['options'] = buildOptions(field);
+  properties['mask'] = buildMask(field);
+  return properties;
+}
+function buildMask(field) {
+  const fieldUI = field['uiType'];
+  return fieldUI ? String(fieldUI).toLowerCase() : undefined;
+}
+function buildOptions(field) {
+  const optionsJson = field.options;
+  if (!optionsJson)
+    return undefined;
+  const options = [];
+  Object.keys(optionsJson).forEach(key => {
+    options.push({
+      label: key,
+      value: optionsJson[key]
+    });
+  });
+  return options;
+}
+function buildUserInterface(field) {
+  const options = field.options;
+  if (options && Object.keys(options).length > 0)
+    return UserInterface.OPTIONSELECTOR;
+  if (field['type'] === 'D')
+    return UserInterface.DATE;
+  if (field['type'] === 'H')
+    return UserInterface.DATETIME;
+  if (field['type'] === 'T')
+    return UserInterface.TIME;
+  return undefined;
+}
+function buildDataType(rawType) {
+  switch (rawType) {
+    case 'F':
+      return DataType.NUMBER;
+    case 'D':
+    case 'H':
+      return DataType.DATE;
+    case 'B':
+      return DataType.OBJECT;
+    default:
+      return DataType.TEXT;
+  }
+}
+export function parseLegacyTree(legacy) {
+  var _a, _b;
+  const structure = (_b = (_a = legacy.arvore) === null || _a === void 0 ? void 0 : _a.no) !== null && _b !== void 0 ? _b : [];
+  return structure.map(parseLegacyItem);
+}
+function parseLegacyItem(node) {
+  return Object.assign({ id: node.codigo, label: `${node.caminho} - ${node.descricao}`, bold: node.analitico === "N", props: { analitico: node.analitico === 'S' } }, (node.no && { children: node.no.map(parseLegacyItem) }));
+}
+export function parseGridConfig(rawConfig) {
+  var _a, _b;
+  const columns = [];
+  const fields = (_b = (_a = rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.gridConfig) === null || _a === void 0 ? void 0 : _a.field) !== null && _b !== void 0 ? _b : {};
+  Object.keys(fields).forEach(key => columns.push(fields[key]));
+  if (!columns.length)
+    return undefined;
+  return { columns };
+}

package/dist/collection/components/snk-pesquisa/snk-pesquisa.css

@@ -10,6 +10,10 @@
   /* records */
   /*@doc Define a cor da fonte do indicador de registros do componente.*/
   --snk-pesquisa__records--color: var(--text--primary, #626e82);
+  /* records */
+  /*@doc Define a cor da fonte do indicador de registros do componente.*/
+  --snk-pesquisa__records--color-secondary: var(--text--secondary, #626e82);
+  /* records */
   /*@doc Define o espaçamento vertical do indicador de registros do componente.*/
   --snk-pesquisa__records--padding-vertical: var(--space--medium, 12px);
 
@@ -69,9 +73,9 @@
 .snk-pesquisa__content {
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
-  scrollbar-width: thin;
+  overflow-y: hidden;
 
+  scrollbar-width: thin;
   /*public*/
   scrollbar-color: var(--snk-pesquisa__scrollbar--color-clicked) var(--snk-pesquisa__scrollbar--color-background);
   padding-right: var(--snk-pesquisa__content--padding-right);
@@ -109,16 +113,31 @@
     background-color: var(--snk-pesquisa__scrollbar--color-clicked);
 }
 
-.snk-pesquisa__records {
-  /*public*/
+.snk-pesquisa__records-label{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
   font-family: var(--snk-pesquisa--font-family);
   font-weight: var(--snk-pesquisa--font-weight);
   font-size: var(--snk-pesquisa--font-size);
-  color: var(--snk-pesquisa__records--color);
   padding-bottom: var(--snk-pesquisa__records--padding-vertical);
   padding-top: var(--snk-pesquisa__records--padding-vertical);
 }
 
+.snk-pesquisa__records {
+  color: var(--snk-pesquisa__records--color);
+}
+
+.snk-pesquisa__records-limit {
+  color: var(--snk-pesquisa__records--color-secondary);
+}
+
+.snk-pesquisa__records-limit.hidden,
+.snk-pesquisa__records.hidden {
+  visibility: hidden;
+}
+
 .snk-pesquisa__btn {
   outline: none;
   border: none;

package/dist/collection/components/snk-pesquisa/snk-pesquisa.js

@@ -1,5 +1,8 @@
-import { ObjectUtils, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
+import { ElementIDUtils, ObjectUtils, StringUtils } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
+import { buildGridMetadata } from './pesquisaHelper';
+import { PesquisaFetcher } from '../../lib';
+import { EzScrollDirection } from '@sankhyalabs/ezui/dist/collection/components/ez-scroller/EzScrollDirection';
 export class SnkPesquisa {
   constructor() {
     this._mdByName = {};
@@ -11,11 +14,18 @@ export class SnkPesquisa {
     this._changeDeboucingTimeout = null;
     this._limitCharsToSearch = 3;
     this._deboucingTime = 450;
+    this._gridDataSource = [];
+    this.pesquisaFetcher = new PesquisaFetcher();
     this._itemList = undefined;
     this._startLoading = false;
+    this._presentationMode = "list";
     this.searchLoader = undefined;
+    this.treeLoader = undefined;
     this.selectItem = undefined;
+    this.entityName = undefined;
     this.argument = undefined;
+    this.isHierarchyEntity = false;
+    this.allowsNonAnalytic = false;
   }
   observeArgument() {
     if (this._textInput) {
@@ -53,36 +63,42 @@ export class SnkPesquisa {
       this._startLoading = true;
       this.searchLoader(argument)
         .then((resp) => {
+        if (!resp)
+          return;
+        this.processSearchResponse(resp);
+      }).finally(() => {
         this._startLoading = false;
-        if (resp) {
-          resp = ObjectUtils.stringToObject(resp.json.$);
-          let descriptionField = resp.descriptionField;
-          let pkField = resp.pkField;
-          if (pkField) {
-            let newItemList = [];
-            resp.data.forEach((item) => {
-              var _a;
-              let fieldsMetadata = this.filterFieldsMetadata(resp, item);
-              let fields = this.buildFirstFields(item['__matchFields'], fieldsMetadata);
-              let exibitionItem = {
-                key: this.highlightValue(item['__matchFields'], (_a = item[pkField]) === null || _a === void 0 ? void 0 : _a.toString(), fields, true),
-                title: descriptionField ? this.highlightValue(item['__matchFields'], item[descriptionField], fields, true) : "",
-                details: this.buildDetails(fields, item)
-              };
-              newItemList.push(exibitionItem);
-            });
-            this._itemList = newItemList;
-          }
-        }
-      }).catch((error) => {
-        this._startLoading = false;
-        this._itemList = [];
-        console.warn(error);
       });
     }
   }
+  processSearchResponse(resp) {
+    resp = ObjectUtils.stringToObject(resp.json.$);
+    let descriptionField = resp.descriptionField;
+    let pkField = resp.pkField;
+    if (!pkField)
+      return;
+    this._gridMetadata = buildGridMetadata(resp);
+    this._gridDataSource = [...resp.data];
+    this._pkField = pkField;
+    this._descriptionField = descriptionField;
+    this._itemList = this.buildCardItemList(resp, pkField, descriptionField);
+  }
+  buildCardItemList(resp, pkField, descriptionField) {
+    var _a;
+    let newItemList = (_a = resp.data) === null || _a === void 0 ? void 0 : _a.map((item) => {
+      var _a;
+      let fieldsMetadata = this.filterFieldsMetadata(resp, item);
+      let fields = this.buildFirstFields(item['__matchFields'], fieldsMetadata);
+      return {
+        key: this.highlightValue(item['__matchFields'], (_a = item[pkField]) === null || _a === void 0 ? void 0 : _a.toString(), fields, true),
+        title: descriptionField ? this.highlightValue(item['__matchFields'], item[descriptionField], fields, true) : '',
+        details: this.buildDetails(fields, item),
+      };
+    });
+    return newItemList;
+  }
   filterFieldsMetadata(resp, item) {
-    let fieldsMetadata = resp.fieldsMetadata.filter((field) => {
+    return resp.fieldsMetadata.filter((field) => {
       let accept = !StringUtils.isEmpty(item[field.fieldName]) &&
         field.visible !== false &&
         field.type !== 'B' &&
@@ -99,7 +115,6 @@ export class SnkPesquisa {
       }
       return accept;
     });
-    return fieldsMetadata;
   }
   removeAtIndex(array, index) {
     if (index >= 0 && index < array.length) {
@@ -257,6 +272,7 @@ export class SnkPesquisa {
     this.selectItem(option);
   }
   onChangeValue(event) {
+    var _a;
     this.clearDeboucingTimeout();
     if (this._startLoading) {
       this._changeDeboucingTimeout = setTimeout(() => {
@@ -265,6 +281,10 @@ export class SnkPesquisa {
       return;
     }
     this.argument = (event.detail || "").trim();
+    if (this.isHierarchyEntity && this._presentationMode === 'list') {
+      (_a = this._pesquisaTree) === null || _a === void 0 ? void 0 : _a.applyFilter();
+      return;
+    }
     const argumentNumber = this.getArgumentNumber();
     if (this.argument && (!isNaN(argumentNumber) || this.argument.length >= this._limitCharsToSearch)) {
       this._changeDeboucingTimeout = setTimeout(() => {
@@ -295,16 +315,59 @@ export class SnkPesquisa {
           : 'Nenhum registro encontrado'
         : 'Os resultados de sua pesquisa aparecerão aqui...';
   }
-  componentDidLoad() {
+  async componentWillLoad() {
+    const mode = await this.pesquisaFetcher.loadPresentationConfig(this.entityName);
+    this._presentationMode = mode === 'list' ? 'list' : 'table';
+  }
+  async componentDidLoad() {
     ElementIDUtils.addIDInfo(this._element);
   }
+  async onClickList() {
+    this._presentationMode = this._presentationMode === 'list' ? 'table' : 'list';
+    await this.pesquisaFetcher.savePresentationConfig(this.entityName, this._presentationMode);
+  }
+  enableListButton() {
+    var _a;
+    return ((_a = this._itemList) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  //Os limites de exibição são diferentes para lista e grade
+  hideLimitMessage() {
+    if (!this._itemList)
+      return true;
+    if (this._presentationMode === "list") {
+      if (this.isHierarchyEntity)
+        return true;
+      return this._itemList.length <= 100;
+    }
+    return this._itemList.length <= 150;
+  }
+  hideRecordsMessage() {
+    return (this._presentationMode === "list" && this.isHierarchyEntity);
+  }
+  renderContent() {
+    if (!this._itemList)
+      return;
+    if (this._presentationMode === 'list') {
+      return this.isHierarchyEntity ? this.renderTree() : this.renderCards();
+    }
+    return this.renderPesquisaGrid();
+  }
+  renderTree() {
+    return h("ez-scroller", { direction: EzScrollDirection.VERTICAL }, h("pesquisa-tree", { ref: (element) => this._pesquisaTree = element, argument: this.argument, treeLoader: this.treeLoader, allowsNonAnalytic: this.allowsNonAnalytic, onPesquisaTreeSelectItem: ({ detail }) => this.selectItem(detail) }));
+  }
+  renderCards() {
+    return (h("ez-scroller", { direction: EzScrollDirection.VERTICAL }, h("div", { class: "snk-pesquisa__cards-container" }, this._itemList.map((item) => {
+      return (h("ez-card-item", { onEzClick: (event) => this.createOption(event.detail), item: item }));
+    }))));
+  }
+  renderPesquisaGrid() {
+    return h("pesquisa-grid", { metadata: this._gridMetadata, dataSource: this._gridDataSource, pkField: this._pkField, descriptionField: this._descriptionField, entityName: this.entityName, onPesquisaGridSelectItem: ({ detail }) => this.selectItem(detail) });
+  }
   render() {
     var _a;
     return (h(Host, null, h("div", { class: "snk-pesquisa" }, h("div", { class: "snk-pesquisa__input" }, h("ez-text-input", { label: "Buscar", class: "ez-margin-right--medium", canShowError: false, ref: (ref) => this._textInput = ref, onEzChange: (event) => this.onChangeValue(event), value: this.argument, "data-element-id": "searchInput" }, h("ez-icon", { slot: "leftIcon", iconName: "search" }), this.argument && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value)
       ? h("button", { slot: "rightIcon", class: "snk-pesquisa__btn", onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
-      : undefined), h("ez-button", { class: "ez-button--primary", label: "Pesquisar", onClick: () => this.onClickSearch() })), h("label", { class: "snk-pesquisa__records" }, this.getMessageView()), h("div", { class: "snk-pesquisa__content" }, this._itemList && this._itemList.map((item) => {
-      return (h("ez-card-item", { onEzClick: (event) => this.createOption(event.detail), item: item }));
-    })))));
+      : undefined), h("ez-button", { class: "ez-button--primary", label: "Pesquisar", onClick: () => this.onClickSearch() }), h("ez-button", { class: "ez-margin-left--medium", mode: "icon", iconName: this._presentationMode === 'list' ? 'table' : 'list', title: this._presentationMode === 'list' ? 'Modo grade' : 'Modo lista', onClick: async () => await this.onClickList(), enabled: this.enableListButton() })), h("div", { class: "snk-pesquisa__records-label" }, h("label", { class: `snk-pesquisa__records ${this.hideRecordsMessage() ? "hidden" : ""}` }, this.getMessageView()), h("label", { class: `snk-pesquisa__records-limit ${this.hideLimitMessage() ? "hidden" : ""}` }, "Essa pesquisa foi limitada, existem mais resultados.")), h("div", { class: "snk-pesquisa__content" }, this.renderContent()))));
   }
   static get is() { return "snk-pesquisa"; }
   static get encapsulation() { return "scoped"; }
@@ -339,6 +402,25 @@ export class SnkPesquisa {
           "text": "Fun\u00E7\u00E3o respons\u00E1vel em carregar os itens do componente snk-pesquisa."
         }
       },
+      "treeLoader": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(text: string) => Promise<any>",
+          "resolved": "(text: string) => Promise<any>",
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o respons\u00E1vel por carregar a \u00E1rvore hier\u00E1rquica do componente"
+        }
+      },
       "selectItem": {
         "type": "unknown",
         "mutable": false,
@@ -359,6 +441,23 @@ export class SnkPesquisa {
           "text": "Fun\u00E7\u00E3o disparada ao selecionar um item."
         }
       },
+      "entityName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome da entidade onde a pesquisa \u00E9 aplicada."
+        },
+        "attribute": "entity-name",
+        "reflect": false
+      },
       "argument": {
         "type": "string",
         "mutable": true,
@@ -375,13 +474,50 @@ export class SnkPesquisa {
         },
         "attribute": "argument",
         "reflect": false
+      },
+      "isHierarchyEntity": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se a popup de pesquisa possuir\u00E1 ou n\u00E3o modo Hierarquico."
+        },
+        "attribute": "is-hierarchy-entity",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "allowsNonAnalytic": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se permite sele\u00E7\u00E3o de items n\u00E3o anal\u00EDticos"
+        },
+        "attribute": "allows-non-analytic",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
   static get states() {
     return {
       "_itemList": {},
-      "_startLoading": {}
+      "_startLoading": {},
+      "_presentationMode": {}
     };
   }
   static get elementRef() { return "_element"; }