@topconsultnpm/sdkui-react-beta 6.5.51

package/lib/components/forms/TMSaveForm.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ITMSaveFormBaseProps } from '../../ts/types';
+declare const TMSaveForm: React.FC<ITMSaveFormBaseProps>;
+export default TMSaveForm;

package/lib/components/forms/TMSaveForm.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ResultTypes } from '@topconsultnpm/sdk-ts-beta';
+import { FormModes } from '../../ts/types';
+import { IconArrowDown, IconArrowLeft, IconArrowUp, IconCloseCircle, IconHide, IconSave, IconShow, IconUndo, IconWarning, MOBILE_WIDTH, SDKUI_Localizator, getColor, useWindowWidth } from '../../helper';
+import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from '../base/TMPopUp';
+import TMLayoutContainer, { TMCard, TMLayoutItem, TMSplitterLayout } from '../base/TMLayout';
+import { StyledResultTypeContainer, StyledToolbarForm } from '../base/Styled';
+import TMButton from '../base/TMButton';
+import { TMColors } from '../../utils/theme';
+import TMValidationItemsList from '../grids/TMValidationItemsList';
+import TMModal from '../base/TMModal';
+const TMSaveForm = ({ id, formMode = FormModes.Update, title, children, isModal, exception, customToolbarElements, hasNavigation, showBackButton, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height }) => {
+    const [showList, setShowList] = useState(true);
+    const [showErrorGrid, setShowErrorGrid] = useState(false);
+    let windowWidth = useWindowWidth();
+    let isMobile = windowWidth <= MOBILE_WIDTH;
+    const doSaveAsync = async () => { try {
+        await onSaveAsync?.();
+    }
+    catch (ex) {
+        TMExceptionBoxManager.show({ exception: ex });
+    } };
+    const doNext = () => {
+        if (!isModified) {
+            onNext?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES)
+                        await onSaveAsync?.();
+                    onNext?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    const doPrev = () => {
+        if (!isModified) {
+            onPrev?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES)
+                        await onSaveAsync?.();
+                    onPrev?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    const doClose = () => {
+        if (!isModified) {
+            onClose?.();
+            isMobile && setShowList(true), onShowList?.(true);
+            return;
+        }
+        TMMessageBoxManager.show({
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.NO)
+                        isMobile && (onUndo(), setShowList(true), onShowList?.(true));
+                    if (e == ButtonNames.YES)
+                        isMobile ? (await onSaveAsync?.(), setShowList(true), onShowList?.(true)) : await onSaveAsync?.();
+                    onClose?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    const warningsCount = validationItems.filter(o => o.ResultType == ResultTypes.WARNING).length;
+    const errorsCount = validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length;
+    const renderSaveForm = () => {
+        return (_jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx(TMLayoutItem, { height: 'max-content', children: _jsxs(StyledToolbarForm, { children: [showBackButton && _jsx(TMButton, { btnStyle: 'toolbar', color: 'tertiary', caption: SDKUI_Localizator.Back, icon: _jsx(IconArrowLeft, {}), elementStyle: { marginRight: '10px' }, onClick: () => { doClose(); } }), _jsx(TMButton, { caption: SDKUI_Localizator.Save, icon: _jsx(IconSave, {}), keyGesture: "alt+s", backgroundColor: errorsCount > 0 ? TMColors.error : isModified ? TMColors.success : TMColors.disabled, onClick: doSaveAsync, color: "success", btnStyle: "toolbar", disabled: isModified && errorsCount <= 0 ? false : true }), hasNavigation && _jsx(TMButton, { caption: SDKUI_Localizator.Previous, icon: _jsx(IconArrowUp, {}), btnStyle: "toolbar", disabled: !canPrev || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doPrev }), hasNavigation && _jsx(TMButton, { caption: SDKUI_Localizator.Next, icon: _jsx(IconArrowDown, {}), btnStyle: "toolbar", disabled: !canNext || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doNext }), _jsx(TMButton, { caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, {}), keyGesture: "alt+z", color: "tertiary", btnStyle: "toolbar", disabled: isModified ? false : true, onClick: onUndo }), customToolbarElements, warningsCount > 0 &&
+                                _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: '10px' }, onClick: () => setShowErrorGrid(!showErrorGrid), "$resultType": ResultTypes.WARNING, children: [" ", _jsx(IconWarning, { fontSize: 16 }), " ", _jsx("span", { children: warningsCount })] }) }), errorsCount > 0 &&
+                                _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: warningsCount <= 0 ? '10px' : '0' }, onClick: () => setShowErrorGrid(!showErrorGrid), "$resultType": ResultTypes.ERROR, children: [" ", _jsx(IconCloseCircle, { fontSize: 16 }), " ", _jsx("span", { children: errorsCount })] }) }), onShowList &&
+                                _jsx("div", { style: { right: '10px', position: 'absolute' }, children: !isMobile && _jsx(TMButton, { caption: showList ? SDKUI_Localizator.List_Hide : SDKUI_Localizator.List_Show, icon: showList ? _jsx(IconHide, {}) : _jsx(IconShow, {}), keyGesture: "alt+h", onClick: () => { setShowList(!showList); onShowList?.(!showList); }, btnStyle: 'toolbar' }) }), (formMode == FormModes.Create || formMode == FormModes.Duplicate) &&
+                                _jsx("div", { style: { right: '50px', position: 'absolute' }, children: !isMobile && onCancel && _jsx(TMButton, { icon: _jsx(IconCloseCircle, {}), onClick: onCancel, btnStyle: 'toolbar', caption: SDKUI_Localizator.Cancel, color: 'tertiary' }) })] }) }), _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { separatorSize: 4, direction: 'vertical', start: showErrorGrid && validationItems.length > 0 ? ['80%', '20%'] : ['100%', '0'], min: ['0', '0'], children: [_jsx(TMCard, { showBorder: false, children: exception
+                                    ?
+                                        _jsx("div", { style: { width: '100%', height: '100%', marginTop: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', color: getColor('error') }, children: 'Si è verificato un errore' })
+                                    : _jsx(_Fragment, { children: children }) }), showErrorGrid && validationItems.length > 0 ? _jsx(TMCard, { scrollY: true, padding: false, showBorder: false, children: _jsx(TMValidationItemsList, { validationItems: validationItems }) }) : _jsx(_Fragment, {})] }) })] }));
+    };
+    return (_jsx(_Fragment, { children: isModal && onClose
+            ?
+                _jsx(TMModal, { title: `${title} - ${FormModes[formMode]}`, onClose: doClose, width: width ?? '100%', height: height ?? '100%', children: renderSaveForm() })
+            : renderSaveForm() }));
+};
+export default TMSaveForm;

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

@@ -0,0 +1,6 @@
+import { ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+interface ITMValidationItemsList {
+    validationItems?: ValidationItem[];
+}
+declare const TMValidationItemsList: ({ validationItems }: ITMValidationItemsList) => import("react/jsx-runtime").JSX.Element;
+export default TMValidationItemsList;

package/lib/components/grids/TMValidationItemsList.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { TMColors } from '../../utils/theme';
+import { IconCloseCircle, IconWarning } from '../../helper';
+const StyledValidationItemsTabs = styled.div `
+    position: sticky;
+    top: 0px;
+    height: 25px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    border-bottom: 1px solid $primary;
+    width: 100%;
+    user-select: none;
+    background-color: ${TMColors.primary};
+    z-index: 20;
+    border-top: 1px solid #122C4C;
+`;
+const StyledValidationTypeTab = styled.div `
+    padding: 10px;
+    color: ${(props) => props.$isSelected ? 'white' : 'rgb(182, 182, 182)'};
+    font-size: 1rem;
+    cursor: pointer;
+    ${(props) => props.$isSelected ? 'border-bottom: 1px white solid;' : ''};
+`;
+const StyledMessageContainer = styled.div `
+    padding: 2px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    color: $primary;
+    font-size: 1rem;
+    width: 100%;
+    border-bottom: 1px solid rgb(190, 190, 190);
+`;
+const StyledMessageIcon = styled.div `
+    transform: translateY(1.5px);
+    margin-right: 5px;
+    z-index: 5;
+`;
+const StyledMessageResultType = styled.div `
+    width: 50px;
+    user-select: none;
+    margin-right: 20px;
+`;
+const StyledMessageElement = styled.div `
+    width: 150px;
+    text-align: left;
+    user-select: none;
+    margin-right: 20px;
+`;
+const StyledMessageText = styled.div `
+    transform: translateY(1.5px);
+    margin-right: 5px;
+    z-index: 5;
+    margin-right: 20px;
+`;
+const TMValidationItemsList = ({ validationItems = [] }) => {
+    const [selectedTab, setSelectedTab] = useState(0);
+    const [currentValidationItems, setCurrentValidationItems] = useState(validationItems);
+    useEffect(() => {
+        setCurrentValidationItems(validationItems);
+    }, [validationItems]);
+    useEffect(() => {
+        if (selectedTab === 0) {
+            setCurrentValidationItems(validationItems);
+        }
+        if (selectedTab === 1) {
+            setCurrentValidationItems(validationItems.filter(item => item.ResultType !== 'Warning'));
+        }
+        if (selectedTab === 2) {
+            setCurrentValidationItems(validationItems.filter(item => item.ResultType !== 'Error'));
+        }
+    }, [selectedTab]);
+    return (_jsxs("div", { style: { padding: "0px 1px" }, children: [_jsxs(StyledValidationItemsTabs, { children: [_jsx(StyledValidationTypeTab, { onClick: () => setSelectedTab(0), "$isSelected": selectedTab === 0, children: "All" }), _jsx(StyledValidationTypeTab, { onClick: () => setSelectedTab(1), "$isSelected": selectedTab === 1, children: "Errors" }), _jsx(StyledValidationTypeTab, { onClick: () => setSelectedTab(2), "$isSelected": selectedTab === 2, children: "Warnings" })] }), _jsx("div", { style: { padding: '0' }, children: currentValidationItems.map((item, index) => _jsxs(StyledMessageContainer, { children: [_jsx(StyledMessageIcon, { children: item.ResultType === 'Warning' ? _jsx(IconWarning, { color: 'orange', fontSize: 16 }) : _jsx(IconCloseCircle, { color: 'red', fontSize: 16 }) }), _jsx(StyledMessageResultType, { children: item.ResultType }), _jsx(StyledMessageElement, { children: item.PropertyName }), _jsx(StyledMessageText, { children: item.Message })] }, index)
+                // <Message key={index} propertyName={item.PropertyName} message={item.Message} resultType={item.ResultType} theme={currentTheme} />
+                ) })] }));
+};
+export default TMValidationItemsList;

package/lib/components/index.d.ts

@@ -0,0 +1,44 @@
+export { default as ShowAlert } from './base/TMAlert';
+export { default as TMButton } from './base/TMButton';
+export { default as TMClosableList } from './base/TMClosableList';
+export * from './base/TMContextMenu';
+export { default as TMDropDownMenu } from './base/TMDropDownMenu';
+export { default as TMListView } from './base/TMListView';
+export { default as TMList } from './base/TMList';
+export { default as TMModal } from './base/TMModal';
+export * from './base/TMPopUp';
+export * from './base/TMLayout';
+export * from './base/Styled';
+export { default as TMProgressBar } from './base/TMProgressBar';
+export { default as TMSpinner } from './base/TMSpinner';
+export { Spinner } from './base/TMSpinner';
+export { default as TMToggleButton } from './base/TMToggleButton';
+export { default as TMTooltip } from './base/TMTooltip';
+export { default as TMVilViewer } from './base/TMVilViewer';
+export { default as TMDropDown } from './editors/TMDropDown';
+export { default as TMSummary } from './editors/TMSummary';
+export { default as TMTextBox } from './editors/TMTextBox';
+export { default as TMCheckBox } from './editors/TMCheckBox';
+export { default as TMRadioButton } from './editors/TMRadioButton';
+export { default as TMDateBox } from './editors/TMDateBox';
+export { editorColorManager } from './editors/TMEditorStyled';
+export * from './choosers/TMDataListItemChooser';
+export * from './choosers/TMDcmtTypeChooser';
+export * from './choosers/TMMetadataChooser';
+export * from './choosers/TMUserChooser';
+export { default as TMValidationItemsList } from './grids/TMValidationItemsList';
+export * from './query/TMQueryEditor';
+export * from './base/TMTab';
+export { default as TMHeader } from "./sidebar/TMHeader";
+export { default as TMSidebar } from "./sidebar/TMSidebar";
+export { default as TMSidebarItem } from "./sidebar/TMSidebarItem";
+export { default as TMSplitterLayout } from "./splitter/TMSplitterLayout";
+export { default as TMLoginForm } from "./forms/TMLoginForm";
+export { default as TMSaveForm } from "./forms/TMSaveForm";
+export { default as TMApplyForm } from "./forms/TMApplyForm";
+export { default as TMChooserForm } from "./forms/TMChooserForm";
+export { default as TMPage } from "./pages/TMPage";
+export { default as SettingsAppearance } from "./settings/SettingsAppearance";
+export * from "./viewers/TMTidViewer";
+export * from "./viewers/TMMidViewer";
+export * from "./viewers/TMDataListItemViewer";

package/lib/components/index.js

@@ -0,0 +1,59 @@
+// base
+// export { default as TMAbortBox } from './base/TMAbortBox'
+export { default as ShowAlert } from './base/TMAlert';
+export { default as TMButton } from './base/TMButton';
+export { default as TMClosableList } from './base/TMClosableList';
+export * from './base/TMContextMenu';
+export { default as TMDropDownMenu } from './base/TMDropDownMenu';
+export { default as TMListView } from './base/TMListView';
+export { default as TMList } from './base/TMList';
+export { default as TMModal } from './base/TMModal';
+export * from './base/TMPopUp';
+export * from './base/TMLayout';
+export * from './base/Styled';
+export { default as TMProgressBar } from './base/TMProgressBar';
+export { default as TMSpinner } from './base/TMSpinner';
+export { Spinner } from './base/TMSpinner';
+export { default as TMToggleButton } from './base/TMToggleButton';
+export { default as TMTooltip } from './base/TMTooltip';
+export { default as TMVilViewer } from './base/TMVilViewer';
+//editors
+export { default as TMDropDown } from './editors/TMDropDown';
+export { default as TMSummary } from './editors/TMSummary';
+export { default as TMTextBox } from './editors/TMTextBox';
+export { default as TMCheckBox } from './editors/TMCheckBox';
+export { default as TMRadioButton } from './editors/TMRadioButton';
+export { default as TMDateBox } from './editors/TMDateBox';
+export { editorColorManager } from './editors/TMEditorStyled';
+// choosers
+export * from './choosers/TMDataListItemChooser';
+export * from './choosers/TMDcmtTypeChooser';
+export * from './choosers/TMMetadataChooser';
+export * from './choosers/TMUserChooser';
+//grids
+export { default as TMValidationItemsList } from './grids/TMValidationItemsList';
+//query
+export * from './query/TMQueryEditor';
+//tab
+export * from './base/TMTab';
+// others
+// export { default as TMAreaManager } from "./filesystem/TMAreaManager";
+// export { default as TMFilePreviewer } from "./filesystem/TMFilePreviewer";
+export { default as TMHeader } from "./sidebar/TMHeader";
+export { default as TMSidebar } from "./sidebar/TMSidebar";
+export { default as TMSidebarItem } from "./sidebar/TMSidebarItem";
+// export { default as TMStatusbar } from "./sidebar/TMStatusBar";
+export { default as TMSplitterLayout } from "./splitter/TMSplitterLayout";
+//form
+export { default as TMLoginForm } from "./forms/TMLoginForm";
+export { default as TMSaveForm } from "./forms/TMSaveForm";
+export { default as TMApplyForm } from "./forms/TMApplyForm";
+export { default as TMChooserForm } from "./forms/TMChooserForm";
+//page
+export { default as TMPage } from "./pages/TMPage";
+//settings
+export { default as SettingsAppearance } from "./settings/SettingsAppearance";
+//viewers
+export * from "./viewers/TMTidViewer";
+export * from "./viewers/TMMidViewer";
+export * from "./viewers/TMDataListItemViewer";

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { ObjectClasses, JobTypes } from "@topconsultnpm/sdk-ts-beta";
+import { TMProgressOptions } from "../../ts";
+interface ITMPage<T> {
+    /** Eventuale componente da sovrapporre alla lista */
+    listInsteadOfContent?: React.ReactNode;
+    /** 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?: React.ReactNode;
+    /** 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;
+    /** Segnale per l'interruzione */
+    abortSignal?: AbortSignal;
+    /** Testo per filtrare la lista */
+    searchText?: string;
+    /** Indica la pagina dell'URL per i link */
+    routePage?: string;
+    /** Indica l'avanzamento dei lavori multipli */
+    onProgressChanged?: (option: TMProgressOptions, value?: number) => void;
+    /** 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, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps, abortSignal, onProgressChanged, onSelectionChanged, onCountersChanged }: ITMPage<T>) => import("react/jsx-runtime").JSX.Element;
+export default TMPage;

package/lib/components/pages/TMPage.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from "react";
+import { SDK_Globals, ObjectClasses } from "@topconsultnpm/sdk-ts-beta";
+import DataGrid, { Column, GroupPanel, Grouping, HeaderFilter, LoadPanel, Pager, Paging, Scrolling, SearchPanel, Selection } from "devextreme-react/cjs/data-grid";
+import { PlatformObjectService } from "../../services/platform_services";
+import { FormModes, TMProgressOptions } from "../../ts";
+import { Globalization, IconAdd, IconColumns, IconCopy, IconDelete, IconDuplicate, IconHide, IconMail, IconMenuVertical, IconOpenInNew, IconRefresh, IconShow, MOBILE_WIDTH, SDKUI_Globals, SDKUI_Localizator, calcSaveFormTitle, canNext, canPrev, getNext, getPrev, useWindowWidth } from "../../helper";
+import TMSpinner from "../base/TMSpinner";
+import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../base/TMPopUp";
+import TMLayoutContainer, { TMCard, 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';
+const TMToolbarButton = ({ showTooltip = true, color = 'primary', icon, caption = '', onClick, disabled, keyGesture }) => {
+    return (_jsx(TMButton, { keyGesture: keyGesture, color: color, disabled: disabled, caption: caption, onClick: () => { onClick && onClick(); }, icon: icon, showTooltip: showTooltip, btnStyle: 'toolbar' }));
+};
+const TMPage = ({ id, objClass = ObjectClasses.None, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps, abortSignal, onProgressChanged, onSelectionChanged, onCountersChanged }) => {
+    let width = useWindowWidth();
+    let isMobile = width <= MOBILE_WIDTH;
+    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);
+    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(() => { 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.retrieveAllAsync(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 = () => { isMobile && setShowList(false); setFormMode(FormModes.Duplicate); };
+    const create = () => { isMobile && setShowList(false); setFormMode(FormModes.Create); };
+    const deleteItems = async () => {
+        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;
+        }
+        TMMessageBoxManager.show({
+            title: SDKUI_Localizator.Delete, message: msg, buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: async (e) => {
+                if (e !== ButtonNames.YES)
+                    return;
+                onProgressChanged?.(TMProgressOptions.SetMaximum, selectedItems.length);
+                TMSpinner.show({ description: 'Deleting...', backgroundColor: 'transparent' });
+                try {
+                    for (let i = 0; i < selectedItems.length; i++) {
+                        if (!abortSignal?.aborted) {
+                            await PlatformObjectService.deleteAsync(objClass, selectedItems[i]?.id);
+                            onProgressChanged?.(TMProgressOptions.SetValue, i + 1);
+                        }
+                    }
+                    await loadDataAsync().then(() => onProgressChanged?.(TMProgressOptions.Finish));
+                    onProgressChanged?.(TMProgressOptions.NewAbortController);
+                }
+                catch (e) {
+                    TMExceptionBoxManager.show({ exception: e });
+                    onProgressChanged?.(TMProgressOptions.Finish);
+                    onProgressChanged?.(TMProgressOptions.NewAbortController);
+                }
+                TMSpinner.hide();
+            }
+        });
+    };
+    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(TMToolbarButton, { keyGesture: "alt+n", disabled: disabled, caption: SDKUI_Localizator.Add, onClick: () => { create(); }, icon: _jsx(IconAdd, {}) }), _jsx(TMToolbarButton, { keyGesture: "alt+d", disabled: selectedItems.length === 0 || disabled, caption: SDKUI_Localizator.Remove, icon: _jsx(IconDelete, {}), color: 'error', onClick: () => { deleteItems(); } }), _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMToolbarButton, { 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: isMobile,
+            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: () => {
+                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 (_jsxs(TMSplitterLayout, { direction: "horizontal", showSeparator: showList && !isMobile, start: showList ? !isMobile ? ['30%', '70%'] : ['100%', '0%'] : ['0', '100%'], min: ['0px', '0px'], children: [listInsteadOfContent ??
+                _jsxs(TMCard, { borderRadius: false, fontWeight: "bold", showBorder: false, 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 (!isMobile)
+                                    return;
+                                setSelectedItems([row.data]);
+                                setShowList(false);
+                            }, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onSelectionChanged: (e) => { setSelectedItems(e.selectedRowsData); onSelectionChanged?.(e.selectedRowsData); }, children: [_jsx(GroupPanel, { visible: !!(!isMobile && 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: SDKUI_Globals.dataGridUseNativeScrollbar }), _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(TMCard, { borderRadius: false, fontWeight: "bold", showBorder: false, 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,27 @@
+import React from 'react';
+import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+import { ITMApplyFormProps, FormModes } from '../../ts';
+export declare enum Descriptors {
+    Query = 3
+}
+export declare function useOrchApplyForm<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> {
+    onlyAdvancedSearchMode?: boolean;
+    validateSelect?: boolean;
+    validateOrderBy?: boolean;
+    showDistinct?: boolean;
+    raiseWarningForOnlyMetadataDcmtTypes?: boolean;
+    borderRadius?: string;
+    searchText?: string;
+    onFromTIDChanged?: (tid: number) => void;
+}
+declare const TMQueryEditor: React.FunctionComponent<ITMQueryEditor>;
+export default TMQueryEditor;