@sankhyalabs/ezui 7.2.0 → 7.3.0

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

@@ -1,12 +1,14 @@
-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 { 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 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';
@@ -14,8 +16,6 @@ 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,13 +41,12 @@ 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 = 8;
+    this.DEFAULT_FONT_SIZE = 14;
     this.DEFAULT_FONT_SIZE_HTML5 = 32;
-    this.DEFAULT_ICON_SIZE = 40;
-    this.DEFAULT_MAX_SIZE = 300;
+    this.DEFAULT_ICON_SIZE = 12;
+    this.DEFAULT_MAX_SIZE = 200;
     this.MULTI_VALUES_PROP = '__multiValues';
     this._menuItems = [];
     this._idAttribName = '__record__id__';
@@ -58,9 +57,6 @@ 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,
@@ -271,90 +267,6 @@ 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') {
@@ -520,8 +432,6 @@ 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;
@@ -1044,12 +954,9 @@ 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',
@@ -1091,10 +998,6 @@ 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) => {
@@ -1217,13 +1120,12 @@ export default class AgGridController {
     }
   }
   onCallStateChange(type, e) {
-    var _a, _b;
     const finished = !('finished' in e) || e['finished'];
     if (finished && this._columnStateChangeCallback) {
       let info = {};
       let isUserChange = this.isUIEvent(e['source'], e['type']);
       if (type === 'columnResize') {
-        info['column'] = { colId: (_a = e['column']) === null || _a === void 0 ? void 0 : _a.colId, actualWidth: (_b = e['column']) === null || _b === void 0 ? void 0 : _b.actualWidth };
+        info['column'] = { colId: e['column'].colId, actualWidth: e['column'].actualWidth };
       }
       info['isUserChange'] = isUserChange;
       info['isElementResize'] = this.isElementResize(e);
@@ -1351,22 +1253,6 @@ 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;
@@ -1395,21 +1281,10 @@ 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;
-    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;
+    if ((field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH) {
+      return this.DEFAULT_MAX_SIZE;
     }
-    return GRID_COLUMN_DEFAULT_WIDTHS[userInterface];
+    return this.getColumnWidthByLabel(label);
   }
   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,23 +250,13 @@ 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,
-              aggFunc: f['aggFunc']
-            };
+            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 };
             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/ez-grid.css

@@ -59,8 +59,10 @@
   outline: none;
 
   /*public*/
+  box-shadow: var(--ez-grid__container--shadow);
   background-color: var(--ez-grid__header--background-color);
-  border-radius: var(--border--radius-12, 12px) var(--border--radius-12, 12px) 0 0;
+  border: var(--border--small) var(--color--strokes);
+  border-radius: var(--border--radius-small);
 }
 
 .grid__container.no-scroll{
@@ -138,15 +140,32 @@
 :host[no-header] .grid-header {
   height: 0;
   padding: 0;
-  border: none;
-  box-shadow: none;
-  outline: none;
+}
+
+.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;
 }
@@ -157,5 +176,41 @@
 
 .grid__footer{
   background-color: var(--background--xlight, #FFF);
-  border-radius: 0px 0px var(--border--radius-medium) var(--border--radius-medium);
+  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);
+  }
 }