show displayName instead of parameterName for global inputs in task view

src/Pages/GroupTasks/GroupTasksViewModal.js

@@ -21,6 +21,7 @@ import {
   GetDuration,
   MyAvatar,
   getUserId,
+  GroupTasksStepsLockedAndUserUpdateInputValueRememberId,
 } from "../../utils";
 import { InfoCircleOutlined, LockOutlined } from "@ant-design/icons";
 
@@ -464,7 +465,7 @@ export default function GroupTasksViewModal({ isOpen }) {
                             Specified Global Inputs
                           </h2>
 
-                          <p>
+                          <span>
                             {JSON.parse(currentGroupTask.GlobalInputs).map(
                               (globalInput) => {
                                 return (
@@ -475,7 +476,24 @@ export default function GroupTasksViewModal({ isOpen }) {
                                     }
                                   >
                                     <span style={{ fontWeight: "bold" }}>
-                                      {globalInput.parameterName}:{" "}
+                                      {
+                                        webSocketContext.CategoryGroups.find(
+                                          (categoryGroup) =>
+                                            categoryGroup.category ===
+                                            currentGroupTask.Category
+                                        )
+                                          .groups.find(
+                                            (group) =>
+                                              group.id ===
+                                              currentGroupTask.GroupId
+                                          )
+                                          .globalInputs.find(
+                                            (gI) =>
+                                              gI.parameterName ===
+                                              globalInput.parameterName
+                                          ).displayName
+                                      }
+                                      :{" "}
                                     </span>
                                     <span>
                                       {globalInput.value !== ""
@@ -487,7 +505,7 @@ export default function GroupTasksViewModal({ isOpen }) {
                                 );
                               }
                             )}
-                          </p>
+                          </span>
                         </>
                       ) : null}
                     </>
@@ -602,6 +620,7 @@ function InputRequiredHandler({
         lockedByUserId: getUserId(),
         groupTaskId: currentGroupTaskId,
         step: step,
+        rememberId: GroupTasksStepsLockedAndUserUpdateInputValueRememberId,
       });
     }
 
@@ -617,6 +636,7 @@ function InputRequiredHandler({
           parameterName: groupTaskParameterName,
           value: inputValue,
           step: step,
+          rememberId: GroupTasksStepsLockedAndUserUpdateInputValueRememberId,
         }
       );
     }, 500);

src/utils.js

@@ -39,6 +39,13 @@ export const Constants = {
   GROUP_TASK_LOCKED_TIME: 3 * 1000,
 };
 
+/*
+This ID is needed because the message is sent to all clients connected to the backend server when a task is locked and unlocked.
+With this ID the client checks if the respective browser tab of the user is the initiator of the lock.
+*/
+export const GroupTasksStepsLockedAndUserUpdateInputValueRememberId =
+  window.crypto.randomUUID();
+
 /**
  * user session
  */
@@ -148,7 +155,6 @@ export function WebSocketProvider({
   const navigate = useNavigate();
   const StartGroupTasksOpenModalRememberIdRef = useRef(null);
 
-  //let socket = null;
   const ws = useRef(null);
 
   const connect = () => {
@@ -312,6 +318,12 @@ export function WebSocketProvider({
           });
           break;
         case ReceivedMessagesCommands.TaskLocked:
+          if (
+            body.rememberId ===
+            GroupTasksStepsLockedAndUserUpdateInputValueRememberId
+          )
+            break;
+
           setGroupTasksSteps((arr) => {
             const newArr = [...arr];
 
@@ -327,6 +339,12 @@ export function WebSocketProvider({
           });
           break;
         case ReceivedMessagesCommands.TaskUnlocked:
+          if (
+            body.rememberId ===
+            GroupTasksStepsLockedAndUserUpdateInputValueRememberId
+          )
+            break;
+
           setGroupTasksSteps((arr) => {
             const newArr = [...arr];
 
@@ -342,6 +360,12 @@ export function WebSocketProvider({
           });
           break;
         case ReceivedMessagesCommands.UpdateGroupTaskStepUserInputValue:
+          if (
+            body.rememberId ===
+            GroupTasksStepsLockedAndUserUpdateInputValueRememberId
+          )
+            break;
+
           // html based DOM manipulation
           const foundInput = document.getElementById(body.element);
 
@@ -456,18 +480,6 @@ export function WebSocketProvider({
     </WebSocketContext.Provider>
   );
 }
-/*
-function doEvent(obj, event) {
-  var event = new Event(event, { target: obj, bubbles: true });
-  event.simulated = true;
-
-  let tracker = obj._valueTracker;
-  if (tracker) {
-    tracker.setValue(lastValue);
-  }
-
-  return obj ? obj.dispatchEvent(event) : false;
-} */
 
 // https://stackoverflow.com/a/52486921
 function setNativeValue(element, value) {