Merge pull request #2364 from fahad-aot/feature/FWF-3923-Update-taskv…

…ariable-with-type feature/fwf-3923:Task variable updated with type
AOT-Technologies · Nov 20, 2024 · 65da8e5 · 65da8e5
2 parents 0061580 + 6f8f07a
commit 65da8e5
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/forms-flow-web/src/components/Form/EditForm/FlowEdit.js b/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
@@ -34,7 +34,7 @@ import userRoles from "../../../constants/permissions.js";
 import BPMNViewer from "../../BPMN/BpmnViewer.js";
 import TaskVariableModal from "../../Modals/TaskVariableModal.js";
 
-const FlowEdit = forwardRef(({ isPublished = false, CategoryType,form }, ref) => {
+const FlowEdit = forwardRef(({ isPublished = false, CategoryType }, ref) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const bpmnRef = useRef();
@@ -46,6 +46,7 @@ const FlowEdit = forwardRef(({ isPublished = false, CategoryType,form }, ref) =>
   const [isReverted, setIsReverted] = useState(false);
   const { createDesigns } = userRoles();
   const [showTaskVarModal, setShowTaskVarModal] = useState(false);
+  const formData = useSelector((state) => state.form?.form || {});  
   /* --------- fetching all process history when click history button --------- */
   const {
     data: { data: historiesData } = {}, // response data destructured
@@ -242,7 +243,7 @@ const FlowEdit = forwardRef(({ isPublished = false, CategoryType,form }, ref) =>
       />
       {showTaskVarModal && (
         <TaskVariableModal
-          form={form}
+          form={formData}
           showTaskVarModal={showTaskVarModal}
           onClose={CloseTaskVarModal}
         />
@@ -256,7 +257,6 @@ FlowEdit.propTypes = {
     WORKFLOW: PropTypes.string.isRequired,
   }).isRequired,
   isPublished: PropTypes.bool.isRequired,
-  form: PropTypes.object.isRequired,
 };
 
 export default FlowEdit;
diff --git a/forms-flow-web/src/components/Form/EditForm/FormEdit.js b/forms-flow-web/src/components/Form/EditForm/FormEdit.js
@@ -1020,7 +1020,6 @@ const EditComponent = () => {
               ref={flowRef}
               CategoryType={CategoryType}
               isPublished={isPublished}
-              form={form}
               />}
             </div>
             <button

diff --git a/forms-flow-web/src/components/Modals/TaskVariableModal.js b/forms-flow-web/src/components/Modals/TaskVariableModal.js
@@ -54,6 +54,7 @@ const FormComponent = React.memo(
  }) => {
     const [showElement, setShowElement] = useState(false);
     const formRef = useRef(null);
+    const detailsRef = useRef(null); // Ref for the details container
     const { t } = useTranslation();
 
 
@@ -113,14 +114,28 @@ const FormComponent = React.memo(
       },
       [alternativeLabels]
     );
-
+    // hide details when clicking outside form component and removinf the formio-highlighted class
     useEffect(() => {
       const formHilighter = document.querySelector(".form-hilighter");
 
+      const handleOutsideClick = (event) => {
+        const clickedInsideForm = formHilighter?.contains(event.target);
+        const clickedInsideDetails = detailsRef.current?.contains(event.target);
+
+        if (!clickedInsideForm && !clickedInsideDetails) {
+          setShowElement(false); 
+          const highlightedElement = document.querySelector(".formio-hilighted");
+          if (highlightedElement) {
+            highlightedElement.classList.remove("formio-hilighted"); // Remove the highlight class
+          }
+        }
+      };
       formHilighter?.addEventListener("click", handleClick);
+      document.addEventListener("mousedown", handleOutsideClick);
 
       return () => {
         formHilighter?.removeEventListener("click", handleClick);
+        document.removeEventListener("mousedown", handleOutsideClick);
       };
     }, [handleClick]);
 
@@ -131,7 +146,8 @@ const FormComponent = React.memo(
           [selectedComponent.key]: {
             altVariable: selectedComponent.altVariable,
             labelOfComponent: selectedComponent.label,
-            key:selectedComponent.key
+            type:selectedComponent.type,
+            key:selectedComponent.key,
           },
         }));
         const highlightedElement = document.querySelector(".formio-hilighted");
@@ -157,7 +173,7 @@ const FormComponent = React.memo(
           />
         </div>
 
-        <div className="field-details-container">
+        <div className="field-details-container" ref={detailsRef}>
           {showElement ? (
             <div className="details-section">
               <div className="d-flex flex-column">
@@ -227,11 +243,12 @@ const TaskVariableModal = React.memo(
     useEffect(() => {
       if (formProcessList?.taskVariables?.length > 0) {
         const updatedLabels = {};
-        formProcessList.taskVariables.forEach(({ key, label }) => {
+        formProcessList.taskVariables.forEach(({ key, label, type }) => {
           updatedLabels[key] = {
             key,
             altVariable: label, // Use label from taskVariables as altVariable
             labelOfComponent: label, // Set the same label for labelOfComponent
+            type:type
           };
         });
         setAlternativeLabels(updatedLabels);
@@ -263,6 +280,7 @@ const TaskVariableModal = React.memo(
         (i) => ({
           key: i.key,
           label: i.altVariable || i.labelOfComponent,    // If altVariable exists, use it, otherwise it will be  labelOfComponent
+          type: i.type 
         })
       );
       const mapper = {
@@ -273,7 +291,6 @@ const TaskVariableModal = React.memo(
         formName: formProcessList.formName
       };
        await dispatch(saveFormProcessMapperPut({ mapper}));
-
        onClose();
     };
     return (