@sankhyalabs/ezui 5.10.8 → 5.11.0-dev.2

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

@@ -1,7 +1,8 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-296b8458.js';
-import { Action, ObjectUtils as ObjectUtils$1, ApplicationContext, StringUtils as StringUtils$1, UserInterface, NumberUtils as NumberUtils$1, DataType, SortMode, ElementIDUtils, JSUtils, DateUtils as DateUtils$1 } from '@sankhyalabs/core';
+import { Action, ObjectUtils as ObjectUtils$1, HTMLBuilder, ApplicationContext, UserInterface, StringUtils as StringUtils$1, NumberUtils as NumberUtils$1, MaskFormatter, DataType, SortMode, ElementIDUtils, JSUtils, DateUtils as DateUtils$1 } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 import { D as DISTINCT_FILTER_NAME_PREFIX } from './constants-6dab64f7.js';
+import { b as buildFieldMetadata, R as RecordValidationProcessor } from './RecordValidationProcessor-abc814af.js';
 import { A as ApplicationUtils } from './ApplicationUtils-d9a34a16.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
@@ -118850,6 +118851,7 @@ class DataSource {
         case Action.DATA_SAVED:
         case Action.EDITION_CANCELED:
         case Action.DATA_CHANGED:
+        case Action.DATA_RESOLVED:
           this._controller.refresh();
           break;
         case Action.SELECTION_CHANGED:
@@ -119183,6 +119185,443 @@ const gridTerms = {
   ctrlV: "Ctrl+V"
 };
 
+const buildEditorMetadata = (descriptor, eGridCell, dataUnit, editionManager) => {
+  return Object.assign(Object.assign({}, buildFieldMetadata(descriptor)), { eGridCell, dataUnit, editionManager });
+};
+
+const MINIMIUM_WIDTH_TEXTAREA = 210;
+const PADDING_VALUE_TEXTAREA = 12;
+const buildTextInput = ({ name, contextName }) => {
+  return HTMLBuilder.parseElement(`<ez-text-input
+        class="ez-grid grid_editor"
+        data-field-name=${name}
+        data-context-name=${contextName}
+        mode="slim"
+    />`);
+};
+const buildTextAreaInput = ({ eGridCell, editionManager }) => {
+  const element = HTMLBuilder.parseElement(`<ez-text-area
+            can-show-error="false"
+            enable-resize="true"
+        />`);
+  element.addEventListener('keydown', event => handlePressEnterEvent(event, element, editionManager));
+  setElementInitialWidth(eGridCell, element);
+  element.isPopUp = true;
+  return element;
+};
+function setElementInitialWidth(eGridCell, element) {
+  const { width } = eGridCell.getBoundingClientRect();
+  const newValue = width > MINIMIUM_WIDTH_TEXTAREA ? width : MINIMIUM_WIDTH_TEXTAREA;
+  element.style.minWidth = `${newValue - PADDING_VALUE_TEXTAREA}px`;
+  element.style.resize = "both";
+}
+function handlePressEnterEvent(event, element, editionManager) {
+  if (isEnter(event)) {
+    const shouldBreakLine = event.ctrlKey;
+    if (shouldBreakLine) {
+      element.appendTextToSelection('\n');
+      event.preventDefault();
+      return;
+    }
+    editionManager.navigateByEnterKey(event);
+  }
+}
+function isEnter(event) {
+  return [event.key, event.code].includes('Enter');
+}
+
+const LIMIT_TIME_VALUE = 2359;
+const buildDate = () => {
+  const dateInput = HTMLBuilder.parseElement(`<ez-date-input
+            class="ez-grid grid_editor"
+            mode="slim"
+            data-is-fixed="true"
+        />`);
+  dateInput.valueGetter = () => dateInput.getValueAsync();
+  return dateInput;
+};
+const buildTime = ({ readOnly }) => {
+  const timeInputElement = HTMLBuilder.parseElement(`<ez-time-input
+        class="ez-grid grid_editor"
+        enabled=${!readOnly}
+        mode="slim"
+    />`);
+  timeInputElement.valueGetter = () => {
+    const value = timeInputElement.value;
+    const isAllowedTime = parseInt(value) <= LIMIT_TIME_VALUE;
+    return isAllowedTime ? value : null;
+  };
+  timeInputElement.valueSetter = (value) => {
+    const isAllowedTime = parseInt(value) <= LIMIT_TIME_VALUE;
+    if (!isAllowedTime)
+      return timeInputElement.value = null;
+    return timeInputElement.value = value;
+  };
+  return timeInputElement;
+};
+const buildDateTime = ({ readOnly }) => {
+  const dateTimeInput = HTMLBuilder.parseElement(`<ez-date-time-input
+        class="ez-grid grid_editor"
+        mode="slim"
+        enabled=${!readOnly}
+        data-is-fixed="true"
+    />`);
+  dateTimeInput.valueGetter = () => dateTimeInput.getValueAsync();
+  return dateTimeInput;
+};
+
+const buildDecimal = ({ readOnly, props }) => {
+  const precision = Number((props === null || props === void 0 ? void 0 : props.precision) || 2);
+  const prettyPrecision = Number((props === null || props === void 0 ? void 0 : props.prettyPrecision) || precision);
+  return buildNumeric(readOnly, precision, prettyPrecision);
+};
+const buildInteger = ({ readOnly }) => {
+  return buildNumeric(readOnly, 0, 0);
+};
+function buildNumeric(readOnly, precision, prettyPrecision) {
+  const input = HTMLBuilder.parseElement(`<ez-number-input
+        class="ez-grid grid_editor"
+        enabled=${!readOnly}
+        precision=${precision}
+        pretty-precision=${prettyPrecision}
+        mode="slim"
+    />`);
+  input.valueGetter = () => input.getValueAsync();
+  return input;
+}
+
+function getViewPortHeight(cell) {
+  let currentElem = cell;
+  while (currentElem) {
+    const viewPort = currentElem.querySelector("[ref=eBodyViewport]");
+    if (viewPort) {
+      return viewPort.getBoundingClientRect().bottom;
+    }
+    currentElem = currentElem.parentElement;
+  }
+}
+
+const BOOLEAN_OPTIONS = new Map([[true, { value: "S", label: "Sim" }], [false, { value: "N", label: "Não" }]]);
+const buildComboBox = ({ required, props, eGridCell }) => {
+  const prop = props === null || props === void 0 ? void 0 : props.options;
+  let options;
+  if (typeof prop === "string") {
+    const parsed = JSON.parse(prop);
+    options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
+  }
+  else {
+    options = prop;
+  }
+  const combo = HTMLBuilder.parseElement(`<ez-combo-box
+        class="grid_editor"
+        suppress-empty-option=${required}
+        mode="slim"
+    />`);
+  combo.options = options;
+  combo.listOptionsPosition = { verticalPosition: 29, bottomLimit: getViewPortHeight(eGridCell), hardPosition: true };
+  return combo;
+};
+const buildSwitch = (fieldMetadata) => {
+  const combo = buildComboBox(Object.assign(Object.assign({}, fieldMetadata), { props: Object.assign(Object.assign({}, fieldMetadata.props), { options: Array.from(BOOLEAN_OPTIONS.values()) }) }));
+  combo.valueGetter = () => {
+    const value = combo.value;
+    if (value == undefined) {
+      return;
+    }
+    return value.value == "S";
+  };
+  combo.valueSetter = (value) => {
+    if (value != undefined) {
+      combo.value = BOOLEAN_OPTIONS.get(value);
+    }
+  };
+  return combo;
+};
+
+const buildSearch = ({ name, required, readOnly, eGridCell, dataUnit }) => {
+  const ezSearch = HTMLBuilder.parseElement(`<ez-search
+          class="ez-grid grid_editor"
+          mode="slim"
+          suppress-empty-option=${required}
+          enabled=${!readOnly}
+    />`);
+  const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
+  ezSearch.optionLoader = (argument) => loader(argument, name, dataUnit);
+  ezSearch.listOptionsPosition = { verticalPosition: 29, bottomLimit: getViewPortHeight(eGridCell), hardPosition: true };
+  ezSearch.valueGetter = () => ezSearch.getValueAsync();
+  return ezSearch;
+};
+
+const uiBuilders = new Map();
+uiBuilders.set(UserInterface.DATE, buildDate);
+uiBuilders.set(UserInterface.TIME, buildTime);
+uiBuilders.set(UserInterface.DATETIME, buildDateTime);
+uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);
+uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
+uiBuilders.set(UserInterface.SWITCH, buildSwitch);
+uiBuilders.set(UserInterface.CHECKBOX, buildSwitch);
+uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
+uiBuilders.set(UserInterface.LONGTEXT, buildTextAreaInput);
+uiBuilders.set(UserInterface.SEARCH, buildSearch);
+class EzCellEditor {
+  init(params) {
+    const fieldName = params.column.getColId();
+    const dataUnit = params.context.dataUnit;
+    const fieldMetadata = buildEditorMetadata(dataUnit.getField(fieldName), params.eGridCell, dataUnit, params.context.editionManager);
+    const builder = uiBuilders.get(fieldMetadata.userInterface) || buildTextInput;
+    this._gui = builder(fieldMetadata);
+    if (this._gui.valueSetter != undefined) {
+      this._gui.valueSetter(params.value);
+    }
+    else {
+      this._gui.value = params.value;
+    }
+  }
+  getGui() {
+    return this._gui;
+  }
+  afterGuiAttached() {
+    this.focusIn();
+  }
+  focusIn() {
+    this._gui.focus();
+    this._gui.setFocus({ selectText: true });
+  }
+  getValue() {
+    return this._gui.valueGetter != undefined ? this._gui.valueGetter() : this._gui.value;
+  }
+  isPopup() {
+    return this._gui.isPopUp;
+  }
+}
+
+class GridEditionManager {
+  constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled) {
+    this._dataUnit = dataUnit;
+    this._recordValidationProcessor = new RecordValidationProcessor(this._dataUnit, {
+      getRequiredFields: () => this.getRequiredFields(),
+      markAsInvalid: () => { },
+      getMessageForField: () => null
+    }, recordsValidator);
+    this._useEnterLikeTab = useEnterLikeTab;
+    this._editionIsDisabled = editionIsDisabled;
+  }
+  configureGrid(options) {
+    this._gridOptions = options;
+    options.readOnlyEdit = true;
+    options.onCellEditRequest = evt => this.onCellEditRequest(evt);
+    options.onCellKeyDown = evt => {
+      if (evt.event && evt["column"]) {
+        this.onCellKeyDown(evt);
+      }
+    };
+    return options;
+  }
+  proceedAutoSave() {
+    if (!this._dataUnit.isDirty()) {
+      this.saveSuccess();
+      return;
+    }
+    if (!this._isGridEdition) {
+      return;
+    }
+    const currentRercord = this._dataUnit.getSelectedRecord();
+    if (currentRercord == undefined) {
+      return;
+    }
+    this._recordValidationProcessor
+      .validate()
+      .then(() => {
+      this._dataUnit.saveData()
+        .then(() => this.saveSuccess())
+        .catch(reason => this.saveFail(reason));
+    })
+      .catch(reason => this.saveFail(reason));
+  }
+  navigateByEnterKey(keyboardEvent) {
+    const backwards = keyboardEvent.shiftKey;
+    if (this._useEnterLikeTab) {
+      if (backwards) {
+        this._gridOptions.api.tabToPreviousCell(keyboardEvent);
+      }
+      else {
+        this._gridOptions.api.tabToNextCell(keyboardEvent);
+      }
+    }
+    else {
+      const editionCell = this._gridOptions.api.getEditingCells()[0];
+      if (editionCell) {
+        let { rowIndex } = editionCell;
+        this.nextEditionRow(rowIndex, editionCell.column, backwards);
+      }
+    }
+  }
+  getComponents() {
+    return { ezCellEditor: EzCellEditor };
+  }
+  verifyClickToEdition(api, cellClicked) {
+    if (this.isSecondClick(cellClicked)) {
+      api.startEditingCell({ rowIndex: cellClicked.rowIndex, colKey: cellClicked.column.getColId() });
+    }
+    this._lastCellClicked = cellClicked;
+  }
+  configureColumn(col) {
+    col.cellEditor = 'ezCellEditor';
+    col.editable = params => this.canEdit(params);
+    col.suppressKeyboardEvent = (params) => {
+      return params.event.key === KeyCode.ENTER;
+    };
+    return col;
+  }
+  getRequiredFields() {
+    return this._gridOptions.columnApi.getAllDisplayedColumns().filter(c => {
+      const fieldDefinition = this._dataUnit.getField(c.getColId());
+      return fieldDefinition && fieldDefinition.required;
+    }).map(c => c.getColId());
+  }
+  saveSuccess() {
+    this.focusOnCell(this._targetEditionCell);
+    this._lastCellEdited = undefined;
+    this._targetEditionCell = undefined;
+    this._isGridEdition = false;
+  }
+  saveFail(reason) {
+    this.focusOnCell(this._lastCellEdited);
+    this._isGridEdition = false;
+    if (reason) {
+      Promise.reject(reason);
+    }
+  }
+  focusOnCell(cell) {
+    if (cell == undefined) {
+      return;
+    }
+    const { rowIndex, column } = cell;
+    this._gridOptions.api.getDisplayedRowAtIndex(rowIndex).setSelected(true, true);
+    this._gridOptions.api.clearRangeSelection();
+    this._gridOptions.api.addCellRange({ rowStartIndex: rowIndex, rowEndIndex: rowIndex, columns: [column] });
+    this._gridOptions.api.startEditingCell({ colKey: column.getColId(), rowIndex });
+    this._gridOptions.api.setFocusedCell(rowIndex, column.getColId());
+    const cellEditor = this._gridOptions.api.getCellEditorInstances()[0];
+    if (cellEditor) {
+      cellEditor.focusIn();
+    }
+  }
+  onCellKeyDown(event) {
+    const keyboardEvent = event.event;
+    switch (keyboardEvent.key) {
+      case KeyCode.ENTER:
+        this.processEnterKey(keyboardEvent, event);
+        break;
+      case KeyCode.UP:
+        this.editPreviousRow(event.api);
+        break;
+      case KeyCode.DOWN:
+        this.editNextRow(event.api);
+        break;
+    }
+  }
+  processEnterKey(keyboardEvent, event) {
+    const editionCell = event.api.getEditingCells()[0];
+    if (!editionCell) {
+      event.api.startEditingCell({ colKey: event.column.getColId(), rowIndex: event.rowIndex });
+      return;
+    }
+    this.navigateByEnterKey(keyboardEvent);
+  }
+  nextEditionRow(rowIndex, column, backwards) {
+    if (backwards) {
+      rowIndex = rowIndex - 1;
+      if (rowIndex < 0) {
+        rowIndex = this._dataUnit.records.length - 1;
+      }
+    }
+    else {
+      rowIndex = rowIndex + 1;
+      if (rowIndex >= this._dataUnit.records.length) {
+        rowIndex = 0;
+      }
+    }
+    this._targetEditionCell = new TargetEdition(rowIndex, column, true);
+    this.finishEdition();
+  }
+  editPreviousRow(api) {
+    this.moveEditionVertically(api, -1);
+  }
+  editNextRow(api) {
+    this.moveEditionVertically(api, 1);
+  }
+  moveEditionVertically(api, offset) {
+    const editionCell = api.getEditingCells()[0];
+    if (!editionCell) {
+      return;
+    }
+    const rowIndex = editionCell.rowIndex + offset;
+    if (api.getDisplayedRowAtIndex(rowIndex)) {
+      this._targetEditionCell = new TargetEdition(rowIndex, editionCell.column, offset < 0);
+      this.finishEdition();
+    }
+  }
+  finishEdition() {
+    this._gridOptions.api.stopEditing();
+    setTimeout(() => {
+      //O Timeout foi inserido para permitir que o ciclo de finalização prossiga
+      //pois precisamos aguardar o fim da edição para executar o autosave.
+      this.proceedAutoSave();
+    }, 0);
+  }
+  canEdit(params) {
+    if (this._editionIsDisabled()) {
+      return false;
+    }
+    return this.isColEditable(params.colDef.field);
+  }
+  isColEditable(fieldName) {
+    const fieldDefinition = this._dataUnit.getField(fieldName);
+    if (fieldDefinition) {
+      return !fieldDefinition.readOnly;
+    }
+    return false;
+  }
+  isSecondClick(cellClicked) {
+    if (!this._lastCellClicked) {
+      return false;
+    }
+    if (this._lastCellClicked.column != cellClicked.column) {
+      return false;
+    }
+    if (this._lastCellClicked.rowIndex != cellClicked.rowIndex) {
+      return false;
+    }
+    return true;
+  }
+  onCellEditRequest(event) {
+    const fieldName = event.colDef.field;
+    const value = event.newValue;
+    if (event.oldValue != value) {
+      if (value instanceof Promise) {
+        const fieldDescriptor = this._dataUnit.getField(event.colDef.colId);
+        event.node.setData(Object.assign(Object.assign({}, event.data), { [fieldName]: (fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.userInterface) === UserInterface.SEARCH ? value : event.oldValue }));
+        value.then(resolved => event.node.setData(Object.assign(Object.assign({}, event.data), { [fieldName]: resolved })));
+      }
+      else {
+        event.node.setData(Object.assign(Object.assign({}, event.data), { [fieldName]: value }));
+      }
+      this._isGridEdition = true;
+      this._dataUnit.setFieldValue(fieldName, value, [event.data.__record__id__]);
+      this._lastCellEdited = { rowIndex: event.rowIndex, column: event.column, rowPinned: undefined };
+    }
+  }
+}
+class TargetEdition {
+  constructor(rowIndex, column, backwards) {
+    this.rowPinned = null;
+    this.rowIndex = rowIndex;
+    this.column = column;
+    this.backwards = backwards;
+  }
+}
+
 class AgGridController {
   configFilterColumn(filterColumn) {
     this._filterColumn = filterColumn;
@@ -119218,6 +119657,9 @@ class AgGridController {
   getGridConfig() {
     return this._gridConfig;
   }
+  getGridApi() {
+    return this._gridOptions.api;
+  }
   getSort() {
     const sortedColumns = [];
     this._gridOptions.columnApi
@@ -119278,6 +119720,7 @@ class AgGridController {
       this._doubleClickCallBack = options.onDoubleClick;
       this._multipleSelection = options.allowMultipleSelection;
       this._dataUnit = options.dataUnit;
+      this._editionManager = new GridEditionManager(this._dataUnit, options.useEnterLikeTab, options.recordsValidator, options.editionIsDisabled);
       this._statusResolver = options.statusResolver;
       if (this._dataUnit) {
         this._dataUnit.sortingProvider = this;
@@ -119297,12 +119740,14 @@ class AgGridController {
         defaultColDef: {
           headerClass: 'ez-grid__cell-header',
           cellClass: 'ez-grid__cell-body',
+          cellStyle: {
+            height: '100%'
+          }
         },
-        components: {
-          ezGridHeaderComponent: SelectionHeader,
-          ezGridCustomHeader: EzGridCustomHeader,
-        },
+        components: Object.assign({ ezGridHeaderComponent: SelectionHeader, ezGridCustomHeader: EzGridCustomHeader }, this._editionManager.getComponents()),
         context: {
+          editionManager: this._editionManager,
+          dataUnit: this._dataUnit,
           headerCheckStatusGetter: () => this.getSelectionHeaderStatus(),
           headerCheckStatusSetter: (selectAll) => this.updateSelectionForAll(selectAll),
         },
@@ -119310,6 +119755,7 @@ class AgGridController {
       this.defineRowModelType(this._gridOptions, options);
       this.setOptionsEvents(this._gridOptions);
       this.setOptionsSupress(this._gridOptions);
+      this._gridOptions = this._editionManager.configureGrid(this._gridOptions);
       if (this._enterprise) {
         this._grid = new Grid(container, this._gridOptions);
       }
@@ -119456,6 +119902,7 @@ class AgGridController {
     opt.onSelectionChanged = e => this.onSelectionChange(e);
     opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
     opt.onDragStopped = evt => this.onCallStateChange('columnMovedEnd', evt);
+    opt.onCellClicked = evt => this.onCellClicked(evt);
   }
   setOptionsSupress(opt) {
     opt.suppressDragLeaveHidesColumns = true;
@@ -119759,7 +120206,7 @@ class AgGridController {
     else if (propSortable === false) {
       tooltip = 'Coluna não pode ser ordenada';
     }
-    return {
+    return this._editionManager.configureColumn({
       headerName: source.label,
       field: source.name,
       sortable: propSortable,
@@ -119772,10 +120219,19 @@ class AgGridController {
         showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name) }),
       },
       valueFormatter: params => {
+        if (params.value == undefined) {
+          return "";
+        }
+        if (params.value instanceof Promise) {
+          return "Carregando...";
+        }
+        if (this._dataUnit) {
+          return this._dataUnit.getFormattedValue(source.name, params.value);
+        }
         return this.getFormatterByColumn(params, source);
       },
       cellStyle: this.getStyleByColumn(source),
-    };
+    });
   }
   getInitCellStyle() {
     return {
@@ -119848,6 +120304,13 @@ class AgGridController {
         return params.value.toLocaleDateString();
       }
     }
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.ELAPSEDTIME || (source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.TIME) {
+      if (!!params.value) {
+        const maskFormatter = new MaskFormatter("##:##");
+        const formattedValue = String(params.value).padStart(4, '0');
+        return maskFormatter.format(formattedValue);
+      }
+    }
   }
   onCallStateChange(type, e) {
     const finished = !('finished' in e) || e['finished'];
@@ -119862,6 +120325,13 @@ class AgGridController {
       this._columnStateChangeCallback(type, this.getColumnsState(), info);
     }
   }
+  onCellClicked(event) {
+    this._editionManager.verifyClickToEdition(event.api, {
+      rowIndex: event.rowIndex,
+      column: event.column,
+      rowPinned: undefined
+    });
+  }
   isElementResize(e) {
     return e['target'] && e['target'].getAttribute('ref') === 'eResize';
   }
@@ -119879,6 +120349,7 @@ class AgGridController {
     if (this._selectionChangeCallback) {
       clearTimeout(this._selectionChangeDeboucing);
       this._selectionChangeDeboucing = window.setTimeout(() => {
+        this._editionManager.proceedAutoSave();
         if (this._dataUnit) {
           if (event.context.selectionChangeQuietly) {
             const selectionInfo = this._dataUnit;
@@ -120000,6 +120471,9 @@ const EzGrid = class {
     this.dataUnit = undefined;
     this.statusResolver = undefined;
     this.columnfilterDataSource = undefined;
+    this.useEnterLikeTab = false;
+    this.recordsValidator = undefined;
+    this.canEdit = true;
   }
   /**
    * Aplica a definição de colunas.
@@ -120233,6 +120707,9 @@ const EzGrid = class {
       serverURL: this.serverUrl,
       dataUnit: this.dataUnit,
       statusResolver: this.statusResolver,
+      useEnterLikeTab: this.useEnterLikeTab,
+      recordsValidator: this.recordsValidator,
+      editionIsDisabled: () => !this.canEdit
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -120241,6 +120718,11 @@ const EzGrid = class {
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
+    this._container.addEventListener('focusout', (event) => {
+      const api = this._gridController.getGridApi();
+      if (api && !this._container.contains(event.relatedTarget))
+        api.clearFocusedCell();
+    });
   }
   componentWillRender() {
     this.configSelectionCounter();