Jannex
/
admin-dashboard-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

group task steps

main
alex 2023-08-30 22:25:42 +02:00
parent 7be11bc40f
commit c77ea909a8
6 changed files with 221 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Components/AppRoutes/index.js
View File

@ -133,7 +133,7 @@ export default function AppRoutes() {
)} )}
<Route <Route
path={`${Constants.ROUTE_PATHS.GROUP_TASKS_VIEW}:paramCategory`} path={`${Constants.ROUTE_PATHS.GROUP_TASKS}:paramCategory`}
element={ element={
<SuspenseFallback> <SuspenseFallback>
<GroupTasks isGroupTasksViewModalOpen={false} /> <GroupTasks isGroupTasksViewModalOpen={false} />
@ -141,6 +141,15 @@ export default function AppRoutes() {
} }
/> />
<Route
path={`${Constants.ROUTE_PATHS.GROUP_TASKS}:paramCategory/view/:paramGroupTaskId`}
element={
<SuspenseFallback>
<GroupTasks isGroupTasksViewModalOpen={true} />
</SuspenseFallback>
}
/>
{hasPermission( {hasPermission(
appContext.userPermissions, appContext.userPermissions,
Constants.PERMISSIONS.GROUP_TASKS.HISTORY Constants.PERMISSIONS.GROUP_TASKS.HISTORY

3
src/Contexts/GroupTasksContext.js
View File

@ -12,8 +12,11 @@ const GroupTasksContext = createContext(preview);
export const useGroupTasksContext = () => useContext(GroupTasksContext); export const useGroupTasksContext = () => useContext(GroupTasksContext);
export function GroupTasksProvider({ children }) { export function GroupTasksProvider({ children }) {
// will be set on open a category on side menu
const [categoryGroup, setCategoryGroup] = useState({}); const [categoryGroup, setCategoryGroup] = useState({});
// will be set on open a category on side menu - shown on the table
const [groupTasks, setGroupTasks] = useState([]); const [groupTasks, setGroupTasks] = useState([]);
// will be set on viewing the steps of a group task
const [groupTasksSteps, setGroupTasksSteps] = useState([]); const [groupTasksSteps, setGroupTasksSteps] = useState([]);
const startGroupTasksOpenModalRememberIdRef = useRef(null); const startGroupTasksOpenModalRememberIdRef = useRef(null);

4
src/Pages/GroupTasks/Overview/GroupTasksTableList.js
View File

@ -96,7 +96,9 @@ export default function GroupTaskTableList({
key: "action", key: "action",
render: (_, record) => ( render: (_, record) => (
<Space size="middle"> <Space size="middle">
<Link to={Constants.ROUTE_PATHS.GROUP_TASKS_VIEW + record.key}> <Link
to={`${Constants.ROUTE_PATHS.GROUP_TASKS}${categoryGroup.category}/view/${record.key}`}
>
{t("groupTasks.groupTasksTableList.column.action.link")} {t("groupTasks.groupTasksTableList.column.action.link")}
</Link> </Link>
</Space> </Space>

175
src/Pages/GroupTasks/Overview/GroupTasksViewModal.js
View File

@ -10,7 +10,7 @@ import {
Tag, Tag,
notification, notification,
} from "antd"; } from "antd";
import { useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { import {
Constants, Constants,
@ -20,6 +20,7 @@ import {
getUserId, getUserId,
GroupTasksStepsLockedAndUserUpdateInputValueRememberId, GroupTasksStepsLockedAndUserUpdateInputValueRememberId,
hasXYPermission, hasXYPermission,
myFetch,
} from "../../../utils"; } from "../../../utils";
import { import {
CheckOutlined, CheckOutlined,
@ -45,35 +46,36 @@ export default function GroupTasksViewModal({ isOpen }) {
const navigate = useNavigate(); const navigate = useNavigate();
const [notificationApi, notificationContextHolder] = const [notificationApi, notificationContextHolder] =
notification.useNotification(); notification.useNotification();
let { paramGroupTaskId } = useParams(); let { paramCategory, paramGroupTaskId } = useParams();
const { t } = useTranslation(); const { t } = useTranslation();
const currentGroupTask = useRef(null);
const handleCancel = () => navigate(Constants.ROUTE_PATHS.GROUP_TASKS); const handleCancel = () => {
let currentGroupTask; groupTasksContext.setGroupTasksSteps([]);
navigate(`${Constants.ROUTE_PATHS.GROUP_TASKS}${paramCategory}`);
};
groupTasksContext.groupTasks.forEach((groupTask) => { console.log("isOpen", isOpen);
if (groupTask.Id === paramGroupTaskId) {
currentGroupTask = groupTask; 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]);
// invalid group task id in url specified or no permissions if (!isOpen) return <></>;
if (
!currentGroupTask ||
!hasXYPermission(
appContext.userPermissions,
Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYView,
currentGroupTask.Category
)
) {
return (
<MyNotFoundModal
isOpen={isOpen}
onCancel={handleCancel}
resultTitle={t("groupTasks.groupTasksViewModal.groupTaskNotFound")}
/>
);
}
const getAlertType = (status) => { const getAlertType = (status) => {
switch (status) { switch (status) {
@ -136,9 +138,9 @@ export default function GroupTasksViewModal({ isOpen }) {
webSocketContext.SendSocketMessage( webSocketContext.SendSocketMessage(
SentMessagesCommands.TaskFailedTryAgainRunTaskStep, SentMessagesCommands.TaskFailedTryAgainRunTaskStep,
{ {
groupTaskId: currentGroupTask.Id, groupTaskId: currentGroupTask.current.Id,
category: currentGroupTask.Category, category: currentGroupTask.current.Category,
groupId: currentGroupTask.GroupId, groupId: currentGroupTask.current.GroupId,
step: step, step: step,
taskStepId: taskStepId, taskStepId: taskStepId,
} }
@ -210,9 +212,9 @@ export default function GroupTasksViewModal({ isOpen }) {
webSocketContext.SendSocketMessage( webSocketContext.SendSocketMessage(
SentMessagesCommands.TaskContinueTaskStep, SentMessagesCommands.TaskContinueTaskStep,
{ {
groupTaskId: currentGroupTask.Id, groupTaskId: currentGroupTask.current.Id,
category: currentGroupTask.Category, category: currentGroupTask.current.Category,
groupId: currentGroupTask.GroupId, groupId: currentGroupTask.current.GroupId,
step: step, step: step,
taskStepId: taskStepId, taskStepId: taskStepId,
taskInputs: taskInputs, taskInputs: taskInputs,
@ -225,9 +227,9 @@ export default function GroupTasksViewModal({ isOpen }) {
SentMessagesCommands.HandleUserActionTaskStep, SentMessagesCommands.HandleUserActionTaskStep,
{ {
action: action, action: action,
groupTaskId: currentGroupTask.Id, groupTaskId: currentGroupTask.current.Id,
category: currentGroupTask.Category, category: currentGroupTask.current.Category,
groupId: currentGroupTask.GroupId, groupId: currentGroupTask.current.GroupId,
step: step, step: step,
taskStepId: taskStepId, taskStepId: taskStepId,
} }
@ -235,11 +237,17 @@ export default function GroupTasksViewModal({ isOpen }) {
}; };
const ActionHandler = ({ status, taskStepId, index, taskLocked }) => { const ActionHandler = ({ status, taskStepId, index, taskLocked }) => {
const currentStepTask = groupTasksContext.categoryGroups /*const currentStepTask = groupTasksContext.categoryGroups
.find((category) => category.category === currentGroupTask.Category) .find((category) => category.category === currentGroupTask.Category)
.groups.find((group) => group.id === currentGroupTask.GroupId).tasks[ .groups.find((group) => group.id === currentGroupTask.GroupId).tasks[
index index
]; ]; */
console.log("here2", groupTasksContext.categoryGroup);
const currentStepTask = groupTasksContext.categoryGroup.groups.find(
(group) => group.id === currentGroupTask.current.GroupId
).tasks[index];
switch (status) { switch (status) {
case Constants.GROUP_TASKS_STATUS.FAILED: case Constants.GROUP_TASKS_STATUS.FAILED:
@ -337,13 +345,17 @@ export default function GroupTasksViewModal({ isOpen }) {
groupTaskSteps.sort((a, b) => a.Step - b.Step); groupTaskSteps.sort((a, b) => a.Step - b.Step);
groupTasksContext.categoryGroups.forEach((categoryGroup) => { console.log(
if (categoryGroup.category === currentGroupTask.Category) { "render here",
categoryGroup.groups.forEach((group) => { groupTaskSteps,
if (currentGroupTask.GroupId === group.id) { paramGroupTaskId,
groupTasksContext.groupTasksSteps
);
groupTasksContext.categoryGroup.groups.forEach((group) => {
if (currentGroupTask.current.GroupId === group.id) {
groupTasks = group.tasks; groupTasks = group.tasks;
} return;
});
} }
}); });
@ -487,10 +499,10 @@ export default function GroupTasksViewModal({ isOpen }) {
description={ description={
groupTaskSteps[index].Status === groupTaskSteps[index].Status ===
Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED ? ( Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED ? (
<div id={`${currentGroupTask.Id}-scroll-${index}`}> <div id={`${currentGroupTask.current.Id}-scroll-${index}`}>
<InputRequiredHandler <InputRequiredHandler
webSocketContext={webSocketContext} webSocketContext={webSocketContext}
currentGroupTask={currentGroupTask} currentGroupTask={currentGroupTask.current}
groupTaskParameters={groupTask.parameters} groupTaskParameters={groupTask.parameters}
groupTaskStepInputs={ groupTaskStepInputs={
groupTaskSteps[index] !== undefined && groupTaskSteps[index] !== undefined &&
@ -507,11 +519,11 @@ export default function GroupTasksViewModal({ isOpen }) {
) : ( ) : (
groupTaskSteps[index].Log.length > 0 && ( groupTaskSteps[index].Log.length > 0 && (
<div <div
id={`${currentGroupTask.Id}-scroll-${index}`} id={`${currentGroupTask.current.Id}-scroll-${index}`}
style={{ width: "100%" }} style={{ width: "100%" }}
> >
<GroupTaskStepLogHandler <GroupTaskStepLogHandler
currentGroupTaskId={currentGroupTask.Id} currentGroupTaskId={currentGroupTask.current.Id}
log={groupTaskSteps[index].Log} log={groupTaskSteps[index].Log}
files={groupTaskSteps[index].Files} files={groupTaskSteps[index].Files}
/> />
@ -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 // occurs when tasks were taken from the group task config, but at a previous time the tasks existed
if (currentGroupTask.NumberOfSteps > groupTasks.length) { if (currentGroupTask.current.NumberOfSteps > groupTasks.length) {
for (let i = groupTasks.length; i < currentGroupTask.NumberOfSteps; i++) { for (
let i = groupTasks.length;
i < currentGroupTask.current.NumberOfSteps;
i++
) {
let stepParams = []; let stepParams = [];
if (groupTaskSteps[i].Inputs !== "") { if (groupTaskSteps[i].Inputs !== "") {
@ -557,15 +573,30 @@ export default function GroupTasksViewModal({ isOpen }) {
return stepItems; 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 (
<MyNotFoundModal
isOpen={isOpen}
onCancel={handleCancel}
resultTitle={t("groupTasks.groupTasksViewModal.groupTaskNotFound")}
/>
);
}
console.log("context", groupTasksContext.categoryGroup);
return ( return (
<MyModal isOpen={isOpen} onCancel={handleCancel}> <MyModal isOpen={isOpen} onCancel={handleCancel}>
{notificationContextHolder} {notificationContextHolder}
{groupTasksContext.groupTasks.map((groupTask) => {
if (groupTask.Id === paramGroupTaskId) {
let currentGroupTask = groupTask;
return (
<div key={paramGroupTaskId}> <div key={paramGroupTaskId}>
<h1 <h1
style={{ style={{
@ -574,7 +605,7 @@ export default function GroupTasksViewModal({ isOpen }) {
marginBottom: 0, marginBottom: 0,
}} }}
> >
{currentGroupTask.GroupName}{" "} {currentGroupTask.current.GroupName}{" "}
<Popover <Popover
trigger="click" trigger="click"
title={ title={
@ -595,28 +626,28 @@ export default function GroupTasksViewModal({ isOpen }) {
<span style={{ fontWeight: "bold" }}> <span style={{ fontWeight: "bold" }}>
{t("groupTasks.groupTasksViewModal.category")}: {t("groupTasks.groupTasksViewModal.category")}:
</span>{" "} </span>{" "}
{currentGroupTask.Category} {currentGroupTask.current.Category}
<br /> <br />
<span style={{ fontWeight: "bold" }}> <span style={{ fontWeight: "bold" }}>
{t("groupTasks.groupTasksViewModal.startedAt")}: {t("groupTasks.groupTasksViewModal.startedAt")}:
</span>{" "} </span>{" "}
{FormatDatetime(currentGroupTask.StartedAt)} {FormatDatetime(currentGroupTask.current.StartedAt)}
<br /> <br />
<span style={{ fontWeight: "bold" }}> <span style={{ fontWeight: "bold" }}>
{t("groupTasks.groupTasksViewModal.endedAt")}: {t("groupTasks.groupTasksViewModal.endedAt")}:
</span>{" "} </span>{" "}
{FormatDatetime(currentGroupTask.EndedAt)} {FormatDatetime(currentGroupTask.current.EndedAt)}
<br /> <br />
<span style={{ fontWeight: "bold" }}> <span style={{ fontWeight: "bold" }}>
{t("groupTasks.groupTasksViewModal.duration")}: {t("groupTasks.groupTasksViewModal.duration")}:
</span>{" "} </span>{" "}
{GetDuration( {GetDuration(
currentGroupTask.StartedAt, currentGroupTask.current.StartedAt,
currentGroupTask.EndedAt currentGroupTask.current.EndedAt
)} )}
</p> </p>
{currentGroupTask.GlobalInputs !== "[]" ? ( {currentGroupTask.current.GlobalInputs !== "[]" ? (
<> <>
<h2 <h2
style={{ style={{
@ -629,28 +660,24 @@ export default function GroupTasksViewModal({ isOpen }) {
)} )}
</h2> </h2>
{console.log("here3", groupTasksContext.categoryGroup)}
<span> <span>
{JSON.parse(currentGroupTask.GlobalInputs).map( {JSON.parse(currentGroupTask.current.GlobalInputs).map(
(globalInput) => { (globalInput) => {
return ( return (
<span <span
key={ key={
globalInput.parameterName + globalInput.parameterName + globalInput.value
globalInput.value
} }
> >
<span style={{ fontWeight: "bold" }}> <span style={{ fontWeight: "bold" }}>
{ {
groupTasksContext.categoryGroups groupTasksContext.categoryGroup.groups
.find( .find(
(categoryGroup) =>
categoryGroup.category ===
currentGroupTask.Category
)
.groups.find(
(group) => (group) =>
group.id === group.id ===
currentGroupTask.GroupId currentGroupTask.current.GroupId
) )
.globalInputs.find( .globalInputs.find(
(gI) => (gI) =>
@ -688,20 +715,16 @@ export default function GroupTasksViewModal({ isOpen }) {
<MyAvatar <MyAvatar
tooltip tooltip
allUsers={webSocketContext.AllUsers} allUsers={webSocketContext.AllUsers}
userId={currentGroupTask.CreatorUserId} userId={currentGroupTask.current.CreatorUserId}
/> />
<br /> <br />
</h1> </h1>
<div style={{ marginBottom: 16 }}> <div style={{ marginBottom: 16 }}>
<span>{currentGroupTask.Description}</span> <span>{currentGroupTask.current.Description}</span>
</div> </div>
<Steps direction="vertical" items={stepsItemHandler()} /> <Steps direction="vertical" items={stepsItemHandler()} />
</div> </div>
);
}
return "";
})}
</MyModal> </MyModal>
); );
} }

6
src/Pages/GroupTasks/Overview/index.js
View File

@ -53,14 +53,12 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
}; };
const fetchGroupTasks = (page) => { const fetchGroupTasks = (page) => {
myFetch(`/grouptasks/${paramCategory}?page=${paginationPage}`, "GET").then( myFetch(`/grouptasks/${paramCategory}?page=${page}`, "GET").then((data) => {
(data) => {
totalPages.current = data.TotalPages; totalPages.current = data.TotalPages;
groupTasksContext.setCategoryGroup(data.CategoryGroup); groupTasksContext.setCategoryGroup(data.CategoryGroup);
groupTasksContext.setGroupTasks(data.GroupTasks); groupTasksContext.setGroupTasks(data.GroupTasks);
} });
);
}; };
useEffect(() => { useEffect(() => {

3
src/utils.js
View File

@ -47,8 +47,7 @@ export const Constants = {
ROUTE_PATHS: { ROUTE_PATHS: {
EQUIPMENT_DOCUMENTATION: "/equipment-documentation", EQUIPMENT_DOCUMENTATION: "/equipment-documentation",
EQUIPMENT_DOCUMENTATION_VIEW: "/equipment-documentation/", EQUIPMENT_DOCUMENTATION_VIEW: "/equipment-documentation/",
GROUP_TASKS: "/group-tasks", GROUP_TASKS: "/group-tasks/",
GROUP_TASKS_VIEW: "/group-tasks/",
}, },
GROUP_TASKS_STATUS: { GROUP_TASKS_STATUS: {
FINISHED: 1, FINISHED: 1,