e-suite/webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic Layout for the assignment completion page is now present.

Browse Source
This commit is contained in:
Colin Dawson 2026-03-18 20:34:43 +00:00
parent 5e47c8839f
commit ea95b0747d
3 changed files with 213 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/Sass/_assignmentComplete.scss Normal file
View File

@ -0,0 +1,113 @@
@import "./_esuiteVariables.scss";
$assignmentComplete-border-color: darken($mode--light-bg, 50%);
.assignmentComplete {
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: 100%;
max-height: 100%;
min-height: 0;
overflow: hidden;
.topMenu {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid $assignmentComplete-border-color;
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.25em;
}
h1,
h2 {
margin: 0;
}
.actions {
margin-left: auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
}
.mainContent {
display: flex;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
.workarea {
flex: 1;
min-width: 0;
padding: 20px;
overflow-x: auto;
overflow-y: visible;
.workareaInner {
min-width: 420px;
}
}
.information {
flex: 0 0 360px;
max-width: 360px;
width: 360px;
padding: 20px;
.taskDetails {
border: 1px solid $assignmentComplete-border-color;
border-radius: 4px;
padding: 12px;
margin-bottom: 12px;
.taskDetailsHeader {
background-color: $assignmentComplete-border-color;
margin: -12px -12px 12px;
padding: 8px 12px;
}
.taskDetailsLabel {
font-weight: 600;
}
}
.assigneeDetailsLabel {
font-weight: 600;
}
}
}
}
@media (max-width: 900px) {
.assignmentComplete {
.topMenu {
flex-wrap: wrap;
.actions {
width: 100%;
margin-left: 0;
}
}
.mainContent {
flex-direction: column;
.information {
width: 100%;
max-width: 100%;
border-left: 0;
border-top: 1px solid $assignmentComplete-border-color;
}
}
}
}

76
src/modules/manager/task/assignments/AssignmentComplete.tsx
View File

@ -6,12 +6,18 @@ 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 "../../../../Sass/_assignmentComplete.scss";
const AssignmentComplete: React.FC = () => {
const { assignmentId } = useParams<{ assignmentId: string }>();
const { t } = useTranslation(Namespaces.Common);
const [assignment, setAssignment] =
useState<GetAssignmentForCompletion | null>(null);
const [assignmentDetails, setAssignmentDetails] =
useState<GetAssignmentForCompletion>();
const loadAssignment = useCallback(async () => {
if (assignmentId === undefined) {
@ -24,7 +30,7 @@ const AssignmentComplete: React.FC = () => {
BigInt(assignmentId),
);
if (assignmentDetails) {
setAssignment(assignmentDetails);
setAssignmentDetails(assignmentDetails);
}
} catch (ex: any) {
toast.error(ex.message);
@ -35,10 +41,68 @@ const AssignmentComplete: React.FC = () => {
void loadAssignment();
}, [loadAssignment]);
if (assignmentDetails === undefined) {
return <LoadingPanel />;
}
var taskDefinition = assignmentDetails.workflowTemplateVersion.tasks.find(
(t) => t.config.guid == assignmentDetails.task.taskGuid,
)!;
return (
<>
{assignment ? <>{assignment.taskName}</> : <>{t("CompleteAssignment")}</>}
</>
<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}>Complete</Button>
</div>
</div>
<div className="mainContent">
<div className="workarea">
<div className="workareaInner">
<div>{taskDefinition.config.description}</div>
<div>Comments</div>
<div>{assignmentDetails.assignment.comments}</div>
</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>
);
};

37
src/modules/manager/task/assignments/services/assignmentCompleteService.ts
View File

@ -3,19 +3,42 @@ import {
GeneralIdRef,
MakeGeneralIdRefParams,
} from "../../../../../utils/GeneralIdRef";
import { ReadWorkflowTemplateVersion } from "../../../workflowTemplates/services/WorkflowTemplateService";
const apiEndpoint = "/Tasks";
export interface GetAssignmentForCompletion {
export interface GetAssignment {
id: bigint;
guid: string;
startDateTime: Date;
raci: string;
allowNoVerdict: boolean;
outcomes: string[];
roleId: GeneralIdRef;
userId: GeneralIdRef;
comments: string;
}
export interface GetTask {
id: bigint;
guid: string;
taskType: string;
taskName: string;
activityId: GeneralIdRef;
activityName: string;
user?: GeneralIdRef;
role?: GeneralIdRef;
startDateTime?: Date;
taskType: string;
taskGuid: string;
}
export interface GetActivity {
id: bigint;
guid: string;
name: string;
workflowVersionId: bigint;
}
export interface GetAssignmentForCompletion {
assignment: GetAssignment;
task: GetTask;
activity: GetActivity;
workflowTemplateVersion: ReadWorkflowTemplateVersion;
}
export async function getAssignmentForCompletion(