@topconsultnpm/sdkui-react-beta 6.12.37 → 6.12.38

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ITMDcmt } from '../../ts';
+interface ITMDcmtPreviewProps {
+    dcmtData: ITMDcmt | undefined;
+    canNext?: boolean;
+    canPrev?: boolean;
+    onNext?: () => void;
+    onPrev?: () => void;
+    onClose?: () => void;
+}
+declare const TMDcmtPreview: React.FC<ITMDcmtPreviewProps>;
+export default TMDcmtPreview;
+interface ITMFileViewerProps {
+    fileBlob?: Blob;
+}
+export declare const TMFileViewer: React.FC<ITMFileViewerProps>;
+export declare const TMNothingToShow: ({ text, secondText, fileExt, icon }: {
+    text?: any;
+    secondText?: any;
+    fileExt?: string;
+    icon?: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const StyledHeaderIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $color: string;
+}>> & string;
+export declare const StyledPanelStatusContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/components/query/TMDcmtPreview.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { RetrieveFileOptions, DcmtOpers, GeneralRetrieveFormats, FileFormats, InvoiceRetrieveFormats, OrderRetrieveFormats } from '@topconsultnpm/sdk-ts-beta';
+import { extensionHandler, sleep, getExceptionMessage, formatBytes, IconMenuVertical, IconCloseCircle, IconClear, SDKUI_Localizator, IconCloseOutline, IconPreview } from '../../helper';
+import { useDcmtOperations } from '../../hooks/useDcmtOperations';
+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 { TMLayoutItem } from '../base/TMLayout';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import TMToolbarCard from '../base/TMToolbarCard';
+import TMTooltip from '../base/TMTooltip';
+import { TMLayoutWaitingContainer } from '../base/TMWaitPanel';
+import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../forms/TMSaveForm';
+import { StyledAnimatedComponentOpacity } from '../base/Styled';
+const TMDcmtPreview = ({ dcmtData, onClose, canNext, canPrev, onNext, onPrev }) => {
+    const [dcmtBlob, setDcmtBlob] = useState(undefined);
+    const [showPreview, setShowPreview] = useState(false);
+    const [isFromCache, setIsFromCache] = useState(false);
+    const [error, setError] = useState('');
+    const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, getDcmtFileAsync, clearDcmtsFileCache, removeDcmtsFileCache, isDcmtFileInCache } = useDcmtOperations();
+    const cacheKey = dcmtData ? `${dcmtData.tid}-${dcmtData.did}` : '00';
+    const FILE_SIZE_LIMIT = 500000;
+    useEffect(() => {
+        setDcmtBlob(undefined);
+        setError('');
+        if (!dcmtData)
+            return;
+        if (isDcmtFileInCache(cacheKey)) {
+            loadDocumentWithCache();
+            setShowPreview(true);
+            return;
+        }
+        if ((extensionHandler(dcmtData.fileExt) !== FileExtensionHandler.NONE) && ((dcmtData.fileSize ?? 0) <= FILE_SIZE_LIMIT)) {
+            loadDocumentWithCache();
+            setShowPreview(true);
+        }
+        else {
+            setShowPreview(false);
+        }
+    }, [dcmtData]);
+    const loadDocumentWithCache = async () => {
+        const rfo = new RetrieveFileOptions();
+        rfo.retrieveReason = DcmtOpers.None;
+        rfo.generalRetrieveFormat = GeneralRetrieveFormats.OriginalUnsigned;
+        rfo.cvtFormat = extensionHandler(dcmtData?.fileExt) === FileExtensionHandler.CONVERTIBLE ? FileFormats.PDF : FileFormats.None;
+        rfo.invoiceRetrieveFormat = InvoiceRetrieveFormats.ASW_HTML;
+        rfo.orderRetrieveFormat = OrderRetrieveFormats.NSO_HTML;
+        try {
+            await sleep(300); //wait for DX-DataGrid selectionChanged
+            let dcmtFile = await getDcmtFileAsync({ TID: dcmtData?.tid, DID: dcmtData?.did, FILEEXT: dcmtData?.fileExt }, rfo, 'Anteprima', false);
+            setDcmtBlob(dcmtFile?.file);
+            setIsFromCache(!!dcmtFile?.isFromCache);
+        }
+        catch (ex) {
+            const err = ex;
+            if (err.name === 'CanceledError') {
+                setError('Operazione annullata.');
+                ShowAlert({ message: err.message, mode: 'warning', duration: 3000, title: 'Abort' });
+            }
+            else {
+                setError(getExceptionMessage(ex));
+                TMExceptionBoxManager.show({ exception: ex });
+            }
+        }
+    };
+    const titleHandler = () => {
+        let title = 'Anteprima ';
+        if (!dcmtData?.did)
+            return title;
+        let extensionInfo;
+        if (dcmtData.fileExt !== null) {
+            if (extensionHandler(dcmtData.fileExt) === FileExtensionHandler.CONVERTIBLE)
+                extensionInfo = `(${dcmtData.fileExt} Convertito in PDF - `;
+            else
+                extensionInfo = `(${dcmtData.fileExt} - `;
+        }
+        else
+            extensionInfo = '';
+        title += extensionInfo;
+        title += dcmtData.fileSize && dcmtData.fileSize > 0 ? formatBytes(dcmtData.fileSize) + ')' : '';
+        if ((isDcmtFileInCache(cacheKey) && isFromCache)) {
+            title += ' | da cache';
+        }
+        return title;
+    };
+    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(TMLayoutItem, { children: _jsx(TMToolbarCard, { padding: '0', color: TMColors.primaryColor, backgroundColor: `${TMColors.primaryColor}25`, title: titleHandler(), toolbar: _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [_jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), _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: "Rimuovi elemento dalla cache", onClick: () => { removeDcmtsFileCache(cacheKey); setIsFromCache(false); } },
+                                    { icon: _jsx(IconClear, {}), text: "Cancella la cache", onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
+                                ] }, "btn13") }), _jsx(StyledHeaderIcon, { onClick: onClose, "$color": TMColors.primaryColor, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) })] }), children: error
+                    ? _jsx(TMNothingToShow, { icon: _jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), text: error })
+                    : renderedPreview(dcmtData?.tid, dcmtData?.did, dcmtData?.fileExt, dcmtData?.fileSize, dcmtData?.fileCount, extensionHandler(dcmtData?.fileExt), showPreview, () => { loadDocumentWithCache(); setShowPreview(true); }, dcmtBlob) }) }) }));
+};
+export default TMDcmtPreview;
+export const TMFileViewer = ({ fileBlob }) => {
+    const [blobUrl, setBlobUrl] = useState(undefined);
+    const [fileType, setFileType] = useState(undefined);
+    const [formattedXml, setFormattedXml] = useState(undefined);
+    useEffect(() => {
+        if (fileBlob) {
+            const url = URL.createObjectURL(fileBlob);
+            setBlobUrl(url);
+            setFileType(fileBlob.type);
+            if (fileBlob.type.includes("xml")) {
+                fileBlob.text().then((text) => {
+                    const parser = new DOMParser();
+                    const xmlDoc = parser.parseFromString(text, "application/xml");
+                    if (xmlDoc.querySelector("parsererror")) {
+                        setFormattedXml(`<div style="color: red;">Invalid XML</div>`);
+                        return;
+                    }
+                    const serializer = new XMLSerializer();
+                    const prettyXml = serializer
+                        .serializeToString(xmlDoc)
+                        .replace(/></g, ">\n<")
+                        .replace(/^(?!\s*$)/gm, "  ");
+                    setFormattedXml(`<pre style="font-family: monospace; white-space: pre-wrap; line-height: 1.5;">${prettyXml
+                        .replace(/</g, "&lt;")
+                        .replace(/>/g, "&gt;")}</pre>`);
+                });
+            }
+            return () => {
+                URL.revokeObjectURL(url);
+            };
+        }
+        return () => { };
+    }, [fileBlob]);
+    if (!fileBlob) {
+        return _jsx("div", { children: "Caricamento file..." });
+    }
+    if (fileBlob.type.includes('image')) {
+        return (_jsx(ImageViewer, { fileBlob: fileBlob, alt: '' }));
+    }
+    return (_jsx("iframe", { srcDoc: fileType?.includes("xml") && formattedXml ? `<html><body>${formattedXml}</body></html>` : undefined, src: !fileType?.includes("xml") || !formattedXml ? blobUrl : undefined, title: "File Viewer", width: "100%", height: "100%", style: { border: 'none', zIndex: 0 } }));
+};
+const ImageContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+`;
+const StyledImage = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: contain; 
+  position: absolute;
+`;
+const ImageViewer = ({ fileBlob, alt = "Image", className }) => {
+    const [imageUrl, setImageUrl] = useState(null);
+    useEffect(() => {
+        if (fileBlob) {
+            const url = URL.createObjectURL(fileBlob);
+            setImageUrl(url);
+            return () => {
+                URL.revokeObjectURL(url);
+            };
+        }
+        return () => { };
+    }, [fileBlob]);
+    if (!imageUrl) {
+        return _jsx("p", { children: "Loading image..." });
+    }
+    return (_jsx(ImageContainer, { className: className, children: _jsx(StyledImage, { src: imageUrl, alt: alt }) }));
+};
+export const TMNothingToShow = ({ text = '', secondText, fileExt, icon = _jsx(IconPreview, { fontSize: 96 }) }) => {
+    return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [icon, _jsxs(StyledPreviewNotAvailable, { children: [text && _jsx("div", { children: text }), _jsxs("div", { children: [" ", secondText ?? 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] })] })] }) }));
+};
+const renderedPreview = (tid, did, fileExt, fileSize, fileCount, extHandler, showPreview, onDownloadShowPreviewClick, dcmtBlob) => {
+    if (!did)
+        return _jsx(TMNothingToShow, { text: 'Nessun documento selezionato.' });
+    if (fileCount == 0) {
+        return _jsx(TMNothingToShow, { text: 'Documento di soli metadati.' });
+    }
+    if (fileExt && extHandler === FileExtensionHandler.NONE) {
+        return _jsx(TMNothingToShow, { fileExt: fileExt });
+    }
+    if (showPreview) {
+        return (_jsx(StyledPreviewContainer, { style: { overflow: 'auto' }, children: _jsx(TMFileViewer, { fileBlob: dcmtBlob }) }));
+    }
+    return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [_jsx(IconPreview, { fontSize: 96 }), _jsxs("p", { children: [" La dimensione del file \u00E8 ", _jsx("strong", { children: formatBytes(fileSize) }), ". Visualizzare l'anteprima? "] }), _jsx(TMButton, { caption: "Si", onClick: onDownloadShowPreviewClick, showTooltip: false })] }) }));
+};
+//#region  Styled Components
+const StyledPreviewContainer = styled.div `display: flex; justify-content: center; align-items: center; padding: 5px; position: relative; width:100%; height: 100%; `;
+export const StyledHeaderIcon = styled.div ` color: ${props => props.$color};  cursor: pointer; display: flex; align-items: center; justify-content: center; &:hover{ color: white ; transition: 200ms ease; } `;
+const StyledXmlContainer = styled.div `white-space: pre-wrap; font-family: monospace; overflow: auto; background-color: #fefcfc; width: calc(100%); height: calc(100%); padding: 5px 10px; border-radius: 5px; `;
+export const StyledPanelStatusContainer = styled.div ` width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; `;
+const StyledIFrameContainer = styled.div `width: 100%; height: 100%; position: relative ;`;
+const StyledPreviewNotAvailable = styled.div `
+    display: flex; 
+    flex-direction: column; 
+    align-items: center; 
+    justify-content: center; 
+    gap: 10px;  
+`;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DeviceType } from '../base/TMDeviceProvider';
+interface ITMFileUploader {
+    onFileUpload?: (file: File | null) => void;
+    onClose?: () => void;
+    isRequired?: boolean;
+    defaultBlob?: File | null;
+    deviceType?: DeviceType;
+}
+declare const TMFileUploader: React.FC<ITMFileUploader>;
+export default TMFileUploader;

package/lib/components/query/TMFileUploader.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { useEffect, useRef, useState } from 'react';
+import { StyledHeaderIcon, TMFileViewer } from './TMDcmtPreview';
+import { IconFolderOpen, SDKUI_Localizator, formatBytes, IconClear, extensionHandler, IconCloseOutline } from '../../helper';
+import { FileExtensionHandler } from '../../ts';
+import { TMColors } from '../../utils/theme';
+import TMButton from '../base/TMButton';
+import { DeviceType } from '../base/TMDeviceProvider';
+import TMToolbarCard from '../base/TMToolbarCard';
+import TMTooltip from '../base/TMTooltip';
+import usePreventFileDrop from '../../hooks/usePreventFileDrop';
+const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload, isRequired = false, defaultBlob = null }) => {
+    const [dragOver, setDragOver] = useState(false);
+    const [uploadedFile, setUploadedFile] = useState(defaultBlob);
+    const [fileName, setFileName] = useState('');
+    const [fileSize, setFileSize] = useState(undefined);
+    const [fileExt, setFileExt] = useState(undefined);
+    const uploaderRef = useRef(null);
+    usePreventFileDrop([uploaderRef]);
+    useEffect(() => {
+        if (!defaultBlob) {
+            clearFile();
+            return;
+        }
+        ;
+        handleFile(defaultBlob);
+    }, [defaultBlob]);
+    const handleFile = (file) => {
+        const name = file.name;
+        const extension = file.name.split('.').pop() ?? '';
+        const size = file.size;
+        setUploadedFile(file);
+        setFileName(name);
+        setFileSize(size);
+        setFileExt(extension);
+        onFileUpload?.(file);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setDragOver(true);
+    };
+    const handleDragLeave = () => {
+        setDragOver(false);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        setDragOver(false);
+        const file = e.dataTransfer.files[0];
+        if (file)
+            handleFile(file);
+    };
+    const handleInputChange = (e) => {
+        const file = e.target.files?.[0];
+        if (file)
+            handleFile(file);
+    };
+    const clearFile = () => {
+        setUploadedFile(null);
+        setFileName('');
+        setFileSize(undefined);
+        setFileExt(undefined);
+        onFileUpload?.(null);
+        const fileInput = document.getElementById('fileInput');
+        if (fileInput) {
+            fileInput.value = '';
+        }
+    };
+    const browseHandler = () => {
+        document.getElementById('fileInput')?.click();
+    };
+    let content = !uploadedFile ?
+        _jsx("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: _jsxs(UploadContainer, { ref: uploaderRef, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#f0f8ff' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsx("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }) }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? 'Clicca per sfogliare il tuo file' : 'Trascina il tuo file qui o fai doppio click per sfogliarlo' }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] }) }) :
+        _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%', height: '100%' }, children: [_jsxs("div", { style: { backgroundColor: 'white', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("p", { children: "File name:" }), _jsxs("div", { style: { fontWeight: 'bold' }, children: [fileName, " ", _jsxs("span", { children: [" ", ` (${formatBytes(fileSize)})`, " "] })] })] }), uploadedFile && _jsx(TMButton, { btnStyle: 'icon', color: 'error', caption: 'Pulisci', onClick: clearFile, icon: _jsx(IconClear, { fontSize: 22 }) })] }), extensionHandler(fileExt) === FileExtensionHandler.READY_TO_SHOW ? _jsx(TMFileViewer, { fileBlob: uploadedFile }) :
+                    _jsx("div", { style: { backgroundColor: '#f6dbdb', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.error }, children: _jsxs("div", { children: [" ", 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] }) })] });
+    return (_jsx(TMToolbarCard, { title: 'Caricamento File', onBack: deviceType === DeviceType.MOBILE ? () => onClose?.() : undefined, toolbar: deviceType !== DeviceType.MOBILE ? _jsx(StyledHeaderIcon, { onClick: onClose, "$color": 'white', children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) }) : undefined, children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '2px', display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), content] }) }));
+};
+const UploadContainer = styled.div ` 
+position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 5px;
+  border: 2px dashed ${props => props.$isRequired ? () => TMColors.error : () => TMColors.primaryColor};
+  /* max-height: 100px; */
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  padding: 30px;
+  text-align: center;
+  color: ${props => props.$isRequired ? () => TMColors.error : () => TMColors.primaryColor};
+  transition: background-color 0.3s;
+  &:hover {
+    background-color: #658cab;
+  } 
+`;
+const HiddenInput = styled.input `
+  display: none;
+`;
+export default TMFileUploader;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { DcmtInfo } from '../../ts';
+import { DeviceContextProps } from '../base/TMDeviceProvider';
+interface ITMMasterDetailDcmtsProps extends DeviceContextProps {
+    inputDcmts?: DcmtInfo[];
+    isForMaster?: boolean;
+    showCurrentDcmtIndicator?: boolean;
+    allowNavigation?: boolean;
+    canNext?: boolean;
+    canPrev?: boolean;
+    onNext?: () => void;
+    onPrev?: () => void;
+    onBack?: () => void;
+    appendMasterDcmts?: (tid: number | undefined, did: number | undefined) => void;
+    onTaskCreateRequest?: (activityContext: {
+        tid: number;
+        did: number;
+        name: string;
+    } | undefined) => void;
+}
+declare const TMMasterDetailDcmts: React.FC<ITMMasterDetailDcmtsProps>;
+export default TMMasterDetailDcmts;
+export declare function IconBackhandIndexPointingRight(props: Readonly<React.SVGProps<SVGSVGElement>>): import("react/jsx-runtime").JSX.Element;