@sankhyalabs/sankhyablocks 5.19.1 → 6.0.0

package/dist/collection/components/snk-personalized-filter/snk-personalized-filter.js

@@ -1,8 +1,12 @@
-import { h, Host } from '@stencil/core';
-import PersonalizedFilterFetcher from "../../lib/http/data-fetcher/fetchers/personalized-filter-fetcher";
-import { FilterOperand, FilterUserConfigTypes } from "../../lib/@types";
-import store from '../../lib/store';
+import { h, Host, Fragment } from '@stencil/core';
 import { ApplicationContext, StringUtils } from '@sankhyalabs/core';
+import { PersonalizedFilterUtils } from './subcomponents/snk-filter-param-config/utils/PersonalizedFilterUtils';
+import { ConfigStorage } from "../../lib/configs/ConfigStorage";
+import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
+import { ObjectUtils } from "@sankhyalabs/core";
+import { FilterGroupCondition } from './subcomponents/snk-filter-param-config/interfaces/IExpressionItem';
+import store from '../../lib/store';
+import PersonalizedFilterFetcher from "../../lib/http/data-fetcher/fetchers/personalized-filter-fetcher";
 export class SnkPersonalizedFilter {
   constructor() {
     this._personalizedFilterFetcher = new PersonalizedFilterFetcher();
@@ -10,46 +14,168 @@ export class SnkPersonalizedFilter {
       fetchData: async (entity) => {
         let entityURI = entity === null || entity === void 0 ? void 0 : entity.uri;
         if (StringUtils.isEmpty(entityURI)) {
-          entityURI = "dd://Financeiro/br.com.sankhya.fin.cad.receber"; //TODO: Receber como prop
+          entityURI = this.entityUri;
         }
         return await this._personalizedFilterFetcher.loadFields(entityURI);
       }
     };
-    this.items = {
-      entityName: "Financeiro",
-      fieldName: "CODBCO",
-      description: "Financeiro >> Banco",
-      type: FilterUserConfigTypes.DECIMAL,
-      expression: "Financeiro.CODBCO",
-      operand: FilterOperand.EQUAL,
-      paramVariable: false,
-      value: "61",
-      systemConfig: null,
-      userConfig: null
-    };
-    this.handleFilterItemChange = (changes) => {
-      console.log("Campo do ExpressionItem alterado");
-      console.log(changes);
-    };
-    this.handleFilterItemRemove = (expression) => {
-      console.log("Event de deleção disparado");
-      console.log(expression);
-    };
+    this._filterAssistentMode = true;
+    this._filterAssistent = undefined;
     this.messagesBuilder = undefined;
+    this.entityUri = undefined;
+    this.filterId = undefined;
+    this.configName = undefined;
+  }
+  /*
+   * Cria um novo filtro se não houver nenhum filtro existente
+   */
+  async createPersonalizedFilter() {
+    const newPersonalizedFilter = {
+      name: "",
+      active: true,
+      expression: "",
+      parameters: [],
+      assistent: {
+        id: StringUtils.generateUUID(),
+        items: [
+          {
+            id: StringUtils.generateUUID(),
+            entityName: "",
+            fieldName: "",
+            description: "",
+            fieldLabel: "Valor",
+            type: undefined,
+            expression: undefined,
+            operand: undefined,
+            paramVariable: false,
+            value: undefined,
+            systemConfig: null,
+            userConfig: null
+          }
+        ],
+        childrenGroups: [],
+        operand: FilterGroupCondition.AND
+      }
+    };
+    this._originalFilterAssistent = ObjectUtils.copy(newPersonalizedFilter);
+    this._filterAssistent = ObjectUtils.copy(newPersonalizedFilter);
+  }
+  loadFilter(newValue, oldValue) {
+    if (newValue == null || oldValue == newValue) {
+      return;
+    }
+    ConfigStorage.get().then((_instance) => {
+      ConfigStorage.loadPersonalizedFilter(newValue, this.configName)
+        .then((resp) => {
+        const personalizedFilter = this.addLabelToItems(resp);
+        this._filterAssistent = personalizedFilter;
+        this._originalFilterAssistent = ObjectUtils.copy(personalizedFilter);
+        this._filterAssistentMode = this._filterAssistent.hasOwnProperty("assistent") && this._filterAssistent.assistent != undefined;
+      });
+    });
   }
   componentWillLoad() {
-    if (store.get("filterFieldsDataSource") == undefined) {
-      store.set("filterFieldsDataSource", this._dataSourceFetcher);
+    var _a;
+    if (store.get(`filterFieldsDataSource.${this.entityUri}`) == undefined) {
+      store.set(`filterFieldsDataSource.${this.entityUri}`, this._dataSourceFetcher);
     }
     if (!this.messagesBuilder) {
-      const snkApp = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-      this.messagesBuilder = snkApp === null || snkApp === void 0 ? void 0 : snkApp.messagesBuilder;
+      this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      this.messagesBuilder = (_a = this._application) === null || _a === void 0 ? void 0 : _a.messagesBuilder;
     }
+    this.loadFilter(this.filterId, undefined);
+  }
+  getMessage(key, params) {
+    return this._application.messagesBuilder.getMessage(key, params);
+  }
+  saveFilter() {
+    ConfigStorage.savePersonalizedFilter(this._filterAssistent, this.configName).then((personalizedFilter) => {
+      this._elButtonSave.enabled = false;
+      ApplicationUtils.info(this.getMessage("snkPersonalizedFilter.confirmSave.title", { name: this._filterAssistent.name }), { iconName: "check" });
+      const updatedFilterAssistent = Object.assign(Object.assign({}, personalizedFilter), this._filterAssistent);
+      updatedFilterAssistent.parameters = PersonalizedFilterUtils.buildVariableParameters(this._filterAssistent.assistent);
+      this._originalFilterAssistent = ObjectUtils.copy(updatedFilterAssistent);
+      this._filterAssistent = ObjectUtils.copy(updatedFilterAssistent);
+    });
+  }
+  removeFilter() {
+    ConfigStorage.removePersonalizedFilter(this._filterAssistent, this.configName);
+  }
+  async handleFilterGroupChange() {
+    const assistent = await this._mainExpressionGroup.getExpressionGroup();
+    this._filterAssistent = Object.assign(Object.assign({}, this._filterAssistent), { assistent });
+    this._filterAssistent.parameters = PersonalizedFilterUtils.buildVariableParameters(this._filterAssistent.assistent);
+    this._elTextAreaExpression.value = PersonalizedFilterUtils.buildGroupExpression(this._filterAssistent.assistent, true);
+    this._elButtonSave.enabled = !this.hasChangesToSave();
+  }
+  hasChangesToSave() {
+    return JSON.stringify(this._filterAssistent) === JSON.stringify(this._originalFilterAssistent);
+  }
+  handleSave() {
+    const { assistent, expression } = this._filterAssistent;
+    const isValid = PersonalizedFilterUtils.validateFields(assistent);
+    if (!isValid || !this._filterAssistent.name)
+      return this._application.error(this.getMessage("snkPersonalizedFilter.error.title"), this.getMessage("snkPersonalizedFilter.error.description"));
+    const expressionQuery = !!assistent ? PersonalizedFilterUtils.buildGroupExpression(assistent) : expression;
+    this._filterAssistent.expression = expressionQuery;
+    this.ezSave.emit(expressionQuery);
+    this.saveFilter();
+  }
+  handleCancel() {
+    if (this.hasChangesToSave()) {
+      return this.ezCancel.emit();
+    }
+    ApplicationUtils.confirm(this.getMessage("snkPersonalizedFilter.confirmCancel.title"), this.getMessage("snkPersonalizedFilter.confirmCancel.description"))
+      .then((canCancel) => {
+      var _a;
+      if (canCancel) {
+        this._filterAssistent = ObjectUtils.copy((_a = this._originalFilterAssistent) !== null && _a !== void 0 ? _a : {});
+        this.ezCancel.emit();
+        this._elButtonSave.enabled = false;
+      }
+    });
+  }
+  handleTitleChange(name) {
+    this._filterAssistent = Object.assign(Object.assign({}, this._filterAssistent), { name });
+    this._elButtonSave.enabled = !this.hasChangesToSave();
+  }
+  addLabelToItems(resp) {
+    //Workaround: Alguns filtros foram salvos sem o fieldLabel. Para evitar transtornos
+    //tentamos usar o fieldLabel que pode estar informado no parametro.
+    if (resp.assistent && resp.assistent.items && resp.assistent.items.length > 0) {
+      resp.assistent.items.forEach(item => {
+        if (item.fieldLabel == undefined) {
+          const param = (resp.parameters || []).find(param => param.fieldName === item.fieldName);
+          if (param) {
+            item.fieldLabel = param.label;
+          }
+        }
+      });
+    }
+    return resp;
+  }
+  handleExpressionChange(expression) {
+    this._filterAssistent = Object.assign(Object.assign({}, this._filterAssistent), { expression });
+    this._elButtonSave.enabled = !this.hasChangesToSave();
+  }
+  getWarningMessageComponent() {
+    var _a;
+    if (StringUtils.isEmpty((_a = this._filterAssistent) === null || _a === void 0 ? void 0 : _a.warningMessage)) {
+      return undefined;
+    }
+    return (h("div", { class: "ez-flex" }, h("ez-alert", { alertType: "warn" }, this._filterAssistent.warningMessage)));
   }
   render() {
-    return (h(Host, null, h("div", null, h("snk-expression-item", { expression: this.items, canRemove: true, onEzFilterItemChange: (evt) => this.handleFilterItemChange(evt.detail), onEzFilterItemRemove: (evt) => this.handleFilterItemRemove(evt.detail), messagesBuilder: this.messagesBuilder }))));
+    var _a, _b, _c, _d, _e;
+    if (!((_a = this._filterAssistent) === null || _a === void 0 ? void 0 : _a.assistent) && this._filterAssistentMode) {
+      return;
+    }
+    return (h(Host, null, h("div", { class: "snk-personalized-filter" }, h("div", null, h("snk-simple-bar", { label: this.filterId ? this.getMessage("snkPersonalizedFilter.info.titleEdit") : this.getMessage("snkPersonalizedFilter.info.titleAdd"), onExit: () => this.handleCancel() }, h("div", { class: "snk-personalized-filter__header-actions", slot: "rightSlot" }, h("ez-button", { size: "small", label: this.getMessage("snkPersonalizedFilter.info.labelCancel"), onClick: () => this.handleCancel() }), h("ez-button", { size: "small", ref: (el) => this._elButtonSave = el, enabled: false, class: "ez-button--primary", label: this.getMessage("snkPersonalizedFilter.info.labelSave"), onClick: this.handleSave.bind(this) })))), h("div", { class: "ez-box ez-margin-bottom--medium ez-box__main" }, h("div", { class: "ez-box__container" }, h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, h("div", { class: "ez-flex" }, h("ez-text-input", { class: "ez-padding-right--medium", label: this.getMessage("snkPersonalizedFilter.info.labelNameFilter"), value: (_b = this._filterAssistent) === null || _b === void 0 ? void 0 : _b.name, onEzChange: (evt) => this.handleTitleChange(evt.detail) })), this._filterAssistentMode ?
+      h(Fragment, null, h("div", { class: "ez-padding-top--small snk-personalized-filter__group" }, h("snk-expression-group", { ref: (el) => this._mainExpressionGroup = el, group: (_c = this._filterAssistent) === null || _c === void 0 ? void 0 : _c.assistent, messagesBuilder: this.messagesBuilder, onEzFilterGroupChange: this.handleFilterGroupChange.bind(this), filterId: this.filterId, entityURI: this.entityUri })), h("div", null, h("div", { class: "snk-personalized-filter__expression-input--line" }), h("ez-collapsible-box", { label: this.getMessage("snkPersonalizedFilter.info.titleCollapsible"), headerSize: "medium", value: true }, h("div", { class: "ez-box" }, h("div", { class: "ez-box__container" }, h("ez-text-area", { ref: (el) => this._elTextAreaExpression = el, enabled: false, label: this.getMessage("snkPersonalizedFilter.info.labelExpression"), value: (_d = this._filterAssistent) === null || _d === void 0 ? void 0 : _d.expression })))))) :
+      h(Fragment, null, h("span", { class: "ez-text ez-text--small ez-text--bold ez-padding-bottom--medium" }, "Express\u00E3o a ser aplicada:"), h("ez-text-area", { label: this.getMessage("snkPersonalizedFilter.info.labelExpression"), value: (_e = this._filterAssistent) === null || _e === void 0 ? void 0 : _e.expression, onEzChange: (evt) => this.handleExpressionChange(evt.detail) }), this.getWarningMessageComponent())))))));
   }
   static get is() { return "snk-personalized-filter"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["snk-personalized-filter.css"]
@@ -81,7 +207,127 @@ export class SnkPersonalizedFilter {
           "tags": [],
           "text": "Respons\u00E1vel por flexibilizar e padronizar o uso de mensagens nos blocos de constru\u00E7\u00E3o."
         }
+      },
+      "entityUri": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Respons\u00E1vel por receber a URI da entidade."
+        },
+        "attribute": "entity-uri",
+        "reflect": false
+      },
+      "filterId": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id do filtro que ser\u00E1 carregado."
+        },
+        "attribute": "filter-id",
+        "reflect": false
+      },
+      "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 states() {
+    return {
+      "_filterAssistentMode": {},
+      "_filterAssistent": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezCancel",
+        "name": "ezCancel",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "ezSave",
+        "name": "ezSave",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "createPersonalizedFilter": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IPersonalizedFilter": {
+              "location": "import",
+              "path": "./subcomponents/snk-filter-param-config/interfaces/IPersonalizedFilter"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "filterId",
+        "methodName": "loadFilter"
+      }];
+  }
 }

package/dist/collection/components/snk-personalized-filter/subcomponents/snk-expression-group/snk-expression-group.css

@@ -0,0 +1,73 @@
+:host {
+  display: block;
+
+  /*@doc Define a largura do container.*/
+  --snk-expression-group--container-condition--width: 184px;
+  /*@doc Define a altura do container.*/
+  --snk-expression-group--container-condition--height: 38px;
+  /*@doc Define o tamanho da borda.*/
+  --snk-expression-group--container-condition--border-radius: var(--border--radius-medium, 12px);
+
+  /*@doc Define a altura do container.*/
+  --snk-expression-group--container-option--width: 85px;
+  /*@doc Define a cor da condition AND*/
+  --snk-expression-group__container-condition--background-and: #66B6A0;
+  /*@doc Define a cor da condition OR*/
+  --snk-expression-group__container-condition--background-or: #EBC65E;
+
+  /*@doc Define o padding da expression*/
+  --snk-expression-group__container-expression--padding-left: 26px;
+
+  /*@doc Define a cor de efeito de tracejado.*/
+  --snk-expression-group__background-color-dashed: var(--background--body, #fafcff);
+}
+
+.snk-expression-group__container-condition {
+  width: var(--snk-expression-group--container-condition--width);
+  height: var(--snk-expression-group--container-condition--height);
+  border-radius: var(--snk-expression-group--container-condition--border-radius);
+  z-index: var(--more-visible--2x, 3);
+}
+
+.snk-expression-group__container-option {
+  width: var(--snk-expression-group--container-option--width);
+}
+
+.snk-expression-group__container-condition[data-condition="AND"] {
+  background-color: var(--snk-expression-group__container-condition--background-and);
+}
+
+.snk-expression-group__container-condition[data-condition="OR"] {
+  background-color: var(--snk-expression-group__container-condition--background-or);
+}
+
+.snk-expression-group__container-expression{
+  padding-left: var(--snk-expression-group__container-expression--padding-left);
+}
+
+.dashes{
+  z-index: var(--visible, 1);
+  background: var(--snk-expression-group__background-color-dashed);
+  border-left: 2px dashed var(--text-secondary, #A2ABB9);
+  position: absolute;
+  width: 15px;
+  height: 58px;
+  margin-left: -15px;
+  margin-top: -36.5px;
+}
+
+.horizontal-dashes {
+  z-index: var(--more-visible, 2);
+  border-bottom: 2px dashed var(--text-secondary, #A2ABB9);
+  position: absolute;
+  width: 15px;
+  height: 54px;
+  margin-left: -15px;
+  margin-top: -33.5px;
+}
+
+.hidden{
+  display: none;
+}
+
+