@sankhyalabs/ezui 1.1.120 → 1.1.123

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

@@ -1,16 +1,22 @@
 import { Component, h, Prop, Method, Event, forceUpdate } from "@stencil/core";
 class Message {
-  constructor(title, message, critical, confirm, icon, callBack) {
+  constructor(title, message, critical, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger, callBack) {
     this.title = title;
     this.message = message;
     this.critical = critical;
     this.confirm = confirm;
     this.icon = icon;
+    this.labelCancel = labelCancel;
+    this.labelConfirm = labelConfirm;
+    this.btnConfirmDanger = btnConfirmDanger;
     this.callBack = callBack;
   }
 }
 export class EzDialog {
   constructor() {
+    this.labelConfirm = 'Sim';
+    this.labelCancel = 'Não';
+    this.btnConfirmDanger = false;
     /**
      * Define se o componente será utilizado no modo de confirmação.
      */
@@ -42,10 +48,10 @@ export class EzDialog {
   /**
    * Faz com que o componente seja exibido.
    */
-  async show(title, message, critical, confirm, icon) {
+  async show(title, message, critical, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger) {
     this.opened = true;
     return new Promise(resolve => {
-      this._messageQueue.push(new Message(title, message, critical, confirm, icon, resolve));
+      this._messageQueue.push(new Message(title, message, critical, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger, resolve));
     });
   }
   componentWillRender() {
@@ -55,7 +61,7 @@ export class EzDialog {
       }
       else {
         if (this.opened) {
-          this._currentMessage = new Message(this.ezTitle, this.message, this.critical, this.confirm, this.personalizedIconPath, null);
+          this._currentMessage = new Message(this.ezTitle, this.message, this.critical, this.confirm, this.personalizedIconPath, this.labelCancel, this.labelConfirm, this.btnConfirmDanger, null);
         }
       }
     }
@@ -75,15 +81,13 @@ export class EzDialog {
                 h("div", { class: "title title--label", innerHTML: this._currentMessage.title })),
               h("button", { class: "btn-close", onClick: () => this.handleButtonClick(false) })),
             h("div", { class: "message", innerHTML: this._currentMessage.message }),
-            this._currentMessage.confirm ?
+            this._currentMessage.confirm &&
               h("div", { class: "button-yes-no__container" },
-                h("ez-button", { class: "button__no", mode: "link", label: "N\u00E3o", onClick: () => this.handleButtonClick(false) }),
-                h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick(true) }))
-              : undefined,
-            !this._currentMessage.confirm ?
-              h("div", { class: "button__ok--container" },
-                h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick(true) }))
-              : undefined))));
+                h("ez-button", { class: "button__cancel", label: this._currentMessage.labelCancel, onClick: () => this.handleButtonClick(false) }),
+                h("ez-button", { class: !this._currentMessage.btnConfirmDanger ? "button__confirm" : "button__confirm--danger", label: this._currentMessage.labelConfirm, onClick: () => this.handleButtonClick(true) })),
+            !this._currentMessage.confirm &&
+              h("div", { class: "button__confirm--container" },
+                h("ez-button", { label: 'Ok', class: "button__confirm", onClick: () => this.handleButtonClick(true) }))))));
     }
     return null;
   }
@@ -255,7 +259,7 @@ export class EzDialog {
     },
     "show": {
       "complexType": {
-        "signature": "(title: string, message: string, critical: boolean, confirm: boolean, icon: string) => Promise<boolean>",
+        "signature": "(title: string, message: string, critical: boolean, confirm: boolean, icon: string, labelCancel: string, labelConfirm: string, btnConfirmDanger: boolean) => Promise<boolean>",
         "parameters": [{
             "tags": [],
             "text": ""
@@ -271,6 +275,15 @@ export class EzDialog {
           }, {
             "tags": [],
             "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
           }],
         "references": {
           "Promise": {

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

@@ -1,32 +1,62 @@
-import { ApplicationContext } from "@sankhyalabs/core";
+import { ApplicationContext, Action } from "@sankhyalabs/core";
 export default class DataBinder {
   constructor(dataUnit) {
+    this.onDataUnitEvent = (action) => {
+      var _a;
+      switch (action.type) {
+        case Action.DATA_LOADED:
+        case Action.DATA_SAVED:
+        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:
+          (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
+            this.updateValue(field.fieldName, field.field);
+          });
+          break;
+      }
+    };
     this._fields = new Map();
     this._dataUnit = dataUnit;
-    this._dataUnit.subscribe(_action => {
-      var _a;
-      (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
-        this.updateValue(field.fieldName, field.field);
-      });
-    });
+    this._dataUnit.subscribe(this.onDataUnitEvent);
   }
   bind(fields) {
     fields.forEach(fieldElement => {
       const fieldName = fieldElement.dataset.fieldName;
       this.updateBind(fieldName, fieldElement);
-      this.updateValue(fieldName, fieldElement);
     });
   }
+  onDisconnectedCallback() {
+    this._dataUnit.unsubscribe(this.onDataUnitEvent);
+  }
   updateValue(fieldName, field) {
-    field["value"] = this._dataUnit.getFieldValue(fieldName);
+    const oldValue = field["value"];
+    const newValue = this._dataUnit.getFieldValue(fieldName);
+    if (oldValue != newValue) {
+      field["value"] = newValue;
+    }
   }
   updateBind(fieldName, field) {
     const oldBind = this._fields.get(fieldName);
     if (oldBind) {
       oldBind.destroy();
     }
-    this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
+    field["value"] = this._dataUnit.getFieldValue(fieldName);
+    this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
     this.bindSearchOptionsLoader(fieldName, field);
+    this.applyEzUploadContext(fieldName, field);
+  }
+  changeStarted(fieldName, waitingChange) {
+    if (this._dataUnit.records.length === 0) {
+      this._dataUnit.addRecord();
+    }
+    this._dataUnit.startChange(fieldName, waitingChange);
   }
   setFieldValue(fieldName, newValue) {
     if (this._dataUnit.records.length === 0) {
@@ -44,19 +74,37 @@ export default class DataBinder {
       }
     }
   }
+  applyEzUploadContext(fieldName, field) {
+    var _a, _b;
+    if (field.nodeName === "EZ-UPLOAD") {
+      field["urlUpload"] = ApplicationContext.getContextValue("__EZUI__UPLOAD__ADD__URL__");
+      field["urlDelete"] = ApplicationContext.getContextValue("__EZUI__UPLOAD__DEL__URL__");
+      const descriptor = this._dataUnit.getField(fieldName);
+      const destination = (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.DESTINATION;
+      if (destination) {
+        field["requestHeaders"] = { XTRAINF: `{"destination": "${destination}"}` };
+      }
+      field["maxFiles"] = ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.MAX_FILES) || 0;
+    }
+  }
 }
 class Bind {
+  constructor() {
+    this.startChangeEventName = "ezStartChange";
+    this.changeEventName = "ezChange";
+  }
   destroy() {
-    this.field.removeEventListener(this.eventName, this.eventListener);
+    this.field.removeEventListener(this.startChangeEventName, this.startChangeListener);
+    this.field.removeEventListener(this.changeEventName, this.changeListener);
   }
-  static create(fieldName, field, callback) {
+  static create(fieldName, field, startChangeCallback, changeCallback) {
     const b = new Bind();
-    b.fieldName = fieldName;
     b.field = field;
-    //FIXME: Verificar se o field é um EzField
-    b.eventListener = (evt) => { callback(fieldName, evt.detail); };
-    b.eventName = "ezChange";
-    b.field.addEventListener(b.eventName, b.eventListener);
+    b.fieldName = fieldName;
+    b.startChangeListener = (evt) => { startChangeCallback(fieldName, evt.detail); };
+    b.field.addEventListener(b.startChangeEventName, b.startChangeListener);
+    b.changeListener = (evt) => { changeCallback(fieldName, evt.detail); };
+    b.field.addEventListener(b.changeEventName, b.changeListener);
     return b;
   }
 }

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

@@ -1,4 +1,4 @@
-import { Component, h, Host, Prop, Element, forceUpdate, Method, Watch } from "@stencil/core";
+import { Component, h, Host, Prop, Element, forceUpdate, Method, Watch, Event } from "@stencil/core";
 import { DataUnit, Action, DataUnitAction } from "@sankhyalabs/core";
 import { FormSheet } from "./structure/FormSheet";
 import { buildFromConfig, buildFromDataUnit } from "./structure/FormSheetMetadata";
@@ -7,6 +7,13 @@ import { formReducer, selectCurrentSheet, selectFormMetadata, loadMetadata, chan
 import DataBinder from "./DataBinder";
 import ApplicationUtils from "../../utils/ApplicationUtils";
 export class EzForm {
+  constructor() {
+    this.onDataUnitAction = (action) => {
+      if (action.type === Action.METADATA_LOADED) {
+        this.processMetadata();
+      }
+    };
+  }
   submit() {
     return Promise.resolve();
   }
@@ -99,11 +106,7 @@ export class EzForm {
       this.dataUnit = new DataUnit("ez-form");
     }
     this.dataUnit.addInterceptor(this);
-    this.dataUnit.subscribe(action => {
-      if (action.type === Action.METADATA_LOADED) {
-        this.processMetadata();
-      }
-    });
+    this.dataUnit.subscribe(this.onDataUnitAction);
     this._dataBinder = new DataBinder(this.dataUnit);
     this._store = createStore(formReducer);
     this._store.subscribe(() => forceUpdate(this));
@@ -112,6 +115,12 @@ export class EzForm {
   }
   componentDidRender() {
     this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")));
+    this.ezReady.emit();
+  }
+  disconnectedCallback() {
+    this.dataUnit.unsubscribe(this.onDataUnitAction);
+    this.dataUnit.removeInterceptor(this);
+    this._dataBinder.onDisconnectedCallback();
   }
   render() {
     return (h(Host, null, this.isStatic() ? null : this.getDynamicContent()));
@@ -167,6 +176,22 @@ export class EzForm {
       }
     }
   }; }
+  static get events() { return [{
+      "method": "ezReady",
+      "name": "ezReady",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado quando o formul\u00E1rio est\u00E1 dispon\u00EDvel na DOM."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
   static get methods() { return {
     "submit": {
       "complexType": {

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const buildFile = ({ name, label, readOnly }) => {
   return (h("div", { class: "col col--sd-12 padding-horizontal--small" },
-    h("ez-upload", { enabled: !readOnly, label: label, urlUpload: "", requestHeaders: "", maxFiles: 10, "data-field-name": name, key: name })));
+    h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };

package/dist/collection/components/ez-grid/controller/DataUnitBridge.js

@@ -1,36 +1,36 @@
 import { Action } from "@sankhyalabs/core";
 export default class DataUnitBridge {
   constructor(gridController, dataUnit) {
+    this.processAction = (action) => {
+      switch (action.type) {
+        case Action.METADATA_LOADED:
+          this._gridController.setColumnsDef(this.buildColumnDefs(), true);
+          break;
+        case Action.RECORDS_REMOVED:
+          const { records } = action.payload;
+          this._gridController.removeRows(records);
+          break;
+        case Action.RECORDS_ADDED:
+        case Action.RECORDS_COPIED:
+          this._gridController.addRows(action.payload);
+          break;
+        case Action.EDITION_CANCELED:
+        case Action.DATA_SAVED:
+          this._gridController.refresh();
+          break;
+        case Action.SELECTION_CHANGED:
+          const { selection } = action.payload;
+          this._gridController.selectRows(selection);
+          break;
+        case Action.DATA_CHANGED:
+          const changes = Object.assign({}, action.payload);
+          delete changes.records;
+          this._gridController.changeValues(changes, action.payload.records);
+      }
+    };
     this._gridController = gridController;
     this._dataUnit = dataUnit;
-    this._dataUnit.subscribe(action => this.processAction(action));
-  }
-  processAction(action) {
-    switch (action.type) {
-      case Action.METADATA_LOADED:
-        this._gridController.setColumnsDef(this.buildColumnDefs(), true);
-        break;
-      case Action.RECORDS_REMOVED:
-        const { records } = action.payload;
-        this._gridController.removeRows(records);
-        break;
-      case Action.RECORDS_ADDED:
-      case Action.RECORDS_COPIED:
-        this._gridController.addRows(action.payload);
-        break;
-      case Action.EDITION_CANCELED:
-      case Action.DATA_SAVED:
-        this._gridController.refresh();
-        break;
-      case Action.SELECTION_CHANGED:
-        const { selection } = action.payload;
-        this._gridController.selectRows(selection);
-        break;
-      case Action.DATA_CHANGED:
-        const changes = Object.assign({}, action.payload);
-        delete changes.records;
-        this._gridController.changeValues(changes, action.payload.records);
-    }
+    this._dataUnit.subscribe(this.processAction);
   }
   buildColumnDefs() {
     const columnDefs = [];
@@ -44,4 +44,7 @@ export default class DataUnitBridge {
     }
     return columnDefs;
   }
+  onDisconnectedCallback() {
+    this._dataUnit.unsubscribe(this.processAction);
+  }
 }

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

@@ -95,6 +95,11 @@ export class EzGrid {
       this._gridController.setColumnsDef(this._dataUnitBridge.buildColumnDefs(), true);
     }
   }
+  disconnectedCallback() {
+    if (this._dataUnitBridge) {
+      this._dataUnitBridge.onDisconnectedCallback();
+    }
+  }
   getPaginationControl() {
     if (this.pageSize === -1) {
       return null;

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

@@ -10,6 +10,9 @@ export class EzUpload {
     this.enabled = true;
   }
   changeValue(newValue) {
+    //Observamos o mundo externo, se um novo valor foi atribuído,
+    //precisamos cancelar a alteração anterior, isso envolve, percorrer
+    //a lista de ponteiros e cancelar todos os uploads em andamento.
     if (newValue !== this._updatingValue) {
       this._filePointers.forEach(f => {
         if (this.isRemoteFile(f)) {
@@ -18,8 +21,8 @@ export class EzUpload {
       });
       this._filePointers = new Map();
       this.updateFilePointers();
+      this._updatingValue = undefined;
     }
-    this._updatingValue = undefined;
   }
   updateFilePointers() {
     if (this.value) {
@@ -89,6 +92,7 @@ export class EzUpload {
   }
   async doAddFile(file) {
     if (this.validateFile(file)) {
+      this.ezStartChange.emit({ waitmessage: "Há arquivos sendo enviados. Por favor aguarde a conclusão ou cancele o envio." });
       const uploadingFile = new RemoteFile(file);
       this._filePointers.set(file.name, uploadingFile);
       uploadingFile.upload(this.urlUpload, this._requestHeaders, (file) => this.updateFeedback(file))
@@ -108,8 +112,10 @@ export class EzUpload {
         this._updatingValue.push(f);
       }
     });
-    this.value = this._updatingValue;
-    this.ezChange.emit(this.value);
+    if (this._filePointers.size === this._updatingValue.length) {
+      this.value = this._updatingValue;
+      this.ezChange.emit(this.value);
+    }
   }
   buildProgressId(uploading) {
     let sanitizedName = uploading.name.replace(/[^a-z0-9_]/gi, "_");
@@ -435,6 +441,26 @@ export class EzUpload {
           }
         }
       }
+    }, {
+      "method": "ezStartChange",
+      "name": "ezStartChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento emitido ao iniciar a altera\u00E7\u00E3o (remover ou adicionar um arquivo)."
+      },
+      "complexType": {
+        "original": "WaitingChange",
+        "resolved": "WaitingChange",
+        "references": {
+          "WaitingChange": {
+            "location": "import",
+            "path": "@sankhyalabs/core"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "addFiles": {

package/dist/collection/components/test-du/test-du.js

@@ -1,49 +1,24 @@
-import { Component, h } from '@stencil/core';
-import { DataUnit, DataType, UserInterface } from '@sankhyalabs/core';
+import { Component, h, State } from '@stencil/core';
+import { DataUnit, DataType, UserInterface, ApplicationContext } from '@sankhyalabs/core';
+import { ApplicationUtils } from '../../utils';
 export class TestDu {
-  /*private _ezButton// : HTMLEzButton;
-  private _ezComboBox// : HTMLEzComboBox;
-  private _ezDateInput// : HTMLEzDateInput;
-  private _ezDateTimeInput// : HTMLEzDateTimeInput;
-  private _ezNumberInput// : HTMLEzNumberInput
-  private _ezSearch// : HTMLEzSearch
-  private _ezUpload// : HTMLEzUpload
-  private _ezFilterInput// : HTMLEzFilterInput*/
   componentWillLoad() {
+    ApplicationContext.setContextValue("__EZUI__UPLOAD__ADD__URL__", "http://localhost:8080/mge/ez.uploading");
     this.dataUnit = new DataUnit("testes_com_formulario");
+    this.dataUnit.subscribe(() => this.isDirty = this.dataUnit.isDirty());
     this.dataUnit.metadata = {
       name: "dd://br.com.sankhya.fin.cad.movimentacaoFinanceira/Financeiro",
       label: "Parceiro",
       fields: [
         {
-          name: "CODPARC",
-          label: "Parceiro",
-          dataType: DataType.NUMBER,
-          userInterface: UserInterface.SEARCH,
-          required: true,
-          properties: {}
-        },
-        {
-          name: "RECDESP",
-          label: "Receita/Despesa",
-          dataType: DataType.TEXT,
-          userInterface: UserInterface.OPTIONSELECTOR,
-          required: true,
-          properties: { options: `{"-1": "Despesa", "1": "Receita"}` }
-        },
-        {
-          name: "P",
-          label: "pera",
-          dataType: DataType.TEXT,
-          userInterface: UserInterface.OPTIONSELECTOR,
-          properties: { options: `{"M": "Madura", "V": "Verde", "P": "Passada"}` }
-        },
-        {
-          name: "ME",
-          label: "ME",
-          dataType: DataType.NUMBER,
-          userInterface: UserInterface.DECIMALNUMBER,
-          properties: { precision: 4, prettyPrecision: 1 }
+          name: "ANEXO",
+          label: "Anexo",
+          dataType: DataType.OBJECT,
+          userInterface: UserInterface.FILE,
+          properties: {
+            DESTINATION: "MULTIFILE",
+            MAX_FILES: "2"
+          }
         }
       ]
     };
@@ -61,9 +36,26 @@ export class TestDu {
       total: 100,
       hasMore: true
     }));
+    this.dataUnit.saveLoader = (_dataUnit, changes) => {
+      const savedRecords = [];
+      changes.forEach(change => {
+        savedRecords.push(Object.assign(Object.assign({}, change.record), change.updatingFields));
+      });
+      return Promise.resolve(savedRecords);
+    };
+  }
+  save() {
+    this.dataUnit.saveData().catch(e => {
+      if (e.kind === "WAITING_CHANGE_ERROR") {
+        ApplicationUtils.alert(`Alterando campo ${e.fieldName}`, e.message);
+      }
+    });
   }
   render() {
-    return (h("ez-form", { dataUnit: this.dataUnit }));
+    return (h("div", null,
+      h("button", { onClick: () => this.dataUnit.loadData() }, "Carregar"),
+      h("button", { onClick: () => this.save(), disabled: !this.isDirty }, "Salvar"),
+      h("ez-form", { dataUnit: this.dataUnit })));
   }
   static get is() { return "test-du"; }
   static get originalStyleUrls() { return {
@@ -72,4 +64,7 @@ export class TestDu {
   static get styleUrls() { return {
     "$": ["test-du.css"]
   }; }
+  static get states() { return {
+    "isDirty": {}
+  }; }
 }

package/dist/collection/utils/ApplicationUtils.js

@@ -1,22 +1,25 @@
 export default class ApplicationUtils {
-  static async showDialog(title, message, icon = null, confirm, critical = false) {
+  static async showDialog(title, message, icon = null, confirm, critical = false, options) {
+    if (options) {
+      options = Object.assign(Object.assign({}, ApplicationUtils.defaultMessageOptions), options);
+    }
     return new Promise(resolve => {
       let dialog = document.querySelector("ez-dialog");
       if (!dialog) {
         dialog = document.createElement("ez-dialog");
         window.document.body.appendChild(dialog);
       }
-      dialog.show(title, message, critical, confirm, icon).then(ok => resolve(ok));
+      dialog.show(title, message, critical, confirm, icon, options.labelCancel, options.labelConfirm, options.btnConfirmDanger).then(ok => resolve(ok));
     });
   }
-  static async alert(title, message, icon = null) {
-    return ApplicationUtils.showDialog(title, message, icon, false, false);
+  static async alert(title, message, icon = null, options = ApplicationUtils.defaultMessageOptions) {
+    return ApplicationUtils.showDialog(title, message, icon, false, false, options);
   }
-  static async error(title, message, icon = null) {
-    return ApplicationUtils.showDialog(title, message, icon, false, true);
+  static async error(title, message, icon = null, options = ApplicationUtils.defaultMessageOptions) {
+    return ApplicationUtils.showDialog(title, message, icon, false, true, options);
   }
-  static async confirm(title, message, icon = null, critical = false) {
-    return ApplicationUtils.showDialog(title, message, icon, true, critical);
+  static async confirm(title, message, icon = null, critical = false, options = ApplicationUtils.defaultMessageOptions) {
+    return ApplicationUtils.showDialog(title, message, icon, true, critical, options);
   }
   static async info(message, options = ApplicationUtils.defaultMessageOptions) {
     let toast = document.querySelector("ez-toast");
@@ -28,6 +31,9 @@ export default class ApplicationUtils {
   }
 }
 ApplicationUtils.defaultMessageOptions = {
-  canClose: true
+  canClose: true,
+  labelCancel: 'Não',
+  labelConfirm: 'Sim',
+  btnConfirmDanger: false
 };
 ;