@topconsultnpm/sdkui-react-beta 6.5.51

package/lib/components/filesystem/ProgressBar.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ProgressBar = ({ bgcolor, completed }) => {
+    // const { bgcolor, completed } = props;
+    const containerStyles = {
+        height: 20,
+        width: '100%',
+        backgroundColor: "#e0e0de",
+        borderRadius: 50,
+        // margin: 50
+    };
+    // const fillerStyles = {
+    //   height: '100%',
+    //   width: `${completed}%`,
+    //   backgroundColor: bgcolor,
+    //   borderRadius: 'inherit',
+    //   textAlign: 'right'
+    // }
+    const labelStyles = {
+        padding: 5,
+        color: 'white',
+        fontWeight: 'bold'
+    };
+    return (_jsx("div", { style: containerStyles, children: _jsx("div", { style: { height: '100%', width: `${completed}%`, backgroundColor: bgcolor, borderRadius: 'inherit', textAlign: 'right' }, children: _jsx("span", { style: labelStyles, children: `${completed}%` }) }) }));
+};
+export default ProgressBar;

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

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

package/lib/components/forms/TMApplyForm.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ResultTypes } from '@topconsultnpm/sdk-ts-beta';
+import { FormModes } from '../../ts/types';
+import { IconApply, IconApplyAndClose, IconArrowDown, IconArrowLeft, IconArrowUp, IconCloseCircle, IconShow, IconUndo, IconWarning, SDKUI_Localizator } 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 TMApplyForm = ({ children, width, height, showToolbar = true, formMode, isModal, isModified, showApply = true, showUndo = true, showBack = true, skipIsModifiedCheck = false, exception, customToolbarElements, canNext = true, canPrev = true, hasContentPadding = true, hasNavigation = false, hasShowId = false, showId, title = '', validationItems = [], onApply, onClose, onUndo, onNext, onPrev }) => {
+    const [showErrorGrid, setShowErrorGrid] = useState(false);
+    const doApply = async () => { try {
+        onApply?.();
+    }
+    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)
+                        onApply?.();
+                    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 onApply?.();
+                    onPrev?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    const doClose = () => {
+        if (!isModified || skipIsModifiedCheck) {
+            onClose?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            message: "Applicare le modifiche apportate?", buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL], //TODO SDKUI_Localizator.ApplyQuestion
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES) {
+                        if (errorsCount > 0)
+                            return;
+                        onApply?.();
+                    }
+                    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 renderApplyForm = () => {
+        return (_jsxs(TMLayoutContainer, { direction: 'vertical', gap: 0, children: [showToolbar && _jsx(TMLayoutItem, { height: '35px', children: _jsxs(StyledToolbarForm, { children: [!isModal && showBack && _jsx(TMButton, { btnStyle: 'toolbar', color: 'tertiary', caption: SDKUI_Localizator.Back, icon: _jsx(IconArrowLeft, {}), fontSize: '1.3rem', elementStyle: { marginRight: '10px' }, onClick: () => { doClose(); } }), showApply && _jsx(TMButton, { disabled: isModified && errorsCount <= 0 ? false : true, btnStyle: 'toolbar', caption: SDKUI_Localizator.Apply, icon: _jsx(IconApply, {}), color: 'success', fontSize: '1.3rem', onClick: doApply }), showApply && _jsx(TMButton, { disabled: isModified && errorsCount <= 0 ? false : true, btnStyle: 'toolbar', caption: SDKUI_Localizator.ApplyAndClose, icon: _jsx(IconApplyAndClose, {}), color: 'success', fontSize: '1.3rem', onClick: async () => { await doApply(); onClose?.(); } }), showUndo && _jsx(TMButton, { disabled: !isModified, btnStyle: 'toolbar', caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, {}), color: 'warning', fontSize: '1.3rem', onClick: onUndo }), hasNavigation && _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Next, icon: _jsx(IconArrowDown, {}), fontSize: '1.3rem', onClick: doNext, disabled: !canNext || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate }), hasNavigation && _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Previous, icon: _jsx(IconArrowUp, {}), fontSize: '1.3rem', onClick: doPrev, disabled: !canPrev || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate }), customToolbarElements, hasShowId ? _jsx(TMButton, { btnStyle: 'toolbar', caption: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, icon: _jsx(IconShow, {}), fontSize: '1.3rem', onClick: () => console.log('ID') }) : _jsx(_Fragment, {}), 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 })] }) })] }) }), _jsx(TMLayoutItem, { height: showToolbar ? 'calc(100% - 35px)' : '100%', children: _jsxs(TMSplitterLayout, { separatorSize: 4, direction: 'vertical', start: showErrorGrid && validationItems.length > 0 ? ['80%', '20%'] : ['100%', '0'], min: ['0', '0'], children: [_jsx(TMCard, { showBorder: false, scrollY: true, padding: hasContentPadding, children: exception
+                                    ?
+                                        _jsx("div", { style: { width: '100%', height: '100%', marginTop: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', color: TMColors.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, { isModal: isModal, title: `${title} - ${FormModes[formMode]}`, width: width, height: height, onClose: doClose, children: renderApplyForm() })
+            : renderApplyForm() }));
+};
+export default TMApplyForm;

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

@@ -0,0 +1,3 @@
+import { ITMChooserFormProps } from '../../ts';
+declare const TMChooserForm: <T>({ children, title, allowMultipleSelection, hasShowOnlySelectedItems, allowGrouping, allowSorting, width, height, dataSource, selectedIDs, manageUseLocalizedName, hasShowId, keyName, customButtons, showDefaultColumns, columns, summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }: ITMChooserFormProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TMChooserForm;

package/lib/components/forms/TMChooserForm.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { DataGrid } from 'devextreme-react';
+import { Column, Paging, Scrolling, Selection, LoadPanel, SearchPanel, Summary, TotalItem, HeaderFilter, Grouping, Pager } from 'devextreme-react/cjs/data-grid';
+import { SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
+import { IconApply, IconHide, IconRefresh, IconShow, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
+import TMButton from '../base/TMButton';
+import TMToggleButton from '../base/TMToggleButton';
+import TMModal from '../base/TMModal';
+const TMChooserForm = ({ children, title, allowMultipleSelection, hasShowOnlySelectedItems = false, allowGrouping, allowSorting = true, width, height, dataSource, selectedIDs, manageUseLocalizedName = true, hasShowId = true, keyName = "id", customButtons, showDefaultColumns = true, columns, summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }) => {
+    const [showId, setShowId] = useState(false);
+    const [showOnlySelectedItems, setShowOnlySelectedItems] = useState(selectedIDs != undefined && selectedIDs.length > 0);
+    const [selectedItems, setSelectedItems] = useState([]);
+    const [items, setItems] = useState([]);
+    const [isInitialized, setIsInitialized] = useState(false);
+    let gridInstance;
+    const getDataSource = () => { return (allowMultipleSelection && hasShowOnlySelectedItems && showOnlySelectedItems && selectedItems.length > 0) ? selectedItems : customFilter ? customFilter(items) : items; };
+    const getSelectedIDs = () => { return gridInstance?.instance().getSelectedRowsData().map((item) => { return convertID ? convertID(item) : item[keyName]; }); };
+    const renderTitle = () => { return title ? `${title} (${selectedItems.length} / ${customFilter ? customFilter(items).length : items.length})` : SDKUI_Localizator.Select; };
+    const doGetItems = (refreshCache) => {
+        if (dataSource) {
+            setItems(dataSource);
+            setSelectedItems(dataSource.filter((o) => selectedIDs?.includes(o[keyName])));
+            return;
+        }
+        getItems && getItems(refreshCache).then((result) => {
+            setItems(result);
+            if (!refreshCache) {
+                setSelectedItems(result.filter((o) => selectedIDs?.includes(o[keyName])));
+            }
+        });
+    };
+    const ToolbarButtons = () => {
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: '2px' }, children: [_jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Apply, icon: _jsx(IconApply, {}), color: 'success', fontSize: '1.3rem', onClick: () => { onChoose?.(getSelectedIDs()); onClose?.(); } }), hasShowId ? _jsx(TMButton, { btnStyle: 'toolbar', caption: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, icon: showId ? _jsx(IconHide, {}) : _jsx(IconShow, {}), fontSize: '1.3rem', onClick: () => { setShowId(!showId); onShowIdChanged?.(); } }) : _jsx(_Fragment, {}), _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Refresh, icon: _jsx(IconRefresh, {}), fontSize: '1.3rem', onClick: () => { doGetItems(true); } }), customButtons, hasShowOnlySelectedItems && allowMultipleSelection && _jsx(TMToggleButton, { value: showOnlySelectedItems, elementStyle: { marginLeft: '10px' }, label: 'Mostra solo selezionati', onValueChanged: () => setShowOnlySelectedItems(!showOnlySelectedItems) })] }));
+    };
+    useEffect(() => { doGetItems(false); }, []);
+    return (_jsx(TMModal, { title: renderTitle(), width: width ?? '550px', height: height ?? '600px', toolbar: _jsx(ToolbarButtons, {}), onClose: onClose, children: children ??
+            _jsxs(DataGrid, { ref: (grid) => (gridInstance = grid), dataSource: getDataSource(), keyExpr: keyName, allowColumnResizing: true, columnResizingMode: "widget", columnAutoWidth: true, allowColumnReordering: true, showBorders: true, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, height: "100%", 
+                // selectedRowKeys={selectedItems.map((item: any) => { return item.id })}
+                onContentReady: (e) => {
+                    if (!isInitialized && items && items.length > 0) {
+                        let selection = selectedItems.map((item) => { return item[keyName]; }) ?? [];
+                        if (selection.length > 0) {
+                            gridInstance?.instance().selectRows(selection, false);
+                            if (!allowMultipleSelection)
+                                gridInstance?.instance().navigateToRow(selection[0]);
+                            setIsInitialized(true);
+                        }
+                    }
+                }, onRowDblClick: () => { if (!allowMultipleSelection) {
+                    onChoose?.(getSelectedIDs());
+                    onClose?.();
+                } }, onSelectionChanged: (e) => { setSelectedItems(e.selectedRowsData); }, onToolbarPreparing: (e) => { e.toolbarOptions.items.forEach((item) => { if (item.name === "searchPanel")
+                    item.location = "before"; }); }, children: [cellRenderIcon && _jsx(Column, { width: 30, allowResizing: false, allowFiltering: false, allowSorting: false, cellRender: cellRenderIcon }, 0), showDefaultColumns && _jsx(Column, { dataField: "id", visible: showId, dataType: 'number' }, 1), showDefaultColumns && _jsx(Column, { dataField: SDK_Globals.useLocalizedName && manageUseLocalizedName ? "nameLoc" : "name", caption: SDKUI_Localizator.Name, dataType: 'string', defaultSortOrder: allowSorting ? "asc" : undefined, cellRender: cellRenderNameAndDesc }, 2), showDefaultColumns && _jsx(Column, { dataField: "description", dataType: 'string', caption: SDKUI_Localizator.Description, cellRender: cellRenderNameAndDesc }, 3), columns, allowGrouping && _jsx(Grouping, { autoExpandAll: false, expandMode: 'rowClick' }), _jsx(HeaderFilter, { visible: true }), _jsx(Selection, { mode: allowMultipleSelection ? "multiple" : "single", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(Scrolling, { mode: "virtual", useNative: SDKUI_Globals.dataGridUseNativeScrollbar }), _jsx(LoadPanel, { enabled: true }), _jsx(SearchPanel, { visible: true }), _jsx(Paging, { pageSize: 100 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsxs(Summary, { children: [_jsx(TotalItem, { column: SDK_Globals.useLocalizedName && manageUseLocalizedName ? "nameLoc" : "name", summaryType: "count" }), summaryItems] })] }) }));
+};
+export default TMChooserForm;

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { AppModules, CultureIDs, ITopMediaSession, SessionDescriptor } from "@topconsultnpm/sdk-ts-beta";
+export declare const onChangeLanguage: (cultureID: CultureIDs) => void;
+export declare const useCultureID: ({ cultureID }: {
+    cultureID: CultureIDs;
+}) => CultureIDs;
+export type TMEndpointsType = {
+    Description: string;
+    URL: string;
+    isDefault?: 0 | 1;
+};
+interface ITMLoginFormProps {
+    sdInput?: SessionDescriptor;
+    endpoints: TMEndpointsType[];
+    appModule: AppModules;
+    onLogged: (tmSession: ITopMediaSession) => void;
+    onChangeLanguage?: (e: CultureIDs) => void;
+    cultureID?: CultureIDs;
+}
+export declare const cultureIDsDataSource: {
+    value: CultureIDs;
+    display: string;
+}[];
+declare const TMLoginForm: React.FunctionComponent<ITMLoginFormProps>;
+export declare const TMChangePassword: ({ tmSession, username, onClose, enable, hasBack }: {
+    hasBack?: boolean;
+    tmSession?: ITopMediaSession;
+    username: string;
+    onClose?: () => void;
+    enable?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TMLoginForm;