@topconsultnpm/sdkui-react 6.20.0-dev2.5 → 6.20.0-dev2.51

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -9,6 +9,7 @@ import TMChooserForm from '../forms/TMChooserForm';
 import { TMColors } from '../../utils/theme';
 import TMTooltip from '../base/TMTooltip';
 import { FormulaHelper } from '../editors/TMFormulaEditor';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
 const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChooserBySingleClick, readOnly, layoutMode = LayoutModes.None, queryParamsDynDataList, buttons = [], backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], icon, labelColor, showClearButton, onValueChanged, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(false);
     const [dynDl, setDynDl] = useState();
@@ -30,7 +31,9 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
         setDynDl(d);
         if (!IsParametricQuery(d?.qd) && !dataSource) {
             setDataSource(undefined);
-            loadData().then((result) => { setDataSource(result); });
+            loadData()
+                .then((result) => { setDataSource(result); })
+                .catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
         }
     }, [md]);
     useEffect(() => {
@@ -42,12 +45,13 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
             setDataSource(undefined);
             return;
         }
-        loadData().then((result) => {
-            setDataSource(result);
-        });
+        loadData()
+            .then((result) => { setDataSource(result); })
+            .catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
     }, [queryParamsDynDataList, dynDl]);
     const loadData = async () => {
-        return await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, md?.id, layoutMode, queryParamsDynDataList ?? []);
+        return await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, md?.id, layoutMode, queryParamsDynDataList ?? [])
+            .catch((err) => { throw err; });
     };
     const getDescription = () => {
         if (!Array.isArray(values))
@@ -152,7 +156,8 @@ export const TMDynDataListItemChooserForm = (props) => {
         if (refreshCache)
             DataListCacheService.RemoveAll();
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DataList} ...` });
-        let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(props.TID, props.MID, props.layoutMode, []);
+        let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(props.TID, props.MID, props.layoutMode, [])
+            .catch((err) => { TMSpinner.hide(); TMExceptionBoxManager.show({ exception: err }); });
         TMSpinner.hide();
         return result ? searchResultDescriptorToSimpleArray(result) ?? [] : [];
     };

package/lib/components/choosers/TMImageIDChooser.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ITMChooserProps, ITMChooserFormProps } from '../../ts';
+interface ITMImageIDChooserProps extends ITMChooserProps {
+    /** Contiene i values selezionati -> attualmente sempre e solo 1 elemento */
+    value?: string;
+    readOnly?: boolean;
+}
+declare const TMImageIDChooser: React.FunctionComponent<ITMImageIDChooserProps>;
+export default TMImageIDChooser;
+interface ITMImageIDChooserFormProps extends ITMChooserFormProps<Image_Wrap> {
+}
+declare class Image_Wrap {
+    id: number;
+    imageID?: string;
+}
+export declare const TMImageIDChooserForm: React.FunctionComponent<ITMImageIDChooserFormProps>;

package/lib/components/choosers/TMImageIDChooser.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { TMImageLibrary, IconSearch } from '../../helper';
+import { StyledDivHorizontal } from '../base/Styled';
+import TMSummary from '../editors/TMSummary';
+import TMChooserForm from '../forms/TMChooserForm';
+import { ImageIDList } from '../viewers/TMTidViewer';
+const TMImageIDChooser = ({ backgroundColor, elementStyle, value, isModifiedWhen, placeHolder, validationItems = [], readOnly, onValueChanged }) => {
+    const [showChooser, setShowChooser] = useState(false);
+    const renderTemplate = () => {
+        return (_jsx(StyledDivHorizontal, { style: { minWidth: '125px' }, children: placeHolder && (!value || value == '')
+                ? _jsx("p", { children: placeHolder })
+                : _jsx(TMImageLibrary, { imageID: value }) }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, showClearButton: true, iconEditButton: _jsx(IconSearch, {}), onEditorClick: () => setShowChooser(true), onClearClick: () => onValueChanged?.(''), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: "Immagine", hasValue: value != undefined && value?.length > 0, template: renderTemplate(), validationItems: validationItems, 
+                // openEditorOnSummaryClick={!readOnly}
+                readOnly: readOnly, disabled: readOnly }), showChooser &&
+                _jsx(TMImageIDChooserForm, { selectedIDs: [value], onClose: () => setShowChooser(false), onChoose: (img) => { onValueChanged?.(img); } })] }));
+};
+export default TMImageIDChooser;
+class Image_Wrap {
+    constructor() {
+        this.id = 0;
+    }
+}
+export const TMImageIDChooserForm = (props) => {
+    const getItems = async () => {
+        let datasource = [];
+        let i = 0;
+        for (let img of Object.values(ImageIDList))
+            datasource.push({ id: i, imageID: img });
+        return datasource;
+    };
+    const cellRenderImageListItemIcon = (data) => {
+        let imageID = data.row.data;
+        return _jsx(TMImageLibrary, { imageID: imageID.imageID });
+    };
+    const cellRenderName = (data) => {
+        let imageID = data.row.data;
+        return _jsxs("p", { children: [imageID.imageID, " "] });
+    };
+    const dataColumns = useMemo(() => {
+        return [
+            { name: 'icon', dataField: 'imageID', caption: '', width: '40px', allowResizing: false, cellRender: cellRenderImageListItemIcon },
+            { name: 'name', dataField: 'imageID', caption: '', cellRender: cellRenderName }
+        ];
+    }, []);
+    return (_jsx(TMChooserForm, { title: "Immagini", hasShowId: false, allowMultipleSelection: false, height: props.height, width: '200px', showDefaultColumns: false, keyName: 'imageID', columns: dataColumns, selectedIDs: props.selectedIDs, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => {
+            if (IDs && IDs.length > 0) {
+                props.onChoose?.(IDs[0]);
+            }
+        } }));
+};

package/lib/components/choosers/TMMetadataChooser.js

@@ -21,7 +21,7 @@ const TMMetadataChooser = ({ tmSession, dataSource, showEditButton = true, butto
         return undefined;
     };
     const renderTemplate = useMemo(() => {
-        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && values.length > 0 && values[0].mid && values[0].mid > 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 0 && values[0].mid && values[0].mid < 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], inputMd: getinputMd(), showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { children: placeHolder })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && values.length > 0 && values[0].mid && values[0].mid > 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 0 && values[0].mid && values[0].mid < 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], inputMd: getinputMd(), showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { children: placeHolder ?? SDKUI_Localizator.SelectMetadata })] }));
     }, [values, tmSession, showId, showCompleteMetadataName, placeHolder]);
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { label: label, width: width, height: height, disabled: disabled, validationItems: validationItems, backgroundColor: backgroundColor, buttons: buttons, placeHolder: placeHolder, fontSize: fontSize, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), openEditorOnSummaryClick: openEditorOnSummaryClick, onEditorClick: () => {
                     if (!disabled) {

package/lib/components/editors/TMLocalizedTextBox.d.ts

@@ -15,6 +15,7 @@ interface TMLocalizedTextBoxProps {
     validationItems?: ValidationItem[];
     qd?: QueryDescriptor;
     tid?: number;
+    readOnly?: boolean;
     onValueChanged: (lang: CultureIDs, value: string) => void;
 }
 declare const TMLocalizedTextBox: React.FC<TMLocalizedTextBoxProps>;

package/lib/components/editors/TMLocalizedTextBox.js

@@ -40,7 +40,7 @@ const Popover = styled.div `
   border-radius: 4px;
   background-color: #fff;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 1502;
+  z-index: 2000000001;
   padding: 8px;
 `;
 const Badge = styled.span `
@@ -71,7 +71,7 @@ export const getCultureIDImg = (cultureID) => {
         default: return it;
     }
 };
-const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_PT, value_ES, value_DE, isModifiedWhen, validationItems, qd, tid, onValueChanged, }) => {
+const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_PT, value_ES, value_DE, isModifiedWhen, validationItems, qd, tid, readOnly, onValueChanged, }) => {
     const [isPopoverVisible, setIsPopoverVisible] = useState(false);
     const containerRef = useRef(null);
     const popoverRef = useRef(null);
@@ -122,6 +122,6 @@ const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_
         icon: (_jsxs(IconContainer, { children: [_jsx(IconLanguage, {}), localizedCount > 0 && _jsx(Badge, { children: localizedCount })] })),
         onClick: handleTogglePopover,
     };
-    return (_jsxs(LocalizedContainer, { ref: containerRef, children: [(qd || tid) ? (_jsx(TMMetadataTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, qd: qd, tid: tid, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })) : (_jsx(TMTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })), isPopoverVisible && (_jsx(Portal, { popoverRef: popoverRef, children: _jsx(Popover, { ref: popoverRef, "$isVisible": isPopoverVisible, "$top": popoverPosition.top, "$left": popoverPosition.left, "$width": popoverPosition.width, onMouseDown: (e) => e.stopPropagation(), children: languages.map((lang) => ((qd || tid) ? (_jsx(TMMetadataTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', qd: qd, tid: tid, onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)) : (_jsx(TMTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)))) }) }))] }));
+    return (_jsxs(LocalizedContainer, { ref: containerRef, children: [(qd || tid) ? (_jsx(TMMetadataTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, qd: qd, tid: tid, readOnly: readOnly, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })) : (_jsx(TMTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, readOnly: readOnly, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })), isPopoverVisible && (_jsx(Portal, { popoverRef: popoverRef, children: _jsx(Popover, { ref: popoverRef, "$isVisible": isPopoverVisible, "$top": popoverPosition.top, "$left": popoverPosition.left, "$width": popoverPosition.width, onMouseDown: (e) => e.stopPropagation(), children: languages.map((lang) => ((qd || tid) ? (_jsx(TMMetadataTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', qd: qd, tid: tid, readOnly: readOnly, onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)) : (_jsx(TMTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', readOnly: readOnly, onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)))) }) }))] }));
 };
 export default TMLocalizedTextBox;

package/lib/components/editors/TMMetadataValues.js

@@ -14,6 +14,7 @@ import { ChronologyMIDs, DraftsMIDs, DSAttachsMIDs } from "../../ts";
 import { TMNothingToShow } from "../features/documents/TMDcmtPreview";
 import TMAccordion from "../base/TMAccordion";
 import TabPanel, { Item } from 'devextreme-react/tab-panel';
+import { TMExceptionBoxManager } from "../base/TMPopUp";
 export var ShowCheckBoxesMode;
 (function (ShowCheckBoxesMode) {
     ShowCheckBoxesMode[ShowCheckBoxesMode["Never"] = 0] = "Never";
@@ -165,7 +166,8 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         if (!d)
             return;
         let toBeRefreshed = [];
-        let dynDlDataSource = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, mid, layoutMode, qParams);
+        let dynDlDataSource = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, mid, layoutMode, qParams)
+            .catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
         if (!d.onValueChanged_DynDataListsToBeRefreshed)
             return;
         let row = dynDlDataSource?.dtdResult?.rows?.filter(o => o[d.selectItemForValue ?? 0] == value);

package/lib/components/editors/TMTextBox.js

@@ -81,15 +81,14 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
     }, [maxValue, minValue, currentValue, currentType]);
     // Handle autofocus behavior on mount
     useEffect(() => {
-        if (autoFocus && inputRef.current) {
-            if (fromModal) // utilizzato per i textBox derivanti da una Modal che non riescono a utilizzare l'autofocus
-                setTimeout(() => {
-                    inputRef.current && inputRef.current.focus(); // Focus the input field
-                }, 100);
-            else
-                inputRef.current.focus(); // Focus the input field
-        }
-    }, [autoFocus]); // This effect runs when the autoFocus prop changes
+        if (!autoFocus || !inputRef.current)
+            return;
+        const delay = fromModal ? 100 : 50;
+        const timeoutId = setTimeout(() => {
+            inputRef.current?.focus();
+        }, delay);
+        return () => clearTimeout(timeoutId);
+    }, [autoFocus, fromModal]); // This effect runs when the autoFocus or fromModal prop changes
     useEffect(() => {
         if (formulaItems && formulaItems.length > 0) {
             let menuItems = [];

package/lib/components/features/archive/TMArchive.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useState } from 'react';
 import Logo from '../../../assets/Toppy-generico.png';
-import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
+import { ArchiveConstraints, DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys, removeMruTid, getMoreInfoTasksForDocument } from '../../../helper';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import TMLayoutContainer from '../../base/TMLayout';
@@ -145,49 +145,36 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
 export default TMArchive;
 const TMTreeSelectorWrapper = ({ isMobile, isSharedArchive, onSelectedTIDChanged }) => {
     const { setPanelVisibilityById, toggleMaximize, setToolbarButtonVisibility, countVisibleLeafPanels } = useTMPanelManagerContext();
-    return (_jsx(TMTreeSelector, { layoutMode: LayoutModes.Ark, onClosePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => setPanelVisibilityById('tmTreeSelector', false) : undefined, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => toggleMaximize("tmTreeSelector") : undefined, onSelectedTIDChanged: (tid) => {
-            onSelectedTIDChanged?.(tid);
-            if (isMobile)
-                setPanelVisibilityById('tmDcmtForm', true);
-            else {
-                setPanelVisibilityById('tmDcmtForm', true);
-                if (!isSharedArchive) {
-                    setPanelVisibilityById('tmDcmtPreview', true);
-                }
-            }
-            if (!isSharedArchive) {
-                setToolbarButtonVisibility('tmDcmtPreview', true);
-            }
-            setToolbarButtonVisibility('tmDcmtForm', true);
-        } }));
+    const updatePanelsVisibility = async (tid) => {
+        if (!tid)
+            return;
+        const dtd = await DcmtTypeListCacheService.GetAsync(tid);
+        const isOnlyMetadata = dtd?.archiveConstraint === ArchiveConstraints.OnlyMetadata;
+        const previewVisible = !isSharedArchive && !isOnlyMetadata;
+        setPanelVisibilityById('tmDcmtPreview', previewVisible);
+        setToolbarButtonVisibility('tmDcmtPreview', previewVisible);
+        setPanelVisibilityById('tmDcmtForm', true);
+        setToolbarButtonVisibility('tmDcmtForm', true);
+    };
+    return (_jsx(TMTreeSelector, { layoutMode: LayoutModes.Ark, onClosePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => setPanelVisibilityById('tmTreeSelector', false) : undefined, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => toggleMaximize("tmTreeSelector") : undefined, onSelectedTIDChanged: async (tid) => { updatePanelsVisibility(tid); onSelectedTIDChanged?.(tid); } }));
 };
 const TMRecentsManagerWrapper = ({ mruTIDs, currentTID, currentMruTID, deviceType, isSharedArchive, onSelectedTID, onDeletedTID }) => {
     const { setPanelVisibilityById, setToolbarButtonVisibility } = useTMPanelManagerContext();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const updatePanelsVisibility = async (tid) => {
+        if (!tid)
+            return;
+        const dtd = await DcmtTypeListCacheService.GetAsync(tid);
+        const isOnlyMetadata = dtd?.archiveConstraint === ArchiveConstraints.OnlyMetadata;
+        const previewVisible = !isSharedArchive && !isOnlyMetadata;
+        setPanelVisibilityById('tmDcmtPreview', previewVisible);
+        setToolbarButtonVisibility('tmDcmtPreview', previewVisible);
+        setPanelVisibilityById('tmDcmtForm', true);
+        setToolbarButtonVisibility('tmDcmtForm', true);
+    };
     useEffect(() => {
-        if (currentTID) {
-            setPanelVisibilityById('tmDcmtForm', true);
-            if (!isSharedArchive) {
-                setToolbarButtonVisibility('tmDcmtPreview', true);
-            }
-            setToolbarButtonVisibility('tmDcmtForm', true);
-        }
-    }, [currentTID, isSharedArchive]);
-    return (_jsx(TMRecentsManager, { accessFilter: 'canArchive', mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
-            onSelectedTID?.(tid);
-            if (deviceType === DeviceType.MOBILE) {
-                setPanelVisibilityById('tmDcmtForm', true);
-            }
-            else {
-                setPanelVisibilityById('tmDcmtForm', true);
-                if (!isSharedArchive) {
-                    setPanelVisibilityById('tmDcmtPreview', true);
-                }
-            }
-            if (!isSharedArchive) {
-                setToolbarButtonVisibility('tmDcmtPreview', true);
-            }
-            setToolbarButtonVisibility('tmDcmtForm', true);
-        }, onDeletedTID: (tid) => {
-            onDeletedTID?.(tid);
-        } }));
+        updatePanelsVisibility(currentTID);
+    }, [currentTID, isSharedArchive, isMobile]);
+    return (_jsx(TMRecentsManager, { accessFilter: "canArchive", mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: async (tid) => { await updatePanelsVisibility(tid); onSelectedTID?.(tid); }, onDeletedTID: onDeletedTID }));
 };