dynamic machines

public/locales/de/translation.json

@@ -65,14 +65,18 @@
       "button": {
         "startTask": "Aufgabe starten"
       },
-      "select": { "placeholder": "Wählen Sie einen Gruppentyp" },
+      "select": {
+        "placeholder": "Wählen Sie einen Gruppentyp",
+        "machinePlaceholder": "Wählen Sie eine Maschine"
+      },
       "form": {
         "item": {
           "groupTypeDescription.label": "Beschreibung",
           "groupTypeDescription.tooltip.title": "Diese Beschreibung hilft, im Nachhinein zu verstehen, worum es bei dieser Aufgabe ging"
         }
       },
-      "h3": "Füllen Sie die globalen Werte aus"
+      "h3": "Füllen Sie die globalen Werte aus",
+      "noNotesSpecified": "Keine Notizen angegeben"
     },
     "tag.global": "Global",
     "groupTasksViewModal": {

public/locales/en/translation.json

@@ -65,14 +65,18 @@
       "button": {
         "startTask": "Start Task"
       },
-      "select": { "placeholder": "Select a Group Type" },
+      "select": {
+        "placeholder": "Select a Group Type",
+        "machinePlaceholder": "Select a Machine"
+      },
       "form": {
         "item": {
           "groupTypeDescription.label": "Description",
           "groupTypeDescription.tooltip.title": "This description helps to understand what this task was about afterwards"
         }
       },
-      "h3": "Fill in the global values"
+      "h3": "Fill in the global values",
+      "noNotesSpecified": "No notes specified"
     },
     "tag.global": "Global",
     "groupTasksViewModal": {

src/Pages/GroupTasks/Overview/GroupTasksViewModal.js

@@ -559,6 +559,10 @@ export default function GroupTasksViewModal({ isOpen }) {
     )
       return <></>;
 
+    const parsedGlobalInputs = JSON.parse(
+      currentGroupTask.current.GlobalInputs
+    );
+
     return (
       <>
         <h2
@@ -571,33 +575,23 @@ export default function GroupTasksViewModal({ isOpen }) {
         </h2>
 
         <span>
-          {JSON.parse(currentGroupTask.current.GlobalInputs).map(
+          {Object.keys(parsedGlobalInputs).map((globalInput) => (
-            (globalInput) => {
+            <span key={globalInput}>
-              return (
-                <span key={globalInput.parameterName + globalInput.value}>
               <span style={{ fontWeight: "bold" }}>
                 {
                   groupTasksContext.categoryGroup.groups
                     .find(
-                          (group) =>
+                      (group) => group.id === currentGroupTask.current.GroupId
-                            group.id === currentGroupTask.current.GroupId
                     )
-                        .globalInputs.find(
+                    .globalInputs.find((gI) => gI.parameterName === globalInput)
-                          (gI) => gI.parameterName === globalInput.parameterName
+                    .displayName
-                        ).displayName
                 }
                 :{" "}
               </span>
-                  <span>
+              <span>{parsedGlobalInputs[globalInput].value}</span>
-                    {globalInput.value !== ""
-                      ? globalInput.value
-                      : Constants.TEXT_EMPTY_PLACEHOLDER}
-                  </span>
               <br />
             </span>
-              );
+          ))}
-            }
-          )}
         </span>
       </>
     );
@@ -729,10 +723,7 @@ function InputRequiredHandler({
 
     if (globalInputs === undefined || !groupTaskParameter.global) return null;
 
-    const globalInputValue = globalInputs.find(
+    const globalInputValue = globalInputs[groupTaskParameter.parameterName];
-      (globalInput) =>
-        globalInput.parameterName === groupTaskParameter.parameterName
-    );
 
     return globalInputValue !== undefined ? globalInputValue.value : "";
   };

src/Pages/GroupTasks/Overview/GroupTypeSelectionModal.js

@@ -17,8 +17,7 @@ import { useTranslation } from "react-i18next";
 import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
 import { useGroupTasksContext } from "../../../Contexts/GroupTasksContext";
 import { SentMessagesCommands } from "../../../Handlers/WebSocketMessageHandler";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
-import { MyUserAvatar } from "../../../Components/MyAvatar";
 
 export default function GroupTypeSelectionModal({
   isOpen,
@@ -33,6 +32,8 @@ export default function GroupTypeSelectionModal({
   const groupTasksContext = useGroupTasksContext();
   const { t } = useTranslation();
   const handleCancel = () => setIsOpen(false);
+  const groupTypeDescriptionRef = useRef("");
+  const groupGlobalInputsRef = useRef({});
 
   const isStartTaskPossible = () => {
     if (
@@ -59,55 +60,23 @@ export default function GroupTypeSelectionModal({
   const handleStartTask = () => {
     let canTaskBeStarted = true;
 
-    const groupTaskDescription = document.getElementById(
+    if (groupTypeDescriptionRef.current === "") {
-      "fitem-grouptypedescription"
-    ).value;
-
-    if (groupTaskDescription === "") {
       canTaskBeStarted = false;
     }
 
-    const userSpecifiedGlobalInputForm = document.getElementById(
+    // checking if there is some global input with empty value
-      "groupTypeSelectionUserSpecifiedGlobalInputForm"
+    const globalInputsKeys = Object.keys(groupGlobalInputsRef.current);
-    );
 
-    let globalInputs = [];
+    if (globalInputsKeys.length === 0) {
-
-    if (canTaskBeStarted && userSpecifiedGlobalInputForm !== null) {
-      const userSpecifiedGlobalInputs =
-        userSpecifiedGlobalInputForm.getElementsByTagName("input");
-
-      if (userSpecifiedGlobalInputs.length > 0) {
-        for (let i = 0; i < userSpecifiedGlobalInputs.length; i++) {
-          if (userSpecifiedGlobalInputs[i].value === "") {
       canTaskBeStarted = false;
-            break;
+    } else {
+      Object.keys(groupGlobalInputsRef.current).forEach((key) => {
+        if (groupGlobalInputsRef.current[key].value === "") {
+          canTaskBeStarted = false;
+          return;
         }
-
-          globalInputs.push({
-            parameterName: userSpecifiedGlobalInputs[i].id,
-            value: userSpecifiedGlobalInputs[i].value,
       });
     }
-      }
-
-      const userSpecifiedGlobalTextareas =
-        userSpecifiedGlobalInputForm.getElementsByTagName("textarea");
-
-      if (userSpecifiedGlobalTextareas.length > 0) {
-        for (let i = 0; i < userSpecifiedGlobalTextareas.length; i++) {
-          if (userSpecifiedGlobalTextareas[i].value === "") {
-            canTaskBeStarted = false;
-            break;
-          }
-
-          globalInputs.push({
-            parameterName: userSpecifiedGlobalTextareas[i].id,
-            value: userSpecifiedGlobalTextareas[i].value,
-          });
-        }
-      }
-    }
 
     if (!canTaskBeStarted) {
       notificationApi["error"]({
@@ -143,11 +112,15 @@ export default function GroupTypeSelectionModal({
       category: categoryGroup.category,
       id: currentSelectedModalGroupType,
       groupName: groupName,
-      description: groupTaskDescription,
+      description: groupTypeDescriptionRef.current,
       numberOfSteps: parseInt(numberOfSteps),
-      globalInputs: globalInputs,
+      globalInputs: groupGlobalInputsRef.current,
       rememberId: rememberId, // used to open the modal when group task is started by backend and send via websocket back
     });
+
+    // reset
+    groupTypeDescriptionRef.current = "";
+    groupGlobalInputsRef.current = {};
   };
 
   return (
@@ -207,7 +180,11 @@ export default function GroupTypeSelectionModal({
             }}
             required
           >
-            <Input id="fitem-grouptypedescription" />
+            <Input
+              onInput={(e) =>
+                (groupTypeDescriptionRef.current = e.nativeEvent.target.value)
+              }
+            />
           </Form.Item>
         </Form>
       )}
@@ -216,23 +193,21 @@ export default function GroupTypeSelectionModal({
         categoryGroup={categoryGroup}
         currentSelectedModalGroupType={currentSelectedModalGroupType}
         notificationApi={notificationApi}
+        groupGlobalInputsRef={groupGlobalInputsRef}
       />
     </Modal>
   );
 }
 
-function SelectMachineComponent({ t, globalInput }) {
+function SelectMachineComponent({ t, globalInput, groupGlobalInputsRef }) {
   const [loading, setLoading] = useState(false);
   const [options, setOptions] = useState([]);
+  const responseData = useRef([]);
 
   useEffect(() => {
-    console.log("useEffect");
-
     setLoading(true);
 
-    myFetch("/machines", "POST", {}).then((data) => {
+    myFetch("/machines", "POST", globalInput.options).then((data) => {
-      console.log("data", data);
-
       const processedOptions = {};
 
       data.forEach((item, index) => {
@@ -242,12 +217,22 @@ function SelectMachineComponent({ t, globalInput }) {
           processedOptions[partName] = [];
         }
 
-        console.log("item.part_detail.Name", item.part_detail.Name);
+        let parsedNotes = "";
+
+        if (item.Notes !== "") {
+          try {
+            parsedNotes = JSON.parse(item.Notes);
+          } catch (error) {}
+        }
 
         processedOptions[partName].push({
-          key: item.part_detail.Name + "-" + index,
+          key: index + item.part_detail.Name,
-          label: JSON.parse(item.Notes).displayName,
+          label:
+            parsedNotes === ""
+              ? t("groupTasks.groupTypeSelectionModal.noNotesSpecified")
+              : parsedNotes.displayName,
           value: index,
+          disabled: parsedNotes === "",
         });
       });
 
@@ -260,7 +245,7 @@ function SelectMachineComponent({ t, globalInput }) {
       );
 
       setOptions(finalOptions);
-
+      responseData.current = data;
       setLoading(false);
     });
   }, []);
@@ -268,11 +253,20 @@ function SelectMachineComponent({ t, globalInput }) {
   return (
     <Select
       loading={loading}
-      placeholder={t("groupTasks.groupTypeSelectionModal.select.placeholder")}
+      placeholder={t(
+        "groupTasks.groupTypeSelectionModal.select.machinePlaceholder"
+      )}
       style={{ width: "100%" }}
       id={globalInput.parameterName}
       options={options}
-      onSelect={(value) => console.log("onSelect", value)}
+      onSelect={(value) => {
+        const parsedNotes = JSON.parse(responseData.current[value].Notes);
+
+        groupGlobalInputsRef.current[globalInput.parameterName] = {
+          value: parsedNotes.displayName,
+          data: parsedNotes,
+        };
+      }}
     />
   );
 }
@@ -281,6 +275,7 @@ function GroupGlobalInputs({
   categoryGroup,
   currentSelectedModalGroupType,
   notificationApi,
+  groupGlobalInputsRef,
 }) {
   const { t } = useTranslation();
 
@@ -303,23 +298,36 @@ function GroupGlobalInputs({
         group.id === currentSelectedModalGroupType &&
         group.globalInputs?.length > 0
       ) {
-        group.globalInputs.forEach((globalInput) => {
+        group.globalInputs.forEach((globalInput, index) => {
+          // this is needed for the check if user clicks on start task button and there is some global input with empty value
+          groupGlobalInputsRef.current[globalInput.parameterName] = {
+            value: "",
+          };
+
           switch (globalInput.type) {
             case "text":
               elements.push(
                 <Form.Item
-                  key={"fitem-" + globalInput.parameterName}
+                  key={index}
                   label={getLabel(globalInput.displayName)}
                   required
                 >
-                  <Input id={globalInput.parameterName} />
+                  <Input
+                    id={globalInput.parameterName}
+                    onChange={(e) =>
+                      (groupGlobalInputsRef.current[globalInput.parameterName] =
+                        {
+                          value: e.nativeEvent.target.value,
+                        })
+                    }
+                  />
                 </Form.Item>
               );
               break;
             case "number":
               elements.push(
                 <Form.Item
-                  key={"fitem-" + globalInput.parameterName}
+                  key={index}
                   label={getLabel(globalInput.displayName)}
                   required
                 >
@@ -327,6 +335,10 @@ function GroupGlobalInputs({
                     style={{ width: "100%" }}
                     max={Number.MAX_SAFE_INTEGER}
                     id={globalInput.parameterName}
+                    onInput={(value) =>
+                      (groupGlobalInputsRef.current[globalInput.parameterName] =
+                        { value: value })
+                    }
                   />
                 </Form.Item>
               );
@@ -334,24 +346,34 @@ function GroupGlobalInputs({
             case "textarea":
               elements.push(
                 <Form.Item
-                  key={"fitem-" + globalInput.parameterName}
+                  key={index}
                   label={getLabel(globalInput.displayName)}
                   required
                 >
-                  <TextArea id={globalInput.parameterName} />
+                  <TextArea
+                    id={globalInput.parameterName}
+                    onChange={(e) =>
+                      (groupGlobalInputsRef.current[globalInput.parameterName] =
+                        {
+                          value: e.nativeEvent.target.value,
+                        })
+                    }
+                  />
                 </Form.Item>
               );
               break;
             case "select_machine":
-              console.log("globalInput", globalInput);
-
               elements.push(
                 <Form.Item
-                  key={"fitem-" + globalInput.parameterName}
+                  key={index}
                   label={getLabel(globalInput.displayName)}
                   required
                 >
-                  <SelectMachineComponent t={t} globalInput={globalInput} />
+                  <SelectMachineComponent
+                    t={t}
+                    globalInput={globalInput}
+                    groupGlobalInputsRef={groupGlobalInputsRef}
+                  />
                 </Form.Item>
               );
               break;