task locking

src/Pages/GroupTasks/GroupTasksViewModal.js

@@ -1,5 +1,6 @@
 import {
   Alert,
+  Avatar,
   Button,
   Form,
   Input,
@@ -9,6 +10,7 @@ import {
   Result,
   Steps,
   Tag,
+  Tooltip,
   notification,
 } from "antd";
 import { useContext } from "react";
@@ -22,7 +24,11 @@ import {
   MyAvatar,
   getUserId,
 } from "../../utils";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import {
+  AntDesignOutlined,
+  InfoCircleOutlined,
+  LockOutlined,
+} from "@ant-design/icons";
 
 export default function GroupTasksViewModal({ isOpen }) {
   const webSocketContext = useContext(WebSocketContext);
@@ -167,13 +173,14 @@ export default function GroupTasksViewModal({ isOpen }) {
     );
   };
 
-  const alertActionHandler = (status, taskStepId, index) => {
+  const alertActionHandler = (status, taskStepId, index, taskLocked) => {
     switch (status) {
       case Constants.GROUP_TASKS_STATUS.FAILED:
         return (
           <Button
             size="small"
             danger
+            disabled={taskLocked}
             onClick={() =>
               handleTaskFailedTryAgainRunTaskStep(taskStepId, index + 1)
             }
@@ -185,6 +192,7 @@ export default function GroupTasksViewModal({ isOpen }) {
         return (
           <Button
             size="small"
+            disabled={taskLocked}
             onClick={() => handleTaskContinueTaskStep(taskStepId, index + 1)}
           >
             Continue
@@ -327,10 +335,23 @@ export default function GroupTasksViewModal({ isOpen }) {
                 )}
               </p>
 
-              {console.log("stepLocked", groupTaskSteps[index].Locked)}
-
               <Alert
-                message={<b>{getAlertMessage(groupTaskSteps[index].Status)}</b>}
+                message={
+                  <b>
+                    {getAlertMessage(groupTaskSteps[index].Status)}{" "}
+                    {groupTaskSteps[index].LockedByUserId !== "" && (
+                      <>
+                        <LockOutlined />{" "}
+                        <MyAvatar
+                          tooltip
+                          allUsers={webSocketContext.AllUsers}
+                          userId={groupTaskSteps[index].LockedByUserId}
+                          avatarWidth={24}
+                        />
+                      </>
+                    )}
+                  </b>
+                }
                 description={
                   groupTaskSteps[index].Status ===
                   Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED ? (
@@ -339,7 +360,8 @@ export default function GroupTasksViewModal({ isOpen }) {
                       currentGroupTask={currentGroupTask}
                       groupTaskParameters={groupTask.parameters}
                       notificationApi={notificationApi}
-                      step={index}
+                      step={index + 1}
+                      taskLockedByUserId={groupTaskSteps[index].LockedByUserId}
                     />
                   ) : (
                     getGroupTaskStepLog(groupTaskSteps[index].Log)
@@ -350,7 +372,8 @@ export default function GroupTasksViewModal({ isOpen }) {
                 action={alertActionHandler(
                   groupTaskSteps[index].Status,
                   groupTaskSteps[index].Id,
-                  index
+                  index,
+                  groupTaskSteps[index].LockedByUserId
                 )}
               />
             </>
@@ -503,6 +526,7 @@ function InputRequiredHandler({
   groupTaskParameters,
   notificationApi,
   step,
+  taskLockedByUserId,
 }) {
   const globalInputs = JSON.parse(currentGroupTask.GlobalInputs);
 
@@ -530,17 +554,10 @@ function InputRequiredHandler({
 
   let lastChanges = [];
 
-  const onInputChange = (currentGroupTaskId, parameterName) => {
+  const onInputChange = (currentGroupTaskId) => {
-    console.log(
-      "change",
-
-      currentGroupTaskId,
-      parameterName,
-      step
-    );
-
     lastChanges = lastChanges.filter(
-      (lc) => Date.now() - new Date(lc.changeTime) < 3000
+      (lc) =>
+        Date.now() - new Date(lc.changeTime) < Constants.GROUP_TASK_LOCKED_TIME
     );
 
     const lastChange = lastChanges.find((lC) => lC.step === step);
@@ -551,8 +568,6 @@ function InputRequiredHandler({
         changeTime: Date.now(),
       });
 
-      console.warn("lock");
-
       webSocketContext.SendSocketMessage(SentMessagesCommands.TaskLocking, {
         lockedByUserId: getUserId(),
         groupTaskId: currentGroupTaskId,
@@ -579,6 +594,7 @@ function InputRequiredHandler({
                   key={"input-" + groupTaskParameter.parameterName}
                   id={groupTaskParameter.parameterName}
                   defaultValue={getDefaultValue(groupTaskParameter)}
+                  disabled={taskLockedByUserId !== ""}
                   onChange={() =>
                     onInputChange(
                       currentGroupTask.Id,
@@ -603,6 +619,7 @@ function InputRequiredHandler({
                   id={groupTaskParameter.parameterName}
                   style={{ width: "100%" }}
                   defaultValue={getDefaultValue(groupTaskParameter)}
+                  disabled={taskLockedByUserId !== ""}
                   onChange={() =>
                     onInputChange(
                       currentGroupTask.Id,

src/utils.js

@@ -36,6 +36,7 @@ export const Constants = {
   },
   MAX_AVATAR_SIZE: 5 * 1024 * 1024,
   ACCEPTED_FILE_TYPES: ["image/png", "image/jpeg", "image/jpg"],
+  GROUP_TASK_LOCKED_TIME: 3 * 1000,
 };
 
 /**
@@ -109,6 +110,7 @@ const ReceivedMessagesCommands = {
   ScanResult: 14,
   UpdateScannerLastUsed: 15,
   TaskLocked: 16,
+  TaskUnlocked: 17,
 };
 
 // commands sent to the backend server
@@ -311,12 +313,32 @@ export function WebSocketProvider({
           });
           break;
         case ReceivedMessagesCommands.TaskLocked:
+          console.log("taskLocked", body);
           setGroupTasksSteps((arr) => {
             const newArr = [...arr];
 
             newArr[
-              arr.findIndex((arr1) => arr1.GroupTasksId === body.groupTaskId)
+              arr.findIndex(
-            ].Locked = true;
+                (arr1) =>
+                  arr1.GroupTasksId === body.groupTaskId &&
+                  arr1.Step === body.step
+              )
+            ].LockedByUserId = body.lockedByUserId;
+
+            return newArr;
+          });
+          break;
+        case ReceivedMessagesCommands.TaskUnlocked:
+          setGroupTasksSteps((arr) => {
+            const newArr = [...arr];
+
+            newArr[
+              arr.findIndex(
+                (arr1) =>
+                  arr1.GroupTasksId === body.GroupTaskId &&
+                  arr1.Step === body.Step
+              )
+            ].LockedByUserId = "";
 
             return newArr;
           });