@topconsultnpm/sdkui-react-beta 6.16.16 → 6.16.18

package/lib/components/choosers/TMGroupChooser.js

@@ -33,5 +33,5 @@ export const TMGroupIdViewer = (props) => {
     if (!group) {
         return _jsx("span", { children: SDKUI_Localizator.NoDataToDisplay });
     }
-    return _jsxs("span", { children: [props.showIcon && _jsx(IconUserGroup, { color: '#767676', style: { marginRight: '4px' } }), group.name] });
+    return (_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [props.showIcon && _jsx(IconUserGroup, { color: '#767676' }), _jsx("span", { children: group.name })] }));
 };

package/lib/components/choosers/TMUserChooser.js

@@ -76,7 +76,14 @@ export const TMUserIdViewer = ({ userId, showIcon = false, noneSelectionText = `
             return undefined;
         return ud ? getCompleteUserName(ud.domain, ud.name) : userId.toString() ?? noneSelectionText;
     };
-    return (_jsxs(StyledDivHorizontal, { children: [getIcon(), _jsx("p", { style: { textAlign: 'left', marginLeft: showIcon ? '5px' : '', opacity: ud ? 1 : 0.5 }, children: getDescription() })] }));
+    return (_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [getIcon(), _jsx("span", { children: getDescription() })] })
+    // <StyledDivHorizontal>
+    //     {getIcon()}
+    //     <p style={{ textAlign: 'left', marginLeft: showIcon ? '5px' : '', opacity: ud ? 1 : 0.5 }}>
+    //         {getDescription()}
+    //     </p>
+    // </StyledDivHorizontal>
+    );
 };
 export const TMUserIcon = ({ ud }) => {
     if (!ud)

package/lib/components/features/workflow/diagram/RecipientList.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { QueryDescriptor } from '@topconsultnpm/sdk-ts-beta';
+export declare enum WorkItemActorTypes {
+    None = 0,
+    UID = 1,
+    GID = 2,
+    MID = 3,
+    QID = 4,
+    FXID = 5,
+    STID = 6
+}
+export interface WorkItemActor {
+    ActorType: WorkItemActorTypes;
+    ActorID: string;
+    Or: number;
+}
+interface RecipientListProps {
+    recipients: WorkItemActor[];
+    title: string;
+    tid?: number;
+    qd?: QueryDescriptor;
+    onQDChange?: (newQd: QueryDescriptor | undefined) => void;
+    onAdd: (recipient: WorkItemActor[]) => void;
+    onRemove: (recipient: WorkItemActor) => void;
+}
+declare const RecipientList: React.FC<RecipientListProps>;
+export default RecipientList;

package/lib/components/features/workflow/diagram/RecipientList.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import styled from 'styled-components';
+import TMButton from '../../../base/TMButton';
+import { IconAdd, IconDelete, SDKUI_Localizator } from '../../../../helper';
+import { TMUserChooserForm, TMUserIdViewer } from '../../../choosers/TMUserChooser';
+import { TMGroupChooserForm, TMGroupIdViewer } from '../../../choosers/TMGroupChooser';
+import { TMMidViewer } from '../../../viewers/TMMidViewer';
+import { SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
+import { useOutsideClick } from '../../../../hooks/useOutsideClick';
+import { FormModes } from '../../../../ts';
+import { TMMessageBoxManager, ButtonNames } from '../../../base/TMPopUp';
+import TMModal from '../../../base/TMModal';
+import { TMMetadataChooserForm } from '../../../choosers/TMMetadataChooser';
+import TMQueryEditor from '../../../query/TMQueryEditor';
+export var WorkItemActorTypes;
+(function (WorkItemActorTypes) {
+    WorkItemActorTypes[WorkItemActorTypes["None"] = 0] = "None";
+    WorkItemActorTypes[WorkItemActorTypes["UID"] = 1] = "UID";
+    WorkItemActorTypes[WorkItemActorTypes["GID"] = 2] = "GID";
+    WorkItemActorTypes[WorkItemActorTypes["MID"] = 3] = "MID";
+    WorkItemActorTypes[WorkItemActorTypes["QID"] = 4] = "QID";
+    WorkItemActorTypes[WorkItemActorTypes["FXID"] = 5] = "FXID";
+    WorkItemActorTypes[WorkItemActorTypes["STID"] = 6] = "STID";
+})(WorkItemActorTypes || (WorkItemActorTypes = {}));
+const RecipientsColumn = styled.div `
+  flex: 1;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 10px;
+  min-width: 300px;
+  position: relative;
+`;
+const HeaderContainer = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  margin-bottom: 10px;
+`;
+const RecipientItem = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+const FloatingMenu = styled.div `
+  position: absolute;
+  top: 100%; /* Si apre sotto il bottone */
+  right: 0; /* Allinea il bordo destro del menu con quello del genitore */
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  display: flex;
+  flex-direction: column; /* Disposizione verticale */
+  gap: 5px;
+  padding: 5px;
+  min-width: 150px;
+  transform: translateY(5px);
+  align-items: center; /* Centra i pulsanti orizzontalmente */
+`;
+const FloatingMenuButton = styled(TMButton) `
+  width: 100%; /* Rende i pulsanti interni larghi quanto il menu */
+`;
+const RecipientList = ({ recipients, title, tid, qd, onAdd, onRemove, onQDChange }) => {
+    const [uiState, setUiState] = useState({
+        isMenuOpen: false,
+        showUserChooser: false,
+        showGroupChooser: false,
+        showMetadataChooser: false,
+        showQdEditor: false,
+    });
+    const menuRef = useOutsideClick(() => setUiState(prevState => ({ ...prevState, isMenuOpen: false })));
+    const handleQdChosen = useCallback((newQd) => {
+        if (newQd) {
+            const recipientToAdd = {
+                ActorType: WorkItemActorTypes.QID,
+                ActorID: newQd.id ? newQd.id.toString() : '-1',
+                Or: 0,
+            };
+            onAdd([recipientToAdd]);
+            onQDChange?.(newQd);
+        }
+        setUiState(prevState => ({ ...prevState, showQdEditor: false }));
+    }, [onQDChange]);
+    const handleUserChosen = useCallback((IDs) => {
+        if (IDs && IDs.length > 0) {
+            const recipientsToAdd = IDs.map(id => ({
+                ActorType: WorkItemActorTypes.UID,
+                ActorID: id.toString(),
+                Or: 0
+            }));
+            onAdd(recipientsToAdd);
+        }
+        setUiState(prevState => ({ ...prevState, showUserChooser: false }));
+    }, []);
+    const handleGroupChosen = useCallback((IDs) => {
+        if (IDs && IDs.length > 0) {
+            const recipientsToAdd = IDs.map(id => ({
+                ActorType: WorkItemActorTypes.GID,
+                ActorID: id.toString(),
+                Or: 0
+            }));
+            onAdd(recipientsToAdd);
+        }
+        setUiState(prevState => ({ ...prevState, showGroupChooser: false }));
+    }, []);
+    const handleMetadataChosen = useCallback((IDs) => {
+        if (IDs && IDs.length > 0) {
+            const recipientsToAdd = IDs.map(item => ({
+                ActorType: WorkItemActorTypes.MID,
+                ActorID: item.mid ? item.mid.toString() : '0',
+                Or: 0
+            }));
+            onAdd(recipientsToAdd);
+        }
+        setUiState(prevState => ({ ...prevState, showMetadataChooser: false }));
+    }, []);
+    const handleAddClick = () => {
+        setUiState(prevState => ({ ...prevState, isMenuOpen: !prevState.isMenuOpen }));
+    };
+    const openChooser = useCallback((chooser) => {
+        setUiState(prevState => ({
+            ...prevState,
+            isAndMenuOpen: false,
+            isOrMenuOpen: false,
+            [chooser]: true,
+        }));
+    }, []);
+    const openQdEditorFromMenu = useCallback(() => {
+        const hasExistingQd = recipients.some(r => r.ActorType === WorkItemActorTypes.QID);
+        if (hasExistingQd) {
+            TMMessageBoxManager.show({
+                buttons: [ButtonNames.OK],
+                title: SDK_Globals.appModule,
+                message: "Definire solo una query per i destinatari"
+            });
+            setUiState(prevState => ({ ...prevState, isAndMenuOpen: false, isOrMenuOpen: false }));
+        }
+        else {
+            openChooser('showQdEditor');
+        }
+    }, [recipients, openChooser]);
+    const renderActorViewer = (recipient) => {
+        const actorId = parseInt(recipient.ActorID, 10);
+        switch (recipient.ActorType) {
+            case WorkItemActorTypes.UID:
+                return _jsx(TMUserIdViewer, { userId: actorId, showIcon: true });
+            case WorkItemActorTypes.GID:
+                return _jsx(TMGroupIdViewer, { groupID: actorId, showIcon: true });
+            case WorkItemActorTypes.MID:
+                return _jsx(TMMidViewer, { tid_mid: { tid: tid, mid: actorId }, showIcon: true });
+            case WorkItemActorTypes.QID:
+                return (_jsx("span", { onDoubleClick: () => openChooser('showQdEditor'), style: { cursor: 'pointer' }, children: SDKUI_Localizator.WorkflowGetRecipientsFromQuery }));
+            default:
+                return _jsxs("span", { children: [WorkItemActorTypes[recipient.ActorType], ": ", recipient.ActorID] });
+        }
+    };
+    const renderFloatingMenu = () => {
+        const menuItems = [
+            { caption: SDK_Localizator.Users, onClick: () => openChooser('showUserChooser') },
+            { caption: SDK_Localizator.Groups, onClick: () => openChooser('showGroupChooser') },
+            { caption: SDK_Localizator.Metadata, onClick: () => openChooser('showMetadataChooser') },
+            { caption: SDK_Localizator.Query, onClick: openQdEditorFromMenu },
+        ];
+        return (_jsx(FloatingMenu, { ref: menuRef, children: menuItems.map((item, index) => (_jsx(FloatingMenuButton, { btnStyle: 'text', caption: item.caption, onClick: item.onClick }, index))) }));
+    };
+    return (_jsxs(RecipientsColumn, { children: [_jsxs(HeaderContainer, { children: [_jsx("p", { style: { fontWeight: 600 }, children: title }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Aggiungi destinatario', icon: _jsx(IconAdd, {}), onClick: handleAddClick }), uiState.isMenuOpen && renderFloatingMenu()] }), _jsx("div", { style: { height: '150px', overflowY: 'auto', gap: '5px', display: 'flex', flexDirection: 'column' }, children: recipients.map((recipient, index) => (_jsxs(RecipientItem, { children: [_jsx(IconDelete, { color: '#c00', cursor: 'pointer', onClick: () => onRemove(recipient) }), renderActorViewer(recipient)] }, index))) }), uiState.showUserChooser && _jsx(TMUserChooserForm, { allowMultipleSelection: true, allowSorting: true, onClose: () => setUiState(prevState => ({ ...prevState, showUserChooser: false })), onChoose: (IDs) => handleUserChosen(IDs) }), uiState.showGroupChooser && _jsx(TMGroupChooserForm, { allowMultipleSelection: true, allowSorting: true, onClose: () => setUiState(prevState => ({ ...prevState, showGroupChooser: false })), onChoose: (IDs) => handleGroupChosen(IDs) }), uiState.showMetadataChooser && tid && _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, allowSorting: true, tids: [tid], onClose: () => setUiState(prevState => ({ ...prevState, showMetadataChooser: false })), onChoose: (IDs) => handleMetadataChosen(IDs) }), uiState.showQdEditor &&
+                _jsx(TMModal, { title: SDKUI_Localizator.QueryDefine, onClose: () => setUiState(prevState => ({ ...prevState, showQdEditor: false })), children: _jsx(TMQueryEditor, { inputData: qd, formMode: FormModes.Update, onApplied: handleQdChosen, onClose: () => setUiState(prevState => ({ ...prevState, showQdEditor: false })) }) })] }));
+};
+export default RecipientList;

package/lib/components/features/workflow/diagram/WorkitemRecipientsEditor.d.ts

@@ -1,19 +1,5 @@
 import React from 'react';
 import { QueryDescriptor, WorkItemSetRules } from '@topconsultnpm/sdk-ts-beta';
-export declare enum WorkItemActorTypes {
-    None = 0,
-    UID = 1,
-    GID = 2,
-    MID = 3,
-    QID = 4,
-    FXID = 5,
-    STID = 6
-}
-export interface WorkItemActor {
-    ActorType: WorkItemActorTypes;
-    ActorID: string;
-    Or: number;
-}
 interface WorkitemRecipientsEditorProps {
     tos: string;
     setRule: WorkItemSetRules | undefined;

package/lib/components/features/workflow/diagram/WorkitemRecipientsEditor.js

@@ -1,287 +1,103 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
-import TMButton from '../../../base/TMButton';
-import { IconAdd, IconMetadata, IconSavedQuery, IconUser, IconUserGroup, SDKUI_Localizator } from '../../../../helper'; // Importa anche IconAdd
-import { TMUserChooserForm, TMUserIdViewer } from '../../../choosers/TMUserChooser';
-import { TMGroupChooserForm, TMGroupIdViewer } from '../../../choosers/TMGroupChooser';
-import { SDK_Globals, SDK_Localizator, WorkItemSetRules } from '@topconsultnpm/sdk-ts-beta';
-import { TMMetadataChooserForm } from '../../../choosers/TMMetadataChooser';
-import { FormModes } from '../../../../ts';
 import TMDropDown from '../../../editors/TMDropDown';
-import { TMMidViewer } from '../../../viewers/TMMidViewer';
-import TMQueryEditor from '../../../query/TMQueryEditor';
-import TMModal from '../../../base/TMModal';
-import { ButtonNames, TMMessageBoxManager } from '../../../base/TMPopUp';
-import { useOutsideClick } from '../../../../hooks/useOutsideClick';
-export var WorkItemActorTypes;
-(function (WorkItemActorTypes) {
-    WorkItemActorTypes[WorkItemActorTypes["None"] = 0] = "None";
-    WorkItemActorTypes[WorkItemActorTypes["UID"] = 1] = "UID";
-    WorkItemActorTypes[WorkItemActorTypes["GID"] = 2] = "GID";
-    WorkItemActorTypes[WorkItemActorTypes["MID"] = 3] = "MID";
-    WorkItemActorTypes[WorkItemActorTypes["QID"] = 4] = "QID";
-    WorkItemActorTypes[WorkItemActorTypes["FXID"] = 5] = "FXID";
-    WorkItemActorTypes[WorkItemActorTypes["STID"] = 6] = "STID";
-})(WorkItemActorTypes || (WorkItemActorTypes = {}));
+import { WorkItemSetRules } from '@topconsultnpm/sdk-ts-beta';
+import RecipientList, { WorkItemActorTypes } from './RecipientList';
+import { SDKUI_Localizator } from '../../../../helper';
 const RecipientsContainer = styled.div `
   display: flex;
   gap: 20px;
-  /* padding: 10px 0px; */
   flex-wrap: wrap;
 `;
-const RecipientsColumn = styled.div `
-  flex: 1;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 10px;
-  min-width: 300px;
-  position: relative;
-`;
-const HeaderContainer = styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  margin-bottom: 10px;
-`;
-const RecipientItem = styled.div `
-  display: flex;
-  align-items: center;
-  margin-bottom: 5px;
-  gap: 5px;
-`;
-const RecipientRemoveButton = styled.span `
-  cursor: pointer;
-  color: #c00;
-  font-weight: bold;
-`;
-const FloatingMenu = styled.div `
-  position: absolute;
-  top: 100%; /* Si apre sotto il bottone */
-  right: 0; /* Allinea il bordo destro del menu con quello del genitore */
-  background-color: white;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  z-index: 10;
-  display: flex;
-  flex-direction: column; /* Disposizione verticale */
-  gap: 5px;
-  padding: 5px;
-  min-width: 150px;
-  transform: translateY(5px);
-  align-items: center; /* Centra i pulsanti orizzontalmente */
-`;
-const FloatingMenuButton = styled(TMButton) `
-  width: 100%; /* Rende i pulsanti interni larghi quanto il menu */
-`;
-const WorkitemRecipientsEditor = ({ tos, setRule, qd, mTID, onTosChange, onQDChange, onSetRuleChange }) => {
-    const [isAndMenuOpen, setIsAndMenuOpen] = useState(false);
-    const [isOrMenuOpen, setIsOrMenuOpen] = useState(false);
-    const [showUserChooser, setShowUserChooser] = useState(false);
-    const [showGroupChooser, setShowGroupChooser] = useState(false);
-    // const [showFxChartChooser, setShowFxChartChooser] = useState(false);
-    const [showMetadataChooser, setShowMetadataChooser] = useState(false);
-    const [showQdEditor, setShowQdEditor] = useState(false);
-    const andMenuRef = useOutsideClick(() => {
-        setIsAndMenuOpen(false);
-    });
-    // Applica il custom hook per il menu OR
-    const orMenuRef = useOutsideClick(() => {
-        setIsOrMenuOpen(false);
-    });
-    // useEffect(() => {
-    //     const handleClickOutside = (event: MouseEvent) => {
-    //         // Controlla il menu AND
-    //         if (isAndMenuOpen && andMenuRef.current && !andMenuRef.current.contains(event.target as Node) && andButtonRef.current && !andButtonRef.current.contains(event.target as Node)) {
-    //             setIsAndMenuOpen(false);
-    //         }
-    //         // Controlla il menu OR
-    //         if (isOrMenuOpen && orMenuRef.current && !orMenuRef.current.contains(event.target as Node) && orButtonRef.current && !orButtonRef.current.contains(event.target as Node)) {
-    //             setIsOrMenuOpen(false);
-    //         }
-    //     };
-    //     // Aggiungi l'event listener se un menu è aperto
-    //     if (isAndMenuOpen || isOrMenuOpen) {
-    //         document.addEventListener('mousedown', handleClickOutside);
-    //     }
-    //     // Pulisci l'event listener
-    //     return () => {
-    //         document.removeEventListener('mousedown', handleClickOutside);
-    //     };
-    // }, [isAndMenuOpen, isOrMenuOpen]);
-    // useEffect(() => {
-    //     const handleKeyDown = (event: KeyboardEvent) => {
-    //         if (event.key === 'Escape') {
-    //             if (isAndMenuOpen) {
-    //                 setIsAndMenuOpen(false);
-    //                 event.stopPropagation(); // Ferma la propagazione per non chiudere anche il modale
-    //             } else if (isOrMenuOpen) {
-    //                 setIsOrMenuOpen(false);
-    //                 event.stopPropagation(); // Ferma la propagazione per non chiudere anche il modale
-    //             }
-    //         }
-    //     };
-    //     if (isAndMenuOpen || isOrMenuOpen) {
-    //         document.addEventListener('keydown', handleKeyDown);
-    //     }
-    //     return () => {
-    //         document.removeEventListener('keydown', handleKeyDown);
-    //     };
-    // }, [isAndMenuOpen, isOrMenuOpen]);
-    const parseTos = (tosString) => {
-        const andRecipients = [];
-        const orRecipients = [];
-        if (!tosString)
-            return { andRecipients, orRecipients };
-        const tokens1 = tosString.split(';');
-        for (const t of tokens1) {
-            const t1 = t.trim();
-            if (!t1)
-                continue;
-            const tokens2 = t1.split('|');
-            if (tokens2.length < 2)
-                continue;
-            const actorTypeStr = tokens2[0].toUpperCase();
-            const actorType = WorkItemActorTypes[actorTypeStr];
-            const actorID = tokens2[1];
-            const or = tokens2.length === 3 ? parseInt(tokens2[2], 10) : 0;
-            if (actorType !== undefined) {
-                const actor = {
-                    ActorType: actorType,
-                    ActorID: actorID,
-                    Or: or,
-                };
-                if (or === 0) {
-                    andRecipients.push(actor);
-                }
-                else {
-                    orRecipients.push(actor);
-                }
-            }
-        }
+const tosToActors = (tosString) => {
+    const andRecipients = [];
+    const orRecipients = [];
+    if (!tosString)
         return { andRecipients, orRecipients };
-    };
-    const { andRecipients, orRecipients } = useMemo(() => parseTos(tos), [tos]);
-    const actorsToTos = (actors) => {
-        return actors.map(actor => `${WorkItemActorTypes[actor.ActorType]}|${actor.ActorID}|${actor.Or}`).join(';');
-    };
-    const handleRemoveRecipient = (recipientToRemove) => {
-        const allRecipients = [...andRecipients, ...orRecipients];
-        const updatedRecipients = allRecipients.filter(r => r !== recipientToRemove);
-        const newTos = actorsToTos(updatedRecipients);
-        onTosChange(newTos);
-    };
-    const handleAddRecipients = (newRecipients) => {
-        const allRecipients = [...andRecipients, ...orRecipients];
-        const updatedRecipients = [...allRecipients, ...newRecipients]; // Aggiunge tutti i nuovi destinatari
-        const newTos = actorsToTos(updatedRecipients);
-        onTosChange(newTos);
-        setIsAndMenuOpen(false);
-        setIsOrMenuOpen(false);
-        setShowUserChooser(false);
-        setShowQdEditor(false);
-    };
-    const handleUserChosen = (IDs, orValue) => {
-        if (IDs && IDs.length > 0) {
-            const recipientsToAdd = IDs.map(id => ({
-                ActorType: WorkItemActorTypes.UID,
-                ActorID: id.toString(),
-                Or: orValue
-            }));
-            handleAddRecipients(recipientsToAdd);
-        }
-        setShowUserChooser(false);
-    };
-    const handleGroupChosen = (IDs, orValue) => {
-        if (IDs && IDs.length > 0) {
-            const recipientsToAdd = IDs.map(id => ({
-                ActorType: WorkItemActorTypes.GID,
-                ActorID: id.toString(),
-                Or: orValue
-            }));
-            handleAddRecipients(recipientsToAdd);
-        }
-        setShowGroupChooser(false);
-    };
-    const handleMetadataChosen = (IDs, orValue) => {
-        if (IDs && IDs.length > 0) {
-            const recipientsToAdd = IDs.map(id => ({
-                ActorType: WorkItemActorTypes.MID,
-                ActorID: id.mid ? id.mid.toString() : '0',
-                Or: orValue
-            }));
-            handleAddRecipients(recipientsToAdd);
+    const tokens1 = tosString.split(';');
+    for (const t of tokens1) {
+        const t1 = t.trim();
+        if (!t1)
+            continue;
+        const tokens2 = t1.split('|');
+        if (tokens2.length < 2)
+            continue;
+        const actorTypeStr = tokens2[0].toUpperCase();
+        const actorType = WorkItemActorTypes[actorTypeStr];
+        const actorID = tokens2[1];
+        const or = tokens2.length === 3 ? parseInt(tokens2[2], 10) : 0;
+        if (actorType !== undefined) {
+            const actor = {
+                ActorType: actorType,
+                ActorID: actorID,
+                Or: or,
+            };
+            if (or === 0) {
+                andRecipients.push(actor);
+            }
+            else {
+                orRecipients.push(actor);
+            }
         }
-        setShowMetadataChooser(false);
-    };
-    const handleQdChosen = (newQd, orValue) => {
-        if (newQd) {
-            // 1. Unisci tutti i destinatari e filtra per rimuovere eventuali QID esistenti.
+    }
+    return { andRecipients, orRecipients };
+};
+const actorsToTos = (actors) => {
+    return actors.map(actor => `${WorkItemActorTypes[actor.ActorType]}|${actor.ActorID}|${actor.Or}`).join(';');
+};
+const WorkitemRecipientsEditor = ({ tos, setRule, qd, mTID, onTosChange, onQDChange, onSetRuleChange }) => {
+    const [localTos, setLocalTos] = useState(tos);
+    useEffect(() => {
+        setLocalTos(tos);
+    }, [tos]);
+    const handleAddRecipients = useCallback((newRecipients, orValue) => {
+        setLocalTos(prevTos => {
+            const { andRecipients, orRecipients } = tosToActors(prevTos);
+            let allRecipients = [...andRecipients, ...orRecipients];
+            // 1. Rimuovi qualsiasi QID esistente se il nuovo destinatario è una query
+            if (newRecipients.length > 0 && newRecipients[0].ActorType === WorkItemActorTypes.QID) {
+                allRecipients = allRecipients.filter(r => r.ActorType !== WorkItemActorTypes.QID);
+            }
+            const updatedRecipients = [...allRecipients, ...newRecipients.map(r => ({ ...r, Or: orValue }))];
+            const newTos = actorsToTos(updatedRecipients);
+            onTosChange(newTos);
+            return newTos;
+        });
+    }, [onTosChange, onQDChange]);
+    const handleRemoveRecipient = useCallback((recipientToRemove) => {
+        setLocalTos(prevTos => {
+            const { andRecipients, orRecipients } = tosToActors(prevTos);
             const allRecipients = [...andRecipients, ...orRecipients];
-            const updatedRecipients = allRecipients.filter(r => r.ActorType !== WorkItemActorTypes.QID);
-            // 2. Crea il nuovo destinatario QID
-            const recipientToAdd = {
-                ActorType: WorkItemActorTypes.QID,
-                ActorID: newQd.id ? newQd.id.toString() : '-1',
-                Or: orValue
-            };
-            // 3. Aggiungi il nuovo destinatario alla lista
-            updatedRecipients.push(recipientToAdd);
-            // 4. Converte la lista aggiornata in una stringa e aggiorna lo stato.
+            const updatedRecipients = allRecipients.filter(r => r.ActorType !== recipientToRemove.ActorType || r.ActorID !== recipientToRemove.ActorID || r.Or !== recipientToRemove.Or);
             const newTos = actorsToTos(updatedRecipients);
             onTosChange(newTos);
-            onQDChange(newQd);
-        }
-        setIsAndMenuOpen(false);
-        setIsOrMenuOpen(false);
-        setShowQdEditor(false);
-    };
-    const renderActorViewer = (recipient) => {
-        const actorId = parseInt(recipient.ActorID, 10);
-        switch (recipient.ActorType) {
-            case WorkItemActorTypes.UID:
-                return _jsx(TMUserIdViewer, { userId: actorId, showIcon: true });
-            case WorkItemActorTypes.GID:
-                return _jsx(TMGroupIdViewer, { groupID: actorId, showIcon: true });
-            case WorkItemActorTypes.MID:
-                return _jsx(TMMidViewer, { tid_mid: { tid: mTID, mid: actorId }, showIcon: true });
-            case WorkItemActorTypes.QID:
-                return (_jsx("span", { onDoubleClick: openQdEditor, style: { cursor: 'pointer' }, children: SDKUI_Localizator.WorkflowGetRecipientsFromQuery }));
-            default:
-                return _jsxs("span", { children: [WorkItemActorTypes[recipient.ActorType], ": ", recipient.ActorID] });
-        }
-    };
-    const openQdEditor = () => {
-        const filteredRecipients = [...andRecipients, ...orRecipients].filter(r => r.ActorType === WorkItemActorTypes.QID);
-        if (filteredRecipients.length > 0) {
-            TMMessageBoxManager.show({
-                buttons: [ButtonNames.OK],
-                title: SDK_Globals.appModule,
-                message: "Definire solo una query per i destinatari"
-            });
-            setIsAndMenuOpen(false);
-            setIsOrMenuOpen(false);
-            return;
-        }
-        setShowQdEditor(true);
-    };
-    const renderRecipientList = (recipients, title, orValue) => (_jsxs(RecipientsColumn, { children: [_jsxs(HeaderContainer, { children: [_jsx("p", { style: { fontWeight: 600 }, children: title }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Aggiungi destinatario', icon: _jsx(IconAdd, {}), onClick: () => {
-                            if (orValue === 0) {
-                                setIsAndMenuOpen(prevState => !prevState);
-                                setIsOrMenuOpen(false);
-                            }
-                            else {
-                                setIsOrMenuOpen(prevState => !prevState);
-                                setIsAndMenuOpen(false);
-                            }
-                        } }), (orValue === 0 && isAndMenuOpen) && (_jsxs(FloatingMenu, { ref: andMenuRef, children: [_jsx(FloatingMenuButton, { btnStyle: 'text', icon: _jsx(IconUser, {}), caption: SDK_Localizator.Users, onClick: () => setShowUserChooser(true) }), _jsx(FloatingMenuButton, { btnStyle: 'text', icon: _jsx(IconUserGroup, {}), caption: SDK_Localizator.Groups, onClick: () => setShowGroupChooser(true) }), _jsx(FloatingMenuButton, { btnStyle: 'text', icon: _jsx(IconMetadata, {}), caption: SDK_Localizator.Metadata, onClick: () => setShowMetadataChooser(true) }), _jsx(FloatingMenuButton, { btnStyle: 'text', icon: _jsx(IconSavedQuery, {}), caption: SDK_Localizator.Query, onClick: openQdEditor })] })), (orValue === 1 && isOrMenuOpen) && (_jsxs(FloatingMenu, { ref: orMenuRef, children: [_jsx(FloatingMenuButton, { btnStyle: 'text', icon: _jsx(IconUser, {}), caption: SDK_Localizator.Users, onClick: () => setShowUserChooser(true) }), _jsx(FloatingMenuButton, { btnStyle: 'text', icon: _jsx(IconUserGroup, {}), caption: SDK_Localizator.Groups, onClick: () => setShowGroupChooser(true) }), _jsx(FloatingMenuButton, { btnStyle: 'text', icon: _jsx(IconMetadata, {}), caption: SDK_Localizator.Metadata, onClick: () => setShowMetadataChooser(true) }), _jsx(FloatingMenuButton, { btnStyle: 'text', icon: _jsx(IconSavedQuery, {}), caption: SDK_Localizator.Query, onClick: openQdEditor })] }))] }), _jsx("div", { style: { height: '150px', overflowY: 'auto' }, children: recipients.map((recipient, index) => (_jsxs(RecipientItem, { children: [_jsx(RecipientRemoveButton, { onClick: () => handleRemoveRecipient(recipient), children: "\u274C" }), renderActorViewer(recipient)] }, index))) })] }));
+            if (recipientToRemove.ActorType === WorkItemActorTypes.QID) {
+                onQDChange(undefined);
+            }
+            return newTos;
+        });
+    }, [onTosChange, onQDChange]);
+    const { andRecipients, orRecipients } = useMemo(() => {
+        return tosToActors(localTos);
+    }, [localTos]);
+    const handleQDChosen = useCallback((newQd, orValue) => {
+        const allRecipients = [...andRecipients, ...orRecipients];
+        const updatedRecipients = allRecipients.filter(r => r.ActorType !== WorkItemActorTypes.QID);
+        const recipientToAdd = {
+            ActorType: WorkItemActorTypes.QID,
+            ActorID: newQd.id ? newQd.id.toString() : '-1',
+            Or: orValue,
+        };
+        updatedRecipients.push(recipientToAdd);
+        const newTos = actorsToTos(updatedRecipients);
+        onTosChange(newTos);
+        onQDChange(newQd);
+    }, [andRecipients, orRecipients, onTosChange, onQDChange]);
     const SET_RULE_DATASOURCE = [
         { value: WorkItemSetRules.Ands_AND_Ors, display: "Ands_AND_Ors" },
         { value: WorkItemSetRules.Ands_OR_Ors, display: "Ands_OR_Ors" }
     ];
-    return (_jsxs("div", { children: [_jsxs(RecipientsContainer, { children: [renderRecipientList(andRecipients, 'Destinatari in AND', 0), renderRecipientList(orRecipients, 'Destinatari in OR', 1)] }), _jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx(TMDropDown, { label: SDKUI_Localizator.WorkflowRecipientSetRule, width: '230px', dataSource: SET_RULE_DATASOURCE, value: setRule, onValueChanged: (e) => { onSetRuleChange?.(e.target.value); } }) }), showUserChooser && _jsx(TMUserChooserForm, { allowMultipleSelection: true, allowSorting: true, onClose: () => setShowUserChooser(false), onChoose: (IDs) => handleUserChosen(IDs, isAndMenuOpen ? 0 : 1) }), showGroupChooser && _jsx(TMGroupChooserForm, { allowMultipleSelection: true, allowSorting: true, onClose: () => setShowGroupChooser(false), onChoose: (IDs) => handleGroupChosen(IDs, isAndMenuOpen ? 0 : 1) }), showMetadataChooser && mTID && _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, allowSorting: true, tids: [mTID], onClose: () => setShowMetadataChooser(false), onChoose: (IDs) => handleMetadataChosen(IDs, isAndMenuOpen ? 0 : 1) }), showQdEditor &&
-                _jsx(TMModal, { title: SDKUI_Localizator.QueryDefine, children: _jsx(TMQueryEditor, { inputData: qd, formMode: FormModes.Update, onApplied: (newQd) => handleQdChosen(newQd, isAndMenuOpen ? 0 : 1), onClose: () => { setShowQdEditor(false); } }) })] }));
+    return (_jsxs("div", { children: [_jsxs(RecipientsContainer, { children: [_jsx(RecipientList, { recipients: andRecipients, title: "Destinatari in AND", tid: mTID, qd: qd, onQDChange: (newQd) => newQd && handleQDChosen(newQd, 0), onAdd: (newRecipients) => handleAddRecipients(newRecipients, 0), onRemove: handleRemoveRecipient }), _jsx(RecipientList, { recipients: orRecipients, title: "Destinatari in OR", tid: mTID, qd: qd, onQDChange: (newQd) => newQd && handleQDChosen(newQd, 1), onAdd: (newRecipients) => handleAddRecipients(newRecipients, 1), onRemove: handleRemoveRecipient })] }), _jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx(TMDropDown, { label: SDKUI_Localizator.WorkflowRecipientSetRule, width: '230px', dataSource: SET_RULE_DATASOURCE, value: setRule, onValueChanged: (e) => { onSetRuleChange?.(e.target.value); } }) })] }));
 };
 export default WorkitemRecipientsEditor;

package/lib/components/forms/TMChooserForm.js

@@ -86,8 +86,8 @@ const TMChooserForm = ({ children, title, allowMultipleSelection = false, allowA
             ...summaryItems ?? {}
         });
     }, [manageUseLocalizedName, summaryItems]);
-    return (_jsx(TMModal, { title: renderTitle(), width: width ?? '550px', height: height ?? '600px', toolbar: _jsx(ToolbarButtons, {}), onClose: onClose, children: (children ??
-            filteredItems.length > 0)
+    return (_jsx(TMModal, { title: renderTitle(), width: width ?? '550px', height: height ?? '600px', toolbar: _jsx(ToolbarButtons, {}), onClose: onClose, children: children ??
+            filteredItems.length > 0
             ? _jsx(TMDataGrid, { dataSource: filteredItems, keyExpr: keyName, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, searchPanelFocusStarting: true, headerFilter: { visible: true }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single', showCheckBoxesMode: 'always', selectAllMode: 'allPages' }, grouping: allowGrouping ? { autoExpandAll: false, expandMode: 'rowClick' } : undefined, summary: customSummary, onFocusedRowChanged: handleFocusedRowChange, onSelectionChanged: handleSelectionChanged, onRowDblClick: handleRowDoubleClick })
             : _jsx(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: _jsx(TMLayoutItem, { children: _jsx("p", { style: { height: "100%", color: TMColors.primaryColor, fontSize: "1.5rem", display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: SDKUI_Localizator.NoDataToDisplay }) }) }) }));
 };

package/lib/helper/SDKUI_Localizator.d.ts

@@ -440,7 +440,7 @@ export declare class SDKUI_Localizator {
     static get SelectAnOperationBetween(): "Wählen Sie eine Operation zwischen" | "Select an operation between" | "Selecciona una operación entre" | "Sélectionnez une opération entre" | "Selecione uma operação entre" | "Seleziona un'operazione tra";
     static get SelectArchiveToStart(): "Klicken Sie auf Archivieren, um zu beginnen." | "Click on Archive button to start." | "Haz clic en el botón Archivar para comenzar." | "Cliquez sur le bouton Archiver pour commencer." | "Clique no botão Arquivar para iniciar." | "Clicca sul pulsante Archivia per iniziare.";
     static get SelectAttachToStart(): "Sie können Dateien zu Ihrer E-Mail hinzufügen, klicken Sie auf Anhängen, um zu beginnen." | "You can attach files to your email, click on Attach button to start." | "Puedes adjuntar archivos a tu correo electrónico, haz clic en el botón Adjuntar para comenzar." | "Vous pouvez joindre des fichiers à votre e-mail, cliquez sur le bouton Joindre pour commencer." | "Você pode anexar arquivos ao seu e-mail, clique no botão Anexar para iniciar." | "Puoi allegare file alla tua email, clicca sul pulsante Allega per iniziare.";
-    static get SelectedAttachmentFile(): "Ausgewählte Anhangsdatei" | "Selected attachment file" | "Archivo adjunto seleccionado" | "Fichier de pièce jointe sélectionné" | "Arquivo de anexo selecionado" | "File di allegato selezionato";
+    static get SelectFromAttachments(): "Aus Anhängen auswählen" | "Select from attachments" | "Seleccionar de archivos adjuntos" | "Sélectionner parmi les pièces jointes" | "Selecionar dos anexos" | "Seleziona dagli allegati";
     static get SelectSupportAreaMessage(): "Wählen Sie einen Ablagebereich aus" | "Select a support area" | "Seleccione un área de apoyo" | "Sélectionnez une zone de support" | "Selecione uma área de apoio" | "Selezionare un'area di appoggio";
     static get SelectedSingular(): string;
     static get Selected(): "Ausgewählt" | "Selected" | "Sélectionné" | "Selecionado" | "Seleccionados" | "Selezionati";

package/lib/helper/SDKUI_Localizator.js

@@ -4364,14 +4364,14 @@ export class SDKUI_Localizator {
             default: return "Puoi allegare file alla tua email, clicca sul pulsante Allega per iniziare.";
         }
     }
-    static get SelectedAttachmentFile() {
-        switch (this._cultureID) {
-            case CultureIDs.De_DE: return "Ausgewählte Anhangsdatei";
-            case CultureIDs.En_US: return "Selected attachment file";
-            case CultureIDs.Es_ES: return "Archivo adjunto seleccionado";
-            case CultureIDs.Fr_FR: return "Fichier de pièce jointe sélectionné";
-            case CultureIDs.Pt_PT: return "Arquivo de anexo selecionado";
-            default: return "File di allegato selezionato";
+    static get SelectFromAttachments() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Aus Anhängen auswählen";
+            case CultureIDs.En_US: return "Select from attachments";
+            case CultureIDs.Es_ES: return "Seleccionar de archivos adjuntos";
+            case CultureIDs.Fr_FR: return "Sélectionner parmi les pièces jointes";
+            case CultureIDs.Pt_PT: return "Selecionar dos anexos";
+            default: return "Seleziona dagli allegati";
         }
     }
     static get SelectSupportAreaMessage() {

package/package.json

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