@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/features/search/TMTreeSelector.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator, TreeCacheService, TreeItemTypes } from '@topconsultnpm/sdk-ts';
+import { TreeList, Column, Scrolling, Selection } from 'devextreme-react/tree-list';
+import { DropDownBox } from 'devextreme-react';
+import { IconStarRemove, IconStar, SDKUI_Localizator, SDKUI_Globals, IconFolder, IconInfo, IconCloseOutline } from '../../../helper';
+import { StyledDivHorizontal, StyledOffCanvasPanel } from '../../base/Styled';
+import TMButton from '../../base/TMButton';
+import TMDataGrid from '../../base/TMDataGrid';
+import TMPanel from '../../base/TMPanel';
+import TMTidViewer, { renderDTDTooltipContent, TMDcmtTypeTooltip } from '../../viewers/TMTidViewer';
+import { TMColors } from '../../../utils/theme';
+import styled from 'styled-components';
+import { useOutsideClick } from '../../../hooks/useOutsideClick';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelectedTIDChanged, onClosePanel, allowMaximize = true, onMaximizePanel }) => {
+    const [trees, setTrees] = useState([]);
+    const [treeItems, setTreeItems] = useState([]);
+    const [selectedTreeId, setSelectedTreeId] = useState(0);
+    const [infoDTD, setInfoDTD] = useState();
+    // State to store selected row keys
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    // State hook to store the currently focused row key, initially set to undefined
+    const [focusedRowKey, setFocusedRowKey] = useState(undefined);
+    const [isGridBoxOpened, setIsGridBoxOpened] = useState(false);
+    const [defaultTreeId, setDefaultTreeId] = useState(-1);
+    const deviceType = useDeviceType();
+    const isMobile = deviceType === DeviceType.MOBILE;
+    const panelRef = useOutsideClick(() => setInfoDTD(undefined));
+    // useEffect(() => {
+    //     if (treeItems.length > 0 && treeItems[0].id) {
+    //         setSelectedRowKeys([treeItems[0].id])
+    //     }
+    // }, [treeItems])
+    useEffect(() => {
+        const setResultCache = (result) => {
+            if (result && result.length > 0) {
+                setTrees(result);
+                let defaultTree = SDKUI_Globals.userSettings.searchSettings.defaultTree;
+                let initialTreeId;
+                let treeToSelect;
+                if (defaultTree > 0) {
+                    initialTreeId = defaultTree;
+                    treeToSelect = result.find(o => o.id == defaultTree);
+                }
+                else {
+                    initialTreeId = result[0]?.id ?? 0;
+                    treeToSelect = result[0];
+                }
+                setSelectedTreeId(initialTreeId);
+                if (treeToSelect?.id) {
+                    setSelectedRowKeys([treeToSelect.id]);
+                }
+            }
+        };
+        if (layoutMode == LayoutModes.Update) {
+            TreeCacheService.GetAllSearchAsync().then((result) => { setResultCache(result); });
+        }
+        else {
+            TreeCacheService.GetAllArchiveAsync().then((result) => { setResultCache(result); });
+        }
+    }, [layoutMode]);
+    useEffect(() => {
+        let newTreeItems = trees.find(o => o.id == selectedTreeId)?.items ?? [];
+        setTreeItems(newTreeItems);
+    }, [selectedTreeId, trees]);
+    const renderCell = useCallback((data) => {
+        const treeItem = data.data;
+        const [showInfo, setShowInfo] = useState(false);
+        // Documento (DcmtType)
+        if (treeItem.type === TreeItemTypes.DcmtType) {
+            return (_jsxs(StyledDivHorizontal, { style: {
+                    alignItems: 'center',
+                    minWidth: 0,
+                    width: '100%',
+                    gap: 2,
+                    position: 'relative'
+                }, onMouseEnter: async () => {
+                    if (!isMobile) {
+                        setShowInfo(true);
+                        let dtd = await DcmtTypeListCacheService.GetAsync(treeItem.tid);
+                        setInfoDTD(dtd);
+                    }
+                }, onMouseLeave: () => {
+                    if (!isMobile) {
+                        setShowInfo(false);
+                        setInfoDTD(undefined);
+                    }
+                }, children: [_jsx("span", { style: { cursor: 'pointer', flex: 1, minWidth: 0 }, children: _jsx(TMTidViewer, { tid: treeItem.tid, color: TMColors.primaryColor, showIcon: false }) }), !isMobile && (_jsx("span", { style: {
+                            opacity: showInfo ? 1 : 0,
+                            transition: 'opacity 0.2s',
+                            pointerEvents: showInfo ? 'auto' : 'none',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            marginLeft: 'auto',
+                            zIndex: 2
+                        }, children: _jsx(TMDcmtTypeTooltip, { dtd: infoDTD, children: _jsx(IconInfo, { color: TMColors.info }) }) }))] }));
+        }
+        // Folder (altri tipi)
+        return (_jsxs(StyledDivHorizontal, { style: { gap: 5, alignItems: 'center', minWidth: 0 }, children: [_jsx("span", { style: {
+                        flex: '0 0 auto',
+                        width: 24,
+                        height: 24,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }, children: _jsx(IconFolder, { fontSize: 24, color: TMColors.iconLight }) }), _jsx("span", { style: {
+                        color: TMColors.primaryColor,
+                        minWidth: 0,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        flex: 1,
+                    }, children: treeItem.nameLoc })] }));
+    }, [isMobile, infoDTD, setInfoDTD]);
+    // Handles selection change in the data grid
+    const onSelectionChanged = useCallback((e) => {
+        const selectedKeys = e.component.getSelectedRowKeys() ?? [];
+        if (selectedKeys.length === 0)
+            return;
+        if (selectedKeys[0] === undefined)
+            return;
+        if (selectedKeys.length > 0)
+            setSelectedTreeId(selectedKeys[0]);
+        setSelectedRowKeys(selectedKeys);
+        setIsGridBoxOpened(false);
+    }, []);
+    // Handles focus change in the data grid
+    const onFocusedRowChanged = useCallback((e) => {
+        setFocusedRowKey(e.row?.key);
+    }, []);
+    const syncDataGridSelection = useCallback((e) => {
+        const treeItemDescriptor = e.value;
+        if (treeItemDescriptor?.id)
+            setSelectedRowKeys([treeItemDescriptor.id]);
+    }, []);
+    const onGridBoxOpened = useCallback((e) => {
+        if (e.name === 'opened') {
+            setIsGridBoxOpened(e.value);
+        }
+        ;
+    }, []);
+    // Callback function to handle double-click events on a tree view cell
+    const onCellDblClickTreeView = useCallback((e) => {
+        // Extract the data from the clicked cell and cast it to the TreeItemDescriptor type
+        const treeItem = e.data;
+        // Get a reference to the TreeList component instance that triggered the event
+        const treeList = e.component;
+        // Get the unique key of the clicked row
+        const key = e.key;
+        // Check if the clicked item is of type Folder, row expansion state to toggle visibility of children
+        if (treeItem.type === TreeItemTypes.Folder) {
+            // If the folder row is currently expanded, collapse it
+            if (treeList.isRowExpanded(key)) {
+                treeList.collapseRow(key);
+            }
+            // If the folder row is collapsed, expand it
+            else {
+                treeList.expandRow(key);
+            }
+        }
+    }, []);
+    return (_jsx(TMPanel, { title: SDK_Localizator.Trees, isVisible: isVisible, totalItems: trees.length, onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsx(TMButton, { btnStyle: 'icon', caption: defaultTreeId == selectedTreeId ? SDKUI_Localizator.TreeRemoveDefault : SDKUI_Localizator.SetAsDefault, icon: defaultTreeId == selectedTreeId ? _jsx(IconStarRemove, { color: 'rgb(243, 114, 92)' }) : _jsx(IconStar, { color: 'rgb(248, 215, 117)' }), onClick: () => {
+                if (defaultTreeId == selectedTreeId) {
+                    if (layoutMode == LayoutModes.Update)
+                        SDKUI_Globals.userSettings.searchSettings.defaultTree = -1;
+                    else
+                        SDKUI_Globals.userSettings.archivingSettings.defaultTree = -1;
+                    setDefaultTreeId(-1);
+                }
+                else {
+                    if (layoutMode == LayoutModes.Update)
+                        SDKUI_Globals.userSettings.searchSettings.defaultTree = selectedTreeId;
+                    else
+                        SDKUI_Globals.userSettings.archivingSettings.defaultTree = selectedTreeId;
+                    setDefaultTreeId(selectedTreeId);
+                }
+            } }), children: trees.length > 0
+            ?
+                _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        width: '100%',
+                        boxSizing: 'border-box',
+                        minHeight: 0,
+                    }, children: [_jsx("div", { style: { padding: '10px' }, children: _jsx(DropDownBox, { dropDownOptions: {
+                                    resizeEnabled: true,
+                                    minWidth: "100%",
+                                    height: trees.length <= 10 ? 300 : 500,
+                                    maxWidth: "100%"
+                                }, value: selectedTreeId, opened: isGridBoxOpened, valueExpr: "id", displayExpr: "nameLoc", deferRendering: false, dataSource: trees, onValueChanged: syncDataGridSelection, onOptionChanged: onGridBoxOpened, style: { height: 30, padding: '5px' }, children: _jsx(TMDataGrid, { height: "100%", width: "100%", dataSource: trees, dataColumns: [
+                                        { dataField: 'nameLoc', caption: SDKUI_Localizator.Name, width: 'auto' },
+                                        { dataField: 'description', caption: SDKUI_Localizator.Description, width: 'auto' },
+                                    ], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsxs(StyledTreeListWrapper, { children: [_jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, onContentReady: (e) => e.component.clearSelection(), onCellDblClick: onCellDblClickTreeView, onSelectionChanged: (e) => {
+                                        if (e.selectedRowsData[0] && e.selectedRowsData[0].type == TreeItemTypes.DcmtType) {
+                                            onSelectedTIDChanged?.(e.selectedRowsData[0].tid, selectedTreeId);
+                                        }
+                                    }, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "virtual", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] })] })
+            : _jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', fontSize: '1.5rem' }, children: SDKUI_Localizator.TreesNoAvailable }) }));
+};
+export default TMTreeSelector;
+const StyledTreeListWrapper = styled.div `
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .dx-treelist,
+    .dx-treelist-rowsview,
+    .dx-scrollable,
+    .dx-scrollable-wrapper,
+    .dx-scrollable-container,
+    .dx-scrollable-content {
+        height: 100% !important;
+        min-height: 0 !important;
+        max-height: 100% !important;
+        box-sizing: border-box;
+    }
+
+    .dx-scrollable-scrollbar.dx-scrollbar-vertical {
+        /* Mostra solo quando serve */
+        opacity: 1 !important;
+    }
+
+    .dx-scrollable-scrollbar.dx-scrollbar-horizontal {
+        display: none !important;
+    }
+
+	.dx-treelist-container>.dx-treelist-headers,
+	.dx-treelist-container>.dx-treelist-rowsview {
+		background-color: transparent;
+	}
+
+	.dx-treelist-rowsview .dx-treelist-empty-space {
+		position: relative;
+		top: 4px;
+		display: inline-block;
+		width: 16px;
+	}
+
+	.dx-row > td {
+		padding: 10px 4px;
+		font-size: 1rem;
+        white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.dx-selection td {
+		background: oklch(from var(--dx-color-primary) l c h / .2) !important;
+	}
+
+    .dx-data-row:hover {
+        cursor: pointer;
+        background: linear-gradient(
+            270deg,
+            rgba(70, 181, 162, 0.15) 16%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(54, 129, 173, 0.15) 54%,
+            rgba(51, 104, 165, 0.15) 72%,
+            rgba(47, 84, 157, 0.15) 88%,
+            rgba(48, 79, 153, 0.15) 100%
+        );
+    }
+`;

package/lib/components/features/wg/TMWGsCopyMoveForm.d.ts

@@ -0,0 +1,39 @@
+import { DcmtTypeDescriptor, WorkingGroupDescriptor } from "@topconsultnpm/sdk-ts";
+import { FileItem } from '../../base/TMFileManagerUtils';
+/** Context descriptor for copy/move operations using different engines */
+export type TMWgsCopyMoveContextDescriptor = {
+    engine: 'WorkingGroupEngine';
+    object?: WorkingGroupDescriptor;
+    selectedDrafts: Array<FileItem>;
+} | {
+    engine: 'SearchEngine';
+    object?: DcmtTypeDescriptor;
+    selectedDrafts: Array<any>;
+};
+export declare const getDocumentDisplayInfo: (descriptor: DcmtTypeDescriptor, item: any) => {
+    name: string;
+    description: string;
+};
+interface TMWGsCopyMoveFormProps {
+    context: TMWgsCopyMoveContextDescriptor;
+    mode: 'copy' | 'move' | 'copyToWgDraft' | 'copyToWgArchivedDoc';
+    onClose: () => void;
+    workingGroups?: Array<WorkingGroupDescriptor>;
+    folder?: FileItem;
+    focusedWorkingGroupId?: number;
+    fetchTreeFileSystemForWorkingGroup?: (workingGroupId: number | undefined) => Promise<void>;
+    fetchArchivedDocumentsForWorkingGroup?: (workingGroupId: number | undefined) => Promise<void>;
+}
+declare const TMWGsCopyMoveForm: (props: TMWGsCopyMoveFormProps) => import("react/jsx-runtime").JSX.Element;
+export default TMWGsCopyMoveForm;
+interface StepItem {
+    id: number | string;
+    title: string;
+    subtitle?: string;
+}
+interface TMStepNavigatorProps {
+    steps: Array<StepItem>;
+    currentStep: number;
+    onStepChange: (stepIndex: number) => void;
+}
+export declare const TMStepNavigator: (props: TMStepNavigatorProps) => import("react/jsx-runtime").JSX.Element;