@topconsultnpm/sdkui-react 6.20.0-dev1.2 → 6.20.0-dev1.21

package/lib/components/features/documents/TMDcmtPreview.js

@@ -8,13 +8,42 @@ import { FileExtensionHandler, FormModes } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
-import TMDropDownMenu from '../../base/TMDropDownMenu';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
 import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../../forms/TMSaveForm';
 import { StyledAnimatedComponentOpacity } from '../../base/Styled';
 import TMPanel from '../../base/TMPanel';
 import TMTooltip from '../../base/TMTooltip';
+import { ContextMenu } from '../../NewComponents/ContextMenu';
+let Document = null;
+let Page = null;
+let pdfjs = null;
+let isPdfLibraryLoaded = false;
+let loadingPromise = null;
+const loadPdfLibrary = async () => {
+    if (isPdfLibraryLoaded)
+        return;
+    if (loadingPromise)
+        return loadingPromise;
+    loadingPromise = (async () => {
+        try {
+            const reactPdf = await import('react-pdf');
+            Document = reactPdf.Document;
+            Page = reactPdf.Page;
+            pdfjs = reactPdf.pdfjs;
+            pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+            isPdfLibraryLoaded = true;
+        }
+        catch (error) {
+            console.error('Failed to load react-pdf library:', error);
+            throw error;
+        }
+        finally {
+            loadingPromise = null;
+        }
+    })();
+    return loadingPromise;
+};
 const ErrorContent = ({ error, isAbortError, onRetry }) => {
     if (isAbortError) {
         return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [_jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), _jsxs(StyledPreviewNotAvailable, { children: [_jsx("div", { children: error }), _jsx("div", { children: SDKUI_Localizator.PreviewNotAvailable })] }), _jsx(TMButton, { caption: SDKUI_Localizator.TryAgain, onClick: onRetry, showTooltip: false })] }) }));
@@ -124,10 +153,11 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev
             console.error('Error reopening document:', error);
         }
     };
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanel, { padding: '0', title: titleHandler(), onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [onPrev && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), onNext && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(StyledHeaderIcon, { "$color": TMColors.primaryColor, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: [
-                                { icon: _jsx(IconCloseCircle, {}), text: SDKUI_Localizator.RemoveFromCache, onClick: () => { removeDcmtsFileCache(cacheKey); setIsFromCache(false); } },
-                                { icon: _jsx(IconClear, {}), text: SDKUI_Localizator.ClearCache, onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
-                            ] }, "btn13") }), _jsx(StyledHeaderIcon, { onClick: reOpenDcmt, "$color": TMColors.primaryColor, children: _jsx(TMTooltip, { content: SDKUI_Localizator.ReopenDocument, children: _jsx(IconRefresh, {}) }) })] }), children: error
+    const cacheMenuItems = useMemo(() => [
+        { icon: _jsx(IconCloseCircle, {}), name: SDKUI_Localizator.RemoveFromCache, onClick: () => { removeDcmtsFileCache(cacheKey); setIsFromCache(false); } },
+        { icon: _jsx(IconClear, {}), name: SDKUI_Localizator.ClearCache, onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
+    ], [cacheKey, removeDcmtsFileCache, clearDcmtsFileCache, setIsFromCache]);
+    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanel, { padding: '0', title: titleHandler(), onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [onPrev && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), onNext && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(StyledHeaderIcon, { "$color": TMColors.primaryColor, children: _jsx(ContextMenu, { items: cacheMenuItems, trigger: "left", children: _jsx(IconMenuVertical, {}) }) }), _jsx(StyledHeaderIcon, { onClick: reOpenDcmt, "$color": TMColors.primaryColor, children: _jsx(TMTooltip, { content: SDKUI_Localizator.ReopenDocument, children: _jsx(IconRefresh, {}) }) })] }), children: error
                 ? _jsx(ErrorContent, { error: error, isAbortError: isAbortError, onRetry: reOpenDcmt })
                 : renderedPreview(dcmtData?.tid, dcmtData?.did, dcmtData?.fileExt, dcmtData?.fileSize, dcmtData?.fileCount, extensionHandler(dcmtData?.fileExt), showPreview, isResizingActive, () => { loadDocumentWithCache(); setShowPreview(true); }, dcmtBlob) }) }));
 };
@@ -137,6 +167,8 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
     const [fileType, setFileType] = useState(undefined);
     const [formattedXml, setFormattedXml] = useState(undefined);
     const [isMobile, setIsMobile] = useState(false);
+    const [numPages, setNumPages] = useState(0);
+    const [pdfLibraryLoading, setPdfLibraryLoading] = useState(false);
     useEffect(() => {
         const checkIsMobile = () => {
             const userAgent = navigator.userAgent || navigator.vendor || window.opera;
@@ -164,8 +196,23 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
     }, []);
     useEffect(() => {
         if (fileBlob) {
-            setFileType(fileBlob.type);
+            const blobType = fileBlob.type;
+            setFileType(blobType);
             setFormattedXml(undefined);
+            // Load PDF library immediately if it's a PDF file on mobile
+            if (isMobile && blobType === 'application/pdf' && !isPdfLibraryLoaded && !pdfLibraryLoading) {
+                setPdfLibraryLoading(true);
+                loadPdfLibrary()
+                    .then(() => {
+                    console.log('PDF library loaded successfully');
+                })
+                    .catch((error) => {
+                    console.error('Failed to load PDF library:', error);
+                })
+                    .finally(() => {
+                    setPdfLibraryLoading(false);
+                });
+            }
             const fileName = fileBlob.name || '';
             const fileExtension = fileName.split('.').pop()?.toLowerCase() || '';
             const isConfigFile = ['config', 'cfg'].includes(fileExtension);
@@ -223,36 +270,31 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
         return (_jsx(ImageViewer, { fileBlob: fileBlob, alt: '' }));
     }
     if (fileType === 'application/pdf' && isMobile) {
-        return (_jsx("object", { data: blobUrl, type: "application/pdf", width: "100%", height: "100%", style: {
-                border: 'none',
-                zIndex: 0,
-                pointerEvents: isResizingActive === true ? "none" : "auto"
-            }, children: _jsxs("div", { style: {
-                    padding: '40px',
-                    textAlign: 'center',
+        if (!isPdfLibraryLoaded || pdfLibraryLoading || !Document || !Page) {
+            return (_jsxs("div", { style: {
                     display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
                     justifyContent: 'center',
+                    alignItems: 'center',
                     height: '100%',
-                    gap: '20px'
-                }, children: [_jsx(IconPreview, { fontSize: 96 }), _jsxs("div", { children: [_jsx("h3", { children: SDKUI_Localizator.PDFDocument }), _jsx("p", { children: SDKUI_Localizator.PreviewNotAvailableOnDevice })] }), _jsxs("div", { style: { display: 'flex', gap: '10px', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }, children: [_jsx("a", { href: blobUrl, download: "document.pdf", style: {
-                                    minWidth: '180px',
-                                    padding: '12px 24px',
-                                    backgroundColor: TMColors.primaryColor,
-                                    color: 'white',
-                                    textDecoration: 'none',
-                                    borderRadius: '4px',
-                                    display: 'inline-block'
-                                }, children: SDKUI_Localizator.DownloadFile }), _jsx("a", { href: blobUrl, target: "_blank", rel: "noopener noreferrer", style: {
-                                    minWidth: '180px',
-                                    padding: '12px 24px',
-                                    backgroundColor: TMColors.primaryColor,
-                                    color: 'white',
-                                    textDecoration: 'none',
-                                    borderRadius: '4px',
-                                    display: 'inline-block'
-                                }, children: SDKUI_Localizator.OpenInNewTab })] })] }) }, blobUrl));
+                    flexDirection: 'column',
+                    gap: '10px'
+                }, children: [_jsx(IconPreview, { fontSize: 64 }), _jsxs("div", { children: [SDKUI_Localizator.Loading, "..."] })] }));
+        }
+        return (_jsx(PDFViewerContainer, { children: _jsx(Document, { file: blobUrl, onLoadSuccess: ({ numPages }) => setNumPages(numPages), loading: _jsxs("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100%',
+                        flexDirection: 'column',
+                        gap: '10px'
+                    }, children: [_jsx(IconPreview, { fontSize: 64 }), _jsxs("div", { children: [SDKUI_Localizator.Loading, "..."] })] }), error: _jsxs("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100%',
+                        flexDirection: 'column',
+                        gap: '10px'
+                    }, children: [_jsx(IconCloseOutline, { fontSize: 64, color: TMColors.error }), _jsx("div", { children: "Errore nel caricamento del PDF" })] }), children: Array.from(new Array(numPages), (el, index) => (_jsx(Page, { pageNumber: index + 1, renderTextLayer: false, renderAnnotationLayer: false, width: window.innerWidth }, `page_${index + 1}`))) }) }));
     }
     return (_jsx("iframe", { srcDoc: formattedXml ? `<html><body>${formattedXml}</body></html>` : undefined, src: !formattedXml
             ? (fileType === 'application/pdf' ? `${blobUrl}#view=FitH&scrollbar=1` : blobUrl)
@@ -475,3 +517,28 @@ const StyledImage = styled.img.attrs(props => ({
   pointer-events: none;
   position: absolute;
 `;
+const PDFViewerContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #f5f5f5;
+  
+  .react-pdf__Document {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 0;
+  }
+  
+  .react-pdf__Page {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    margin: 0 auto;
+  }
+  
+  .react-pdf__Page__canvas {
+    max-width: 100%;
+    height: auto !important;
+  }
+`;

package/lib/components/features/search/TMDcmtCheckoutInfoForm.d.ts

@@ -0,0 +1,8 @@
+import { DcmtInfo } from "../../../ts";
+interface TMDcmtCheckoutInfoFormProps {
+    dtdName: string;
+    selectedDcmtOrFocused: DcmtInfo;
+    onClose: () => void;
+}
+declare const TMDcmtCheckoutInfoForm: (props: TMDcmtCheckoutInfoFormProps) => import("react/jsx-runtime").JSX.Element;
+export default TMDcmtCheckoutInfoForm;

package/lib/components/features/search/{TMSearchResultCheckoutInfoForm.js → TMDcmtCheckoutInfoForm.js}

@@ -5,14 +5,14 @@ import { IconBxInfo, IconFileDots, IconFolder, SDKUI_Globals, SDKUI_Localizator
 import { FormModes } from "../../../ts";
 import { ResultTypes, ValidationItem } from "@topconsultnpm/sdk-ts";
 import { SaveFormOptions, useSaveForm } from "../../../hooks/useForm";
-import { getCicoDownloadFileName, updateDcmtCheckoutItem } from "../../../helper/cicoHelper";
+import { getCicoDownloadFileName, updateCicoCheckoutStorageItem } from "../../../helper/checkinCheckoutManager";
 import { TMColors } from "../../../utils/theme";
 import TMLayoutContainer, { TMLayoutItem } from "../../base/TMLayout";
 import TMTooltip from "../../base/TMTooltip";
 import TMTextBox from "../../editors/TMTextBox";
 import ShowAlert from "../../base/TMAlert";
 import { TMExceptionBoxManager } from "../../base/TMPopUp";
-const TMSearchResultCheckoutInfoForm = (props) => {
+const TMDcmtCheckoutInfoForm = (props) => {
     const { dtdName, selectedDcmtOrFocused, onClose } = props;
     const [initialDcmtCheckoutFolder, setInitialDcmtCheckoutFolder] = useState("");
     const [initialDcmtCheckoutName, setInitialDcmtCheckoutName] = useState("");
@@ -31,7 +31,7 @@ const TMSearchResultCheckoutInfoForm = (props) => {
         const dcmtCheckoutInfoCurrentItems = [...SDKUI_Globals.userSettings.dcmtCheckoutInfo];
         const existingItem = dcmtCheckoutInfoCurrentItems.find((item) => item.TID === selectedDcmtOrFocused.TID.toString() && item.DID === selectedDcmtOrFocused.DID.toString());
         const folder = existingItem?.checkoutFolder ?? "";
-        const name = existingItem?.checkoutName ?? getCicoDownloadFileName(dtdName ?? SDKUI_Localizator.SearchResult, selectedDcmtOrFocused, true, false);
+        const name = existingItem?.checkoutName ?? getCicoDownloadFileName({ type: 'dcmtInfo', dcmtInfo: selectedDcmtOrFocused, originalFileName: dtdName ?? SDKUI_Localizator.SearchResult }, true, false);
         // Set form data
         setFormData({
             ...formData,
@@ -57,13 +57,8 @@ const TMSearchResultCheckoutInfoForm = (props) => {
             // Check: formData must exist, selectedDcmtOrFocused.TID and selectedDcmtOrFocused.DID must exist, and at least one of checkoutFolder or checkoutName must be filled
             if (formData && selectedDcmtOrFocused.TID && selectedDcmtOrFocused.DID) {
                 // Create a new draft checkout item with TID, DID, and folder/name values
-                const newItem = {
-                    TID: selectedDcmtOrFocused.TID.toString(),
-                    DID: selectedDcmtOrFocused.DID.toString(),
-                    checkoutFolder: formData.checkoutFolder ?? "",
-                    checkoutName: formData.checkoutName ?? ""
-                };
-                updateDcmtCheckoutItem(newItem, "addOrUpdate");
+                const newItem = { TID: selectedDcmtOrFocused.TID.toString(), DID: selectedDcmtOrFocused.DID.toString(), checkoutFolder: formData.checkoutFolder ?? "", checkoutName: formData.checkoutName ?? "" };
+                updateCicoCheckoutStorageItem(newItem, "dcmtInfo", "addOrUpdate");
                 onClose();
                 ShowAlert({ mode: 'success', title: SDKUI_Localizator.CheckoutInfo, message: SDKUI_Localizator.OperationSuccess, duration: 3000 });
             }
@@ -131,4 +126,4 @@ const TMSearchResultCheckoutInfoForm = (props) => {
                                             e.currentTarget.style.color = TMColors.primary;
                                         }, children: SDKUI_Localizator.Cancel })] })] }) }) }) }) });
 };
-export default TMSearchResultCheckoutInfoForm;
+export default TMDcmtCheckoutInfoForm;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PlatformObjectValidator, WhereItem, SDK_Localizator, OrderByItem, SelectItem, SelectItemVisibilities, SDK_Globals, SavedQueryCacheService, SearchEngine, QueryOperators } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import TMSearchQueryEditor from './TMSearchQueryEditor';
@@ -11,7 +11,6 @@ import { StyledModalContainer } from '../../base/Styled';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
-import TMDropDownMenu from '../../base/TMDropDownMenu';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import TMPanel from '../../base/TMPanel';
@@ -19,6 +18,7 @@ import TMDistinctValues from '../../choosers/TMDistinctValues';
 import { TMMetadataChooserForm } from '../../choosers/TMMetadataChooser';
 import TMQueryEditor from '../../query/TMQueryEditor';
 import TMSavedQueryForm from './TMSavedQueryForm';
+import { ContextMenu } from '../../NewComponents/ContextMenu';
 import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
 import TMToppyMessage from '../../../helper/TMToppyMessage';
 const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, inputMids, onSearchCompleted, onSqdSaved, onBack, onClosePanel, allowMaximize = true, onMaximizePanel, onBackToResult, passToArchiveCallback }) => {
@@ -299,20 +299,21 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
         }
         setQd({ ...qd, orderBy: newOrderBy });
     }, [qd, fromDTD?.metadata, SQD?.masterTID]);
+    const contextMenuItems = useMemo(() => [
+        ...(showBackToResultButton ? [{ icon: _jsx(IconArrowRight, {}), name: "Vai a risultato", onClick: () => { onBackToResult?.(); } }] : []),
+        { icon: _jsx(IconAddCircleOutline, {}), name: SDKUI_Localizator.SavedQueryNew, beginGroup: showBackToResultButton, onClick: () => { openSqdForm(FormModes.Create); } },
+        { icon: _jsx(IconEdit, {}), name: SDKUI_Localizator.SavedQueryUpdate, disabled: (SQD && SQD.id == 1), onClick: () => { openSqdForm(FormModes.Update); } },
+        { icon: showAdvancedSearch ? _jsx(IconEasy, {}) : _jsx(IconAdvanced, {}), beginGroup: true, name: showAdvancedSearch ? SDKUI_Localizator.Search_Easy : SDKUI_Localizator.Search_Advanced, onClick: () => { changeAdvancedSearchAsync(!showAdvancedSearch); } },
+        { icon: _jsx(IconEdit, {}), name: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryWhere}`, beginGroup: true, onClick: () => { setShowFiltersConfig(true); } },
+        { icon: _jsx(IconEdit, {}), name: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QuerySelect}`, onClick: () => { setShowOutputConfig(true); } },
+        { icon: _jsx(IconEdit, {}), name: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryOrderBy}`, onClick: () => { setShowOrderByConfig(true); } },
+        { icon: _jsx(IconMenuCAArchive, { viewBox: '11 11.5 26 27', fontSize: 16, strokeWidth: 2, color: 'black' }), beginGroup: true, name: SDKUI_Localizator.PassToArchive, onClick: handlePassToArchive }
+    ], [showBackToResultButton, showAdvancedSearch, SQD, onBackToResult, openSqdForm, changeAdvancedSearchAsync, setShowFiltersConfig, setShowOutputConfig, setShowOrderByConfig, handlePassToArchive]);
     const captionText = showAllMdWhere ? SDKUI_Localizator.ShowLess : SDKUI_Localizator.ShowAll;
     let maxItems = getListMaxItems(deviceType ?? DeviceType.DESKTOP);
     const diff = (qd?.where?.length ?? 0) - maxItems;
     return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, onBack: onBack, onActiveChanged: handlePanelActiveChanged, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
-                        _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false, onClick: () => setIsQueryPanelActive(true) }), items: [
-                                ...(showBackToResultButton ? [{ icon: _jsx(IconArrowRight, {}), text: "Vai a risultato", onClick: () => { onBackToResult?.(); } }] : []),
-                                { icon: _jsx(IconAddCircleOutline, {}), beginGroup: true, text: SDKUI_Localizator.SavedQueryNew, onClick: () => { openSqdForm(FormModes.Create); } },
-                                { icon: _jsx(IconEdit, {}), text: SDKUI_Localizator.SavedQueryUpdate, disabled: (SQD && SQD.id == 1), onClick: () => { openSqdForm(FormModes.Update); } },
-                                { icon: showAdvancedSearch ? _jsx(IconEasy, {}) : _jsx(IconAdvanced, {}), beginGroup: true, text: showAdvancedSearch ? SDKUI_Localizator.Search_Easy : SDKUI_Localizator.Search_Advanced, onClick: () => { changeAdvancedSearchAsync(!showAdvancedSearch); } },
-                                { icon: _jsx(IconEdit, {}), beginGroup: true, text: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryWhere}`, onClick: () => { setShowFiltersConfig(true); } },
-                                { icon: _jsx(IconEdit, {}), text: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QuerySelect}`, onClick: () => { setShowOutputConfig(true); } },
-                                { icon: _jsx(IconEdit, {}), text: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryOrderBy}`, onClick: () => { setShowOrderByConfig(true); } },
-                                { icon: _jsx(IconMenuCAArchive, { viewBox: '11 11.5 26 27', fontSize: 16, strokeWidth: 2, color: 'black' }), beginGroup: true, text: SDKUI_Localizator.PassToArchive, onClick: handlePassToArchive }
-                            ], onMenuShown: () => setIsQueryPanelActive(true) })
+                        _jsx(ContextMenu, { items: contextMenuItems, trigger: "left", children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false, onClick: () => setIsQueryPanelActive(true) }) })
                         : _jsx(_Fragment, {}) }), children: [_jsx(ConfirmQueryParamsDialog, {}), SQD
                         ? _jsxs("div", { onContextMenu: (e) => e.preventDefault(), style: { height: '100%', width: '100%', position: 'relative', display: 'flex', flexDirection: 'column', gap: 5 }, children: [showAdvancedSearch
                                     ? _jsx(TMQueryEditor, { formMode: FormModes.Update, showToolbar: false, inputData: qd, validateSelect: true, showApply: false, onQDChanged: handleQdChanged })