@sankhyalabs/ezui 1.1.78 → 1.1.79

package/dist/collection/components/ez-form/ez-form.js

@@ -1,253 +1,97 @@
-import { Component, h, Element, forceUpdate, Prop, Method, Watch } from "@stencil/core";
-import { createStore, applyMiddleware, combineReducers } from "redux";
-import thunk from "redux-thunk";
-import { formLoad, invalidField, showHideNavigationButtons } from "./store/Form.actions";
-import undoable from "redux-undo";
-import formReducer, { formNonHistoricReducer } from "./store/Form.reducer";
-import { FormSheet } from "./subcomponents/structure/FormSheet";
-import DataUnit from "./subcomponents/DataUnit";
+import { Component, h, Host, Prop, Element, forceUpdate, Method } from "@stencil/core";
+import { DataUnit, Action } from "@sankhyalabs/core";
+import { FormSheet } from "./structure/FormSheet";
+import { buildFromConfig, buildFromDataUnit } from "./structure/FormSheetMetadata";
+import { createStore } from "redux";
+import { formReducer, selectCurrentSheet, selectFormMetadata, loadMetadata, changeTab } from "./store/form.slice";
+import DataBinder from "./DataBinder";
+import ApplicationUtils from "../../utils/ApplicationUtils";
 export class EzForm {
-  constructor() {
-    this.enabled = true;
-    this.loading = false;
-    this._dataUnits = new Map();
-    this._duSources = new Map();
-    this._tabPositionByField = new Map();
-    this._duToLoad = [];
-  }
-  cleanPreparedMetadata() {
-    this._preparedMetadata = undefined;
-  }
-  async validate() {
-    const duSourcesNames = Array.from(this._duSources.keys());
-    for (let i = 0; i < this._duSources.size; i++) {
-      const duName = duSourcesNames[i];
-      let du = this._dataUnits.get(duName);
-      if (du === undefined) {
-        const source = this._duSources.get(duName);
-        du = this.buildDataUnit(source, source.parentDUName);
-      }
-      if (!du.validateRecords()) {
-        return false;
-      }
-    }
-    return true;
-  }
-  async getChanges() {
-    let allChanges = [];
-    const dataUnits = Array.from(this._dataUnits.values());
-    for (let i = 0; i < this._dataUnits.size; i++) {
-      const du = dataUnits[i];
-      //Só devemos buscar as alterações de DU raiz, pois os sub DUs serão enviados junto.
-      if (!du.parentDU) {
-        const duChanges = du.getChangesToSave();
-        if (duChanges) {
-          allChanges = allChanges.concat(duChanges);
+  submit() {
+    return Promise.resolve();
+  }
+  cancel() {
+    return Promise.resolve();
+  }
+  validate() {
+    return new Promise((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());
+      const records = this.dataUnit.records;
+      for (let i = 0; i < records.length; i++) {
+        if (!this.validateRequired(requiredFields, records[i])) {
+          reject();
+          break;
         }
       }
-    }
-    return allChanges;
-  }
-  async changeFieldValue(dataUnit, fieldName, value) {
-    const du = this._dataUnits.get(dataUnit);
-    if (du) {
-      du.changeValue(fieldName, value);
-    }
+      accept();
+    });
   }
-  validateRecords(dataUnit, records, triggedBy) {
-    const result = { isValid: true, message: "" };
-    if (this.ignoreSaveValidation && triggedBy === "SAVE") {
-      return result;
-    }
-    const validateField = (field) => {
-      if (field.readOnly) {
-        return false;
+  validateRequired(requiredFields, record) {
+    const invalidFields = [];
+    requiredFields.forEach(field => {
+      const value = record[field];
+      const fieldElem = this._element.querySelector(`[data-field-name=${field}]`);
+      if (value === null || value === undefined || value === "") {
+        invalidFields.push(field);
+        fieldElem["errorMessage"] = "Essa informação é obrigatória";
       }
-      if (field.userInterface === "SWITCH" || field.userInterface === "CHECKBOX") {
-        return false;
-      }
-      return true;
-    };
-    const recordValidator = record => {
-      dataUnit.requiredFields.forEach(field => {
-        if (validateField(field)) {
-          const recordIndex = record["record__index"];
-          const fieldName = field.name;
-          const fieldValue = record[fieldName];
-          if (fieldValue === null || fieldValue === undefined || fieldValue === "") {
-            const tabPosition = this._tabPositionByField.get(dataUnit.name + field.name);
-            this._store.dispatch(invalidField(tabPosition.tabName, tabPosition.index, dataUnit.name, recordIndex, record.record__id, field.name, "Essa informação é obrigatória"));
-            result.isValid = false;
-            result.message = "Há pelo menos um campo obrigatório não preenchido.";
-          }
-        }
-      });
-    };
-    if (dataUnit.records.length === 0) {
-      recordValidator({});
-    }
-    else {
-      let validatedRecords = {};
-      records.forEach(r => {
-        recordValidator(r);
-        validatedRecords[r.record__id] = true;
-      });
-      dataUnit.records.forEach(r => {
-        if (!validatedRecords[r.record__id]) {
-          recordValidator(r);
-        }
-      });
-    }
-    return result;
-  }
-  loadMDFromExecutor(callBack) {
-    const loadMetadataFunction = this.parseExecutor(this.metadataExecutor);
-    if (loadMetadataFunction) {
-      const result = loadMetadataFunction();
-      if (result) {
-        if (result instanceof Promise) {
-          result.then(md => {
-            callBack(md);
-          });
-        }
-        else {
-          callBack(result);
-        }
-      }
-    }
-  }
-  loadMDFromElement(callBack) {
-    const metadata = [];
-    Array.from(this._host.children).forEach(elem => {
-      if (elem.tagName === "FORM-METADATA") {
-        const formMetadata = elem;
-        metadata.push(formMetadata.metadata);
+      else {
+        fieldElem["errorMessage"] = "";
       }
     });
-    callBack(metadata.length > 0 ? metadata : null);
-  }
-  updateMetadata(metadata) {
-    if (metadata) {
-      const processFields = (duName, form, tabController, tabIndex) => {
-        var _a;
-        form.items.forEach(item => {
-          if ("fields" in item) {
-            const fSet = item;
-            fSet.fields.forEach(f => {
-              f.form = this;
-              this._tabPositionByField.set(duName + f.name, { tabName: tabController, index: tabIndex });
-            });
-          }
-          else {
-            const f = item;
-            f.form = this;
-            this._tabPositionByField.set(duName + f.name, { tabName: tabController, index: tabIndex });
-          }
-        });
-        (_a = form.subForms) === null || _a === void 0 ? void 0 : _a.forEach((subForm, index) => {
-          const subDu = subForm.dataUnit;
-          if (subDu) {
-            this._duSources.set(subDu.name, subDu);
-            subDu.parentDUName = duName;
-          }
-          processFields(subDu ? subDu.name : duName, subForm, form.name, index);
-        });
-      };
-      this._preparedMetadata = metadata.map((form, index) => {
-        const du = form.dataUnit;
-        if (form.autoLoad) {
-          this._duToLoad.push(du);
-        }
-        this.decorateDU(du);
-        const duName = du.name;
-        this._duSources.set(duName, du);
-        processFields(duName, form, "__MAIN__FORM__", index);
-        return form;
-      });
-      this._store.dispatch(formLoad());
-    }
+    const isValid = invalidFields.length === 0;
+    if (!isValid) {
+      ApplicationUtils.info("Há pelo menos um campo obrigatório não preenchido.");
+    }
+    return isValid;
+  }
+  getDynamicContent() {
+    var _a;
+    const formMD = selectFormMetadata(this._store.getState());
+    if (!formMD)
+      return null;
+    const currentSheet = selectCurrentSheet((_a = this._store) === null || _a === void 0 ? void 0 : _a.getState());
+    if (!currentSheet) {
+      return null;
+    }
+    const allSheets = Array.from(formMD.getAllSheets().values());
+    const result = [];
+    if (allSheets.length > 1) {
+      result.push(h("ez-tabselector", { onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name }, allSheets.map(s => h("ez-tab", { tabKey: s.name, label: s.label }))));
+    }
+    result.push(h(FormSheet, { store: this._store, source: currentSheet }));
+    return result;
   }
-  parseExecutor(executor) {
-    if (executor) {
-      return executor instanceof Function ? executor : eval(executor);
+  processMetadata() {
+    if (!this._staticFields || this._staticFields.length === 0) {
+      const metadata = this.config && this.config.length > 0 ? buildFromConfig(this.config, this.dataUnit) : buildFromDataUnit(this.dataUnit);
+      this._store.dispatch(loadMetadata(metadata));
     }
-    return null;
   }
-  componentWillRender() {
-    if (this._store === undefined) {
-      const rootReducer = combineReducers({
-        "hist": undoable(formReducer),
-        "nonhist": formNonHistoricReducer
-      });
-      this._store = createStore(rootReducer, applyMiddleware(thunk));
-      this._store.subscribe(() => { forceUpdate(this); });
-      if (this.slaveMode) {
-        this._store.dispatch(showHideNavigationButtons("saveVisible", false));
-        this._store.dispatch(showHideNavigationButtons("cancelVisible", false));
-        this._store.dispatch(showHideNavigationButtons("reloadVisible", false));
-      }
+  componentWillLoad() {
+    if (this.dataUnit === undefined) {
+      this.dataUnit = new DataUnit("ez-form");
     }
-    if (this._preparedMetadata === undefined) {
-      if (this.metadata) {
-        this.updateMetadata(this.metadata);
-      }
-      else {
-        this.loadMDFromElement((md) => this.updateMetadata(md));
-        if (!this._preparedMetadata) {
-          this.loadMDFromExecutor((md) => this.updateMetadata(md));
-        }
+    this.dataUnit.subscribe(action => {
+      if (action.type === Action.METADATA_LOADED) {
+        this.processMetadata();
       }
-    }
+    });
+    this._dataBinder = new DataBinder(this.dataUnit);
+    this._store = createStore(formReducer);
+    this._store.subscribe(() => forceUpdate(this));
+    this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
+    this.processMetadata();
   }
   componentDidRender() {
-    this._duToLoad.forEach(du => du.load());
-    this._duToLoad = [];
-  }
-  loadSearch(argument, context) {
-    const fieldSearchExecutor = this.parseExecutor(this.fieldSearchExecutor);
-    if (fieldSearchExecutor) {
-      return fieldSearchExecutor(argument, context);
-    }
-    else {
-      return [{ value: 0, label: "Sem resultados" }];
-    }
-  }
-  buildDataUnit(dataUnit, parentDataUnit) {
-    if (dataUnit) {
-      const { name, unitLabel, records, cardinality, fields } = dataUnit;
-      if (!(dataUnit instanceof DataUnit)) {
-        let parent;
-        if (parentDataUnit instanceof DataUnit) {
-          parent = parentDataUnit;
-        }
-        else {
-          parent = this._dataUnits.get(parentDataUnit);
-        }
-        dataUnit = new DataUnit(name, unitLabel, cardinality, parent);
-        dataUnit.fields = fields;
-        this._dataUnits.set(dataUnit.name, dataUnit);
-        if (records) {
-          dataUnit.records = records;
-        }
-      }
-      this.decorateDU(dataUnit);
-    }
-    return dataUnit;
-  }
-  decorateDU(dataUnit) {
-    dataUnit.store = this._store;
-    dataUnit.loadExecutor = this.parseExecutor(this.loadExecutor);
-    dataUnit.saveExecutor = this.parseExecutor(this.saveExecutor);
-    dataUnit.removeExecutor = this.parseExecutor(this.removeExecutor);
-    dataUnit.recordsValidator = this;
+    this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")));
   }
   render() {
-    if (this.loading) {
-      return h("place-holder", null);
-    }
-    else {
-      return this._preparedMetadata ? h(FormSheet, { enabled: this.enabled, store: this._store, source: this._preparedMetadata, parentName: "__MAIN__FORM__", dataUnitBuilder: (du, parentDataUnit) => this.buildDataUnit(du, parentDataUnit) }) : null;
-    }
+    return (h(Host, null, this._staticFields.length > 0 ? null : this.getDynamicContent()));
   }
   static get is() { return "ez-form"; }
   static get originalStyleUrls() { return {
@@ -256,101 +100,17 @@ export class EzForm {
   static get styleUrls() { return {
     "$": ["ez-form.css"]
   }; }
-  static get assetsDirs() { return ["assets"]; }
   static get properties() { return {
-    "metadataExecutor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | Function",
-        "resolved": "Function | string",
-        "references": {
-          "Function": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "metadata-executor",
-      "reflect": false
-    },
-    "loadExecutor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | Function",
-        "resolved": "Function | string",
-        "references": {
-          "Function": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "load-executor",
-      "reflect": false
-    },
-    "saveExecutor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | Function",
-        "resolved": "Function | string",
-        "references": {
-          "Function": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "save-executor",
-      "reflect": false
-    },
-    "removeExecutor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | Function",
-        "resolved": "Function | string",
-        "references": {
-          "Function": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "remove-executor",
-      "reflect": false
-    },
-    "fieldSearchExecutor": {
-      "type": "string",
-      "mutable": false,
+    "dataUnit": {
+      "type": "unknown",
+      "mutable": true,
       "complexType": {
-        "original": "string | Function",
-        "resolved": "Function | string",
+        "original": "DataUnit",
+        "resolved": "DataUnit",
         "references": {
-          "Function": {
-            "location": "global"
+          "DataUnit": {
+            "location": "import",
+            "path": "@sankhyalabs/core"
           }
         }
       },
@@ -359,40 +119,20 @@ export class EzForm {
       "docs": {
         "tags": [],
         "text": ""
-      },
-      "attribute": "field-search-executor",
-      "reflect": false
-    },
-    "ignoreSaveValidation": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "ignore-save-validation",
-      "reflect": false
+      }
     },
-    "metadata": {
+    "config": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "Array<Form>",
-        "resolved": "Form[]",
+        "original": "Array<FieldConfig>",
+        "resolved": "FieldConfig[]",
         "references": {
           "Array": {
             "location": "global"
           },
-          "Form": {
-            "location": "import",
-            "path": "./subcomponents/FormMetadata"
+          "FieldConfig": {
+            "location": "local"
           }
         }
       },
@@ -402,110 +142,55 @@ export class EzForm {
         "tags": [],
         "text": ""
       }
-    },
-    "slaveMode": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "slave-mode",
-      "reflect": false
-    },
-    "enabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "enabled",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "loading",
-      "reflect": true,
-      "defaultValue": "false"
     }
   }; }
   static get methods() { return {
-    "validate": {
+    "submit": {
       "complexType": {
-        "signature": "() => Promise<boolean>",
+        "signature": "() => Promise<void>",
         "parameters": [],
         "references": {
           "Promise": {
             "location": "global"
           }
         },
-        "return": "Promise<boolean>"
+        "return": "Promise<void>"
       },
       "docs": {
         "text": "",
         "tags": []
       }
     },
-    "getChanges": {
+    "cancel": {
       "complexType": {
-        "signature": "() => Promise<any[]>",
+        "signature": "() => Promise<void>",
         "parameters": [],
         "references": {
           "Promise": {
             "location": "global"
           }
         },
-        "return": "Promise<any[]>"
+        "return": "Promise<void>"
       },
       "docs": {
         "text": "",
         "tags": []
       }
     },
-    "changeFieldValue": {
+    "validate": {
       "complexType": {
-        "signature": "(dataUnit: string, fieldName: string, value: any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
+        "signature": "() => Promise<void>",
+        "parameters": [],
         "references": {
           "Promise": {
             "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          },
+          "Record": {
+            "location": "import",
+            "path": "@sankhyalabs/core"
           }
         },
         "return": "Promise<void>"
@@ -516,9 +201,5 @@ export class EzForm {
       }
     }
   }; }
-  static get elementRef() { return "_host"; }
-  static get watchers() { return [{
-      "propName": "metadata",
-      "methodName": "cleanPreparedMetadata"
-    }]; }
+  static get elementRef() { return "_element"; }
 }

package/dist/collection/components/ez-form/fieldbuilder/FieldBuilder.js

@@ -0,0 +1,45 @@
+import { UserInterface } from "@sankhyalabs/core";
+import { buildTextArea } from "./tpl/TextArea.tpl";
+import { buildTextInput } from "./tpl/TextInput.tpl";
+import { buildCheckBox, buildSwitch } from "./tpl/CheckBox.tpl";
+import { buildComboBox } from "./tpl/ComboBox.tpl";
+import { buildSearch } from "./tpl/SearchInput.tpl";
+import { buildFile } from "./tpl/FileInput.tpl";
+import { buildDate } from "./tpl/DateInput.tpl";
+import { buildInteger, buildDecimal } from "./tpl/NumberInput.tpl";
+const uiBuilders = new Map();
+uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
+uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
+uiBuilders.set(UserInterface.SWITCH, buildSwitch);
+uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
+uiBuilders.set(UserInterface.SEARCH, buildSearch);
+uiBuilders.set(UserInterface.FILE, buildFile);
+uiBuilders.set(UserInterface.DATE, buildDate);
+uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);
+uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
+export const buildField = (field) => {
+  const descriptor = field.descriptor;
+  const config = Object.assign({}, field.config);
+  let builder;
+  let props;
+  if (descriptor) {
+    builder = uiBuilders.get(descriptor.userInterface);
+    if (!config.label) {
+      config.label = descriptor.label;
+    }
+    if (!config.name) {
+      config.name = descriptor.name;
+    }
+    if (config.required === undefined) {
+      config.required = descriptor.required;
+    }
+    props = descriptor.properties;
+  }
+  if (config.required) {
+    config.label = `* ${config.label} (obrigatório)`;
+  }
+  if (!builder) {
+    builder = buildTextInput;
+  }
+  return builder(config, props);
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/CheckBox.tpl.js

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+export const buildSwitch = (fieldConfig) => {
+  return buildField(fieldConfig.name, fieldConfig.label, true);
+};
+export const buildCheckBox = (fieldConfig) => {
+  return buildField(fieldConfig.name, fieldConfig.label, false);
+};
+function buildField(fieldName, fieldLabel, switchMode = false) {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small align--middle padding-bottom--large" },
+    h("ez-check", { label: fieldLabel, mode: switchMode ? "switch" : "regular", "data-field-name": fieldName, key: fieldName })));
+}