128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
import React, { useCallback, useEffect, useState } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import { toast } from "react-toastify";
|
|
import { Namespaces } from "../../../../i18n/i18n";
|
|
import assignmentCompleteService, {
|
|
GetAssignmentForCompletion,
|
|
} from "./services/assignmentCompleteService";
|
|
import { DateView } from "../../../../components/common/DateView";
|
|
import LoadingPanel from "../../../../components/common/LoadingPanel";
|
|
import AssigneePanel from "../../tasks/components/AssigneePanel";
|
|
import TaskTypeAndNameDisplayPanel from "../../workflowTemplates/components/TaskTypeAndNameDisplayPanel";
|
|
import Button, { ButtonType } from "../../../../components/common/Button";
|
|
import TaskProcessor from "./components/TaskProcessor";
|
|
import "../../../../Sass/_assignmentComplete.scss";
|
|
|
|
const AssignmentComplete: React.FC = () => {
|
|
const { assignmentId } = useParams<{ assignmentId: string }>();
|
|
const { t } = useTranslation(Namespaces.Common);
|
|
const [isTaskValid, setIsTaskValid] = useState<boolean>(false);
|
|
const [taskData, setTaskData] = useState<Record<string, unknown>>({});
|
|
const [assignmentDetails, setAssignmentDetails] =
|
|
useState<GetAssignmentForCompletion>();
|
|
|
|
const loadAssignment = useCallback(async () => {
|
|
if (assignmentId === undefined) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const assignmentDetails =
|
|
await assignmentCompleteService.getAssignmentForCompletion(
|
|
BigInt(assignmentId),
|
|
);
|
|
if (assignmentDetails) {
|
|
setAssignmentDetails(assignmentDetails);
|
|
setTaskData({
|
|
comments: assignmentDetails.assignment.comments ?? "",
|
|
});
|
|
}
|
|
} catch (ex: any) {
|
|
toast.error(ex.message);
|
|
}
|
|
}, [assignmentId]);
|
|
|
|
useEffect(() => {
|
|
void loadAssignment();
|
|
}, [loadAssignment]);
|
|
|
|
if (assignmentDetails === undefined) {
|
|
return <LoadingPanel />;
|
|
}
|
|
|
|
var taskDefinition = assignmentDetails.workflowTemplateVersion.tasks.find(
|
|
(t) => t.config.guid == assignmentDetails.task.taskGuid,
|
|
)!;
|
|
|
|
return (
|
|
<div className="assignmentComplete">
|
|
<div className="topMenu">
|
|
<div>
|
|
<h1>
|
|
<TaskTypeAndNameDisplayPanel
|
|
taskName={assignmentDetails.task.taskName}
|
|
taskType={assignmentDetails.task.taskType}
|
|
showValidationErrorIcon={false}
|
|
/>
|
|
</h1>
|
|
<h2>{assignmentDetails.activity.name}</h2>
|
|
</div>
|
|
<div className="actions">
|
|
<Button
|
|
buttonType={ButtonType.primary}
|
|
disabled={!isTaskValid}
|
|
onClick={() => {
|
|
console.log("Task data to submit:", taskData);
|
|
toast.info("Complete action not implemented yet");
|
|
}}
|
|
>
|
|
Complete
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="mainContent">
|
|
<div className="workarea">
|
|
<div className="workareaInner">
|
|
<TaskProcessor
|
|
assignmentDetails={assignmentDetails}
|
|
taskDefinition={taskDefinition}
|
|
taskData={taskData}
|
|
onTaskDataChange={setTaskData}
|
|
onValidationChange={setIsTaskValid}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="information">
|
|
<div className="taskDetails">
|
|
<div className="taskDetailsHeader">Current Task Info</div>
|
|
<div>
|
|
<div className="taskDetailsLabel">Name</div>
|
|
<div>{assignmentDetails.task.taskName}</div>
|
|
<div className="taskDetailsLabel">Started</div>
|
|
<div>
|
|
<DateView value={assignmentDetails.assignment.startDateTime} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="assigneeDetails">
|
|
<div className="assigneeDetailsLabel">Assigned to</div>
|
|
<div>Contacts</div>
|
|
<div>
|
|
<AssigneePanel user={assignmentDetails.assignment.userId} />
|
|
</div>
|
|
<div>Roles</div>
|
|
<div>
|
|
<AssigneePanel role={assignmentDetails.assignment.roleId} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AssignmentComplete;
|