@topconsultnpm/sdkui-react 6.17.0-test9

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

@@ -0,0 +1,686 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react'; // Importa useState
+import TMModal from '../../../base/TMModal';
+import { DiagramItemTypes } from './interfaces';
+import TMCheckBox from '../../../editors/TMCheckBox';
+import { calcIsModified, getSystemMetadata, IconApply, IconUndo, LocalizeDiagramItemType, SDKUI_Localizator } from '../../../../helper';
+import TMMetadataChooser from '../../../choosers/TMMetadataChooser';
+import { FormModes, MetadataValueDescriptorEx } from '../../../../ts';
+import TMTextBox from '../../../editors/TMTextBox';
+import TMButton from '../../../base/TMButton';
+import styled from 'styled-components';
+import TMQuerySummary from '../../../query/TMQuerySummary';
+import { CultureIDs, DcmtTypeListCacheService, FromItem, MetadataDataDomains, SDK_Globals, SearchEngine, Severities, WFAppTypes, WorkItemSetRules } from '@topconsultnpm/sdk-ts';
+import TMLocalizedTextBox from '../../../editors/TMLocalizedTextBox';
+import TMDataListItemPicker from '../../../choosers/TMDataListItemPicker';
+import WorkitemRecipientsEditor, { actorsToTos, RecipientsContainer, tosToActors } from './WorkitemRecipientsEditor';
+import TMDropDown from '../../../editors/TMDropDown';
+import TMMetadataValues, { AdvancedMenuButtons, ShowCheckBoxesMode } from '../../../editors/TMMetadataValues';
+import TMFormulaEditor, { FormulaDescriptor, FormulaHelper, FormulaTargets } from '../../../editors/TMFormulaEditor';
+import TMDistinctValues from '../../../choosers/TMDistinctValues';
+import TMTidViewer from '../../../viewers/TMTidViewer';
+import { TMColors } from '../../../../utils/theme';
+import TMPathChooser from '../../../choosers/TMPathChooser';
+import TMTextExpression from '../../../editors/TMTextExpression';
+import TMCultureIDPicker from '../../../choosers/TMCultureIDPicker';
+import RecipientList, { WorkItemActorTypes } from './RecipientList';
+import TMRadioButton from '../../../editors/TMRadioButton';
+import TMVilViewer from '../../../base/TMVilViewer';
+import { DiagramItemProps, wfDiagramItemValidator } from './workflowHelpers';
+const FormContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 10px;
+`;
+const FlexContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 20px;
+`;
+const BoxContainer = 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;
+  font-weight: 600;
+`;
+const ButtonsContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  gap: 10px; 
+  margin-top: auto; 
+  padding-top: 20px;
+`;
+const SET_RULE_DATASOURCE = [
+    { value: WorkItemSetRules.Ands_AND_Ors, display: "Ands_AND_Ors" },
+    { value: WorkItemSetRules.Ands_OR_Ors, display: "Ands_OR_Ors" }
+];
+const SEVERITY_DATASOURCE = [
+    { value: Severities.Critical, display: "Critical" },
+    { value: Severities.Error, display: "Error" },
+    { value: Severities.Warning, display: "Warning" },
+    { value: Severities.Information, display: "Information" },
+];
+const APP_TYPES_DATASOURCE = [
+    { value: WFAppTypes.EXE, display: "EXE" },
+    { value: WFAppTypes.SP, display: "SP" },
+    { value: WFAppTypes.REST, display: "REST" }
+];
+const DiagramItemForm = ({ itemToEdit, wf, onClose, onApply }) => {
+    const [localItem, setLocalItem] = useState(itemToEdit);
+    const [localItemOrig] = useState(structuredClone(itemToEdit));
+    const [validationItems, setValidationItems] = useState([]);
+    if (!localItem) {
+        return null;
+    }
+    const { calculatedWidth, calculatedHeight } = useMemo(() => {
+        let width = '50%';
+        let height = '50%';
+        switch (localItem.Type) {
+            case DiagramItemTypes.Start:
+                width = '515px';
+                height = '235px';
+                break;
+            case DiagramItemTypes.End:
+            case DiagramItemTypes.Exit:
+                width = '365px';
+                height = '145px';
+                break;
+            case DiagramItemTypes.Condition:
+                width = '40%';
+                height = '60%';
+                break;
+            case DiagramItemTypes.Status:
+                width = '700px';
+                height = '230px';
+                break;
+            case DiagramItemTypes.Approval:
+            case DiagramItemTypes.DataEntry:
+                width = '700px';
+                height = '530px';
+                break;
+            case DiagramItemTypes.ExecTask:
+                width = '700px';
+                height = '700px';
+                break;
+            case DiagramItemTypes.UpdateDcmt:
+                width = '700px';
+                height = '510px';
+                break;
+            case DiagramItemTypes.RunApp:
+                width = '450px';
+                height = '420px';
+                break;
+            case DiagramItemTypes.Notification:
+                width = '700px';
+                height = '700px';
+                break;
+            case DiagramItemTypes.WorkGroup_Create:
+            case DiagramItemTypes.CaseFlow_Create:
+                width = '700px';
+                height = '700px';
+                break;
+            case DiagramItemTypes.WorkGroup_AddParts:
+            case DiagramItemTypes.CaseFlow_AddParts:
+                width = '700px';
+                height = '530px';
+                break;
+            default:
+                width = '50%';
+                height = '50%';
+                break;
+        }
+        return { calculatedWidth: width, calculatedHeight: height };
+    }, [localItem.Type]);
+    useEffect(() => {
+        wfDiagramItemValidator(localItem).then((vil) => setValidationItems(vil));
+    }, [localItem]);
+    const isModified = useMemo(() => calcIsModified(localItem, localItemOrig), [localItem, localItemOrig]);
+    const handleCancel = () => {
+        setLocalItem(localItemOrig);
+    };
+    const handleSave = () => {
+        onApply(localItem);
+        onClose();
+    };
+    const handleStartAfterArchiveChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            StartAfterArchive: newValue
+        }));
+    }, []);
+    const handleStartAfterUpdateChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            StartAfterUpdate: newValue
+        }));
+    }, []);
+    const handleStartAfterUpdateMIDsChange = useCallback((selectedMetadata) => {
+        const mids = selectedMetadata.map((item) => item.mid).filter((mid) => mid !== undefined);
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            StartAfterUpdateMIDs: mids
+        }));
+    }, []);
+    const handleHistChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            Hist: newValue
+        }));
+    }, []);
+    const handleEndWFInstanceChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            EndWFInstance: newValue
+        }));
+    }, []);
+    const handleQDChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            QD: newValue
+        }));
+    }, []);
+    const handleStatusChange = useCallback((selectedItem) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            ItemName: selectedItem.name || '',
+            StatusValue: selectedItem.value
+        }));
+    }, []);
+    const handleAllowZeroTosChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            AllowZeroTos: newValue
+        }));
+    }, []);
+    const handleTosChange = useCallback((newTos) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            Tos: newTos
+        }));
+    }, []);
+    const handleSetRuleChange = useCallback((newRule) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            SetRule: newRule
+        }));
+    }, []);
+    const handleSetRuleQDChange = useCallback((newQD) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            QD: newQD
+        }));
+    }, []);
+    const handleLocalizedNameChange = useCallback((lang, newValue) => {
+        setLocalItem(prevLocalItem => {
+            const updatedItem = { ...prevLocalItem };
+            // Aggiungi la logica per aggiornare il campo corretto
+            switch (lang) {
+                case CultureIDs.It_IT:
+                    updatedItem.ItemName_IT = newValue;
+                    break;
+                case CultureIDs.En_US:
+                    updatedItem.ItemName_EN = newValue;
+                    break;
+                case CultureIDs.Fr_FR:
+                    updatedItem.ItemName_FR = newValue;
+                    break;
+                case CultureIDs.Pt_PT:
+                    updatedItem.ItemName_PT = newValue;
+                    break;
+                case CultureIDs.Es_ES:
+                    updatedItem.ItemName_ES = newValue;
+                    break;
+                case CultureIDs.De_DE:
+                    updatedItem.ItemName_DE = newValue;
+                    break;
+                default:
+                    updatedItem.ItemName = newValue;
+                    break;
+            }
+            return updatedItem;
+        });
+    }, []);
+    const handleLocalizedDescriptionChange = useCallback((lang, newValue) => {
+        setLocalItem(prevLocalItem => {
+            const updatedItem = { ...prevLocalItem };
+            // Aggiungi la logica per aggiornare il campo corretto
+            switch (lang) {
+                case CultureIDs.It_IT:
+                    updatedItem.Description_IT = newValue;
+                    break;
+                case CultureIDs.En_US:
+                    updatedItem.Description_EN = newValue;
+                    break;
+                case CultureIDs.Fr_FR:
+                    updatedItem.Description_FR = newValue;
+                    break;
+                case CultureIDs.Pt_PT:
+                    updatedItem.Description_PT = newValue;
+                    break;
+                case CultureIDs.Es_ES:
+                    updatedItem.Description_ES = newValue;
+                    break;
+                case CultureIDs.De_DE:
+                    updatedItem.Description_DE = newValue;
+                    break;
+                default:
+                    updatedItem.Description = newValue;
+                    break;
+            }
+            return updatedItem;
+        });
+    }, []);
+    const handleMetadataValuesChanged = useCallback((newItems) => {
+        const updatedMetadataValues = newItems
+            .filter(item => item.isNull || item.value)
+            .map(item => {
+            const newMvd = new MetadataValueDescriptorEx();
+            newMvd.mid = item.mid;
+            newMvd.value = item.isNull ? undefined : item.value;
+            return newMvd;
+        });
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            MetadataValues: updatedMetadataValues
+        }));
+    }, []);
+    const handleAppTypeChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            AppType: newValue
+        }));
+    }, []);
+    const handleAppNameChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            AppName: newValue
+        }));
+    }, []);
+    const handleAppArgsChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            AppArgs: newValue
+        }));
+    }, []);
+    const handleFormatCultureIDChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            FormatCultureID: newValue
+        }));
+    }, []);
+    const handlePlatformObjNameChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            PlatformObjName: newValue
+        }));
+    }, []);
+    const handlePlatformObjDescrChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            PlatformObjDescr: newValue
+        }));
+    }, []);
+    const handleValue1asStringChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            Value1asString: newValue
+        }));
+    }, []);
+    const handleValue1asIntChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            Value1asInt: newValue
+        }));
+    }, []);
+    const handleValue2asIntChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            Value2asInt: newValue
+        }));
+    }, []);
+    const handleValue3asIntChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            Value3asInt: newValue
+        }));
+    }, []);
+    const handleTruncChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            Trunc: newValue
+        }));
+    }, []);
+    const handleTos2Change = useCallback((newTos) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            Tos2: newTos
+        }));
+    }, []);
+    // Function to render common elements like the name textbox
+    const renderCommonFields = () => {
+        if (localItem.Type !== DiagramItemTypes.Start && localItem.Type !== DiagramItemTypes.End && localItem.Type !== DiagramItemTypes.Exit && localItem.Type !== DiagramItemTypes.Status) {
+            return (_jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Name, value: localItem.ItemName, isModifiedWhen: localItem.ItemName !== localItemOrig.ItemName, value_IT: localItem.ItemName_IT, value_EN: localItem.ItemName_EN, value_FR: localItem.ItemName_FR, value_PT: localItem.ItemName_PT, value_ES: localItem.ItemName_ES, value_DE: localItem.ItemName_DE, validationItems: validationItems.filter(v => v.PropertyName === DiagramItemProps.ItemName), onValueChanged: handleLocalizedNameChange }));
+        }
+        return null;
+    };
+    // Function to render Start-specific fields
+    const renderStartFields = () => {
+        return (_jsxs(_Fragment, { children: [_jsx(TMVilViewer, { vil: validationItems.filter(v => v.PropertyName === "*") }), _jsx(TMCheckBox, { value: localItem.StartAfterArchive ?? 0, label: SDKUI_Localizator.WorkflowStartAfterArchive, isModifiedWhen: localItem.StartAfterArchive !== localItemOrig.StartAfterArchive, onValueChanged: handleStartAfterArchiveChange }), _jsx(TMCheckBox, { value: localItem.StartAfterUpdate ?? 0, label: SDKUI_Localizator.WorkflowStartAfterUpdate, isModifiedWhen: localItem.StartAfterUpdate !== localItemOrig.StartAfterUpdate, onValueChanged: handleStartAfterUpdateChange }), _jsx(TMMetadataChooser, { tids: wf?.MTID ? [wf.MTID] : [], allowMultipleSelection: true, allowSysMetadata: false, showClearButton: true, disabled: localItem.StartAfterUpdate !== 1, values: localItem.StartAfterUpdateMIDs?.map((mid) => ({ tid: wf?.MTID, mid: mid })) ?? [], validationItems: validationItems.filter(v => v.PropertyName === DiagramItemProps.StartAfterUpdateMIDs), onValueChanged: handleStartAfterUpdateMIDsChange, width: "100%" })] }));
+    };
+    // Function to render End-specific fields
+    const renderEndFields = () => {
+        return (_jsx(TMCheckBox, { value: localItem.Hist ?? 0, label: SDKUI_Localizator.WorkflowHistWI, isModifiedWhen: localItem.Hist !== localItemOrig.Hist, onValueChanged: handleHistChange }));
+    };
+    // Function to render Exit-specific fields
+    const renderExitFields = () => {
+        return (_jsx(TMCheckBox, { value: localItem.EndWFInstance ?? 0, label: SDKUI_Localizator.WorkflowEndInstance, isModifiedWhen: localItem.EndWFInstance !== localItemOrig.EndWFInstance, onValueChanged: handleEndWFInstanceChange }));
+    };
+    // Function to render Condition-specific fields
+    const renderConditionFields = () => {
+        return (_jsx(TMQuerySummary, { qd: localItem.QD, showDistinct: true, validateSelect: true, validateOrderBy: false, validationItems: validationItems.filter(v => v.PropertyScopes.includes(DiagramItemProps.QD)), onValueChanged: handleQDChange }));
+    };
+    // Function to render Status-specific fields
+    const renderStatusFields = () => {
+        return (_jsx(TMDataListItemPicker, { dataListID: wf?.MStatusDLID, selectedValue: localItem.StatusValue, onItemSelect: handleStatusChange }));
+    };
+    const renderAppFields = () => {
+        return (_jsxs(_Fragment, { children: [_jsx(TMDropDown, { label: SDKUI_Localizator.WorkflowAppType, dataSource: APP_TYPES_DATASOURCE, value: localItem.AppType, isModifiedWhen: localItem.AppType !== localItemOrig.AppType, validationItems: validationItems.filter(v => v.PropertyName === DiagramItemProps.AppType), onValueChanged: (e) => { handleAppTypeChange(e.target.value); } }), localItem.AppType === WFAppTypes.EXE
+                    ? _jsx(TMPathChooser, { label: SDKUI_Localizator.WorkflowAppName, value: localItem.AppName || '', isModifiedWhen: (localItem.AppName ?? '') !== (localItemOrig.AppName ?? ''), onValueChanged: (newValue) => { handleAppNameChange(newValue); }, allowBrowseFile_Area: true, allowBrowseFolder_Area: false, allowParametricPath: false, validationItems: validationItems.filter(v => v.PropertyName === DiagramItemProps.AppName) })
+                    : _jsx(TMTextBox, { label: SDKUI_Localizator.WorkflowAppName, value: localItem.AppName, isModifiedWhen: (localItem.AppName ?? '') !== (localItemOrig.AppName ?? ''), validationItems: validationItems.filter(v => v.PropertyName === DiagramItemProps.AppName), onValueChanged: (e) => { handleAppNameChange(e.target.value); } }), _jsx(TMTextExpression, { label: SDKUI_Localizator.Arguments, value: localItem.AppArgs, valueOrig: localItemOrig.AppArgs, tid: wf?.MTID, onValueChanged: (newValue) => { handleAppArgsChange(newValue); } }), _jsx(TMCultureIDPicker, { label: SDKUI_Localizator.Format, selectedValue: localItem.FormatCultureID, isModifiedWhen: localItem.FormatCultureID !== localItemOrig.FormatCultureID, openChooserBySingleClick: true, onSelectCultureID: handleFormatCultureIDChange })] }));
+    };
+    // Function to render Approval-specific fields
+    const renderApprovalFields = () => {
+        const newQD = () => {
+            const qd = SearchEngine.NewQueryDescriptor();
+            qd.id = -1;
+            qd.from = new FromItem();
+            qd.from.tid = wf?.MTID;
+            return qd;
+        };
+        const qdForRecipientsEditor = localItem.QD ?? newQD();
+        return (_jsxs(_Fragment, { children: [_jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Description, value: localItem.Description, value_IT: localItem.Description_IT, value_EN: localItem.Description_EN, value_FR: localItem.Description_FR, value_PT: localItem.Description_PT, value_ES: localItem.Description_ES, value_DE: localItem.Description_DE, isModifiedWhen: localItem.Description !== localItemOrig.Description, validationItems: validationItems.filter(v => v.PropertyName === DiagramItemProps.Description), onValueChanged: handleLocalizedDescriptionChange }), _jsx(TMTextBox, { label: "SetID", value: localItem.ID ?? '', readOnly: true }), _jsx(WorkitemRecipientsEditor, { tos: localItem.Tos ?? '', mTID: wf?.MTID, qd: qdForRecipientsEditor, onTosChange: handleTosChange, onQDChange: handleSetRuleQDChange }), _jsx(TMVilViewer, { vil: validationItems.filter(v => v.PropertyName === DiagramItemProps.Tos) }), _jsxs(FlexContainer, { children: [_jsx(TMDropDown, { label: SDKUI_Localizator.WorkflowRecipientSetRule, elementStyle: { width: '320px' }, dataSource: SET_RULE_DATASOURCE, value: localItem.SetRule, isModifiedWhen: localItem.SetRule !== localItemOrig.SetRule, onValueChanged: (e) => { handleSetRuleChange(e.target.value); } }), _jsx(TMCheckBox, { value: localItem.AllowZeroTos ?? 0, label: SDKUI_Localizator.WorkflowAllowZeroTos, isModifiedWhen: localItem.AllowZeroTos !== localItemOrig.AllowZeroTos, onValueChanged: handleAllowZeroTosChange })] }), localItem.Type === DiagramItemTypes.ExecTask &&
+                    _jsxs(BoxContainer, { children: [_jsx(HeaderContainer, { children: _jsx("span", { children: SDKUI_Localizator.Application }) }), renderAppFields()] })] }));
+    };
+    // Function to render UpdateDcmt-specific fields
+    const renderUpdateDcmtFields = () => {
+        const [metadataValues, setMetadataValues] = useState([]);
+        const [metadataValuesOrig, setMetadataValuesOrig] = useState([]);
+        const [focusedMetadataValue, setFocusedMetadataValue] = useState();
+        const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
+        const [showFormulaEditor, setShowFormulaEditor] = useState(false);
+        const [dtd, setDtd] = useState();
+        const TID = wf?.MTID;
+        useEffect(() => {
+            DcmtTypeListCacheService.GetAsync(TID).then((dtd) => setDtd(dtd));
+        }, [TID]);
+        useEffect(() => {
+            const mappedValues = dtd?.metadata?.filter(o => o.dataDomain !== MetadataDataDomains.Computed &&
+                o.isSystem !== 1).map(item => ({
+                mid: item.id,
+                tid: TID,
+                value: localItem.MetadataValues?.find(o => o.mid === item.id)?.value,
+                md: item,
+                isRequired: item.isRequired,
+                isEditable: FormulaHelper.isFormula(localItem.MetadataValues?.find(o => o.mid === item.id)?.value),
+                isLexProt: 0,
+                isSelected: localItem.MetadataValues?.find(o => o.mid === item.id) !== undefined,
+                isNull: localItem.MetadataValues?.find(o => o.mid === item.id) && localItem.MetadataValues?.find(o => o.mid === item.id)?.value === undefined,
+            }));
+            setMetadataValues(mappedValues);
+            setMetadataValuesOrig(structuredClone(mappedValues));
+            setFocusedMetadataValue(undefined);
+            setShowDistinctValuesPanel(false);
+            setShowFormulaEditor(false);
+        }, [dtd, localItem.MetadataValues]);
+        const getFormula = () => {
+            let fd = new FormulaDescriptor();
+            fd.expression = FormulaHelper.isFormula(focusedMetadataValue?.value) ? FormulaHelper.removeFormulaTag(focusedMetadataValue?.value) : undefined;
+            fd.formulaTarget = FormulaTargets.BatchUpdate;
+            fd.items = FormulaHelper.TreeViewList(TID ?? 0, getSystemMetadata(true), undefined, FormulaTargets.BatchUpdate, SDK_Globals.dbBrand);
+            fd.mid = focusedMetadataValue?.mid ?? 0;
+            fd.tid = TID;
+            return fd;
+        };
+        const handleAdvancedMenuClick = useCallback((e) => {
+            switch (e.button) {
+                case AdvancedMenuButtons.DistinctValues:
+                    setShowDistinctValuesPanel(prev => !prev);
+                    setShowFormulaEditor(false);
+                    break;
+                case AdvancedMenuButtons.FormulaEditor:
+                    setShowFormulaEditor(prev => !prev);
+                    setShowDistinctValuesPanel(false);
+                    break;
+            }
+        }, []);
+        return (_jsxs(_Fragment, { children: [_jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Description, value: localItem.Description, value_IT: localItem.Description_IT, value_EN: localItem.Description_EN, value_FR: localItem.Description_FR, value_PT: localItem.Description_PT, value_ES: localItem.Description_ES, value_DE: localItem.Description_DE, isModifiedWhen: localItem.Description !== localItemOrig.Description, onValueChanged: handleLocalizedDescriptionChange }), _jsxs(BoxContainer, { children: [_jsx(HeaderContainer, { children: _jsx(TMTidViewer, { tid: wf?.MTID, showIcon: true }) }), _jsx(TMMetadataValues, { TID: wf?.MTID, isExpertMode: true, checkPerms: false, showCheckBoxes: ShowCheckBoxesMode.AlwaysReadOnly, showNullValueCheckBoxes: true, metadataValues: metadataValues, metadataValuesOrig: metadataValuesOrig, validationItems: validationItems, isOpenDistinctValues: showDistinctValuesPanel, selectedMID: focusedMetadataValue?.mid, onFocusedItemChanged: (item) => setFocusedMetadataValue(item), onAdvancedMenuClick: handleAdvancedMenuClick, onValueChanged: handleMetadataValuesChanged }), showDistinctValuesPanel && focusedMetadataValue &&
+                            _jsx(TMDistinctValues, { isModal: true, tid: TID, mid: focusedMetadataValue?.mid, separator: ', ', allowAppendMode: false, onClosePanelCallback: () => setShowDistinctValuesPanel(false), onSelectionChanged: (e) => {
+                                    if (!e)
+                                        return;
+                                    setMetadataValues((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue, isSelected: true } : item));
+                                } }), showFormulaEditor && focusedMetadataValue &&
+                            _jsx(TMFormulaEditor, { isModal: true, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setShowFormulaEditor(false), onApplied: (newFormula) => {
+                                    setMetadataValues((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
+                                    setFocusedMetadataValue(prevState => ({
+                                        ...prevState,
+                                        isSelected: true,
+                                        isEditable: true,
+                                        value: FormulaHelper.addFormulaTag(newFormula.expression)
+                                    }));
+                                } })] })] }));
+    };
+    // Function to render RunApp-specific fields
+    const renderRunAppFields = () => {
+        return (_jsxs(_Fragment, { children: [_jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Description, value: localItem.Description, value_IT: localItem.Description_IT, value_EN: localItem.Description_EN, value_FR: localItem.Description_FR, value_PT: localItem.Description_PT, value_ES: localItem.Description_ES, value_DE: localItem.Description_DE, isModifiedWhen: localItem.Description !== localItemOrig.Description, onValueChanged: handleLocalizedDescriptionChange }), renderAppFields()] }));
+    };
+    const handleRegAsWfInstPartChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            RegAsWfInstPart: newValue
+        }));
+    }, []);
+    const renderNotificationFields = () => {
+        const qdForRecipientsEditor = localItem.QD ?? SearchEngine.NewQueryDescriptor();
+        if (!qdForRecipientsEditor.from) {
+            qdForRecipientsEditor.from = new FromItem();
+        }
+        qdForRecipientsEditor.from.tid = wf?.MTID;
+        const { andRecipients } = useMemo(() => {
+            return tosToActors(localItem.Tos ?? '');
+        }, [localItem.Tos]);
+        const handleQDChosen = useCallback((newQd, orValue) => {
+            const allRecipients = [...andRecipients];
+            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);
+            handleTosChange(newTos);
+            handleSetRuleQDChange(newQd);
+        }, [andRecipients]);
+        const handleAddRecipients = useCallback((newRecipients, orValue) => {
+            const { andRecipients } = tosToActors(localItem.Tos ?? '');
+            let allRecipients = [...andRecipients];
+            // 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);
+            handleTosChange(newTos);
+        }, [localItem.Tos, handleTosChange]);
+        const handleRemoveRecipient = useCallback((recipientToRemove) => {
+            const { andRecipients } = tosToActors(localItem.Tos ?? '');
+            const allRecipients = [...andRecipients];
+            const updatedRecipients = allRecipients.filter(r => r.ActorType !== recipientToRemove.ActorType || r.ActorID !== recipientToRemove.ActorID || r.Or !== recipientToRemove.Or);
+            const newTos = actorsToTos(updatedRecipients);
+            handleTosChange(newTos);
+            if (recipientToRemove.ActorType === WorkItemActorTypes.QID) {
+                handleSetRuleQDChange(undefined);
+            }
+        }, [localItem]);
+        return (_jsxs(_Fragment, { children: [_jsx(TMTextExpression, { label: SDKUI_Localizator.Description, placeHolder: SDKUI_Localizator.WorkflowNotificationTextPlaceholder, rows: 3, value: localItem.Description, tid: wf?.MTID, isModifiedWhen: (localItem.Description ?? '') !== (localItemOrig.Description ?? ''), onValueChanged: (newValue) => handleLocalizedDescriptionChange(CultureIDs.None, newValue ?? ''), validationItems: validationItems.filter(v => v.PropertyName === DiagramItemProps.Description), valueOrig: undefined }), _jsx(TMDropDown, { label: SDKUI_Localizator.Severity, dataSource: SEVERITY_DATASOURCE, value: localItem.Severity, isModifiedWhen: localItem.Severity !== localItemOrig.Severity, validationItems: validationItems.filter(v => v.PropertyName === DiagramItemProps.Severity), onValueChanged: (e) => setLocalItem(prevLocalItem => ({ ...prevLocalItem, Severity: e.target.value })) }), _jsx(TMCultureIDPicker, { label: SDKUI_Localizator.Format, selectedValue: localItem.FormatCultureID, isModifiedWhen: localItem.FormatCultureID !== localItemOrig.FormatCultureID, openChooserBySingleClick: true, onSelectCultureID: handleFormatCultureIDChange }), _jsx(TMCheckBox, { value: localItem.RegAsWfInstPart ?? 0, label: SDKUI_Localizator.WorkflowRegAsWfInstPart, isModifiedWhen: localItem.RegAsWfInstPart !== localItemOrig.RegAsWfInstPart, onValueChanged: handleRegAsWfInstPartChange }), _jsx(RecipientList, { recipients: andRecipients, title: SDKUI_Localizator.Recipients, tid: wf?.MTID, qd: qdForRecipientsEditor, onQDChange: (newQd) => newQd && handleQDChosen(newQd, 0), onAdd: (newRecipients) => handleAddRecipients(newRecipients, 0), onRemove: handleRemoveRecipient }), _jsx(TMVilViewer, { vil: validationItems.filter(v => v.PropertyName === DiagramItemProps.Tos) })] }));
+    };
+    const renderWorkingGroupCreateFields = () => {
+        // Gestione di Tos e Tos2
+        const { andRecipients: tosRecipients } = useMemo(() => {
+            return tosToActors(localItem.Tos ?? '');
+        }, [localItem.Tos]);
+        const { andRecipients: tos2Recipients } = useMemo(() => {
+            return tosToActors(localItem.Tos2 ?? '');
+        }, [localItem.Tos2]);
+        const handleAddTosRecipients = useCallback((newRecipients, orValue) => {
+            const { andRecipients } = tosToActors(localItem.Tos ?? '');
+            const updatedRecipients = [...andRecipients, ...newRecipients.map(r => ({ ...r, Or: orValue }))];
+            const newTos = actorsToTos(updatedRecipients);
+            handleTosChange(newTos);
+        }, [localItem.Tos, handleTosChange]);
+        const handleRemoveTosRecipient = useCallback((recipientToRemove) => {
+            const { andRecipients } = tosToActors(localItem.Tos ?? '');
+            const updatedRecipients = andRecipients.filter(r => r.ActorType !== recipientToRemove.ActorType || r.ActorID !== recipientToRemove.ActorID);
+            const newTos = actorsToTos(updatedRecipients);
+            handleTosChange(newTos);
+        }, [localItem.Tos, handleTosChange]);
+        const handleAddTos2Recipients = useCallback((newRecipients, orValue) => {
+            const { andRecipients } = tosToActors(localItem.Tos2 ?? '');
+            const updatedRecipients = [...andRecipients, ...newRecipients.map(r => ({ ...r, Or: orValue }))];
+            const newTos = actorsToTos(updatedRecipients);
+            handleTos2Change(newTos);
+        }, [localItem.Tos2, handleTos2Change]);
+        const handleRemoveTos2Recipient = useCallback((recipientToRemove) => {
+            const { andRecipients } = tosToActors(localItem.Tos2 ?? '');
+            const updatedRecipients = andRecipients.filter(r => r.ActorType !== recipientToRemove.ActorType || r.ActorID !== recipientToRemove.ActorID);
+            const newTos = actorsToTos(updatedRecipients);
+            handleTos2Change(newTos);
+        }, [localItem.Tos2, handleTos2Change]);
+        return (_jsxs(_Fragment, { children: [_jsx(TMTextExpression, { label: `${SDKUI_Localizator.Name} (${SDKUI_Localizator.Dossier})`, value: localItem.PlatformObjName, valueOrig: localItemOrig.PlatformObjName, tid: wf?.MTID, isModifiedWhen: (localItem.PlatformObjName ?? '') !== (localItemOrig.PlatformObjName ?? ''), onValueChanged: handlePlatformObjNameChange }), _jsx(TMTextExpression, { label: `${SDKUI_Localizator.Description} (${SDKUI_Localizator.Dossier})`, value: localItem.PlatformObjDescr, valueOrig: localItemOrig.PlatformObjDescr, tid: wf?.MTID, isModifiedWhen: (localItem.PlatformObjDescr ?? '') !== (localItemOrig.PlatformObjDescr ?? ''), onValueChanged: handlePlatformObjDescrChange }), _jsx(TMCultureIDPicker, { label: SDKUI_Localizator.Format, selectedValue: localItem.FormatCultureID, isModifiedWhen: localItem.FormatCultureID !== localItemOrig.FormatCultureID, openChooserBySingleClick: true, onSelectCultureID: handleFormatCultureIDChange }), _jsx(TMTextExpression, { label: `${SDKUI_Localizator.CommentText} (${SDKUI_Localizator.BlogCase})`, placeHolder: 'Inserisci il valore', rows: 2, value: localItem.Value1asString, valueOrig: localItemOrig.Value1asString, tid: wf?.MTID, isModifiedWhen: (localItem.Value1asString ?? '') !== (localItemOrig.Value1asString ?? ''), onValueChanged: handleValue1asStringChange }), _jsx(TMCheckBox, { value: localItem.Value1asInt ?? 0, label: SDKUI_Localizator.WorkflowAddDraftToWg, isModifiedWhen: localItem.Value1asInt !== localItemOrig.Value1asInt, onValueChanged: handleValue1asIntChange }), _jsx(TMCheckBox, { value: localItem.Value2asInt ?? 0, label: SDKUI_Localizator.WorkflowAddDcmtToWg, isModifiedWhen: localItem.Value2asInt !== localItemOrig.Value2asInt, onValueChanged: handleValue2asIntChange }), _jsx(TMCheckBox, { value: localItem.Trunc ?? 0, label: SDKUI_Localizator.TruncateString, isModifiedWhen: localItem.Trunc !== localItemOrig.Trunc, onValueChanged: handleTruncChange }), _jsxs(RecipientsContainer, { children: [_jsx(RecipientList, { recipients: tosRecipients, title: SDKUI_Localizator.OwnerName, tid: wf?.MTID, onAdd: (newRecipients) => handleAddTosRecipients(newRecipients, 0), onRemove: handleRemoveTosRecipient }), _jsx(RecipientList, { recipients: tos2Recipients, title: SDKUI_Localizator.Participants, tid: wf?.MTID, onAdd: (newRecipients) => handleAddTos2Recipients(newRecipients, 0), onRemove: handleRemoveTos2Recipient })] })] }));
+    };
+    const renderCaseFlowCreateFields = () => {
+        const [dossierTypes, setDossierTypes] = useState([]);
+        useEffect(() => {
+            SDK_Globals.tmSession?.NewDossierTypeEngine().RetrieveAllAsync().then((list) => {
+                const formattedList = (list ?? []).map(dossierType => ({
+                    value: dossierType.id,
+                    display: dossierType.name ?? ''
+                }));
+                setDossierTypes(formattedList);
+            });
+        }, [localItem.Type]);
+        // Gestione di Tos e Tos2
+        const { andRecipients: tosRecipients } = useMemo(() => {
+            return tosToActors(localItem.Tos ?? '');
+        }, [localItem.Tos]);
+        const { andRecipients: tos2Recipients } = useMemo(() => {
+            return tosToActors(localItem.Tos2 ?? '');
+        }, [localItem.Tos2]);
+        const handleAddTosRecipients = useCallback((newRecipients, orValue) => {
+            const { andRecipients } = tosToActors(localItem.Tos ?? '');
+            const updatedRecipients = [...andRecipients, ...newRecipients.map(r => ({ ...r, Or: orValue }))];
+            const newTos = actorsToTos(updatedRecipients);
+            handleTosChange(newTos);
+        }, [localItem.Tos, handleTosChange]);
+        const handleRemoveTosRecipient = useCallback((recipientToRemove) => {
+            const { andRecipients } = tosToActors(localItem.Tos ?? '');
+            const updatedRecipients = andRecipients.filter(r => r.ActorType !== recipientToRemove.ActorType || r.ActorID !== recipientToRemove.ActorID);
+            const newTos = actorsToTos(updatedRecipients);
+            handleTosChange(newTos);
+        }, [localItem.Tos, handleTosChange]);
+        const handleAddTos2Recipients = useCallback((newRecipients, orValue) => {
+            const { andRecipients } = tosToActors(localItem.Tos2 ?? '');
+            const updatedRecipients = [...andRecipients, ...newRecipients.map(r => ({ ...r, Or: orValue }))];
+            const newTos = actorsToTos(updatedRecipients);
+            handleTos2Change(newTos);
+        }, [localItem.Tos2, handleTos2Change]);
+        const handleRemoveTos2Recipient = useCallback((recipientToRemove) => {
+            const { andRecipients } = tosToActors(localItem.Tos2 ?? '');
+            const updatedRecipients = andRecipients.filter(r => r.ActorType !== recipientToRemove.ActorType || r.ActorID !== recipientToRemove.ActorID);
+            const newTos = actorsToTos(updatedRecipients);
+            handleTos2Change(newTos);
+        }, [localItem.Tos2, handleTos2Change]);
+        return (_jsxs(_Fragment, { children: [_jsx(TMTextExpression, { label: `${SDKUI_Localizator.Name} (${SDKUI_Localizator.Dossier})`, value: localItem.PlatformObjName, valueOrig: localItemOrig.PlatformObjName, tid: wf?.MTID, isModifiedWhen: (localItem.PlatformObjName ?? '') !== (localItemOrig.PlatformObjName ?? ''), onValueChanged: handlePlatformObjNameChange }), _jsx(TMDropDown, { dataSource: dossierTypes, label: `${SDKUI_Localizator.Description} (${SDKUI_Localizator.Dossier})`, value: localItem.Value3asInt, isModifiedWhen: (localItem.Value3asInt ?? 0) !== (localItemOrig.Value3asInt ?? 0), onValueChanged: (e) => { handleValue3asIntChange(e.target.value); } }), _jsx(TMTextExpression, { label: `${SDKUI_Localizator.Description} (${SDKUI_Localizator.Dossier})`, value: localItem.PlatformObjDescr, valueOrig: localItemOrig.PlatformObjDescr, tid: wf?.MTID, isModifiedWhen: (localItem.PlatformObjDescr ?? '') !== (localItemOrig.PlatformObjDescr ?? ''), onValueChanged: handlePlatformObjDescrChange }), _jsx(TMCultureIDPicker, { label: SDKUI_Localizator.Format, selectedValue: localItem.FormatCultureID, isModifiedWhen: localItem.FormatCultureID !== localItemOrig.FormatCultureID, openChooserBySingleClick: true, onSelectCultureID: handleFormatCultureIDChange }), _jsx(TMTextExpression, { label: `${SDKUI_Localizator.CommentText} (${SDKUI_Localizator.BlogCase})`, placeHolder: 'Inserisci il valore', rows: 2, value: localItem.Value1asString, valueOrig: localItemOrig.Value1asString, tid: wf?.MTID, isModifiedWhen: (localItem.Value1asString ?? '') !== (localItemOrig.Value1asString ?? ''), onValueChanged: handleValue1asStringChange }), _jsx(TMCheckBox, { value: localItem.Value1asInt ?? 0, label: SDKUI_Localizator.WorkflowAddDcmtAsAttachment, isModifiedWhen: localItem.Value1asInt !== localItemOrig.Value1asInt, onValueChanged: handleValue1asIntChange }), _jsx(TMCheckBox, { value: localItem.Value2asInt ?? 0, label: SDKUI_Localizator.WorkflowAddDcmtToDossier, isModifiedWhen: localItem.Value2asInt !== localItemOrig.Value2asInt, onValueChanged: handleValue2asIntChange }), _jsx(TMCheckBox, { value: localItem.Trunc ?? 0, label: SDKUI_Localizator.TruncateString, isModifiedWhen: localItem.Trunc !== localItemOrig.Trunc, onValueChanged: handleTruncChange }), _jsxs(RecipientsContainer, { children: [_jsx(RecipientList, { recipients: tosRecipients, title: SDKUI_Localizator.OwnerName, tid: wf?.MTID, onAdd: (newRecipients) => handleAddTosRecipients(newRecipients, 0), onRemove: handleRemoveTosRecipient }), _jsx(RecipientList, { recipients: tos2Recipients, title: SDKUI_Localizator.Participants, tid: wf?.MTID, onAdd: (newRecipients) => handleAddTos2Recipients(newRecipients, 0), onRemove: handleRemoveTos2Recipient })] })] }));
+    };
+    const renderAddPartsFields = () => {
+        const { andRecipients: tosRecipients } = useMemo(() => {
+            return tosToActors(localItem.Tos ?? '');
+        }, [localItem.Tos]);
+        const handleAddTosRecipients = useCallback((newRecipients, orValue) => {
+            const { andRecipients } = tosToActors(localItem.Tos ?? '');
+            const updatedRecipients = [...andRecipients, ...newRecipients.map(r => ({ ...r, Or: orValue }))];
+            const newTos = actorsToTos(updatedRecipients);
+            handleTosChange(newTos);
+        }, [localItem.Tos, handleTosChange]);
+        const handleRemoveTosRecipient = useCallback((recipientToRemove) => {
+            const { andRecipients } = tosToActors(localItem.Tos ?? '');
+            const updatedRecipients = andRecipients.filter(r => r.ActorType !== recipientToRemove.ActorType || r.ActorID !== recipientToRemove.ActorID);
+            const newTos = actorsToTos(updatedRecipients);
+            handleTosChange(newTos);
+        }, [localItem.Tos, handleTosChange]);
+        return (_jsxs(_Fragment, { children: [_jsx(TMTextExpression, { label: `${SDKUI_Localizator.Name} (${localItem.Type === DiagramItemTypes.CaseFlow_AddParts ? SDKUI_Localizator.Dossier : SDKUI_Localizator.WorkGroup})`, value: localItem.PlatformObjName, valueOrig: localItemOrig.PlatformObjName, tid: wf?.MTID, isModifiedWhen: (localItem.PlatformObjName ?? '') !== (localItemOrig.PlatformObjName ?? ''), onValueChanged: handlePlatformObjNameChange }), _jsx(TMCultureIDPicker, { label: SDKUI_Localizator.Format, selectedValue: localItem.FormatCultureID, isModifiedWhen: localItem.FormatCultureID !== localItemOrig.FormatCultureID, openChooserBySingleClick: true, onSelectCultureID: handleFormatCultureIDChange }), _jsx(TMCheckBox, { value: localItem.Trunc ?? 0, label: SDKUI_Localizator.TruncateString, isModifiedWhen: localItem.Trunc !== localItemOrig.Trunc, onValueChanged: handleTruncChange }), _jsx(TMRadioButton, { label: SDKUI_Localizator.OperationType, dataSource: [
+                        { value: 1, display: SDKUI_Localizator.Add },
+                        { value: 0, display: SDKUI_Localizator.Remove },
+                    ], value: localItem.Value1asInt, isModifiedWhen: localItem.Value1asInt !== localItemOrig.Value1asInt, onValueChanged: handleValue1asIntChange }), _jsx(RecipientList, { recipients: tosRecipients, title: SDKUI_Localizator.OwnerName, tid: wf?.MTID, onAdd: (newRecipients) => handleAddTosRecipients(newRecipients, 0), onRemove: handleRemoveTosRecipient })] }));
+    };
+    const renderForm = () => {
+        let specificFields;
+        switch (localItem.Type) {
+            case DiagramItemTypes.Start:
+                specificFields = renderStartFields();
+                break;
+            case DiagramItemTypes.End:
+                specificFields = renderEndFields();
+                break;
+            case DiagramItemTypes.Exit:
+                specificFields = renderExitFields();
+                break;
+            case DiagramItemTypes.Condition:
+                specificFields = renderConditionFields();
+                break;
+            case DiagramItemTypes.Status:
+                specificFields = renderStatusFields();
+                break;
+            case DiagramItemTypes.Approval:
+            case DiagramItemTypes.DataEntry:
+            case DiagramItemTypes.ExecTask:
+                specificFields = renderApprovalFields();
+                break;
+            case DiagramItemTypes.UpdateDcmt:
+                specificFields = renderUpdateDcmtFields();
+                break;
+            case DiagramItemTypes.RunApp:
+                specificFields = renderRunAppFields();
+                break;
+            case DiagramItemTypes.Notification:
+                specificFields = renderNotificationFields();
+                break;
+            case DiagramItemTypes.WorkGroup_Create:
+                specificFields = renderWorkingGroupCreateFields();
+                break;
+            case DiagramItemTypes.CaseFlow_Create:
+                specificFields = renderCaseFlowCreateFields();
+                break;
+            case DiagramItemTypes.CaseFlow_AddParts:
+            case DiagramItemTypes.WorkGroup_AddParts:
+                specificFields = renderAddPartsFields();
+                break;
+            default:
+                specificFields = null;
+        }
+        return (_jsxs(FormContainer, { children: [renderCommonFields(), specificFields, _jsxs(ButtonsContainer, { children: [_jsx(TMButton, { caption: 'Applica', btnStyle: 'advanced', advancedColor: TMColors.tertiary, icon: _jsx(IconApply, {}), showTooltip: false, disabled: !isModified, onClick: handleSave }), _jsx(TMButton, { caption: 'Annulla', btnStyle: 'toolbar', color: 'primary', icon: _jsx(IconUndo, {}), showTooltip: false, disabled: !isModified, onClick: handleCancel })] })] }));
+    };
+    return (_jsx(TMModal, { title: LocalizeDiagramItemType(localItem.Type), onClose: onClose, isModal: true, width: calculatedWidth, height: calculatedHeight, children: renderForm() }));
+};
+export default DiagramItemForm;