diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index 41ff88c..ef5a4f2 100644 --- a/public/locales/de/translation.json +++ b/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": { diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 01dc226..4d45741 100644 --- a/public/locales/en/translation.json +++ b/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": { diff --git a/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js b/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js index c529a63..7defec1 100644 --- a/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js +++ b/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js @@ -559,6 +559,10 @@ export default function GroupTasksViewModal({ isOpen }) { ) return <>; + const parsedGlobalInputs = JSON.parse( + currentGroupTask.current.GlobalInputs + ); + return ( <>

- {JSON.parse(currentGroupTask.current.GlobalInputs).map( - (globalInput) => { - return ( - - - { - groupTasksContext.categoryGroup.groups - .find( - (group) => - group.id === currentGroupTask.current.GroupId - ) - .globalInputs.find( - (gI) => gI.parameterName === globalInput.parameterName - ).displayName - } - :{" "} - - - {globalInput.value !== "" - ? globalInput.value - : Constants.TEXT_EMPTY_PLACEHOLDER} - -
- - ); - } - )} + {Object.keys(parsedGlobalInputs).map((globalInput) => ( + + + { + groupTasksContext.categoryGroup.groups + .find( + (group) => group.id === currentGroupTask.current.GroupId + ) + .globalInputs.find((gI) => gI.parameterName === globalInput) + .displayName + } + :{" "} + + {parsedGlobalInputs[globalInput].value} +
+ + ))} ); @@ -729,10 +723,7 @@ function InputRequiredHandler({ if (globalInputs === undefined || !groupTaskParameter.global) return null; - const globalInputValue = globalInputs.find( - (globalInput) => - globalInput.parameterName === groupTaskParameter.parameterName - ); + const globalInputValue = globalInputs[groupTaskParameter.parameterName]; return globalInputValue !== undefined ? globalInputValue.value : ""; }; diff --git a/src/Pages/GroupTasks/Overview/GroupTypeSelectionModal.js b/src/Pages/GroupTasks/Overview/GroupTypeSelectionModal.js index 97d654c..f7af506 100644 --- a/src/Pages/GroupTasks/Overview/GroupTypeSelectionModal.js +++ b/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 { MyUserAvatar } from "../../../Components/MyAvatar"; +import { useEffect, useRef, useState } from "react"; 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,54 +60,22 @@ export default function GroupTypeSelectionModal({ const handleStartTask = () => { let canTaskBeStarted = true; - const groupTaskDescription = document.getElementById( - "fitem-grouptypedescription" - ).value; - - if (groupTaskDescription === "") { + if (groupTypeDescriptionRef.current === "") { canTaskBeStarted = false; } - const userSpecifiedGlobalInputForm = document.getElementById( - "groupTypeSelectionUserSpecifiedGlobalInputForm" - ); + // checking if there is some global input with empty value + const globalInputsKeys = Object.keys(groupGlobalInputsRef.current); - let globalInputs = []; - - 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; - } - - globalInputs.push({ - parameterName: userSpecifiedGlobalInputs[i].id, - value: userSpecifiedGlobalInputs[i].value, - }); + if (globalInputsKeys.length === 0) { + canTaskBeStarted = false; + } else { + Object.keys(groupGlobalInputsRef.current).forEach((key) => { + if (groupGlobalInputsRef.current[key].value === "") { + canTaskBeStarted = false; + return; } - } - - 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) { @@ -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 > - + + (groupTypeDescriptionRef.current = e.nativeEvent.target.value) + } + /> )} @@ -216,23 +193,21 @@ export default function GroupTypeSelectionModal({ categoryGroup={categoryGroup} currentSelectedModalGroupType={currentSelectedModalGroupType} notificationApi={notificationApi} + groupGlobalInputsRef={groupGlobalInputsRef} /> ); } -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) => { - console.log("data", data); - + myFetch("/machines", "POST", globalInput.options).then((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, - label: JSON.parse(item.Notes).displayName, + key: index + item.part_detail.Name, + 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 ( + + (groupGlobalInputsRef.current[globalInput.parameterName] = + { + value: e.nativeEvent.target.value, + }) + } + /> ); break; case "number": elements.push( @@ -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 }) + } /> ); @@ -334,24 +346,34 @@ function GroupGlobalInputs({ case "textarea": elements.push( -