ods-component-lib 1.18.165 → 1.18.167

package/dist/components/devextreme/OdsMasterDetailDataGrid/OdsMasterDetailDataGrid.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { IMasterDetailGridProps } from "./types";
+declare const MasterDetailDataGrid: React.FC<IMasterDetailGridProps>;
+export default MasterDetailDataGrid;

package/dist/components/devextreme/OdsMasterDetailDataGrid/handlers/OnActionButtons.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Custom React hook that determines which action buttons to display based on the edit state and the number of buttons.
+ * It limits the number of visible action buttons to the first two if there are more than three and editing is not active.
+ *
+ * @param {Array} actionButtonGroup - Array of all action button configurations.
+ * @param {boolean|Object} edit - Indicates if the edit mode is active, which may affect the visibility of action buttons.
+ * @returns {Array} A subset of action buttons based on the provided conditions.
+ */
+export declare function useActionButtons(actionButtonGroup: any, edit: any): any;

package/dist/components/devextreme/OdsMasterDetailDataGrid/handlers/OnActionCellRenderHandler.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { IActionButtonsTooltipType, IButtonGrouOptions, IEditingOptions } from "../types";
+/**
+ * Custom hook that returns a callback function for rendering action buttons in a cell.
+ * @param visibleActionButtons - An array of options for visible action buttons.
+ * @param actionButtonGroup - An array of options for action buttons.
+ * @param edit - An object containing editing options.
+ * @param tooltipType - The type of tooltip to display.
+ * @returns The onActionCellRender callback function.
+ */
+export declare const useOnActionCellRenderHandler: (visibleActionButtons: IButtonGrouOptions[] | undefined, actionButtonGroup: IButtonGrouOptions[] | undefined, edit?: IEditingOptions | undefined, actionButtonsTooltipType?: IActionButtonsTooltipType | undefined) => (cellData: any | undefined) => React.JSX.Element;

package/dist/components/devextreme/OdsMasterDetailDataGrid/handlers/OnExportingHandler.d.ts

@@ -0,0 +1,10 @@
+import { IExportOptions } from "../types";
+/**
+ * Handles the exporting of data from the grid component.
+ *
+ * @param {IExportOptions} exportProps - The export options for the data grid.
+ * @param {Function} callback - The callback function to be executed after exporting.
+ * @param {() => string} getSummary - The callback function to get the summary info.
+ * @returns {Function} - The onExporting event handler function.
+ */
+export declare const useOnExportingHandler: (exportProps: IExportOptions, getSummary: () => string, callback?: Function) => (e: any) => void;

package/dist/components/devextreme/OdsMasterDetailDataGrid/types.d.ts

@@ -0,0 +1,91 @@
+/// <reference types="react" />
+import { IButtonProps, IColumnProps, IEditingProps, IExportProps, IScrollingProps, ISummaryProps } from "devextreme-react/data-grid";
+import { ButtonType } from "devextreme/common";
+export interface IColumnOptions extends Omit<IColumnProps, "cellRender" | "calculateFilterExpression" | "format"> {
+    cellRender?: (data: any) => JSX.Element | string;
+    calculateFilterExpression?: (value: any, operation: string, target: string) => any;
+    format?: string | object;
+    allowFiltering?: boolean;
+}
+export interface IActionButton {
+    icon: JSX.Element;
+    visible: boolean;
+    disabled: boolean;
+    hint: string;
+    onClick?: () => void;
+}
+export interface IMasterDetailOptions {
+    enabled?: boolean;
+    component?: (row: any) => JSX.Element;
+    autoExpandAll?: boolean;
+}
+export interface IMasterDetailFeatures {
+    allowActions?: boolean;
+    createFilter?: boolean;
+    showCheckbox?: boolean;
+    exportEnabled?: boolean;
+    toolbarItems?: React.ReactNode[];
+    dynamicHeight?: boolean;
+    columnChooser?: boolean;
+    maxHeight?: number;
+    detailData?: any[];
+    exportProps?: IExportOptions;
+    actionColumnEnable?: boolean;
+    detailGridColumns?: IColumnOptions[];
+    pageSize?: number;
+    showSearchPanel?: boolean;
+    masterActionButtonGroup?: IActionButton[];
+    detailToolbar?: (e: any) => void;
+}
+export interface IMasterDetailDatas {
+    detailData?: any;
+    detailGridColumns?: IColumnOptions[];
+}
+export interface IMasterDetailGridProps {
+    columns?: IColumnOptions[];
+    dataSource: any[];
+    masterDetailFeatures?: IMasterDetailFeatures;
+    masterDetailData?: IMasterDetailDatas;
+}
+export interface IButtonGrouOptions extends Omit<IButtonProps, "name"> {
+    name?: "cancel" | "delete" | "edit" | "save" | "undelete" | "unmap";
+    type?: ButtonType;
+    label?: string;
+    onclick?: React.MouseEventHandler<HTMLElement>;
+    actionPermission?: boolean;
+    icon: any;
+}
+export interface IScrollingOptions extends Partial<IScrollingProps> {
+}
+export declare type IActionButtonsTooltipType = "raw" | "styled";
+export interface ISummaryRowOptions {
+    summaryLoadedDataLabel?: string;
+    summaryTotalDataLabel?: string;
+    summaryFilteredDataLabel?: string;
+    summaryItems?: ISummaryProps[];
+    summaryTotalCount?: number;
+    summaryTotalPageCountLabel?: string;
+    showSumInSummary?: boolean;
+    showAvgInSummary?: boolean;
+    showCountInSummary?: boolean;
+    showMaxInSummary?: boolean;
+    showMinInSummary?: boolean;
+    summarySumLabel?: string;
+    summaryAvgLabel?: string;
+    summaryMinLabel?: string;
+    summaryMaxLabel?: string;
+    summaryCountLabel?: string;
+}
+export interface IEditingOptions extends Omit<IEditingProps, "mode"> {
+    mode?: "row" | "cell" | "batch";
+    formItems?: any[];
+    title?: string;
+}
+export interface IExportOptions extends Partial<IExportProps> {
+    enabled: boolean;
+    allowExportSelectedData?: boolean;
+    fileName?: string;
+    selectedText?: string;
+    activeText?: string;
+    passiveText?: string;
+}

package/dist/index.d.ts

@@ -54,6 +54,7 @@ import OdsBasicDataGrid from "./components/devextreme/OdsBasicDataGrid/OdsBasicD
 import OdsTransfer from "./components/devextreme/OdsTransfer";
 import OdsServerSideDatagrid from "./components/devextreme/OdsServerSideDatagrid/OdsServerSideDatagrid";
 import OdsInlineEditDataGrid from "./components/devextreme/OdsInlineEditDataGrid/OdsInlineEditDataGrid";
+import OdsMasterDetailDataGrid from "./components/devextreme/OdsMasterDetailDataGrid/OdsMasterDetailDataGrid";
 export { OdsButton };
 export { OdsInput };
 export { OdsDropdownButton };
@@ -89,6 +90,7 @@ export { OdsTimeline };
 export { OdsRangeTimepicker };
 export { OdsInputNumber };
 export { OdsPhoneInput };
+export { OdsMasterDetailDataGrid };
 export { OdsText };
 export { OdsTitle };
 export { OdsParagraph };

package/dist/index.js

@@ -32975,7 +32975,7 @@ var ExportDataGridToExcel = function ExportDataGridToExcel(_ref) {
             horizontal: 'left'
           };
         }
-        if (gridCell.rowType === "data" && gridCell.column.dataType === "boolean" && gridCell.column.dataField.toLowerCase() === "isactive") {
+        if (gridCell.column.dataField.toLowerCase() === "isactive") {
           excelCell.value = gridCell.value === true ? "" + activeText : "" + passiveText;
         }
       }
@@ -33707,6 +33707,7 @@ var OdsBasicDataGrid = function OdsBasicDataGrid(props) {
       key: col.dataField
     }, col, {
       minWidth: 50,
+      width: 160,
       cssClass: col.cssClass + " " + (hasFastUpdate ? "grid-cell-disable-text-selection" : "")
     }), col.lookUp && React__default.createElement(devextremeReact.Lookup, Object.assign({}, col.lookUp)), (col.dataField === "IsActive" || col.dataField === "isActive") && React__default.createElement(DataGrid.HeaderFilter, {
       dataSource: [{
@@ -34527,6 +34528,11 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     var currentPageIndex = dataGridInstance.pageCount();
     var currentTotalCount = currentPageIndex == 0 ? 50 : dataGridInstance.totalCount();
     var newData = dataGridInstance === null || dataGridInstance === void 0 ? void 0 : (_dataGridInstance$get = dataGridInstance.getDataSource()) === null || _dataGridInstance$get === void 0 ? void 0 : _dataGridInstance$get.items();
+    if (filterApplied) {
+      totalFilteredCount.current = currentTotalCount;
+    } else {
+      totalUnfilteredCount.current = currentTotalCount;
+    }
     if ((!filterApplied && currentPageIndex == 1 && currentTotalCount != totalUnfilteredCount.current || lastPageIndexRef.current !== currentPageIndex) && newData && newData.length > 0) {
       setCurrentPage(currentPageIndex);
       setCurrentPageSize(dataGridInstance.pageSize());
@@ -34536,16 +34542,6 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
       });
       lastPageIndexRef.current = currentPageIndex;
     }
-    if (currentTotalCount > 0) {
-      if (filterApplied) {
-        totalFilteredCount.current = currentTotalCount;
-      } else {
-        totalUnfilteredCount.current = currentTotalCount;
-      }
-      if (!filterApplied && totalFilteredCount.current === 0) {
-        totalFilteredCount.current = totalUnfilteredCount.current;
-      }
-    }
   }, [props.columns, filterApplied]);
   var handleOptionChanged = React.useCallback(function (e) {
     var dataGrid = props.dataGridRef.current.instance;
@@ -34766,7 +34762,8 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     return React__default.createElement(DataGrid.Column, Object.assign({
       key: col.dataField
     }, col, {
-      minWidth: 10
+      minWidth: 10,
+      width: 160
     }), col.lookUp && React__default.createElement(devextremeReact.Lookup, Object.assign({}, col.lookUp)), col.dataField === "IsActive" && React__default.createElement(DataGrid.HeaderFilter, {
       dataSource: [{
         text: "Active",
@@ -34929,17 +34926,17 @@ var useOnContentReadyHandler = function useOnContentReadyHandler(columns, lastPa
     var currentPageIndex = dataGridInstance.pageIndex();
     var currentTotalCount = dataGridInstance.totalCount();
     var newData = dataGridInstance === null || dataGridInstance === void 0 ? void 0 : (_dataGridInstance$get = dataGridInstance.getDataSource()) === null || _dataGridInstance$get === void 0 ? void 0 : _dataGridInstance$get.items();
+    if (filterApplied) {
+      totalFilteredCount.current = currentTotalCount;
+    } else {
+      totalUnfilteredCount.current = currentTotalCount;
+    }
+    if (!filterApplied && totalFilteredCount.current === 0) {
+      totalFilteredCount.current = totalUnfilteredCount.current;
+    }
     if (lastPageIndexRef.current !== currentPageIndex && newData && newData.length > 0) {
       setCurrentPage(currentPageIndex);
       setCurrentPageSize(dataGridInstance.pageSize());
-      if (filterApplied) {
-        totalFilteredCount.current = currentTotalCount;
-      } else {
-        totalUnfilteredCount.current = currentTotalCount;
-      }
-      if (!filterApplied && totalFilteredCount.current === 0) {
-        totalFilteredCount.current = totalUnfilteredCount.current;
-      }
       setUpdateTrigger(function (prev) {
         return !prev;
       });
@@ -35187,7 +35184,8 @@ var OdsInlineEditDataGrid = function OdsInlineEditDataGrid(props) {
       return React__default.createElement(DataGrid.Column, Object.assign({
         key: col.dataField
       }, col, {
-        minWidth: 10
+        minWidth: 10,
+        width: 160
       }), col.lookup && React__default.createElement(DataGrid.Lookup, Object.assign({}, col.lookup)), col.headerFilter && React__default.createElement(DataGrid.HeaderFilter, Object.assign({}, col.headerFilter, {
         visible: true,
         allowSearch: true
@@ -35279,6 +35277,193 @@ var OdsInlineEditDataGrid = function OdsInlineEditDataGrid(props) {
   }, React__default.createElement("p", null, renderTotal())));
 };
 
+var useOnActionCellRenderHandler$1 = function useOnActionCellRenderHandler(visibleActionButtons, actionButtonGroup, edit, actionButtonsTooltipType) {
+  var onActionCellRender = React.useCallback(function (cellData) {
+    if (!cellData || !visibleActionButtons) return null;
+    var kebabMenuButtons = actionButtonGroup && actionButtonGroup.length >= 2 && !edit ? actionButtonGroup.slice(2).map(function (button) {
+      return {
+        icon: button.icon,
+        onClick: function onClick(event) {
+          var customEvent = {
+            column: cellData.column,
+            component: cellData.component,
+            element: cellData.element,
+            event: event,
+            model: cellData.data,
+            row: cellData.row
+          };
+          button.onClick(customEvent);
+        }
+      };
+    }) : [];
+    var buttonElements = visibleActionButtons.map(function (buttonItem) {
+      var isVisible = typeof buttonItem.visible === "function" ? buttonItem.visible({
+        column: cellData.column,
+        component: cellData.component,
+        row: cellData.row
+      }) : buttonItem.visible;
+      return React__default.createElement(OdsDataGrdiRowButton, Object.assign({
+        key: "action-button-" + buttonItem.name,
+        name: buttonItem.name,
+        hint: buttonItem.hint,
+        visible: isVisible,
+        size: "small",
+        type: "text",
+        disabled: buttonItem.actionPermission === undefined ? false : !buttonItem.actionPermission,
+        icon: buttonItem.icon
+      }, actionButtonsTooltipType === "styled" && {
+        tooltip: buttonItem.hint
+      }, {
+        onClick: function onClick(event) {
+          if (buttonItem.onClick) {
+            var customEvent = {
+              column: cellData.column,
+              component: cellData.component,
+              element: cellData.element,
+              event: event,
+              model: cellData.data,
+              row: cellData.row
+            };
+            buttonItem.onClick(customEvent);
+          }
+        }
+      }));
+    });
+    if (kebabMenuButtons.length > 0) {
+      buttonElements.push(React__default.createElement(OdsDropdown, {
+        key: "dropdown-" + (cellData.rowIndex || cellData.data.ID),
+        menuItems: kebabMenuButtons
+      }, React__default.createElement(OdsDataGrdiRowButton, {
+        type: "text",
+        icon: React__default.createElement(DynamicIcon, {
+          iconName: "kebabMenu"
+        })
+      })));
+    }
+    return React__default.createElement(React__default.Fragment, null, buttonElements);
+  }, [visibleActionButtons]);
+  return onActionCellRender;
+};
+
+var useOnExportingHandler$1 = function useOnExportingHandler(exportProps, getSummary, callback) {
+  var onExporting = React.useCallback(function (e) {
+    if (exportProps) {
+      var _exportProps$fileName, _exportProps$activeTe, _exportProps$passiveT;
+      ExportDataGridToExcel({
+        gridComponent: e.component,
+        baseFileName: (_exportProps$fileName = exportProps.fileName) != null ? _exportProps$fileName : "DataGrid",
+        selectedText: exportProps.selectedText,
+        getSummary: getSummary,
+        selectedRowsOnly: e.selectedRowsOnly,
+        activeText: (_exportProps$activeTe = exportProps.activeText) != null ? _exportProps$activeTe : "Active",
+        passiveText: (_exportProps$passiveT = exportProps.passiveText) != null ? _exportProps$passiveT : "Passive"
+      });
+    }
+    if (callback) {
+      callback(e);
+    }
+  }, [getSummary]);
+  return onExporting;
+};
+
+var MasterDetailDataGrid = function MasterDetailDataGrid(_ref) {
+  var columns = _ref.columns,
+    dataSource = _ref.dataSource,
+    _ref$masterDetailFeat = _ref.masterDetailFeatures,
+    masterDetailFeatures = _ref$masterDetailFeat === void 0 ? {} : _ref$masterDetailFeat,
+    masterDetailData = _ref.masterDetailData;
+  var visibleActionButtons = React.useMemo(function () {
+    if (masterDetailFeatures.masterActionButtonGroup && masterDetailFeatures.masterActionButtonGroup.length >= 2) {
+      return masterDetailFeatures.masterActionButtonGroup.slice(0, 2);
+    }
+    return masterDetailFeatures.masterActionButtonGroup || [];
+  }, [masterDetailFeatures.masterActionButtonGroup]);
+  var onActionCellRender = useOnActionCellRenderHandler$1(visibleActionButtons, masterDetailFeatures.masterActionButtonGroup);
+  var getTotalDataCount = function getTotalDataCount() {
+    return "" + dataSource.length;
+  };
+  var handleExporting = useOnExportingHandler$1(masterDetailFeatures.exportProps, getTotalDataCount);
+  var effectiveColumns = (masterDetailData === null || masterDetailData === void 0 ? void 0 : masterDetailData.detailGridColumns) || columns || (dataSource[0] ? Object.keys(dataSource[0]).map(function (key) {
+    return {
+      dataField: key,
+      caption: key.charAt(0).toUpperCase() + key.slice(1),
+      allowFiltering: true
+    };
+  }) : []);
+  return React__default.createElement(DataGrid__default, {
+    style: {
+      maxHeight: masterDetailFeatures.maxHeight ? masterDetailFeatures.maxHeight + "px" : "400px",
+      overflow: "auto"
+    },
+    dataSource: dataSource,
+    showBorders: true,
+    columnAutoWidth: true,
+    allowColumnReordering: true,
+    selection: {
+      mode: masterDetailFeatures.showCheckbox ? "multiple" : "none"
+    },
+    paging: {
+      enabled: true,
+      pageSize: masterDetailFeatures.pageSize || 20
+    },
+    filterRow: {
+      visible: masterDetailFeatures.createFilter
+    },
+    onExporting: handleExporting,
+    onToolbarPreparing: masterDetailFeatures.detailToolbar
+  }, effectiveColumns.map(function (col) {
+    return React__default.createElement(DataGrid.Column, Object.assign({
+      key: col.dataField
+    }, col, {
+      headerFilter: {
+        visible: col.allowFiltering
+      }
+    }));
+  }), React__default.createElement(DataGrid.ColumnChooser, {
+    enabled: masterDetailFeatures.columnChooser,
+    mode: "select"
+  }, React__default.createElement(DataGrid.Position, {
+    my: "right top",
+    at: "right bottom",
+    of: document.querySelector("." + "props.dataGridPageName") ? "." + "props.dataGridPageName" + " .dx-datagrid-column-chooser-button" : ".dx-datagrid-column-chooser-button"
+  }), React__default.createElement(DataGrid.ColumnChooserSearch, {
+    enabled: true,
+    editorOptions: {
+      placeholder: ""
+    }
+  }), React__default.createElement(DataGrid.HeaderFilter, {
+    visible: true
+  }), React__default.createElement(DataGrid.ColumnChooserSelection, {
+    allowSelectAll: true,
+    selectByClick: true,
+    recursive: true
+  })), (masterDetailFeatures === null || masterDetailFeatures === void 0 ? void 0 : masterDetailFeatures.exportEnabled) && React__default.createElement(DataGrid.Export, Object.assign({}, masterDetailFeatures.exportProps)), masterDetailFeatures.actionColumnEnable && React__default.createElement(DataGrid.Column, {
+    dataField: "Actions",
+    caption: "",
+    minWidth: 10,
+    width: 160,
+    fixed: true,
+    allowSorting: false,
+    type: "buttons",
+    showInColumnChooser: false,
+    cellRender: onActionCellRender
+  }), React__default.createElement(DataGrid.FilterRow, {
+    visible: masterDetailFeatures.createFilter
+  }), React__default.createElement(DataGrid.Selection, {
+    mode: masterDetailFeatures.showCheckbox ? "multiple" : "none"
+  }), React__default.createElement(DataGrid.SearchPanel, {
+    visible: masterDetailFeatures.showSearchPanel
+  }), React__default.createElement(DataGrid.Toolbar, null, React__default.createElement(DataGrid.Item, {
+    name: "searchPanel"
+  }), React__default.createElement(DataGrid.Item, {
+    name: "columnChooserButton",
+    cssClass: "toolbarPanelItems"
+  }), React__default.createElement(DataGrid.Item, {
+    name: "exportButton",
+    cssClass: "toolbarPanelItems"
+  })));
+};
+
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -36957,6 +37142,7 @@ exports.OdsInput = OdsInput;
 exports.OdsInputNumber = OdsInputNumber;
 exports.OdsLink = OdsLink;
 exports.OdsList = OdsList;
+exports.OdsMasterDetailDataGrid = MasterDetailDataGrid;
 exports.OdsModal = OdsModal;
 exports.OdsModalOld = OdsModalOld;
 exports.OdsMultiSelect = OdsMultiSelect;