@sankhyalabs/ezui 1.1.119 → 1.1.122

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

@@ -1,32 +1,58 @@
-import { ApplicationContext } from "@sankhyalabs/core";
+import { ApplicationContext, Action } from "@sankhyalabs/core";
 export default class DataBinder {
   constructor(dataUnit) {
     this._fields = new Map();
     this._dataUnit = dataUnit;
-    this._dataUnit.subscribe(_action => {
+    this._dataUnit.subscribe(action => {
       var _a;
-      (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
-        this.updateValue(field.fieldName, field.field);
-      });
+      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;
+      }
     });
   }
   bind(fields) {
     fields.forEach(fieldElement => {
       const fieldName = fieldElement.dataset.fieldName;
       this.updateBind(fieldName, fieldElement);
-      this.updateValue(fieldName, fieldElement);
     });
   }
   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 +70,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/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/ag-grid/AgGridController.js

@@ -37,11 +37,13 @@ export default class AgGridController {
       this._serverURL = options.serverURL;
       this._dataUnit = options.dataUnit;
       this._dataUnit.sortingProvider = this;
+      this._dataSource = new DataSource(this._dataUnit, this._serverURL);
       this._gridOptions = {
         localeText: gridTerms,
         rowModelType: "serverSide",
+        serverSideStoreType: "partial",
         rowSelection: this._multipleSelection ? "multiple" : "single",
-        serverSideDatasource: new DataSource(this._dataUnit, this._serverURL),
+        serverSideDatasource: this._dataSource,
         getRowNodeId: (params) => typeof params === "string" ? params : params[this._idAttribName],
         getMainMenuItems: (params) => {
           const column = params.column;
@@ -52,10 +54,13 @@ export default class AgGridController {
           }));
           return items;
         },
-        onViewportChanged: () => {
-          if (this._dataUnit) {
-            this.selectRows(this._dataUnit.getSelection());
-          }
+        getRowHeight: () => {
+          //FIXME: Existe um bug no PartialStore.prototype.destroyAllBlocks do ag-grid, pois
+          //apesar de destruir os blocos, mantém a variável "blockHeights" com o tamanho antigo
+          //dos blocos, então, quando removemos uma linha, a altura do bloco não é recalculada.
+          //Descobri que setando manualmente a altura das linhas, apesar do bloco ficar com 
+          //tamanho errado, isso afeta menos o componente.
+          return 25;
         }
       };
       this.setOptionsEvents(this._gridOptions);
@@ -78,6 +83,11 @@ export default class AgGridController {
     opt.onSelectionChanged = e => this.onSelectionChange(e);
     opt.onPaginationChanged = () => this.onPaginationChange();
     opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
+    opt.onViewportChanged = () => {
+      if (this._dataUnit) {
+        this.selectRows(this._dataUnit.getSelection());
+      }
+    };
   }
   setOptionsPagination(opt) {
     opt.pagination = (this._pageSize > -1);
@@ -95,11 +105,11 @@ export default class AgGridController {
     }
     this._gridOptions.api.setRowData(data);
   }
-  addRows(rows) {
+  addRows() {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
-    this._gridOptions.api.applyServerSideTransaction({ add: rows });
+    this._gridOptions.api.refreshServerSideStore({});
   }
   selectRows(rowIds) {
     if (this._grid === undefined) {
@@ -114,11 +124,11 @@ export default class AgGridController {
       });
     }
   }
-  removeRows(rowIds) {
+  removeRows() {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
-    this._gridOptions.api.applyServerSideTransaction({ remove: rowIds });
+    this._gridOptions.api.refreshServerSideStore({});
   }
   changeValues(changes, rowIds) {
     if (this._grid === undefined) {
@@ -235,6 +245,14 @@ export default class AgGridController {
   previousPage() {
     this._gridOptions.api.paginationGoToPreviousPage();
   }
+  goToPage(page) {
+    this._gridOptions.api.paginationGoToPage(page);
+  }
+  quickFilter(term) {
+    this._dataSource.setQuickFilter(term);
+    this.goToPage(0);
+    this._gridOptions.api.refreshServerSideStore({ purge: true });
+  }
   buildColDef(source) {
     return {
       headerName: source.label,

package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js

@@ -19,15 +19,15 @@ export default class DataSource {
       }
     }
     else {
-      this.loadData()
+      this.loadData({ limit: params.api.paginationGetPageSize(), offset: params.request.startRow, quickFilter: this._quickFilterTerm })
         .then(data => params.success(data))
         .catch(() => params.fail());
     }
   }
-  loadData() {
+  loadData(page) {
     return new Promise((resolve, reject) => {
       if (this._dataUnit) {
-        this._dataUnit.loadData().then(rowData => resolve({ rowData, rowCount: rowData.length }));
+        this._dataUnit.loadData(page).then(pageRes => resolve({ rowData: this._dataUnit.records, rowCount: pageRes.total }));
       }
       else {
         fetch(this._serverURL)
@@ -38,4 +38,7 @@ export default class DataSource {
       }
     });
   }
+  setQuickFilter(term) {
+    this._quickFilterTerm = term;
+  }
 }

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

@@ -54,6 +54,18 @@ export class EzGrid {
   async getColumns() {
     return Promise.resolve(this._gridController.getColumnsDef());
   }
+  /**
+  * Método para recarregar pagina atual da grid.
+  */
+  async refresh() {
+    this._gridController.refresh();
+  }
+  /**
+  * Método para fazer um filtro rápido na grid.
+  */
+  async quickFilter(term) {
+    this._gridController.quickFilter(term);
+  }
   componentWillLoad() {
     if (this.dataUnit) {
       this._dataUnitBridge = new DataUnitBridge(this._gridController, this.dataUnit);
@@ -433,6 +445,41 @@ export class EzGrid {
         "text": "M\u00E9todo retornar o estado atual das colunas do grid.",
         "tags": []
       }
+    },
+    "refresh": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "M\u00E9todo para recarregar pagina atual da grid.",
+        "tags": []
+      }
+    },
+    "quickFilter": {
+      "complexType": {
+        "signature": "(term: string) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "M\u00E9todo para fazer um filtro r\u00E1pido na grid.",
+        "tags": []
+      }
     }
   }; }
 }

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,65 +1,61 @@
-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"
+          }
         }
       ]
     };
-    this.dataUnit.dataLoader = () => new Promise(accept => accept([
-      {
-        __record__id__: "1321321321321321",
-        CODPARC: 10,
-        NOMEPARC: "Parceiro 10",
-        P: "M",
-        L: "Bagaço",
-        LI: "Azedo"
+    this.dataUnit.dataLoader = () => new Promise(accept => accept({
+      records: [{
+          __record__id__: "1321321321321321",
+          CODPARC: 10,
+          NOMEPARC: "Parceiro 10",
+          P: "M",
+          L: "Bagaço",
+          LI: "Azedo"
+        }],
+      limit: 0,
+      offset: 2,
+      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 {
@@ -68,4 +64,7 @@ export class TestDu {
   static get styleUrls() { return {
     "$": ["test-du.css"]
   }; }
+  static get states() { return {
+    "isDirty": {}
+  }; }
 }