@sankhyalabs/ezui 4.0.4 → 4.2.0

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

@@ -1,11 +1,18 @@
-import { ElementIDUtils } from "@sankhyalabs/core";
+import { ElementIDUtils, JSUtils } from "@sankhyalabs/core";
 import { h, Host } from "@stencil/core";
 import AgGridController from "./controller/ag-grid/AgGridController";
+import { SelectionCounter } from "./subcomponents/selection-counter";
+import { ALL_RECORD } from "../../utils/constants";
 export class EzGrid {
   constructor() {
     this._gridController = new AgGridController(false);
+    this._debounceTimer = 500;
+    this._selectionAll = false;
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
+    this._showSelectionCounter = false;
+    this._selectionCount = 0;
+    this._selectionPageCount = 0;
     this.multipleSelection = undefined;
     this.config = undefined;
     this.serverUrl = undefined;
@@ -60,10 +67,185 @@ export class EzGrid {
   async quickFilter(term) {
     this._gridController.quickFilter(term);
   }
+  observeConfig(config) {
+    this._gridController.setColumnsState(config.columns);
+  }
   onSelectionChange(evt) {
-    if (this.dataUnit) {
-      this.dataUnit.setSelection(evt.detail.selection.map((r) => r.__record__id__));
+    const { selection } = evt === null || evt === void 0 ? void 0 : evt.detail;
+    if (selection == undefined || this.dataUnit == undefined) {
+      return;
+    }
+    if (this.isAllRecordSetted()) {
+      this.updateSelectionPage(selection);
+      return;
+    }
+    this.setSelection(selection);
+  }
+  updateSelectionPage(selection) {
+    if (this._selectionAll) {
+      this._selectionAll = false;
+    }
+    else {
+      this.dataUnit.clearSelection()
+        .then(() => {
+        const records = this.dataUnit.records;
+        const selectionPage = selection.filter((selectedRecord) => {
+          return records.some((record) => {
+            return record.__record__id__ === selectedRecord.__record__id__;
+          });
+        });
+        this._gridController.selectRows(selectionPage);
+      });
+    }
+  }
+  isAllRecordSetted() {
+    var _a;
+    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
+    return allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((selectedRecord) => {
+      return selectedRecord.__record__id__ === ALL_RECORD;
+    });
+  }
+  setSelection(selection) {
+    if ((selection === null || selection === void 0 ? void 0 : selection.length) > 0) {
+      this.dataUnit.setSelection(selection)
+        .then(this.controlSelectionCounter.bind(this));
+    }
+    else {
+      this.dataUnit.clearSelection()
+        .then(this.controlSelectionCounter.bind(this));
+    }
+  }
+  setAutoSelectAll() {
+    var _a, _b, _c, _d;
+    const { total } = (_a = this._paginationInfo) !== null && _a !== void 0 ? _a : {};
+    if (total == undefined) {
+      return;
+    }
+    this._selectionCount = total;
+    this._selectionAll = true;
+    this._showSelectionCounter = true;
+    (_b = this._gridController) === null || _b === void 0 ? void 0 : _b.selectRows((_d = (_c = this.dataUnit) === null || _c === void 0 ? void 0 : _c.records) !== null && _d !== void 0 ? _d : []);
+  }
+  controlSelectionCounter() {
+    var _a, _b;
+    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
+    const counter = (_b = allSelection === null || allSelection === void 0 ? void 0 : allSelection.length) !== null && _b !== void 0 ? _b : 0;
+    if (this.isAllRecordSetted()) {
+      this.setAutoSelectAll();
+      return;
+    }
+    if (!this.multipleSelection || !this.isPaginationActived()) {
+      this._showSelectionCounter = false;
+      setTimeout(this.setSelectionCount.bind(this), this._debounceTimer);
+      return;
+    }
+    if (counter > 1) {
+      setTimeout(() => {
+        this.setSelectionCount(counter);
+        this._showSelectionCounter = true;
+      }, this._debounceTimer);
+    }
+    else {
+      this._showSelectionCounter = false;
+      setTimeout(this.setSelectionCount.bind(this, counter), this._debounceTimer);
+    }
+  }
+  setSelectionCount(value = 0) {
+    var _a, _b;
+    this._selectionCount = value;
+    const selectPageRecords = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelectedRecords();
+    this._selectionPageCount = (_b = selectPageRecords === null || selectPageRecords === void 0 ? void 0 : selectPageRecords.length) !== null && _b !== void 0 ? _b : 0;
+  }
+  isPaginationActived() {
+    var _a;
+    const { total, lastRecord, firstRecord } = (_a = this._paginationInfo) !== null && _a !== void 0 ? _a : {};
+    if (total == undefined || lastRecord == undefined || firstRecord == undefined) {
+      return false;
+    }
+    return Math.ceil(total / (lastRecord - firstRecord + 1)) > 1;
+  }
+  onSelectAllRecords() {
+    const allRecord = {
+      __record__id__: ALL_RECORD,
+      filter: this.dataUnit.getFilters(),
+      sort: this.dataUnit.getSort()
+    };
+    this.setSelection([allRecord]);
+  }
+  onSelectPageRecords() {
+    var _a;
+    (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.clearSelection().then(() => {
+      var _a, _b, _c;
+      (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.selectRows((_c = (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.records) !== null && _c !== void 0 ? _c : []);
+    });
+  }
+  onClearSelectedRecords() {
+    var _a;
+    (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.clearSelection();
+  }
+  createConfigFromState(state) {
+    let newConfig = { columns: [] };
+    state.forEach(columnState => {
+      if (!columnState.hidden) {
+        let newConfigColumn = { name: columnState.name };
+        if (columnState.width) {
+          newConfigColumn['width'] = columnState.width;
+        }
+        if (columnState.sort) {
+          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === 'ASC');
+          newConfigColumn['orderIndex'] = columnState.sortIndex;
+        }
+        else {
+          newConfigColumn['orderIndex'] = 0;
+        }
+        if (newConfigColumn) {
+          newConfig.columns.push(newConfigColumn);
+        }
+      }
+    });
+    return newConfig;
+  }
+  positionSelectionCounter() {
+    var _a;
+    if (this._gridSelectionCounter == undefined) {
+      return;
+    }
+    if (this._showSelectionCounter) {
+      const boundingContainer = (_a = this._container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+      if (boundingContainer == undefined) {
+        return;
+      }
+      const limitBottom = boundingContainer.bottom - 30;
+      this._gridSelectionCounter.style.bottom = (document.body.clientHeight - limitBottom) + 'px';
+    }
+    else {
+      this._gridSelectionCounter.style.bottom = "";
+    }
+  }
+  setEvents() {
+    window.removeEventListener("scroll", this.positionSelectionCounter.bind(this));
+    window.addEventListener("scroll", this.positionSelectionCounter.bind(this));
+  }
+  resizeSelectionCounter() {
+    if (this._gridSelectionCounter == undefined) {
+      return;
+    }
+    this._gridSelectionCounter.style.width = "";
+    if (this._gridSelectionCounter.clientHeight > 42) {
+      this._gridSelectionCounter.style.width = "min-content";
     }
+    this.positionSelectionCounter();
+  }
+  configSelectionCounter() {
+    if (this._element == undefined) {
+      return;
+    }
+    if (this._resizeObserver != undefined) {
+      this._resizeObserver.unobserve(this._element);
+    }
+    this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.resizeSelectionCounter.bind(this), 200));
+    this._resizeObserver.observe(this._element);
+    this.resizeSelectionCounter();
   }
   onColumnStateChange(type, state, info) {
     var _a;
@@ -106,56 +288,6 @@ export class EzGrid {
       }
     }
   }
-  createConfigFromState(state) {
-    let newConfig = { columns: [] };
-    state.forEach(columnState => {
-      if (!columnState.hidden) {
-        let newConfigColumn = { name: columnState.name };
-        if (columnState.width) {
-          newConfigColumn['width'] = columnState.width;
-        }
-        if (columnState.sort) {
-          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === 'ASC');
-          newConfigColumn['orderIndex'] = columnState.sortIndex;
-        }
-        else {
-          newConfigColumn['orderIndex'] = 0;
-        }
-        if (newConfigColumn) {
-          newConfig.columns.push(newConfigColumn);
-        }
-      }
-    });
-    return newConfig;
-  }
-  componentDidLoad() {
-    this._gridController.initDatagrid(this._container, {
-      onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
-      onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
-      onPaginationChange: (paginationInfo) => {
-        var _a;
-        if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > (paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.currentPage) && this._paginationChangedByKeyboard) {
-          this._gridController.setFocusLastRow();
-        }
-        else {
-          this._gridController.setFocusFirstRow();
-          this._paginationChangedByKeyboard = true;
-        }
-        this._paginationInfo = paginationInfo;
-      },
-      onDoubleClick: (row) => {
-        this.ezDoubleClick.emit(row);
-      },
-      allowMultipleSelection: this.multipleSelection,
-      serverURL: this.serverUrl,
-      dataUnit: this.dataUnit,
-      statusResolver: this.statusResolver
-    });
-    if (this.config) {
-      this.observeConfig(this.config);
-    }
-    this.buildDataElementId();
-  }
   buildDataElementId() {
     const dataInfo = { dataUnit: this.dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
@@ -185,11 +317,45 @@ export class EzGrid {
     }
     return null;
   }
-  observeConfig(config) {
-    this._gridController.setColumnsState(config.columns);
+  componentDidLoad() {
+    this._gridController.initDatagrid(this._container, {
+      onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
+      onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
+      onPaginationChange: (paginationInfo) => {
+        var _a;
+        if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > (paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.currentPage) && this._paginationChangedByKeyboard) {
+          this._gridController.setFocusLastRow();
+        }
+        else {
+          this._gridController.setFocusFirstRow();
+          this._paginationChangedByKeyboard = true;
+        }
+        this._paginationInfo = paginationInfo;
+        this._gridController.updateCheckbox();
+        this.controlSelectionCounter();
+      },
+      onDoubleClick: (row) => {
+        this.ezDoubleClick.emit(row);
+      },
+      allowMultipleSelection: this.multipleSelection,
+      serverURL: this.serverUrl,
+      dataUnit: this.dataUnit,
+      statusResolver: this.statusResolver
+    });
+    if (this.config) {
+      this.observeConfig(this.config);
+    }
+    this.buildDataElementId();
+    this.setEvents();
+  }
+  componentWillRender() {
+    this.configSelectionCounter();
   }
   render() {
-    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => this._refPaginationControl = ref }, this.getPaginationControl())), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" })));
+    var _a, _b, _c;
+    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => this._refPaginationControl = ref }, this.getPaginationControl())), h("div", { ref: (ref) => this._gridSelectionCounter = ref, class: `grid__selection-counter
+          ${this._showSelectionCounter ? "grid__selection-counter--opened" : ""}
+        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, selectionPageCount: this._selectionPageCount, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, recordsLength: (_c = (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.records) === null || _c === void 0 ? void 0 : _c.length, onSelectAll: this.onSelectAllRecords.bind(this), onSelectPage: this.onSelectPageRecords.bind(this), onClearAll: this.onClearSelectedRecords.bind(this), onClose: () => this._showSelectionCounter = false })), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" })));
   }
   static get is() { return "ez-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -305,7 +471,10 @@ export class EzGrid {
   static get states() {
     return {
       "_paginationInfo": {},
-      "_paginationChangedByKeyboard": {}
+      "_paginationChangedByKeyboard": {},
+      "_showSelectionCounter": {},
+      "_selectionCount": {},
+      "_selectionPageCount": {}
     };
   }
   static get events() {

package/dist/collection/components/ez-grid/subcomponents/selection-counter.js

@@ -0,0 +1,23 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h } from "@stencil/core";
+export const SelectionCounter = (props) => {
+  const { selectionCount, selectionPageCount, total, recordsLength, onSelectAll, onSelectPage, onClearAll, onClose } = props;
+  const pageSelectedRecords = selectionPageCount === recordsLength;
+  const allSelectedRecords = selectionCount === total;
+  return (h("div", Object.assign({ class: "ez-box ez-box--shadow-small" }, getElementID("ezGridSelectionCounter")), h("div", { class: "ez-flex ez-flex--align-items-center ez-size-width--full ez-padding-horizontal--medium" }, h("div", { class: "ez-flex ez-flex--wrap ez-flex--align-items-baseline ez-flex--justify-center" }, h("label", Object.assign({ innerHTML: getText(selectionCount, allSelectedRecords), class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium ez-margin-top--medium" }, getElementID("ezGridSelectionCounter_label"))), h("div", { class: "ez-flex ez-margin-right--medium" }, (pageSelectedRecords || allSelectedRecords) &&
+    h("ez-button", Object.assign({ class: "ez-margin-right--medium", label: `Selecionar ${allSelectedRecords ? "apenas a página atual" : `todos os ${total} registros`}`, mode: "link", onClick: allSelectedRecords ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allSelectedRecords ? "Page" : "All"}`))), h("ez-button", Object.assign({ class: "grid__btn-clear", label: "Limpar", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: "Fechar", onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
+};
+function getText(selectionCount, allSelectedRecords) {
+  if (allSelectedRecords) {
+    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
+  }
+  else {
+    const pluralChar = selectionCount > 1 ? "s" : "";
+    return `Há <strong>${selectionCount} registro${pluralChar}</strong> selecionado${pluralChar}.`;
+  }
+}
+function getElementID(sufix) {
+  return {
+    [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(sufix)
+  };
+}

package/dist/collection/utils/constants.js

@@ -1 +1,2 @@
 export const REQUIRED_INFO = " (obrigatório) *";
+export const ALL_RECORD = "ALL_RECORD";

package/dist/collection/utils/form/DataBinder.js

@@ -2,9 +2,8 @@ import { ApplicationContext, Action, WaitingChangeException, DataUnitAction } fr
 import ApplicationUtils from "../ApplicationUtils";
 export default class DataBinder {
   constructor(dataUnit) {
-    this._invalidFields = new Map();
     this.onDataUnitEvent = (action) => {
-      var _a;
+      var _a, _b;
       switch (action.type) {
         case Action.DATA_LOADED:
         case Action.DATA_SAVED:
@@ -13,6 +12,7 @@ export default class DataBinder {
         case Action.RECORDS_COPIED:
         case Action.EDITION_CANCELED:
         case Action.SELECTION_CHANGED:
+        case Action.SELECTION_REMOVED:
         case Action.NEXT_SELECTED:
         case Action.PREVIOUS_SELECTED:
           this.clearInvalid();
@@ -24,13 +24,30 @@ export default class DataBinder {
             this.updateValue(field.fieldName, field.field);
           });
           break;
+        case Action.FIELD_INVALIDATED:
+          (_b = this._fields) === null || _b === void 0 ? void 0 : _b.forEach(field => {
+            this.updateErrorMessage(field.fieldName, field.field);
+          });
+          break;
       }
     };
     this._fields = new Map();
     this._dataUnit = dataUnit;
+    this.applyDefaultValues();
     this._dataUnit.subscribe(this.onDataUnitEvent);
     this._dataUnit.addInterceptor(this);
   }
+  applyDefaultValues() {
+    const recordIds = (this._dataUnit.getAddedRecords() || []).map(r => r.__record__id__);
+    if (recordIds.length > 0) {
+      const defaultValues = this.getDefaultValues();
+      if (defaultValues) {
+        Object.keys(defaultValues).forEach(field => {
+          this._dataUnit.setFieldValue(field, defaultValues[field], recordIds);
+        });
+      }
+    }
+  }
   bind(fields, currentContextName, formMetadata, recordsValidator) {
     fields.forEach(fieldElement => {
       const { fieldName, contextName } = fieldElement.dataset;
@@ -45,17 +62,19 @@ export default class DataBinder {
     this._dataUnit.unsubscribe(this.onDataUnitEvent);
     this._dataUnit.removeInterceptor(this);
   }
+  getCurrentRecordId() {
+    const record = this._dataUnit.getSelectedRecord();
+    return record === null || record === void 0 ? void 0 : record.__record__id__;
+  }
   markInvalid(field) {
-    this._invalidFields.set(field.name, field);
+    this._dataUnit.setInvalidField(field.name, field.message, this.getCurrentRecordId());
     if (this._fields.has(field.name)) {
       const fieldElement = this._fields.get(field.name).field;
-      if (!fieldElement["errorMessage"]) {
-        this.updateErrorMessage(field.name, fieldElement);
-      }
+      this.updateErrorMessage(field.name, fieldElement, field.message);
     }
   }
-  clearInvalid() {
-    this._invalidFields.clear();
+  clearInvalid(recordId) {
+    this._dataUnit.clearInvalid(recordId);
     this._fields.forEach(fieldBinder => {
       const fieldElement = fieldBinder.field;
       fieldElement["errorMessage"] = "";
@@ -137,16 +156,18 @@ export default class DataBinder {
       }
     });
   }
-  updateErrorMessage(fieldName, field) {
-    const invalidField = this._invalidFields.get(fieldName);
-    if (invalidField) {
-      field["errorMessage"] = invalidField.message;
+  updateErrorMessage(fieldName, field, message) {
+    if (message == undefined) {
+      message = this._dataUnit.getInvalidMessage(this.getCurrentRecordId(), fieldName);
+    }
+    if (!field["errorMessage"]) {
+      field["errorMessage"] = message;
     }
   }
   getErrorMessage(fieldName) {
     if (this._fields.has(fieldName)) {
       const fieldElement = this._fields.get(fieldName).field;
-      return fieldElement["errorMessage"] || null;
+      return fieldElement["errorMessage"];
     }
     return undefined;
   }
@@ -197,7 +218,7 @@ export default class DataBinder {
     if (this._dataUnit.records.length === 0) {
       this._dataUnit.addRecord();
     }
-    this._invalidFields.delete(fieldName);
+    this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
     this._dataUnit.setFieldValue(fieldName, newValue);
     if (this._dataUnit.waitingForChange(fieldName)) {
       const bind = this._fields.get(fieldName);
@@ -230,7 +251,6 @@ export default class DataBinder {
     }
   }
   interceptAction(action) {
-    var _a;
     if (action.type === Action.RECORDS_COPIED) {
       const cleanFields = this._formMetadata.getCleanOnCopyFields();
       if (cleanFields) {
@@ -250,30 +270,27 @@ export default class DataBinder {
       });
     }
     if (action.type === Action.RECORDS_ADDED) {
-      const defaultValues = (_a = this._formMetadata) === null || _a === void 0 ? void 0 : _a.getDefaultValues();
+      const defaultValues = this.getDefaultValues();
       if (defaultValues) {
         const records = action.payload;
         return new DataUnitAction(Action.RECORDS_ADDED, records.map(record => {
-          const newRecord = Object.assign({}, record);
-          for (const field in defaultValues) {
-            const defaultValue = this.getFormattedValue(defaultValues[field]);
-            const recordValue = typeof defaultValue === "function" ? defaultValue() : defaultValue;
-            newRecord[field] = this._dataUnit.valueFromString(field, recordValue);
-          }
-          return newRecord;
+          return Object.assign(Object.assign({}, record), defaultValues);
         }));
       }
     }
     return action;
   }
-  getFormattedValue(defaultValue) {
-    if (defaultValue == undefined || typeof defaultValue !== "object") {
-      return defaultValue;
-    }
-    if ("formattedValue" in defaultValue) {
-      return defaultValue.formattedValue;
+  getDefaultValues() {
+    var _a;
+    const rawDefaultValues = (_a = this._formMetadata) === null || _a === void 0 ? void 0 : _a.getDefaultValues();
+    if (rawDefaultValues) {
+      const defaultValues = {};
+      for (const field in rawDefaultValues) {
+        defaultValues[field] = this._dataUnit.valueFromString(field, rawDefaultValues[field]);
+      }
+      return defaultValues;
     }
-    return defaultValue.value;
+    return undefined;
   }
 }
 class Bind {

package/dist/collection/utils/form/FormMetadata.js

@@ -111,12 +111,23 @@ export const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
         }
         let defaultValue = field.defaultValue == undefined ? (_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.defaultValue : field.defaultValue;
         if (defaultValue) {
-          if ((typeof defaultValue === "object") && defaultValue["type"] === "V") {
-            // Atualmente a configuração do formulário eventualmente deposita um objeto
-            // prototipado como {type: "V", value: "${nome.de.variavel}"} para campos com
-            // valor padrão do tipo variável. Dessa forma precisamos "desenvelopar" o valor
-            // para que a variável chegue corretamente a seu destino.
-            defaultValue = defaultValue["value"];
+          const { type, value } = defaultValue;
+          if (type) {
+            if (type === "V") {
+              defaultValue = value;
+            }
+            else {
+              try {
+                const parsed = JSON.parse(value);
+                if (parsed && "value" in parsed) {
+                  defaultValue = parsed;
+                }
+                else {
+                  defaultValue = value;
+                }
+              }
+              catch (_d) { }
+            }
           }
           defaultValues[field.name] = defaultValue;
         }