@topconsultnpm/sdkui-react-beta 6.7.24 → 6.7.26

package/lib/components/editors/TMMetadataEditor.d.ts

@@ -14,9 +14,10 @@ interface ITMMetadataEditorProps {
     validationItems?: ValidationItem[];
     hasLabel?: boolean;
     readOnly?: boolean;
+    isModifiedWhen?: boolean;
     onValueChanged?: (value: any) => void;
     onValueChange?: (value: any) => void;
     onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
 }
-declare const TMMetadataEditor: ({ hasLabel, readOnly, tid, mid, value, queryParamsDynDataList, containerElement, allowMultipleSelection, autoFocus, showAsText, showAsNumber, validationItems, disabled, onValueChanged, onValueChange, onCascadeRefreshDynDataLists }: ITMMetadataEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMMetadataEditor: ({ isModifiedWhen, hasLabel, readOnly, tid, mid, value, queryParamsDynDataList, containerElement, allowMultipleSelection, autoFocus, showAsText, showAsNumber, validationItems, disabled, onValueChanged, onValueChange, onCascadeRefreshDynDataLists }: ITMMetadataEditorProps) => import("react/jsx-runtime").JSX.Element;
 export default TMMetadataEditor;

package/lib/components/editors/TMMetadataEditor.js

@@ -10,7 +10,7 @@ import TMUserChooser from '../choosers/TMUserChooser';
 import TMDateBox from './TMDateBox';
 import TMTextBox from './TMTextBox';
 import { TMMetadataIcon } from '../viewers/TMMidViewer';
-const TMMetadataEditor = ({ hasLabel = false, readOnly, tid, mid, value, queryParamsDynDataList, containerElement, allowMultipleSelection, autoFocus, showAsText, showAsNumber, validationItems = [], disabled = false, onValueChanged, onValueChange, onCascadeRefreshDynDataLists }) => {
+const TMMetadataEditor = ({ isModifiedWhen = false, hasLabel = false, readOnly, tid, mid, value, queryParamsDynDataList, containerElement, allowMultipleSelection, autoFocus, showAsText, showAsNumber, validationItems = [], disabled = false, onValueChanged, onValueChange, onCascadeRefreshDynDataLists }) => {
     const [md, setMd] = useState();
     useEffect(() => {
         DcmtTypeListCacheService.GetAsync(tid).then((dtd) => {
@@ -19,36 +19,36 @@ const TMMetadataEditor = ({ hasLabel = false, readOnly, tid, mid, value, queryPa
     }, [mid]);
     let btnDistincValues = { text: 'Valori distinti', icon: _jsx(IconLayerGroup, { fontSize: 16 }), onClick: () => { ShowAlert({ message: "TODO Valori distinti", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } };
     if (value?.startsWith("{@QueryParam") || value == "{@UserName}" || value == "{@UserID}")
-        return _jsx(TMTextBox, { readOnly: readOnly, label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', maxLength: md?.length, autoFocus: autoFocus, value: value || '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+        return _jsx(TMTextBox, { isModifiedWhen: isModifiedWhen, readOnly: readOnly, label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', maxLength: md?.length, autoFocus: autoFocus, value: value || '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
     if (md?.dataDomain == MetadataDataDomains.DynamicDataList)
-        return _jsx(TMDynDataListItemChooser, { label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, md: md, tid: tid, buttons: [btnDistincValues], queryParamsDynDataList: queryParamsDynDataList, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, allowMultipleSelection: allowMultipleSelection, values: value ? [value] : [], showClearButton: true, onValueChanged: (IDs) => {
+        return _jsx(TMDynDataListItemChooser, { isModifiedWhen: isModifiedWhen, label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, md: md, tid: tid, buttons: [btnDistincValues], queryParamsDynDataList: queryParamsDynDataList, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, allowMultipleSelection: allowMultipleSelection, values: value ? [value] : [], showClearButton: true, onValueChanged: (IDs) => {
                 if (!IDs || IDs.length <= 0)
                     onValueChanged?.(undefined);
                 else
                     onValueChanged?.(IDs[0]);
             } });
     if (md?.dataDomain == MetadataDataDomains.DataList)
-        return _jsx(TMDataListItemChooser, { label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, dataListId: md.dataListID, allowMultipleSelection: allowMultipleSelection, values: value?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], showClearButton: true, buttons: [btnDistincValues], onValueChanged: (IDs) => {
+        return _jsx(TMDataListItemChooser, { isModifiedWhen: isModifiedWhen, label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, dataListId: md.dataListID, allowMultipleSelection: allowMultipleSelection, values: value?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], showClearButton: true, buttons: [btnDistincValues], onValueChanged: (IDs) => {
                 if (!IDs || IDs.length <= 0)
                     onValueChanged?.(undefined);
                 else
                     onValueChanged?.(IDs.join(","));
             } });
     if (md?.dataDomain == MetadataDataDomains.UserID)
-        return _jsx(TMUserChooser, { label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, placeHolder: " ", showClearButton: true, allowMultipleSelection: allowMultipleSelection, values: value?.split(',').map((item) => !item.startsWith("'") ? Number(item) : Number(item.slice(1, -1))) ?? [], buttons: [btnDistincValues], onValueChanged: (IDs) => {
+        return _jsx(TMUserChooser, { isModifiedWhen: isModifiedWhen, label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, placeHolder: " ", showClearButton: true, allowMultipleSelection: allowMultipleSelection, values: value?.split(',').map((item) => !item.startsWith("'") ? Number(item) : Number(item.slice(1, -1))) ?? [], buttons: [btnDistincValues], onValueChanged: (IDs) => {
                 if (!IDs || IDs.length <= 0)
                     onValueChanged?.(undefined);
                 else
                     onValueChanged?.(IDs.join(","));
             } });
     if (showAsText)
-        return _jsx(TMTextBox, { readOnly: readOnly, label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', buttons: [btnDistincValues], showClearButton: true, maxLength: md?.length, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+        return _jsx(TMTextBox, { isModifiedWhen: isModifiedWhen, readOnly: readOnly, label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', buttons: [btnDistincValues], showClearButton: true, maxLength: md?.length, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
     if (showAsNumber)
-        return _jsx(TMTextBox, { readOnly: readOnly, label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: true, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+        return _jsx(TMTextBox, { isModifiedWhen: isModifiedWhen, readOnly: readOnly, label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: true, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
     switch (md?.dataType) {
-        case MetadataDataTypes.DateTime: return _jsx(TMDateBox, { readOnly: readOnly, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, label: hasLabel ? md?.nameLoc : undefined, validationItems: validationItems, disabled: disabled, width: '100%', value: value, buttons: [btnDistincValues], showClearButton: true, useDateSerializationFormat: true, containerElement: containerElement, onValueChange: (newValue) => { onValueChange?.(newValue ? newValue.toString() : undefined); onValueChanged?.(newValue ? newValue.toString() : undefined); } });
-        case MetadataDataTypes.Number: return _jsx(TMTextBox, { readOnly: readOnly, label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', buttons: [btnDistincValues], showClearButton: true, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
-        default: return _jsx(TMTextBox, { readOnly: readOnly, label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, disabled: disabled, validationItems: validationItems, type: 'text', elementStyle: { width: '100%' }, showClearButton: true, buttons: [btnDistincValues], autoFocus: autoFocus, maxLength: md?.length, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); } });
+        case MetadataDataTypes.DateTime: return _jsx(TMDateBox, { isModifiedWhen: isModifiedWhen, readOnly: readOnly, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, label: hasLabel ? md?.nameLoc : undefined, validationItems: validationItems, disabled: disabled, width: '100%', value: value, buttons: [btnDistincValues], showClearButton: true, useDateSerializationFormat: true, containerElement: containerElement, onValueChange: (newValue) => { onValueChange?.(newValue ? newValue.toString() : undefined); onValueChanged?.(newValue ? newValue.toString() : undefined); } });
+        case MetadataDataTypes.Number: return _jsx(TMTextBox, { isModifiedWhen: isModifiedWhen, readOnly: readOnly, label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', buttons: [btnDistincValues], showClearButton: true, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+        default: return _jsx(TMTextBox, { isModifiedWhen: isModifiedWhen, readOnly: readOnly, label: hasLabel ? md?.nameLoc : undefined, icon: hasLabel ? _jsx(TMMetadataIcon, { md: md, tid: tid }) : undefined, disabled: disabled, validationItems: validationItems, type: 'text', elementStyle: { width: '100%' }, showClearButton: true, buttons: [btnDistincValues], autoFocus: autoFocus, maxLength: md?.length, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); } });
     }
 };
 export default TMMetadataEditor;

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

@@ -17,6 +17,7 @@ export interface ITMLoginHistory {
     username: string;
     language: CultureIDs;
     onBehalfUsername: string;
+    preferred: boolean;
 }
 export type TMEndpointsType = {
     Description: string;

package/lib/components/forms/TMLoginForm.js

@@ -117,6 +117,28 @@ const TMLoginForm = (props) => {
     const [saveLoginInfo, setSaveLoginInfo] = useState(false);
     const [saveLoginInfoName, setSaveLoginInfoName] = useState("");
     const [loginHistory, setLoginHistory] = useState(LocalStorageService.getItem(LOGIN_HISTORY_KEY) ?? []);
+    const [preferredLoginItem, setPreferredLoginItem] = useState(undefined);
+    useEffect(() => {
+        if (props.saveLoginHistoryToLocalStorage && loginHistory.length > 0) {
+            setPreferredLoginItem(loginHistory.find(item => item.preferred));
+        }
+    }, []);
+    useEffect(() => {
+        if (props.saveLoginHistoryToLocalStorage && preferredLoginItem !== undefined) {
+            setEndpoint(preferredLoginItem.endpoint);
+            setArchive(preferredLoginItem.archive);
+            setUsername(preferredLoginItem.username);
+            setPassword("");
+            setAuthMode(preferredLoginItem.authenticationMode);
+            setDomain(preferredLoginItem.domain);
+            setDomainArternative(preferredLoginItem.domainAlternative);
+            setOnBeHalfUsername(preferredLoginItem.onBehalfUsername);
+            setOnBeHalfPassword("");
+            if (props.onChangeLanguage) {
+                props.onChangeLanguage(preferredLoginItem.language);
+            }
+        }
+    }, [preferredLoginItem]);
     useEffect(() => {
         let interval;
         if (recoveryPasswordState.step === 2 && wait > 0) {
@@ -141,7 +163,7 @@ const TMLoginForm = (props) => {
     useEffect(() => {
         setEndpoints(props.endpoints);
         if (props.sdInput) {
-            if (props.sdInput.userName)
+            if (props.sdInput.userName && preferredLoginItem === undefined)
                 setUsername(props.sdInput.userName);
         }
     }, []);
@@ -696,6 +718,7 @@ const TMLoginForm = (props) => {
                         username: username,
                         language: props.cultureID ?? CultureIDs.None,
                         onBehalfUsername: onBehalfUsername,
+                        preferred: false
                     };
                     updateLoginHistory(loginHistoryNewEntry);
                 }

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

@@ -25,5 +25,9 @@ interface TMLoginItemTemplateProps {
     deleteItemFromLocalStorage: (name: string) => void;
     setSelectedItems: React.Dispatch<React.SetStateAction<ITMLoginHistory[]>>;
     setSearchText: React.Dispatch<React.SetStateAction<string>>;
+    historyState: {
+        loginHistory: Array<ITMLoginHistory>;
+        searchedLoginHistory: Array<ITMLoginHistory>;
+    };
 }
 export declare const TMLoginItemTemplate: React.FC<TMLoginItemTemplateProps>;

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";
@@ -9,6 +9,7 @@ import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../base
 import TMTooltip from "../base/TMTooltip";
 import TMTextBox from "../editors/TMTextBox";
 import { TMSearchBar } from "../sidebar/TMHeader";
+import TMCheckBox from "../editors/TMCheckBox";
 const TMLoginPopupSaveLoginInfo = (props) => {
     const { setLoginHistory, visible, hidePopup, setEndpoint, setArchive, setAuthMode, setUsername, setPassword, setDomain, setDomainArternative, setOnBeHalfUsername, setOnBeHalfPassword, onChangeLanguage } = props;
     // State to manage loading status
@@ -17,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);
@@ -101,11 +103,102 @@ 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) => {
-        return _jsxs("div", { style: { display: "flex", gap: "20px", fontFamily: "Arial, sans-serif" }, children: [_jsx("div", { style: { padding: "10px", border: "1px solid #ddd", borderRadius: "10px", }, children: id }), _jsx("div", { style: { padding: "10px", fontWeight: "bold", border: "1px solid #ddd", borderRadius: "10px", }, children: titleObj.title })] });
+        const historyItem = historyState.loginHistory.find(item => item.name === titleObj.title);
+        return _jsxs("div", { style: { display: "flex", gap: "20px", fontFamily: "Arial, sans-serif" }, children: [_jsx("div", { style: { padding: "10px", border: "1px solid #ddd", borderRadius: "10px", }, children: id }), _jsx("div", { style: { padding: "10px", fontWeight: "bold", border: "1px solid #ddd", borderRadius: "10px", }, children: titleObj.title }), historyItem?.preferred && _jsx(TMTooltip, { position: "right", content: SDKUI_Localizator.SetAsFavorite, children: _jsx("div", { style: { padding: "10px", border: "1px solid #ddd", borderRadius: "10px", }, children: _jsx("i", { className: "dx-icon-favorites" }) }) })] });
     };
     // Conditionally render popup content based on loading state, available login history, or display login items in an accordion
     const renderPopupContent = () => {
@@ -115,17 +208,19 @@ 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 }) }, 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), 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()] }));
 };
 export default TMLoginPopupSaveLoginInfo;
 export const TMLoginItemTemplate = (props) => {
-    const { data, fillLoginForm, reloadHistoryState, deleteItemFromLocalStorage, setSelectedItems, setSearchText } = props;
+    const { data, fillLoginForm, reloadHistoryState, deleteItemFromLocalStorage, setSelectedItems, setSearchText, historyState } = props;
     const [name, setName] = useState(data.name);
+    const [preferred, setPreferred] = useState(data.preferred ?? false);
     const [error, setError] = useState(false);
     const [validationItems, setValidationItems] = useState([]);
-    const nameIsEqualToInitName = data.name.trim().toLowerCase() === name.trim().toLowerCase();
+    const isNameMatching = data.name.trim().toLowerCase() === name.trim().toLowerCase();
+    const isPreferredMatching = data.preferred === preferred;
     // Effect to handle validation side-effects (like setting error state)
     useEffect(() => {
         const validationsItems = getValidationItems();
@@ -133,19 +228,31 @@ export const TMLoginItemTemplate = (props) => {
         setError(validationsItems.length > 0); // Set error state based on validation result
     }, [name]); // Only re-run when 'name' changes
     // Update the login history item name in local storage if no errors and name is different from the initial name
-    const updateNameHandler = () => {
-        if (error || nameIsEqualToInitName)
+    const updateHandler = () => {
+        if (error || (isNameMatching && isPreferredMatching))
             return;
-        const dataToUpdate = { ...data, name };
-        LocalStorageService.updateItemByField(LOGIN_HISTORY_KEY, "name", data.name, dataToUpdate);
-        reloadHistoryState();
-        setSelectedItems([]);
-        setSearchText("");
+        if (!isNameMatching) {
+            const dataToUpdate = { ...data, name };
+            LocalStorageService.updateItemByField(LOGIN_HISTORY_KEY, "name", data.name, dataToUpdate);
+            reloadHistoryState();
+            setSelectedItems([]);
+            setSearchText("");
+        }
+        if (!isPreferredMatching) {
+            const historyStateUpdtated = historyState.loginHistory.map(history => {
+                if (history.name === data.name) {
+                    return { ...history, preferred };
+                }
+                return { ...history, preferred: false };
+            });
+            LocalStorageService.setItem(LOGIN_HISTORY_KEY, historyStateUpdtated);
+            reloadHistoryState();
+        }
     };
     // Validation logic function
     const getValidationItems = () => {
         const validationsArray = [];
-        if (nameIsEqualToInitName)
+        if (isNameMatching)
             return validationsArray;
         if (name.length === 0)
             validationsArray.push(new ValidationItem(ResultTypes.ERROR, 'saveLoginName', SDK_Localizator.RequiredField));
@@ -192,5 +299,5 @@ export const TMLoginItemTemplate = (props) => {
     const randomBGColor = getRandomColorFromText(data.name);
     // Determine the text color (black or white) based on background color luminance
     const textColor = getTextColor(randomBGColor);
-    return _jsxs("div", { style: { display: 'flex', background: '#fff', boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)', overflow: 'hidden', width: '100%', justifyContent: 'center', alignItems: 'center' }, children: [_jsx(TMTooltip, { content: data.name, children: _jsx("div", { style: { background: randomBGColor, color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '70px', maxHeight: '70px', borderRadius: '50%', fontWeight: 'bold', margin: '20px', textAlign: 'center' }, children: data.name.slice(0, 3).toUpperCase() }) }), _jsxs("div", { style: { padding: '2px', flex: 1 }, children: [_jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.NameForAccess, value: name, readOnly: false, buttons: [{ text: `${SDKUI_Localizator.Save}`, icon: _jsx("i", { style: { color: (error || nameIsEqualToInitName) ? "rgb(80,80,80)" : "#28a745", fontSize: 20 }, className: "dx-icon-save" }), onClick: updateNameHandler }], onValueChanged: (e) => setName(e.target.value), validationItems: validationItems }, "name"), (data.endpoint && data.endpoint?.Description) && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.Endpoint, value: data.endpoint.Description + (' (' + data.endpoint.URL + ')'), readOnly: true, onValueChanged: (e) => setName(e.target.value) }), (data.archive && data.archive?.description) && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.ArchiveID, value: data.archive.description + (' (' + (data.archive.id ?? '-') + ')'), readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.AuthMode, value: data.authenticationMode, readOnly: true }), data.domain.length > 0 && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.Domain, value: data.domain, readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.UserName, value: data.username, readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.CultureID, value: cultureIDsDataSource.find(item => item.value === data.language)?.display ?? '', readOnly: true }), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', marginTop: 10 }, children: [_jsx(TMTooltip, { content: "Login", children: _jsx("div", { onClick: () => { fillLoginForm(data); }, style: { backgroundColor: randomBGColor, color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', marginRight: '10px', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-login", style: { fontSize: '1.5em', color: textColor, cursor: 'pointer' } }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Save, children: _jsx("div", { onClick: () => { updateNameHandler(); }, style: { backgroundColor: (error || nameIsEqualToInitName) ? "rgb(80,80,80, 0.5)" : "#28a745", color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', marginRight: '10px', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-save", style: { fontSize: '1.5em', color: textColor, cursor: 'pointer' } }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Delete, children: _jsx("div", { onClick: () => { deleteItemFromLocalStorage(data.name); }, style: { backgroundColor: "#ff4d4f", display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-trash", style: { fontSize: '1.5em', color: getTextColor("#ff4d4f"), cursor: 'pointer' } }) }) })] })] })] });
+    return _jsxs("div", { style: { display: 'flex', background: '#fff', boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)', overflow: 'hidden', width: '100%', justifyContent: 'center', alignItems: 'center' }, children: [_jsx(TMTooltip, { content: data.name, children: _jsx("div", { style: { background: randomBGColor, color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '70px', maxHeight: '70px', borderRadius: '50%', fontWeight: 'bold', margin: '20px', textAlign: 'center' }, children: data.name.slice(0, 3).toUpperCase() }) }), _jsxs("div", { style: { padding: '2px', flex: 1 }, children: [_jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.NameForAccess, value: name, readOnly: false, buttons: [{ text: `${SDKUI_Localizator.Save}`, icon: _jsx("i", { style: { color: (error || (isNameMatching && isPreferredMatching)) ? "rgb(80,80,80)" : "#28a745", fontSize: 20 }, className: "dx-icon-save" }), onClick: updateHandler }], onValueChanged: (e) => setName(e.target.value), validationItems: validationItems }, "name"), (data.endpoint && data.endpoint?.Description) && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.Endpoint, value: data.endpoint.Description + (' (' + data.endpoint.URL + ')'), readOnly: true, onValueChanged: (e) => setName(e.target.value) }), (data.archive && data.archive?.description) && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.ArchiveID, value: data.archive.description + (' (' + (data.archive.id ?? '-') + ')'), readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.AuthMode, value: data.authenticationMode, readOnly: true }), data.domain.length > 0 && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.Domain, value: data.domain, readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.UserName, value: data.username, readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.CultureID, value: cultureIDsDataSource.find(item => item.value === data.language)?.display ?? '', readOnly: true }), _jsx(TMCheckBox, { elementStyle: { marginTop: 10, marginBottom: 10 }, labelPosition: "left", label: SDKUI_Localizator.SetAsFavorite, value: preferred, onValueChanged: (value) => { setPreferred(value); } }), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', marginTop: 10 }, children: [_jsx(TMTooltip, { content: "Login", children: _jsx("div", { onClick: () => { fillLoginForm(data); }, style: { backgroundColor: randomBGColor, color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', marginRight: '10px', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-login", style: { fontSize: '1.5em', color: textColor, cursor: 'pointer' } }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Save, children: _jsx("div", { onClick: () => { updateHandler(); }, style: { backgroundColor: (error || (isNameMatching && isPreferredMatching)) ? "rgb(80,80,80, 0.5)" : "#28a745", color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', marginRight: '10px', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-save", style: { fontSize: '1.5em', color: textColor, cursor: 'pointer' } }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Delete, children: _jsx("div", { onClick: () => { deleteItemFromLocalStorage(data.name); }, style: { backgroundColor: "#ff4d4f", display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-trash", style: { fontSize: '1.5em', color: getTextColor("#ff4d4f"), cursor: 'pointer' } }) }) })] })] })] });
 };

package/lib/helper/SDKUI_Localizator.d.ts

@@ -228,7 +228,10 @@ export declare class SDKUI_Localizator {
     static get DuplicateNameError(): "Der Name existiert bereits in der Anmeldehistorie. Bitte wählen Sie einen anderen Namen" | "The name already exists in the login history. Please choose a different nam" | "El nombre ya existe en el historial de inicio de sesión. Por favor, elija un nombre diferente" | "Le nom existe déjà dans l'historique de connexion. Veuillez choisir un autre nom" | "O nome já existe no histórico de login. Por favor, escolha um nome diferente" | "Il nome esiste già nella cronologia di accesso. Si prega di scegliere un nome diverso";
     static get EnterNameForAccess(): "Geben Sie einen Namen für den Zugriff ein" | "Enter a name for access" | "Introduzca un nombre para el acceso" | "Entrez un nom pour l'accès" | "Insira um nome para o acesso" | "Inserire un nome per l'accesso";
     static get NameForAccess(): "Name für den Zugang" | "Access name" | "Nombre para el acceso" | "Nom pour l'accès" | "Nome para o acesso" | "Nome per l'accesso";
-    static get PreferredAccessAtStartup(): "Bevorzugter Zugriff beim Start" | "Preferred access at startup" | "Acceso preferido al inicio" | "Accès préféré au démarrage" | "Acesso preferido na inicialização" | "Accesso preferito all'avvio";
+    static get SetAsFavorite(): "Als Favorit festlegen" | "Set as favorite" | "Establecer como favorito" | "Définir comme favori" | "Definir como favorito" | "Imposta come preferito";
     static get RememberCredentials(): "Anmeldedaten merken" | "Remember credentials" | "Recordar credenciales" | "Se souvenir des identifiants" | "Lembrar credenciais" | "Ricorda credenziali";
     static get SwitchUser(): "Benutzer wechseln" | "Switch user" | "Cambiar usuario" | "Changer d'utilisateur" | "Mudar de usuário" | "Cambia utente";
+    static get ImportExport(): "Importieren/Exportieren" | "Import/Export" | "Importar/Exportar" | "Importer/Exporter" | "Importa/Esporta";
+    static get Import(): "Importieren" | "Import" | "Importar" | "Importer" | "Importa";
+    static get Export(): "Exportieren" | "Export" | "Exportar" | "Exporter" | "Esporta";
 }

package/lib/helper/SDKUI_Localizator.js

@@ -2254,20 +2254,20 @@ export class SDKUI_Localizator {
                 return "Nome per l'accesso";
         }
     }
-    static get PreferredAccessAtStartup() {
+    static get SetAsFavorite() {
         switch (this._cultureID) {
             case CultureIDs.De_DE:
-                return "Bevorzugter Zugriff beim Start";
+                return "Als Favorit festlegen";
             case CultureIDs.En_US:
-                return "Preferred access at startup";
+                return "Set as favorite";
             case CultureIDs.Es_ES:
-                return "Acceso preferido al inicio";
+                return "Establecer como favorito";
             case CultureIDs.Fr_FR:
-                return "Accès préféré au démarrage";
+                return "Définir comme favori";
             case CultureIDs.Pt_PT:
-                return "Acesso preferido na inicialização";
+                return "Definir como favorito";
             default:
-                return "Accesso preferito all'avvio";
+                return "Imposta come preferito";
         }
     }
     static get RememberCredentials() {
@@ -2302,4 +2302,52 @@ export class SDKUI_Localizator {
                 return "Cambia utente";
         }
     }
+    static get ImportExport() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE:
+                return "Importieren/Exportieren";
+            case CultureIDs.En_US:
+                return "Import/Export";
+            case CultureIDs.Es_ES:
+                return "Importar/Exportar";
+            case CultureIDs.Fr_FR:
+                return "Importer/Exporter";
+            case CultureIDs.Pt_PT:
+                return "Importar/Exportar";
+            default:
+                return "Importa/Esporta";
+        }
+    }
+    static get Import() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE:
+                return "Importieren";
+            case CultureIDs.En_US:
+                return "Import";
+            case CultureIDs.Es_ES:
+                return "Importar";
+            case CultureIDs.Fr_FR:
+                return "Importer";
+            case CultureIDs.Pt_PT:
+                return "Importar";
+            default:
+                return "Importa"; // Italian
+        }
+    }
+    static get Export() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE:
+                return "Exportieren";
+            case CultureIDs.En_US:
+                return "Export";
+            case CultureIDs.Es_ES:
+                return "Exportar";
+            case CultureIDs.Fr_FR:
+                return "Exporter";
+            case CultureIDs.Pt_PT:
+                return "Exportar";
+            default:
+                return "Esporta"; // Italian
+        }
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.7.24",
+    "version": "6.7.26",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",