@topconsultnpm/sdkui-react-beta 6.6.1 → 6.6.3

package/lib/components/query/TMQueryResult.d.ts

@@ -1,8 +1,10 @@
 import { SearchResultDescriptor } from '@topconsultnpm/sdk-ts-beta';
-declare const TMQueryResult: ({ result, elapsedTime, showSysMetadata, searchText }: {
+declare const TMQueryResult: ({ result, elapsedTime, showHiddenSelectItems, searchText, onSelectionChanged, onDblClick }: {
+    onDblClick?: () => void;
+    onSelectionChanged?: (e: any[]) => void;
     result: SearchResultDescriptor | undefined;
     elapsedTime?: number;
-    showSysMetadata?: boolean;
+    showHiddenSelectItems?: boolean;
     searchText?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TMQueryResult;

package/lib/components/query/TMQueryResult.js

@@ -7,13 +7,13 @@ import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import { StyledDivHorizontal, StyledParagraph, cellRenderObjectIcon } from '../base/Styled';
 import { Globalization, IconAll, IconApply, IconFileDots, IconProgressReady, IconSelected, IconVisible, SDKUI_Globals, getDataColumnName, searchResultDescriptorToSimpleArray } from '../../helper';
 import { TMColors } from '../../utils/theme';
-const TMQueryResult = ({ result, elapsedTime, showSysMetadata = false, searchText }) => {
+const TMQueryResult = ({ result, elapsedTime, showHiddenSelectItems, searchText, onSelectionChanged, onDblClick }) => {
     const [dataSource, setDataSource] = useState();
     const [selectedItems, setSelectedItems] = useState([]);
     const [visibleItems, setVisibleItems] = useState([]);
     let gridInstance;
     useEffect(() => { gridInstance?.instance().searchByText(searchText ?? ''); }, [searchText]);
-    useEffect(() => { setDataSource(searchResultDescriptorToSimpleArray(result)); }, [result]);
+    useEffect(() => { setDataSource(searchResultDescriptorToSimpleArray(result)); setSelectedItems([]); }, [result]);
     function millisecondsToTime(milli) {
         //console.log(milli)
         let milliseconds = milli % 1000;
@@ -21,18 +21,17 @@ const TMQueryResult = ({ result, elapsedTime, showSysMetadata = false, searchTex
         let minutes = Math.floor((milli / (60 * 1000)) % 60);
         return minutes + "m " + seconds + "s " + milliseconds.toFixed(2) + "ms";
     }
-    return (_jsxs(TMLayoutContainer, { gap: 0, children: [_jsx(TMLayoutItem, { height: 'calc(100% - 30px)', children: _jsxs(DataGrid, { ref: (grid) => (gridInstance = grid), keyExpr: "rowIndex", width: '100%', height: '100%', dataSource: dataSource, allowColumnResizing: true, columnResizingMode: "widget", columnAutoWidth: true, allowColumnReordering: true, showBorders: true, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onContentReady: (e) => { setVisibleItems(e.component.getVisibleRows().map((row) => { return row.data; })); }, onSelectionChanged: (e) => { setSelectedItems(e.selectedRowsData); }, 
-                    // onRowPrepared={(e: RowPreparedEvent<string[], any>) => { e.rowElement.style.height = '21px' }}
-                    onToolbarPreparing: (e) => {
+    // console.log(showHiddenSelectItems)
+    return (_jsxs(TMLayoutContainer, { gap: 0, children: [_jsx(TMLayoutItem, { height: 'calc(100% - 30px)', children: _jsxs(DataGrid, { ref: (grid) => (gridInstance = grid), keyExpr: "rowIndex", width: '100%', height: '100%', dataSource: dataSource, selectedRowKeys: selectedItems, allowColumnResizing: true, columnResizingMode: "widget", columnAutoWidth: true, allowColumnReordering: true, showBorders: true, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onContentReady: (e) => { setVisibleItems(e.component.getVisibleRows().map((row) => { return row.data; })); }, onSelectionChanged: (e) => { setSelectedItems(e.selectedRowKeys); onSelectionChanged && onSelectionChanged(e.selectedRowsData); }, onToolbarPreparing: (e) => {
                         e.toolbarOptions.items.forEach((item) => {
                             if (item.name === "searchPanel") {
                                 item.location = "before";
                             }
                         });
-                    }, children: [_jsx(Selection, { mode: "multiple", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(SearchPanel, { visible: false }), _jsx(Scrolling, { mode: 'virtual', useNative: SDKUI_Globals.dataGridUseNativeScrollbar }), _jsx(HeaderFilter, { visible: true }), _jsx(Paging, { pageSize: 25 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsx(LoadPanel, { enabled: true }), _jsx(Column, { dataType: "object", width: 40, visible: true, cellRender: () => cellRenderObjectIcon(_jsx(IconFileDots, { color: '#767676' })) }), result?.dtdResult?.columns?.map((col, index) => {
-                            let mid = col.extendedProperties?.["MID"];
+                    }, onRowDblClick: onDblClick, children: [_jsx(Selection, { mode: "multiple", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(SearchPanel, { visible: false }), _jsx(Scrolling, { mode: 'virtual', useNative: SDKUI_Globals.dataGridUseNativeScrollbar }), _jsx(HeaderFilter, { visible: true }), _jsx(Paging, { pageSize: 25 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsx(LoadPanel, { enabled: true }), _jsx(Column, { dataType: "object", width: 40, visible: true, cellRender: () => cellRenderObjectIcon(_jsx(IconFileDots, { color: '#767676' })) }), result?.dtdResult?.columns?.map((col, index) => {
                             let keyField = getDataColumnName(result?.fromTID, col);
-                            const isSystemField = Number(mid) < 50;
+                            const isVisible = col.extendedProperties?.["Visibility"] != "Hidden";
+                            // console.log(isVisible || showHiddenSelectItems)
                             const dataType = () => {
                                 switch (col.dataType) {
                                     case DataColumnTypes.DateTime: return "datetime";
@@ -41,7 +40,7 @@ const TMQueryResult = ({ result, elapsedTime, showSysMetadata = false, searchTex
                                     default: return "string";
                                 }
                             };
-                            return (_jsx(Column, { dataField: keyField, caption: col.caption, visible: !isSystemField ? true : showSysMetadata, dataType: dataType(), format: col.dataType === DataColumnTypes.DateTime ? Globalization.getDateDisplayFormat() : "" }, col.caption + index.toString()));
+                            return (_jsx(Column, { dataField: keyField, caption: col.caption, visible: isVisible || showHiddenSelectItems, dataType: dataType(), format: col.dataType === DataColumnTypes.DateTime ? Globalization.getDateDisplayFormat() : "" }, col.caption + index.toString()));
                         })] }) }), _jsx(TMLayoutItem, { height: 'max-content', children: _jsxs(StyledDivHorizontal, { style: { backgroundColor: TMColors.toolbar_background, height: '30px' }, children: [_jsxs(StyledParagraph, { children: [_jsxs("span", { style: { marginRight: '5px', fontWeight: 'bold' }, children: [" ", _jsx(IconAll, { fontSize: 12 })] }), Globalization.getNumberDisplayValue(dataSource?.length ?? 0, true)] }), _jsxs(StyledParagraph, { children: [_jsxs("span", { style: { marginRight: '5px', fontWeight: 'bold' }, children: [" ", _jsx(IconVisible, { fontSize: 12 })] }), Globalization.getNumberDisplayValue(visibleItems.length ?? 0, true)] }), _jsxs(StyledParagraph, { children: [_jsxs("span", { style: { marginRight: '5px', fontWeight: 'bold' }, children: [" ", _jsx(IconSelected, { fontSize: 12 })] }), Globalization.getNumberDisplayValue(selectedItems.length ?? 0, true)] }), _jsxs(StyledParagraph, { children: [_jsxs("span", { style: { marginRight: '5px', fontWeight: 'bold' }, children: [" ", _jsx(IconApply, { fontSize: 12 })] }), `${Globalization.getNumberDisplayValue(result?.dcmtsReturned ?? 0, true)}/${Globalization.getNumberDisplayValue(result?.dcmtsFound ?? 0, true)}`] }), _jsxs(StyledParagraph, { children: [_jsxs("span", { style: { marginRight: '5px', fontWeight: 'bold' }, children: [" ", _jsx(IconProgressReady, { fontSize: 12 })] }), millisecondsToTime(elapsedTime)] })] }) })] }));
 };
 export default TMQueryResult;

package/lib/components/query/TMQueryResultForm.d.ts

@@ -0,0 +1,33 @@
+import { SearchResultDescriptor } from '@topconsultnpm/sdk-ts-beta';
+export declare enum SearchResultContext {
+    METADATA_SEARCH = "metadataSearch",
+    WORKFLOW_APPROVE = "workflowApprove",
+    FAVORITES = "favorites",
+    RECENT = "recent"
+}
+export type NewButtonType = 'success' | 'error' | 'tertiary' | 'primary';
+export declare const TMButtonNew: ({ color, caption, disable, onClick, type, icon, width, height }: {
+    color?: string;
+    width?: string;
+    height?: string;
+    disable?: boolean;
+    caption?: string;
+    onClick?: () => void;
+    type?: NewButtonType;
+    icon?: any;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const TMQueryResultForm: ({ onUpdate, isModal, onClose, context, result1, result2, elapsedTime, searchText, tabIcon1, tabIcon2, tabTitle1, tabTitle2 }: {
+    tabTitle1?: string;
+    tabTitle2?: string;
+    tabIcon1?: any;
+    tabIcon2?: any;
+    isModal?: boolean;
+    onClose?: () => void;
+    context?: SearchResultContext;
+    result1?: SearchResultDescriptor | SearchResultDescriptor[];
+    result2?: SearchResultDescriptor | SearchResultDescriptor[];
+    elapsedTime?: number;
+    searchText?: string;
+    onUpdate?: () => Promise<void>;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TMQueryResultForm;

package/lib/components/query/TMQueryResultForm.js

@@ -0,0 +1,362 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { SDK_Globals, AppModules } from '@topconsultnpm/sdk-ts-beta';
+import TMQueryResult from './TMQueryResult';
+import styled from 'styled-components';
+import { IconApply, IconCloseOutline, IconUser, IconInfo, IconRefresh, IconSync, IconDownload, IconPreview, IconPrinter, IconCheckIn, IconEdit, IconStar, IconRecursiveOps, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconRelation, IconSignature, IconDelete, IconUndo, IconCloseCircle, IconMenuVertical, IconArchiveDoc, IconDuplicate, IconSubstFile, IconConvertFilePdf, IconCheckFile, IconBatchUpdate, IconShare, IconSharedDcmt, IconSearch, IconExportTo, IconShow, IconSettings, IconActivityLog, SDKUI_Localizator, useWindowWidth, MOBILE_WIDTH, IconArrowLeft } from '../../helper';
+import { FormModes } from '../../ts';
+import { TMColors } from '../../utils/theme';
+import { StyledBadge } from '../base/Styled';
+import ShowAlert from '../base/TMAlert';
+import TMButton from '../base/TMButton';
+import TMDropDownMenu from '../base/TMDropDownMenu';
+import { TMSplitterLayout, TMLayoutItem } from '../base/TMLayout';
+import TMModal from '../base/TMModal';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import TMSpinner from '../base/TMSpinner';
+import TMTooltip from '../base/TMTooltip';
+import TMUserChooser from '../choosers/TMUserChooser';
+import TMApplyForm from '../forms/TMApplyForm';
+import TMTidViewer from '../viewers/TMTidViewer';
+import TMListView from '../base/TMListView';
+export var SearchResultContext;
+(function (SearchResultContext) {
+    SearchResultContext["METADATA_SEARCH"] = "metadataSearch";
+    SearchResultContext["WORKFLOW_APPROVE"] = "workflowApprove";
+    SearchResultContext["FAVORITES"] = "favorites";
+    SearchResultContext["RECENT"] = "recent";
+})(SearchResultContext || (SearchResultContext = {}));
+const StyledWorkFlowOperationButtonsContainer = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-left: 50px;
+`;
+const StyledWorkFlowOpereationButton = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: ${props => props.$width};
+    height: ${props => props.$height};
+    font-weight: bold;
+    cursor: ${props => !props.$isDisabled ? 'pointer' : 'default'};
+    border-radius: 10px;
+    overflow: hidden;
+    color: white;
+    user-select: none;
+`;
+const StyledWorkFlowOpereationButtonIcon = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${props => props.$isHoverred ? '25px' : '0px'};
+    transition: width ease-in-out 100ms;
+    height: 100%;
+    background-color: ${props => props.$isDisabled ? '#b4b4b4' : props.$color ? `${props.$color}90` : props.$type === 'success' ? `${TMColors.success}90` : props.$type === 'error' ? `${TMColors.error}90` : props.$type === 'tertiary' ? `${TMColors.tertiary}90` : `${TMColors.primary}90`};
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+`;
+const StyledWorkFlowOpereationButtonText = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: ${props => props.$isDisabled ? '#d1d1d1' : props.$color ? props.$color : props.$type === 'success' ? `${TMColors.success}` : props.$type === 'error' ? `${TMColors.error}` : props.$type === 'tertiary' ? `${TMColors.tertiary}` : `${TMColors.primary}`};
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+`;
+const StyledTextArea = styled.textarea `
+    width: 100%; 
+    height: 100%; 
+    border: 1px solid ${props => props.$isValid ? '#b4b4b4' : TMColors.error}; 
+    border-radius: 10px; 
+    padding: 10px;
+    &:focus{
+        outline: none;
+        border-bottom: 4px solid ${props => props.$isValid ? TMColors.primary : TMColors.error};
+    }
+`;
+const StyledTitleContainer = styled.div ` width: max-content; height: max-content; font-weight:bold; border-radius: 5px; padding: 5px; background-color: #fff; color: #0e7418; margin-right: 10px; display: flex; align-items: center; gap: 2px; `;
+const WorfflowListItem = ({ data }) => {
+    return (_jsxs("div", { style: { width: '100%', padding: '2px 5px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', userSelect: 'none' }, children: [_jsx(TMTidViewer, { tid: data.fromTID, showIcon: true }), _jsx("div", { style: { padding: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', color: 'gray', borderRadius: 3 }, children: data.dcmtsReturned })] }));
+};
+export const TMButtonNew = ({ color, caption = '', disable = false, onClick, type = 'primary', icon = _jsx(IconApply, {}), width = '90px', height = '30px' }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    return (_jsxs(StyledWorkFlowOpereationButton, { "$width": width, "$height": height, onMouseOver: () => !disable && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disable, onClick: () => !disable && onClick && onClick(), children: [_jsx(StyledWorkFlowOpereationButtonIcon, { "$color": color, "$isHoverred": isHovered, "$isDisabled": disable, "$type": type, children: icon }), _jsxs(StyledWorkFlowOpereationButtonText, { "$color": color, "$isDisabled": disable, "$type": type, children: [" ", caption, " "] })] }));
+};
+const WorkFlowOperationButtons = ({ onApprove, onReAssign, onReject, approveDisable = false, reassignDisable = false, rejectDisable = false }) => {
+    return (_jsxs(StyledWorkFlowOperationButtonsContainer, { children: [_jsx(TMButtonNew, { icon: _jsx(IconApply, {}), caption: 'Approva', disable: approveDisable, onClick: () => !approveDisable && onApprove && onApprove(), type: 'success' }), _jsx(TMButtonNew, { icon: _jsx(IconCloseOutline, {}), caption: 'Rifiuta', disable: rejectDisable, onClick: () => !rejectDisable && onReject && onReject(), type: 'error' }), _jsx(TMButtonNew, { icon: _jsx(IconUser, { fontSize: 16 }), caption: 'Riassegna', disable: reassignDisable, onClick: () => !reassignDisable && onReAssign && onReAssign(), type: 'tertiary' }), _jsx(TMButtonNew, { icon: _jsx(IconInfo, { fontSize: 16 }), caption: 'Maggiori informazioni', width: '180px', disable: approveDisable, onClick: () => alert('TODO!!!'), type: 'primary' })] }));
+};
+const WorkFlowApproveRejectPopUp = ({ op, onClose, selectedItems = [], onUpdate }) => {
+    const [commentValue, setCommentValue] = useState('');
+    const disable = commentValue.length === 0;
+    const count = () => { return selectedItems.length.toString() + ' Workitem'; };
+    const completeWorkFlowAsync = async () => {
+        try {
+            TMSpinner.show();
+            for (let item of selectedItems) {
+                await SDK_Globals.tmSession?.NewWorkflowEngine().WorkItem_CompleteOrRejectAsync(item.TID, item.DID, commentValue, 0);
+            }
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            onClose && onClose();
+            TMSpinner.hide();
+        }
+    };
+    const rejectWorkFlowAsync = async () => {
+        try {
+            TMSpinner.show();
+            for (let item of selectedItems) {
+                await SDK_Globals.tmSession?.NewWorkflowEngine().WorkItem_CompleteOrRejectAsync(item.TID, item.DID, commentValue, 1);
+            }
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            onUpdate && onUpdate();
+            onClose && onClose();
+            TMSpinner.hide();
+        }
+    };
+    return (_jsx(TMModal, { toolbar: op === 0 ?
+            _jsx(TMButtonNew, { icon: _jsx(IconApply, {}), caption: 'Approva', disable: false, onClick: completeWorkFlowAsync, type: 'success' }) :
+            _jsx(TMButtonNew, { icon: _jsx(IconCloseOutline, {}), caption: 'Rifiuta', disable: disable, onClick: () => { !disable && rejectWorkFlowAsync(); }, type: 'error' }), onClose: onClose, width: '60%', height: '60%', isModal: true, title: (op === 0 ? 'Approva workflow ' + '(' + count() + ')' : 'Rifiuta workflow ' + '(' + count() + ')'), children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '10px', display: 'flex', flexDirection: 'column', gap: 5 }, children: [_jsxs("p", { style: { color: (op === 1 && disable) ? TMColors.error : 'black' }, children: ["Commento ", op === 1 && disable && _jsx("span", { children: ' (Campo obbligatorio)' }), " "] }), _jsx(StyledTextArea, { "$isValid": op === 0 ? true : !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value) })] }) }));
+};
+const WorkFlowReAssignPopUp = ({ onClose, selectedItems = [], onUpdate }) => {
+    const [commentValue, setCommentValue] = useState('');
+    const [selectedUserID, setSelectedUserID] = useState();
+    const disable = commentValue.length === 0 || !selectedUserID;
+    const count = () => { return selectedItems.length.toString() + ' Workitem'; };
+    const reAssignWorkFlowAsync = async () => {
+        try {
+            TMSpinner.show();
+            for (let item of selectedItems) {
+                await SDK_Globals.tmSession?.NewWorkflowEngine().WorkItem_ReassignAsync(item.TID, item.DID, selectedUserID, commentValue);
+            }
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            onUpdate && onUpdate();
+            onClose && onClose();
+            TMSpinner.hide();
+        }
+    };
+    return (_jsx(TMModal, { toolbar: _jsx(TMButtonNew, { icon: _jsx(IconUser, { fontSize: 16 }), caption: 'Riassegna', disable: disable, onClick: () => !disable && reAssignWorkFlowAsync(), type: 'tertiary' }), onClose: onClose, width: '60%', height: '60%', isModal: true, title: 'Riassegna workflow ' + '(' + count() + ')', children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '10px', display: 'flex', flexDirection: 'column', gap: 5 }, children: [_jsx(TMUserChooser, { value: selectedUserID, onValueChanged: (e) => setSelectedUserID(e) }), _jsxs("p", { style: { color: commentValue.length === 0 ? TMColors.error : 'black' }, children: ["Commento ", commentValue.length === 0 && _jsx("span", { children: ' (Campo obbligatorio)' }), " "] }), _jsx(StyledTextArea, { "$isValid": commentValue.length !== 0, value: commentValue, onChange: (e) => setCommentValue(e.target.value) })] }) }));
+};
+const TabView = ({ title = '', onMouseOut, onMouseOver, onClick, clickable, selectedTabBorderColor, icon = _jsx(IconApply, {}), count = 0 }) => {
+    return (_jsx(TMTooltip, { content: title, children: _jsxs("div", { onMouseOut: onMouseOut, onMouseOver: onMouseOver, onClick: onClick, style: { userSelect: 'none', width: 'max-content', padding: 5, height: '40px', display: 'flex', alignItems: 'center', position: 'relative', cursor: clickable ? 'pointer' : 'default' }, children: [_jsx("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '3px', backgroundColor: selectedTabBorderColor, transition: 'all ease 100ms' } }), _jsx("div", { style: { transform: 'translateY(2px)' }, children: icon }), _jsx(StyledBadge, { "$backgroundColor": '#679CE8', children: count })] }) }));
+};
+const TMQueryResultForm = ({ onUpdate, isModal, onClose, context = SearchResultContext.METADATA_SEARCH, result1, result2, elapsedTime, searchText, tabIcon1 = _jsx(IconApply, {}), tabIcon2 = _jsx(IconApply, {}), tabTitle1, tabTitle2 }) => {
+    const [currentSearchResult1, setCurrentSearchResult1] = useState();
+    const [currentSearchResult2, setCurrentSearchResult2] = useState();
+    const [selectedItems, setSelectedItems] = useState([]);
+    const [showApprovePopup, setShowApprovePopup] = useState(false);
+    const [showRejectPopup, setShowRejectPopup] = useState(false);
+    const [showReAssignPopup, setShowReAssignPopup] = useState(false);
+    const [showHiddenSelectItems, setShowHiddenSelectItems] = useState(false);
+    const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+    const [hoveredTab, setHoveredTab] = useState(undefined);
+    const [tabCount1, setTabCount1] = useState(0);
+    const [tabCount2, setTabCount2] = useState(0);
+    const [splitterSize, setSplitterSize] = useState(['100%', '0']);
+    const [hasBack, setHasBack] = useState(false);
+    let disable = selectedItems.length === 0;
+    const orderByName = (array) => {
+        let arr = [...array];
+        return arr.sort((a, b) => { if (a['fromName'] < b['fromName']) {
+            return -1;
+        } if (a['fromName'] > b['fromName']) {
+            return 1;
+        } return 0; });
+    };
+    let toolbarElements = [
+        _jsx(TMButton, { caption: "Aggiorna", icon: _jsx(IconRefresh, {}), btnStyle: 'toolbar', fontSize: '1.3rem', elementStyle: { marginRight: context === SearchResultContext.WORKFLOW_APPROVE ? '10px' : '0' }, onClick: () => context === SearchResultContext.WORKFLOW_APPROVE ? onUpdate && onUpdate() : alert('todo') }, "btn1"),
+        _jsx(TMButton, { caption: "Sincronizza elementi query", icon: _jsx(IconSync, {}), btnStyle: 'toolbar', fontSize: '1.3rem', elementStyle: { marginRight: '10px' }, onClick: () => { ShowAlert({ message: "TODO Sync Query", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }, "btn2"),
+        _jsx(TMButton, { caption: "Download documento", icon: _jsx(IconDownload, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => { ShowAlert({ message: "TODO Download documento", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }, "btn3"),
+        _jsx(TMButton, { caption: "Apri form", icon: _jsx(IconPreview, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => { ShowAlert({ message: "TODO Apri form", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }, "btn4"),
+        _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { icon: _jsx(IconPrinter, {}), caption: 'Stampa', btnStyle: 'toolbar', fontSize: '1.3rem' }), items: [
+                { icon: _jsx(IconCheckIn, {}), text: "Stampa con TopMedia", onClick: () => ShowAlert({ message: "TODO Stampa con TopMedia", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconCheckIn, {}), text: "Stampa con Acrobat", onClick: () => ShowAlert({ message: "TODO Stampa con Acrobat", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+            ] }, "btn5"),
+        _jsx(TMButton, { caption: "Vizualizza/Modifica metadati", icon: _jsx(IconEdit, {}), btnStyle: 'toolbar', fontSize: '1.3rem', elementStyle: { marginRight: '10px' }, onClick: () => { ShowAlert({ message: "TODO Vizualizza/Modifica metadati", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }, "btn6"),
+        _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { icon: _jsx(IconCheckIn, {}), caption: 'Check in', btnStyle: 'toolbar', fontSize: '1.3rem' }), items: [
+                { icon: _jsx(IconCheckIn, {}), text: "Check out", onClick: () => ShowAlert({ message: "TODO Check out", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconCheckIn, {}), text: "Modifica file", onClick: () => ShowAlert({ message: "TODO Modifica file", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconCheckIn, {}), text: "Annulla check out", onClick: () => ShowAlert({ message: "TODO Annulla check out", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconCheckIn, {}), text: "Check in", onClick: () => ShowAlert({ message: "TODO Check in", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconCheckIn, {}), text: "Cronologia", onClick: () => ShowAlert({ message: "TODO Cronologia", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+            ] }, "btn7"),
+        _jsx(TMButton, { caption: "Aggiungi a preferiti", icon: _jsx(IconStar, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => { ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }, "btn8"),
+        _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'toolbar', caption: 'Operazioni ricorsive', icon: _jsx(IconRecursiveOps, {}) }), items: [
+                {
+                    icon: _jsx(IconMail, {}), text: "Invia per posta", items: [
+                        { icon: _jsx(IconMail, {}), text: "I documenti selezionati", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                        { icon: _jsx(IconMail, {}), text: "I documenti di primo livello e tutti i documenti correlati", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                        { icon: _jsx(IconMail, {}), text: "I documenti di primo livello e i documenti correlati personalizzando l'operazione", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                    ]
+                },
+                {
+                    icon: _jsx(IconDcmtTypeOnlyMetadata, {}), text: "Unisci in un file PDF", items: [
+                        { icon: _jsx(IconDcmtTypeOnlyMetadata, {}), text: "I documenti selezionati", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                        { icon: _jsx(IconDcmtTypeOnlyMetadata, {}), text: "I documenti di primo livello e tutti i documenti correlati", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                        { icon: _jsx(IconDcmtTypeOnlyMetadata, {}), text: "I documenti di primo livello e i documenti correlati personalizzando l'operazione", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                    ]
+                },
+                {
+                    icon: _jsx(IconCopy, {}), text: "Copia in una cartella", items: [
+                        { icon: _jsx(IconCopy, {}), text: "I documenti selezionati", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                        { icon: _jsx(IconCopy, {}), text: "I documenti di primo livello e tutti i documenti correlati", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                        { icon: _jsx(IconCopy, {}), text: "I documenti di primo livello e i documenti correlati personalizzando l'operazione", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                    ]
+                },
+            ] }, "btn9"),
+        _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { icon: _jsx(IconRelation, {}), caption: 'Correlazioni', btnStyle: 'toolbar', fontSize: '1.3rem' }), items: [
+                { icon: _jsx(IconRelation, {}), text: "Abbina documenti molti a molti", onClick: () => ShowAlert({ message: "TODO Abbina documenti molti a molti", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconRelation, {}), text: "Disabbina documenti molti a molti", onClick: () => ShowAlert({ message: "TODO Disabbina documenti molti a molti", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconRelation, {}), text: "Archivia documento dettaglio", beginGroup: true, onClick: () => ShowAlert({ message: "TODO Archivia documento dettaglio", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconRelation, {}), text: "Archivia documento master", onClick: () => ShowAlert({ message: "TODO Archivia documento master", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconRelation, {}), text: "Documenti master", beginGroup: true, onClick: () => ShowAlert({ message: "TODO Documenti master", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+            ] }, "btn10"),
+        _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { icon: _jsx(IconSignature, {}), btnStyle: 'toolbar', caption: 'Firma', fontSize: '1.3rem' }), items: [
+                { icon: _jsx(IconSignature, {}), text: "Informazioni di firma", onClick: () => ShowAlert({ message: "TODO Informazioni di firma", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconSignature, {}), text: "Verifica firma", onClick: () => ShowAlert({ message: "TODO Verifica firma", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconSignature, {}), text: "Firma e marca", onClick: () => ShowAlert({ message: "TODO Firma e marca", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+            ] }, "btn11"),
+        _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'toolbar', caption: 'Cancellazione', icon: _jsx(IconDelete, {}) }), items: [
+                { icon: _jsx(IconDelete, {}), text: "Cancellazione logica", onClick: () => ShowAlert({ message: "TODO Cancellazione logica", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconUndo, {}), text: "Ripristina", onClick: () => ShowAlert({ message: "TODO Ripristina", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconCloseCircle, {}), text: "Cancellazione fisica", onClick: () => ShowAlert({ message: "TODO Cancellazione fisica", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+            ] }, "btn12"),
+        _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'toolbar', caption: 'Altro', icon: _jsx(IconMenuVertical, {}) }), items: [
+                { icon: _jsx(IconArchiveDoc, {}), text: "Passa ad archiviazione", onClick: () => ShowAlert({ message: "TODO Passa ad archiviazione", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconDuplicate, {}), text: "Duplica documento", onClick: () => ShowAlert({ message: "TODO Duplica documento", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconSubstFile, { fontSize: 18 }), text: "Aggiungi/sostituisci file", onClick: () => ShowAlert({ message: "TODO Aggiungi/sostituisci file", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconConvertFilePdf, { fontSize: 18 }), text: "Conversione file", onClick: () => ShowAlert({ message: "TODO Conversione file", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconCheckFile, { fontSize: 18 }), text: "Controllo file", onClick: () => ShowAlert({ message: "TODO Controllo file", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconBatchUpdate, { fontSize: 18 }), text: "Modifica multipla", onClick: () => ShowAlert({ message: "TODO Modifica multipla", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconShare, { fontSize: 18 }), text: "Archiviazione condivisa", beginGroup: true, onClick: () => ShowAlert({ message: "TODO Archiviazione condivisa", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconSharedDcmt, { fontSize: 18 }), text: "Documenti condivisi", onClick: () => ShowAlert({ message: "TODO Documenti condivisi", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                {
+                    icon: _jsx(IconSearch, {}), text: "Trova tutti i riferimenti", beginGroup: true, items: [
+                        { icon: _jsx(IconSearch, {}), text: "Trova tutti i riferimenti", onClick: () => ShowAlert({ message: "TODO Trova tutti i riferimenti", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                        { icon: _jsx(IconSearch, {}), text: "Trova tutti i riferimenti (anche nello storico)", onClick: () => ShowAlert({ message: "TODO Trova tutti i riferimenti (anche nello storico)", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                    ]
+                },
+                { icon: _jsx(IconExportTo, { fontSize: 18 }), text: "Esporta in...", onClick: () => ShowAlert({ message: "TODO Esporta in", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconShow, {}), text: "Mostra footer", onClick: () => ShowAlert({ message: "TODO Mostra footer", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                { icon: _jsx(IconSettings, {}), text: "Visualizza o nasconde i metadati nascosti", onClick: () => setShowHiddenSelectItems(!showHiddenSelectItems) },
+            ] }, "btn13"),
+        _jsx(WorkFlowOperationButtons, { onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), approveDisable: disable, rejectDisable: disable, reassignDisable: disable }, 'btn14')
+    ];
+    let mobileHeaderTitle = [
+        _jsxs(StyledTitleContainer, { children: [context === SearchResultContext.WORKFLOW_APPROVE ? _jsx(IconActivityLog, { fontSize: 14 }) : context === SearchResultContext.FAVORITES ? _jsx(IconStar, {}) : context === SearchResultContext.RECENT ? _jsx(IconRefresh, {}) : '', context === SearchResultContext.WORKFLOW_APPROVE ? SDKUI_Localizator.WorkflowApproval : context === SearchResultContext.FAVORITES ? SDKUI_Localizator.Favorites : context === SearchResultContext.RECENT ? SDKUI_Localizator.Recent : ''] }, context === SearchResultContext.WORKFLOW_APPROVE ? 'title2' : context === SearchResultContext.FAVORITES ? 'title0' : context === SearchResultContext.RECENT ? 'title1' : '')
+    ];
+    const [toolbar, setToolbar] = useState(toolbarElements);
+    let width = useWindowWidth();
+    let isMobile = width <= MOBILE_WIDTH;
+    useEffect(() => { if (isMobile) {
+        setCurrentSearchResult1(undefined);
+        setCurrentSearchResult2(undefined);
+    }
+    else {
+        if (Array.isArray(result1)) {
+            setCurrentSearchResult1(orderByName(result1)[0]);
+        }
+        ;
+        if (Array.isArray(result2)) {
+            setCurrentSearchResult2(orderByName(result2)[0]);
+        }
+    } }, [isMobile, result1, result2]);
+    useEffect(() => {
+        let arr = [...toolbarElements];
+        if (isMobile && hasBack) {
+            arr.unshift(_jsx(TMButton, { caption: SDKUI_Localizator.Back, icon: _jsx(IconArrowLeft, {}), btnStyle: 'toolbar', color: 'tertiary', fontSize: '1.3rem', onClick: () => { setSplitterSize(['100%', '0']); setHasBack(false); let arr = [...toolbar]; arr = arr.filter(item => item.key !== 'btn00'); } }, "btn00"));
+        }
+        if (!isMobile || !hasBack) {
+            arr = arr.filter(item => item.key !== 'btn00');
+        }
+        if (context === SearchResultContext.METADATA_SEARCH) {
+            arr = arr.filter(item => item.key !== 'btn14');
+            arr = arr.filter(item => item.key !== 'btn5');
+            arr = arr.filter(item => item.key !== 'btn6');
+        }
+        if (context === SearchResultContext.WORKFLOW_APPROVE) {
+            arr.unshift(_jsxs(StyledTitleContainer, { style: { gap: 5 }, children: [_jsx(IconActivityLog, { fontSize: 14 }), " ", SDKUI_Localizator.WorkflowApproval] }, 'title2'));
+            arr = arr.filter(item => item.key !== 'btn2');
+            arr = arr.filter(item => item.key !== 'btn4');
+            arr = arr.filter(item => item.key !== 'btn8');
+        }
+        else {
+            arr = arr.filter(item => item.key !== 'title2');
+        }
+        if (context === SearchResultContext.FAVORITES) {
+            arr.unshift(_jsxs(StyledTitleContainer, { children: [_jsx(IconStar, {}), " ", SDKUI_Localizator.Favorites] }, 'title0'));
+        }
+        else {
+            arr = arr.filter(item => item.key !== 'title0');
+        }
+        if (context === SearchResultContext.RECENT) {
+            arr.unshift(_jsxs(StyledTitleContainer, { children: [_jsx(IconRefresh, {}), " ", SDKUI_Localizator.Recent] }, 'title1'));
+        }
+        else {
+            arr = arr.filter(item => item.key !== 'title1');
+        }
+        setToolbar(arr);
+    }, [context, selectedItems, isMobile, hasBack]);
+    useEffect(() => {
+        let c = 0;
+        if (Array.isArray(result1)) {
+            for (let res of result1) {
+                if (res.dcmtsFound)
+                    c += res.dcmtsFound;
+            }
+        }
+        setTabCount1(c);
+    }, [result1]);
+    useEffect(() => {
+        let c = 0;
+        if (Array.isArray(result2)) {
+            for (let res of result2) {
+                if (res.dcmtsFound)
+                    c += res.dcmtsFound;
+            }
+        }
+        setTabCount2(c);
+    }, [result2]);
+    useEffect(() => { setSelectedItems([]); }, [currentSearchResult1, currentSearchResult2]);
+    // useEffect(() => {
+    //     const handleTabChange = (e: any) => {
+    //         if (e.key === 'ArrowLeft') {
+    //             e.preventDefault();
+    //             selectedTabIndex === 1 && setSelectedTabIndex(0)
+    //         }
+    //         if (e.key === 'ArrowRight') {
+    //             e.preventDefault();
+    //             selectedTabIndex === 0 && setSelectedTabIndex(1)
+    //         }
+    //     }
+    //     window.addEventListener('keydown', handleTabChange)
+    //     return () => window.removeEventListener('keydown', handleTabChange)
+    // }, [selectedTabIndex])
+    return (_jsxs(TMApplyForm, { isModal: isModal, formMode: FormModes.None, showApply: false, showUndo: false, hasNavigation: false, onClose: onClose, showBack: context === SearchResultContext.METADATA_SEARCH, customToolbarElements: SDK_Globals.tmSession?.SessionDescr?.appModuleID == AppModules.ORCHESTRATOR ? [] : isMobile && context !== SearchResultContext.METADATA_SEARCH && !hasBack ? mobileHeaderTitle : toolbar, children: [Array.isArray(result1)
+                ?
+                    _jsxs(TMSplitterLayout, { showSeparator: !isMobile, direction: 'horizontal', min: ['0', '0'], start: !isMobile ? ['20%', '80%'] : splitterSize, children: [_jsx(TMLayoutItem, { children: _jsxs("div", { style: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: { width: '100%', height: 'calc(100% - 40px)' }, children: _jsx(TMListView, { orderBy: 'fromName', exprKey: 'fromTID', dataSource: selectedTabIndex === 0 ? result1 : result2 && Array.isArray(result2) ? result2 : [], customColor: '#0e7418', id: `workflow-approve-list-view${selectedTabIndex.toString()}`, itemTemplate: (data) => _jsx(WorfflowListItem, { data: data }), selectedItem: selectedTabIndex === 0 ? currentSearchResult1 : currentSearchResult2, onSelectionChanged: (e) => { if (selectedTabIndex === 0) {
+                                                    setCurrentSearchResult1(e);
+                                                }
+                                                else {
+                                                    setCurrentSearchResult2(e);
+                                                } ; if (isMobile) {
+                                                    setSplitterSize(['0', '100%']);
+                                                    setHasBack(true);
+                                                } }, onItemDblClick: (e) => alert(e.fromName), searchKeys: ['fromTID', 'fromName'] }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 10, alignItems: 'center', width: '100%', height: '40px', borderTop: '1px #e1e1e1 solid', borderBottom: '1px solid #e1e1e1' }, children: [_jsx(TabView, { clickable: result2 && Array.isArray(result2), count: tabCount1, icon: tabIcon1, onClick: () => setSelectedTabIndex(0), onMouseOut: () => setHoveredTab(undefined), onMouseOver: () => setHoveredTab(0), selectedTabBorderColor: selectedTabIndex === 0 ? '#0e7418' : hoveredTab === 0 ? '#c1c1c1' : 'transparent', title: tabTitle1 }), result2 && _jsx(TabView, { clickable: true, count: tabCount2, icon: tabIcon2, onClick: () => setSelectedTabIndex(1), onMouseOut: () => setHoveredTab(undefined), onMouseOver: () => setHoveredTab(1), selectedTabBorderColor: selectedTabIndex === 1 ? '#0e7418' : hoveredTab === 1 ? '#c1c1c1' : 'transparent', title: tabTitle2 })] })] }) }), _jsxs(TMLayoutItem, { children: [" ", _jsx(TMQueryResult, { onDblClick: () => alert('open form'), onSelectionChanged: (e) => setSelectedItems(e), result: selectedTabIndex === 0 ? currentSearchResult1 : currentSearchResult2, showHiddenSelectItems: showHiddenSelectItems, elapsedTime: elapsedTime, searchText: searchText })] })] })
+                :
+                    _jsx(TMQueryResult, { onSelectionChanged: (e) => setSelectedItems(e), result: result1, showHiddenSelectItems: showHiddenSelectItems, elapsedTime: elapsedTime, searchText: searchText }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { onUpdate: onUpdate, selectedItems: selectedItems, op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { onUpdate: onUpdate, selectedItems: selectedItems, op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { onUpdate: onUpdate, selectedItems: selectedItems, onClose: () => setShowReAssignPopup(false) })] }));
+};
+export default TMQueryResultForm;

package/lib/components/sidebar/TMHeader.d.ts

@@ -23,7 +23,9 @@ interface ITMHeader {
     onSeacrhQEValueChange?: (e: string) => void;
     onSettingsClick?: () => void;
 }
-export declare const TMSearchBar: ({ searchValue, onSearchValueChanged }: {
+export declare const TMSearchBar: ({ searchValue, onSearchValueChanged, maxWidth, marginLeft }: {
+    maxWidth?: string;
+    marginLeft?: string;
     searchValue: string;
     onSearchValueChanged: (value: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;