@topconsultnpm/sdkui-react-beta 6.5.51

package/lib/components/splitter/TMSplitterLayout.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Questo componente è stato realizzato partendo da :
+// https://www.npmjs.com/package/react-splitter-layout
+import React, { useState, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { TMColors } from '../../utils/theme';
+const clearSelection = () => {
+    if (window.getSelection) {
+        const selection = window.getSelection();
+        if (selection) {
+            selection.removeAllRanges();
+        }
+        // } else if (document.selection) {
+        //   document.selection.empty();
+    }
+};
+const DEFAULT_SPLITTER_SIZE = 4;
+const StyledPane = styled.div.attrs(({ $isPrimary, $isVertical, $size, $unit }) => ({
+    style: {
+        flex: $isPrimary ? '1 1 auto' : '0 0 auto',
+        height: $isVertical && !$isPrimary ? `${$size}${$unit}` : '',
+        width: !$isVertical && !$isPrimary ? `${$size}${$unit}` : '',
+    }
+})) `
+  position: relative;
+  overflow: auto;
+`;
+const StyledContainer = styled.div `
+  position: absolute;
+  display: flex;
+  flex-direction: ${(props) => props.$isVertical ? 'column' : 'row'};
+  width: ${(props) => props.$width ?? '100%'};
+  height: ${(props) => props.$height ?? '100%'};
+  overflow: hidden;
+  ${(props) => props.$isResizing ? `cursor: ${props.$isVertical ? 'row-resize' : 'col-resize'}` : ''};
+`;
+const StyledSplitter = styled.div `
+  ${(props) => props.$isVertical ? '' : 'flex: 0 0 auto;'};
+  width: ${(props) => props.$isVertical ? '100%' : '2px'};
+  height: ${(props) => props.$isVertical ? '2px' : '100%'};
+  margin-left: ${(props) => props.$isVertical ? '0' : '2px'};
+  margin-right: ${(props) => props.$isVertical ? '0' : '2px'};
+  margin-top: ${(props) => props.$isVertical ? '2px' : '0'};
+  margin-bottom: ${(props) => props.$isVertical ? '2px' : '0'};
+  cursor: ${(props) => props.$isVertical ? 'row-resize' : 'col-resize'};
+  background-color: ${(props) => props.$isResizing ? TMColors.primary : '#ccc'};
+
+  &:hover {
+      color: ${TMColors.primary};
+  }
+`;
+const TMSplitterLayout = ({ vertical = false, percentage = false, primaryIndex = 0, primaryMinSize = 0, secondaryInitialSize, secondaryMinSize = 0, height = "100%", width = "100%", onDragStart, onDragEnd, onSecondaryPaneSizeChange, children = [], }) => {
+    const [secondaryPaneSize, setSecondaryPaneSize] = useState(0);
+    const [resizing, setResizing] = useState(false);
+    const containerRef = useRef(null);
+    const splitterRef = useRef(null);
+    const getSecondaryPaneSize = (containerRect, splitterRect, clientPosition, offsetMouse) => {
+        if (!containerRect || !splitterRect) {
+            return 0; // Return a default value or handle the case as appropriate
+        }
+        let totalSize;
+        let splitterSize;
+        let offset;
+        if (vertical) {
+            totalSize = containerRect.height;
+            splitterSize = splitterRect.height;
+            offset = clientPosition.top - containerRect.top;
+        }
+        else {
+            totalSize = containerRect.width;
+            splitterSize = splitterRect.width;
+            offset = clientPosition.left - containerRect.left;
+        }
+        if (offsetMouse) {
+            offset -= splitterSize / 2;
+        }
+        if (offset < 0) {
+            offset = 0;
+        }
+        else if (offset > totalSize - splitterSize) {
+            offset = totalSize - splitterSize;
+        }
+        let secondaryPaneSize;
+        if (primaryIndex === 1) {
+            secondaryPaneSize = offset;
+        }
+        else {
+            secondaryPaneSize = totalSize - splitterSize - offset;
+        }
+        let primaryPaneSize = totalSize - splitterSize - secondaryPaneSize;
+        if (percentage) {
+            secondaryPaneSize = (secondaryPaneSize * 100) / totalSize;
+            primaryPaneSize = (primaryPaneSize * 100) / totalSize;
+            splitterSize = (splitterSize * 100) / totalSize;
+            totalSize = 100;
+        }
+        let l_primaryMinSize = primaryMinSize;
+        let l_secondaryMinSize = secondaryMinSize;
+        if (primaryPaneSize < l_primaryMinSize) {
+            secondaryPaneSize = Math.max(secondaryPaneSize - (l_primaryMinSize - primaryPaneSize), 0);
+        }
+        else if (secondaryPaneSize < l_secondaryMinSize) {
+            secondaryPaneSize = Math.min(totalSize - splitterSize - l_primaryMinSize, l_secondaryMinSize);
+        }
+        return secondaryPaneSize;
+    };
+    const handleResize = () => {
+        if (splitterRef && !percentage) {
+            const containerRect = containerRef.current?.getBoundingClientRect();
+            const splitterRect = splitterRef.current?.getBoundingClientRect();
+            const secondaryPaneSize = getSecondaryPaneSize(containerRect, splitterRect, {
+                left: splitterRect?.left,
+                top: splitterRect?.top
+            }, false);
+            setSecondaryPaneSize(secondaryPaneSize);
+        }
+    };
+    const handleMouseMove = (e) => {
+        if (resizing) {
+            const containerRect = containerRef.current?.getBoundingClientRect();
+            const splitterRect = splitterRef.current?.getBoundingClientRect();
+            const secondaryPaneSize = getSecondaryPaneSize(containerRect, splitterRect, {
+                left: e.clientX,
+                top: e.clientY
+            }, true);
+            clearSelection();
+            setSecondaryPaneSize(secondaryPaneSize);
+        }
+    };
+    const handleTouchMove = (e) => {
+        handleMouseMove(e.changedTouches[0]);
+    };
+    const handleSplitterMouseDown = () => {
+        clearSelection();
+        setResizing(true);
+    };
+    const handleMouseUp = () => {
+        setResizing((prevResizing) => (prevResizing ? false : prevResizing));
+    };
+    useEffect(() => {
+        const secondaryPaneSizeCalculation = () => {
+            if (splitterRef.current && !percentage) {
+                const containerRect = containerRef.current?.getBoundingClientRect();
+                const splitterRect = splitterRef.current.getBoundingClientRect();
+                const newSecondaryPaneSize = getSecondaryPaneSize(containerRect, splitterRect, { left: splitterRect.left, top: splitterRect.top }, false);
+                setSecondaryPaneSize(newSecondaryPaneSize);
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        let initialSecondaryPaneSize;
+        if (typeof secondaryInitialSize !== 'undefined') {
+            initialSecondaryPaneSize = secondaryInitialSize;
+        }
+        else {
+            const containerRect = containerRef.current?.getBoundingClientRect();
+            const splitterRect = splitterRef.current?.getBoundingClientRect() || { width: DEFAULT_SPLITTER_SIZE, height: DEFAULT_SPLITTER_SIZE };
+            initialSecondaryPaneSize = getSecondaryPaneSize(containerRect, splitterRect, {
+                left: containerRect.left + (containerRect.width - splitterRect.width) / 2,
+                top: containerRect.top + (containerRect.height - splitterRect.height) / 2,
+            }, false);
+        }
+        setSecondaryPaneSize(initialSecondaryPaneSize);
+        // Call the calculation function initially
+        secondaryPaneSizeCalculation();
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [secondaryInitialSize, percentage]);
+    useEffect(() => {
+        if (secondaryPaneSize !== 0 && onSecondaryPaneSizeChange) {
+            onSecondaryPaneSizeChange(secondaryPaneSize);
+        }
+        if (resizing) {
+            if (onDragStart) {
+                onDragStart();
+            }
+        }
+        else if (onDragEnd) {
+            onDragEnd();
+        }
+    }, [secondaryPaneSize, resizing]);
+    const childrenArray = React.Children.toArray(children).slice(0, 2);
+    if (childrenArray.length === 0) {
+        childrenArray.push(_jsx("div", {}));
+    }
+    else if (childrenArray.length === 1) {
+        if (primaryIndex == 0)
+            childrenArray.push(_jsx("div", {}));
+        else
+            childrenArray.unshift(_jsx("div", {}));
+    }
+    const thereAreChildrenEmpty = () => {
+        return childrenArray.length == 2 && (elementIsEmpty(childrenArray[0]) || elementIsEmpty(childrenArray[1]));
+    };
+    const elementIsEmpty = (child) => {
+        return Boolean(Object.keys(child.props).length === 0);
+    };
+    const wrappedChildren = childrenArray.map((child, i) => {
+        let primary = true;
+        let size = null;
+        let unit = percentage ? '%' : 'px';
+        if (childrenArray.length > 1 && i !== primaryIndex) {
+            primary = false;
+            size = secondaryPaneSize;
+        }
+        if (elementIsEmpty(child)) {
+            size = 0;
+            unit = "%";
+        }
+        return (_jsx(StyledPane, { "$isPrimary": primary, "$isVertical": vertical, "$size": size || 0, "$unit": percentage ? '%' : 'px', children: child }));
+    });
+    return (_jsxs(StyledContainer, { "$isResizing": resizing, "$isVertical": vertical, "$height": height, "$width": width, ref: containerRef, onMouseMove: handleMouseMove, onTouchMove: handleTouchMove, onMouseUp: handleMouseUp, onTouchEnd: handleMouseUp, children: [wrappedChildren[0], !thereAreChildrenEmpty() &&
+                _jsx(StyledSplitter, { "$isResizing": resizing, "$isVertical": vertical, role: "separator", ref: splitterRef, onMouseDown: handleSplitterMouseDown, onTouchStart: handleSplitterMouseDown }), wrappedChildren.length > 1 && wrappedChildren[1]] }));
+};
+export default TMSplitterLayout;

package/lib/components/viewers/TMDataListItemViewer.d.ts

@@ -0,0 +1,9 @@
+import { DataListViewModes } from '@topconsultnpm/sdk-ts-beta';
+import { DataGridTypes } from 'devextreme-react/cjs/data-grid';
+declare const TMDataListItemViewer: ({ dataListId, value, viewMode }: {
+    dataListId?: number;
+    value?: string;
+    viewMode?: DataListViewModes;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TMDataListItemViewer;
+export declare const cellRenderDataListItem: (data: DataGridTypes.ColumnCellTemplateData, dataListId?: number, viewMode?: DataListViewModes) => import("react/jsx-runtime").JSX.Element;

package/lib/components/viewers/TMDataListItemViewer.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { DataListCacheService, DataListViewModes } from '@topconsultnpm/sdk-ts-beta';
+import { TMImageLibrary } from '../../helper';
+import { StyledDivHorizontal } from '../base/Styled';
+import TMTooltip from '../base/TMTooltip';
+const TMDataListItemViewer = ({ dataListId, value, viewMode = DataListViewModes.ImageAndDescription }) => {
+    const [dataListItem, setDataListItem] = useState();
+    useEffect(() => {
+        if (!dataListId || dataListId <= 0) {
+            setDataListItem(undefined);
+            return;
+        }
+        value && DataListCacheService.GetAsync(dataListId).then((dl) => {
+            console.log(dl);
+            if (value.length > 0) {
+                setDataListItem(dl?.items?.find(o => o.value == value));
+            }
+        });
+    }, [dataListId, value]);
+    let showIcon = viewMode != DataListViewModes.Description;
+    return (_jsxs(StyledDivHorizontal, { children: [showIcon && dataListItem && _jsx(TMTooltip, { content: dataListItem.value, children: _jsx(TMImageLibrary, { imageID: dataListItem.imageID }) }), _jsx("p", { style: { textAlign: 'left', marginLeft: showIcon ? '5px' : '' }, children: dataListItem?.name })] }));
+};
+export default TMDataListItemViewer;
+export const cellRenderDataListItem = (data, dataListId, viewMode) => {
+    return (_jsx(TMDataListItemViewer, { dataListId: dataListId, value: data.value, viewMode: viewMode }));
+};

package/lib/components/viewers/TMMidViewer.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ITopMediaSession, MetadataDescriptor } from '@topconsultnpm/sdk-ts-beta';
+import { TID_MID } from '../../ts';
+import { DataGridTypes } from 'devextreme-react/cjs/data-grid';
+export declare const TMMidViewer: ({ tmSession, tid_mid, showCompleteName, showIcon, showId, noneSelectionText }: {
+    tmSession?: ITopMediaSession;
+    tid_mid: TID_MID | undefined;
+    showCompleteName?: boolean;
+    showIcon?: boolean;
+    showId?: boolean;
+    noneSelectionText?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+interface ITMMetadataIcon {
+    tid: number | undefined;
+    md: MetadataDescriptor | undefined;
+}
+export declare const TMMetadataIcon: ({ tid, md }: ITMMetadataIcon) => import("react/jsx-runtime").JSX.Element | null;
+interface ITMMetadataTooltip {
+    tid: number | undefined;
+    md: MetadataDescriptor | undefined;
+    children?: React.ReactNode;
+}
+export declare const TMMetadataTooltip: React.FC<ITMMetadataTooltip>;
+export declare const cellRenderMID: (data: DataGridTypes.ColumnCellTemplateData, noneSelectionText?: string, tid?: number) => import("react/jsx-runtime").JSX.Element;
+export declare const getDisplayAlias: (dcmtTypeName: string | undefined, alias: string | undefined) => string | undefined;
+export {};

package/lib/components/viewers/TMMidViewer.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { LocalizeMetadataFormats, SDKUI_Localizator, getCompleteMetadataName, getTIDByMID } from '../../helper';
+import { DcmtTypeListCacheService, MetadataDataDomains, MetadataDataTypes, MetadataFormats, SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
+import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipItem, StyledTooltipSeparatorItem } from '../base/Styled';
+import TMTooltip from '../base/TMTooltip';
+import mdText from '../../assets/Metadata/MetadataText_16.png';
+import mdDate from '../../assets/Metadata/MetadataDateTime_16.png';
+import mdNumber from '../../assets/Metadata/MetadataNumeric_16.png';
+import mdComputed from '../../assets/Metadata/MetadataComputed_32.png';
+import mdNumerator from '../../assets/Metadata/Numerator_32.png';
+import mdUser from '../../assets/Metadata/UserLevel_Member_32.png';
+import mdDataList from '../../assets/Metadata/DataList_32.png';
+import mdDynDataList from '../../assets/Metadata/DynamicDataList_32.png';
+import mdSpecial from '../../assets/Metadata/MetadataSpecial_32.png';
+export const TMMidViewer = ({ tmSession, tid_mid, showCompleteName, showIcon = false, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
+    const [md, setMd] = useState();
+    const [dcmtTypeName, setDcmtTypeName] = useState();
+    useEffect(() => {
+        if (!tid_mid || !tid_mid.tid || tid_mid.tid <= 0) {
+            setMd(undefined);
+            return;
+        }
+        DcmtTypeListCacheService.GetAsync(tid_mid.tid, true, tmSession).then((dtd) => {
+            setDcmtTypeName(getDisplayAlias(SDK_Globals.useLocalizedName ? dtd?.nameLoc : dtd?.name, tid_mid.aliasTID));
+            let md = dtd?.metadata?.find(o => o.id == tid_mid.mid);
+            setMd(md);
+        });
+    }, [tid_mid]);
+    const displayName = () => {
+        if (!md)
+            return noneSelectionText;
+        if (showCompleteName)
+            return getCompleteMetadataName(dcmtTypeName, SDK_Globals.useLocalizedName ? md.nameLoc : md.name);
+        return SDK_Globals.useLocalizedName ? md.nameLoc : md.name;
+    };
+    return (_jsxs(StyledDivHorizontal, { children: [showIcon && _jsx(TMMetadataIcon, { tid: tid_mid?.tid, md: md }), _jsx("p", { style: { textAlign: 'left', marginLeft: showIcon ? '5px' : '', color: md?.isRequired == 1 ? 'red' : undefined }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px' }, children: `(MID: ${tid_mid?.mid})` })] }));
+};
+export const TMMetadataIcon = ({ tid, md }) => {
+    if (!md)
+        return null;
+    let icon = null;
+    switch (md.dataDomain) {
+        case MetadataDataDomains.Computed:
+            icon = _jsx("img", { height: 16, width: 16, src: mdComputed, alt: '' });
+            break;
+        case MetadataDataDomains.DataList:
+            icon = _jsx("img", { height: 16, width: 16, src: mdDataList, alt: '' });
+            break;
+        case MetadataDataDomains.DynamicDataList:
+            icon = _jsx("img", { height: 16, width: 16, src: mdDynDataList, alt: '' });
+            break;
+        case MetadataDataDomains.Numerator:
+            icon = _jsx("img", { height: 16, width: 16, src: mdNumerator, alt: '' });
+            break;
+        case MetadataDataDomains.Special:
+            icon = _jsx("img", { height: 16, width: 16, src: mdSpecial, alt: '' });
+            break;
+        case MetadataDataDomains.UserID:
+            icon = _jsx("img", { height: 16, width: 16, src: mdUser, alt: '' });
+            break;
+        default:
+            switch (md.dataType) {
+                case MetadataDataTypes.Varchar:
+                    icon = _jsx("img", { src: mdText, alt: '' });
+                    break;
+                case MetadataDataTypes.Number:
+                    icon = _jsx("img", { src: mdNumber, alt: '' });
+                    break;
+                case MetadataDataTypes.DateTime:
+                    icon = _jsx("img", { src: mdDate, alt: '' });
+                    break;
+                default:
+                    icon = _jsx(_Fragment, {});
+                    break;
+            }
+            break;
+    }
+    return (_jsx(_Fragment, { children: icon ? _jsx(TMMetadataTooltip, { tid: tid, md: md, children: icon }) : null }));
+};
+export const TMMetadataTooltip = ({ tid, md, children }) => {
+    const _setDefaultValueForUI = (defaultValue) => {
+        if (!defaultValue)
+            return defaultValue;
+        if (!defaultValue.includes("TM_GetViewLink"))
+            return defaultValue;
+        return "=TM_GetViewLink(...)";
+    };
+    const renderTooltipContent = (tid, md) => {
+        return (!md ? null
+            : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { children: `${SDK_Globals.useLocalizedName ? md.nameLoc : md.name} (TID: ${tid}, MID: ${md.id})` }), md.description && _jsx(StyledTooltipItem, { children: md.description }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${md.dataType} ${md.dataType == MetadataDataTypes.Varchar ? `(${md.length ?? 0})` : md.dataType == MetadataDataTypes.Number ? `(${md.length ?? 0},${md.scale ?? 0})` : ''} ${md.isRequired == 1 ? `${SDKUI_Localizator.Required} ${md.isPrimaryKey == 1 ? ' (PK)' : ''}` : SDKUI_Localizator.RequiredNOT} ` }), md.dataDomain && _jsx(StyledTooltipItem, { children: md.dataDomain }), md.isLexProt == 1 && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes}` }), md.isLexProt == 2 && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.MetadataFlag}` }), md.isLexProt == 3 && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes} (${SDKUI_Localizator.MetadataFlag})` }), md.isFreeSearchInput && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search_Free}: ${SDKUI_Localizator.Yes}` }), md.isSpecialSearchOutput && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search_Special}: ${SDKUI_Localizator.Yes}` }), md.format?.format && md.format.format != MetadataFormats.None && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Format}: ${LocalizeMetadataFormats(md.format.format)}` }), md.defaultValue && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Default}: ${_setDefaultValueForUI(md.defaultValue)}` }), md.fromTID && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.MetadataRoot}: ${md.isRootMID == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No}` }), md.templateMID && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Template}: ${md.templateMID}` }), md.perm && _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { "$color": 'primary', "$marginTop": '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Archive}: ${md.perm.canArchive}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.View_Metadato}: ${md.perm.canView}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search}: ${md.perm.canSearch}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Update}: ${md.perm.canUpdate}` })] })] }));
+    };
+    return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { content: renderTooltipContent(tid, md), children: children }) }));
+};
+export const cellRenderMID = (data, noneSelectionText, tid) => {
+    let mid = data.value;
+    let calcTid = !tid ? getTIDByMID(mid) : tid;
+    return (_jsx(TMMidViewer, { tid_mid: { tid: calcTid, mid: mid }, noneSelectionText: noneSelectionText }));
+};
+export const getDisplayAlias = (dcmtTypeName, alias) => {
+    if (!alias)
+        return dcmtTypeName;
+    let tokens = alias.split('_');
+    if (tokens.length != 2)
+        return dcmtTypeName;
+    let num = tokens[1].replace("A", "");
+    if (!num)
+        return dcmtTypeName;
+    return `${dcmtTypeName}_${num}`;
+};

package/lib/components/viewers/TMTidViewer.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { DcmtTypeDescriptor, ITopMediaSession } from '@topconsultnpm/sdk-ts-beta';
+import { DataGridTypes } from 'devextreme-react/cjs/data-grid';
+interface ITMDcmtTypeIcon {
+    dtd: DcmtTypeDescriptor | undefined;
+}
+export declare const TMDcmtTypeIcon: React.FC<ITMDcmtTypeIcon>;
+interface ITMDcmtTypeTooltip {
+    dtd: DcmtTypeDescriptor | undefined;
+    children?: React.ReactNode;
+}
+export declare const TMDcmtTypeTooltip: React.FC<ITMDcmtTypeTooltip>;
+declare const TMTidViewer: ({ tmSession, tid, showIcon, showId, noneSelectionText }: {
+    tmSession?: ITopMediaSession;
+    tid?: number;
+    showIcon?: boolean;
+    showId?: boolean;
+    noneSelectionText?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TMTidViewer;
+export declare const cellRenderTID: (data: DataGridTypes.ColumnCellTemplateData, noneSelectionText?: string) => import("react/jsx-runtime").JSX.Element;