webui/src/modules/manager/task/assignments/AssignmentComplete.tsx

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";
import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef";

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]);

  const handleComplete = useCallback(async () => {
    const assignmentGeneralId = MakeGeneralIdRef(
      assignmentDetails!.assignment.id,
      assignmentDetails?.assignment.guid,
    );

    await assignmentCompleteService.completeAssignment(
      assignmentGeneralId,
      taskData,
    );
    toast.success(`${assignmentDetails?.task.taskName} has been completed.`);
  }, [assignmentDetails, taskData]);

  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={handleComplete}
          >
            {t("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>
              {assignmentDetails.assignment.userId && (
                <AssigneePanel user={assignmentDetails.assignment.userId} />
              )}
              {!assignmentDetails.assignment.userId && <div>&nbsp;</div>}
            </div>
            <div>Roles</div>
            <div>
              {assignmentDetails.assignment.roleId && (
                <AssigneePanel role={assignmentDetails.assignment.roleId} />
              )}
              {!assignmentDetails.assignment.roleId && <div>&nbsp;</div>}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AssignmentComplete;