@topconsultnpm/sdkui-react 6.20.0-dev1.26 → 6.20.0-dev1.28

package/lib/components/forms/Login/LoginValidatorService.d.ts

@@ -3,6 +3,8 @@ import { TMEndpointsType } from './TMLoginForm';
 export interface LoginData {
     endpoint: TMEndpointsType;
     dcmtArchive: ArchiveDescriptor;
+    manualArchiveID?: string;
+    hasArchives?: boolean;
     authenticationMode: AuthenticationModes;
     username?: string;
     password?: string;

package/lib/components/forms/Login/LoginValidatorService.js

@@ -27,8 +27,13 @@ export class LoginValidator {
         if (!data.endpoint?.Description?.trim()) {
             addError("endpoint", SDKUI_Localizator.RequiredField);
         }
-        if (!data.dcmtArchive?.description?.trim()) {
-            addError("dcmtArchive", SDKUI_Localizator.RequiredField);
+        if (data.hasArchives) {
+            if (!data.dcmtArchive?.description?.trim()) {
+                addError("dcmtArchive", SDKUI_Localizator.RequiredField);
+            }
+        }
+        else if (!data.manualArchiveID?.trim()) {
+            addError("manualArchiveID", SDKUI_Localizator.RequiredField);
         }
         if (!data.authenticationMode || data.authenticationMode === AuthenticationModes.None) {
             addError("authenticationMode", SDKUI_Localizator.RequiredField);

package/lib/components/forms/Login/TMLoginForm.js

@@ -113,6 +113,7 @@ const TMLoginForm = (props) => {
     const [showCultureIDs, setShowCultureIDs] = useState(false);
     const [dcmtArchives, setDcmtArchives] = useState([]);
     const [dcmtArchive, setDcmtArchive] = useState();
+    const [manualArchiveID, setManualArchiveID] = useState('');
     const [authMode, setAuthMode] = useState(AuthenticationModes.TopMedia);
     const [username, setUsername] = useState('SysAdmin');
     const [password, setPassword] = useState('');
@@ -133,6 +134,8 @@ const TMLoginForm = (props) => {
             authenticationMode: authMode,
             cultureID: props.cultureID ?? CultureIDs.It_IT,
             dcmtArchive: dcmtArchive,
+            manualArchiveID: manualArchiveID,
+            hasArchives: dcmtArchives.length > 0,
             endpoint: endpoint,
             authDomain: authDomain,
             authDomainOnBehalfOf: authDomain,
@@ -144,7 +147,7 @@ const TMLoginForm = (props) => {
             username: username,
             usernameOnBehalfOf: usernameOnBehalf
         };
-    }, [authMode, props.cultureID, dcmtArchive, endpoint, authDomain, otpCode, password, passwordOnBehalf, saveLoginName, saveLoginEnable, username, usernameOnBehalf]);
+    }, [authMode, props.cultureID, dcmtArchive, manualArchiveID, dcmtArchives.length, endpoint, authDomain, otpCode, password, passwordOnBehalf, saveLoginName, saveLoginEnable, username, usernameOnBehalf]);
     const inputRefs = useMemo(() => {
         switch (authMode) {
             case AuthenticationModes.TopMedia:
@@ -304,7 +307,7 @@ const TMLoginForm = (props) => {
     }, []);
     const disableContinueBtn = useMemo(() => {
         switch (loginStep) {
-            case 1: return fieldValidations('endpoint').length > 0 || fieldValidations('dcmtArchive').length > 0;
+            case 1: return fieldValidations('endpoint').length > 0 || fieldValidations('dcmtArchive').length > 0 || fieldValidations('manualArchiveID').length > 0;
             case 2: return fieldValidations('authenticationMode').length > 0 || fieldValidations('username').length > 0 || fieldValidations('password').length > 0;
             default: return false;
         }
@@ -323,8 +326,13 @@ const TMLoginForm = (props) => {
         return tmSession;
     }, [endpoint, username, dcmtArchive]);
     const nextStepHandler = async () => {
-        if (!endpoint || !dcmtArchive)
+        if (!endpoint || (!dcmtArchive && !manualArchiveID))
             return;
+        if (loginStep === 1 && !dcmtArchive && manualArchiveID) {
+            const isValid = await validateManualArchiveAsync();
+            if (!isValid)
+                return;
+        }
         if (loginStep === 1) {
             setLoginStep(2);
         }
@@ -351,6 +359,23 @@ const TMLoginForm = (props) => {
             return;
         setLoginStep(prev => prev - 1);
     }, [loginStep]);
+    const validateManualArchiveAsync = async () => {
+        if (!tmSession || !manualArchiveID)
+            return false;
+        try {
+            TMSpinner.show({ description: '' });
+            const archiveEngine = tmSession.NewArchiveEngine();
+            await archiveEngine.RetrieveAsync(manualArchiveID);
+            return true;
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+            return false;
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
     const getArchivesAsync = async () => {
         if (!tmSession)
             return;
@@ -394,7 +419,7 @@ const TMLoginForm = (props) => {
             const sdInput = {
                 authenticationMode: authMode,
                 appModuleID: props.appModule,
-                archiveID: dcmtArchive?.id,
+                archiveID: dcmtArchive?.id ?? (dcmtArchives.length === 0 && manualArchiveID ? manualArchiveID : undefined),
                 description: dcmtArchive?.description,
                 userName: username,
                 password: password,
@@ -596,7 +621,7 @@ const TMLoginForm = (props) => {
         }
     }, [SDK_Globals.appModule]);
     return (_jsxs(StyledWrapper, { children: [!isMobile && _jsxs(StyledVersionContainer, { children: [_jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.primary }, children: "\u25CF" }), SDK_Globals.appModule] }), _jsxs("p", { children: ["v.", SDK_Globals.appVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.tertiary }, children: "\u25CF" }), "SDKUI"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkuiVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.error }, children: "\u25CF" }), "SDK"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkVersion] })] })] }), _jsxs(StyledLoginContainer, { "$isMobile": isMobile, children: [_jsxs(StyledLeftSection, { "$isMobile": isMobile, "$isConnector": props.isConnector ?? false, children: [isMobile && _jsxs(StyledTopBar, { children: [_jsx(StyledTitle, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') + ' ' + welcomeAppNameHeader + ' ' + 'v.' + SDK_Globals.appVersion }), _jsx(StyledMobileVersionIcon, { onClick: showVersionPopup, children: _jsx(IconInfo, { fontSize: 20, color: TMColors.primary }) })] }), _jsx(StyledOverlay, { "$isMobile": isMobile, children: _jsx(StyledCustomLogo, { style: { backgroundImage: `url(${showDefaultLogo ? 'logo-default.svg' : 'logo-custom.svg'})` } }) }), (windowHeight === WindowHeight.LARGE || !isMobile) && _jsxs(StyledPoweredByContainer, { "$isMobile": isMobile, children: [" ", showDefaultLogo ? 'Powered by TopConsult' : _jsx("img", { src: "/logo-default.svg", alt: "Logo", width: isMobile ? 50 : 100 }), " "] })] }), _jsxs(StyledRightSection, { "$isMobile": isMobile, children: [((((getDeviceType() === 'desktop' || isDesktop || isTablet) && windowHeight !== WindowHeight.SMALL)) && !isMobile) && _jsxs(StyledLogoContainer, { "$isMobile": isMobile, children: [_jsx(StyledWelcomeText, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') }), _jsx(StyledLogo, { children: _jsx("img", { src: six, alt: "six", height: 50 }) }), _jsx(StyledWelcomeText, { children: welcomeAppName })] }), _jsxs(StyledToolbarContainer, { children: [_jsx(StyledLanguageChooser, { onClick: () => setShowCultureIDs(true), children: _jsx(TMTooltip, { content: SDKUI_Localizator.CultureID, children: _jsx("img", { src: getCultureIDImg(), alt: "Lang", width: 25, height: 25 }) }) }), loginStep !== 3 && _jsx(TMButton, { btnStyle: "icon", onClick: () => setShowRapidAccess(true), icon: _jsx(IconFastAccess, { fontSize: 20 }), caption: LOGINLocalizator.QuickAccess }), showPasswordOperations && _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "icon", onClick: () => setShowChangePassword(true), icon: _jsx(IconPasswordOutline, { fontSize: 19 }), caption: SDKUI_Localizator.ChangePassword })] }), _jsxs(StyledFormContainer, { "$isMobile": isMobile, "$windowHeight": windowHeight, children: [loginStep === 1 &&
-                                        _jsxs(StyledStepContainer, { "$deviceType": deviceType, children: [_jsx(Chooser, { isDropDown: isDesktop, dataSource: props.endpoints, value: 'Description', columns: accessPointChooserColumns, additionalIcons: accessPointAdditionalIcons, icon: _jsx(IconAccessPoint, {}), label: SDKUI_Localizator.Endpoint, onSelectionChanged: (ep) => { setEndpoint(ep); setDcmtArchive(undefined); }, validationItems: fieldValidations('endpoint'), selectedRow: endpoint ?? undefined }), _jsx(Chooser, { isDropDown: isDesktop, dataSource: dcmtArchives, value: 'description', columns: dcmtArchiveChooserColumns, icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, onSelectionChanged: (arch) => setDcmtArchive(arch), validationItems: fieldValidations('dcmtArchive'), disabled: !endpoint, selectedRow: dcmtArchive ?? undefined })] }), loginStep === 2 &&
+                                        _jsxs(StyledStepContainer, { "$deviceType": deviceType, children: [_jsx(Chooser, { isDropDown: isDesktop, dataSource: props.endpoints, value: 'Description', columns: accessPointChooserColumns, additionalIcons: accessPointAdditionalIcons, icon: _jsx(IconAccessPoint, {}), label: SDKUI_Localizator.Endpoint, onSelectionChanged: (ep) => { setEndpoint(ep); setDcmtArchive(undefined); }, validationItems: fieldValidations('endpoint'), selectedRow: endpoint ?? undefined }), dcmtArchives.length > 0 ? (_jsx(Chooser, { isDropDown: isDesktop, dataSource: dcmtArchives, value: 'description', columns: dcmtArchiveChooserColumns, icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, onSelectionChanged: (arch) => setDcmtArchive(arch), validationItems: fieldValidations('dcmtArchive'), disabled: !endpoint, selectedRow: dcmtArchive ?? undefined })) : (_jsx(TextBox, { type: "text", icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, value: manualArchiveID, onValueChanged: (value) => setManualArchiveID(value), validationItems: fieldValidations('manualArchiveID'), disabled: !endpoint, placeHolder: 'Inserisci archivio' }))] }), loginStep === 2 &&
                                         _jsxs(_Fragment, { children: [_jsxs(StyledSummaryContainer, { style: {
                                                         display: 'flex',
                                                         justifyContent: 'center',
@@ -606,7 +631,7 @@ const TMLoginForm = (props) => {
                                                         marginBottom: windowHeight === WindowHeight.SMALL ? '30px' : '25px',
                                                         width: '100%',
                                                         minHeight: '15px'
-                                                    }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: endpoint?.Description ?? '', children: _jsx("p", { children: endpoint?.Description && endpoint.Description.length > 20 ? endpoint.Description.substring(0, 20) + '...' : endpoint?.Description }) })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: dcmtArchive?.description ?? '', children: _jsx("p", { children: dcmtArchive?.description && dcmtArchive.description.length > 20 ? dcmtArchive.description.substring(0, 20) + '...' : dcmtArchive?.description }) })] })] }), _jsxs(StyledStepContainer, { "$windowHeight": windowHeight, "$deviceType": deviceType, children: [_jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), authMode !== AuthenticationModes.MSAzure && _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps) }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
+                                                    }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: endpoint?.Description ?? '', children: _jsx("p", { children: endpoint?.Description && endpoint.Description.length > 20 ? endpoint.Description.substring(0, 20) + '...' : endpoint?.Description }) })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID, children: _jsx(StyledArchiveText, { children: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID }) })] })] }), _jsxs(StyledStepContainer, { "$windowHeight": windowHeight, "$deviceType": deviceType, children: [_jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), authMode !== AuthenticationModes.MSAzure && _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps) }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
                                                                     _jsxs(StyledCredentialWrapper, { children: [_jsx(TextBox, { value: authDomain, ref: authDomainRef, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameOnBehalfOfRef, secondaryRef: passwordOnBehalfOfRRef, usernameValidator: fieldValidations('usernameOnBehalfOf'), passwordValidator: fieldValidations('passwordOnBehalfOf'), authMode: AuthenticationModes.TopMediaOnBehalfOf, username: usernameOnBehalf, password: passwordOnBehalf, onUsernameChanged: (un) => setUsernameOnBehalf(un), onPasswordChanged: (ps) => setPasswordOnBehalf(ps) })] })] }), authMode !== AuthenticationModes.TopMediaWithMFA &&
                                                             _jsx(RapidAccessContainer, { isSaveEnable: saveLoginEnable, name: saveLoginName, nameValidationItems: fieldValidations('rapidAccessName'), onEnableSaveChange: () => setSaveLoginEnable(!saveLoginEnable), onNameChange: (name) => setSaveLoginName(name) })] })] }), loginStep === 3 &&
                                         _jsxs(StyledStepThreeContainer, { "$isMobile": isMobile, children: [_jsx(OTPReader, { isMobile: isMobile, digits: otpCode, onChange: handleDigitChange, onFullChange: handleFullChange, text: _jsxs("div", { children: [" ", LOGINLocalizator.EnterOtpInstructions, " "] }), header: '', additionalButtons: [
@@ -705,6 +730,7 @@ const StyledLogo = styled.div ` display: flex; gap: 5px; align-items: center; `;
 const StyledFormContainer = styled.div ` display: flex; flex-direction: column; padding: ${props => getPadding(props.$windowHeight, props.$isMobile)} ; align-items: center; justify-content: center; gap: 10px; width: 100%; height: fit-content; max-height: calc(100% - 100px); margin-top : ${props => !props.$isMobile && props.$windowHeight === WindowHeight.MEDIUM ? '70px' : '0'} ; `;
 const StyledButtonContainer = styled.div ` display: flex; align-items: center; justify-content: center; padding: ${props => props.$windowHeight !== WindowHeight.SMALL ? '10px' : '0'}; width: 100%; margin-top: ${props => props.$windowHeight !== WindowHeight.SMALL ? '10px' : '0'}; `;
 const StyledDescription = styled.div ` display: flex; align-items: center; gap: 2px; `;
+const StyledArchiveText = styled.p ` max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; `;
 const StyledRapidLoginSave = styled.div ` display: flex; flex-direction: column; width: 100%; gap: 2px; `;
 const StyledForgetPassword = styled.div ` position: absolute; bottom: ${props => props.$isMobile ? '15px' : '25px'}; left: 50%; transform: translateX(-50%); font-size: 0.8rem; `;
 const StyledBackButton = styled.div ` position: absolute; top: 20px; left: 20px; `;

package/lib/helper/TMPdfViewer.js

@@ -9,15 +9,19 @@ import { TMColors } from "../utils/theme";
 let pdfjs;
 let Document;
 let Page;
+let isReactPdfAvailable = false;
 try {
     const reactPdf = require('react-pdf');
     pdfjs = reactPdf.pdfjs;
     Document = reactPdf.Document;
     Page = reactPdf.Page;
+    // Configura il worker PDF.js PRIMA del rendering
+    pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+    isReactPdfAvailable = true;
 }
 catch (error) {
-    // react-pdf not available
-    // console.warn('react-pdf is not installed. TMPdfViewer will use iframe fallback for all devices.');
+    // react-pdf not available - will use iframe fallback
+    // console.warn('react-pdf is not installed. TMPdfViewer will use iframe fallback.');
 }
 const PDFViewerContainer = styled.div `
   width: 100%;
@@ -76,16 +80,6 @@ const TMPdfViewer = (props) => {
                 (window.matchMedia?.('(hover: none) and (pointer: coarse)').matches ?? false) ||
                 // Touch-capable devices excluding desktop OS
                 (navigator.maxTouchPoints > 1 && !/Win|Mac|Linux x86_64/i.test(userAgent));
-            // Configura il worker PDF.js solo per mobile (react-pdf)
-            if (isMobileDevice && !pdfjs.GlobalWorkerOptions.workerSrc) {
-                try {
-                    pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
-                }
-                catch (error) {
-                    console.warn('Worker PDF.js locale non disponibile, uso CDN fallback');
-                    pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
-                }
-            }
             setIsMobile(isMobileDevice);
         };
         checkIsMobile();
@@ -139,8 +133,8 @@ const TMPdfViewer = (props) => {
             observerRef.current?.disconnect();
         };
     }, [pageObserverCallback]);
-    // Use iframe for desktop, react-pdf for mobile
-    if (!isMobile && pdfUrl) {
+    // Use iframe se react-pdf non è disponibile O se è desktop
+    if (!isReactPdfAvailable || (!isMobile && pdfUrl)) {
         return (_jsx(PDFViewerContainer, { children: _jsx("iframe", { src: `${pdfUrl}#${enableFitToWidth ? 'view=FitH&' : ''}scrollbar=1`, title: title, style: {
                     width: '100%',
                     height: '100%',
@@ -149,6 +143,7 @@ const TMPdfViewer = (props) => {
                     pointerEvents: isResizingActive === true ? "none" : "auto"
                 } }, pdfUrl) }));
     }
+    // Usa react-pdf solo per mobile e solo se disponibile
     return _jsxs(PDFViewerContainer, { children: [loadedPagesNumber === 0 && totalPagesNumber > 0 && _jsx(LoadingOverlay, { children: _jsxs("div", { style: {
                         display: 'flex',
                         justifyContent: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react",
-  "version": "6.20.0-dev1.26",
+  "version": "6.20.0-dev1.28",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",