@topconsultnpm/sdkui-react-beta 6.8.0 → 6.8.2

package/lib/components/base/TMLayout.d.ts

@@ -39,13 +39,14 @@ declare const TMLayoutItem: ({ onClick, children, width, minWidth, maxWidth, max
     height?: string;
     minHeight?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction }: {
+export interface ITMLayoutContainerProps {
+    children: React.ReactNode;
     gap?: number;
     justifyContent?: string;
     alignItems?: string;
+    direction?: 'vertical' | 'horizontal';
     onClick?: () => void;
-    children: React.ReactNode;
-    direction?: "vertical" | "horizontal";
-}) => import("react/jsx-runtime").JSX.Element;
+}
+declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutContainerProps) => import("react/jsx-runtime").JSX.Element;
 export { TMCard, TMLayoutItem, TMSplitterLayout };
 export default TMLayoutContainer;

package/lib/components/base/TMLayout.js

@@ -157,7 +157,7 @@ const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorCo
         sepDiv?.addEventListener('touchstart', onMouseDownSep);
         return () => { sepDiv?.removeEventListener('mousedown', onMouseDownSep); sepDiv?.removeEventListener('touchstart', onMouseDownSep); };
     }, [firstDivRef, secondDivRef, sepRef, isFrag, containerRef]);
-    return (_jsxs("div", { ref: containerRef, style: { display: 'flex', width: '100%', height: '100%', flexDirection: direction === 'vertical' ? 'column' : 'row', alignItems: 'flex-start', justifyContent: 'flex-start', position: 'relative' }, children: [_jsx("div", { style: { transition: animation ? 'ease 300ms' : 'none', overflow: 'hidden', height: direction === 'vertical' ? start[0] : '100%', minHeight: direction === 'vertical' ? min[0] : '100%', minWidth: direction === 'vertical' ? '100%' : min[0], width: direction === 'vertical' ? '100%' : start[0] }, ref: firstDivRef, children: React.Children.toArray(children)[0] }), !isFrag && _jsx("div", { ref: sepRef, style: { display: showSeparator ? 'block' : 'none', minWidth: direction === 'vertical' ? '100%' : `${separatorSize}px`, minHeight: direction === 'vertical' ? `${separatorSize}px` : '100%', backgroundColor: separatorColor, cursor: direction === 'vertical' ? 's-resize' : 'e-resize' } }), _jsx("div", { style: { transition: animation ? 'ease 300ms' : 'none', overflow: 'hidden', height: direction === 'vertical' ? start[1] : '100%', minHeight: direction === 'vertical' ? min[1] : '100%', minWidth: direction === 'vertical' ? '100%' : min[1], width: direction === 'vertical' ? '100%' : start[1] }, ref: secondDivRef, children: React.Children.toArray(children)[1] })] }));
+    return (_jsxs("div", { ref: containerRef, style: { display: 'flex', width: '100%', height: '100%', flexDirection: direction === 'vertical' ? 'column' : 'row', alignItems: 'flex-start', justifyContent: 'flex-start', position: 'relative' }, children: [_jsx("div", { style: { transition: animation ? 'ease 300ms' : 'none', overflow: 'hidden', height: direction === 'vertical' ? start[0] : '100%', minHeight: direction === 'vertical' ? min[0] : '100%', minWidth: direction === 'vertical' ? '100%' : min[0], width: direction === 'vertical' ? '100%' : start[0] }, ref: firstDivRef, children: React.Children.toArray(children)?.[0] }), !isFrag && _jsx("div", { ref: sepRef, style: { display: showSeparator ? 'block' : 'none', minWidth: direction === 'vertical' ? '100%' : `${separatorSize}px`, minHeight: direction === 'vertical' ? `${separatorSize}px` : '100%', backgroundColor: separatorColor, cursor: direction === 'vertical' ? 's-resize' : 'e-resize' } }), _jsx("div", { style: { transition: animation ? 'ease 300ms' : 'none', overflow: 'hidden', height: direction === 'vertical' ? start[1] : '100%', minHeight: direction === 'vertical' ? min[1] : '100%', minWidth: direction === 'vertical' ? '100%' : min[1], width: direction === 'vertical' ? '100%' : start[1] }, ref: secondDivRef, children: React.Children.toArray(children)?.[1] })] }));
 };
 const TMLayoutItem = ({ onClick, children, width = '100%', minWidth, maxWidth, maxHeight, height = '100%', minHeight }) => {
     return (_jsx(StyledLayoutItem, { onClick: onClick, "$height": height, "$maxHeight": maxHeight, "$minHeight": minHeight, "$width": width, "$minWidth": minWidth, "$maxWidth": maxWidth, children: children }));

package/lib/components/base/TMWaitPanel.d.ts

@@ -0,0 +1,32 @@
+import { ITMLayoutContainerProps } from './TMLayout';
+interface ITMWaitPanelProps {
+    title?: string;
+    showPrimary?: boolean;
+    textPrimary?: string;
+    valuePrimary?: number;
+    maxValuePrimary?: number;
+    showSecondary?: boolean;
+    textSecondary?: string;
+    valueSecondary?: number;
+    maxValueSecondary?: number;
+    isCancelable?: boolean;
+    abortController?: AbortController;
+    onAbortClick?: (abortController: AbortController | undefined) => void;
+}
+export declare const TMWaitPanel: (props: ITMWaitPanelProps) => import("react/jsx-runtime").JSX.Element;
+interface ITMLayoutWaitingContainerProps extends ITMLayoutContainerProps {
+    showWaitPanel?: boolean;
+    waitPanelTitle?: string;
+    showWaitPanelPrimary?: boolean;
+    waitPanelTextPrimary?: string;
+    waitPanelValuePrimary?: number;
+    waitPanelMaxValuePrimary?: number;
+    showWaitPanelSecondary?: boolean;
+    waitPanelTextSecondary?: string;
+    waitPanelValueSecondary?: number;
+    waitPanelMaxValueSecondary?: number;
+    isCancelable?: boolean;
+    abortController?: AbortController;
+}
+export declare const TMLayoutWaitingContainer: ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutWaitingContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/base/TMWaitPanel.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import TMLayoutContainer from './TMLayout';
+import { SDKUI_Localizator } from '../../helper';
+const StyledWaitPanelOverlay = styled.div `
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1501;
+    transition: all; 
+    overflow: visible; 
+    background-color: rgba(0, 0, 0, 0.4);
+`;
+const StyledWaitPanel = styled.div ` 
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 300px; 
+    height: ${(props) => props.$height};
+    background: white; 
+    border-radius: 8px; 
+    padding: 10px; 
+    text-align: center; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
+`;
+const StyledTitle = styled.h2 ` margin: 0; font-size: 1.5em; color: #333; `;
+const StyledProgressBarContainer = styled.div ` width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; margin: 20px 0; `;
+const StyledProgressBar = styled.div ` height: 100%; background: #4caf50; transition: width 0.3s ease; `;
+const StyledProgressText = styled.p ` font-weight: bold; color: #333; margin: 0; `;
+const StyledMessage = styled.p ` color: #666; font-size: 0.9em; margin-top: 10px; `;
+const StyledAbortButton = styled.button ` background: #ff4d4d; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 1em; cursor: pointer; margin-top: 20px; &:hover { background: #ff6666; } `;
+export const TMWaitPanel = (props) => {
+    let progressValue1 = 100 * (((props.valuePrimary ?? 0) / (props.maxValuePrimary ?? 0)) || 0);
+    let progressValue2 = 100 * (((props.valueSecondary ?? 0) / (props.maxValueSecondary ?? 0)) || 0);
+    return (_jsx(StyledWaitPanelOverlay, { children: _jsxs(StyledWaitPanel, { "$height": (props.showPrimary && props.showSecondary) ? '350px' : '250px', children: [_jsx(StyledTitle, { children: props.title }), props.showPrimary &&
+                    _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue1.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue1.toFixed(2), "%"] }), _jsx(StyledMessage, { children: props.textPrimary })] }), props.showSecondary &&
+                    _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue2.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue2.toFixed(2), "%"] }), _jsx(StyledMessage, { children: props.textSecondary })] }), props.isCancelable && _jsx(StyledAbortButton, { onClick: () => props.onAbortClick?.(props.abortController), children: SDKUI_Localizator.Abort })] }) }));
+};
+export const TMLayoutWaitingContainer = ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical' }) => {
+    return (_jsxs(TMLayoutContainer, { gap: gap, justifyContent: justifyContent, alignItems: alignItems, direction: direction, children: [children, showWaitPanel &&
+                _jsx(TMWaitPanel, { title: waitPanelTitle, showPrimary: showWaitPanelPrimary, textPrimary: waitPanelTextPrimary, valuePrimary: waitPanelValuePrimary, maxValuePrimary: waitPanelMaxValuePrimary, showSecondary: showWaitPanelSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: isCancelable, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); } })] }));
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ResultTypes } from '@topconsultnpm/sdk-ts-beta';
+export type ResultInfo = {
+    rowIndex: number;
+    id1: number;
+    id2: number;
+    resultType: ResultTypes;
+    description?: any;
+};
+interface ITMResultDialogProps {
+    result: ResultInfo[];
+    id1Caption: string | undefined;
+    id2Caption: string | undefined;
+    title: string;
+}
+declare const TMResultDialog: React.FC<ITMResultDialogProps>;
+export default TMResultDialog;
+export declare class TMResultManager {
+    static show(result: ResultInfo[], title: string, id1Caption: string | undefined, id2Caption: string | undefined): void;
+}

package/lib/components/forms/TMResultDialog.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ResultTypes } from '@topconsultnpm/sdk-ts-beta';
+import { DataGrid } from 'devextreme-react';
+import { Column, HeaderFilter, Pager, Paging, Scrolling } from 'devextreme-react/cjs/data-grid';
+import ReactDOM from 'react-dom/client';
+import { IconSuccessCirlce, IconWarning, IconCloseCircle, IconInfo, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
+import { TMColors } from '../../utils/theme';
+import ShowAlert from '../base/TMAlert';
+import { TMDeviceProvider } from '../base/TMDeviceProvider';
+import TMLayoutContainer from '../base/TMLayout';
+import TMModal from '../base/TMModal';
+const cellRender = (cellData) => {
+    const resultType = cellData.data.resultType;
+    switch (resultType) {
+        case ResultTypes.SUCCESS: return _jsx(IconSuccessCirlce, { fontSize: 22, color: TMColors.success });
+        case ResultTypes.WARNING: return _jsx(IconWarning, { fontSize: 22, color: TMColors.warning });
+        case ResultTypes.ERROR: return _jsx(IconCloseCircle, { fontSize: 22, color: TMColors.error });
+        case ResultTypes.INFO: return _jsx(IconInfo, { fontSize: 22, color: TMColors.info });
+        default: return _jsx("div", { children: cellData.text });
+    }
+};
+const TMResultDialog = ({ title, result, id1Caption, id2Caption }) => {
+    return (_jsx(TMModal, { height: '60%', width: '60%', title: `Esito operazione - ${title}`, children: _jsxs(TMLayoutContainer, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '5px', padding: '3px', justifyContent: 'center', alignItems: 'center' }, children: [_jsx("p", { children: `Documenti elaborati: ${result.length}` }), _jsx(IconSuccessCirlce, { fontSize: 22, color: TMColors.success }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.SUCCESS).length ?? 0 }), _jsx(IconWarning, { fontSize: 22, color: TMColors.warning }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.WARNING).length ?? 0 }), _jsx(IconCloseCircle, { fontSize: 22, color: TMColors.error }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.ERROR).length ?? 0 })] }), _jsxs(DataGrid, { dataSource: result, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, keyExpr: "rowIndex", width: "100%", height: "100%", columnResizingMode: "widget", allowColumnResizing: true, columnAutoWidth: true, children: [_jsx(Column, { dataField: 'resultType', caption: '', allowResizing: true, allowSorting: true, cellRender: cellRender }), _jsx(Column, { dataField: 'id1', caption: id1Caption }), _jsx(Column, { dataField: 'id2', caption: id2Caption }), _jsx(Column, { dataField: 'description', allowResizing: true, caption: SDKUI_Localizator.Description, allowSorting: true }), _jsx(Paging, { enabled: true, pageSize: 30 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsx(Scrolling, { mode: 'standard', useNative: SDKUI_Globals.dataGridUseNativeScrollbar }), _jsx(HeaderFilter, { visible: true })] })] }) }));
+};
+export default TMResultDialog;
+export class TMResultManager {
+    static show(result, title, id1Caption, id2Caption) {
+        const warningsCount = result.filter(o => o.resultType == ResultTypes.WARNING).length;
+        const errorsCount = result.filter(o => o.resultType == ResultTypes.ERROR).length;
+        if (warningsCount <= 0 && errorsCount <= 0) {
+            ShowAlert({ message: "Operazione completata con successo", mode: 'success', duration: 3000, title: title });
+            return;
+        }
+        let container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = ReactDOM.createRoot(container);
+        root.render(_jsx(TMDeviceProvider, { children: _jsx(TMResultDialog, { title: title, result: result, id1Caption: id1Caption, id2Caption: id2Caption }) }));
+    }
+}

package/lib/components/index.d.ts

@@ -9,6 +9,7 @@ export { default as TMModal } from './base/TMModal';
 export * from './base/TMPopUp';
 export * from './base/TMLayout';
 export * from './base/Styled';
+export * from './base/TMWaitPanel';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';
@@ -43,6 +44,7 @@ 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 * from './forms/TMResultDialog';
 export { default as TMPage } from "./pages/TMPage";
 export { default as SettingsAppearance } from "./settings/SettingsAppearance";
 export * from "./viewers/TMTidViewer";

package/lib/components/index.js

@@ -1,17 +1,16 @@
 // 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 * from './base/TMListView';
-// 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 * from './base/TMWaitPanel';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';
@@ -44,18 +43,16 @@ export * from './query/TMQueryResultForm';
 //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";
+export * from './forms/TMResultDialog';
 //page
 export { default as TMPage } from "./pages/TMPage";
 //settings

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.8.0",
+    "version": "6.8.2",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -30,8 +30,8 @@
     "dependencies": {
         "@topconsultnpm/sdk-ts-beta": "^6.8.0",
         "buffer": "^6.0.3",
-        "devextreme": "24.1.6",
-        "devextreme-react": "24.1.6",
+        "devextreme": "24.2.3",
+        "devextreme-react": "24.2.3",
         "react-router-dom": "^6.15.0",
         "styled-components": "^6.1.1"
     }