@topconsultnpm/sdkui-react-beta 6.8.15 → 6.8.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -20,7 +20,7 @@ const cellRender = (cellData) => {
|
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
const TMResultDialog = ({ title, result, id1Caption, id2Caption }) => {
|
|
23
|
-
return (_jsx(TMModal, { height: '
|
|
23
|
+
return (_jsx(TMModal, { height: '65%', width: '75%', 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.filter(o => o.resultType != ResultTypes.SUCCESS), 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 }), id2Caption && _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 })] })] }) }));
|
|
24
24
|
};
|
|
25
25
|
export default TMResultDialog;
|
|
26
26
|
export class TMResultManager {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ObjectClasses, JobTypes } from "@topconsultnpm/sdk-ts-beta";
|
|
3
|
-
import { TMProgressOptions } from "../../ts";
|
|
4
3
|
interface ITMPage<T> {
|
|
5
4
|
/** Eventuale componente da sovrapporre alla lista */
|
|
6
5
|
listInsteadOfContent?: React.ReactNode;
|
|
@@ -22,18 +21,14 @@ interface ITMPage<T> {
|
|
|
22
21
|
objClass?: ObjectClasses;
|
|
23
22
|
/** Tipo dell'oggetto in funzione di objClass */
|
|
24
23
|
objType?: JobTypes;
|
|
25
|
-
/** Segnale per l'interruzione */
|
|
26
|
-
abortSignal?: AbortSignal;
|
|
27
24
|
/** Testo per filtrare la lista */
|
|
28
25
|
searchText?: string;
|
|
29
26
|
/** Indica la pagina dell'URL per i link */
|
|
30
27
|
routePage?: string;
|
|
31
|
-
/** Indica l'avanzamento dei lavori multipli */
|
|
32
|
-
onProgressChanged?: (option: TMProgressOptions, value?: number) => void;
|
|
33
28
|
/** Indica il cambiamento della selezione */
|
|
34
29
|
onSelectionChanged?: (rows: T[]) => void;
|
|
35
30
|
/** Indica il cambiamento dei contatori della lista (totali, selezionati e visibili) */
|
|
36
31
|
onCountersChanged?: (totalItemsCount: number, selectedItemsCount: number, visibleItemsCount: number) => void;
|
|
37
32
|
}
|
|
38
|
-
declare const TMPage: <T>({ id, objClass, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps,
|
|
33
|
+
declare const TMPage: <T>({ id, objClass, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps, onSelectionChanged, onCountersChanged }: ITMPage<T>) => import("react/jsx-runtime").JSX.Element;
|
|
39
34
|
export default TMPage;
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React, { useState, useEffect } from "react";
|
|
3
|
-
import { SDK_Globals, ObjectClasses } from "@topconsultnpm/sdk-ts-beta";
|
|
3
|
+
import { SDK_Globals, ObjectClasses, ResultTypes } from "@topconsultnpm/sdk-ts-beta";
|
|
4
4
|
import DataGrid, { Column, GroupPanel, Grouping, HeaderFilter, LoadPanel, Pager, Paging, Scrolling, SearchPanel, Selection } from "devextreme-react/cjs/data-grid";
|
|
5
5
|
import { PlatformObjectService } from "../../services/platform_services";
|
|
6
|
-
import { FormModes
|
|
7
|
-
import { Globalization, IconAdd, IconColumns, IconCopy, IconDelete, IconDuplicate, IconHide, IconMail, IconMenuVertical, IconOpenInNew, IconRefresh, IconShow, SDKUI_Globals, SDKUI_Localizator, calcSaveFormTitle, canNext, canPrev, getNext, getPrev } from "../../helper";
|
|
6
|
+
import { FormModes } from "../../ts";
|
|
7
|
+
import { Globalization, IconAdd, IconColumns, IconCopy, IconDelete, IconDuplicate, IconHide, IconMail, IconMenuVertical, IconOpenInNew, IconRefresh, IconShow, SDKUI_Globals, SDKUI_Localizator, calcSaveFormTitle, canNext, canPrev, getExceptionMessage, getNext, getPrev } from "../../helper";
|
|
8
8
|
import TMSpinner from "../base/TMSpinner";
|
|
9
9
|
import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../base/TMPopUp";
|
|
10
|
-
import TMLayoutContainer, {
|
|
10
|
+
import TMLayoutContainer, { TMLayoutItem, TMSplitterLayout } from "../base/TMLayout";
|
|
11
11
|
import TMButton from "../base/TMButton";
|
|
12
12
|
import TMDropDownMenu from "../base/TMDropDownMenu";
|
|
13
13
|
import { FontSize, TMColors } from "../../utils/theme";
|
|
14
14
|
import selectionManagerImage from '../../assets/multipleSelectionManager.jpg';
|
|
15
15
|
import { DeviceType, useDeviceType } from "../base/TMDeviceProvider";
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
import { TMResultManager } from "../forms/TMResultDialog";
|
|
17
|
+
import { TMLayoutWaitingContainer } from "../base/TMWaitPanel";
|
|
18
|
+
import TMToolbarCard from "../base/TMToolbarCard";
|
|
19
|
+
let abortController = new AbortController();
|
|
20
|
+
const TMPage = ({ id, objClass = ObjectClasses.None, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps, onSelectionChanged, onCountersChanged }) => {
|
|
20
21
|
const deviceType = useDeviceType();
|
|
21
22
|
let gridInstance;
|
|
22
23
|
const [showId, setShowId] = useState(false);
|
|
@@ -27,6 +28,12 @@ const TMPage = ({ id, objClass = ObjectClasses.None, objType, listInsteadOfConte
|
|
|
27
28
|
const [selectedItems, setSelectedItems] = useState([]);
|
|
28
29
|
const [visibleItems, setVisibleItems] = useState([]);
|
|
29
30
|
const [formMode, setFormMode] = useState(FormModes.Update);
|
|
31
|
+
const [showWaitPanel, setShowWaitPanel] = useState(false);
|
|
32
|
+
const [waitPanelTitle, setWaitPanelTitle] = useState('');
|
|
33
|
+
const [showPrimary, setShowPrimary] = useState(false);
|
|
34
|
+
const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
|
|
35
|
+
const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
|
|
36
|
+
const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
|
|
30
37
|
let objName = PlatformObjectService.getName(objClass, objType);
|
|
31
38
|
let objNames = PlatformObjectService.getName(objClass, objType, true);
|
|
32
39
|
useEffect(() => { gridInstance?.instance().searchByText(searchText ?? ''); }, [searchText]);
|
|
@@ -64,6 +71,7 @@ const TMPage = ({ id, objClass = ObjectClasses.None, objType, listInsteadOfConte
|
|
|
64
71
|
const duplicate = () => { deviceType === DeviceType.MOBILE && setShowList(false); setFormMode(FormModes.Duplicate); };
|
|
65
72
|
const create = () => { deviceType === DeviceType.MOBILE && setShowList(false); setFormMode(FormModes.Create); };
|
|
66
73
|
const deleteItems = async () => {
|
|
74
|
+
let operationTitle = SDKUI_Localizator.Delete;
|
|
67
75
|
let msg = "";
|
|
68
76
|
switch (selectedItems.length) {
|
|
69
77
|
case 0: return;
|
|
@@ -74,29 +82,41 @@ const TMPage = ({ id, objClass = ObjectClasses.None, objType, listInsteadOfConte
|
|
|
74
82
|
msg = SDKUI_Localizator.Delete_ConfirmForN.replaceParams(selectedItems.length);
|
|
75
83
|
break;
|
|
76
84
|
}
|
|
85
|
+
const doOperationAsync = async () => {
|
|
86
|
+
setShowWaitPanel(true);
|
|
87
|
+
setShowPrimary(true);
|
|
88
|
+
setWaitPanelTitle(operationTitle);
|
|
89
|
+
abortController = new AbortController();
|
|
90
|
+
let result = [];
|
|
91
|
+
setWaitPanelMaxValuePrimary(selectedItems.length);
|
|
92
|
+
for (let i = 0; i < selectedItems.length; i++) {
|
|
93
|
+
if (abortController.signal.aborted) {
|
|
94
|
+
result.push({ rowIndex: i, id1: selectedItems[i].id, id2: 0, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborati ${i + 1} lavori` });
|
|
95
|
+
break;
|
|
96
|
+
}
|
|
97
|
+
setWaitPanelValuePrimary(i + 1);
|
|
98
|
+
setWaitPanelTextPrimary(`Documento ${i + 1} di ${selectedItems.length}`);
|
|
99
|
+
try {
|
|
100
|
+
await PlatformObjectService.deleteAsync(objClass, selectedItems[i]?.id);
|
|
101
|
+
result.push({ rowIndex: i, id1: selectedItems[i].id, id2: 0, description: objType?.toString(), resultType: ResultTypes.SUCCESS });
|
|
102
|
+
}
|
|
103
|
+
catch (ex) {
|
|
104
|
+
result.push({ rowIndex: i, id1: selectedItems[i].id, id2: 0, resultType: ResultTypes.ERROR, description: getExceptionMessage(ex) });
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
setWaitPanelMaxValuePrimary(0);
|
|
108
|
+
setWaitPanelValuePrimary(0);
|
|
109
|
+
setWaitPanelTextPrimary('');
|
|
110
|
+
setShowWaitPanel(false);
|
|
111
|
+
TMResultManager.show(result, operationTitle, "JobID", undefined);
|
|
112
|
+
};
|
|
77
113
|
TMMessageBoxManager.show({
|
|
78
114
|
title: SDKUI_Localizator.Delete, message: msg, buttons: [ButtonNames.YES, ButtonNames.NO],
|
|
79
115
|
onButtonClick: async (e) => {
|
|
80
116
|
if (e !== ButtonNames.YES)
|
|
81
117
|
return;
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
try {
|
|
85
|
-
for (let i = 0; i < selectedItems.length; i++) {
|
|
86
|
-
if (!abortSignal?.aborted) {
|
|
87
|
-
await PlatformObjectService.deleteAsync(objClass, selectedItems[i]?.id);
|
|
88
|
-
onProgressChanged?.(TMProgressOptions.SetValue, i + 1);
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
await loadDataAsync().then(() => onProgressChanged?.(TMProgressOptions.Finish));
|
|
92
|
-
onProgressChanged?.(TMProgressOptions.NewAbortController);
|
|
93
|
-
}
|
|
94
|
-
catch (e) {
|
|
95
|
-
TMExceptionBoxManager.show({ exception: e });
|
|
96
|
-
onProgressChanged?.(TMProgressOptions.Finish);
|
|
97
|
-
onProgressChanged?.(TMProgressOptions.NewAbortController);
|
|
98
|
-
}
|
|
99
|
-
TMSpinner.hide();
|
|
118
|
+
await doOperationAsync();
|
|
119
|
+
await loadDataAsync();
|
|
100
120
|
}
|
|
101
121
|
});
|
|
102
122
|
};
|
|
@@ -124,7 +144,7 @@ const TMPage = ({ id, objClass = ObjectClasses.None, objType, listInsteadOfConte
|
|
|
124
144
|
}
|
|
125
145
|
return items;
|
|
126
146
|
};
|
|
127
|
-
return (_jsx(TMLayoutItem, { height: '35px', children: _jsxs(TMLayoutContainer, { direction: 'horizontal', gap: 5, children: [_jsx(
|
|
147
|
+
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() })] }) }));
|
|
128
148
|
};
|
|
129
149
|
const MultipleSelectionManager = () => {
|
|
130
150
|
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 &&
|
|
@@ -137,7 +157,7 @@ const TMPage = ({ id, objClass = ObjectClasses.None, objType, listInsteadOfConte
|
|
|
137
157
|
return null;
|
|
138
158
|
return React.cloneElement(detailForm, {
|
|
139
159
|
id: selectedItems.length == 0 ? -1 : selectedItems[0].id,
|
|
140
|
-
showBackButton: deviceType === DeviceType.MOBILE,
|
|
160
|
+
// showBackButton: deviceType === DeviceType.MOBILE,
|
|
141
161
|
formMode: formMode,
|
|
142
162
|
canNext: canNext(visibleItems, selectedItems),
|
|
143
163
|
onNext: () => { setSelectedItems([getNext(visibleItems, selectedItems)]); },
|
|
@@ -176,19 +196,19 @@ const TMPage = ({ id, objClass = ObjectClasses.None, objType, listInsteadOfConte
|
|
|
176
196
|
});
|
|
177
197
|
};
|
|
178
198
|
const cellRenderObjectIcon = (data) => { return PlatformObjectService.getIcon(objClass, data.row.data); };
|
|
179
|
-
return (_jsxs(TMSplitterLayout, { direction: "horizontal", showSeparator: showList && deviceType !== DeviceType.MOBILE, start: showList ? deviceType !== DeviceType.MOBILE ? ['30%', '70%'] : ['100%', '0%'] : ['0', '100%'], min: ['0px', '0px'], children: [listInsteadOfContent ??
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
199
|
+
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 ??
|
|
200
|
+
_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) => {
|
|
201
|
+
setVisibleItems(e.component.getVisibleRows().map((row) => { return row.data; }));
|
|
202
|
+
e.component.selectRows(selectedItems?.map((item) => item.id), false);
|
|
203
|
+
}, onRowClick: (row) => {
|
|
204
|
+
if (deviceType !== DeviceType.MOBILE)
|
|
205
|
+
return;
|
|
206
|
+
setSelectedItems([row.data]);
|
|
207
|
+
setShowList(false);
|
|
208
|
+
}, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, 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: 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 ??
|
|
209
|
+
_jsx(TMLayoutItem, { children: selectedItems.length == 1 || formMode == FormModes.Create || formMode == FormModes.Duplicate ?
|
|
210
|
+
_jsx(TMToolbarCard, { onBack: deviceType === DeviceType.MOBILE ? () => setShowList(true) : undefined, title: calcSaveFormTitle(objName, formMode, selectedItems.length == 0 ? -1 : selectedItems[0].id, detailTitlePathKeys), children: getDetailFormWithProps() })
|
|
211
|
+
:
|
|
212
|
+
_jsx(MultipleSelectionManager, {}) })] }) }));
|
|
193
213
|
};
|
|
194
214
|
export default TMPage;
|