@sankhyalabs/sankhyablocks 5.19.1 → 6.0.0

package/dist/components/snk-expression-item2.js

@@ -1,36 +1,30 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { UserInterface, ApplicationContext } from '@sankhyalabs/core';
+import { UserInterface, ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
 import { a as SelectedItemType, d as defineCustomElement$2 } from './snk-filter-field-search2.js';
 import { ApplicationUtils, CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
 import { fieldBuilder } from '@sankhyalabs/ezui/dist/collection/components/ez-form-view/fieldbuilder/FieldBuilder';
-import { a as FilterOperand } from './index2.js';
+import { F as FilterOperand } from './index2.js';
 import { s as store } from './index3.js';
+import { convertType } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
 import { d as defineCustomElement$1 } from './snk-filter-param-config2.js';
 
-const FilterOperandDefault = [
-  { value: FilterOperand.EQUAL, label: "Igual (=)" },
-  { value: FilterOperand.DIFFERENT, label: "Diferente (<>)" },
-  { value: FilterOperand.LIKE, label: "Contendo (LIKE)" },
-  { value: FilterOperand.IN, label: "Contido em (IN)" },
-  { value: FilterOperand.START_WITH, label: "Iniciado com (%?)" },
-  { value: FilterOperand.FINISHED_WITH, label: "Terminado com (?%)" },
-  { value: FilterOperand.NULL, label: "Vazio (NULL)" },
-  { value: FilterOperand.NOT_NULL, label: "Não Vazio (NOT NULL)" },
-  { value: FilterOperand.LARGER, label: "Maior (>)" },
-  { value: FilterOperand.LARGER_EQUAL, label: "Maior ou Igual (>=)" },
-  { value: FilterOperand.SMALLER, label: "Menor (<)" },
-  { value: FilterOperand.SMALLER_EQUAL, label: "Menor ou Igual (<=)" }
-];
-const FilterOperandTypeTextSearch = [
-  { value: FilterOperand.EQUAL, label: "Igual (=)" },
-  { value: FilterOperand.DIFFERENT, label: "Diferente (<>)" },
-  { value: FilterOperand.LIKE, label: "Contendo (LIKE)" },
-  { value: FilterOperand.IN, label: "Contido em (IN)" },
-  { value: FilterOperand.START_WITH, label: "Iniciado com (%?)" },
-  { value: FilterOperand.FINISHED_WITH, label: "Terminado com (?%)" },
-  { value: FilterOperand.NULL, label: "Vazio (NULL)" },
-  { value: FilterOperand.NOT_NULL, label: "Não Vazio (NOT NULL)" }
+const defaultsOperand = [
+  { label: "Igual (=)", value: "EQUAL" },
+  { label: "Diferente (<>)", value: "DIFFERENT" },
+  { label: "Contendo (LIKE)", value: "LIKE" },
+  { label: "Contido em (IN)", value: "IN" },
+  { label: "Iniciado com (%?)", value: "START_WITH" },
+  { label: "Terminado com (?%)", value: "FINISHED_WITH" },
+  { label: "Vazio (NULL)", value: "NULL" },
+  { label: "Não Vazio (NOT NULL)", value: "NOT_NULL" },
 ];
+const FilterOperandDefault = defaultsOperand.concat([
+  { label: "Maior (>)", value: "LARGER" },
+  { label: "Maior ou Igual (>=)", value: "LARGER_EQUAL" },
+  { label: "Menor (<)", value: "SMALLER" },
+  { label: "Menor ou Igual (<=)", value: "SMALLER_EQUAL" }
+]);
+const FilterOperandTypeTextSearch = defaultsOperand;
 const FIELD_TYPE_SEARCH_AND_TEXT = [
   UserInterface.SEARCH,
   UserInterface.SHORTTEXT,
@@ -40,8 +34,9 @@ const FIELD_TYPE_SEARCH_AND_TEXT = [
   UserInterface.HTML
 ];
 
-const snkExpressionItemCss = ".sc-snk-expression-item-h{display:flex;width:100%;--snk-expression-item--background-color:var(--background--xlight, #fff);--snk-expression-item__itens--padding:var(--space--small, 6px);--snk-expression-item__width--input-operator:220px;--snk-expression-item__width--input-value:240px;--snk-expression-item__width--input-value-variable:176px;--snk-expression-item--border-radius:var(--border--radius-medium, 12px);--snk-expression-item--border-color:var(--color--strokes, #DCE0E8);--snk-expression-item--border-style:var(--border--small, 1px solid)}.box.sc-snk-expression-item{width:100%;height:100%;background:var(--snk-expression-item--background-color);margin:var(--space--small, 6px);border:var(--snk-expression-item--border-color) var(--snk-expression-item--border-style);border-radius:var(--snk-expression-item--border-radius)}.box__container.sc-snk-expression-item{display:flex;align-items:center;justify-content:space-between;white-space:nowrap;margin:var(--space--small, 6px)}.box__container--input-filter.sc-snk-expression-item{width:100%}.box__container--input-operator.sc-snk-expression-item{display:flex;width:var(--snk-expression-item__width--input-operator);min-width:var(--snk-expression-item__width--input-operator)}.box__container--input-value.sc-snk-expression-item{display:flex;width:var(--snk-expression-item__width--input-value);min-width:var(--snk-expression-item__width--input-value)}.box__container--input-value-variable.sc-snk-expression-item{display:flex;width:var(--snk-expression-item__width--input-value-variable);min-width:var(--snk-expression-item__width--input-value-variable)}.box__container--button-delete.sc-snk-expression-item{display:flex}.box__container.sc-snk-expression-item>div.sc-snk-expression-item{padding-left:var(--snk-expression-item__itens--padding);padding-right:var(--snk-expression-item__itens--padding)}.box__container--button-delete--icon.sc-snk-expression-item{width:42px;min-width:42px}.box__container--input-value-variable--icon.sc-snk-expression-item{cursor:pointer}";
+const snkExpressionItemCss = ".sc-snk-expression-item-h{display:flex;width:100%;--snk-expression-item--background-color:var(--background--xlight, #fff);--snk-expression-item__itens--padding:var(--space--small, 6px);--snk-expression-item__width--input-operator:220px;--snk-expression-item__width--input-value:240px;--snk-expression-item__width--input-value-variable:176px;--snk-expression-item--border-radius:var(--border--radius-medium, 12px);--snk-expression-item--border-color:var(--color--strokes, #DCE0E8);--snk-expression-item--border-style:var(--border--small, 1px solid);--snk-expression-item__background-color-dashed:var(--background--body, #fafcff)}.box.sc-snk-expression-item{width:100%;height:56px;background:var(--snk-expression-item--background-color);border:var(--snk-expression-item--border-color) var(--snk-expression-item--border-style);border-radius:var(--snk-expression-item--border-radius)}.box__container.sc-snk-expression-item{display:flex;align-items:center;justify-content:space-between;white-space:nowrap;margin:var(--space--small, 6px)}.box__container--input-filter.sc-snk-expression-item{width:100%}.box__container--input-operator.sc-snk-expression-item{display:flex;width:var(--snk-expression-item__width--input-operator);min-width:var(--snk-expression-item__width--input-operator)}.box__container--input-value.sc-snk-expression-item{display:flex;width:var(--snk-expression-item__width--input-value);min-width:var(--snk-expression-item__width--input-value)}.box__container--input-value-variable.sc-snk-expression-item{display:flex;width:var(--snk-expression-item__width--input-value-variable);min-width:var(--snk-expression-item__width--input-value-variable)}.box__container--button-delete.sc-snk-expression-item{display:flex}.box__container.sc-snk-expression-item>div.sc-snk-expression-item{padding-left:var(--snk-expression-item__itens--padding);padding-right:var(--snk-expression-item__itens--padding)}.box__container--button-delete--icon.sc-snk-expression-item{width:42px;min-width:42px}.box__container--input-value-variable--icon.sc-snk-expression-item{cursor:pointer}.dashes.sc-snk-expression-item{z-index:var(--more-visible, 2);background:var(--snk-expression-item__background-color-dashed);border-bottom:2px dashed var(--text-secondary, #A2ABB9);border-left:2px dashed var(--text-secondary, #A2ABB9);position:absolute;width:15px;height:62px;margin-left:-15px;margin-top:-33.5px}";
 
+const DEFAULT_FIELD_NAME = 'NOT_DEFINED';
 const SnkExpressionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -57,30 +52,107 @@ const SnkExpressionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.expression = undefined;
     this.canRemove = true;
     this.messagesBuilder = undefined;
+    this.entityURI = undefined;
   }
   expressionChanged(newValue, oldValue) {
     if (newValue !== oldValue) {
       this.ezFilterItemChange.emit(newValue);
+      this.updateFieldSelected();
     }
   }
   componentWillLoad() {
-    this._dataSourceFetcher = store.get("filterFieldsDataSource");
-    store.onChange('filterFieldsDataSource', () => {
-      this._dataSourceFetcher = store.get("filterFieldsDataSource");
+    this._dataSourceFetcher = store.get(`filterFieldsDataSource.${this.entityURI}`);
+    store.onChange(`filterFieldsDataSource.${this.entityURI}`, () => {
+      this._dataSourceFetcher = store.get(`filterFieldsDataSource.${this.entityURI}`);
     });
+    if (this.expression) {
+      this.updateFieldSelected();
+      this._optionNotNull = this.expression.operand === 'NULL' || this.expression.operand === 'NOT_NULL';
+    }
+  }
+  componentDidRender() {
+    this._showValueVariable = this._elValueVariable.value;
+  }
+  updateFieldSelected() {
+    const field = {
+      dataType: this.expression.type,
+      description: this.expression.description,
+      name: this.expression.fieldName,
+      label: this.expression.fieldLabel,
+      entityName: this.expression.entityName,
+      onlyDate: false,
+      path: this.expression.description,
+      properties: this.expressionPropsToFieldProps(this.expression.props),
+      type: SelectedItemType.FIELD,
+      uri: "",
+      userInterface: this.expression.userInterface
+    };
+    this._fieldSelected = field;
+  }
+  buildExpression(entityName, fieldName, entityPath) {
+    if (entityPath.length > 0) {
+      entityPath.shift();
+    }
+    return entityPath.length > 0 ? `${entityPath.join("->")}->${fieldName}` : `${entityName}.${fieldName}`;
   }
   setValueExpression(key, value) {
-    this.expression[key] = value;
+    if (key === "fieldName") {
+      this.expression.description = value.path;
+      this.expression.expression = this.buildExpression(value.entityName, value.name, value.entityPath);
+      this.expression.fieldName = value.name;
+      this.expression.fieldLabel = value.label;
+      this.expression.type = value.dataType;
+      this.expression.userInterface = value.userInterface;
+      this.expression.entityName = value.entityName;
+      this.expression.value = undefined;
+      this.expression.props = this.fieldPropsToExpressionProps(value.properties);
+    }
+    else {
+      this.expression[key] = value;
+    }
     this.expressionChanged(this.expression);
   }
+  fieldPropsToExpressionProps(properties) {
+    const parsedProps = [];
+    if (!properties) {
+      return parsedProps;
+    }
+    for (const key in properties) {
+      let propValue = properties[key];
+      if (typeof propValue == "object") {
+        propValue = JSON.stringify(propValue);
+      }
+      parsedProps.push({ name: key, value: propValue });
+    }
+    return parsedProps;
+  }
+  expressionPropsToFieldProps(properties) {
+    const parsedProps = {};
+    if (!properties) {
+      return parsedProps;
+    }
+    properties.forEach(prop => {
+      try {
+        parsedProps[prop.name] = JSON.parse(prop.value);
+      }
+      catch (_a) {
+        parsedProps[prop.name] = prop.value;
+      }
+    });
+    return parsedProps;
+  }
   getMessage(key, params) {
     return this.application.messagesBuilder.getMessage(key, params);
   }
   handleSelectItem(filterField) {
+    if (filterField.name === this.expression.fieldName) {
+      this._elFilterInput.value = filterField.path;
+      return;
+    }
     if (filterField.type === SelectedItemType.FIELD) {
       const field = filterField;
       this._fieldSelected = field;
-      this.setValueExpression("fieldName", field.name);
+      this.setValueExpression("fieldName", field);
     }
   }
   handleFocus() {
@@ -96,6 +168,8 @@ const SnkExpressionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       this._elFieldDynamic.value = undefined;
       this._elFieldDynamic.enabled = !showValueVariable;
     }
+    this.expression["paramVariable"] = showValueVariable;
+    this.expressionChanged(this.expression);
   }
   openSnkFilterParamConfig() {
     var _a;
@@ -120,7 +194,8 @@ const SnkExpressionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.setValueExpression("operand", optionSelected);
   }
   checkOptionIsNull(optionSelected) {
-    if (optionSelected === FilterOperand.NULL || optionSelected === FilterOperand.NOT_NULL) {
+    const filterOperandValue = FilterOperand[optionSelected];
+    if ([FilterOperand.NULL, FilterOperand.NOT_NULL].includes(filterOperandValue)) {
       this._optionNotNull = true;
       if (this._elFieldDynamic) {
         this._elFieldDynamic.enabled = false;
@@ -137,7 +212,7 @@ const SnkExpressionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   confirmRemove(evt) {
     evt.preventDefault();
     evt.stopPropagation();
-    ApplicationUtils.confirm(this.getMessage("snkPersonalizedFilter.confirm.title"), this.getMessage("snkPersonalizedFilter.confirm.description"))
+    ApplicationUtils.confirm(this.getMessage("snkPersonalizedFilter.confirmExpression.title"), this.getMessage("snkPersonalizedFilter.confirmExpression.description"))
       .then((canRemove) => {
       if (canRemove) {
         this.ezFilterItemRemove.emit(this.expression);
@@ -145,18 +220,31 @@ const SnkExpressionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     });
   }
   buildFieldByType() {
-    var _a, _b;
+    var _a, _b, _c;
     if (!this._fieldSelected)
       return;
     const inputFieldData = (_a = fieldBuilder(this.configureFieldByType())) === null || _a === void 0 ? void 0 : _a.$children$.shift();
-    if (this._optionNotNull && inputFieldData || ((_b = this._elValueVariable) === null || _b === void 0 ? void 0 : _b.value) && inputFieldData) {
+    if (this._optionNotNull && inputFieldData || ((_b = this._elValueVariable) === null || _b === void 0 ? void 0 : _b.value) && inputFieldData || this.expression.paramVariable || this._showValueVariable || !((_c = this._fieldSelected) === null || _c === void 0 ? void 0 : _c.dataType)) {
       inputFieldData.$attrs$.enabled = false;
     }
+    if (this.expression.value) {
+      inputFieldData.$attrs$.value = this.getExpressiontValue(this.expression);
+    }
+    inputFieldData.$attrs$.onEzChange = (event) => {
+      this.setValueExpression("value", event.target.value);
+    };
+    if (this.expression.userInterface === 'SWITCH' && this.expression.value == undefined) {
+      this.setValueExpression("value", false);
+    }
     return h(inputFieldData.$tag$, Object.assign(Object.assign({}, inputFieldData.$attrs$), { ref: (el) => {
         this._elFieldDynamic = el;
-      } }));
+      }, label: this.expression.fieldLabel || this._fieldSelected.label }));
+  }
+  getExpressiontValue(expression) {
+    return convertType(expression.type, expression.value);
   }
   configureFieldByType() {
+    var _a, _b;
     const field = {
       userInterface: this._fieldSelected.userInterface,
       name: this._fieldSelected.name,
@@ -166,10 +254,7 @@ const SnkExpressionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     switch (field.userInterface) {
       case UserInterface.OPTIONSELECTOR:
         field.props = {
-          options: this._fieldSelected.properties.map(option => ({
-            value: option.value,
-            label: option.name,
-          })),
+          options: (_b = (_a = this._fieldSelected) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.options,
         };
         break;
       case UserInterface.LONGTEXT:
@@ -182,25 +267,26 @@ const SnkExpressionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     return field;
   }
   setCriteriaSearch({ mode, argument }, application) {
+    var _a, _b;
     if (application == undefined)
       return;
     const searchOptions = {
       showInactives: false
     };
     const options = {
-      entity: this._fieldSelected.properties.ENTITYNAME,
-      searchOptions: searchOptions,
-      entityDescription: this._fieldSelected.label
+      entity: (_b = (_a = this._fieldSelected) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.ENTITYNAME,
+      searchOptions,
+      entityDescription: this._fieldSelected.description
     };
     return application.executePreparedSearch(mode, argument, options);
   }
   render() {
     var _a;
-    return (h(Host, null, h("div", { class: "box" }, h("div", { class: "box__container" }, h("div", { class: "box__container--input-filter" }, h("ez-filter-input", { value: (_a = this._fieldSelected) === null || _a === void 0 ? void 0 : _a.path, label: this.getMessage("snkPersonalizedFilter.info.labelSearchField"), canShowError: false, onEzChange: (evt) => this.handleChangeFilterInput(evt), onFocus: () => this.handleFocus() }), h("snk-filter-field-search", { ref: ref => this._elFilterFieldSearch = ref, searchable: false, onEzSelectFilterItem: (ev) => this.handleSelectItem(ev.detail), fieldsDataSource: this._dataSourceFetcher })), h("div", { class: "box__container--input-operator" }, h("ez-combo-box", { label: this.getMessage("snkPersonalizedFilter.info.labelOperator"), canShowError: false, options: this.buildOptionsOperator(), onEzChange: (evt) => this.handleChangeOperator(evt.detail.value), suppressEmptyOption: true })), h("div", { class: "box__container--input-value" }, !this._fieldSelected ?
+    return (h(Host, null, h("div", { class: "dashes" }), h("div", { class: "box" }, h("div", { class: "box__container" }, h("div", { class: "box__container--input-filter" }, h("ez-filter-input", Object.assign({ ref: ref => this._elFilterInput = ref, value: (_a = this._fieldSelected) === null || _a === void 0 ? void 0 : _a.path, label: this.getMessage("snkPersonalizedFilter.info.labelSearchField"), canShowError: false, onEzChange: (evt) => this.handleChangeFilterInput(evt), onFocus: () => this.handleFocus() }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `expressionFilterInput_${this.expression.fieldName || DEFAULT_FIELD_NAME}` })), h("snk-filter-field-search", { ref: ref => this._elFilterFieldSearch = ref, searchable: false, onEzSelectFilterItem: (ev) => this.handleSelectItem(ev.detail), fieldsDataSource: this._dataSourceFetcher })), h("div", { class: "box__container--input-operator" }, h("ez-combo-box", Object.assign({ label: this.getMessage("snkPersonalizedFilter.info.labelOperator"), value: this.expression.operand, canShowError: false, options: this.buildOptionsOperator(), onEzChange: (evt) => { var _a; return this.handleChangeOperator((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value); }, suppressEmptyOption: true }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `comboBoxOperand_${this.expression.fieldName || DEFAULT_FIELD_NAME}` }))), h("div", { class: "box__container--input-value" }, !this._fieldSelected ?
       h("ez-number-input", { label: "Valor", canShowError: false, enabled: (!this._showValueVariable && !this._optionNotNull) }) :
       this.buildFieldByType()), h("div", { class: "box__container--input-value-variable", title: this.getMessage("snkPersonalizedFilter.info.titleTooltip") }, !this._optionNotNull &&
-      h("ez-check", { ref: ref => this._elValueVariable = ref, label: this.getMessage("snkPersonalizedFilter.info.labelValueVarible"), mode: CheckMode.SWITCH, onEzChange: (evt) => this.handleChangeValueVariable(evt.detail) }), (this._showValueVariable && !this._optionNotNull) &&
-      h("ez-icon", { class: "box__container--input-value-variable--icon", size: "large", iconName: "settings-inverted", onClick: () => this.openSnkFilterParamConfig() }), h("snk-filter-param-config", { ref: (el) => this._elFilterParamConfigRef = el, messagesBuilder: this.messagesBuilder })), h("div", { class: "box__container--button-delete" }, h("div", { class: "box__container--button-delete--icon" }, this.canRemove && h("ez-button", { mode: "icon", iconName: "delete", onClick: (evt) => this.confirmRemove(evt) })))))));
+      h("ez-check", { ref: ref => this._elValueVariable = ref, value: this.expression.paramVariable, label: this.getMessage("snkPersonalizedFilter.info.labelValueVarible"), mode: CheckMode.SWITCH, onEzChange: (evt) => this.handleChangeValueVariable(evt.detail) }), (this._showValueVariable && !this._optionNotNull) &&
+      h("ez-icon", Object.assign({ class: "box__container--input-value-variable--icon", size: "large", iconName: "settings-inverted" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: 'iconConfig' }, { onClick: () => this.openSnkFilterParamConfig() })), h("snk-filter-param-config", { ref: (el) => this._elFilterParamConfigRef = el, messagesBuilder: this.messagesBuilder })), h("div", { class: "box__container--button-delete" }, h("div", { class: "box__container--button-delete--icon" }, h("ez-button", { mode: "icon", iconName: "delete", enabled: this.canRemove, label: this.getMessage("snkPersonalizedFilter.info.labelDeleteItem"), onClick: (evt) => this.confirmRemove(evt) })))))));
   }
   static get watchers() { return {
     "expression": ["expressionChanged"]
@@ -210,6 +296,7 @@ const SnkExpressionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "expression": [16],
     "canRemove": [516, "can-remove"],
     "messagesBuilder": [1040],
+    "entityURI": [1025, "entity-u-r-i"],
     "_showValueVariable": [32],
     "_fieldSelected": [32],
     "_optionNotNull": [32]