@topconsultnpm/sdkui-react-beta 6.7.25 → 6.7.27

package/lib/components/forms/TMLoginPopupSaveLoginInfo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Accordion, LoadIndicator, Popup } from "devextreme-react";
+import { Accordion, LoadIndicator, Popup, SelectBox } from "devextreme-react";
 import { cultureIDsDataSource, LOGIN_HISTORY_KEY, } from "./TMLoginForm";
 import { LocalStorageService, ResultTypes, SDK_Localizator, ValidationItem } from "@topconsultnpm/sdk-ts-beta";
 import { Item } from "devextreme-react/cjs/accordion";
@@ -18,6 +18,7 @@ const TMLoginPopupSaveLoginInfo = (props) => {
     const [searchText, setSearchText] = useState('');
     // State to store selected items of type ITMLoginHistory
     const [selectedItems, setSelectedItems] = useState([]);
+    const [selectedImportExportOption, setSelectedImportExportOption] = useState('');
     // Retrieve the login history from local storage, sort by 'name', and return the sorted array (or an empty array if not found)
     const getSortedLoginHistory = () => {
         const loginHistory = LocalStorageService.getItem(LOGIN_HISTORY_KEY);
@@ -102,8 +103,98 @@ const TMLoginPopupSaveLoginInfo = (props) => {
         setSearchText('');
         hidePopup();
     };
-    // Render a title with a "Switch User" label and a close button styled as an icon
-    const titleRender = () => (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }, children: [_jsx("h3", { children: SDKUI_Localizator.SwitchUser }), _jsx("button", { style: { background: 'none', border: 'none', fontSize: '16px', cursor: 'pointer' }, onClick: hidePopup, children: _jsx("i", { style: { fontSize: 20 }, className: "dx-icon-remove" }) })] }));
+    /**
+     * Handles the click event for import/export functionality.
+     * - For 'import': Opens a file input dialog, reads the selected file,
+     *   parses the content, and updates the application state.
+     * - For 'export': Exports the current login history to a timestamped file.
+    */
+    const onImportExportItemClick = (e) => {
+        // Inner function to create a file input element: creates a file input element, configures it to accept a specific file type, and triggers a callback when a file is selected.
+        const createFileInput = (accept, onChange) => {
+            const input = document.createElement("input");
+            input.type = "file";
+            input.accept = accept;
+            input.addEventListener('change', (event) => {
+                const file = event.target.files?.[0];
+                if (file)
+                    onChange(file);
+            });
+            input.click();
+        };
+        // Inner function to handle file reading and parsing: reads and parses a file's content as JSON, handling success and error cases.
+        const handleFileRead = (file, onSuccess, onError) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                try {
+                    const fileContent = reader.result;
+                    const parsedData = JSON.parse(fileContent);
+                    onSuccess(parsedData);
+                }
+                catch (error) {
+                    onError();
+                }
+            };
+            reader.readAsText(file);
+        };
+        // Inner function to generate modified data by appending new IDs and timestamp: generates a modified version of the parsed data by assigning new IDs, and appending timestamped names to each entry.
+        const generateModifiedData = (parsedData, existingHistory) => {
+            const maxId = Math.max(...existingHistory.map(item => Number(item.id) || 0), 0);
+            return parsedData.map((item, index) => {
+                const id = maxId + index + 1;
+                const currentDate = new Date();
+                const formattedDate = currentDate.toISOString().split('T')[0];
+                const time = currentDate.toTimeString().split(' ')[0];
+                return {
+                    ...item,
+                    name: `${item.name}_${formattedDate}_${time}`,
+                    id,
+                    preferred: false
+                };
+            });
+        };
+        // Inner function to update the application state with new history data: updates the application's history state with the new data and stores it in local storage.
+        const updateHistoryState = (newData) => {
+            setHistoryState((prevState) => {
+                const updatedHistory = {
+                    loginHistory: [...prevState.loginHistory, ...newData],
+                    searchedLoginHistory: [...prevState.searchedLoginHistory, ...newData],
+                };
+                LocalStorageService.setItem(LOGIN_HISTORY_KEY, updatedHistory.loginHistory);
+                return { ...prevState, ...updatedHistory };
+            });
+        };
+        // Inner function to export data as a file with a generated filename: exports the provided data to a file, generating a filename with a timestamp
+        const exportToFile = (data, filenamePrefix) => {
+            const file = new Blob([JSON.stringify(data, null, 2)], { type: 'text/plain' });
+            const element = document.createElement("a");
+            const currentDate = new Date();
+            const dateString = currentDate.toISOString().split('T')[0]; // YYYY-MM-DD
+            const timeString = currentDate.toISOString().split('T')[1].split('.')[0].substring(0, 5); // HH:MM
+            element.href = URL.createObjectURL(file);
+            element.download = `${filenamePrefix}_${dateString}_${timeString}.txt`;
+            document.body.appendChild(element);
+            element.click();
+            document.body.removeChild(element);
+        };
+        // Main event handling logic for import/export
+        if (!e?.itemData)
+            return;
+        if (e.itemData.value === 'import') {
+            createFileInput(".txt", (file) => {
+                handleFileRead(file, (parsedData) => {
+                    const modifiedData = generateModifiedData(parsedData, historyState.loginHistory);
+                    updateHistoryState(modifiedData);
+                }, () => alert(SDKUI_Localizator.ErrorParsingFileContent));
+            });
+        }
+        else if (e.itemData.value === 'export') {
+            exportToFile(historyState.searchedLoginHistory, "TopMedia_SURFER_LOGIN_HISTORY");
+        }
+        setSelectedImportExportOption(e.itemData.value);
+    };
+    // titleRender function returns JSX to render a header with user interface components for import/export and closing the popup
+    const titleRender = () => (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }, children: [_jsx("h3", { children: SDKUI_Localizator.SwitchUser }), _jsxs("div", { style: { marginLeft: 'auto', display: 'flex', alignItems: 'center' }, children: [_jsx(SelectBox, { items: [{ text: SDKUI_Localizator.Import, value: 'import', disabled: false }, { text: SDKUI_Localizator.Export, value: 'export', disabled: historyState.loginHistory.length === 0 }], placeholder: SDKUI_Localizator.ImportExport, onItemClick: onImportExportItemClick, value: selectedImportExportOption, valueExpr: "value", displayExpr: "text" }), _jsx("button", { style: { background: 'none', border: 'none', fontSize: '16px', cursor: 'pointer', marginLeft: '10px' }, onClick: hidePopup, children: _jsx("i", { style: { fontSize: 20 }, className: "dx-icon-remove" }) })] })] }));
     // Render a styled title with its ID and title content, using flex layout
     const itemTitleRender = (titleObj, id) => {
         const historyItem = historyState.loginHistory.find(item => item.name === titleObj.title);
@@ -117,7 +208,7 @@ const TMLoginPopupSaveLoginInfo = (props) => {
         if (historyState.searchedLoginHistory.length === 0) {
             return (_jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", textAlign: "center", padding: "20px" }, children: SDKUI_Localizator.NoCredentialsSaved }));
         }
-        return (_jsx("div", { style: { overflowY: "auto", maxHeight: "calc(100% - 60px)", padding: "10px" }, children: _jsx(Accordion, { selectedItems: selectedItems, onSelectionChanged: onSelectionChanged, collapsible: true, multiple: false, animationDuration: 300, noDataText: SDKUI_Localizator.NoCredentialsSaved, style: { border: "1px solid #ddd", borderRadius: "6px", boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)" }, children: historyState.searchedLoginHistory.map((data, index) => (_jsx(Item, { titleRender: (titleObj) => itemTitleRender(titleObj, index), title: data.name, children: _jsx(TMLoginItemTemplate, { data: data, reloadHistoryState: reloadHistoryState, fillLoginForm: fillLoginForm, deleteItemFromLocalStorage: deleteItemFromLocalStorage, setSelectedItems: setSelectedItems, setSearchText: setSearchText, historyState: historyState }) }, data.id))) }) }));
+        return (_jsx("div", { style: { overflowY: "auto", maxHeight: "calc(100% - 60px)", padding: "10px" }, children: _jsx(Accordion, { selectedItems: selectedItems, onSelectionChanged: onSelectionChanged, collapsible: true, multiple: false, animationDuration: 300, noDataText: SDKUI_Localizator.NoCredentialsSaved, style: { border: "1px solid #ddd", borderRadius: "6px", boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)" }, children: historyState.searchedLoginHistory.map((data, index) => (_jsx(Item, { titleRender: (titleObj) => itemTitleRender(titleObj, index + 1), title: data.name, children: _jsx(TMLoginItemTemplate, { data: data, reloadHistoryState: reloadHistoryState, fillLoginForm: fillLoginForm, deleteItemFromLocalStorage: deleteItemFromLocalStorage, setSelectedItems: setSelectedItems, setSearchText: setSearchText, historyState: historyState }) }, data.id))) }) }));
     };
     return (_jsxs(Popup, { maxWidth: 600, visible: visible, onHiding: closePopup, title: SDKUI_Localizator.SwitchUser, titleRender: titleRender, hideOnOutsideClick: false, showTitle: true, resizeEnabled: true, dragEnabled: true, showCloseButton: true, children: [_jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", position: "sticky", top: 0, backgroundColor: "#fff", zIndex: 1, padding: "10px 0" }, children: _jsx(TMSearchBar, { maxWidth: "200px", marginLeft: "0px", onSearchValueChanged: (e) => setSearchText(e), searchValue: searchText }) }), renderPopupContent()] }));
 };

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

@@ -1,17 +1,32 @@
 import React from 'react';
 import { FormModes, ITMSaveFormBaseProps } from '../../ts/types';
+import { ButtonStyle } from '../base/TMButton';
 declare const TMSaveForm: React.FC<ITMSaveFormBaseProps>;
 export default TMSaveForm;
-export declare const TMSaveFormStandardToolbar: ({ btnStyle, formMode, hasNavigation, isModified, errorsCount, onNext, onPrev, canNext, canPrev, onSaveAsync, onUndo }: {
-    btnStyle: 'normal' | 'toolbar' | 'icon' | 'text';
+interface ITMSaveFormButtonBase {
+    btnStyle: ButtonStyle;
+    iconColor?: string;
     formMode: FormModes;
-    hasNavigation: boolean;
     isModified: boolean;
+}
+interface ITMSaveFormButtonPreviousProps extends ITMSaveFormButtonBase {
+    canPrev?: boolean;
+    onPrev?: () => void;
+    onSaveAsync?: () => Promise<void>;
+}
+export declare const TMSaveFormButtonPrevious: ({ btnStyle, formMode, isModified, onPrev, canPrev, iconColor, onSaveAsync }: ITMSaveFormButtonPreviousProps) => import("react/jsx-runtime").JSX.Element;
+interface ITMSaveFormButtonNextProps extends ITMSaveFormButtonBase {
+    canNext?: boolean;
+    onNext?: () => void;
+    onSaveAsync?: () => Promise<void>;
+}
+export declare const TMSaveFormButtonNext: ({ btnStyle, formMode, isModified, onNext, canNext, iconColor, onSaveAsync }: ITMSaveFormButtonNextProps) => import("react/jsx-runtime").JSX.Element;
+interface ITMSaveFormButtonSaveProps extends ITMSaveFormButtonBase {
     errorsCount: number;
-    onNext?: (() => void) | undefined;
-    onPrev?: (() => void) | undefined;
-    canNext?: boolean | undefined;
-    canPrev?: boolean | undefined;
-    onSaveAsync?: (() => Promise<void>) | undefined;
-    onUndo?: (() => void) | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+    onSaveAsync?: () => Promise<void>;
+}
+export declare const TMSaveFormButtonSave: ({ btnStyle, errorsCount, isModified, iconColor, onSaveAsync }: ITMSaveFormButtonSaveProps) => import("react/jsx-runtime").JSX.Element;
+interface ITMSaveFormButtonUndoProps extends ITMSaveFormButtonBase {
+    onUndo?: () => void;
+}
+export declare const TMSaveFormButtonUndo: ({ btnStyle, isModified, iconColor, onUndo }: ITMSaveFormButtonUndoProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/forms/TMSaveForm.js

@@ -105,16 +105,10 @@ const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipI
             : renderSaveForm() }));
 };
 export default TMSaveForm;
-export const TMSaveFormStandardToolbar = ({ btnStyle, formMode, hasNavigation, isModified, errorsCount, onNext, onPrev, canNext, canPrev, onSaveAsync, onUndo }) => {
-    const doSaveAsync = async () => { try {
-        await onSaveAsync?.();
-    }
-    catch (ex) {
-        TMExceptionBoxManager.show({ exception: ex });
-    } };
-    const doNext = () => {
+export const TMSaveFormButtonPrevious = ({ btnStyle, formMode, isModified, onPrev, canPrev, iconColor, onSaveAsync }) => {
+    const doPrev = () => {
         if (!isModified) {
-            onNext?.();
+            onPrev?.();
             return;
         }
         TMMessageBoxManager.show({
@@ -125,7 +119,7 @@ export const TMSaveFormStandardToolbar = ({ btnStyle, formMode, hasNavigation, i
                         return;
                     if (e == ButtonNames.YES)
                         await onSaveAsync?.();
-                    onNext?.();
+                    onPrev?.();
                 }
                 catch (ex) {
                     TMExceptionBoxManager.show({ exception: ex });
@@ -133,9 +127,12 @@ export const TMSaveFormStandardToolbar = ({ btnStyle, formMode, hasNavigation, i
             }
         });
     };
-    const doPrev = () => {
+    return (_jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Previous, icon: _jsx(IconArrowUp, { color: iconColor }), disabled: !canPrev || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doPrev }));
+};
+export const TMSaveFormButtonNext = ({ btnStyle, formMode, isModified, onNext, canNext, iconColor, onSaveAsync }) => {
+    const doNext = () => {
         if (!isModified) {
-            onPrev?.();
+            onNext?.();
             return;
         }
         TMMessageBoxManager.show({
@@ -146,7 +143,7 @@ export const TMSaveFormStandardToolbar = ({ btnStyle, formMode, hasNavigation, i
                         return;
                     if (e == ButtonNames.YES)
                         await onSaveAsync?.();
-                    onPrev?.();
+                    onNext?.();
                 }
                 catch (ex) {
                     TMExceptionBoxManager.show({ exception: ex });
@@ -154,5 +151,17 @@ export const TMSaveFormStandardToolbar = ({ btnStyle, formMode, hasNavigation, i
             }
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Save, icon: _jsx(IconSave, { color: btnStyle === 'icon' ? 'white' : undefined }), keyGesture: "alt+s", backgroundColor: errorsCount > 0 ? TMColors.error : isModified ? TMColors.success : TMColors.disabled, onClick: doSaveAsync, color: "success", disabled: !(isModified && errorsCount <= 0) }), hasNavigation && _jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Previous, icon: _jsx(IconArrowUp, { color: btnStyle === 'icon' ? 'white' : undefined }), disabled: !canPrev || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doPrev }), hasNavigation && _jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Next, icon: _jsx(IconArrowDown, { color: btnStyle === 'icon' ? 'white' : undefined }), disabled: !canNext || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doNext }), _jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, { color: btnStyle === 'icon' ? 'white' : undefined }), keyGesture: "alt+z", color: "tertiary", disabled: !isModified, onClick: onUndo })] }));
+    return (_jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Next, icon: _jsx(IconArrowDown, { color: iconColor }), disabled: !canNext || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doNext }));
+};
+export const TMSaveFormButtonSave = ({ btnStyle, errorsCount, isModified, iconColor, onSaveAsync }) => {
+    const doSaveAsync = async () => { try {
+        await onSaveAsync?.();
+    }
+    catch (ex) {
+        TMExceptionBoxManager.show({ exception: ex });
+    } };
+    return (_jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Save, icon: _jsx(IconSave, { color: iconColor }), keyGesture: "alt+s", backgroundColor: errorsCount > 0 ? TMColors.error : isModified ? TMColors.success : TMColors.disabled, onClick: doSaveAsync, color: "success", disabled: !(isModified && errorsCount <= 0) }));
+};
+export const TMSaveFormButtonUndo = ({ btnStyle, isModified, iconColor, onUndo }) => {
+    return (_jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, { color: iconColor }), keyGesture: "alt+z", color: "tertiary", disabled: !isModified, onClick: onUndo }));
 };