support for required inputs to continue to the next task step

src/Pages/GroupTasks/GroupTasksViewModal.js

@@ -10,7 +10,7 @@ import {
   Steps,
   notification,
 } from "antd";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import {
   Constants,
@@ -115,7 +115,57 @@ export default function GroupTasksViewModal({ isOpen }) {
     );
   };
 
-  const alertActionHandler = (status, taskStepId, index, notificationApi) => {
+  const handleTaskContinueTaskStep = (taskStepId, step) => {
+    const groupTasksViewModalRequiredInputsForm = document.getElementById(
+      "groupTasksViewModalRequiredInputsForm"
+    );
+
+    let canTaskContinued = true;
+    let taskInputs = [];
+
+    if (groupTasksViewModalRequiredInputsForm !== null) {
+      const specifiedTaskInputs =
+        groupTasksViewModalRequiredInputsForm.getElementsByTagName("input");
+
+      if (specifiedTaskInputs.length > 0) {
+        for (let i = 0; i < specifiedTaskInputs.length; i++) {
+          if (specifiedTaskInputs[i].value === "") {
+            canTaskContinued = false;
+            break;
+          }
+
+          taskInputs.push({
+            parameterName: specifiedTaskInputs[i].id,
+            value: specifiedTaskInputs[i].value,
+          });
+        }
+      }
+    }
+
+    if (!canTaskContinued) {
+      notificationApi["error"]({
+        message: `Inputs cannot be empty`,
+        description: `Please fill in all inputs`,
+      });
+      return;
+    }
+
+    console.log("contine", taskStepId, step);
+
+    webSocketContext.SendSocketMessage(
+      SentMessagesCommands.TaskContinueTaskStep,
+      {
+        groupTaskId: currentGroupTask.Id,
+        category: currentGroupTask.Category,
+        groupId: currentGroupTask.GroupId,
+        step: step,
+        taskStepId: taskStepId,
+        taskInputs: taskInputs,
+      }
+    );
+  };
+
+  const alertActionHandler = (status, taskStepId, index) => {
     switch (status) {
       case Constants.GROUP_TASKS_STATUS.FAILED:
         return (
@@ -133,21 +183,24 @@ export default function GroupTasksViewModal({ isOpen }) {
         return (
           <Button
             size="small"
-            onClick={() => {
-              console.log("clicked continue");
-            }}
+            onClick={() => handleTaskContinueTaskStep(taskStepId, index + 1)}
           >
             Continue
           </Button>
         );
       default:
-        notificationApi["error"]({
-          message: `Alert action ${status} not implemented`,
-        });
         return <></>;
     }
   };
 
+  const getGroupTaskStepLog = (log) => {
+    return log.length === 0 ? (
+      ""
+    ) : (
+      <span style={{ whiteSpace: "pre-line" }}>{log}</span>
+    );
+  };
+
   const stepsItemHandler = () => {
     let groupTaskSteps = [];
     let groupTasks = [];
@@ -211,7 +264,7 @@ export default function GroupTasksViewModal({ isOpen }) {
                       notificationApi={notificationApi}
                     />
                   ) : (
-                    groupTaskSteps[index].Log
+                    getGroupTaskStepLog(groupTaskSteps[index].Log)
                   )
                 }
                 type={getAlertType(groupTaskSteps[index].Status)}
@@ -219,8 +272,7 @@ export default function GroupTasksViewModal({ isOpen }) {
                 action={alertActionHandler(
                   groupTaskSteps[index].Status,
                   groupTaskSteps[index].Id,
-                  index,
-                  notificationApi
+                  index
                 )}
               />
             </>
@@ -345,10 +397,8 @@ export default function GroupTasksViewModal({ isOpen }) {
 }
 
 function InputRequiredHandler({ groupTaskParameters, notificationApi }) {
-  console.log("groupTaskParameters", groupTaskParameters);
-
   return (
-    <Form layout="vertical">
+    <Form layout="vertical" id="groupTasksViewModalRequiredInputsForm">
       {groupTaskParameters.map((groupTaskParameter) => {
         switch (groupTaskParameter.type) {
           case "text":
@@ -358,7 +408,10 @@ function InputRequiredHandler({ groupTaskParameters, notificationApi }) {
                 label={groupTaskParameter.displayName}
                 required
               >
-                <Input key={"input-" + groupTaskParameter.parameterName} />
+                <Input
+                  key={"input-" + groupTaskParameter.parameterName}
+                  id={groupTaskParameter.parameterName}
+                />
               </Form.Item>
             );
           case "number":
@@ -370,6 +423,7 @@ function InputRequiredHandler({ groupTaskParameters, notificationApi }) {
               >
                 <InputNumber
                   key={"fitem-" + groupTaskParameter.parameterName}
+                  id={groupTaskParameter.parameterName}
                   style={{ width: "100%" }}
                 />
               </Form.Item>

src/Pages/GroupTasks/GroupTypeSelectionModal.js

@@ -55,9 +55,8 @@ export default function GroupTypeSelectionModal({
     let canTaskBeStarted = true;
 
     if (userSpecifiedGlobalInputForm !== null) {
-      const userSpecifiedGlobalInputs = document
-        .getElementById("groupTypeSelectionUserSpecifiedGlobalInputForm")
-        .getElementsByTagName("input");
+      const userSpecifiedGlobalInputs =
+        userSpecifiedGlobalInputForm.getElementsByTagName("input");
 
       if (userSpecifiedGlobalInputs.length > 0) {
         for (let i = 0; i < userSpecifiedGlobalInputs.length; i++) {
@@ -225,7 +224,7 @@ function GroupGlobalInputs({
           <h3 style={{ fontWeight: "bold" }}>Fill in the global values</h3>
           <Form
             layout="vertical"
-            id={"groupTypeSelectionUserSpecifiedGlobalInputForm"}
+            id="groupTypeSelectionUserSpecifiedGlobalInputForm"
           >
             {elements}
           </Form>

src/utils.js

@@ -84,6 +84,7 @@ const ReceivedMessagesCommands = {
 export const SentMessagesCommands = {
   StartGroupTasks: 1,
   TaskFailedTryAgainRunTaskStep: 2,
+  TaskContinueTaskStep: 3,
 };
 
 export function WebSocketProvider({ children, userSession, setUserSession }) {