@topconsultnpm/sdkui-react-beta 6.12.41 → 6.12.43

package/lib/components/grids/TMRecentsManager.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DeviceType } from '../base/TMDeviceProvider';
+interface ITMRecentsProps {
+    mruTIDs: number[];
+    currentMruTID?: number;
+    deviceType?: DeviceType;
+    onSelectedTID?: (tid: number) => void;
+    onDeletedTID?: (tid: number) => void;
+}
+declare const TMRecentsManager: React.FunctionComponent<ITMRecentsProps>;
+export default TMRecentsManager;

package/lib/components/grids/TMRecentsManager.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { useState } from 'react';
+import ReactDOMServer from 'react-dom/server';
+import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts-beta';
+import ContextMenu from 'devextreme-react/cjs/context-menu';
+import { IconDelete, IconFolderSearch, SDKUI_Localizator, IconApply } from '../../helper';
+import { TMColors } from '../../utils/theme';
+import { StyledBadge } from '../base/Styled';
+import { DeviceType } from '../base/TMDeviceProvider';
+import { TMDcmtTypeChooserForm } from '../choosers/TMDcmtTypeChooser';
+import TMTidViewer from '../viewers/TMTidViewer';
+const StyledRecentCardItem = styled.div `
+    display: flex;
+    flex-direction: row;
+    background: ${(props) => props.$backgroundColor ?? undefined};
+    border-radius: 8px;
+    border: ${(props) => props.$showBorder ? '1px solid lightgray' : undefined};
+    width: 100%;
+    height: 40px;
+    padding: 3px;
+    position: relative;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &:hover {
+        background: ${(props) => props.$hoverColor ?? undefined};
+        cursor: pointer;
+    }
+`;
+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-reverse', padding: '5px', gap: '5px' }, children: [_jsxs(StyledRecentCardItem, { "$backgroundColor": 'white', "$hoverColor": 'rgba(217, 37, 136, 0.3)', "$showBorder": true, onClick: () => { setShowDcmtTypeChooser(true); }, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(IconFolderSearch, { fontSize: 24, color: 'rgb(217, 37, 136)' }) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'flex-start', width: '100%' }, children: _jsx("p", { style: { fontSize: '1rem', fontWeight: 600, textOverflow: 'ellipsis' }, children: SDKUI_Localizator.AllDcmtTypes }) }), _jsx(StyledBadge, { style: { height: 'max-content' }, "$backgroundColor": TMColors.info, children: _jsx("p", { children: DcmtTypeListCacheService.CacheCount(true) }) })] }), mruTIDs.map((tid) => {
+                        return (_jsxs(StyledRecentCardItem, { id: `tid-${tid}`, "$backgroundColor": `${TMColors.primaryColor}33`, "$hoverColor": `${TMColors.primaryColor}66`, onClick: async () => {
+                                onSelectedTID?.(tid);
+                            }, children: [_jsx("div", { style: {
+                                        display: 'flex', alignItems: 'center', paddingRight: '5px', fontSize: '1rem', fontWeight: 600, whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis'
+                                    }, children: _jsx(TMTidViewer, { tid: tid, showIcon: true }) }), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${tid}`, onItemClick: () => { onDeletedTID?.(tid); } }), currentMruTID == tid &&
+                                    _jsx("div", { style: { width: '24px', height: '24px', borderRadius: '24px', backgroundColor: 'rgba(243, 152, 119, .8)', boxShadow: '1px 2px 2px #00000050', position: 'absolute', top: '-4px', right: '-5px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1rem', fontWeight: 'bold' }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }, tid));
+                    })] }), showDcmtTypeChooser && _jsx(TMDcmtTypeChooserForm, { onClose: () => setShowDcmtTypeChooser(false), onChoose: (tids) => { onSelectedTID?.(tids?.[0] ?? 0); } })] }));
+};
+export default TMRecentsManager;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DcmtInfo } from '../../ts';
+import { DcmtInfo, TaskContext } from '../../ts';
 import { DeviceContextProps } from '../base/TMDeviceProvider';
 interface ITMMasterDetailDcmtsProps extends DeviceContextProps {
     inputDcmts?: DcmtInfo[];
@@ -12,11 +12,7 @@ interface ITMMasterDetailDcmtsProps extends DeviceContextProps {
     onPrev?: () => void;
     onBack?: () => void;
     appendMasterDcmts?: (tid: number | undefined, did: number | undefined) => void;
-    onTaskCreateRequest?: (activityContext: {
-        tid: number;
-        did: number;
-        name: string;
-    } | undefined) => void;
+    onTaskCreateRequest?: (taskContext: TaskContext | undefined) => void;
 }
 declare const TMMasterDetailDcmts: React.FC<ITMMasterDetailDcmtsProps>;
 export default TMMasterDetailDcmts;

package/lib/components/search/TMSavedQueryForm.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { QueryDescriptor, SavedQueryDescriptor } from '@topconsultnpm/sdk-ts-beta';
+import { ITMSaveFormProps } from '../../ts';
+interface ISavedQueryFormProps extends ITMSaveFormProps<SavedQueryDescriptor> {
+    qd?: QueryDescriptor;
+    isAdvancedSearch?: boolean;
+}
+declare const TMSavedQueryForm: FC<ISavedQueryFormProps>;
+export default TMSavedQueryForm;

package/lib/components/search/TMSavedQueryForm.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ObjectClasses, PlatformObjectValidator, SharingModes, SDK_Localizator, ValidationItem, ResultTypes, TMPropertyNames, SearchEngine } from '@topconsultnpm/sdk-ts-beta';
+import { LocalizeSharingModes } from '../../helper/Enum_Localizator';
+import { deepCompare, SDKUI_Localizator } from '../../helper';
+import { SaveFormOptions, useSaveForm } from '../../hooks/useForm';
+import { FormModes } from '../../ts';
+import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
+import TMUserChooser from '../choosers/TMUserChooser';
+import TMCheckBox from '../editors/TMCheckBox';
+import TMRadioButton from '../editors/TMRadioButton';
+import TMTextBox from '../editors/TMTextBox';
+import TMSaveForm from '../forms/TMSaveForm';
+const TMSavedQueryForm = ({ id, qd, isAdvancedSearch = false, title, width, height, onSaved, onCancel, onClose, onStatusChanged, isModal, formMode = FormModes.Update, showBackButton }) => {
+    const validator = async (d) => {
+        let vil = [];
+        if (!d.name)
+            vil.push(new ValidationItem(ResultTypes.ERROR, "name", `${SDK_Localizator.RequiredField}`));
+        else if (!PlatformObjectValidator.IsValidObjectName(d.name))
+            vil.push(new ValidationItem(ResultTypes.ERROR, "name", `${SDK_Localizator.InvalidName}`));
+        return vil;
+    };
+    const sfo = new SaveFormOptions();
+    sfo.objClass = ObjectClasses.SavedQuery;
+    const customizeFormData = (d) => { d.qd = qd; d.isEasyWhere = isAdvancedSearch ? 0 : 1; return d; };
+    const { formData, setFormData, formDataOrig, validationItems, exception, saveDataAsync } = useSaveForm(formMode, id, sfo, validator, onSaved, onStatusChanged, customizeFormData);
+    const isModified = () => {
+        let data = { ...formData };
+        data.qd = SearchEngine.NormalizeQueryDescriptor(data.qd);
+        let dataOrig = { ...formDataOrig };
+        dataOrig.qd = SearchEngine.NormalizeQueryDescriptor(dataOrig.qd);
+        return !deepCompare(data, dataOrig);
+    };
+    return (_jsx(TMSaveForm, { id: id, title: title, isModal: isModal, onClose: onClose, onCancel: onCancel, formMode: formMode, exception: exception, hasNavigation: false, width: width, height: height, showBackButton: showBackButton, validationItems: validationItems, onUndo: () => { setFormData(customizeFormData(formDataOrig)); }, onSaveAsync: async () => { await saveDataAsync(); onClose?.(); }, isModified: isModified(), children: _jsx(TMLayoutContainer, { direction: 'vertical', children: _jsx(TMLayoutItem, { height: 'max-content', children: _jsxs(TMLayoutContainer, { gap: 5, children: [_jsx(TMLayoutItem, { height: 'max-content', children: _jsx(TMTextBox, { value: formData?.name ?? '', label: SDKUI_Localizator.Name, isModifiedWhen: formData?.name !== formDataOrig?.name, validationItems: validationItems?.filter(o => o.PropertyName === TMPropertyNames.entityName), onValueChanged: (e) => { formData && setFormData({ ...formData, name: e.target.value }); } }) }), _jsx(TMLayoutItem, { height: 'max-content', children: _jsx(TMTextBox, { value: formData?.description ?? '', label: SDKUI_Localizator.Description, isModifiedWhen: formData?.description !== formDataOrig?.description, onValueChanged: (e) => { formData && setFormData({ ...formData, description: e.target.value }); } }) }), _jsx(TMLayoutItem, { height: 'max-content', children: _jsx(TMCheckBox, { value: formData?.runSearchWhenSelected ?? 0, label: 'Eseguire immediatamente la ricerca quando viene selezionata', isModifiedWhen: formData?.runSearchWhenSelected !== formDataOrig?.runSearchWhenSelected, onValueChanged: (newValue) => { setFormData({ ...formData, runSearchWhenSelected: newValue }); } }) }), _jsx(TMLayoutItem, { height: 'max-content', children: _jsx(TMRadioButton, { label: 'Condivisione', dataSource: [
+                                    { value: SharingModes.Private, display: LocalizeSharingModes(SharingModes.Private) },
+                                    { value: SharingModes.Public, display: LocalizeSharingModes(SharingModes.Public) },
+                                    { value: SharingModes.Shared, display: LocalizeSharingModes(SharingModes.Shared) }
+                                ], value: formData?.sharingMode, isModifiedWhen: formData?.sharingMode !== formDataOrig?.sharingMode, onValueChanged: (newValue) => setFormData({ ...formData, sharingMode: newValue }) }) }), _jsx(TMLayoutItem, { children: _jsx(TMUserChooser, { allowMultipleSelection: true, values: formData?.sharingUserIDs, label: SDKUI_Localizator.UserName, placeHolder: SDKUI_Localizator.NoneSelection, disabled: formData?.sharingMode !== SharingModes.Shared, 
+                                // isModifiedWhen={!MiscHelper.IntArraysAreEquals(value?.tiDs, valueOrig?.tiDs)}
+                                onValueChanged: (newValue) => setFormData({ ...formData, sharingUserIDs: newValue }) }) })] }) }) }) }));
+};
+export default TMSavedQueryForm;

package/lib/components/search/TMSavedQuerySelector.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SavedQueryDescriptor } from '@topconsultnpm/sdk-ts-beta';
+export declare const getTooltipBySqd: (sqd: SavedQueryDescriptor | undefined) => import("react/jsx-runtime").JSX.Element | null;
+interface ITMSavedQuerySelectorProps {
+    height?: string;
+    items?: SavedQueryDescriptor[];
+    selectedId?: number;
+    allowShowSearch?: boolean;
+    manageDefault?: boolean;
+    onItemClick?: (sqd: SavedQueryDescriptor) => void;
+    onDeleted?: (sqd: SavedQueryDescriptor) => void;
+    onFavoritesAdded?: (sqd: SavedQueryDescriptor) => void;
+    onRefreshData?: () => void;
+}
+declare const TMSavedQuerySelector: React.MemoExoticComponent<({ items, selectedId, allowShowSearch, height, manageDefault, onItemClick, onDeleted, onFavoritesAdded, onRefreshData }: ITMSavedQuerySelectorProps) => import("react/jsx-runtime").JSX.Element>;
+export default TMSavedQuerySelector;

package/lib/components/search/TMSavedQuerySelector.js

@@ -0,0 +1,143 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } 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 { 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 `
+    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;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &:hover {
+        background: ${(props) => props.$hoverColor ?? undefined};
+        cursor: pointer;
+    }
+`;
+const getSharingModeColor = (sharingMode) => {
+    switch (sharingMode) {
+        case SharingModes.Private: return 'rgb(185, 72, 57)';
+        case SharingModes.Public: return 'rgb(56, 126, 28)';
+        case SharingModes.Shared: return 'rgb(224, 194, 43)';
+        default: return 'black';
+    }
+};
+export const getTooltipBySqd = (sqd) => {
+    if (!sqd)
+        return null;
+    return (_jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("div", { children: ["ID: ", sqd.id] }), _jsxs("div", { children: ["Master TID: ", sqd.masterTID] }), _jsx("div", { children: sqd.description }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.OwnerName, ": ", sqd.ownerName, " (", sqd.ownerID, ")"] }), _jsx("div", { children: LocalizeSharingModes(sqd.sharingMode) }), _jsxs("div", { children: ["Default: ", sqd.isDefault == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Filtro semplice", ": ", sqd.isEasyWhere == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Esegui ricerca immediatamente", ": ", sqd.runSearchWhenSelected == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.CreationTime, ": ", Globalization.getDateTimeDisplayValue(sqd.creationTime)] }), _jsxs("div", { children: [SDKUI_Localizator.LastUpdateTime, ": ", Globalization.getDateTimeDisplayValue(sqd.lastUpdateTime)] })] }));
+};
+const initialSQDsMaxItems = 12;
+const SavedQueryContexMenu = ({ sqd, manageDefault, deleteAsync, favManageAsync, setDefaultAsync }) => _jsx(ContextMenu, { items: manageDefault ? [
+        { text: SDKUI_Localizator.SetAsDefault2, icon: svgToString(_jsx(IconStar, { color: 'rgb(248, 215, 117)' })) },
+        { text: SDKUI_Localizator.Delete, disabled: (sqd.id == 1), icon: svgToString(_jsx(IconDelete, {})) },
+        { text: SDKUI_Localizator.AddToHomePage, disabled: (sqd.id == 1), icon: svgToString(_jsx(IconDashboard, {})) }
+    ] : [
+        { text: SDKUI_Localizator.Delete, disabled: (sqd.id == 1), icon: svgToString(_jsx(IconDelete, {})) },
+        { text: SDKUI_Localizator.AddToHomePage, disabled: (sqd.id == 1), icon: svgToString(_jsx(IconDashboard, {})) }
+    ], target: `#sqd-item-${sqd.id}`, onItemClick: (e) => {
+        if (e.itemIndex == 0)
+            setDefaultAsync?.(sqd);
+        else if (e.itemIndex == 1)
+            deleteAsync?.(sqd);
+        else if (e.itemIndex == 2)
+            favManageAsync?.(sqd);
+    } });
+const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch = true, height, manageDefault = true, onItemClick, onDeleted, onFavoritesAdded, onRefreshData }) => {
+    const [dataSource, setDataSource] = useState([]);
+    const [selectedItem, setSelectedItem] = useState();
+    const [searchText, setSearchText] = useState('');
+    const [showAllRoot, setShowAllRoot] = useState(false);
+    useEffect(() => { loadDataAsync(false); }, [items]);
+    useEffect(() => { setSelectedItem(dataSource.find(o => o.id == selectedId)); }, [selectedId, dataSource]);
+    const loadDataAsync = async (refreshCache) => {
+        if (items && items.length > 0)
+            setDataSource(items);
+    };
+    const deleteSQDAsync = (sqd) => {
+        TMMessageBoxManager.show({
+            title: SDKUI_Localizator.Delete, message: SDKUI_Localizator.Delete_ConfirmFor1.replaceParams(sqd?.name ?? ""), buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: async (e) => {
+                try {
+                    if (e !== ButtonNames.YES)
+                        return;
+                    TMSpinner.show();
+                    await SDK_Globals.tmSession?.NewSavedQueryEngine().DeleteAsync(sqd?.id);
+                    await loadDataAsync(true);
+                    onDeleted?.(sqd);
+                    TMSpinner.hide();
+                }
+                catch (ex) {
+                    TMSpinner.hide();
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    const favManageSQDAsync = async (sqd) => {
+        try {
+            TMSpinner.show();
+            await SDK_Globals.tmSession?.NewSavedQueryEngine().FavoritesAddOrRemoveAsync(sqd?.id, false);
+            onFavoritesAdded?.(sqd);
+            TMSpinner.hide();
+            ShowAlert({ mode: 'success', title: SDK_Localizator.SavedQuery, message: 'Operazione eseguita con successo', duration: 3000 });
+        }
+        catch (ex) {
+            TMSpinner.hide();
+            TMExceptionBoxManager.show({ exception: ex });
+        }
+    };
+    const setDefaultSQDAsync = async (sqd) => {
+        try {
+            TMSpinner.show();
+            await SDK_Globals.tmSession?.NewSavedQueryEngine().DefaultSetOrRemoveAsync(sqd.masterTID, sqd.id);
+            onRefreshData?.();
+            TMSpinner.hide();
+        }
+        catch (ex) {
+            TMSpinner.hide();
+            TMExceptionBoxManager.show({ exception: ex });
+        }
+    };
+    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: () => {
+                        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',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis' }, children: [_jsxs("div", { style: {
+                                        display: 'flex', justifyContent: 'flex-start', width: '100%', 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 &&
+                _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) })] }));
+});
+export default TMSavedQuerySelector;

package/lib/components/search/TMSearch.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TaskContext } from '../../ts';
+interface ITMSearchProps {
+    inputTID?: number;
+    inputSqdID?: number;
+    onRefreshAfterAddDcmtToFavs?: () => void;
+    onTaskCreateRequest?: (taskContext: TaskContext | undefined) => void;
+}
+declare const TMSearch: React.FunctionComponent<ITMSearchProps>;
+export default TMSearch;

package/lib/components/search/TMSearch.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { SavedQueryCacheService, SDK_Globals, DcmtTypeListCacheService, SDK_Localizator, LocalStorageService } from '@topconsultnpm/sdk-ts-beta';
+import TMSavedQuerySelector from './TMSavedQuerySelector';
+import TMTreeSelector from './TMTreeSelector';
+import { TabPanel, Item } from 'devextreme-react/tab-panel';
+import TMSearchQueryPanel, { refreshLastSearch } from './TMSearchQueryPanel';
+import { getSysAllDcmtsSQD, IconDataList, IconProgressReady, IconSavedQuery, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
+import TMLayoutContainer, { TMLayoutItem, TMSplitterLayout } from '../base/TMLayout';
+import TMToolbarCard from '../base/TMToolbarCard';
+import TMSearchResult from './TMSearchResult';
+import TMRecentsManager from '../grids/TMRecentsManager';
+import { SearchResultContext } from '../../ts';
+import { useDeviceType, DeviceType } from '../base/TMDeviceProvider';
+var TMSearchViews;
+(function (TMSearchViews) {
+    TMSearchViews[TMSearchViews["None"] = 0] = "None";
+    TMSearchViews[TMSearchViews["Result"] = 1] = "Result";
+})(TMSearchViews || (TMSearchViews = {}));
+const TMSearch = ({ inputTID, inputSqdID, onRefreshAfterAddDcmtToFavs, onTaskCreateRequest }) => {
+    const [allSQDs, setAllSQDs] = useState([]);
+    const [filteredByTIDSQDs, setFilteredByTIDSQDs] = useState([]);
+    const [currentSQD, setCurrentSQD] = useState();
+    const [currentTID, setCurrentTID] = useState(0);
+    const [currentMruTID, setCurrentMruTID] = useState(0);
+    const [fromDTD, setFromDTD] = useState();
+    const [searchResult, setSearchResult] = useState([]);
+    const [mruTIDs, setMruTIDs] = useState([]);
+    const [currentSearchView, setCurrentSearchView] = useState(TMSearchViews.None);
+    const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
+    const [showTreesPanel, setShowTreesPanel] = useState(true);
+    const [showRecentsPanel, setShowRecentsPanel] = useState(true);
+    const [showSavedQueryPanel, setShowSavedQueryPanel] = useState(true);
+    const [currentSQDMode, setCurrentSQDMode] = useState(1);
+    const [focusedTidMid, setFocusedTidMid] = useState();
+    const [lastQdSearched, setLastQdSearched] = useState();
+    const deviceType = useDeviceType();
+    useEffect(() => {
+        setMruTIDs(LocalStorageService.getItem(`SEARCHPAGE_MRU_TIDS_${SDK_Globals.tmSession?.SessionDescr?.archiveID}_${SDK_Globals.tmSession?.SessionDescr?.userID}`) ?? []);
+        loadDataSQDsAsync(false);
+    }, []);
+    useEffect(() => {
+        if (!inputTID)
+            return;
+        setCurrentTID(inputTID);
+    }, [inputTID]);
+    useEffect(() => {
+        if (inputSqdID) {
+            SavedQueryCacheService.GetAsync(inputSqdID).then(async (resultSqd) => {
+                await setSQDAsync(resultSqd);
+            });
+        }
+    }, [inputSqdID]);
+    useEffect(() => {
+        if (!currentTID || currentTID <= 0) {
+            setSearchResult([]);
+            return;
+        }
+        DcmtTypeListCacheService.GetAsync(currentTID).then(async (dtd) => {
+            setFromDTD(dtd);
+            let sqds = await getSQDsByTIDAsync(currentTID, allSQDs) ?? [];
+            setFilteredByTIDSQDs(sqds);
+            setCurrentSQDMode(0);
+            await setDefaultSQDAsync(sqds);
+        });
+    }, [currentTID]);
+    useEffect(() => {
+        if (currentSQD && currentSQD.masterTID != currentTID) {
+            DcmtTypeListCacheService.GetAsync(currentSQD.masterTID).then(async (dtd) => {
+                setFromDTD(dtd);
+                let sqds = await getSQDsByTIDAsync(currentSQD.masterTID, allSQDs) ?? [];
+                setFilteredByTIDSQDs(sqds);
+                setCurrentSQDMode(0);
+            });
+        }
+    }, [currentSQD]);
+    const loadDataSQDsAsync = async (refreshCache, curTID) => {
+        if (refreshCache) {
+            SavedQueryCacheService.RemoveAll();
+            SavedQueryCacheService.Remove();
+        }
+        let sqdCache = await SavedQueryCacheService.GetAllAsync() ?? [];
+        setAllSQDs(sqdCache);
+        let sqds = await getSQDsByTIDAsync(curTID ?? currentTID, allSQDs) ?? [];
+        setFilteredByTIDSQDs(sqds);
+        setCurrentSQDMode(0);
+    };
+    const getSQDsByTIDAsync = async (tid, allSQDList) => {
+        if (!tid)
+            return;
+        let sqds = allSQDList ? allSQDList.slice() : allSQDs.slice();
+        sqds = sqds.filter(o => o.masterTID == tid);
+        sqds.unshift(await getSysAllDcmtsSQD(tid, false));
+        return sqds;
+    };
+    const setDefaultSQDAsync = async (sqds) => {
+        let defaultSQD = sqds.find(o => o.isDefault == 1);
+        defaultSQD ??= sqds.find(o => o.id == 1);
+        if (defaultSQD)
+            defaultSQD.isDefault = 1;
+        if (defaultSQD) {
+            await setSQDAsync(defaultSQD);
+        }
+    };
+    const setSQDAsync = async (sqd) => {
+        let newSqd = (sqd?.id == 1) ? sqd : await SavedQueryCacheService.GetAsync(sqd?.id);
+        setCurrentSQD(newSqd);
+        if (!newSqd?.masterTID)
+            return;
+        if (newSqd?.masterTID !== currentTID)
+            setCurrentTID(0);
+        if (mruTIDs.includes(newSqd.masterTID))
+            setCurrentMruTID(newSqd.masterTID);
+        else
+            setCurrentMruTID(0);
+    };
+    const onSQDItemClick = useCallback(async (sqd, setSqdAsync) => {
+        await setSqdAsync(sqd);
+    }, []);
+    const onSQDDeleted = useCallback(async (sqd, sqdToBeSet, setSqdAsync) => {
+        await loadDataSQDsAsync(true, sqd.masterTID);
+        if (sqdToBeSet)
+            await setSqdAsync?.(sqdToBeSet);
+    }, []);
+    const rightSidebarItems = [
+        { icon: _jsx(IconTree, {}), id: 'trees', visibleName: 'Alberi', isActive: showTreesPanel, visible: true },
+        { icon: _jsx(IconProgressReady, {}), id: 'recents', visibleName: 'Recenti', isActive: showRecentsPanel, visible: true, },
+        { icon: _jsx(IconSavedQuery, {}), id: 'savedquery', visibleName: 'Ricerche rapide', isActive: showSavedQueryPanel, visible: true },
+        { icon: _jsx(IconDataList, {}), id: 'DistinctValues', visibleName: 'Valori distiniti', isActive: showDistinctValuesPanel, disabled: !focusedTidMid, visible: true }
+    ];
+    const rightSidebarItemClickHandler = (item) => {
+        switch (item.toLowerCase()) {
+            case 'trees':
+                setShowTreesPanel(!showTreesPanel);
+                break;
+            case 'recents':
+                setShowRecentsPanel(!showRecentsPanel);
+                break;
+            case 'savedquery':
+                setShowSavedQueryPanel(!showSavedQueryPanel);
+                break;
+            case 'distinctvalues':
+                setShowDistinctValuesPanel(!showDistinctValuesPanel);
+                break;
+            default: break;
+        }
+    };
+    return (_jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx("div", { style: { position: (currentSearchView === TMSearchViews.None) ? 'relative' : 'absolute', left: (currentSearchView === TMSearchViews.None) ? '0px' : '-9999px', top: (currentSearchView === TMSearchViews.None) ? '0px' : '-9999px', visibility: (currentSearchView === TMSearchViews.None) ? 'visible' : 'hidden', display: "flex", flexDirection: "column", height: "100%", width: '100%' }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: deviceType !== DeviceType.MOBILE && showTreesPanel, separatorSize: 8, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: (deviceType === DeviceType.MOBILE) ? ['100%', '0%'] : showTreesPanel ? [SDKUI_Globals.userAppSettings?.searchSettings?.filterPageSettings?.treePanel?.size ?? '50px', '80%'] : ['0%', '100%'], children: [deviceType !== DeviceType.MOBILE && _jsx(TMTreeSelector, { onClose: () => setShowTreesPanel(false), onSelectedTIDChanged: (tid) => {
+                                setCurrentTID(tid);
+                                if (tid && mruTIDs.includes(tid))
+                                    setCurrentMruTID(tid);
+                                else
+                                    setCurrentMruTID(0);
+                            } }), _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: deviceType !== DeviceType.MOBILE && showSavedQueryPanel && !showDistinctValuesPanel, separatorSize: 8, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: (deviceType === DeviceType.MOBILE || showDistinctValuesPanel) ? ['100%', '0%'] : ((showSavedQueryPanel) ? ['70%', '30%'] : ['100%', '0%']), children: [_jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: deviceType !== DeviceType.MOBILE && showRecentsPanel, separatorSize: 8, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: deviceType === DeviceType.DESKTOP ? (showRecentsPanel ? ['30%', '70%'] : ['0%', '100%']) : (currentTID ? ['0%', '100%'] : ['100%', '0%']), children: [_jsx(TMToolbarCard, { title: "Scorciatoie", totalItems: mruTIDs.length, onClose: () => setShowRecentsPanel(false), children: _jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => { setCurrentMruTID(tid); setCurrentTID(tid); }, onDeletedTID: (tid) => {
+                                                        let newMruTIDS = mruTIDs.slice();
+                                                        let index = newMruTIDS.findIndex(o => o == tid);
+                                                        if (index >= 0)
+                                                            newMruTIDS.splice(index, 1);
+                                                        LocalStorageService.setItem(`SEARCHPAGE_MRU_TIDS_${SDK_Globals.tmSession?.SessionDescr?.archiveID}_${SDK_Globals.tmSession?.SessionDescr?.userID}`, newMruTIDS.filter(tid => tid != undefined && tid != null));
+                                                        setMruTIDs(newMruTIDS);
+                                                    } }) }), _jsx(TMSearchQueryPanel, { fromDTD: fromDTD, SQD: currentSQD, isOpenDistinctValuesPanel: showDistinctValuesPanel, rightSidebarItems: rightSidebarItems, onFocusedMetadataChanged: setFocusedTidMid, onRightSidebarItemClick: rightSidebarItemClickHandler, onCloseDistinctValuesPanel: () => setShowDistinctValuesPanel(false), onSearchCompleted: (searchResult, qd) => {
+                                                    setSearchResult(searchResult);
+                                                    setLastQdSearched(qd);
+                                                    setCurrentSearchView(TMSearchViews.Result);
+                                                    // Salvataggio ultimi 10 TIDs 
+                                                    let fromTID = searchResult?.[0].fromTID;
+                                                    let newMruTIDS = mruTIDs.slice();
+                                                    let index = newMruTIDS.findIndex(o => o == fromTID);
+                                                    if (index >= 0)
+                                                        newMruTIDS.splice(index, 1);
+                                                    if (newMruTIDS.length >= 10)
+                                                        newMruTIDS.splice(0, 1);
+                                                    newMruTIDS.push(fromTID);
+                                                    setMruTIDs(newMruTIDS);
+                                                    setCurrentMruTID(fromTID);
+                                                    LocalStorageService.setItem(`SEARCHPAGE_MRU_TIDS_${SDK_Globals.tmSession?.SessionDescr?.archiveID}_${SDK_Globals.tmSession?.SessionDescr?.userID}`, newMruTIDS.filter(tid => tid != undefined && tid != null));
+                                                }, onSqdSaved: async (newSqd) => {
+                                                    await loadDataSQDsAsync(true, newSqd.masterTID);
+                                                    await setSQDAsync(newSqd);
+                                                } })] }) }), _jsx(TMLayoutItem, { children: _jsx(TMToolbarCard, { title: SDK_Localizator.SavedQueries, onClose: () => setShowSavedQueryPanel(false), children: _jsxs(TabPanel, { width: "100%", height: "100%", showNavButtons: true, repaintChangesOnly: true, selectedIndex: currentSQDMode, onSelectedIndexChange: (index) => setCurrentSQDMode(index), children: [(currentTID || currentSQD) ? _jsx(Item, { title: fromDTD?.nameLoc, children: _jsx(TMSavedQuerySelector, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => loadDataSQDsAsync(true), onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync) }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.Alls2, children: _jsx(TMSavedQuerySelector, { allowShowSearch: true, items: allSQDs, manageDefault: false, 
+                                                        // selectedId={currentSQD?.id}
+                                                        onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] }) }) })] })] }) }, 'div-1'), _jsx("div", { style: { position: (currentSearchView === TMSearchViews.Result) ? 'relative' : 'absolute', left: (currentSearchView === TMSearchViews.Result) ? '0px' : '-9999px', top: (currentSearchView === TMSearchViews.Result) ? '0px' : '-9999px', visibility: (currentSearchView === TMSearchViews.Result) ? 'visible' : 'hidden', display: "flex", flexDirection: "column", height: "100%", width: '100%' }, children: searchResult.length > 0 &&
+                    _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: async () => {
+                            // setSearchResult([]);
+                            setSearchResult(await refreshLastSearch(lastQdSearched) ?? []);
+                        }, onTaskCreateRequest: onTaskCreateRequest, onClose: () => { setCurrentSearchView(TMSearchViews.None); } }) }, 'div-2')] }));
+};
+export default TMSearch;

package/lib/components/search/TMSearchQueryEditor.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DcmtTypeDescriptor, QueryDescriptor } from '@topconsultnpm/sdk-ts-beta';
+import { TID_MID } from '../../ts';
+interface ITMSearchQueryEditorProps {
+    qd: QueryDescriptor | undefined;
+    fromDTD?: DcmtTypeDescriptor;
+    dcmtTypesList?: DcmtTypeDescriptor[];
+    showAdvancedMenu?: boolean;
+    showAllMdWhere?: boolean;
+    isOpenDistinctValuesPanel: boolean;
+    onQdChanged?: (qd: QueryDescriptor) => void;
+    onFocusedMetadataChanged?: (tid_mid: TID_MID | undefined) => void;
+}
+declare const TMSearchQueryEditor: React.FunctionComponent<ITMSearchQueryEditorProps>;
+export default TMSearchQueryEditor;