@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/base/TMCounterBar.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import TMTooltip from './TMTooltip';
+import styled from 'styled-components';
+const StyledList = styled.div `
+    background-color: #f0f0f0;
+    display: flex;
+    align-items: center;
+    /* border: 1px solid #dadada; */
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-top: 0;
+    width: 100%;
+    margin-top: -3px;
+`;
+const StyledListItem = styled.div `
+    display: flex;
+    align-items: center;
+    border-right: 1px dashed lightgray;
+    padding: 4px 12px;
+    gap: 3px;
+    transition: all .5s ease-in;
+    &:hover {
+        background-color: white;
+        svg, span {
+            color: orange;
+        }
+    }
+    svg {
+        margin-right: 3px;
+        font-size: 12px;
+        color: gray;
+	}
+    span {
+        color: gray;
+        cursor: default;
+    }
+`;
+const TMCounterBar = ({ items }) => {
+    return (_jsx(StyledList, { children: parseInt(items[0].text) !== -1 && items.map((item, index) => {
+            return _jsx(TMTooltip, { content: item.tooltip, children: _jsxs(StyledListItem, { children: [" ", item.icon, _jsx("span", { children: item.text })] }) }, index);
+        }) }));
+};
+export default TMCounterBar;

package/lib/components/base/TMCounterContainer.d.ts

@@ -0,0 +1,23 @@
+export declare enum CounterItemKey {
+    allItems = "allItems",
+    visibleItems = "visibleItems",
+    selectedItems = "selectedItems"
+}
+export interface ITMCounterItemData {
+    key?: string;
+    show: boolean;
+    caption?: string;
+    icon?: JSX.Element;
+    value?: number | string;
+    order?: number;
+}
+export interface ITMCounterContainerProps {
+    show?: boolean;
+    items?: Map<string, ITMCounterItemData>;
+    bgColorContainer?: string;
+    bgColorItem?: string;
+    textColorItem?: string;
+    hoverColorItem?: string;
+}
+declare const TMCounterContainer: (props: ITMCounterContainerProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export default TMCounterContainer;

package/lib/components/base/TMCounterContainer.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import TMTooltip from './TMTooltip';
+/* Styled container component that holds all counter items */
+const Container = styled.div `
+    background: ${({ bgColor }) => bgColor || 'linear-gradient(to right, #f8f9fa, #e9ecef)'};
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 4px 8px;
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
+    gap: 8px;
+`;
+/* Styled counter item component with customizable styles */
+const Counter = styled.div `
+    display: flex;
+    align-items: center;
+    border-right: 1px solid rgba(211, 211, 211, 0.5);
+    padding: 4px 10px;
+    gap: 8px;
+    transition: all 0.3s ease-in-out;
+    background: ${({ color }) => color || 'rgba(255, 255, 255, 0.6)'};
+    
+    &:last-child {
+        border-right: none;
+    }
+
+    svg {
+        color: ${({ textColor }) => textColor || '#495057'};
+        transition: color 0.3s ease-in-out;
+    }
+
+    span {
+        color: ${({ textColor }) => textColor || '#495057'};
+        transition: color 0.3s ease-in-out;
+    }
+`;
+/* Enum for possible counter item keys */
+export var CounterItemKey;
+(function (CounterItemKey) {
+    /* Key for all item count */
+    CounterItemKey["allItems"] = "allItems";
+    /* Key for visible item count */
+    CounterItemKey["visibleItems"] = "visibleItems";
+    /* Key for selected item count */
+    CounterItemKey["selectedItems"] = "selectedItems";
+})(CounterItemKey || (CounterItemKey = {}));
+;
+;
+const TMCounterContainer = (props) => {
+    const { items, bgColorContainer, hoverColorItem, bgColorItem, textColorItem } = props;
+    return (items && _jsx(Container, { bgColor: bgColorContainer, children: [...items.values()].map((item) => {
+            if (!item.show)
+                return null;
+            return _jsx(TMTooltip, { content: item.caption ?? '', children: _jsxs(Counter, { bgColor: bgColorContainer, color: bgColorItem, hoverColor: hoverColorItem, textColor: textColorItem, children: [item.icon ?? null, _jsx("span", { children: item.value?.toString() ?? '' })] }) }, item.key ?? '');
+        }) }));
+};
+export default TMCounterContainer;

package/lib/components/base/TMDataGrid.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { IColumnProps, IDataGridOptions, IMasterDetailProps } from 'devextreme-react/data-grid';
+import dxDataGrid from 'devextreme/ui/data_grid';
+import { ITMCounterContainerProps } from './TMCounterContainer';
+export interface TMDataGridContextMenuItem {
+    text: string;
+    icon: string;
+    onClick?: (param?: any) => void;
+    operationType?: 'singleRow' | 'multiRow';
+    disabled?: boolean;
+    visible?: boolean;
+    id?: string;
+    items?: Array<TMDataGridContextMenuItem>;
+    beginGroup?: boolean;
+}
+export declare enum TMDataGridPageSize {
+    Small = 30,
+    Medium = 50,
+    Large = 100
+}
+export interface TMDataGridProps<T> extends IDataGridOptions {
+    /** An ID of grid */
+    id?: string;
+    /** An array of grid columns */
+    dataColumns: Array<IColumnProps>;
+    /** Specifies initially or currently focused grid row's key */
+    focusedRowKey: number | undefined;
+    /** Allows you to select rows or determine which rows are selected. Applies only if selection.deferred is false */
+    selectedRowKeys?: Array<number>;
+    /** Defines the number of rows per page in the data grid (Small = 30 rows, Medium = 50 rows, Large = 100 rows) */
+    pageSize?: TMDataGridPageSize;
+    /** Configures the search panel position in the toolbar */
+    searchPanelToolbarPosition?: 'before' | 'default';
+    /** if visible, set focus on SearchPanel */
+    searchPanelFocusStarting?: boolean;
+    /** Show the header filter */
+    showHeaderFilter?: boolean;
+    /** Show the filter panel */
+    showFilterPanel?: boolean;
+    /** Show the load panel */
+    showLoadPanel?: boolean;
+    /** Show the column chooser */
+    showColumnChooser?: boolean;
+    /** Show the search panel */
+    showSearchPanel?: boolean;
+    /** Show the group panel */
+    showGroupPanel?: boolean;
+    /** Counter configuration */
+    counterConfig?: ITMCounterContainerProps;
+    /** Master Detail */
+    masterDetail?: IMasterDetailProps;
+    /** On Has Filters Change */
+    onHasFiltersChange?: (hasFilters: boolean) => void;
+}
+declare const TMDataGrid: React.ForwardRefExoticComponent<TMDataGridProps<unknown> & React.RefAttributes<dxDataGrid<any, any>>>;
+export default TMDataGrid;

package/lib/components/base/TMDataGrid.js

@@ -0,0 +1,237 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail } from 'devextreme-react/data-grid';
+import DataSource from 'devextreme/data/data_source';
+import { IconAll, IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
+import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
+;
+export var TMDataGridPageSize;
+(function (TMDataGridPageSize) {
+    TMDataGridPageSize[TMDataGridPageSize["Small"] = 30] = "Small";
+    TMDataGridPageSize[TMDataGridPageSize["Medium"] = 50] = "Medium";
+    TMDataGridPageSize[TMDataGridPageSize["Large"] = 100] = "Large";
+})(TMDataGridPageSize || (TMDataGridPageSize = {}));
+const TMDataGrid = React.forwardRef((props, ref) => {
+    const { 
+    // main properties
+    keyExpr = 'id', dataSource, focusedRowEnabled = true, hoverStateEnabled = true, focusedRowKey, selectedRowKeys = [], 
+    // custom options
+    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusStarting = false, counterConfig = { show: false, items: new Map() }, onHasFiltersChange, 
+    // events and callbacks
+    onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onCellDblClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, onKeyDown, scrolling = { mode: 'standard', useNative: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1 }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, columnChooser, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
+    // other properties
+    disabled = false, autoNavigateToFocusedRow = true, columnResizingMode = 'widget', columnHidingEnabled = true, columnAutoWidth = true, allowColumnResizing = true, allowColumnReordering = true, showBorders = true, showRowLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines === 1, showColumnLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines === 1, showColumnHeaders = true, rowAlternationEnabled = false, wordWrapEnabled = false, noDataText, 
+    // styles
+    id, width = '100%', height = '100%', } = props;
+    const internalRef = React.useRef(null);
+    useImperativeHandle(ref, () => internalRef.current);
+    const [counterValues, setCounterValues] = useState(new Map());
+    const [totalRecordCount, setTotalRecordCount] = useState(0);
+    const [visibleItemsCount, setVisibleItemsCount] = useState(0);
+    const [hasFilters, setHasFilters] = useState(false);
+    useEffect(() => {
+        const count = getRecordCount(dataSource);
+        setTotalRecordCount(count);
+    }, [dataSource]);
+    // Creating a ref to store the timestamp of the last selection change
+    const lastSelectionChangeTime = useRef(Date.now());
+    useEffect(() => {
+        if (counterConfig.show) {
+            const defaultCounterItems = new Map([
+                [
+                    CounterItemKey.allItems,
+                    { key: CounterItemKey.allItems, show: true, caption: SDKUI_Localizator.All, value: totalRecordCount, icon: _jsx(IconAll, {}), order: -1 }
+                ],
+                [
+                    CounterItemKey.visibleItems,
+                    { key: CounterItemKey.visibleItems, show: true, caption: SDKUI_Localizator.VisibleItems, value: visibleItemsCount, icon: _jsx(IconVisible, {}), order: 0 }
+                ],
+                [
+                    CounterItemKey.selectedItems,
+                    { key: CounterItemKey.selectedItems, show: true, caption: SDKUI_Localizator.SelectedItems, value: selectedRowKeys.length, icon: _jsx(IconSelected, {}), order: 1 }
+                ]
+            ]);
+            const mergedCounterItems = new Map(defaultCounterItems);
+            counterConfig.items?.forEach((value, key) => { mergedCounterItems.set(key.toString(), value); });
+            // Convert map to array and sort by order, then caption alphabetically
+            const sortedCounterItems = new Map([...mergedCounterItems.entries()]
+                .sort((a, b) => {
+                const aValue = a[1]; // Extract value
+                const bValue = b[1];
+                if ((aValue.order ?? 0) === (bValue.order ?? 0)) {
+                    return (aValue.caption ?? '').localeCompare(bValue.caption ?? '');
+                }
+                return (aValue.order ?? 0) - (bValue.order ?? 0);
+            }));
+            setCounterValues(sortedCounterItems);
+        }
+    }, [counterConfig, visibleItemsCount, selectedRowKeys]);
+    // Handle selection changes and invoke callback if provided
+    const onSelectionChangedCallback = useCallback((e) => {
+        lastSelectionChangeTime.current = Date.now(); // Store current time of selection change
+        if (onSelectionChanged)
+            onSelectionChanged(e);
+    }, [onSelectionChanged]);
+    // Handle row double-click event
+    const onRowDblClickCallback = useCallback((e) => {
+        if (selection.mode === 'multiple' && selection.showCheckBoxesMode !== 'onClick' && Date.now() - lastSelectionChangeTime.current < 300) {
+            // Skip the double-click if selection has changed recently
+            return;
+        }
+        if (onRowDblClick)
+            onRowDblClick(e);
+    }, [onRowDblClick]);
+    // Update context menu items based on operation type (single row or multi row)
+    const updateContextMenuItems = useCallback((items, rowID) => {
+        return items.map(item => {
+            // Determine if item is explicitly disabled; default to `false` if not provided
+            let disabled = item.disabled ?? false;
+            // Variable to determine if the item should be disabled based on row selection
+            let disabledCalculation = false;
+            // Get the active row ID, prioritizing `focusedRowKey` if `focusedRowEnabled` is true
+            const id = focusedRowEnabled ? focusedRowKey : rowID;
+            // Disable items based on their operation type and selection state
+            if (item.operationType === 'singleRow') {
+                // A single-row operation requires exactly one row to be selected
+                disabledCalculation = selectedRowKeys.length > 1 || id === undefined;
+            }
+            if (item.operationType === 'multiRow') {
+                // A multi-row operation requires at least one selected row
+                disabledCalculation = selectedRowKeys.length === 0 && id === undefined;
+            }
+            return {
+                ...item,
+                disabled: disabled || disabledCalculation, // An item is disabled if it's explicitly set to `true` or if the calculation above determines so
+                // Define the behavior when the menu item is clicked
+                onClick: () => {
+                    // If there is no click handler defined, exit early
+                    if (!item.onClick)
+                        return;
+                    if (item.operationType === 'singleRow' && id !== undefined) {
+                        // For single-row operations, call onItemClick with the row ID
+                        item.onClick(id);
+                    }
+                    else if (item.operationType === 'multiRow' && id !== undefined) {
+                        // For multi-row operations, determine the appropriate argument
+                        if (selectedRowKeys.length > 0) {
+                            // If multiple rows are selected, pass all selected row IDs
+                            item.onClick(selectedRowKeys);
+                        }
+                        else if (id !== undefined) {
+                            // If no rows are selected but `id` exists, pass it as an array
+                            item.onClick([id]);
+                        }
+                    }
+                    else {
+                        // For general operations without a specific row selection
+                        item.onClick();
+                    }
+                },
+                // Recursively update nested menu items, if present
+                items: item.items ? updateContextMenuItems(item.items, id) : undefined,
+            };
+        });
+    }, [focusedRowEnabled, focusedRowKey, selectedRowKeys]);
+    // Handle context menu preparation
+    const onContextMenuPreparingCallback = useCallback((e) => {
+        if (e === undefined)
+            return;
+        if (onContextMenuPreparing)
+            onContextMenuPreparing(e);
+        if (e.target === 'content') {
+            e.items = e.items || [];
+            if (e.items.length > 0) {
+                const rowId = e.row?.key;
+                const updatedContextMenuItems = updateContextMenuItems(e.items, rowId);
+                e.items = [...updatedContextMenuItems];
+            }
+        }
+    }, [updateContextMenuItems, onContextMenuPreparing]);
+    // Handle toolbar preparation, especially for the search panel
+    const onToolbarPreparingCallback = useCallback((e) => {
+        if (e === undefined || e.toolbarOptions === undefined || e.toolbarOptions.items === undefined)
+            return;
+        if (showSearchPanel && searchPanelToolbarPosition === 'before') {
+            e.toolbarOptions.items.forEach((item) => {
+                if (item.name === "searchPanel") {
+                    item.location = "before";
+                }
+            });
+        }
+    }, [showSearchPanel, searchPanelToolbarPosition]);
+    // Memoized callback that runs when the DataGrid content is ready
+    const onContentReadyCallback = useCallback((e) => {
+        // If event is undefined, exit early (safety check)
+        if (e === undefined)
+            return;
+        // Call the external onContentReady callback if it was provided
+        onContentReady?.(e);
+        // If ref to the DataGrid is not set yet, exit early
+        if (!internalRef.current)
+            return;
+        // Update state with the current number of visible rows in the DataGrid
+        setVisibleItemsCount(internalRef.current.instance()?.getVisibleRows()?.length ?? 0);
+        // Focusing SearchPanel
+        if (showSearchPanel && searchPanelFocusStarting) {
+            // Use a small delay to ensure the DOM is fully rendered before trying to focus
+            // This can prevent issues with the focus not being set correctly
+            setTimeout(() => {
+                const searchInput = internalRef.current?.instance().element().querySelector('.dx-datagrid-search-panel input');
+                if (searchInput) {
+                    searchInput.focus();
+                }
+            }, 100);
+        }
+    }, [onContentReady]);
+    const onOptionChangedCallback = useCallback((e) => {
+        // Assicurati che component esista
+        const grid = e.component;
+        if (!grid)
+            return;
+        // Controlla se il cambiamento riguarda i filtri
+        const isFilterChange = e.fullName === 'filterValue' || (e.fullName?.startsWith('columns') && e.fullName.endsWith('filterValues'));
+        if (isFilterChange) {
+            let newHasFilters = false;
+            // Filtro globale
+            const filterValue = grid.option('filterValue');
+            if (Array.isArray(filterValue)) {
+                newHasFilters = filterValue.length > 0;
+            }
+            else if (filterValue) {
+                newHasFilters = true;
+            }
+            // Filtro per colonne
+            const columns = grid.option('columns') || [];
+            const columnFilters = columns.some((col) => {
+                if (Array.isArray(col.filterValues))
+                    return col.filterValues.length > 0;
+                return !!col.filterValue;
+            });
+            if (columnFilters)
+                newHasFilters = true;
+            setHasFilters(newHasFilters);
+            onHasFiltersChange?.(newHasFilters);
+        }
+        // Propaga l'evento originale
+        onOptionChanged?.(e);
+    }, [onOptionChanged, onHasFiltersChange]);
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
+                    // main properties
+                    keyExpr: keyExpr, dataSource: dataSource, selectedRowKeys: selectedRowKeys, focusedRowEnabled: focusedRowEnabled, hoverStateEnabled: hoverStateEnabled, 
+                    // events and callbacks
+                    onSelectionChanged: onSelectionChangedCallback, onRowDblClick: onRowDblClickCallback, onRowPrepared: onRowPrepared, onContextMenuPreparing: onContextMenuPreparingCallback, onToolbarPreparing: onToolbarPreparingCallback, onFocusedRowChanged: onFocusedRowChanged, onRowClick: onRowClick, onCellClick: onCellClick, onCellDblClick: onCellDblClick, onOptionChanged: onOptionChangedCallback, onContentReady: onContentReadyCallback, onInitialized: onInitialized, customizeColumns: customizeColumns, onEditorPreparing: onEditorPreparing, onCellPrepared: onCellPrepared, onRowUpdating: onRowUpdating, onRowExpanded: onRowExpanded, onRowCollapsed: onRowCollapsed, onRowUpdated: onRowUpdated, onSaved: onSaved, onEditCanceled: onEditCanceled, onEditingStart: onEditingStart, onEditingChange: onEditingChange, onKeyDown: onKeyDown, 
+                    // other properties
+                    disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, wordWrapEnabled: wordWrapEnabled, noDataText: noDataText, 
+                    // styles
+                    width: width, height: height, style: { userSelect: 'none' }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), columnChooser && _jsx(ColumnChooser, { ...columnChooser }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) })] });
+});
+export default TMDataGrid;
+const getRecordCount = (dataSource) => {
+    if (Array.isArray(dataSource)) {
+        return dataSource.length; // For array
+    }
+    if (dataSource instanceof DataSource) {
+        return dataSource.totalCount(); // For DataSource instance
+    }
+    return 0; // Default case when neither condition is met
+};

package/lib/components/base/TMDataGridExportForm.d.ts

@@ -0,0 +1,15 @@
+import { IColumnProps } from 'devextreme-react/cjs/data-grid';
+import { SearchResultDescriptor } from '@topconsultnpm/sdk-ts';
+export type FormatOption = {
+    value: 'csv' | 'xlsx' | 'xls' | 'txt';
+    display: string;
+};
+interface TMDataGridExportFormProps {
+    searchResult: SearchResultDescriptor;
+    dataSource: Array<any> | undefined;
+    dataColumns: Array<IColumnProps>;
+    selectedRowKeys: Array<number>;
+    onCloseExportForm: () => void;
+}
+declare const TMDataGridExportForm: (props: TMDataGridExportFormProps) => import("react/jsx-runtime").JSX.Element;
+export default TMDataGridExportForm;

package/lib/components/base/TMDataGridExportForm.js

@@ -0,0 +1,209 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Workbook } from 'exceljs';
+import { buildValueToLabelMapFromDataColumns, getExceptionMessage, SDKUI_Localizator } from '../../helper';
+import TMCheckBox from '../editors/TMCheckBox';
+import TMButton from './TMButton';
+import TMModal from './TMModal';
+import { TMExceptionBoxManager } from './TMPopUp';
+import { ResultTypes } from '@topconsultnpm/sdk-ts';
+import TMSpinner from './TMSpinner';
+import { TMResultManager } from '../forms/TMResultDialog';
+import TMDropDown from '../editors/TMDropDown';
+const formatDataSource = [
+    { value: 'csv', display: 'CSV' },
+    { value: 'xlsx', display: 'XLSX' },
+];
+const TMDataGridExportForm = (props) => {
+    const { searchResult, dataSource, dataColumns, selectedRowKeys, onCloseExportForm } = props;
+    // State to track the selected export format (default: 'csv')
+    const [formatSelected, setFormatSelected] = useState('csv');
+    // Boolean state to indicate whether to export only the selected items
+    const [exportSelectedOnly, setExportSelectedOnly] = useState(selectedRowKeys.length > 0 ? true : false);
+    // Boolean state to indicate whether to export the "description" fields in data lists
+    const [exportDescriptionsForDataLists, setExportDescriptionsForDataLists] = useState(true);
+    // Boolean state to indicate whether to hide the selection and format during export
+    const [exportSelectedFormatColumns, setExportSelectedFormatColumns] = useState(false);
+    const onStatusValueChange = (e) => {
+        if (!e?.target?.value)
+            return;
+        setFormatSelected(e.target.value);
+    };
+    // Function to trigger download of a file represented by a Blob with the given file extension
+    const downloadFile = (blob, extension) => {
+        // Helper function to ensure numbers (e.g., 4 -> '04') are two digits
+        const formatNumber = (n) => n.toString().padStart(2, '0');
+        // Helper function to generate a timestamp string in the format 'YYYY-MM-DD_HH-MM-SS'
+        const getTimestamp = () => {
+            const now = new Date();
+            const date = `${now.getFullYear()}-${formatNumber(now.getMonth() + 1)}-${formatNumber(now.getDate())}`;
+            const time = `${formatNumber(now.getHours())}-${formatNumber(now.getMinutes())}-${formatNumber(now.getSeconds())}`;
+            return `${date}_${time}`;
+        };
+        // Create a temporary URL representing the file Blob
+        const url = URL.createObjectURL(blob);
+        // Create an anchor element to trigger the download
+        const a = document.createElement('a');
+        a.href = url;
+        // Set the filename using a localized prefix and the generated timestamp
+        a.download = `${SDKUI_Localizator.SearchResult}_${getTimestamp()}.${extension}`;
+        // Append the anchor to the document, click it to start download, then remove it
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        // Revoke the created URL to release memory
+        URL.revokeObjectURL(url);
+    };
+    const handleExport = async () => {
+        // Exit early if dataSource or dataColumns are not defined to avoid errors
+        if (!dataSource || !dataColumns)
+            return;
+        let result = [];
+        try {
+            TMSpinner.show({ description: SDKUI_Localizator.Loading });
+            // Retrieve columns from the search result, or use an empty array if not available
+            const columns = searchResult?.dtdResult?.columns ?? [];
+            // If exportDescriptionsForDataLists is true, build a map of values to labels for the columns; otherwise use an empty Map
+            const { valueToNameMap, captions } = exportDescriptionsForDataLists ? await buildValueToLabelMapFromDataColumns(columns) : { valueToNameMap: new Map(), captions: new Set() };
+            // Create a Set from selectedRowKeys for efficient lookup
+            const selectedSet = new Set(selectedRowKeys);
+            // If exporting only selected rows, filter the dataSource accordingly; otherwise use the full dataSource
+            const rowsToExport = exportSelectedOnly ? dataSource.filter((item) => selectedSet.has(item.rowIndex)) : dataSource;
+            // Filter columns to only those that are visible; optionally hide 'object' data types based on the `hideSelection` flag
+            let visibleColumns = dataColumns.filter(col => {
+                if (!exportSelectedFormatColumns) {
+                    return col.visible !== false && col.dataField !== "FILEEXT";
+                }
+                else {
+                    return col.visible !== false;
+                }
+            });
+            // Function to get the value for a column and its value in a row
+            const getValue = (col, value) => {
+                // Replace raw value with corresponding label from the map if applicable
+                let result = value;
+                if (exportDescriptionsForDataLists && col.caption && captions.has(col.caption.toString())) {
+                    result = valueToNameMap.get(value) ?? value;
+                }
+                // If the column is a datetime type, attempt to format it as a locale date string
+                if (col.dataType === 'datetime' && result) {
+                    const parsedDate = new Date(result);
+                    if (!isNaN(parsedDate.getTime())) {
+                        result = parsedDate.toLocaleDateString();
+                    }
+                }
+                // Return the cleaned string value, stripping double quotes to avoid CSV formatting issues
+                return (result ?? '').toString().replace(/"/g, '');
+            };
+            switch (formatSelected) {
+                case 'csv': {
+                    const getHeaderName = (col) => col.caption ?? col.dataField;
+                    const headers = !exportSelectedFormatColumns ? visibleColumns.map(getHeaderName) : [SDKUI_Localizator.SelectedSingular, ...visibleColumns.map(getHeaderName)];
+                    const csvRows = [];
+                    csvRows.push(headers.join(';'));
+                    rowsToExport.forEach((item, idx) => {
+                        const originalIndex = exportSelectedOnly ? selectedRowKeys[idx] : dataSource.indexOf(item);
+                        const rowValues = [];
+                        if (exportSelectedFormatColumns) {
+                            const status = selectedSet.has(originalIndex) ? SDKUI_Localizator.SelectedSingular : SDKUI_Localizator.Deselected;
+                            rowValues.push(status || '');
+                        }
+                        visibleColumns.forEach(col => {
+                            if (col.dataField) {
+                                rowValues.push(getValue(col, item[col.dataField]));
+                            }
+                        });
+                        csvRows.push(rowValues.join(';'));
+                    });
+                    const blob = new Blob([csvRows.join('\r\n')], { type: 'text/csv;charset=utf-8;' });
+                    downloadFile(blob, formatSelected);
+                    result.push({ rowIndex: 1, id1: 1, id2: 0, description: SDKUI_Localizator.OperationSuccess, resultType: ResultTypes.SUCCESS });
+                    break;
+                }
+                case 'xlsx': {
+                    // Create a new Excel workbook and add a worksheet with localized name
+                    const workbook = new Workbook();
+                    const worksheet = workbook.addWorksheet(SDKUI_Localizator.SearchResult);
+                    // Map visible columns to worksheet column definitions
+                    const baseColumns = visibleColumns.map(col => ({ header: col.caption !== undefined ? col.caption : col.dataField, key: col.dataField, width: 10, style: { numFmt: '@' } }));
+                    // Add a selection status column at the beginning if hideSelection is false
+                    const headers = !exportSelectedFormatColumns ? baseColumns : [{ header: SDKUI_Localizator.SelectedSingular, key: '_selected', width: 10, style: { numFmt: '@' } }, ...baseColumns];
+                    worksheet.columns = headers;
+                    // Style the header row cells: font, fill color, and border
+                    worksheet.getRow(1).eachCell({ includeEmpty: true }, cell => {
+                        cell.font = { name: 'Segoe UI', size: 9 };
+                        cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'C0C0C0' } };
+                        cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };
+                    });
+                    // Add rows to worksheet
+                    rowsToExport.forEach((item, idx) => {
+                        // Get original index of the item in dataSource
+                        const originalIndex = exportSelectedOnly ? selectedRowKeys[idx] : dataSource.indexOf(item);
+                        const rowObj = {};
+                        // Add selection status if hideSelection is false
+                        if (exportSelectedFormatColumns) {
+                            rowObj._selected = selectedSet.has(originalIndex) ? SDKUI_Localizator.SelectedSingular : SDKUI_Localizator.Deselected;
+                        }
+                        // Add data for each visible column
+                        visibleColumns.forEach(col => {
+                            if (col.dataField) {
+                                rowObj[col.dataField] = getValue(col, item[col.dataField]);
+                            }
+                        });
+                        worksheet.addRow(rowObj);
+                    });
+                    // Adjust column widths based on header and cell contents without iterating each cell manually
+                    worksheet.columns.forEach(col => {
+                        if (!col || !col.header || !col.key)
+                            return;
+                        const headerLength = col.header.toString().length;
+                        // 'getColumn' accetta solo string | number, col.key è garantito perché controllato sopra
+                        const maxDataLength = worksheet.getColumn(col.key).values.reduce((max, val) => {
+                            const strVal = val !== undefined && val !== null ? val.toString() : '';
+                            const length = strVal.length;
+                            return length > max ? length : max;
+                        }, 0);
+                        col.width = Math.max(headerLength, maxDataLength) + 2;
+                    });
+                    // Apply font and border styling to all cells in all rows in a single pass
+                    worksheet.eachRow((row) => {
+                        row.eachCell({ includeEmpty: true }, cell => {
+                            cell.font = { name: 'Segoe UI', size: 9 };
+                            cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };
+                        });
+                    });
+                    // Generate Excel file as a buffer
+                    const buffer = await workbook.xlsx.writeBuffer();
+                    // Create a Blob from the buffer for downloading
+                    const blob = new Blob([buffer], { type: 'application/octet-stream' });
+                    // Trigger the file download with extension 'xlsx'
+                    downloadFile(blob, formatSelected);
+                    result.push({ rowIndex: 1, id1: 1, id2: 0, description: SDKUI_Localizator.OperationSuccess, resultType: ResultTypes.SUCCESS });
+                    break;
+                }
+                default:
+                    break;
+            }
+        }
+        catch (error) {
+            result.push({ rowIndex: 1, id1: 1, id2: 0, resultType: ResultTypes.ERROR, description: getExceptionMessage(error) });
+            // Show any exceptions in a custom exception box
+            TMExceptionBoxManager.show({ exception: error });
+        }
+        finally {
+            TMSpinner.hide();
+            TMResultManager.show(result, SDKUI_Localizator.Export, "ID", undefined);
+            onCloseExportForm();
+        }
+    };
+    return _jsx(TMModal, { title: `${SDKUI_Localizator.Export}`, width: '400px', height: '250px', onClose: onCloseExportForm, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '6px 12px', height: '100%', width: '100%' }, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: _jsx(TMDropDown, { label: SDKUI_Localizator.Format, value: formatSelected, dataSource: formatDataSource, onValueChanged: onStatusValueChange }) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: _jsx(TMCheckBox, { elementStyle: {
+                            opacity: selectedRowKeys.length === 0 ? 0.5 : 1,
+                            cursor: selectedRowKeys.length === 0 ? 'not-allowed' : 'pointer'
+                        }, label: `${SDKUI_Localizator.ExportOnlySelectedDocuments} (${selectedRowKeys.length})`, value: exportSelectedOnly, disabled: selectedRowKeys.length === 0, onValueChanged: () => { setExportSelectedOnly(prev => !prev); } }) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: _jsx(TMCheckBox, { label: SDKUI_Localizator.ExportDataListsDescriptionField, value: exportDescriptionsForDataLists, onValueChanged: () => { setExportDescriptionsForDataLists(prev => !prev); } }) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: _jsx(TMCheckBox, { label: SDKUI_Localizator.ExportSelectedColumnsAndFormatLabel, value: exportSelectedFormatColumns, onValueChanged: () => { setExportSelectedFormatColumns(prev => !prev); } }) }), _jsx("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        gap: '10px',
+                        marginTop: '5px'
+                    }, children: _jsx(TMButton, { caption: SDKUI_Localizator.Export, btnStyle: 'normal', color: 'success', showTooltip: false, onClick: handleExport }) })] }) });
+};
+export default TMDataGridExportForm;