From c77ea909a8cdc19cf9e277269f28f1fe35733868 Mon Sep 17 00:00:00 2001 From: alex Date: Wed, 30 Aug 2023 22:25:42 +0200 Subject: [PATCH] group task steps --- src/Components/AppRoutes/index.js | 11 +- src/Contexts/GroupTasksContext.js | 3 + .../Overview/GroupTasksTableList.js | 4 +- .../Overview/GroupTasksViewModal.js | 375 ++++++++++-------- src/Pages/GroupTasks/Overview/index.js | 12 +- src/utils.js | 3 +- 6 files changed, 221 insertions(+), 187 deletions(-) diff --git a/src/Components/AppRoutes/index.js b/src/Components/AppRoutes/index.js index 4c01687..7cfbcf4 100644 --- a/src/Components/AppRoutes/index.js +++ b/src/Components/AppRoutes/index.js @@ -133,7 +133,7 @@ export default function AppRoutes() { )} @@ -141,6 +141,15 @@ export default function AppRoutes() { } /> + + + + } + /> + {hasPermission( appContext.userPermissions, Constants.PERMISSIONS.GROUP_TASKS.HISTORY diff --git a/src/Contexts/GroupTasksContext.js b/src/Contexts/GroupTasksContext.js index 8858348..d57cbf1 100644 --- a/src/Contexts/GroupTasksContext.js +++ b/src/Contexts/GroupTasksContext.js @@ -12,8 +12,11 @@ const GroupTasksContext = createContext(preview); export const useGroupTasksContext = () => useContext(GroupTasksContext); export function GroupTasksProvider({ children }) { + // will be set on open a category on side menu const [categoryGroup, setCategoryGroup] = useState({}); + // will be set on open a category on side menu - shown on the table const [groupTasks, setGroupTasks] = useState([]); + // will be set on viewing the steps of a group task const [groupTasksSteps, setGroupTasksSteps] = useState([]); const startGroupTasksOpenModalRememberIdRef = useRef(null); diff --git a/src/Pages/GroupTasks/Overview/GroupTasksTableList.js b/src/Pages/GroupTasks/Overview/GroupTasksTableList.js index d763cd3..9df060d 100644 --- a/src/Pages/GroupTasks/Overview/GroupTasksTableList.js +++ b/src/Pages/GroupTasks/Overview/GroupTasksTableList.js @@ -96,7 +96,9 @@ export default function GroupTaskTableList({ key: "action", render: (_, record) => ( - + {t("groupTasks.groupTasksTableList.column.action.link")} diff --git a/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js b/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js index 668d852..c2e8fcf 100644 --- a/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js +++ b/src/Pages/GroupTasks/Overview/GroupTasksViewModal.js @@ -10,7 +10,7 @@ import { Tag, notification, } from "antd"; -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { Constants, @@ -20,6 +20,7 @@ import { getUserId, GroupTasksStepsLockedAndUserUpdateInputValueRememberId, hasXYPermission, + myFetch, } from "../../../utils"; import { CheckOutlined, @@ -45,35 +46,36 @@ export default function GroupTasksViewModal({ isOpen }) { const navigate = useNavigate(); const [notificationApi, notificationContextHolder] = notification.useNotification(); - let { paramGroupTaskId } = useParams(); + let { paramCategory, paramGroupTaskId } = useParams(); const { t } = useTranslation(); + const currentGroupTask = useRef(null); - const handleCancel = () => navigate(Constants.ROUTE_PATHS.GROUP_TASKS); - let currentGroupTask; + const handleCancel = () => { + groupTasksContext.setGroupTasksSteps([]); + navigate(`${Constants.ROUTE_PATHS.GROUP_TASKS}${paramCategory}`); + }; - groupTasksContext.groupTasks.forEach((groupTask) => { - if (groupTask.Id === paramGroupTaskId) { - currentGroupTask = groupTask; - } - }); + console.log("isOpen", isOpen); - // invalid group task id in url specified or no permissions - if ( - !currentGroupTask || - !hasXYPermission( - appContext.userPermissions, - Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYView, - currentGroupTask.Category - ) - ) { - return ( - - ); - } + useEffect(() => { + console.log("start useEffect"); + + if (!isOpen) return; + + console.log("trigger use effect"); + + myFetch( + `/grouptasks/${paramCategory}/steps/${paramGroupTaskId}`, + "GET" + ).then((data) => { + console.log("data", data); + + currentGroupTask.current = data.GroupTask; + groupTasksContext.setGroupTasksSteps(data.GroupTaskSteps); + }); + }, [isOpen, paramCategory]); + + if (!isOpen) return <>; const getAlertType = (status) => { switch (status) { @@ -136,9 +138,9 @@ export default function GroupTasksViewModal({ isOpen }) { webSocketContext.SendSocketMessage( SentMessagesCommands.TaskFailedTryAgainRunTaskStep, { - groupTaskId: currentGroupTask.Id, - category: currentGroupTask.Category, - groupId: currentGroupTask.GroupId, + groupTaskId: currentGroupTask.current.Id, + category: currentGroupTask.current.Category, + groupId: currentGroupTask.current.GroupId, step: step, taskStepId: taskStepId, } @@ -210,9 +212,9 @@ export default function GroupTasksViewModal({ isOpen }) { webSocketContext.SendSocketMessage( SentMessagesCommands.TaskContinueTaskStep, { - groupTaskId: currentGroupTask.Id, - category: currentGroupTask.Category, - groupId: currentGroupTask.GroupId, + groupTaskId: currentGroupTask.current.Id, + category: currentGroupTask.current.Category, + groupId: currentGroupTask.current.GroupId, step: step, taskStepId: taskStepId, taskInputs: taskInputs, @@ -225,9 +227,9 @@ export default function GroupTasksViewModal({ isOpen }) { SentMessagesCommands.HandleUserActionTaskStep, { action: action, - groupTaskId: currentGroupTask.Id, - category: currentGroupTask.Category, - groupId: currentGroupTask.GroupId, + groupTaskId: currentGroupTask.current.Id, + category: currentGroupTask.current.Category, + groupId: currentGroupTask.current.GroupId, step: step, taskStepId: taskStepId, } @@ -235,11 +237,17 @@ export default function GroupTasksViewModal({ isOpen }) { }; const ActionHandler = ({ status, taskStepId, index, taskLocked }) => { - const currentStepTask = groupTasksContext.categoryGroups + /*const currentStepTask = groupTasksContext.categoryGroups .find((category) => category.category === currentGroupTask.Category) .groups.find((group) => group.id === currentGroupTask.GroupId).tasks[ index - ]; + ]; */ + + console.log("here2", groupTasksContext.categoryGroup); + + const currentStepTask = groupTasksContext.categoryGroup.groups.find( + (group) => group.id === currentGroupTask.current.GroupId + ).tasks[index]; switch (status) { case Constants.GROUP_TASKS_STATUS.FAILED: @@ -337,13 +345,17 @@ export default function GroupTasksViewModal({ isOpen }) { groupTaskSteps.sort((a, b) => a.Step - b.Step); - groupTasksContext.categoryGroups.forEach((categoryGroup) => { - if (categoryGroup.category === currentGroupTask.Category) { - categoryGroup.groups.forEach((group) => { - if (currentGroupTask.GroupId === group.id) { - groupTasks = group.tasks; - } - }); + console.log( + "render here", + groupTaskSteps, + paramGroupTaskId, + groupTasksContext.groupTasksSteps + ); + + groupTasksContext.categoryGroup.groups.forEach((group) => { + if (currentGroupTask.current.GroupId === group.id) { + groupTasks = group.tasks; + return; } }); @@ -487,10 +499,10 @@ export default function GroupTasksViewModal({ isOpen }) { description={ groupTaskSteps[index].Status === Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED ? ( -
+
0 && (
@@ -536,8 +548,12 @@ export default function GroupTasksViewModal({ isOpen }) { ); // occurs when tasks were taken from the group task config, but at a previous time the tasks existed - if (currentGroupTask.NumberOfSteps > groupTasks.length) { - for (let i = groupTasks.length; i < currentGroupTask.NumberOfSteps; i++) { + if (currentGroupTask.current.NumberOfSteps > groupTasks.length) { + for ( + let i = groupTasks.length; + i < currentGroupTask.current.NumberOfSteps; + i++ + ) { let stepParams = []; if (groupTaskSteps[i].Inputs !== "") { @@ -557,151 +573,158 @@ export default function GroupTasksViewModal({ isOpen }) { return stepItems; }; + // invalid group task id in url specified or no permissions + if ( + !currentGroupTask.current || + !hasXYPermission( + appContext.userPermissions, + Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYView, + currentGroupTask.current.Category + ) + ) { + return ( + + ); + } + + console.log("context", groupTasksContext.categoryGroup); + return ( {notificationContextHolder} - {groupTasksContext.groupTasks.map((groupTask) => { - if (groupTask.Id === paramGroupTaskId) { - let currentGroupTask = groupTask; - - return ( -
-

+

+ {currentGroupTask.current.GroupName}{" "} + - {currentGroupTask.GroupName}{" "} - + } + content={ + <> +

+ ID:{" "} + {paramGroupTaskId}
+ + {t("groupTasks.groupTasksViewModal.category")}: + {" "} + {currentGroupTask.current.Category} +
+ + {t("groupTasks.groupTasksViewModal.startedAt")}: + {" "} + {FormatDatetime(currentGroupTask.current.StartedAt)} +
+ + {t("groupTasks.groupTasksViewModal.endedAt")}: + {" "} + {FormatDatetime(currentGroupTask.current.EndedAt)} +
+ + {t("groupTasks.groupTasksViewModal.duration")}: + {" "} + {GetDuration( + currentGroupTask.current.StartedAt, + currentGroupTask.current.EndedAt + )} +

+ + {currentGroupTask.current.GlobalInputs !== "[]" ? ( + <>

- {t("groupTasks.groupTasksViewModal.popover.details")} + {t( + "groupTasks.groupTasksViewModal.popover.specifiedGlobalInputs" + )}

- } - content={ - <> -

- ID:{" "} - {paramGroupTaskId}
- - {t("groupTasks.groupTasksViewModal.category")}: - {" "} - {currentGroupTask.Category} -
- - {t("groupTasks.groupTasksViewModal.startedAt")}: - {" "} - {FormatDatetime(currentGroupTask.StartedAt)} -
- - {t("groupTasks.groupTasksViewModal.endedAt")}: - {" "} - {FormatDatetime(currentGroupTask.EndedAt)} -
- - {t("groupTasks.groupTasksViewModal.duration")}: - {" "} - {GetDuration( - currentGroupTask.StartedAt, - currentGroupTask.EndedAt - )} -

- {currentGroupTask.GlobalInputs !== "[]" ? ( - <> -

- {t( - "groupTasks.groupTasksViewModal.popover.specifiedGlobalInputs" - )} -

+ {console.log("here3", groupTasksContext.categoryGroup)} - - {JSON.parse(currentGroupTask.GlobalInputs).map( - (globalInput) => { - return ( - - - { - groupTasksContext.categoryGroups - .find( - (categoryGroup) => - categoryGroup.category === - currentGroupTask.Category - ) - .groups.find( - (group) => - group.id === - currentGroupTask.GroupId - ) - .globalInputs.find( - (gI) => - gI.parameterName === - globalInput.parameterName - ).displayName - } - :{" "} - - - {globalInput.value !== "" - ? globalInput.value - : Constants.TEXT_EMPTY_PLACEHOLDER} - -
- - ); + + {JSON.parse(currentGroupTask.current.GlobalInputs).map( + (globalInput) => { + return ( + - - ) : null} - - } - > - - {" "} - -
-

-
- {currentGroupTask.Description} -
+ > + + { + 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} + +
+ + ); + } + )} + + + ) : null} + + } + > + + {" "} + +
+ +
+ {currentGroupTask.current.Description} +
- -
- ); - } - return ""; - })} + +
); } diff --git a/src/Pages/GroupTasks/Overview/index.js b/src/Pages/GroupTasks/Overview/index.js index 63f7abb..195a634 100644 --- a/src/Pages/GroupTasks/Overview/index.js +++ b/src/Pages/GroupTasks/Overview/index.js @@ -53,14 +53,12 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) { }; const fetchGroupTasks = (page) => { - myFetch(`/grouptasks/${paramCategory}?page=${paginationPage}`, "GET").then( - (data) => { - totalPages.current = data.TotalPages; + myFetch(`/grouptasks/${paramCategory}?page=${page}`, "GET").then((data) => { + totalPages.current = data.TotalPages; - groupTasksContext.setCategoryGroup(data.CategoryGroup); - groupTasksContext.setGroupTasks(data.GroupTasks); - } - ); + groupTasksContext.setCategoryGroup(data.CategoryGroup); + groupTasksContext.setGroupTasks(data.GroupTasks); + }); }; useEffect(() => { diff --git a/src/utils.js b/src/utils.js index 7fe19a8..9357719 100644 --- a/src/utils.js +++ b/src/utils.js @@ -47,8 +47,7 @@ export const Constants = { ROUTE_PATHS: { EQUIPMENT_DOCUMENTATION: "/equipment-documentation", EQUIPMENT_DOCUMENTATION_VIEW: "/equipment-documentation/", - GROUP_TASKS: "/group-tasks", - GROUP_TASKS_VIEW: "/group-tasks/", + GROUP_TASKS: "/group-tasks/", }, GROUP_TASKS_STATUS: { FINISHED: 1,