@topconsultnpm/sdkui-react 6.17.0-test9

package/lib/components/layout/panelManager/utils.js

@@ -0,0 +1,208 @@
+// Recursive function to flatten the panel hierarchy into a single array (includes children)
+export const flattenPanels = (panels) => {
+    return panels.reduce((acc, panel) => {
+        // Add the current panel
+        acc.push(panel);
+        // Recursively add all child panels
+        if (panel.children && panel.children.length > 0) {
+            acc.push(...flattenPanels(panel.children));
+        }
+        return acc;
+    }, []);
+};
+// Recursive helper to traverse panels and children, accumulating visibility and disabled states
+// Recursive function that returns visibility and disabled maps for panels and all children
+export function getToolbarStates(panels) {
+    let visibilityMap = {};
+    let disabledMap = {};
+    panels.forEach(panel => {
+        if (panel.toolbarOptions?.visible !== undefined) {
+            visibilityMap[panel.id] = panel.toolbarOptions.visible;
+            disabledMap[panel.id] = panel.toolbarOptions.disabled ?? false;
+        }
+        if (panel.children && panel.children.length > 0) {
+            const childStates = getToolbarStates(panel.children);
+            visibilityMap = { ...visibilityMap, ...childStates.visibilityMap };
+            disabledMap = { ...disabledMap, ...childStates.disabledMap };
+        }
+    });
+    return { visibilityMap, disabledMap };
+}
+export const generatePanelHierarchyMap = (panels) => {
+    const hierarchyMap = new Map();
+    const traverse = (node, parentId, siblings = []) => {
+        const children = node.children || [];
+        const info = {
+            parentId: parentId,
+            childrenIds: children.map(child => child.id),
+            siblingIds: siblings.filter(s => s.id !== node.id).map(s => s.id),
+            groupDirection: node.currentGroupDirection ?? 'horizontal',
+        };
+        hierarchyMap.set(node.id, info);
+        for (const child of children) {
+            traverse(child, node.id, children);
+        }
+    };
+    for (const panel of panels) {
+        traverse(panel, undefined, panels);
+    }
+    return hierarchyMap;
+};
+export const showParentRecursively = (panelId, hierarchyMap) => {
+    const result = [];
+    const visit = (id) => {
+        const panelInfo = hierarchyMap.get(id);
+        if (!panelInfo)
+            return;
+        if (panelInfo.parentId) {
+            if (!result.some(([pid]) => pid === panelInfo.parentId)) {
+                result.push([panelInfo.parentId, true]);
+                visit(panelInfo.parentId);
+            }
+        }
+    };
+    visit(panelId);
+    return result;
+};
+export const hideParentRecursively = (panelId, hierarchyMap, currentVisibility) => {
+    const result = [];
+    const visit = (id) => {
+        const panelInfo = hierarchyMap.get(id);
+        if (!panelInfo)
+            return;
+        if (panelInfo.parentId) {
+            const parentInfo = hierarchyMap.get(panelInfo.parentId);
+            if (!parentInfo)
+                return;
+            const visibleChildren = parentInfo.childrenIds.filter(childId => childId !== id && currentVisibility[childId]);
+            if (visibleChildren.length === 0) {
+                if (!result.some(([pid]) => pid === panelInfo.parentId)) {
+                    result.push([panelInfo.parentId, false]);
+                    visit(panelInfo.parentId);
+                }
+            }
+        }
+    };
+    visit(panelId);
+    return result;
+};
+export const redistributeDimensionsOnHide = (hiddenPanelId, currentDimensions, hierarchyMap, panelVisibility) => {
+    const parentId = hierarchyMap.get(hiddenPanelId)?.parentId;
+    const siblings = hierarchyMap.get(hiddenPanelId)?.siblingIds || [];
+    if (siblings.length === 0)
+        return currentDimensions;
+    const hiddenDims = currentDimensions[hiddenPanelId];
+    if (!hiddenDims)
+        return currentDimensions;
+    const hiddenWidthNum = parseFloat(hiddenDims.width);
+    const hiddenHeightNum = parseFloat(hiddenDims.height);
+    const visibleSiblings = siblings.filter(siblingId => panelVisibility[siblingId]);
+    const widthIncrement = hiddenWidthNum / visibleSiblings.length;
+    const heightIncrement = hiddenHeightNum / visibleSiblings.length;
+    let newDimensions = { ...currentDimensions };
+    visibleSiblings.forEach(siblingId => {
+        const siblingDims = newDimensions[siblingId] || { width: '0%', height: '0%' };
+        const siblingWidthNum = parseFloat(siblingDims.width) || 0;
+        const siblingHeightNum = parseFloat(siblingDims.height) || 0;
+        const newWidthNum = Math.min(siblingWidthNum + widthIncrement, 100);
+        const newHeightNum = Math.min(siblingHeightNum + heightIncrement, 100);
+        newDimensions[siblingId] = { width: `${newWidthNum}%`, height: `${newHeightNum}%` };
+    });
+    newDimensions[hiddenPanelId] = { width: '0%', height: '0%' };
+    // Ora controllo se il parent non ha più figli visibili e chiamo ricorsivamente
+    if (parentId) {
+        const parentInfo = hierarchyMap.get(parentId);
+        if (parentInfo) {
+            const visibleSiblings = parentInfo.childrenIds.filter(childId => childId !== hiddenPanelId && panelVisibility[childId]);
+            // Se non ci sono figli visibili rimanenti, chiamo ricorsivamente sul parent
+            if (visibleSiblings.length === 0) {
+                newDimensions = redistributeDimensionsOnHide(parentId, newDimensions, hierarchyMap, panelVisibility);
+            }
+        }
+    }
+    return newDimensions;
+};
+export const redistributeDimensionsOnShow = (shownPanelId, currentDimensions, initialDimensions, hierarchyMap, panelVisibility) => {
+    let updatedDimensions = { ...currentDimensions };
+    const redistribute = (panelId) => {
+        const panel = hierarchyMap.get(panelId);
+        if (!panel)
+            return;
+        const parentId = panel.parentId;
+        if (!parentId) {
+            // Caso root (senza parent)
+            const siblingIds = panel.siblingIds || [];
+            const visibleSiblings = siblingIds.filter(sibId => panelVisibility[sibId]);
+            const allVisible = [panelId, ...visibleSiblings];
+            if (panel.groupDirection === 'horizontal') {
+                const totalInitialWidth = allVisible.reduce((sum, id) => {
+                    const w = parseFloat(initialDimensions[id]?.width || '0');
+                    return sum + w;
+                }, 0);
+                allVisible.forEach(id => {
+                    const w = parseFloat(initialDimensions[id]?.width || '0');
+                    const proportionalWidth = (w / totalInitialWidth) * 100;
+                    updatedDimensions[id] = {
+                        width: `${proportionalWidth}%`,
+                        height: '100%'
+                    };
+                });
+            }
+            else {
+                // vertical
+                const totalInitialHeight = allVisible.reduce((sum, id) => {
+                    const h = parseFloat(initialDimensions[id]?.height || '0');
+                    return sum + h;
+                }, 0);
+                allVisible.forEach(id => {
+                    const h = parseFloat(initialDimensions[id]?.height || '0');
+                    const proportionalHeight = (h / totalInitialHeight) * 100;
+                    updatedDimensions[id] = {
+                        width: '100%',
+                        height: `${proportionalHeight}%`
+                    };
+                });
+            }
+        }
+        else {
+            const siblingIds = panel.siblingIds || [];
+            const visibleSiblings = siblingIds.filter(sibId => panelVisibility[sibId]);
+            const allVisible = [panelId, ...visibleSiblings];
+            if (panel.groupDirection === 'horizontal') {
+                const totalInitialWidth = allVisible.reduce((sum, id) => {
+                    const w = parseFloat(initialDimensions[id]?.width || '0');
+                    return sum + w;
+                }, 0);
+                allVisible.forEach(id => {
+                    const w = parseFloat(initialDimensions[id]?.width || '0');
+                    const proportionalWidth = (w / totalInitialWidth) * 100;
+                    updatedDimensions[id] = {
+                        width: `${proportionalWidth}%`,
+                        height: '100%'
+                    };
+                });
+            }
+            else {
+                // vertical
+                const totalInitialHeight = allVisible.reduce((sum, id) => {
+                    const h = parseFloat(initialDimensions[id]?.height || '0');
+                    return sum + h;
+                }, 0);
+                allVisible.forEach(id => {
+                    const h = parseFloat(initialDimensions[id]?.height || '0');
+                    const proportionalHeight = (h / totalInitialHeight) * 100;
+                    updatedDimensions[id] = {
+                        width: '100%',
+                        height: `${proportionalHeight}%`
+                    };
+                });
+            }
+            // Chiamo ricorsivamente sul parent corretto (non sempre shownPanelId)
+            const parent = hierarchyMap.get(panelId)?.parentId;
+            if (parent)
+                redistribute(parent);
+        }
+    };
+    redistribute(shownPanelId);
+    return updatedDimensions;
+};

package/lib/components/pages/TMPage.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import { ObjectClasses, JobTypes } from "@topconsultnpm/sdk-ts";
+interface ITMPage<T> {
+    /** Eventuale componente da sovrapporre alla lista */
+    listInsteadOfContent?: React.ReactNode;
+    /** Disabilita la lista dal chiamante */
+    listDisabled?: boolean;
+    /** Form per editare l'elemento */
+    detailForm?: JSX.Element;
+    /** Path per la costruzione del titolo in funzione dei forms aperti */
+    detailTitlePathKeys: string[] | undefined;
+    /** Eventuale componente da sovrapporre al form dettaglio */
+    detailInsteadOfContent?: JSX.Element;
+    /** Bottoni personalizzati da aggiungere alla toolbar e pannello di selezione multipla */
+    customButtons?: any[];
+    /** Colonne personalizzate da aggiungere alla lista */
+    customColumns?: JSX.Element[];
+    /** Lista delle dipendenze che riavviano il componente */
+    deps?: React.DependencyList;
+    /** Id iniziale dell'oggetto */
+    id?: number;
+    /** Classe dell'oggetto */
+    objClass?: ObjectClasses;
+    /** Tipo dell'oggetto in funzione di objClass */
+    objType?: JobTypes;
+    /** Testo per filtrare la lista */
+    searchText?: string;
+    /** Indica la pagina dell'URL per i link */
+    routePage?: string;
+    /** Indica quando eseguire il refresh dei dati della lista */
+    lastRefreshTime?: Date;
+    /** Indica il cambiamento della selezione */
+    onSelectionChanged?: (rows: T[]) => void;
+    /** Indica il cambiamento dei contatori della lista (totali, selezionati e visibili) */
+    onCountersChanged?: (totalItemsCount: number, selectedItemsCount: number, visibleItemsCount: number) => void;
+}
+declare const TMPage: <T>({ id, objClass, listDisabled, lastRefreshTime, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps, onSelectionChanged, onCountersChanged }: ITMPage<T>) => import("react/jsx-runtime").JSX.Element;
+export default TMPage;

package/lib/components/pages/TMPage.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from "react";
+import { SDK_Globals, ObjectClasses, ResultTypes } from "@topconsultnpm/sdk-ts";
+import DataGrid, { Column, GroupPanel, Grouping, HeaderFilter, LoadPanel, Pager, Paging, Scrolling, SearchPanel, Selection } from "devextreme-react/data-grid";
+import { PlatformObjectService } from "../../services/platform_services";
+import { FormModes } from "../../ts";
+import { Globalization, IconAdd, IconColumns, IconCopy, IconDelete, IconDuplicate, IconHide, IconMail, IconMenuVertical, IconOpenInNew, IconRefresh, IconShow, SDKUI_Globals, SDKUI_Localizator, calcSaveFormTitle, canNext, canPrev, dialogConfirmOperation, getExceptionMessage, getNext, getPrev } from "../../helper";
+import TMSpinner from "../base/TMSpinner";
+import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../base/TMPopUp";
+import TMLayoutContainer, { TMLayoutItem, TMSplitterLayout } from "../base/TMLayout";
+import TMButton from "../base/TMButton";
+import TMDropDownMenu from "../base/TMDropDownMenu";
+import { FontSize, TMColors } from "../../utils/theme";
+import selectionManagerImage from '../../assets/multipleSelectionManager.jpg';
+import { DeviceType, useDeviceType } from "../base/TMDeviceProvider";
+import { TMResultManager } from "../forms/TMResultDialog";
+import { TMLayoutWaitingContainer } from "../base/TMWaitPanel";
+import TMToolbarCard from "../base/TMToolbarCard";
+let abortController = new AbortController();
+const TMPage = ({ id, objClass = ObjectClasses.None, listDisabled = false, lastRefreshTime, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps, onSelectionChanged, onCountersChanged }) => {
+    const deviceType = useDeviceType();
+    let gridInstance;
+    const [showId, setShowId] = useState(false);
+    const [showAllColumns, setShowAllColumns] = useState(false);
+    const [selectionListDisabled, setSelectionListDisabled] = useState(false);
+    const [showList, setShowList] = useState(true);
+    const [items, setItems] = useState([]);
+    const [selectedItems, setSelectedItems] = useState([]);
+    const [visibleItems, setVisibleItems] = useState([]);
+    const [formMode, setFormMode] = useState(FormModes.Update);
+    const [showWaitPanel, setShowWaitPanel] = useState(false);
+    const [waitPanelTitle, setWaitPanelTitle] = useState('');
+    const [showPrimary, setShowPrimary] = useState(false);
+    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
+    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
+    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
+    let objName = PlatformObjectService.getName(objClass, objType);
+    let objNames = PlatformObjectService.getName(objClass, objType, true);
+    useEffect(() => { gridInstance?.instance().searchByText(searchText ?? ''); }, [searchText]);
+    useEffect(() => {
+        let itemsCount = gridInstance?.instance().getDataSource().items().length;
+        if (itemsCount && itemsCount > 0) {
+            gridInstance?.instance().selectRows(selectedItems?.map((item) => item.id) ?? [], false);
+        }
+    }, [selectedItems]);
+    useEffect(() => {
+        setSelectedItems([]);
+        setFormMode(FormModes.Update);
+        setSelectionListDisabled(false);
+        (async () => { await loadDataAsync(id); })();
+    }, deps && deps.length > 0 ? [deps[0]] : []);
+    useEffect(() => {
+        if (lastRefreshTime) {
+            loadDataAsync(id);
+        }
+    }, [lastRefreshTime]);
+    useEffect(() => {
+        setSelectionListDisabled(detailInsteadOfContent != undefined && listDisabled);
+    }, [listDisabled]);
+    useEffect(() => { onCountersChanged?.(items.length, selectedItems.length, visibleItems.length); }, [items, selectedItems, visibleItems]);
+    const loadDataAsync = async (id) => {
+        try {
+            TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${PlatformObjectService.getName(objClass)} ...` });
+            const list = await PlatformObjectService.retrieveAllAdminAsync(objClass, objType);
+            if (list) {
+                setItems(list);
+                if (id && id > 0) {
+                    setSelectedItems(list.filter((o) => o.id === id));
+                }
+            }
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    const duplicate = () => { deviceType === DeviceType.MOBILE && setShowList(false); setFormMode(FormModes.Duplicate); };
+    const create = () => { deviceType === DeviceType.MOBILE && setShowList(false); setFormMode(FormModes.Create); };
+    const deleteItems = async () => {
+        let operationTitle = SDKUI_Localizator.Delete;
+        let msg = "";
+        switch (selectedItems.length) {
+            case 0: return;
+            case 1:
+                msg = SDKUI_Localizator.Delete_ConfirmFor1.replaceParams(selectedItems[0].name ?? "");
+                break;
+            default:
+                msg = SDKUI_Localizator.Delete_ConfirmForN.replaceParams(selectedItems.length);
+                break;
+        }
+        const doOperationAsync = async () => {
+            setShowWaitPanel(true);
+            setShowPrimary(true);
+            setWaitPanelTitle(operationTitle);
+            abortController = new AbortController();
+            let result = [];
+            setWaitPanelMaxValuePrimary(selectedItems.length);
+            for (let i = 0; i < selectedItems.length; i++) {
+                if (abortController.signal.aborted) {
+                    result.push({ rowIndex: i, id1: selectedItems[i].id, id2: 0, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborati ${i + 1} lavori` });
+                    break;
+                }
+                setWaitPanelValuePrimary(i + 1);
+                setWaitPanelTextPrimary(`Documento ${i + 1} di ${selectedItems.length}`);
+                try {
+                    await PlatformObjectService.deleteAsync(objClass, selectedItems[i]?.id);
+                    result.push({ rowIndex: i, id1: selectedItems[i].id, id2: 0, description: objType?.toString(), resultType: ResultTypes.SUCCESS });
+                }
+                catch (ex) {
+                    result.push({ rowIndex: i, id1: selectedItems[i].id, id2: 0, resultType: ResultTypes.ERROR, description: getExceptionMessage(ex) });
+                }
+            }
+            setWaitPanelMaxValuePrimary(0);
+            setWaitPanelValuePrimary(0);
+            setWaitPanelTextPrimary('');
+            setShowWaitPanel(false);
+            TMResultManager.show(result, operationTitle, "JobID", undefined);
+            await loadDataAsync();
+        };
+        dialogConfirmOperation(operationTitle, msg, doOperationAsync);
+    };
+    const ToolbarPage = () => {
+        let disabled = selectionListDisabled;
+        window.Buffer = Buffer;
+        let str = (JSON.stringify(SDK_Globals.tmSession));
+        let sessionToBase64 = Buffer.from(str).toString("base64");
+        let newURL = selectedItems.length > 0 ? `/${routePage}/${selectedItems[0]?.id}?session=${sessionToBase64}` : '';
+        let mailTo = selectedItems.length > 0 ? `mailto:?subject=Custom URL&body=localhost:3000/${routePage}` : '';
+        const copyInClipboard = () => { window.navigator.clipboard.writeText(`localhost:3000/${routePage}`); };
+        const getToolbarMenuItems = () => {
+            let items = [
+                { text: SDKUI_Localizator.Duplicate, disabled: selectedItems.length !== 1, icon: _jsx(IconDuplicate, {}), onClick: () => { duplicate(); } },
+                { text: SDKUI_Localizator.Refresh, icon: _jsx(IconRefresh, {}), onClick: async () => { await loadDataAsync(); } },
+                { text: _jsx("a", { style: { textDecoration: 'none', color: selectedItems.length !== 1 ? '#bdbdbd' : 'black' }, href: newURL, target: '_blank', children: SDKUI_Localizator.OpenInNewTab }), disabled: selectedItems.length !== 1, icon: _jsx(IconOpenInNew, {}), beginGroup: true },
+                { text: _jsx("a", { style: { textDecoration: 'none', color: selectedItems.length !== 1 ? '#bdbdbd' : 'black' }, href: mailTo, children: SDKUI_Localizator.SendLinkByMail }), disabled: selectedItems.length !== 1, icon: _jsx(IconMail, {}) },
+                { text: SDKUI_Localizator.CopyToClipboard, disabled: selectedItems.length !== 1, icon: _jsx(IconCopy, {}), onClick: () => { copyInClipboard(); } },
+                { text: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, icon: showId ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => { setShowId(!showId); }, beginGroup: true },
+                { text: showAllColumns ? SDKUI_Localizator.Columns_All_Hide : SDKUI_Localizator.Columns_All_Show, icon: _jsx(IconColumns, {}), onClick: () => { setShowAllColumns(!showAllColumns); } },
+            ];
+            if (customButtons) {
+                for (const btn of customButtons)
+                    items.splice(btn.index, 0, btn);
+            }
+            return items;
+        };
+        return (_jsx(TMLayoutItem, { height: '35px', children: _jsxs(TMLayoutContainer, { direction: 'horizontal', gap: 5, children: [_jsx(TMButton, { keyGesture: "alt+n", color: "primary", disabled: disabled, caption: SDKUI_Localizator.Add, onClick: () => { create(); }, icon: _jsx(IconAdd, {}), showTooltip: true, btnStyle: 'toolbar' }), _jsx(TMButton, { keyGesture: "alt+d", color: "error", disabled: selectedItems.length === 0 || disabled, caption: SDKUI_Localizator.Remove, onClick: () => { deleteItems(); }, icon: _jsx(IconDelete, {}), showTooltip: true, btnStyle: 'toolbar' }), _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: "toolbar", showTooltip: false, disabled: disabled, icon: _jsx(IconMenuVertical, {}), color: 'primary' }), items: getToolbarMenuItems() })] }) }));
+    };
+    const MultipleSelectionManager = () => {
+        return (_jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }, children: [_jsx("img", { style: { transform: 'translateX(-35px)' }, src: selectionManagerImage, width: 250, height: 250, alt: "" }), _jsx("p", { style: { fontSize: FontSize.defaultFontSize, marginBottom: '25px', transform: 'translateX(-35px)' }, children: selectedItems.length + ' ' + SDKUI_Localizator.Selected }), selectedItems.length > 0 &&
+                    _jsxs("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', transform: 'translateX(-35px)' }, children: [_jsxs("div", { onClick: () => { deleteItems(); }, style: { cursor: 'pointer', marginBottom: '10px', width: '200px', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }, children: [_jsx(IconDelete, { fontSize: 20, color: TMColors.error }), _jsx("p", { style: { fontSize: FontSize.defaultFontSize, marginLeft: '5px', color: TMColors.error }, children: SDKUI_Localizator.Delete })] }), customButtons?.filter(o => o.showInMultipleSelectManager == true).map((item, index) => {
+                                return (_jsxs("div", { onClick: item.onClick, style: { cursor: 'pointer', marginBottom: '10px', width: '200px', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }, children: [item.icon, _jsx("p", { style: { fontSize: FontSize.defaultFontSize, marginLeft: '5px' }, children: item.text })] }, index));
+                            })] })] }));
+    };
+    const getDetailFormWithProps = () => {
+        if (!detailForm)
+            return null;
+        return React.cloneElement(detailForm, {
+            id: selectedItems.length == 0 ? -1 : selectedItems[0].id,
+            // showBackButton: deviceType === DeviceType.MOBILE,
+            formMode: formMode,
+            canNext: canNext(visibleItems, selectedItems),
+            onNext: () => { setSelectedItems([getNext(visibleItems, selectedItems)]); },
+            canPrev: canPrev(visibleItems, selectedItems),
+            onPrev: () => { setSelectedItems([getPrev(visibleItems, selectedItems)]); },
+            onShowList: (value) => { setShowList(value); },
+            onCancel: (withoutConfirm) => {
+                if (withoutConfirm) {
+                    setFormMode(FormModes.Update);
+                    setSelectionListDisabled(false);
+                    return;
+                }
+                TMMessageBoxManager.show({
+                    title: SDKUI_Localizator.Cancel, message: SDKUI_Localizator.ConfirmOnCancel, buttons: [ButtonNames.YES, ButtonNames.NO],
+                    onButtonClick: async (e) => {
+                        if (e !== ButtonNames.YES)
+                            return;
+                        setFormMode(FormModes.Update);
+                        setSelectionListDisabled(false);
+                    }
+                });
+            },
+            onStatusChanged: (isModified) => { setSelectionListDisabled((formMode == FormModes.Create || formMode == FormModes.Duplicate) ? true : isModified); },
+            onSaved: async (newItem) => {
+                try {
+                    const currentItems = items.map((job) => job);
+                    const index = currentItems.findIndex((o) => o.id == newItem.id);
+                    if (index >= 0)
+                        currentItems[index] = newItem;
+                    else
+                        currentItems.push(newItem);
+                    setItems(currentItems);
+                    setSelectedItems([newItem]);
+                    setFormMode(FormModes.Update);
+                    setSelectionListDisabled(false);
+                }
+                catch (e) {
+                    TMExceptionBoxManager.show({ exception: e });
+                }
+            }
+        });
+    };
+    const cellRenderObjectIcon = (data) => { return PlatformObjectService.getIcon(objClass, data.row.data); };
+    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: "horizontal", showSeparator: showList && deviceType !== DeviceType.MOBILE, separatorSize: 10, separatorColor: 'transparent', separatorActiveColor: 'transparent', start: showList ? deviceType !== DeviceType.MOBILE ? ['30%', '70%'] : ['100%', '0%'] : ['0', '100%'], min: ['0px', '0px'], children: [listInsteadOfContent ??
+                    _jsxs(TMToolbarCard, { title: objNames, children: [_jsx(ToolbarPage, {}), _jsxs(DataGrid, { disabled: selectionListDisabled, ref: (grid) => (gridInstance = grid), height: "calc(100% - 35px)", width: 'calc(100% - 5px)', dataSource: items, keyExpr: "id", allowColumnResizing: true, columnResizingMode: "widget", allowColumnReordering: true, showBorders: false, onContentReady: (e) => {
+                                    setVisibleItems(e.component.getVisibleRows().map((row) => { return row.data; }));
+                                    e.component.selectRows(selectedItems?.map((item) => item.id), false);
+                                }, onRowClick: (row) => {
+                                    if (deviceType !== DeviceType.MOBILE)
+                                        return;
+                                    setSelectedItems([row.data]);
+                                    setShowList(false);
+                                }, showColumnLines: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines) === 1, showRowLines: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines) === 1, onSelectionChanged: (e) => { setSelectedItems(e.selectedRowsData); onSelectionChanged?.(e.selectedRowsData); }, children: [_jsx(GroupPanel, { visible: !!(deviceType !== DeviceType.MOBILE && showAllColumns) }), _jsx(SearchPanel, { visible: false }), _jsx(Grouping, { autoExpandAll: false }), _jsx(HeaderFilter, { visible: true }), _jsx(Selection, { mode: "multiple", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(Scrolling, { mode: "standard", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Paging, { pageSize: 25 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsx(LoadPanel, { enabled: true }), _jsx(Column, { width: 20, cellRender: cellRenderObjectIcon }), _jsx(Column, { width: 'auto', visible: showId, dataField: "id", caption: "ID" }), _jsx(Column, { width: 250, dataField: "name", caption: SDKUI_Localizator.Name, sortOrder: "asc" }), _jsx(Column, { width: 250, visible: showAllColumns, dataField: "description", caption: SDKUI_Localizator.Description }), customColumns?.map((item, index) => { return React.cloneElement(item, { key: index, visible: showAllColumns }); }), _jsx(Column, { width: 'auto', visible: showAllColumns, dataField: "ownerID", caption: SDKUI_Localizator.OwnerID }), _jsx(Column, { width: 'auto', visible: showAllColumns, dataField: "ownerName", caption: SDKUI_Localizator.OwnerName }), _jsx(Column, { width: 'auto', dataType: "date", format: Globalization.getDateDisplayFormat(), visible: showAllColumns, dataField: "creationTime", caption: SDKUI_Localizator.CreationTime }), _jsx(Column, { width: 'auto', dataType: "date", format: Globalization.getDateDisplayFormat(), visible: showAllColumns, dataField: "lastUpdateTime", caption: SDKUI_Localizator.LastUpdateTime })] })] }), detailInsteadOfContent ??
+                    _jsx(TMLayoutItem, { children: selectedItems.length == 1 || formMode == FormModes.Create || formMode == FormModes.Duplicate ?
+                            _jsx(TMToolbarCard, { onBack: deviceType === DeviceType.MOBILE ? () => setShowList(true) : undefined, title: calcSaveFormTitle(objName, formMode, selectedItems.length == 0 ? -1 : selectedItems[0].id, detailTitlePathKeys), children: getDetailFormWithProps() })
+                            :
+                                _jsx(MultipleSelectionManager, {}) })] }) }));
+};
+export default TMPage;

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
+import { ITMApplyFormProps, FormModes } from '../../ts';
+export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $borderRadius?: string;
+}>> & string;
+export declare const StyledAccordionItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAccordionItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $disabled?: boolean;
+}>> & string;
+export declare const colorValue = "rgba(224,224,224,.5)";
+export declare const colorBrackets = "rgba(209,52,56,.3)";
+export declare const colorOperator = "rgba(16,124,16,.3)";
+export declare const color1 = "#F5DD9C";
+export declare const color2 = "rgba(15,108,189,.3)";
+export declare const color3 = "rgb(199, 236, 172)";
+export declare const color4 = "rgb(223, 204, 251)";
+export declare const color5 = "rgb(249, 181, 114)";
+export declare const color6 = "rgb(170, 215, 217)";
+export declare const color7 = "rgb(243, 208, 215)";
+export declare const color8 = "rgb(236, 202, 156)";
+export declare const color9 = "rgb(137, 185, 173)";
+export declare const colorX = "rgb(246, 245, 242)";
+export declare enum Descriptors {
+    Query = 3
+}
+export declare function useQueryApplyForm<T>(d: Descriptors, formMode: FormModes, inputData: T | undefined, onApplied?: (newDescriptor: T) => void, parameters?: any[]): {
+    formData: T;
+    setFormData: React.Dispatch<React.SetStateAction<T>>;
+    formDataOrig: T;
+    validationItems: ValidationItem[];
+    setValidationItems: React.Dispatch<React.SetStateAction<ValidationItem[]>>;
+    exception: any;
+    applyData: () => void;
+};
+interface ITMQueryEditor extends ITMApplyFormProps<QueryDescriptor> {
+    isExpertMode?: boolean;
+    validateSelect?: boolean;
+    validateOrderBy?: boolean;
+    showDistinct?: boolean;
+    raiseWarningForOnlyMetadataDcmtTypes?: boolean;
+    borderRadius?: string;
+    searchText?: string;
+    onFromTIDChanged?: (tid: number) => void;
+    onQDChanged?: (qd: QueryDescriptor) => void;
+    ShowOnlySAP?: boolean;
+}
+declare const TMQueryEditor: React.FunctionComponent<ITMQueryEditor>;
+export default TMQueryEditor;
+export interface ITMQdDropDownMenuProps {
+    content: JSX.Element;
+    color?: string;
+    backgroundColor?: string;
+    disabled?: boolean;
+    borderRadius?: string;
+    items?: any[];
+}