454 lines
16 KiB
JavaScript
454 lines
16 KiB
JavaScript
import React, { useEffect, useState, useRef } from "react";
|
|
import moment from "moment";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { z } from "zod";
|
|
import { TasksRepository } from "../../repositories/TaskRepository";
|
|
import showToast from "../../services/toastService";
|
|
import Avatar from "../common/Avatar";
|
|
import { getBgClassFromHash } from "../../utils/projectStatus";
|
|
import { cacheData, getCachedData } from "../../slices/apiDataManager";
|
|
import ImagePreview from "../common/ImagePreview";
|
|
import { useAuditStatus, useSubmitTaskComment } from "../../hooks/useTasks";
|
|
import Label from "../common/Label";
|
|
|
|
const ReportTaskComments = ({
|
|
commentsData,
|
|
closeModal,
|
|
actionAllow = false,
|
|
handleCloseAction,
|
|
}) => {
|
|
const defaultCompletedTask = Number(commentsData?.completedTask) || 0;
|
|
const schema = actionAllow
|
|
? z.object({
|
|
comment: z.string().min(1, "Comment cannot be empty"),
|
|
workStatus: z
|
|
.string()
|
|
.nonempty({ message: "Audit status is required" })
|
|
.default(""),
|
|
approvedTask: z.preprocess(
|
|
(val) =>
|
|
val === "" || val === null || Number.isNaN(val)
|
|
? undefined
|
|
: Number(val),
|
|
z
|
|
.number({
|
|
required_error: "Completed Work must be a number",
|
|
invalid_type_error: "Completed Work must be a number",
|
|
})
|
|
.min(0, "Completed Work must be greater than 0")
|
|
.max(defaultCompletedTask, {
|
|
message: `Completed task cannot exceed: ${defaultCompletedTask}`,
|
|
})
|
|
),
|
|
})
|
|
: z.object({
|
|
comment: z.string().min(1, "Comment cannot be empty"),
|
|
});
|
|
|
|
const [loading, setloading] = useState(false);
|
|
const [comments, setComment] = useState([]);
|
|
const { status, loading: auditStatusLoading } = useAuditStatus();
|
|
const [ IsNeededSubTask, setIsNeededSubTask ] = useState( false );
|
|
const { submitComment, isPending } = useSubmitTaskComment({
|
|
actionAllow,
|
|
onSuccessCallback: (data) => {
|
|
setComment((prev) => [...prev, data]);
|
|
reset();
|
|
if ( actionAllow )
|
|
{
|
|
handleCloseAction(IsNeededSubTask);
|
|
}
|
|
},
|
|
});
|
|
|
|
const {
|
|
watch,
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
formState: { errors },
|
|
reset,
|
|
} = useForm({
|
|
resolver: zodResolver(schema),
|
|
});
|
|
|
|
const containerRef = useRef(null);
|
|
const firstRender = useRef(true);
|
|
useEffect(() => {
|
|
const taskList = getCachedData("taskList");
|
|
if (taskList && taskList.data && commentsData?.id) {
|
|
const currentTask = taskList.data.find(
|
|
(task) => task.id === commentsData.id
|
|
);
|
|
if (currentTask && currentTask.comments) {
|
|
setComment(currentTask.comments);
|
|
} else {
|
|
setComment(commentsData?.comments || []);
|
|
}
|
|
} else {
|
|
setComment(commentsData?.comments || []);
|
|
}
|
|
firstRender.current = true;
|
|
}, [commentsData]);
|
|
|
|
useEffect(() => {
|
|
if (!firstRender.current && containerRef.current) {
|
|
containerRef.current.scrollTop = containerRef.current.scrollHeight;
|
|
} else {
|
|
firstRender.current = false;
|
|
}
|
|
}, [comments]);
|
|
|
|
const onSubmit = (formData) => {
|
|
submitComment({ data: formData, commentsData });
|
|
};
|
|
const selectedAuditStatus = watch("workStatus");
|
|
|
|
useEffect(() => {
|
|
reset({
|
|
approvedTask: defaultCompletedTask || 0,
|
|
});
|
|
}, [defaultCompletedTask]);
|
|
|
|
const completed_Task = watch("approvedTask")
|
|
return (
|
|
<div className="p-2 p-sm-1">
|
|
<div className="modal-body p-sm-4 p-0">
|
|
<h5 className=" text-center mb-2">Activity Summary</h5>
|
|
|
|
<div className="d-flex text-start align-items-start">
|
|
<div className="d-flex me-2">
|
|
<i className="bx bx-map me-2 bx-sm"></i>
|
|
<strong>Location:</strong>
|
|
</div>
|
|
<div>
|
|
{`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
|
|
<i className="bx bx-chevron-right"></i>{" "}
|
|
{`${commentsData?.workItem?.workArea?.floor?.floorName}`}{" "}
|
|
<i className="bx bx-chevron-right"></i>{" "}
|
|
{`${commentsData?.workItem?.workArea?.areaName}`}{" "}
|
|
<i className="bx bx-chevron-right"></i>{" "}
|
|
{`${commentsData?.workItem?.activityMaster?.activityName}`}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col-12 col-sm-6">
|
|
{commentsData?.assignedBy && (
|
|
<div className="fw-bold my-2 text-start d-flex align-items-center">
|
|
<i className="bx bx-user me-2 bx-sm"></i>
|
|
<span className="me-2">Assigned By:</span>
|
|
<span className="fw-normal">
|
|
{commentsData.assignedBy.firstName}{" "}
|
|
{commentsData.assignedBy.lastName}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="col-12 col-sm-6">
|
|
{commentsData.reportedBy && (
|
|
<div className="fw-bold text-start d-flex align-items-center">
|
|
<i className="bx bx-user-check bx-lg me-1"></i>
|
|
<span className="me-2">Reported By:</span>
|
|
<div className="d-flex align-items-center fw-normal">
|
|
<Avatar
|
|
firstName={commentsData.reportedBy.firstName}
|
|
lastName={commentsData.reportedBy.lastName}
|
|
size="xs"
|
|
className="me-1"
|
|
/>
|
|
{commentsData.reportedBy.firstName +
|
|
" " +
|
|
commentsData.reportedBy.lastName}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col-12 col-sm-6">
|
|
<div className="fw-bold my-2 text-start d-flex align-items-center">
|
|
<i className="fa fa-tasks fs-6 me-2"></i>
|
|
<span className="me-2">Planned Work:</span>
|
|
<span className="fw-normal">
|
|
{commentsData?.plannedTask}{" "}
|
|
{commentsData?.workItem?.activityMaster?.unitOfMeasurement}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12 col-sm-6">
|
|
{commentsData?.reportedDate != null && (
|
|
<div className="fw-bold my-2 text-start d-flex align-items-center">
|
|
<i className="bx bx-task me-2"></i>
|
|
<span className="me-2">Completed Work:</span>
|
|
<span className="fw-normal">
|
|
{commentsData?.completedTask}{" "}
|
|
{commentsData?.workItem?.activityMaster?.unitOfMeasurement}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="d-flex align-items-center flex-wrap">
|
|
<p className="fw-bold text-start m-0 me-1">
|
|
<i className="fa-solid me-2 fs-6 fa-users-gear"></i>Team :
|
|
</p>
|
|
<div className="d-flex flex-wrap align-items-center gap-2">
|
|
{commentsData?.teamMembers?.map((member, idx) => (
|
|
<span key={idx} className="d-flex align-items-center">
|
|
<Avatar
|
|
firstName={member?.firstName}
|
|
lastName={member?.lastName}
|
|
size="xs"
|
|
/>
|
|
{member?.firstName + " " + member?.lastName}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="fw-bold my-2 text-start d-flex">
|
|
<div className="d-flex ">
|
|
<i className="fa-solid fa-note-sticky me-3 fs-6"></i>Note:
|
|
</div>
|
|
<div className="fw-normal ms-2">{commentsData?.description}</div>
|
|
</div>
|
|
|
|
{commentsData?.approvedBy && (
|
|
<>
|
|
<hr className="my-1" />
|
|
<div className="row">
|
|
<div className="col-12 col-sm-6">
|
|
{commentsData.approvedBy && (
|
|
<div className="fw-bold text-start d-flex align-items-center">
|
|
<i className="bx bx-user-check bx-lg me-1"></i>
|
|
<span className="me-2">Approved By:</span>
|
|
<div className="d-flex align-items-center fw-normal">
|
|
<Avatar
|
|
firstName={commentsData.approvedBy.firstName}
|
|
lastName={commentsData.approvedBy.lastName}
|
|
size="xs"
|
|
className="me-1"
|
|
/>
|
|
{commentsData.approvedBy.firstName +
|
|
" " +
|
|
commentsData.approvedBy.lastName}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="col-12 col-sm-6">
|
|
{commentsData?.workStatus != null && (
|
|
<div className="fw-bold my-2 text-start d-flex align-items-center">
|
|
<i className="bx bx-time-five me-2"></i>
|
|
<span className="me-2">Work Status :</span>
|
|
<span className="fw-normal">
|
|
{commentsData?.workStatus.name}
|
|
{/* {commentsData?.} */}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="col-12 d-flex">
|
|
<span className="fw-bold">Total Approved : </span>
|
|
<span className="ms-2">{commentsData?.completedTask}</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{commentsData?.reportedPreSignedUrls?.length > 0 && (
|
|
<>
|
|
<p className="fw-bold m-0 text-start">
|
|
<i className="fa-solid fs-6 fa-paperclip me-3"></i>Attachment :
|
|
</p>
|
|
<div className=" text-start ms-3">
|
|
<ImagePreview
|
|
IsReported={true}
|
|
images={commentsData?.reportedPreSignedUrls}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)} className="text-start">
|
|
{actionAllow && !commentsData.approvedBy && (
|
|
<>
|
|
<div className="row align-items-end my-1">
|
|
<div className="col-6 col-sm-4 text-start">
|
|
<label>Completed</label>
|
|
<input
|
|
className="form-control form-control-sm"
|
|
{...register("approvedTask")}
|
|
type="number"
|
|
/>
|
|
{errors.approvedTask && (
|
|
<p className="danger-text m-0">
|
|
{errors.approvedTask.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="col-6 col-sm-4 text-start align-items-end m-0">
|
|
<Label htmlFor="workStatus" className="form-label" required>
|
|
Audit Status
|
|
</Label>
|
|
<select
|
|
id="workStatus"
|
|
className={`form-select form-select-sm`}
|
|
{...register("workStatus")}
|
|
defaultValue=""
|
|
onChange={(e) => setValue("workStatus", e.target.value)}
|
|
>
|
|
<option value="" disabled>
|
|
Select Status
|
|
</option>
|
|
{auditStatusLoading ? (
|
|
<option disabled>Loading...</option>
|
|
) : (
|
|
status.map((stat) => (
|
|
<option key={stat.id} value={stat.id}>
|
|
{stat.name}
|
|
</option>
|
|
))
|
|
)}
|
|
</select>
|
|
{errors.workStatus && (
|
|
<div className="danger-text">
|
|
{errors.workStatus.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
<i className="bx bx-comment-detail me-2"></i>
|
|
<label className="fw-bold text-start my-1">Add comment :</label>
|
|
<textarea
|
|
{...register("comment")}
|
|
className="form-control"
|
|
id="exampleFormControlTextarea1"
|
|
placeholder="Leave comment"
|
|
/>
|
|
{errors.comment && (
|
|
<div className="danger-text">{errors.comment.message}</div>
|
|
)}
|
|
<div
|
|
className={` ${
|
|
actionAllow && !commentsData.approvedBy
|
|
? " d-flex justify-content-between align-items-center"
|
|
: "text-end"
|
|
} mt-2`}
|
|
>
|
|
<div
|
|
className={`form-check ${
|
|
!(actionAllow && !commentsData.approvedBy && defaultCompletedTask > completed_Task ) && "d-none"
|
|
} `}
|
|
>
|
|
<input
|
|
className="form-check-input"
|
|
type="checkbox"
|
|
onChange={(e) => setIsNeededSubTask((e) => !e)}
|
|
value={IsNeededSubTask}
|
|
id="defaultCheck1"
|
|
/>
|
|
<label className="form-check-label" htmlFor="username">
|
|
Create Subtask
|
|
</label>
|
|
</div>
|
|
<span>
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm btn-label-secondary mt-5"
|
|
onClick={closeModal}
|
|
data-bs-dismiss="modal"
|
|
disabled={isPending}
|
|
>
|
|
Close
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="btn btn-sm btn-primary ms-2 mt-5"
|
|
disabled={isPending}
|
|
>
|
|
{isPending
|
|
? actionAllow
|
|
? "Please Wait..."
|
|
: "Send..."
|
|
: actionAllow
|
|
? "Submit"
|
|
: "Comment"}
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
|
|
<ul
|
|
className="list-group px-0 mx-0 overflow-auto border-0"
|
|
ref={containerRef}
|
|
>
|
|
{comments &&
|
|
comments
|
|
?.slice()
|
|
.reverse()
|
|
.map((data, idx) => {
|
|
const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
|
|
return (
|
|
<li
|
|
className={`list-group-item list-group-item-action border-none my-1 p-1`}
|
|
key={idx}
|
|
>
|
|
<div
|
|
className={`li-wrapper d-flex justify-content-start align-items-center my-0`}
|
|
>
|
|
<div className="avatar avatar-xs me-1">
|
|
<span
|
|
className={`avatar-initial rounded-circle bg-label-primary`}
|
|
>
|
|
{`${data?.employee?.firstName?.slice(
|
|
0,
|
|
1
|
|
)} ${data?.employee?.lastName?.slice(0, 1)}`}
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
className={`d-flex align-items-center justify-content-start`}
|
|
>
|
|
<p className={`mb-0 fw-semibold me-2`}>{fullName}</p>
|
|
<p
|
|
className={`text-secondary m-0`}
|
|
style={{ fontSize: "10px" }}
|
|
>
|
|
{moment.utc(data?.commentDate).local().fromNow()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p className={`ms-7 text-start mb-0 text-body`}>
|
|
{data?.comment}
|
|
</p>
|
|
{data?.preSignedUrls?.length > 0 && (
|
|
<div className="ps-7 text-start ">
|
|
<small className="">Attachment</small>
|
|
<ImagePreview
|
|
images={data?.preSignedUrls}
|
|
IsReported={true}
|
|
/>
|
|
</div>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ReportTaskComments;
|