@sankhyalabs/sankhyablocks 8.16.0-dev.7 → 8.16.0-dev.70

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

@@ -0,0 +1,190 @@
+import { h, Host } from '@stencil/core';
+import InMemoryLoader from '../../../lib/dataUnit/InMemoryLoader';
+import { PesquisaFetcher } from '../../../lib';
+export class PesquisaGrid {
+  constructor() {
+    this._pesquisaFetcher = new PesquisaFetcher();
+    this.metadata = undefined;
+    this.dataSource = [];
+    this.pkField = undefined;
+    this.descriptionField = undefined;
+    this.entityName = undefined;
+    this._inMemoryLoader = undefined;
+    this._dataunit = undefined;
+    this._gridConfig = undefined;
+  }
+  observeDataSource(newValue) {
+    if (!this._inMemoryLoader || !this._dataunit || !newValue)
+      return;
+    this._inMemoryLoader.records = [...newValue];
+  }
+  async componentWillLoad() {
+    this.initializeDataUnit();
+    this._gridConfig = await this._pesquisaFetcher.loadPesquisaGridConfig(this.entityName);
+  }
+  initializeDataUnit() {
+    var _a;
+    this._inMemoryLoader = new InMemoryLoader(this.metadata, (_a = this.dataSource) !== null && _a !== void 0 ? _a : []);
+    this._dataunit = this._inMemoryLoader.dataUnit;
+    this._dataunit.pageSize = 0;
+  }
+  handleDbClick(record) {
+    const option = {
+      value: record[this.pkField],
+      label: record[this.descriptionField],
+    };
+    this.pesquisaGridSelectItem.emit(option);
+  }
+  async handleConfigChanged({ detail }) {
+    var _a;
+    const columns = (_a = detail === null || detail === void 0 ? void 0 : detail.columns) !== null && _a !== void 0 ? _a : [];
+    await this._pesquisaFetcher.savePesquisaGridConfig(this.entityName, columns);
+  }
+  render() {
+    return (h(Host, null, h("ez-grid", { dataUnit: this._dataunit, config: this._gridConfig, canEdit: false, suppressCheckboxColumn: true, compact: true, autoFocus: false, onEzDoubleClick: ({ detail }) => this.handleDbClick(detail), onConfigChange: async (event) => this.handleConfigChanged(event) })));
+  }
+  static get is() { return "pesquisa-grid"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pesquisa-grid.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pesquisa-grid.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "metadata": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "UnitMetadata",
+          "resolved": "UnitMetadata",
+          "references": {
+            "UnitMetadata": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Campos que representam as colunas da grade."
+        }
+      },
+      "dataSource": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Record[]",
+          "resolved": "Record[]",
+          "references": {
+            "Record": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Registros da grade"
+        },
+        "defaultValue": "[]"
+      },
+      "pkField": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Campo que representa a chave prim\u00E1ria do registro"
+        },
+        "attribute": "pk-field",
+        "reflect": false
+      },
+      "descriptionField": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Campo que representa a descri\u00E7\u00E3o do registro"
+        },
+        "attribute": "description-field",
+        "reflect": false
+      },
+      "entityName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome da entidade representada na grade"
+        },
+        "attribute": "entity-name",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_inMemoryLoader": {},
+      "_dataunit": {},
+      "_gridConfig": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "pesquisaGridSelectItem",
+        "name": "pesquisaGridSelectItem",
+        "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 watchers() {
+    return [{
+        "propName": "dataSource",
+        "methodName": "observeDataSource"
+      }];
+  }
+}

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

@@ -0,0 +1,25 @@
+:host {
+  /*@doc Define o posicionamento superior do container de botões de ação.*/
+  --snk-pesquisa--tree__action-container--top: var(--space--sm);
+  /*@doc Define o posicionamento direito do container de botões de ação.*/
+  --snk-pesquisa--tree__action-container--right: var(--space--small);
+  /*@doc Define a altura mínima do componente.*/
+  --snk-pesquisa--tree__min-height: var(--space--extra-large);
+
+  background: var(--background--xlight, #FFF);
+  position: relative;
+  display: inline-block;
+  min-height: var(--snk-pesquisa--tree__min-height);
+}
+
+:host:hover .actions-container{
+  display: flex;
+}
+
+.actions-container {
+  flex-direction: row;
+  position: absolute;
+  top: var(--snk-pesquisa--tree__action-container--top);
+  right: var(--snk-pesquisa--tree__action-container--right);
+  display: none;
+}

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;