@sankhyalabs/ezui 7.1.2 → 7.2.0-dev.10

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

@@ -1,14 +1,12 @@
-import { DataType, LockManager, LockManagerOperation, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface, } from '@sankhyalabs/core';
-import { Grid, } from "@ag-grid-community/core";
-import { LicenseManager } from '@ag-grid-enterprise/core';
+import { Action, DataType, LockManager, LockManagerOperation, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface, } from '@sankhyalabs/core';
+import { Grid, ModuleRegistry, } from '@ag-grid-community/core';
+import { EnterpriseCoreModule, LicenseManager } from '@ag-grid-enterprise/core';
 import DataSource from './DataSource';
 import { EzGridCustomHeader } from './components/EzGridCustomHeader';
 import { CellRendererStatus } from './components/cellRendererStatus';
 import SelectionHeader from './components/selectionHeader';
-import { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE, PRESENTATION_COL_ID_PROP_NAME, PRESENTATION_FROM_COL_PROP_NAME } from '../../../../utils/constants';
+import { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE, PRESENTATION_COL_ID_PROP_NAME, PRESENTATION_FROM_COL_PROP_NAME, } from '../../../../utils/constants';
 import GridEditionManager from './GridEditionManager';
-import { ModuleRegistry } from '@ag-grid-community/core';
-import { EnterpriseCoreModule } from '@ag-grid-enterprise/core';
 import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
 import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
@@ -16,6 +14,8 @@ import { MenuModule } from '@ag-grid-enterprise/menu';
 import DOMPurify from 'dompurify';
 import { buildLocaleText } from './utils/buildLocaleText';
 import { agGridLicense } from '../../../../utils/ag-grid-license';
+import { resolveAggFunc } from './utils/AggFunctionResolver';
+import { GRID_COLUMN_DEFAULT_WIDTHS } from './gridColumnDefaultWidths';
 export default class AgGridController {
   configFilterColumn(filterColumn) {
     this._filterColumn = filterColumn;
@@ -41,12 +41,14 @@ export default class AgGridController {
     this.DEFAULT_HEADER_ROW_HEIGHT = 32;
     this.CHECK_BOX_COL_ID = 'checkBoxColumn';
     this.STATUS_COL_ID = 'statusColumn';
+    this.COLUMN_FOOTER_OPER = 'gridFooterOper';
     this.RECORD_ARCHIVE_COL_ID = '__RECORD_ARCHIVE__';
     this.BLOCK_LOAD_DEBOUNCE = 100;
-    this.DEFAULT_FONT_SIZE = 14;
+    this.DEFAULT_FONT_SIZE = 8;
     this.DEFAULT_FONT_SIZE_HTML5 = 32;
-    this.DEFAULT_ICON_SIZE = 12;
-    this.DEFAULT_MAX_SIZE = 200;
+    this.DEFAULT_ICON_SIZE = 40;
+    this.DEFAULT_MAX_SIZE = 300;
+    this.MULTI_VALUES_PROP = '__multiValues';
     this._menuItems = [];
     this._idAttribName = '__record__id__';
     this._gridConfig = [];
@@ -56,6 +58,9 @@ export default class AgGridController {
     this._gridShowDom = false;
     this.peddingExecutionsOnGridShow = [];
     this._lastColsConfig = undefined;
+    this._pinnedBottomDebounceTimer = null;
+    this._pinnedBottomDebounceDelay = 150;
+    this._pinnedBottomPendingArgs = null;
     ModuleRegistry.registerModules([
       EnterpriseCoreModule,
       RangeSelectionModule,
@@ -122,21 +127,24 @@ export default class AgGridController {
         const params = [];
         let isNullIncluded;
         checkedOptions.forEach(option => {
-          const paramName = `PARAM_${column}_${params.length + 1}`;
-          params.push({
-            dataType: dataType === DataType.OBJECT ? DataType.TEXT : dataType,
-            name: paramName,
-            value: option.value,
-          });
-          if (option.value == undefined) {
-            isNullIncluded = true;
-          }
-          else {
-            if (placeholders.length > 0) {
-              placeholders = placeholders + ',';
+          const optionValues = this.resolveColumnFilterValues(option);
+          optionValues.forEach(value => {
+            const paramName = `PARAM_${column}_${params.length + 1}`;
+            params.push({
+              dataType: dataType === DataType.OBJECT ? DataType.TEXT : dataType,
+              name: paramName,
+              value,
+            });
+            if (value == undefined) {
+              isNullIncluded = true;
             }
-            placeholders = `${placeholders}:${paramName}`;
-          }
+            else {
+              if (placeholders.length > 0) {
+                placeholders = placeholders + ',';
+              }
+              placeholders = `${placeholders}:${paramName}`;
+            }
+          });
         });
         return {
           name: `${DISTINCT_FILTER_NAME_PREFIX}${column}`,
@@ -158,6 +166,13 @@ export default class AgGridController {
     }
     return `${columnExpression} in (${placeholders})`;
   }
+  resolveColumnFilterValues(option) {
+    const multiValues = option === null || option === void 0 ? void 0 : option[this.MULTI_VALUES_PROP];
+    if (Array.isArray(multiValues) && multiValues.length > 0) {
+      return multiValues;
+    }
+    return [option.value];
+  }
   initDatagrid(container, options) {
     var _a;
     this._options = options;
@@ -256,6 +271,90 @@ export default class AgGridController {
       this.observer.observe(container);
     }
   }
+  onGridReady(evt) {
+    var _a;
+    this._bottomPinnedRowSubscriber = async (action) => {
+      if (action.type === Action.DATA_LOADED || action.type === Action.PAGINATION_UPDATED) {
+        this.scheduleSetPinnedBottomRow(evt.api, evt.columnApi);
+      }
+    };
+    (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.subscribe(this._bottomPinnedRowSubscriber);
+  }
+  scheduleSetPinnedBottomRow(api, columnApi) {
+    if (!api || !columnApi)
+      return;
+    // atualiza args pendentes
+    this._pinnedBottomPendingArgs = { api, columnApi };
+    // limpa timer anterior
+    if (this._pinnedBottomDebounceTimer != null) {
+      window.clearTimeout(this._pinnedBottomDebounceTimer);
+    }
+    // agenda execução
+    this._pinnedBottomDebounceTimer = window.setTimeout(async () => {
+      this._pinnedBottomDebounceTimer = null;
+      const args = this._pinnedBottomPendingArgs;
+      this._pinnedBottomPendingArgs = null;
+      if (!args)
+        return;
+      try {
+        await this.setPinnedBottomRow(args.api, args.columnApi);
+      }
+      catch (err) {
+        console.error('Erro em setPinnedBottomRow debounced:', err);
+      }
+    }, this._pinnedBottomDebounceDelay);
+  }
+  async setPinnedBottomRow(api, columnApi) {
+    const paginationInfo = this._dataUnit.getPaginationInfo();
+    const loadingInProgress = paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.loadingInProgress;
+    if (!api || !columnApi || loadingInProgress)
+      return;
+    const columns = columnApi.getAllGridColumns();
+    const columnsWithAgg = columns.filter(col => col.getColDef().aggFunc);
+    if (columnsWithAgg.length === 0)
+      return;
+    const accumulators = new Map();
+    columnsWithAgg.forEach(col => {
+      const colId = col.getColId();
+      accumulators.set(colId, { values: [], aggFunc: col.getColDef().aggFunc });
+    });
+    const recordsToAggregate = await this.getAllRecordsToAggregate();
+    recordsToAggregate.forEach(record => {
+      columnsWithAgg.forEach(col => {
+        const colId = col.getColId();
+        const value = record[colId];
+        if (value != null) {
+          accumulators.get(colId).values.push(value);
+        }
+      });
+    });
+    const totalRow = {};
+    accumulators.forEach((acc, colId) => {
+      try {
+        const aggFn = resolveAggFunc(acc.aggFunc);
+        totalRow[colId] = aggFn({ values: acc.values });
+      }
+      catch (error) {
+        console.error(`Erro ao calcular agregação para coluna ${colId}:`, error);
+        totalRow[colId] = null;
+      }
+    });
+    const hasData = Object.values(totalRow).some(value => value !== null && value !== undefined && value !== 0 && !Number.isNaN(value));
+    if (hasData) {
+      api.setPinnedBottomRowData([totalRow]);
+    }
+  }
+  async getAllRecordsToAggregate() {
+    var _a, _b;
+    if ((_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.allRecordsLoader) {
+      return this._dataUnit.allRecordsLoader(this._dataUnit);
+    }
+    const paginationInfo = this._dataUnit.getPaginationInfo();
+    if (!paginationInfo || !paginationInfo.total)
+      return [];
+    const response = await this._dataUnit.dataLoader(this._dataUnit, { limit: paginationInfo.total });
+    return (_b = response.records) !== null && _b !== void 0 ? _b : [];
+  }
   processFormatterCellCallback(params) {
     const column = params.column.getColDef();
     if (typeof column.valueFormatter === 'function') {
@@ -421,6 +520,8 @@ export default class AgGridController {
     opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
     opt.onDragStopped = evt => this.onCallStateChange('columnMovedEnd', evt);
     opt.onCellClicked = evt => this.onCellClicked(evt);
+    opt.onGridReady = evt => this.onGridReady(evt);
+    opt.onModelUpdated = async (evt) => this.scheduleSetPinnedBottomRow(evt.api, evt.columnApi);
   }
   setOptionsSupress(opt) {
     opt.suppressDragLeaveHidesColumns = true;
@@ -943,9 +1044,12 @@ export default class AgGridController {
       tooltip = this._i18n('ez-grid.columnCantBeOrder');
     }
     const presentationFrom = (_d = source === null || source === void 0 ? void 0 : source.props) === null || _d === void 0 ? void 0 : _d.get(PRESENTATION_FROM_COL_PROP_NAME);
+    const initialWidth = this.getInitialColumnWidth(source.userInterface, source.label);
     return this._editionManager.configureColumn({
       headerName: source.label,
       field: source.name,
+      width: initialWidth,
+      aggFunc: this.getAggFunc(source),
       sortable: propSortable,
       resizable: true,
       headerComponent: 'ezGridCustomHeader',
@@ -987,6 +1091,10 @@ export default class AgGridController {
       editable: !((_e = source.props) === null || _e === void 0 ? void 0 : _e.has(PRESENTATION_FROM_COL_PROP_NAME))
     });
   }
+  getAggFunc(column) {
+    var _a, _b;
+    return (_b = (_a = column.props) === null || _a === void 0 ? void 0 : _a.get(this.COLUMN_FOOTER_OPER)) !== null && _b !== void 0 ? _b : column.aggFunc;
+  }
   setHTMLRender(params, source) {
     const htmlSanitized = DOMPurify.sanitize(params.value);
     params.colDef.cellRenderer = (cellParams) => {
@@ -1242,6 +1350,22 @@ export default class AgGridController {
     var _a;
     this.observer.disconnect();
     (_a = this._dataSource) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.handleDestroyBottomPinnedRowSubscriber();
+    this.handleDestroySetBottomPinnedRowDebounce();
+  }
+  handleDestroyBottomPinnedRowSubscriber() {
+    var _a;
+    if (this._bottomPinnedRowSubscriber) {
+      (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._bottomPinnedRowSubscriber);
+      this._bottomPinnedRowSubscriber = null;
+    }
+  }
+  handleDestroySetBottomPinnedRowDebounce() {
+    if (this._pinnedBottomDebounceTimer != null) {
+      clearTimeout(this._pinnedBottomDebounceTimer);
+      this._pinnedBottomDebounceTimer = null;
+      this._pinnedBottomPendingArgs = null;
+    }
   }
   registryListeners() {
     var _a;
@@ -1270,10 +1394,21 @@ export default class AgGridController {
     }
     const field = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
     const label = (_b = field === null || field === void 0 ? void 0 : field.label) !== null && _b !== void 0 ? _b : (_f = (_e = (_d = (_c = this._gridOptions) === null || _c === void 0 ? void 0 : _c.columnApi) === null || _d === void 0 ? void 0 : _d.getColumn(cfgColumn.name)) === null || _e === void 0 ? void 0 : _e.getColDef()) === null || _f === void 0 ? void 0 : _f.headerName;
-    if ((field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH) {
-      return this.DEFAULT_MAX_SIZE;
+    return this.getInitialColumnWidth(field === null || field === void 0 ? void 0 : field.userInterface, label);
+  }
+  getInitialColumnWidth(userInterface, label) {
+    const columnWidthByLabel = this.getColumnWidthByLabel(label);
+    const defaultWidth = this.getDefaultWidthByUserInterface(userInterface);
+    if (!defaultWidth) {
+      return columnWidthByLabel;
+    }
+    return Math.max(defaultWidth, columnWidthByLabel);
+  }
+  getDefaultWidthByUserInterface(userInterface) {
+    if (!userInterface) {
+      return undefined;
     }
-    return this.getColumnWidthByLabel(label);
+    return GRID_COLUMN_DEFAULT_WIDTHS[userInterface];
   }
   getColumnWidthByLabel(label) {
     const labelSize = ((label === null || label === void 0 ? void 0 : label.length) || 0) * this.DEFAULT_FONT_SIZE + this.DEFAULT_ICON_SIZE;

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

@@ -250,13 +250,23 @@ export default class DataSource {
         });
         this._dataUnit.metadata.fields.forEach(f => {
           var _a, _b, _c, _d, _e, _f;
+          if (f.userInterface === UserInterface.IMAGE) {
+            return;
+          }
           if (f.visible !== false && f.name !== this.RECORD_ARCHIVE) {
             const props = new Map();
             const properties = this._dataUnit.getField(f.name).properties;
             for (const value in properties) {
               props.set(value, properties[value]);
             }
-            const col = { label: f.label, name: f.name, userInterface: f.userInterface, options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options, props };
+            const col = {
+              label: f.label,
+              name: f.name,
+              userInterface: f.userInterface,
+              options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options,
+              props,
+              aggFunc: f['aggFunc']
+            };
             columnDefs.push(col);
             if (f.userInterface === UserInterface.SEARCHPLUS && ((_b = f.properties) === null || _b === void 0 ? void 0 : _b.DESCRIPTIONFIELD)) {
               const descriptionField = this.getDescriptionField((_c = f.properties) === null || _c === void 0 ? void 0 : _c.DESCRIPTIONFIELD, (_d = f.properties) === null || _d === void 0 ? void 0 : _d.ENTITYNAME);

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

@@ -0,0 +1,23 @@
+import { UserInterface } from '@sankhyalabs/core';
+/**
+ * Larguras padrão das colunas do grid por tipo de UserInterface
+ */
+export const GRID_COLUMN_DEFAULT_WIDTHS = {
+  [UserInterface.SEARCH]: 200,
+  [UserInterface.SEARCHPLUS]: 100,
+  [UserInterface.DATE]: 120,
+  [UserInterface.DATETIME]: 160,
+  [UserInterface.TIME]: 100,
+  [UserInterface.ELAPSEDTIME]: 100,
+  [UserInterface.DECIMALNUMBER]: 130,
+  [UserInterface.INTEGERNUMBER]: 120,
+  [UserInterface.SWITCH]: 80,
+  [UserInterface.FILE]: 100,
+  [UserInterface.HTML]: 200,
+  [UserInterface.LONGTEXT]: 200,
+  [UserInterface.CHECKBOX]: 80,
+  [UserInterface.OPTIONSELECTOR]: 100,
+  [UserInterface.SHORTTEXT]: 200,
+  [UserInterface.PASSWORD]: 100,
+  [UserInterface.MASKEDTEXT]: 100,
+};

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

@@ -0,0 +1,24 @@
+const BUILTIN_AGG_FUNCS = {
+  "sum": (params) => params.values.reduce((a, b) => Number(a !== null && a !== void 0 ? a : 0) + Number(b !== null && b !== void 0 ? b : 0), 0),
+  avg: (params) => {
+    const valid = params.values.filter(v => v != null && !Number.isNaN(v));
+    return valid.length
+      ? valid.reduce((a, b) => a + b, 0) / valid.length
+      : null;
+  },
+  min: (params) => {
+    const valid = params.values.filter(v => v != null && !Number.isNaN(v));
+    return valid.length ? Math.min(...valid) : null;
+  },
+  max: (params) => Math.max(...params.values.filter(v => v != null && !Number.isNaN(v))),
+  count: (params) => params.values.filter(v => v != null).length
+};
+export function resolveAggFunc(aggFunc) {
+  if (typeof aggFunc === 'function')
+    return aggFunc;
+  const fn = BUILTIN_AGG_FUNCS[aggFunc];
+  if (!fn) {
+    throw new Error(`aggFunc "${aggFunc}" não suportada`);
+  }
+  return fn;
+}

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

@@ -59,10 +59,8 @@
   outline: none;
 
   /*public*/
-  box-shadow: var(--ez-grid__container--shadow);
   background-color: var(--ez-grid__header--background-color);
-  border: var(--border--small) var(--color--strokes);
-  border-radius: var(--border--radius-small);
+  border-radius: var(--border--radius-12, 12px) var(--border--radius-12, 12px) 0 0;
 }
 
 .grid__container.no-scroll{
@@ -142,30 +140,10 @@
   padding: 0;
 }
 
-.grid-header__pagination{
-  justify-content: flex-end;
-  flex-wrap: nowrap;
-  flex-shrink: 1;
-  flex-grow: 1;
-}
-
-.grid-header__pagination-label {
-  width: 100%;
-  white-space: nowrap
-}
-
 .overflowed {
   display: none;
 }
 
-.pagination-contracted {
-  width: 100px;
-}
-
-.pagination-expanded{
-  min-width: 150px;
-}
-
 .left__header-contracted {
   width: auto;
 }
@@ -176,41 +154,4 @@
 
 .grid__footer{
   background-color: var(--background--xlight, #FFF);
-  border-radius: 0 0 var(--border--radius-medium) var(--border--radius-medium);
-  box-shadow: var(--shadow--small);
-}
-
-.cancel-pagination{
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-  padding: 8px;
-  width: 180px;
-}
-
-.cancel-pagination-btn{
-  color: var(--color--error);
-  font-size: var(--text--medium);
-  font-weight: var(--text-weight--large);
-  font-family: var(--font-pattern, Roboto);
-  text-wrap: nowrap;
-  cursor: pointer;
-}
-
-.spin {
-  animation-name: spin;
-  animation-duration: 5000ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-}
-
-@keyframes spin {
-  from {
-    transform:rotate(0deg);
-  }
-  to {
-    transform:rotate(360deg);
-  }
 }