@sankhyalabs/ezui 1.1.161 → 1.2.0-beta.1

package/dist/esm/ez-form.entry.js

@@ -1,15 +1,16 @@
 import { h, r as registerInstance, c as createEvent, f as forceUpdate, H as Host, g as getElement } from './index-b21f0a10.js';
 import { UserInterface, Action, WaitingChangeException, ApplicationContext, DataUnitAction, DataUnit } from '@sankhyalabs/core';
-import { A as ApplicationUtils } from './ApplicationUtils-35350d20.js';
+import { A as ApplicationUtils } from './ApplicationUtils-5f87ae60.js';
+import './DialogType-72afa679.js';
 
 const buildTextArea = ({ name, label, readOnly }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
     h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
 };
 
-const buildTextInput = ({ name, label }) => {
+const buildTextInput = ({ name, label, readOnly }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-text-input", { label: label, "data-field-name": name, key: name })));
+    h("ez-text-input", { label: label, "data-field-name": name, key: name, enabled: !readOnly })));
 };
 
 const buildSwitch = (fieldConfig) => {
@@ -615,6 +616,7 @@ var FormActions;
 
 class DataBinder {
   constructor(dataUnit) {
+    this._invalidFields = new Map();
     this.onDataUnitEvent = (action) => {
       var _a;
       switch (action.type) {
@@ -623,15 +625,16 @@ class DataBinder {
         case Action.RECORDS_REMOVED:
         case Action.RECORDS_ADDED:
         case Action.RECORDS_COPIED:
-        case Action.DATA_CHANGED:
         case Action.EDITION_CANCELED:
-        case Action.CHANGE_UNDONE:
-        case Action.CHANGE_REDONE:
         case Action.SELECTION_CHANGED:
         case Action.NEXT_SELECTED:
         case Action.PREVIOUS_SELECTED:
+          this.clearInvalid();
+        case Action.DATA_CHANGED:
+        case Action.CHANGE_UNDONE:
+        case Action.CHANGE_REDONE:
           (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
-            this.updateValue(field.fieldName, field.field, action.type === Action.EDITION_CANCELED);
+            this.updateValue(field.fieldName, field.field);
           });
           break;
       }
@@ -649,24 +652,45 @@ class DataBinder {
   onDisconnectedCallback() {
     this._dataUnit.unsubscribe(this.onDataUnitEvent);
   }
-  updateValue(fieldName, field, actionCanceled = false) {
-    var _a;
-    field["value"] = this._dataUnit.getFieldValue(fieldName);
-    /**
-     * FIXME: Campo já salvo com undefined, ao inserir valor inválido e cancelar,
-     * o campo não é limpo e atualizado automaticamente, pois o value não mudou,
-     * assim, não dispara o Watch do value, que é o responsável por limpar o errorMessage.
-     */
-    if (actionCanceled && ((_a = field["errorMessage"]) === null || _a === void 0 ? void 0 : _a.trim())) {
-      field["errorMessage"] = "";
+  markInvalid(field) {
+    this._invalidFields.set(field.name, field);
+    if (this._fields.has(field.name)) {
+      this.updateErrorMessage(field.name, this._fields.get(field.name).field);
+    }
+  }
+  clearInvalid() {
+    this._invalidFields.clear();
+    this._fields.forEach(fieldBinder => {
+      const fieldName = fieldBinder.field.dataset.fieldName;
+      this.updateErrorMessage(fieldName, fieldBinder.field);
+    });
+  }
+  updateValue(fieldName, field) {
+    const bind = this._fields.get(fieldName);
+    try {
+      if (bind) {
+        bind.listen = false;
+      }
+      field["value"] = this._dataUnit.getFieldValue(fieldName);
+      this.updateErrorMessage(fieldName, field);
+    }
+    finally {
+      if (bind) {
+        bind.listen = true;
+      }
     }
   }
+  updateErrorMessage(fieldName, field) {
+    const invalidField = this._invalidFields.get(fieldName);
+    field["errorMessage"] = invalidField ? invalidField.message : "";
+  }
   updateBind(fieldName, field) {
     const oldBind = this._fields.get(fieldName);
     if (oldBind) {
       oldBind.destroy();
     }
-    this.updateValue(fieldName, field);
+    field["value"] = this._dataUnit.getFieldValue(fieldName);
+    this.updateErrorMessage(fieldName, field);
     this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName) => this.cancelWaitingChange(fieldName), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
     this.bindSearchOptionsLoader(fieldName, field);
     this.applyEzUploadContext(fieldName, field);
@@ -707,6 +731,7 @@ class DataBinder {
     if (this._dataUnit.records.length === 0) {
       this._dataUnit.addRecord();
     }
+    this._invalidFields.delete(fieldName);
     this._dataUnit.setFieldValue(fieldName, newValue);
     if (this._dataUnit.waitingForChange(fieldName)) {
       const bind = this._fields.get(fieldName);
@@ -741,6 +766,7 @@ class DataBinder {
 }
 class Bind {
   constructor() {
+    this.listen = true;
     this.startChangeEventName = "ezStartChange";
     this.cancelWaitingChangeEventName = "ezCancelWaitingChange";
     this.changeEventName = "ezChange";
@@ -768,11 +794,14 @@ class Bind {
     const b = new Bind();
     b.field = field;
     b.fieldName = fieldName;
-    b.startChangeListener = (evt) => { startChangeCallback(fieldName, evt.detail); };
+    b.startChangeListener = (evt) => { if (b.listen)
+      startChangeCallback(fieldName, evt.detail); };
     b.field.addEventListener(b.startChangeEventName, b.startChangeListener);
-    b.cancelWaitingChangeListener = () => { cancelWaitingChangeCallback(fieldName); };
+    b.cancelWaitingChangeListener = () => { if (b.listen)
+      cancelWaitingChangeCallback(fieldName); };
     b.field.addEventListener(b.cancelWaitingChangeEventName, b.cancelWaitingChangeListener);
-    b.changeListener = (evt) => { changeCallback(fieldName, evt.detail); };
+    b.changeListener = (evt) => { if (b.listen)
+      changeCallback(fieldName, evt.detail); };
     b.field.addEventListener(b.changeEventName, b.changeListener);
     return b;
   }
@@ -797,87 +826,66 @@ let EzForm = class {
     return Promise.resolve();
   }
   validate() {
-    return new Promise(async (accept, reject) => {
-      const metadata = selectFormMetadata(this._store.getState());
-      const requiredFields = this._staticFields
-        .filter(f => f.dataset.required)
-        .map(f => f.dataset.fieldName)
-        .concat(metadata.getRequiredFields());
-      let isReject = false;
+    return new Promise((accept, reject) => {
+      var _a;
       const records = this.dataUnit.getModifiedRecords();
       for (let i = 0; i < records.length; i++) {
-        if (!this.validateRequired(requiredFields, records[i])) {
-          isReject = true;
-          break;
+        const record = records[i];
+        const invalidResults = [];
+        let validationResult = this.validateRequired(record);
+        if (validationResult && !validationResult.isValid) {
+          invalidResults.push(validationResult);
         }
-      }
-      if (!isReject) {
-        const validateError = await this.validateError();
-        if (!validateError) {
-          isReject = true;
+        validationResult = (_a = this.recordsValidator) === null || _a === void 0 ? void 0 : _a.validateRecord(this, record);
+        if (validationResult && !validationResult.isValid) {
+          invalidResults.push(validationResult);
+        }
+        if (invalidResults.length > 0) {
+          this.processValidationResult(invalidResults);
+          reject();
+          break;
         }
       }
-      if (isReject) {
-        reject();
-      }
-      else {
-        accept();
-      }
+      accept();
     });
   }
   observeConfig() {
     this.processMetadata();
   }
-  async validateError() {
-    var _a;
-    const invalidFields = [];
-    const dataFields = (_a = this._element) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-field-name]");
-    if (dataFields && dataFields.length > 0) {
-      for (let i = 0; i < dataFields.length; i++) {
-        const fieldElem = dataFields[i];
-        if (fieldElem && fieldElem['isInvalid']) {
-          const hasError = await fieldElem['isInvalid']();
-          if (hasError && fieldElem['dataset']) {
-            invalidFields.push(fieldElem['dataset'].fieldName);
-          }
-        }
-      }
-    }
-    const isValid = invalidFields.length === 0;
-    if (!isValid) {
-      ApplicationUtils.info("Há pelo menos um campo com conteúdo inválido.");
-    }
-    return isValid;
-  }
-  validateRequired(requiredFields, record) {
+  validateRequired(record) {
+    const metadata = selectFormMetadata(this._store.getState());
+    const requiredFields = this._staticFields
+      .filter(f => f.dataset.required)
+      .map(f => f.dataset.fieldName)
+      .concat(metadata.getRequiredFields());
     const invalidFields = [];
     requiredFields.forEach(field => {
       const value = record[field];
-      const fieldElem = this._element.querySelector(`[data-field-name=${field}]`);
-      /**
-       * TODO: fieldElem vai ser vazio quando o campo está em uma aba que
-       * está escondida.
-       * Temos que tratar esse caso para apresentar a mensagem de erro
-       * na aba, isso será tratado no card: https://sankhya.atlassian.net/browse/SKA-44182
-       */
-      if (fieldElem) {
-        /**
-         * Devido o StencilJS não possuir Getter e Setter, para casos que o Watch não for chamado,
-         * é necessário limpar a propriedade antes de setar o valor novamente, para que o Watch seja disparado novamente,
-         * solução necessária para controlar componentes com herança (Exemplo: EzSearch -> EzComboBox -> EzTextInput).
-         */
-        fieldElem["errorMessage"] = "";
-        if (value === null || value === undefined || value === "") {
-          invalidFields.push(field);
-          fieldElem["errorMessage"] = "Essa informação é obrigatória";
-        }
+      if (value == undefined || value === "") {
+        invalidFields.push({ name: field, message: "Essa informação é obrigatória" });
       }
     });
-    const isValid = invalidFields.length === 0;
-    if (!isValid) {
-      ApplicationUtils.info("Há pelo menos um campo obrigatório não preenchido.");
+    if (invalidFields.length > 0) {
+      return { isValid: false, invalidFields, infoMessage: "Há pelo menos um campo obrigatório não preenchido." };
     }
-    return isValid;
+    return undefined;
+  }
+  processValidationResult(validationResult) {
+    validationResult.forEach(invalidResult => {
+      const invalidFields = invalidResult.invalidFields;
+      if (invalidFields) {
+        invalidFields.forEach(field => {
+          this._dataBinder.markInvalid(field);
+        });
+      }
+      if (invalidResult.infoMessage) {
+        ApplicationUtils.info(invalidResult.infoMessage);
+      }
+      if (invalidResult.errorMessage) {
+        const { errorTitle, errorMessage } = invalidResult;
+        ApplicationUtils.error(errorTitle, errorMessage);
+      }
+    });
   }
   getDynamicContent() {
     var _a;
@@ -919,6 +927,13 @@ let EzForm = class {
         }));
       }
     }
+    if (action.type === Action.SAVING_DATA) {
+      return new Promise((resolve) => {
+        this.validate()
+          .then(() => resolve(action))
+          .catch(() => { });
+      });
+    }
     if (action.type === Action.RECORDS_ADDED) {
       const metadata = selectFormMetadata(this._store.getState());
       const defaultValues = metadata.getDefaultValues();

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

@@ -1,6 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b21f0a10.js';
 import { StringUtils } from '@sankhyalabs/core';
-import { A as ApplicationUtils } from './ApplicationUtils-35350d20.js';
+import { A as ApplicationUtils } from './ApplicationUtils-5f87ae60.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)}";
 
@@ -354,7 +355,7 @@ let EzGridConfig = class {
         labelConfirm: "Salvar",
         btnConfirmDanger: false
       };
-      ApplicationUtils.confirm("Aviso", "As alterações realizadas serão descartadas. Gostaria de salvar antes de sair?", null, false, options)
+      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;