@topconsultnpm/sdkui-react-beta 6.8.52 → 6.8.53

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

@@ -39,11 +39,11 @@ export declare const cultureIDsDataSource: {
 }[];
 declare const TMLoginForm: React.FunctionComponent<ITMLoginFormProps>;
 export declare const TMChangePassword: ({ deviceType, tmSession, username, onClose, enable, hasBack }: {
-    deviceType?: DeviceType | undefined;
-    hasBack?: boolean | undefined;
-    tmSession?: ITopMediaSession | undefined;
+    deviceType?: DeviceType;
+    hasBack?: boolean;
+    tmSession?: ITopMediaSession;
     username: string;
-    onClose?: (() => void) | undefined;
-    enable?: boolean | undefined;
+    onClose?: () => void;
+    enable?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TMLoginForm;

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

@@ -31,12 +31,12 @@ interface TMItemTitleRender {
     reloadHistoryState: () => void;
     fillLoginForm: (data: ITMLoginHistory) => void;
     deleteItemFromLocalStorage: (name: string) => void;
+    setSearchText: React.Dispatch<React.SetStateAction<string>>;
 }
-export declare const TMItemTitleRender: (props: TMItemTitleRender) => import("react/jsx-runtime").JSX.Element | undefined;
+export declare const TMItemTitleRender: (props: TMItemTitleRender) => import("react/jsx-runtime").JSX.Element;
 interface TMLoginItemTemplateProps {
     data: ITMLoginHistory;
     reloadHistoryState: () => void;
-    setSelectedItems: React.Dispatch<React.SetStateAction<ITMLoginHistory[]>>;
     setSearchText: React.Dispatch<React.SetStateAction<string>>;
 }
 export declare const TMLoginItemTemplate: React.FC<TMLoginItemTemplateProps>;

package/lib/components/forms/TMLoginPopupSaveLoginInfo.js

@@ -1,24 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Accordion, Button, LoadIndicator, Popup } from "devextreme-react";
-import { cultureIDsDataSource, LOGIN_HISTORY_KEY, } from "./TMLoginForm";
+import { useEffect, useRef, useState } from "react";
+import { Button, LoadIndicator, Popup } from "devextreme-react";
+import { cultureIDsDataSource, LOGIN_HISTORY_KEY } from "./TMLoginForm";
 import { AuthenticationModes, LocalStorageService, ResultTypes, SDK_Localizator, ValidationItem } from "@topconsultnpm/sdk-ts-beta";
-import { Item } from "devextreme-react/cjs/accordion";
 import { SDKUI_Localizator } from "../../helper/SDKUI_Localizator";
 import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../base/TMPopUp";
 import TMTooltip from "../base/TMTooltip";
-import TMTextBox from "../editors/TMTextBox";
+import { IconApplyAndClose, IconCloseOutline, IconDelete, IconExport, IconImport, IconShow } from "../../helper";
 import { TMSearchBar } from "../sidebar/TMHeader";
-import { IconApplyAndClose, IconCloseOutline, IconDelete, IconExport, IconImport } from "../../helper";
 import TMButton from "../base/TMButton";
+import TMTextBox from "../editors/TMTextBox";
 const TMLoginPopupSaveLoginInfo = (props) => {
     const { setLoginHistory, visible, hidePopup, setEndpoint, setArchive, setAuthMode, setUsername, setPassword, setDomain, setDomainArternative, setOnBeHalfUsername, setOnBeHalfPassword, setLoadLoginInfoFromExternal, onChangeLanguage } = props;
     // State to manage loading status
     const [loading, setLoading] = useState(false);
     // State to store the search input text
     const [searchText, setSearchText] = useState('');
-    // State to store selected items of type ITMLoginHistory
-    const [selectedItems, setSelectedItems] = 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);
@@ -58,11 +55,6 @@ const TMLoginPopupSaveLoginInfo = (props) => {
             searchedLoginHistory: updatedLoginHistory,
         });
     };
-    // Update selected items with the last added item from the event (or an empty array if none were added)
-    const onSelectionChanged = (e) => {
-        const newItems = e.addedItems.length ? [e.addedItems[e.addedItems.length - 1]] : [];
-        setSelectedItems(newItems);
-    };
     // Populate the login form fields with data from the selected login history item
     const fillLoginForm = (data) => {
         setEndpoint(data.endpoint);
@@ -91,7 +83,6 @@ const TMLoginPopupSaveLoginInfo = (props) => {
                     LocalStorageService.deleteItemByField(LOGIN_HISTORY_KEY, "name", name);
                     setLoginHistory(LocalStorageService.getItem(LOGIN_HISTORY_KEY) ?? []);
                     reloadHistoryState();
-                    setSelectedItems([]);
                 }
                 catch (e) {
                     TMExceptionBoxManager.show({ exception: e });
@@ -200,19 +191,40 @@ 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, { id: "user-credentials-popup", selectedItems: selectedItems, onSelectionChanged: onSelectionChanged, collapsible: true, multiple: false, animationDuration: 300, noDataText: SDKUI_Localizator.NoCredentialsSaved, style: { border: "1px solid #ddd", borderRadius: "6px" }, children: historyState.searchedLoginHistory.map((data, index) => (_jsx(Item, { titleRender: (titleObj) => _jsx(TMItemTitleRender, { titleObj: titleObj, id: index + 1, historyState: historyState, reloadHistoryState: reloadHistoryState, fillLoginForm: fillLoginForm, deleteItemFromLocalStorage: deleteItemFromLocalStorage }), title: data.name, children: _jsx(TMLoginItemTemplate, { data: data, reloadHistoryState: reloadHistoryState, setSelectedItems: setSelectedItems, setSearchText: setSearchText }) }, data.id))) }) }));
+        return (_jsx("div", { style: { overflowY: "auto", maxHeight: "calc(100% - 60px)", padding: "0px 5px", margin: '0px 10px', border: "1px solid rgb(221, 221, 221)", borderRadius: '6px' }, children: historyState.searchedLoginHistory.map((data, index) => {
+                return _jsx(TMItemTitleRender, { titleObj: { title: data.name }, id: index + 1, historyState: historyState, reloadHistoryState: reloadHistoryState, fillLoginForm: fillLoginForm, deleteItemFromLocalStorage: deleteItemFromLocalStorage, setSearchText: setSearchText }, data.name + '-' + index);
+            }) }));
     };
     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: [_jsxs("div", { style: { padding: "10px", display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%", position: "sticky", top: 0, backgroundColor: "#fff", zIndex: 1, }, children: [_jsx("div", { style: { display: "flex", flex: 1 }, children: _jsx(TMSearchBar, { maxWidth: "200px", marginLeft: "0px", onSearchValueChanged: (e) => setSearchText(e), searchValue: searchText }) }), _jsxs("div", { style: { display: "flex", alignItems: "center", marginRight: "5px", gap: 8 }, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Export, children: _jsx(TMButton, { label: SDKUI_Localizator.Export, color: 'primary', btnStyle: 'toolbar', icon: _jsx(IconExport, {}), onClick: onExportCallback }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Import, children: _jsx(TMButton, { label: SDKUI_Localizator.Import, color: 'secondary', btnStyle: 'toolbar', icon: _jsx(IconImport, {}), onClick: onImportCallback }) })] })] }), renderPopupContent()] }));
 };
 export default TMLoginPopupSaveLoginInfo;
 // Render a styled title with its ID and title content, using flex layout
 export const TMItemTitleRender = (props) => {
-    const { titleObj, id, historyState, reloadHistoryState, fillLoginForm, deleteItemFromLocalStorage } = props;
+    const { titleObj, id, historyState, reloadHistoryState, fillLoginForm, deleteItemFromLocalStorage, setSearchText } = props;
     const historyItem = historyState.loginHistory.find(item => item.name === titleObj.title);
     const [preferred, setPreferred] = useState(historyItem?.preferred ?? false);
+    const [isSelected, setIsSelected] = useState(false);
+    const [showDetails, setShowDetails] = useState(false);
+    const containerRef = useRef(null);
+    const mobileBreakpoint = 768;
     const [isMobile, setIsMobile] = useState(false);
-    if (historyItem === undefined)
-        return;
+    useEffect(() => {
+        const updateDimensions = (entries) => {
+            for (let entry of entries) {
+                const { width } = entry.contentRect;
+                setIsMobile(width <= mobileBreakpoint);
+            }
+        };
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => {
+            if (containerRef.current) {
+                resizeObserver.unobserve(containerRef.current);
+            }
+        };
+    }, [containerRef]);
     useEffect(() => {
         const mediaQuery = window.matchMedia('(max-width: 768px)');
         const handleResize = () => {
@@ -225,9 +237,13 @@ export const TMItemTitleRender = (props) => {
         };
     }, []);
     useEffect(() => {
+        if (historyItem === undefined)
+            return;
         setPreferred(historyItem.preferred ?? false);
-    }, [historyItem.preferred]);
+    }, [historyItem?.preferred]);
     useEffect(() => {
+        if (historyItem === undefined)
+            return;
         if (preferred === historyItem.preferred)
             return;
         const historyStateUpdtated = historyState.loginHistory.map(history => {
@@ -239,6 +255,14 @@ export const TMItemTitleRender = (props) => {
         LocalStorageService.setItem(LOGIN_HISTORY_KEY, historyStateUpdtated);
         reloadHistoryState();
     }, [preferred]);
+    // Handle double-click to show the details component with a transition
+    const toogleShowDetails = (e) => {
+        if (e === undefined)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        setShowDetails(prevState => !prevState);
+    };
     const onPreferredCallback = (e) => {
         if (e === undefined || e.event === undefined)
             return;
@@ -259,18 +283,33 @@ export const TMItemTitleRender = (props) => {
             }
         });
     };
+    const handleMouseEnter = () => {
+        // Highlight the div on mouse enter
+        setIsSelected(true);
+    };
+    const handleMouseLeave = () => {
+        // Remove highlight when mouse leaves the div
+        setIsSelected(false);
+    };
     const onLoginCallback = (e) => {
-        if (e === undefined || e.event === undefined)
+        if (historyItem === undefined)
             return;
-        e.event.preventDefault();
-        e.event.stopPropagation();
+        if (e === undefined)
+            return;
+        // If it's a valid click on the parent div, proceed
+        e.preventDefault();
+        e.stopPropagation();
+        // Assuming fillLoginForm is a function that handles the form filling
         fillLoginForm(historyItem);
     };
     const onDeleteCallback = (e) => {
-        if (e === undefined || e.event === undefined)
+        if (historyItem === undefined)
             return;
-        e.event.preventDefault();
-        e.event.stopPropagation();
+        if (e === undefined)
+            return;
+        // If it's a valid click on the parent div, proceed
+        e.preventDefault();
+        e.stopPropagation();
         deleteItemFromLocalStorage(historyItem.name);
     };
     // Function to truncate title for mobile devices
@@ -279,13 +318,64 @@ export const TMItemTitleRender = (props) => {
     };
     // Function to truncate title for non-mobile devices
     const truncateForDesktop = (title) => {
-        return title.length > 50 ? `${title.substring(0, 50)}...` : title;
+        return title.length > 45 ? `${title.substring(0, 45)}...` : title;
     };
     const truncatedTitle = isMobile ? truncateForMobile(titleObj.title) : truncateForDesktop(titleObj.title);
-    return _jsxs("div", { style: { display: "block", fontFamily: "Arial, sans-serif", width: "100%", position: "relative", whiteSpace: "nowrap" }, children: [_jsx("div", { style: { display: "inline-block", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: isMobile ? "72%" : "85%", verticalAlign: "top" }, children: _jsxs("div", { style: { display: "inline-flex", alignItems: "center" }, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.SetAsFavorite, children: _jsxs("div", { style: { paddingTop: "5px", paddingBottom: "5px", paddingRight: "10px" }, children: [preferred && _jsx(Button, { width: 27, height: 27, style: { backgroundColor: '#EAD303', borderRadius: '50%', display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }, icon: "favorites", onClick: onPreferredCallback }), !preferred && _jsx(Button, { width: 27, height: 27, style: { backgroundColor: 'transparent', borderRadius: '50%', display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }, icon: "favorites", onClick: onPreferredCallback })] }) }), _jsx(TMTooltip, { content: titleObj.title, children: _jsxs("div", { style: { fontSize: isMobile ? "11px" : "12px" }, children: ["(", id, ")\u00A0", _jsx("span", { style: { fontWeight: "bold" }, children: truncatedTitle })] }) })] }) }), _jsx("div", { style: { display: "inline-block", position: "absolute", right: 0, textAlign: "right", verticalAlign: "top", whiteSpace: "nowrap" }, children: _jsxs("div", { style: { display: 'inline-flex', gap: '10px' }, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ApplyAndClose, children: _jsx(Button, { render: () => _jsx(IconApplyAndClose, { color: "#fff" }), width: 27, height: 27, style: { backgroundColor: '#6EB735', borderRadius: '50%', display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }, onClick: onLoginCallback }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Delete, children: _jsx(Button, { render: () => _jsx(IconDelete, { color: "#fff" }), width: 27, height: 27, style: { backgroundColor: '#ED153A', borderRadius: '50%', display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }, onClick: onDeleteCallback }) })] }) })] });
+    return _jsxs("div", { ref: containerRef, children: [_jsxs("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: onLoginCallback, style: {
+                    backgroundColor: isSelected ? '#F5F5F5' : 'transparent',
+                    display: "flex",
+                    fontFamily: "Arial, sans-serif",
+                    width: "100%",
+                    position: "relative",
+                    whiteSpace: "nowrap",
+                    cursor: "pointer",
+                    alignItems: "center",
+                    userSelect: "none",
+                    touchAction: "none",
+                    borderRadius: "4px",
+                    minHeight: "32px",
+                    padding: "6px 8px"
+                }, children: [_jsx("div", { style: { display: "inline-block", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: isMobile ? "72%" : "85%", verticalAlign: "top" }, children: _jsxs("div", { style: { display: "inline-flex", alignItems: "center" }, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.SetAsFavorite, children: _jsxs("div", { style: { paddingTop: "5px", paddingBottom: "5px", paddingRight: "10px" }, children: [preferred && _jsx(Button, { width: 27, height: 27, style: { backgroundColor: '#EAD303', borderRadius: '50%', display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }, icon: "favorites", onClick: onPreferredCallback }), !preferred && _jsx(Button, { width: 27, height: 27, style: { backgroundColor: 'transparent', borderRadius: '50%', display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }, icon: "favorites", onClick: onPreferredCallback })] }) }), _jsx(TMTooltip, { content: titleObj.title, children: _jsxs("div", { style: { fontSize: isMobile ? "11px" : "12px" }, children: ["(", id, ")\u00A0", _jsx("span", { style: { fontWeight: "bold" }, children: truncatedTitle })] }) })] }) }), _jsx("div", { style: { display: "inline-block", position: "absolute", right: 0, textAlign: "right", verticalAlign: "top", whiteSpace: "nowrap" }, children: _jsxs("div", { style: { display: 'inline-flex', gap: '10px' }, children: [isMobile && _jsx(TMTooltip, { content: SDKUI_Localizator.ApplyAndClose, children: _jsx("div", { onClick: onLoginCallback, onDoubleClick: (e) => { e.preventDefault(); e.stopPropagation(); }, style: {
+                                            width: 27,
+                                            height: 27,
+                                            backgroundColor: '#6EB735',
+                                            borderRadius: '50%',
+                                            display: 'inline-flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            cursor: 'pointer'
+                                        }, children: _jsx(IconApplyAndClose, { color: "#fff" }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.ShowDetails, children: _jsx("div", { onClick: toogleShowDetails, onDoubleClick: (e) => { e.preventDefault(); e.stopPropagation(); }, style: {
+                                            width: 27,
+                                            height: 27,
+                                            backgroundColor: '#2559A5',
+                                            borderRadius: '50%',
+                                            display: 'inline-flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            cursor: 'pointer'
+                                        }, children: _jsx(IconShow, { color: "#fff" }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Delete, children: _jsx("div", { onClick: onDeleteCallback, onDoubleClick: (e) => { e.preventDefault(); e.stopPropagation(); }, style: {
+                                            width: 27,
+                                            height: 27,
+                                            backgroundColor: '#ED153A',
+                                            borderRadius: '50%',
+                                            display: 'inline-flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            cursor: 'pointer'
+                                        }, children: _jsx(IconDelete, { color: "#fff" }) }) })] }) })] }), _jsx("div", { style: {
+                    marginTop: "10px",
+                    maxHeight: showDetails ? "500px" : "0", // Use max-height for transition
+                    opacity: showDetails ? 1 : 0,
+                    overflow: 'hidden',
+                    transition: showDetails ?
+                        'max-height 1s ease-in-out, opacity 1s ease-in-out' : // Slow transition for showing
+                        'max-height 0.5s ease-out, opacity 0.5s ease-out', // Fast transition for hiding
+                    transform: showDetails ? 'scaleY(1)' : 'scaleY(0)',
+                    transformOrigin: 'top', // Ensures the animation grows from top to bottom
+                }, children: _jsx(TMLoginItemTemplate, { data: historyItem, reloadHistoryState: reloadHistoryState, setSearchText: setSearchText }) })] });
 };
 export const TMLoginItemTemplate = (props) => {
-    const { data, reloadHistoryState, setSelectedItems, setSearchText } = props;
+    const { data, reloadHistoryState, setSearchText } = props;
     const [name, setName] = useState(data.name);
     const [error, setError] = useState(false);
     const [validationItems, setValidationItems] = useState([]);
@@ -304,7 +394,6 @@ export const TMLoginItemTemplate = (props) => {
             const dataToUpdate = { ...data, name };
             LocalStorageService.updateItemByField(LOGIN_HISTORY_KEY, "name", data.name, dataToUpdate);
             reloadHistoryState();
-            setSelectedItems([]);
             setSearchText("");
         }
     };