@topconsultnpm/sdkui-react 6.17.0-test10

package/lib/components/base/TMDataGridExportForm.js

@@ -0,0 +1,215 @@
+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 = exportDescriptionsForDataLists ? await buildValueToLabelMapFromDataColumns(columns) : new Map();
+            // 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.dataField && valueToNameMap.size > 0) {
+                    const mapForField = valueToNameMap.get(col.dataField);
+                    if (mapForField) {
+                        result = mapForField.get(value) ?? value;
+                    }
+                    else {
+                        result = 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;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+declare enum DeviceType {
+    MOBILE = "mobile",
+    TABLET = "tablet",
+    DESKTOP = "desktop"
+}
+interface DeviceContextProps {
+    deviceType?: DeviceType;
+}
+declare const DeviceContext: React.Context<DeviceContextProps | undefined>;
+declare const TMDeviceProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+declare const useDeviceType: () => DeviceType | undefined;
+export { DeviceContextProps, DeviceType, useDeviceType, TMDeviceProvider, DeviceContext };

package/lib/components/base/TMDeviceProvider.js

@@ -0,0 +1,41 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, createContext, useMemo, useContext } from 'react';
+var DeviceType;
+(function (DeviceType) {
+    DeviceType["MOBILE"] = "mobile";
+    DeviceType["TABLET"] = "tablet";
+    DeviceType["DESKTOP"] = "desktop";
+})(DeviceType || (DeviceType = {}));
+const DESKTOP_BREAKPOINT = 1024;
+const TABLET_BREAKPOINT = 768;
+const DeviceContext = createContext(undefined);
+const TMDeviceProvider = ({ children }) => {
+    const [deviceType, setDeviceType] = useState(DeviceType.DESKTOP);
+    const updateDeviceType = () => {
+        const width = window.innerWidth;
+        if (width >= DESKTOP_BREAKPOINT) {
+            setDeviceType(DeviceType.DESKTOP);
+        }
+        else if (width >= TABLET_BREAKPOINT) {
+            setDeviceType(DeviceType.TABLET);
+        }
+        else {
+            setDeviceType(DeviceType.MOBILE);
+        }
+    };
+    useEffect(() => {
+        updateDeviceType();
+        window.addEventListener('resize', updateDeviceType);
+        return () => window.removeEventListener('resize', updateDeviceType);
+    }, []);
+    const contextValue = useMemo(() => ({ deviceType }), [deviceType]);
+    return (_jsxs(DeviceContext.Provider, { value: contextValue, children: [" ", children, " "] }));
+};
+const useDeviceType = () => {
+    const context = useContext(DeviceContext);
+    if (!context) {
+        throw new Error('DeviceProvider does not exsist');
+    }
+    return context.deviceType;
+};
+export { DeviceType, useDeviceType, TMDeviceProvider, DeviceContext };

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

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface ITMDropDownMenuRef {
+    focus: () => void;
+}
+export interface ITMDropDownMenu {
+    content: JSX.Element;
+    color?: string;
+    backgroundColor?: string;
+    disabled?: boolean;
+    borderRadius?: string;
+    items?: ITMDropDownMenuItem[];
+    onMenuShown?: () => void;
+}
+export interface ITMDropDownMenuItem {
+    icon?: any;
+    text: any;
+    items?: ITMDropDownMenuItem[];
+    disabled?: boolean;
+    beginGroup?: boolean;
+    onClick?: () => void;
+}
+declare const TMDropDownMenu: React.ForwardRefExoticComponent<ITMDropDownMenu & React.RefAttributes<ITMDropDownMenuRef>>;
+export default TMDropDownMenu;

package/lib/components/base/TMDropDownMenu.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, forwardRef, useRef, useImperativeHandle } from 'react';
+import styled from 'styled-components';
+import ContextMenu from 'devextreme-react/context-menu';
+import { FontSize, TMColors } from '../../utils/theme';
+import { genUniqueId } from '../../helper';
+const StyledContent = styled.div `
+    cursor: pointer;
+    border-radius: ${props => props.$borderRadius};
+    color: ${props => props.$color};
+    /* background-color: ${props => props.$backgroundColor}; */
+    background-color: transparent;
+    opacity: ${props => props.$disabled ? 0.4 : 1};
+    pointer-events: ${props => props.$disabled ? 'none' : ''};
+    user-select: none;
+    display: flex;
+    align-items: center;
+
+    &:focus {
+        outline: none;
+        border-bottom: ${props => props.$disabled ? '' : '2px solid'};
+        border-bottom-color: ${TMColors.primary};
+    }
+`;
+const StyledMenuItem = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    width: 100%;
+    font-size: ${FontSize.defaultFontSize};
+`;
+const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius, onMenuShown }, ref) => {
+    const [id, setID] = useState('');
+    const dropDownMenuElementRef = useRef(null); // Ref all'elemento DOM div principale
+    useEffect(() => { setID(genUniqueId()); }, [content]);
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            dropDownMenuElementRef.current?.focus();
+        },
+    }));
+    const renderItemTemplate = (itemData) => (_jsxs(StyledMenuItem, { children: [itemData.icon && _jsx("div", { style: { display: 'flex', alignItems: 'center' }, children: itemData.icon }), _jsx("span", { style: { flexGrow: 1 }, children: itemData.text }), itemData.items && _jsx("span", { className: "dx-icon-spinright dx-icon", style: { marginLeft: '10px' } })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }), _jsx(ContextMenu, { target: `#idContainer${id}`, dataSource: items, showEvent: 'click', itemRender: renderItemTemplate, onShown: (e) => onMenuShown?.(), onHidden: (e) => dropDownMenuElementRef.current?.focus() })] }));
+});
+export default TMDropDownMenu;

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

@@ -0,0 +1,39 @@
+import { ValidationItem } from "@topconsultnpm/sdk-ts";
+export type Colors = 'error' | 'warning' | 'success' | 'info' | 'primary' | 'secondary' | 'tertiary' | 'standard';
+type IconModes = 'outside' | 'inside' | 'none';
+type LabelModes = 'left' | 'top' | 'none';
+export type Sizes = 'small' | 'medium' | 'large';
+export type TMEditorButtonData = {
+    icon: any;
+    text?: string;
+    onClick?: () => void;
+};
+export interface ITMEditorBase {
+    backgroundColor?: string;
+    buttons?: TMEditorButtonData[];
+    customActionIcon?: any;
+    disabled?: boolean;
+    elementStyle?: React.CSSProperties;
+    flexBase?: number;
+    fontSize?: string;
+    height?: string;
+    horizontalFlexBase?: number;
+    icon?: any;
+    iconMode?: IconModes;
+    iconSize?: Sizes;
+    isModifiedWhen?: boolean;
+    label?: string;
+    labelColor?: string;
+    labelMode?: LabelModes;
+    labelPosition?: 'top' | 'left' | 'right';
+    labelAlign?: boolean;
+    placeHolder?: string;
+    readOnly?: boolean;
+    showId?: boolean;
+    showClearButton?: boolean;
+    value?: any;
+    validationItems?: ValidationItem[];
+    width?: string;
+    borderRadius?: string;
+}
+export {};

package/lib/components/base/TMEditorBase.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,45 @@
+import { FileItem, TMFileManagerContextMenuItem } from "./TMFileManagerUtils";
+interface TMFileManagerProps {
+    /** The currently focused file */
+    focusedFile: FileItem | undefined;
+    /** Callback to handle changes in the focused file */
+    handleFocusedFile: (fileItem: FileItem | undefined) => void;
+    /** Array of selected files */
+    selectedFiles: Array<FileItem>;
+    /** Callback to handle file selection changes */
+    handleSelectedFiles: (fileItem: Array<FileItem>) => void;
+    /** Selected Folder */
+    selectedFolder: FileItem | undefined;
+    /** Callback to handle folder focus changes */
+    handleFocusedFolder: (folderItem: FileItem | undefined) => void;
+    /** Callback to refresh the file manager */
+    refreshCallback: () => Promise<void>;
+    /** Represents the file system tree structure */
+    treeFs: FileItem;
+    /** Context menu items for folders */
+    folderContextMenuItems: Array<TMFileManagerContextMenuItem>;
+    /** Context menu items for files */
+    fileContextMenuItems: Array<TMFileManagerContextMenuItem>;
+    /** Optional: Callback to handle folder selection changes */
+    handleSelectedFolder?: (folderItem: FileItem | undefined) => void;
+    /** Optional: Callback for handling double-click events on a file */
+    onDoubleClickHandler?: (fileItem: FileItem | undefined) => void;
+    /** Optional: Session User ID */
+    userID?: number;
+    /** Optional: Determines the view mode of the file manager (Can be either 'thumbnails' or 'details') */
+    viewMode?: 'thumbnails' | 'details';
+    /** Optional: Callback for handling drop file */
+    handleDropFileCallback?: (files: Array<File>) => void;
+    /** Optional: Number of total founded */
+    dcmtsFound?: number;
+    /** Optional: Flag to show or hide the panel */
+    showPanel?: boolean;
+    /** Optional: Callback to handle panel close */
+    onClosePanel?: () => void;
+    /** Optional: Flag to allow panel maximization */
+    allowMaximize?: boolean;
+    /** Optional: Callback to handle back button */
+    onMaximizePanel?: () => void;
+}
+declare const TMFileManager: (props: TMFileManagerProps) => import("react/jsx-runtime").JSX.Element;
+export default TMFileManager;