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
path={`${Constants.ROUTE_PATHS.GROUP_TASKS_VIEW}:paramCategory`}
path={`${Constants.ROUTE_PATHS.GROUP_TASKS}:paramCategory`}
element={
<SuspenseFallback>
<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(
appContext.userPermissions,
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 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);

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

@ -96,7 +96,9 @@ export default function GroupTaskTableList({
key: "action",
render: (_, record) => (
<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")}
</Link>
</Space>

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

@ -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);
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 (
!currentGroupTask ||
!hasXYPermission(
appContext.userPermissions,
Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYView,
currentGroupTask.Category
)
) {
return (
<MyNotFoundModal
isOpen={isOpen}
onCancel={handleCancel}
resultTitle={t("groupTasks.groupTasksViewModal.groupTaskNotFound")}
/>
);
}
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) {
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 ? (
<div id={`${currentGroupTask.Id}-scroll-${index}`}>
<div id={`${currentGroupTask.current.Id}-scroll-${index}`}>
<InputRequiredHandler
webSocketContext={webSocketContext}
currentGroupTask={currentGroupTask}
currentGroupTask={currentGroupTask.current}
groupTaskParameters={groupTask.parameters}
groupTaskStepInputs={
groupTaskSteps[index] !== undefined &&
@ -507,11 +519,11 @@ export default function GroupTasksViewModal({ isOpen }) {
) : (
groupTaskSteps[index].Log.length > 0 && (
<div
id={`${currentGroupTask.Id}-scroll-${index}`}
id={`${currentGroupTask.current.Id}-scroll-${index}`}
style={{ width: "100%" }}
>
<GroupTaskStepLogHandler
currentGroupTaskId={currentGroupTask.Id}
currentGroupTaskId={currentGroupTask.current.Id}
log={groupTaskSteps[index].Log}
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
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,15 +573,30 @@ 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 (
<MyNotFoundModal
isOpen={isOpen}
onCancel={handleCancel}
resultTitle={t("groupTasks.groupTasksViewModal.groupTaskNotFound")}
/>
);
}
console.log("context", groupTasksContext.categoryGroup);
return (
<MyModal isOpen={isOpen} onCancel={handleCancel}>
{notificationContextHolder}
{groupTasksContext.groupTasks.map((groupTask) => {
if (groupTask.Id === paramGroupTaskId) {
let currentGroupTask = groupTask;
return (
<div key={paramGroupTaskId}>
<h1
style={{
@ -574,7 +605,7 @@ export default function GroupTasksViewModal({ isOpen }) {
marginBottom: 0,
}}
>
{currentGroupTask.GroupName}{" "}
{currentGroupTask.current.GroupName}{" "}
<Popover
trigger="click"
title={
@ -595,28 +626,28 @@ export default function GroupTasksViewModal({ isOpen }) {
<span style={{ fontWeight: "bold" }}>
{t("groupTasks.groupTasksViewModal.category")}:
</span>{" "}
{currentGroupTask.Category}
{currentGroupTask.current.Category}
<br />
<span style={{ fontWeight: "bold" }}>
{t("groupTasks.groupTasksViewModal.startedAt")}:
</span>{" "}
{FormatDatetime(currentGroupTask.StartedAt)}
{FormatDatetime(currentGroupTask.current.StartedAt)}
<br />
<span style={{ fontWeight: "bold" }}>
{t("groupTasks.groupTasksViewModal.endedAt")}:
</span>{" "}
{FormatDatetime(currentGroupTask.EndedAt)}
{FormatDatetime(currentGroupTask.current.EndedAt)}
<br />
<span style={{ fontWeight: "bold" }}>
{t("groupTasks.groupTasksViewModal.duration")}:
</span>{" "}
{GetDuration(
currentGroupTask.StartedAt,
currentGroupTask.EndedAt
currentGroupTask.current.StartedAt,
currentGroupTask.current.EndedAt
)}
</p>
{currentGroupTask.GlobalInputs !== "[]" ? (
{currentGroupTask.current.GlobalInputs !== "[]" ? (
<>
<h2
style={{
@ -629,28 +660,24 @@ export default function GroupTasksViewModal({ isOpen }) {
)}
</h2>
{console.log("here3", groupTasksContext.categoryGroup)}
<span>
{JSON.parse(currentGroupTask.GlobalInputs).map(
{JSON.parse(currentGroupTask.current.GlobalInputs).map(
(globalInput) => {
return (
<span
key={
globalInput.parameterName +
globalInput.value
globalInput.parameterName + globalInput.value
}
>
<span style={{ fontWeight: "bold" }}>
{
groupTasksContext.categoryGroups
groupTasksContext.categoryGroup.groups
.find(
(categoryGroup) =>
categoryGroup.category ===
currentGroupTask.Category
)
.groups.find(
(group) =>
group.id ===
currentGroupTask.GroupId
currentGroupTask.current.GroupId
)
.globalInputs.find(
(gI) =>
@ -688,20 +715,16 @@ export default function GroupTasksViewModal({ isOpen }) {
<MyAvatar
tooltip
allUsers={webSocketContext.AllUsers}
userId={currentGroupTask.CreatorUserId}
userId={currentGroupTask.current.CreatorUserId}
/>
<br />
</h1>
<div style={{ marginBottom: 16 }}>
<span>{currentGroupTask.Description}</span>
<span>{currentGroupTask.current.Description}</span>
</div>
<Steps direction="vertical" items={stepsItemHandler()} />
</div>
);
}
return "";
})}
</MyModal>
);
}

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

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

3
src/utils.js
View File

@ -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,