@topconsultnpm/sdkui-react-beta 6.13.12 → 6.13.13

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

@@ -1,38 +1,36 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { SharingModes, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
 import { LocalizeSharingModes } from '../../../helper/Enum_Localizator';
 import ContextMenu from 'devextreme-react/cjs/context-menu';
-import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard, IconSavedQuery, IconAdvanced, IconLightningFill, IconApply } from '../../../helper';
+import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard, IconApply } from '../../../helper';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { TMMessageBoxManager, ButtonNames, TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
-import TMTooltip from '../../base/TMTooltip';
 import { TMSearchBar } from '../../sidebar/TMHeader';
-const StyledSavedQueryListItem = styled.div `
+const StyledSqdItem = styled.div `
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    background: ${(props) => props.$backgroundColor ?? undefined};
-    border-radius: 8px;
-    border: 1px solid;
-    border-color: lightgray;
-    box-shadow: 1px 1px 7px rgba(0,0,0,0.15);
-    width: 100%;
-    height: max-content;
-    min-height: 45px;
-    padding: 5px;
+    flex-direction: column;
+    align-items: stretch;
+    min-width: 0;
+    padding: 10px;
+    position: relative;
     white-space: nowrap;
     text-overflow: ellipsis;
 
     &:hover {
-        background: ${(props) => props.$hoverColor ?? undefined};
         cursor: pointer;
     }
 `;
+const StyledPipe = styled.div `
+    width: 90%;
+    height: 1px;
+    background: #00A99D;
+    margin: 4px auto;
+`;
 const getSharingModeColor = (sharingMode) => {
     switch (sharingMode) {
         case SharingModes.Private: return 'rgb(185, 72, 57)';
@@ -119,23 +117,49 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
         }
     };
     return (_jsxs("div", { style: { height: height ?? '100%', width: '100%', display: 'flex', flexDirection: 'column', gap: '5px', paddingTop: allowShowSearch ? '5px' : undefined }, children: [allowShowSearch &&
-                _jsx("div", { style: { width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', paddingBottom: '10px', paddingTop: '10px' }, children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchText, onSearchValueChanged: (e) => setSearchText(e) }) }), _jsx("div", { style: { width: '100%', overflow: 'auto', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', padding: '5px', gap: '3px' }, children: dataSource.slice(0, showAllRoot || searchText.length > 0 ? dataSource.length : initialSQDsMaxItems).filter(o => searchText.length <= 0 || (searchText.length > 0 && o.name?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())) || o.description?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())).map((sqd, index) => (_jsxs(StyledSavedQueryListItem, { id: `sqd-item-${sqd.id}`, style: { position: 'relative', gap: '5px', paddingLeft: '5px' }, "$backgroundColor": 'white', "$hoverColor": 'rgba(243, 152, 119, .2)', "$selectedColor": 'rgb(237, 115, 72)', onClick: () => {
+                _jsx("div", { style: { width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', paddingBottom: '10px', paddingTop: '10px' }, children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchText, onSearchValueChanged: (e) => setSearchText(e) }) }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '100%',
+                    padding: '5px',
+                    gap: '3px',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis'
+                }, children: dataSource.slice(0, showAllRoot || searchText.length > 0 ? dataSource.length : initialSQDsMaxItems).filter(o => searchText.length <= 0 || (searchText.length > 0 && o.name?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())) || o.description?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())).map((sqd, index) => (_jsxs(StyledSqdItem, { id: `sqd-item-${sqd.id}`, onClick: () => {
                         setSelectedItem(sqd);
                         onItemClick?.(sqd);
-                    }, children: [_jsx(TMTooltip, { content: getTooltipBySqd(sqd), children: _jsx("div", { style: { backgroundColor: 'white', minWidth: '24px', minHeight: '24px', borderRadius: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(IconSavedQuery, { fontSize: 22, color: getSharingModeColor(sqd.sharingMode) }) }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', whiteSpace: 'nowrap',
+                    }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'center',
+                                width: '100%',
+                                whiteSpace: 'nowrap',
                                 overflow: 'hidden',
-                                textOverflow: 'ellipsis' }, children: [_jsxs("div", { style: {
-                                        display: 'flex', justifyContent: 'flex-start', width: '100%', whiteSpace: 'nowrap',
+                                textOverflow: 'ellipsis',
+                                gap: '5px'
+                            }, children: [_jsx("p", { style: {
+                                        fontSize: '1rem',
+                                        fontWeight: sqd.id === 1 ? 600 : 'normal',
+                                        whiteSpace: 'nowrap',
                                         overflow: 'hidden',
-                                        textOverflow: 'ellipsis'
-                                    }, children: [_jsx("p", { style: {
-                                                fontSize: '1rem', fontWeight: 600, whiteSpace: 'nowrap',
-                                                overflow: 'hidden',
-                                                textOverflow: 'ellipsis', alignItems: 'flex-end', display: 'flex'
-                                            }, children: sqd.name }), manageDefault && sqd.isDefault == 1 && _jsx(IconStar, { fontSize: 16, color: 'rgb(248, 215, 117)' })] }), _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'flex-start', width: '100%' }, children: _jsx("p", { style: { fontSize: '0.9rem', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, children: sqd.description }) })] }), _jsxs("div", { style: { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start' }, children: [_jsx("div", { style: { height: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: sqd.isEasyWhere != 1 ? _jsx(IconAdvanced, { fontSize: 20 }) : _jsx(_Fragment, {}) }), _jsx("div", { style: { height: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: sqd.runSearchWhenSelected ?
-                                        _jsx("div", { style: { width: '16px', height: '16px', borderRadius: '16px', backgroundColor: TMColors.info, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1rem', fontWeight: 'bold' }, children: _jsx(IconLightningFill, { fontSize: 12, color: 'rgb(224, 194, 43)' }) })
-                                        : _jsx(_Fragment, {}) })] }), selectedItem?.id == sqd.id &&
-                            _jsx("div", { style: { width: '24px', height: '24px', borderRadius: '24px', backgroundColor: 'rgba(243, 152, 119, .8)', boxShadow: '1px 2px 2px #00000050', position: 'absolute', top: '-2px', right: '-5px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1rem', fontWeight: 'bold' }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id))) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
+                                        textOverflow: 'ellipsis',
+                                        color: TMColors.primaryColor,
+                                        paddingRight: '18px'
+                                    }, children: sqd.name }), manageDefault && sqd.isDefault == 1 && _jsx(IconStar, { fontSize: 16, color: 'rgb(248, 215, 117)' })] }), selectedItem?.id == sqd.id &&
+                            _jsx("div", { style: {
+                                    width: '24px',
+                                    height: '24px',
+                                    borderRadius: '24px',
+                                    position: 'absolute',
+                                    top: '-1px',
+                                    right: '0px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    fontSize: '1rem',
+                                    fontWeight: 'bold'
+                                }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }), _jsx(StyledPipe, {}), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id))) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
                 _jsx(TMButton, { elementStyle: { display: 'flex', justifyContent: 'flex-end', padding: '10px' }, btnStyle: 'icon', caption: showAllRoot ? "Mostra meno" : `Mostra tutte le ricerche (+${dataSource.length - initialSQDsMaxItems})`, icon: showAllRoot ?
                         _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `-${dataSource.length - initialSQDsMaxItems}` }) }) :
                         _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `+${dataSource.length - initialSQDsMaxItems}` }) }), onClick: () => setShowAllRoot(!showAllRoot) })] }));

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

@@ -10,6 +10,7 @@ import TMDataGrid from '../../base/TMDataGrid';
 import TMLayoutContainer, { TMLayoutItem } from '../../base/TMLayout';
 import TMPanel from '../../base/TMPanel';
 import TMTidViewer from '../../viewers/TMTidViewer';
+import { TMColors } from '../../../utils/theme';
 const TMTreeSelector = ({ layoutMode = LayoutModes.Update, onSelectedTIDChanged, onClose }) => {
     const [trees, setTrees] = useState([]);
     const [treeItems, setTreeItems] = useState([]);
@@ -60,7 +61,7 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, onSelectedTIDChanged,
     const renderCell = (data) => {
         let treeItem = data.data;
         if (treeItem.type == TreeItemTypes.DcmtType)
-            return (_jsx(TMTidViewer, { tid: treeItem.tid, showIcon: true }));
+            return (_jsx(TMTidViewer, { tid: treeItem.tid, color: TMColors.primaryColor, showIcon: false }));
         else
             return (_jsxs(StyledDivHorizontal, { style: { gap: 5 }, children: [_jsx(IconFolder, { fontSize: 18 }), _jsx("p", { children: treeItem.nameLoc })] }));
     };

package/lib/components/grids/TMRecentsManager.js

@@ -16,6 +16,7 @@ const StyledRecentTidItem = styled.div `
     min-width: 0;
     padding: 10px;
     position: relative;
+
     &:hover {
         cursor: pointer;
     }
@@ -29,8 +30,15 @@ const StyledPipe = styled.div `
 const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
 const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, onDeletedTID }) => {
     const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px' }, children: [_jsxs(StyledRecentTidItem, { id: `tid-${0}`, onClick: () => { setShowDcmtTypeChooser(true); }, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: { color: TMColors.primaryColor, fontSize: '1rem', fontWeight: 600, textOverflow: 'ellipsis' }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }), _jsx(StyledPipe, {})] }, 0), mruTIDs.map((tid) => {
-                        return (_jsxs(StyledRecentTidItem, { id: `tid-${tid}`, onClick: () => { onSelectedTID?.(tid); }, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: tid, color: TMColors.primaryColor }) }), _jsx(StyledPipe, {}), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${tid}`, onItemClick: () => { onDeletedTID?.(tid); } }), currentMruTID == tid &&
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px' }, children: [_jsxs(StyledRecentTidItem, { id: `tid-${0}`, onClick: () => { setShowDcmtTypeChooser(true); }, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
+                                        color: TMColors.primaryColor,
+                                        fontSize: '1rem',
+                                        fontWeight: 600,
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis'
+                                    }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }), _jsx(StyledPipe, {})] }, 0), mruTIDs.map((tid) => {
+                        return (_jsxs(StyledRecentTidItem, { id: `tid-${tid}`, onClick: () => { onSelectedTID?.(tid); }, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: tid, color: TMColors.primaryColor, showIcon: false }) }), _jsx(StyledPipe, {}), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${tid}`, onItemClick: () => { onDeletedTID?.(tid); } }), currentMruTID == tid &&
                                     _jsx("div", { style: {
                                             width: '24px',
                                             height: '24px',

package/lib/components/viewers/TMTidViewer.js

@@ -297,7 +297,8 @@ const TMTidViewer = ({ tmSession, tid, showIcon = false, color, showId = false,
                     color: color ?? (dtd?.isView ? 'red' : ''),
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
-                    textOverflow: 'ellipsis'
+                    textOverflow: 'ellipsis',
+                    paddingRight: '10px'
                 }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px' }, children: `(TID: ${tid})` })] }));
 };
 export default TMTidViewer;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.13.12",
+    "version": "6.13.13",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",