@topconsultnpm/sdkui-react-beta 6.7.25 → 6.7.26

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("Error parsing the file content. Ensure the file is in the correct format."));
+            });
+        }
+        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);

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

@@ -3,15 +3,15 @@ import { FormModes, ITMSaveFormBaseProps } from '../../ts/types';
 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';
+    btnStyle: "normal" | "toolbar" | "icon" | "text";
     formMode: FormModes;
     hasNavigation: boolean;
     isModified: boolean;
     errorsCount: number;
-    onNext?: (() => void) | undefined;
-    onPrev?: (() => void) | undefined;
-    canNext?: boolean | undefined;
-    canPrev?: boolean | undefined;
-    onSaveAsync?: (() => Promise<void>) | undefined;
-    onUndo?: (() => void) | undefined;
+    onNext?: () => void;
+    onPrev?: () => void;
+    canNext?: boolean;
+    canPrev?: boolean;
+    onSaveAsync?: () => Promise<void>;
+    onUndo?: () => void;
 }) => import("react/jsx-runtime").JSX.Element;