Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into Issues_Jun_3W
This commit is contained in:
Pramod Mahajan
commit
22c6072c32
@ -76,20 +76,12 @@ useEffect(() => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-dialog modal-md modal-simple report-task-modal"
|
||||
role="document"
|
||||
>
|
||||
<div className="modal-content">
|
||||
<div className="modal-body px-1">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={handleClose}
|
||||
aria-label="Close"
|
||||
></button>
|
||||
|
||||
<div className="container m-0">
|
||||
|
||||
<div className="container m-0">
|
||||
<div className="text-center">
|
||||
<p className="fs-6 fw-semibold">Report Task</p>
|
||||
</div>
|
||||
<div className="mb-1 row text-start">
|
||||
<label
|
||||
htmlFor="html5-text-input"
|
||||
@ -231,8 +223,6 @@ useEffect(() => {
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
@ -9,35 +9,60 @@ import Avatar from "../common/Avatar";
|
||||
import { getBgClassFromHash } from "../../utils/projectStatus";
|
||||
import { cacheData, getCachedData } from "../../slices/apiDataManager";
|
||||
import ImagePreview from "../common/ImagePreview";
|
||||
import { useAuditStatus } from "../../hooks/useTasks";
|
||||
|
||||
const schema = z.object({
|
||||
comment: z.string().min(1, "Comment cannot be empty"),
|
||||
});
|
||||
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"),
|
||||
});
|
||||
|
||||
/**
|
||||
* ReportTaskComments component for displaying and adding comments to a task.
|
||||
* It also shows a summary of the activity and task details.
|
||||
*
|
||||
* @param {object} props - The component props.
|
||||
* @param {object} props.commentsData - Data related to the task and its comments, including the description.
|
||||
* @param {function} props.closeModal - Callback function to close the modal.
|
||||
*/
|
||||
|
||||
const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
const [loading, setloading] = useState(false);
|
||||
const [comments, setComment] = useState([]);
|
||||
const { status, loading: auditStatusLoading } = useAuditStatus();
|
||||
const [IsNeededSubTask, setIsNeededSubTask] = useState(false);
|
||||
|
||||
const {
|
||||
watch,
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
reset, // Destructure reset from useForm
|
||||
reset,
|
||||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
});
|
||||
|
||||
const containerRef = useRef(null);
|
||||
const firstRender = useRef(true);
|
||||
|
||||
useEffect(() => {
|
||||
const taskList = getCachedData("taskList");
|
||||
if (taskList && taskList.data && commentsData?.id) {
|
||||
@ -64,42 +89,53 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
}, [comments]);
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
let sendComment = {
|
||||
let payload = {
|
||||
...data,
|
||||
taskAllocationId: commentsData?.id,
|
||||
commentDate: new Date().toISOString(),
|
||||
[actionAllow ? "id" : "taskAllocationId"]: commentsData?.id,
|
||||
...(actionAllow ? {} : { commentDate: new Date().toISOString() }),
|
||||
};
|
||||
|
||||
try {
|
||||
setloading(true);
|
||||
const resp = await TasksRepository.taskComments(sendComment);
|
||||
const resp = actionAllow
|
||||
? await TasksRepository.auditTask(payload)
|
||||
: await TasksRepository.taskComments(payload);
|
||||
|
||||
setComment((prevItems) => [...prevItems, resp.data]);
|
||||
|
||||
const taskList = getCachedData("taskList");
|
||||
|
||||
if (taskList && taskList.data) {
|
||||
const updatedTaskList = taskList.data.map((task) => {
|
||||
if (task.id === resp.data.taskAllocationId) {
|
||||
const existingComments = Array.isArray(task.comments)
|
||||
? task.comments
|
||||
: [];
|
||||
return {
|
||||
...task,
|
||||
comments: [...existingComments, resp.data],
|
||||
};
|
||||
}
|
||||
return task;
|
||||
});
|
||||
if (actionAllow) {
|
||||
handleCloseAction(IsNeededSubTask);
|
||||
showToast(
|
||||
"Review submitted successfully. Record has been updated.",
|
||||
"success"
|
||||
);
|
||||
} else {
|
||||
if (taskList && taskList.data) {
|
||||
const updatedTaskList = taskList.data.map((task) => {
|
||||
if (task.id === resp.data.taskAllocationId) {
|
||||
const existingComments = Array.isArray(task.comments)
|
||||
? task.comments
|
||||
: [];
|
||||
return {
|
||||
...task,
|
||||
comments: [...existingComments, resp.data],
|
||||
};
|
||||
}
|
||||
return task;
|
||||
});
|
||||
|
||||
cacheData("taskList", {
|
||||
data: updatedTaskList,
|
||||
projectId: taskList.projectId,
|
||||
});
|
||||
cacheData("taskList", {
|
||||
data: updatedTaskList,
|
||||
projectId: taskList.projectId,
|
||||
});
|
||||
}
|
||||
showToast("Successfully Sent", "success");
|
||||
}
|
||||
|
||||
reset();
|
||||
setloading(false);
|
||||
showToast("Successfully Sent", "success");
|
||||
} catch (error) {
|
||||
setloading(false);
|
||||
showToast(
|
||||
@ -108,60 +144,101 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const selectedAuditStatus = watch("workStatus");
|
||||
|
||||
useEffect(() => {
|
||||
reset({
|
||||
approvedTask: defaultCompletedTask || 0,
|
||||
});
|
||||
}, [ defaultCompletedTask ] );
|
||||
return (
|
||||
<div className="p-1">
|
||||
<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>
|
||||
|
||||
<p className="fw-bold my-2 text-start">
|
||||
Location :
|
||||
<span className="fw-normal ms-2 text-start">
|
||||
<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}`}
|
||||
</span>
|
||||
</p>
|
||||
{`${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>
|
||||
|
||||
<p className="fw-bold my-2 text-start">
|
||||
Assigned By :
|
||||
<span className=" ms-2">
|
||||
{commentsData?.assignedBy?.firstName +
|
||||
" " +
|
||||
commentsData?.assignedBy?.lastName}
|
||||
</span>{" "}
|
||||
</p>
|
||||
<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>
|
||||
|
||||
<p className="fw-bold my-2 text-start">
|
||||
Reported By :
|
||||
<span className=" ms-2">
|
||||
{" "}
|
||||
-
|
||||
{/* {commentsData?.assignedBy?.firstName +
|
||||
" " +
|
||||
commentsData?.assignedBy?.lastName} */}
|
||||
</span>{" "}
|
||||
</p>
|
||||
<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>
|
||||
|
||||
|
||||
<p className="fw-bold my-2 text-start">
|
||||
Planned Work: {commentsData?.plannedTask}{" "}
|
||||
{commentsData?.workItem?.activityMaster?.unitOfMeasurement}
|
||||
</p>
|
||||
{commentsData?.reportedDate != null && (
|
||||
<p className="fw-bold my-2 text-start">
|
||||
{" "}
|
||||
Completed Work : {commentsData?.completedTask}{" "}
|
||||
{commentsData?.workItem?.activityMaster?.unitOfMeasurement}
|
||||
</p>
|
||||
)}
|
||||
{!commentsData?.reportedDate && (
|
||||
<p className="fw-bold my-2 text-start"> Completed Work : -</p>
|
||||
)}
|
||||
<div className="d-flex align-items-center flex-wrap">
|
||||
<p className="fw-bold text-start m-0 me-1">Team :</p>
|
||||
<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">
|
||||
@ -175,50 +252,174 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="fw-bold my-2 text-start d-flex">
|
||||
<span>Note:</span>
|
||||
<div
|
||||
className="fw-normal ms-2"
|
||||
dangerouslySetInnerHTML={{ __html: commentsData?.description }}
|
||||
/>
|
||||
<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?.reportedPreSignedUrls?.length > 0 && (
|
||||
<div className=" text-start">
|
||||
<p className="fw-bold m-0">Attachment</p>
|
||||
<ImagePreview
|
||||
IsReported={true}
|
||||
images={commentsData?.reportedPreSignedUrls}
|
||||
/>
|
||||
|
||||
{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-center align-items-end m-0">
|
||||
<label htmlFor="workStatus" className="form-label">
|
||||
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="Enter comment"
|
||||
placeholder="Leave comment"
|
||||
/>
|
||||
{errors.comment && (
|
||||
<div className="danger-text">{errors.comment.message}</div>
|
||||
)}
|
||||
<div className="text-end my-1">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-secondary"
|
||||
onClick={closeModal}
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary ms-2"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Sending..." : "Comment"}
|
||||
</button>
|
||||
<div
|
||||
className={` ${
|
||||
(actionAllow && !commentsData.approvedBy)? " d-flex justify-content-between" : "text-end"
|
||||
} mt-2`}
|
||||
>
|
||||
<div className={`form-check ${!(actionAllow && !commentsData.approvedBy) && "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-secondary"
|
||||
onClick={closeModal}
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary ms-2"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading
|
||||
? actionAllow
|
||||
? "Please Wait..."
|
||||
: "Send..."
|
||||
: actionAllow
|
||||
? "Submit"
|
||||
: "Comment"}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -254,7 +455,7 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
<div
|
||||
className={`d-flex align-items-center justify-content-start`}
|
||||
>
|
||||
<p className={`mb-0 text-muted me-2`}>{fullName}</p>
|
||||
<p className={`mb-0 fw-semibold me-2`}>{fullName}</p>
|
||||
<p
|
||||
className={`text-secondary m-0`}
|
||||
style={{ fontSize: "10px" }}
|
||||
@ -263,11 +464,11 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className={`ms-6 text-start mb-0 text-body`}>
|
||||
<p className={`ms-7 text-start mb-0 text-body`}>
|
||||
{data?.comment}
|
||||
</p>
|
||||
{data?.preSignedUrls?.length > 0 && (
|
||||
<div className="ps-6 text-start">
|
||||
<div className="ps-7 text-start ">
|
||||
<small className="">Attachment</small>
|
||||
<ImagePreview
|
||||
images={data?.preSignedUrls}
|
||||
|
||||
242
src/components/Activities/SubTask.jsx
Normal file
242
src/components/Activities/SubTask.jsx
Normal file
@ -0,0 +1,242 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { string, z } from "zod";
|
||||
import {
|
||||
useActivitiesMaster,
|
||||
useWorkCategoriesMaster,
|
||||
} from "../../hooks/masterHook/useMaster";
|
||||
import showToast from "../../services/toastService";
|
||||
import ProjectRepository from "../../repositories/ProjectRepository";
|
||||
import { useTaskById } from "../../hooks/useTasks";
|
||||
|
||||
const subTaskSchema = z.object({
|
||||
activityId: z.string().min(1, "Activity is required"),
|
||||
workCategoryId: z.string().min(1, "Category is required"),
|
||||
plannedWork: z.number().min(1, "Planned work is required"),
|
||||
completedWork: z.number().min(0, "Completed work cannot be negative"),
|
||||
comment: z.string().min(1, "Comment is required"),
|
||||
});
|
||||
|
||||
const SubTask = ({ activity, onClose }) => {
|
||||
const [selectedCategory, setSelectedCategory] = useState(null);
|
||||
const [categoryData, setCategoryData] = useState([]);
|
||||
const { activities, loading } = useActivitiesMaster();
|
||||
const { categories, categoryLoading } = useWorkCategoriesMaster();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const { Task, loading: TaskLoading } = useTaskById(activity?.id);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
reset,
|
||||
setValue,
|
||||
watch,
|
||||
} = useForm({
|
||||
resolver: zodResolver(subTaskSchema),
|
||||
});
|
||||
const selectedActivityId = watch("activityId");
|
||||
const selectedActivity = activities?.find((a) => a.id === selectedActivityId);
|
||||
|
||||
// Set categories when fetched
|
||||
useEffect(() => {
|
||||
setCategoryData(categories);
|
||||
}, [categories]);
|
||||
|
||||
// Set initial values from activity
|
||||
useEffect(() => {
|
||||
if (!TaskLoading && (Task?.workItem || activity)) {
|
||||
reset({
|
||||
workCategoryId: Task?.workItem?.workCategoryId || "",
|
||||
activityId:
|
||||
Task?.workItem?.activityId || activity?.workItem?.activityId,
|
||||
plannedWork: Number(
|
||||
Task?.notApprovedTask || Task?.workItem?.plannedWork || 0
|
||||
),
|
||||
completedWork: 0,
|
||||
comment: "",
|
||||
});
|
||||
}
|
||||
}, [TaskLoading, Task, activity, reset, loading]);
|
||||
|
||||
const handleCategoryChange = (e) => {
|
||||
const value = e.target.value;
|
||||
const category = categoryData.find((b) => b.id === String(value));
|
||||
setSelectedCategory(category);
|
||||
setValue("workCategoryId", value);
|
||||
};
|
||||
|
||||
const onSubmitForm = async (formData) => {
|
||||
let payload = {
|
||||
workAreaID: Task.workItem.workAreaId,
|
||||
workCategoryId: formData.workCategoryId,
|
||||
activityID: formData.activityId,
|
||||
plannedWork: formData.plannedWork,
|
||||
completedWork: formData.completedWork,
|
||||
parentTaskId: activity?.id,
|
||||
comment: formData.comment,
|
||||
};
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
await ProjectRepository.manageProjectTasks([payload]);
|
||||
showToast("SubTask Created Successfully", "success");
|
||||
setIsSubmitting(false);
|
||||
reset();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
setIsSubmitting(false);
|
||||
const msg =
|
||||
error.response.message ||
|
||||
error.message ||
|
||||
"Error occured during API calling";
|
||||
showToast(msg, "error");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="container-xxl my-1">
|
||||
<p className="fw-semibold">Create Sub Task</p>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<div className="col-6">
|
||||
<label className="form-label">Building</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
value={activity?.workItem?.workArea?.floor?.building?.name || ""}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-6">
|
||||
<label className="form-label">Floor</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
value={activity?.workItem?.workArea?.floor?.floorName || ""}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<label className="form-label">Work Area</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
value={activity?.workItem?.workArea?.areaName || ""}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<label className="form-label">Work Category</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("workCategoryId")}
|
||||
onChange={handleCategoryChange}
|
||||
>
|
||||
<option value="">
|
||||
{categoryLoading ? "Loading..." : "-- Select Category --"}
|
||||
</option>
|
||||
{categoryData.map((category) => (
|
||||
<option key={category.id} value={category.id}>
|
||||
{category.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.workCategoryId && (
|
||||
<div className="danger-text">{errors.workCategoryId.message}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<label className="form-label">Select Activity</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("activityId")}
|
||||
disabled
|
||||
>
|
||||
<option value="">
|
||||
{loading ? "Loading..." : "-- Select Activity --"}
|
||||
</option>
|
||||
|
||||
{!loading &&
|
||||
activities?.map((activity) => (
|
||||
<option key={activity.id} value={activity.id}>
|
||||
{activity.activityName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.activityId && (
|
||||
<div className="danger-text">{errors.activityId.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-4">
|
||||
<label className="form-label">Planned Work</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm"
|
||||
{...register("plannedWork", { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.plannedWork && (
|
||||
<div className="danger-text">{errors.plannedWork.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-4">
|
||||
<label className="form-label">Completed Work</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm"
|
||||
{...register("completedWork")}
|
||||
disabled
|
||||
/>
|
||||
{errors.completedWork && (
|
||||
<div className="danger-text">{errors.completedWork.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-4">
|
||||
<label className="form-label">Unit</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
value={selectedActivity?.unitOfMeasurement || ""}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<label className="form-label">Comment</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
rows="2"
|
||||
{...register("comment")}
|
||||
/>
|
||||
{errors.comment && (
|
||||
<div className="danger-text">{errors.comment.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-center">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary me-2"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Please wait..." : "Submit"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-secondary"
|
||||
onClick={() => onClose()}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubTask;
|
||||
@ -88,7 +88,8 @@ const NotesDirectory = ({
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
setValue("note", "");
|
||||
setValue( "note", "" );
|
||||
|
||||
};
|
||||
const handleSwitch = () => {
|
||||
setIsActive(!IsActive);
|
||||
@ -103,48 +104,45 @@ const NotesDirectory = ({
|
||||
<p className="fw-semibold m-0">Notes :</p>
|
||||
</div>
|
||||
<div className="d-flex align-items-center justify-content-between mb-5">
|
||||
{contactNotes?.length > 0 && (
|
||||
<div className="m-0 d-flex aligin-items-center">
|
||||
<label className="switch switch-primary">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="switch-input"
|
||||
onChange={() => handleSwitch(!IsActive)}
|
||||
value={IsActive}
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on">
|
||||
{/* <i class="icon-base bx bx-check"></i> */}
|
||||
</span>
|
||||
<span className="switch-off">
|
||||
{/* <i class="icon-base bx bx-x"></i> */}
|
||||
</span>
|
||||
</span>
|
||||
<span className="switch-label ">Include Deleted Notes</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!addNote && (
|
||||
<div
|
||||
className={`
|
||||
${
|
||||
contactNotes?.length > 0
|
||||
? "d-flex justify-content-center px-2"
|
||||
: "d-flex justify-content-center px-2w-100"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`btn btn-sm ${
|
||||
addNote ? "btn-danger" : "btn-primary"
|
||||
}`}
|
||||
onClick={() => setAddNote(!addNote)}
|
||||
>
|
||||
{addNote ? "Hide Editor" : "Add a Note"}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="m-0 d-flex align-items-center">
|
||||
{contactNotes?.length > 0 ? (
|
||||
<label className="switch switch-primary">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="switch-input"
|
||||
onChange={() => handleSwitch(!IsActive)}
|
||||
value={IsActive}
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className="switch-label">Include Deleted Notes</span>
|
||||
</label>
|
||||
) : (
|
||||
<div style={{ visibility: "hidden" }}>
|
||||
<label className="switch switch-primary">
|
||||
<input type="checkbox" className="switch-input" />
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className="switch-label">Include Deleted Notes</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-end">
|
||||
<span
|
||||
className={`btn btn-sm ${addNote ? "btn-danger" : "btn-primary"}`}
|
||||
onClick={() => setAddNote(!addNote)}
|
||||
>
|
||||
{addNote ? "Hide Editor" : "Add a Note"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{addNote && (
|
||||
<div className="card m-2 mb-5">
|
||||
|
||||
@ -233,24 +233,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className=" row">
|
||||
<div className="col-xl">
|
||||
<div className="card">
|
||||
<div className="card-header d-flex align-items-center justify-content-between">
|
||||
<h6 className="mb-0">
|
||||
{employee ? "Update Employee" : "Create Employee"}
|
||||
</h6>
|
||||
|
||||
<span className="cursor-pointer fs-6" onClick={() => onClosed()}>
|
||||
<i className="bx bx-x"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
|
||||
{/* <div className="c">
|
||||
{!currentEmployee && empLoading && employeeId && (
|
||||
<p>Loading Employee Data...</p>
|
||||
)}
|
||||
)} */}
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<form onSubmit={handleSubmit( onSubmit )} className="p-sm-0 p-2">
|
||||
<div className="text-center"><p className="fs-6 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p></div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-4">
|
||||
{" "}
|
||||
@ -646,10 +636,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,627 +0,0 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import useMaster from "../../hooks/masterHook/useMaster";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
|
||||
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
||||
import { TasksRepository } from "../../repositories/ProjectRepository";
|
||||
import showToast from "../../services/toastService";
|
||||
import { useProjectDetails } from "../../hooks/useProjects";
|
||||
import eventBus from "../../services/eventBus";
|
||||
|
||||
const AssignRoleModel = ({ assignData, onClose, setAssigned }) => {
|
||||
// Calculate maxPlanned based on assignData
|
||||
const maxPlanned =
|
||||
assignData?.workItem?.workItem?.plannedWork -
|
||||
assignData?.workItem?.workItem?.completedWork;
|
||||
|
||||
// Zod schema for form validation
|
||||
const schema = z.object({
|
||||
selectedEmployees: z
|
||||
.array(z.string())
|
||||
.min(1, { message: "At least one employee must be selected" }), // Added custom message here for consistency
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
plannedTask: z.preprocess(
|
||||
(val) => parseInt(val, 10), // Preprocess value to integer
|
||||
z
|
||||
.number({
|
||||
required_error: "Planned task is required",
|
||||
invalid_type_error: "Target for Today must be a number",
|
||||
})
|
||||
.int() // Ensure it's an integer
|
||||
.positive({ message: "Planned task must be a positive number" }) // Must be positive
|
||||
.max(maxPlanned, {
|
||||
// Max value validation
|
||||
message: `Planned task cannot exceed ${maxPlanned}`,
|
||||
})
|
||||
),
|
||||
});
|
||||
|
||||
// State for help popovers (though not fully implemented in provided snippets)
|
||||
const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
|
||||
const helpPopupRefTarget = useRef(null);
|
||||
const [isHelpVisible, setIsHelpVisible] = useState(false);
|
||||
|
||||
// Refs for Bootstrap Popovers
|
||||
const infoRef = useRef(null);
|
||||
const infoRef1 = useRef(null);
|
||||
|
||||
// Initialize Bootstrap Popovers on component mount
|
||||
useEffect(() => {
|
||||
// Check if Bootstrap is available globally
|
||||
if (typeof bootstrap !== "undefined") {
|
||||
if (infoRef.current) {
|
||||
new bootstrap.Popover(infoRef.current, {
|
||||
trigger: "focus",
|
||||
placement: "right",
|
||||
html: true,
|
||||
content: `<div>Total Pending tasks of the Activity</div>`,
|
||||
});
|
||||
}
|
||||
|
||||
if (infoRef1.current) {
|
||||
new bootstrap.Popover(infoRef1.current, {
|
||||
trigger: "focus",
|
||||
placement: "right",
|
||||
html: true,
|
||||
content: `<div>Target task for today</div>`,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.warn("Bootstrap is not available. Popovers might not function.");
|
||||
}
|
||||
}, []); // Empty dependency array ensures this runs once on mount
|
||||
// Redux state and hooks
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const {
|
||||
employees,
|
||||
loading: employeeLoading,
|
||||
recallEmployeeData,
|
||||
} = useEmployeesAllOrByProjectId(selectedProject, false);
|
||||
const dispatch = useDispatch();
|
||||
const { loading } = useMaster(); // Assuming this is for jobRoleData loading
|
||||
const jobRoleData = getCachedData("Job Role");
|
||||
|
||||
// Local component states
|
||||
const [selectedRole, setSelectedRole] = useState("all");
|
||||
const [displayedSelection, setDisplayedSelection] = useState(""); // This state is not updated in the provided code, consider if it's still needed or how it should be updated
|
||||
|
||||
// React Hook Form setup
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
trigger, // <--- IMPORTANT: Destructure 'trigger' here
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
selectedEmployees: [],
|
||||
description: "",
|
||||
plannedTask: "",
|
||||
},
|
||||
resolver: zodResolver(schema), // Integrate Zod schema with react-hook-form
|
||||
});
|
||||
|
||||
// Handler for employee checkbox changes
|
||||
const handleCheckboxChange = (event, user) => {
|
||||
const isChecked = event.target.checked;
|
||||
let updatedSelectedEmployees = watch("selectedEmployees") || []; // Get current selected employees from form state
|
||||
|
||||
if (isChecked) {
|
||||
// Add employee if checked and not already in the list
|
||||
if (!updatedSelectedEmployees.includes(user.id)) {
|
||||
updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
|
||||
}
|
||||
} else {
|
||||
// Remove employee if unchecked
|
||||
updatedSelectedEmployees = updatedSelectedEmployees.filter(
|
||||
(id) => id !== user.id
|
||||
);
|
||||
}
|
||||
// Update the form state with the new list of selected employees
|
||||
setValue("selectedEmployees", updatedSelectedEmployees);
|
||||
trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation here
|
||||
};
|
||||
|
||||
// Effect to dispatch action for Job Role master data
|
||||
useEffect(() => {
|
||||
dispatch(changeMaster("Job Role"));
|
||||
// Cleanup function to reset selected role when component unmounts or dispatch changes
|
||||
return () => setSelectedRole("all");
|
||||
}, [dispatch]);
|
||||
|
||||
// Handler for role filter change
|
||||
const handleRoleChange = (event) => {
|
||||
setSelectedRole(event.target.value);
|
||||
};
|
||||
|
||||
// Filter employees based on selected role
|
||||
const filteredEmployees =
|
||||
selectedRole === "all"
|
||||
? employees
|
||||
: employees?.filter(
|
||||
(emp) => String(emp.jobRoleId || "") === selectedRole
|
||||
);
|
||||
|
||||
// Form submission handler
|
||||
const onSubmit = async (data) => {
|
||||
const selectedEmployeeIds = data.selectedEmployees;
|
||||
|
||||
// Prepare taskTeam data (only IDs are needed for the backend based on previous context)
|
||||
const taskTeamWithDetails = selectedEmployeeIds
|
||||
.map((empId) => {
|
||||
return empId; // Return just the ID as per previous discussions
|
||||
})
|
||||
.filter(Boolean); // Ensure no nulls if employee not found (though unlikely with current logic)
|
||||
|
||||
// Format data for API call
|
||||
const formattedData = {
|
||||
taskTeam: taskTeamWithDetails,
|
||||
plannedTask: data.plannedTask,
|
||||
description: data.description,
|
||||
assignmentDate: new Date().toISOString(), // Current date/time
|
||||
workItemId: assignData?.workItem?.workItem.id,
|
||||
};
|
||||
|
||||
try {
|
||||
// Call API to assign task
|
||||
await TasksRepository.assignTask(formattedData);
|
||||
showToast("Task Successfully Assigned", "success"); // Show success toast
|
||||
reset(); // Reset form fields
|
||||
clearCacheKey("projectInfo");
|
||||
setAssigned(formattedData.plannedTask);
|
||||
onClose(); // Close the modal
|
||||
} catch (error) {
|
||||
console.error("Error assigning task:", error); // Log the full error for debugging
|
||||
showToast("Something went wrong. Please try again.", "error"); // Show generic error toast
|
||||
}
|
||||
};
|
||||
|
||||
// Handler to close the modal and reset form
|
||||
const closedModel = () => {
|
||||
reset();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
if (employees.some((item) => item.id == msg.employeeId)) {
|
||||
recallEmployeeData(false);
|
||||
}
|
||||
},
|
||||
[employees]
|
||||
);
|
||||
|
||||
const assignHandler = useCallback(
|
||||
(msg) => {
|
||||
if (msg.projectIds.some((item) => item == selectedProject)) {
|
||||
clearCacheKey("employeeListByProject")
|
||||
recallEmployeeData(false);
|
||||
}
|
||||
},
|
||||
[selectedProject]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", handler);
|
||||
return () => eventBus.off("employee", handler);
|
||||
}, [handler]);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("assign_project_all", assignHandler);
|
||||
return () => eventBus.off("assign_project_all", assignHandler);
|
||||
}, [assignHandler]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
|
||||
role="document"
|
||||
>
|
||||
<div className="modal-content">
|
||||
<div className="modal-body p-sm-4 p-0">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
></button>
|
||||
<div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
|
||||
<p className="align-items-center flex-wrap m-0 ">Assign Task</p>
|
||||
<div className="container my-3">
|
||||
<div className="mb-1">
|
||||
<p className="mb-0">
|
||||
<span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
|
||||
<span className="me-2 m-0 font-bold">Work Location :</span>
|
||||
{[
|
||||
assignData?.building?.name,
|
||||
assignData?.floor?.floorName,
|
||||
assignData?.workArea?.areaName,
|
||||
assignData?.workItem?.workItem?.activityMaster
|
||||
?.activityName,
|
||||
]
|
||||
.filter(Boolean) // Filter out any undefined/null values
|
||||
.map((item, index, array) => (
|
||||
<span key={index} className="d-flex align-items-center">
|
||||
{item}
|
||||
{index < array.length - 1 && (
|
||||
<i className="bx bx-chevron-right mx-2"></i>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="form-label text-start">
|
||||
<div className="row mb-1">
|
||||
<div className="col-12">
|
||||
<div className="form-text text-start">
|
||||
<div className="d-flex align-items-center form-text fs-7">
|
||||
<span className="text-dark">Select Team</span>
|
||||
<div className="me-2">{displayedSelection}</div>
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-filter bx-lg text-primary"></i>
|
||||
</a>
|
||||
|
||||
<ul className="dropdown-menu p-2 text-capitalize">
|
||||
<li key="all">
|
||||
<button
|
||||
type="button"
|
||||
className="dropdown-item py-1"
|
||||
onClick={() =>
|
||||
handleRoleChange({
|
||||
target: { value: "all" },
|
||||
})
|
||||
}
|
||||
>
|
||||
All Roles
|
||||
</button>
|
||||
</li>
|
||||
{jobRoleData?.map((user) => (
|
||||
<li key={user.id}>
|
||||
<button
|
||||
type="button"
|
||||
className="dropdown-item py-1"
|
||||
value={user.id}
|
||||
onClick={handleRoleChange}
|
||||
>
|
||||
{user.name}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12 h-sm-25 overflow-auto mt-2">
|
||||
{selectedRole !== "" && (
|
||||
<div className="row">
|
||||
{loading ? ( // Assuming 'loading' here refers to master data loading
|
||||
<div className="col-12">
|
||||
<p className="text-center">Loading roles...</p>
|
||||
</div>
|
||||
) : filteredEmployees?.length > 0 ? (
|
||||
filteredEmployees?.map((emp) => {
|
||||
const jobRole = jobRoleData?.find(
|
||||
(role) => role?.id === emp?.jobRoleId
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={emp.id}
|
||||
className="col-6 col-md-4 col-lg-3 mb-3"
|
||||
>
|
||||
<div className="form-check d-flex align-items-start">
|
||||
<Controller
|
||||
name="selectedEmployees"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<input
|
||||
{...field}
|
||||
className="form-check-input me-1 mt-1"
|
||||
type="checkbox"
|
||||
id={`employee-${emp?.id}`}
|
||||
value={emp.id}
|
||||
checked={field.value?.includes(
|
||||
emp.id
|
||||
)}
|
||||
onChange={(e) => {
|
||||
handleCheckboxChange(e, emp);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="flex-grow-1">
|
||||
<p
|
||||
className="mb-0"
|
||||
style={{ fontSize: "13px" }}
|
||||
>
|
||||
{emp.firstName} {emp.lastName}
|
||||
</p>
|
||||
<small
|
||||
className="text-muted"
|
||||
style={{ fontSize: "11px" }}
|
||||
>
|
||||
{loading ? (
|
||||
<span className="placeholder-glow">
|
||||
<span className="placeholder col-6"></span>
|
||||
</span>
|
||||
) : (
|
||||
jobRole?.name || "Unknown Role"
|
||||
)}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="col-12">
|
||||
<p className="text-center">
|
||||
No employees found for the selected role.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="col-12 h-25 overflow-auto"
|
||||
style={{ maxHeight: "200px" }}
|
||||
>
|
||||
{watch("selectedEmployees")?.length > 0 && (
|
||||
<div className="mt-1">
|
||||
<div className="text-start px-2">
|
||||
{watch("selectedEmployees")?.map((empId) => {
|
||||
const emp = employees.find(
|
||||
(emp) => emp.id === empId
|
||||
);
|
||||
return (
|
||||
emp && (
|
||||
<span
|
||||
key={empId}
|
||||
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
|
||||
>
|
||||
{emp.firstName} {emp.lastName}
|
||||
<p
|
||||
type="button"
|
||||
className=" btn-close-white p-0 m-0"
|
||||
aria-label="Close"
|
||||
onClick={() => {
|
||||
const updatedSelected = watch(
|
||||
"selectedEmployees"
|
||||
).filter((id) => id !== empId);
|
||||
setValue(
|
||||
"selectedEmployees",
|
||||
updatedSelected
|
||||
);
|
||||
trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation on removing badge
|
||||
}}
|
||||
>
|
||||
<i className="icon-base bx bx-x icon-md "></i>
|
||||
</p>
|
||||
</span>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!loading && errors.selectedEmployees && (
|
||||
<div className="danger-text mt-1">
|
||||
<p>{errors.selectedEmployees.message}</p>{" "}
|
||||
{/* Use message from Zod schema */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pending Task of Activity section */}
|
||||
<div className="col-md text-start mx-0 px-0">
|
||||
<div className="form-check form-check-inline mt-3 px-1">
|
||||
<label
|
||||
className="form-text text-dark align-items-center d-flex"
|
||||
htmlFor="inlineCheckbox1"
|
||||
>
|
||||
Pending Task of Activity :
|
||||
<label
|
||||
className="form-check-label fs-7 ms-4"
|
||||
htmlFor="inlineCheckbox1"
|
||||
>
|
||||
<strong>
|
||||
{assignData?.workItem?.workItem?.plannedWork -
|
||||
assignData?.workItem?.workItem?.completedWork}
|
||||
</strong>{" "}
|
||||
<u>
|
||||
{
|
||||
assignData?.workItem?.workItem?.activityMaster
|
||||
?.unitOfMeasurement
|
||||
}
|
||||
</u>
|
||||
</label>
|
||||
<div
|
||||
style={{ display: "flex", alignItems: "center" }}
|
||||
>
|
||||
<div
|
||||
ref={infoRef}
|
||||
tabIndex="0"
|
||||
className="d-flex align-items-center avatar-group justify-content-center ms-2"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-trigger="focus"
|
||||
data-bs-placement="right"
|
||||
data-bs-html="true"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13"
|
||||
height="13"
|
||||
fill="currentColor"
|
||||
className="bi bi-info-circle"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
||||
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Target for Today input and validation */}
|
||||
<div className="col-md text-start mx-0 px-0">
|
||||
<div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
|
||||
<label
|
||||
className="text-dark text-start d-flex align-items-center flex-wrap form-text"
|
||||
htmlFor="inlineCheckbox1"
|
||||
>
|
||||
<span>Target for Today</span>
|
||||
<span style={{ marginLeft: "46px" }}>:</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className="form-check form-check-inline col-sm-3 mt-2"
|
||||
style={{ marginLeft: "-28px" }}
|
||||
>
|
||||
<Controller
|
||||
name="plannedTask"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<div className="d-flex align-items-center gap-1 ">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...field}
|
||||
id="defaultFormControlInput"
|
||||
aria-describedby="defaultFormControlHelp"
|
||||
/>
|
||||
<span style={{ paddingLeft: "6px" }}>
|
||||
{
|
||||
assignData?.workItem?.workItem?.activityMaster
|
||||
?.unitOfMeasurement
|
||||
}
|
||||
</span>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={infoRef1}
|
||||
tabIndex="0"
|
||||
className="d-flex align-items-center avatar-group justify-content-center ms-2"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-trigger="focus"
|
||||
data-bs-placement="right"
|
||||
data-bs-html="true"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13"
|
||||
height="13"
|
||||
fill="currentColor"
|
||||
className="bi bi-info-circle"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
||||
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errors.plannedTask && (
|
||||
<div className="danger-text mt-1">
|
||||
{errors.plannedTask.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isHelpVisible && (
|
||||
<div
|
||||
className="position-absolute bg-white border p-2 rounded shadow"
|
||||
style={{ zIndex: 10, marginLeft: "10px" }}
|
||||
>
|
||||
{/* Add your help content here */}
|
||||
<p className="mb-0">
|
||||
Enter the target value for today's task.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description field */}
|
||||
<label
|
||||
className="form-text fs-7 m-1 text-lg text-dark"
|
||||
htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
|
||||
>
|
||||
Description
|
||||
</label>
|
||||
<Controller
|
||||
name="description"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<textarea
|
||||
{...field}
|
||||
className="form-control"
|
||||
id="descriptionTextarea" // Changed id for better accessibility
|
||||
rows="2"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.description && (
|
||||
<div className="danger-text">
|
||||
{errors.description.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Submit and Cancel buttons */}
|
||||
<div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
|
||||
<button type="submit" className="btn btn-sm btn-primary ">
|
||||
Submit
|
||||
</button>
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
onClick={closedModel}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssignRoleModel;
|
||||
572
src/components/Project/AssignTask.jsx
Normal file
572
src/components/Project/AssignTask.jsx
Normal file
@ -0,0 +1,572 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import useMaster from "../../hooks/masterHook/useMaster";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
|
||||
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
||||
import { TasksRepository } from "../../repositories/ProjectRepository";
|
||||
import showToast from "../../services/toastService";
|
||||
import { useProjectDetails } from "../../hooks/useProjects";
|
||||
import eventBus from "../../services/eventBus";
|
||||
|
||||
const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
const maxPlanned =
|
||||
assignData?.workItem?.workItem?.plannedWork -
|
||||
assignData?.workItem?.workItem?.completedWork;
|
||||
|
||||
// Zod schema for form validation
|
||||
const schema = z.object({
|
||||
selectedEmployees: z
|
||||
.array(z.string())
|
||||
.min(1, { message: "At least one employee must be selected" }),
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
plannedTask: z.preprocess(
|
||||
(val) => parseInt(val, 10),
|
||||
z
|
||||
.number({
|
||||
required_error: "Planned task is required",
|
||||
invalid_type_error: "Target for Today must be a number",
|
||||
})
|
||||
.int()
|
||||
.positive({ message: "Planned task must be a positive number" })
|
||||
.max(maxPlanned, {
|
||||
message: `Planned task cannot exceed ${maxPlanned}`,
|
||||
})
|
||||
),
|
||||
});
|
||||
|
||||
const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
|
||||
const helpPopupRefTarget = useRef(null);
|
||||
const [isHelpVisible, setIsHelpVisible] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Refs for Bootstrap Popovers
|
||||
const infoRef = useRef(null);
|
||||
const infoRef1 = useRef(null);
|
||||
|
||||
// Initialize Bootstrap Popovers on component mount
|
||||
useEffect(() => {
|
||||
// Check if Bootstrap is available globally
|
||||
if (typeof bootstrap !== "undefined") {
|
||||
if (infoRef.current) {
|
||||
new bootstrap.Popover(infoRef.current, {
|
||||
trigger: "focus",
|
||||
placement: "right",
|
||||
html: true,
|
||||
content: `<div>Total Pending tasks of the Activity</div>`,
|
||||
});
|
||||
}
|
||||
|
||||
if (infoRef1.current) {
|
||||
new bootstrap.Popover(infoRef1.current, {
|
||||
trigger: "focus",
|
||||
placement: "right",
|
||||
html: true,
|
||||
content: `<div>Target task for today</div>`,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.warn("Bootstrap is not available. Popovers might not function.");
|
||||
}
|
||||
}, []); // Empty dependency array ensures this runs once on mount
|
||||
// Redux state and hooks
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const {
|
||||
employees,
|
||||
loading: employeeLoading,
|
||||
recallEmployeeData,
|
||||
} = useEmployeesAllOrByProjectId(selectedProject, false);
|
||||
const dispatch = useDispatch();
|
||||
const { loading } = useMaster(); // Assuming this is for jobRoleData loading
|
||||
const jobRoleData = getCachedData("Job Role");
|
||||
|
||||
// Local component states
|
||||
const [selectedRole, setSelectedRole] = useState("all");
|
||||
const [displayedSelection, setDisplayedSelection] = useState(""); // This state is not updated in the provided code, consider if it's still needed or how it should be updated
|
||||
|
||||
// React Hook Form setup
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
trigger, // <--- IMPORTANT: Destructure 'trigger' here
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
selectedEmployees: [],
|
||||
description: "",
|
||||
plannedTask: "",
|
||||
},
|
||||
resolver: zodResolver(schema), // Integrate Zod schema with react-hook-form
|
||||
});
|
||||
|
||||
// Handler for employee checkbox changes
|
||||
const handleCheckboxChange = (event, user) => {
|
||||
const isChecked = event.target.checked;
|
||||
let updatedSelectedEmployees = watch("selectedEmployees") || []; // Get current selected employees from form state
|
||||
|
||||
if (isChecked) {
|
||||
// Add employee if checked and not already in the list
|
||||
if (!updatedSelectedEmployees.includes(user.id)) {
|
||||
updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
|
||||
}
|
||||
} else {
|
||||
// Remove employee if unchecked
|
||||
updatedSelectedEmployees = updatedSelectedEmployees.filter(
|
||||
(id) => id !== user.id
|
||||
);
|
||||
}
|
||||
// Update the form state with the new list of selected employees
|
||||
setValue("selectedEmployees", updatedSelectedEmployees);
|
||||
trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation here
|
||||
};
|
||||
|
||||
// Effect to dispatch action for Job Role master data
|
||||
useEffect(() => {
|
||||
dispatch(changeMaster("Job Role"));
|
||||
// Cleanup function to reset selected role when component unmounts or dispatch changes
|
||||
return () => setSelectedRole("all");
|
||||
}, [dispatch]);
|
||||
|
||||
// Handler for role filter change
|
||||
const handleRoleChange = (event) => {
|
||||
setSelectedRole(event.target.value);
|
||||
};
|
||||
|
||||
// Filter employees based on selected role
|
||||
const filteredEmployees =
|
||||
selectedRole === "all"
|
||||
? employees
|
||||
: employees?.filter(
|
||||
(emp) => String(emp.jobRoleId || "") === selectedRole
|
||||
);
|
||||
|
||||
// Form submission handler
|
||||
const onSubmit = async (data) => {
|
||||
const selectedEmployeeIds = data.selectedEmployees;
|
||||
setIsSubmitting(true);
|
||||
// Prepare taskTeam data (only IDs are needed for the backend based on previous context)
|
||||
const taskTeamWithDetails = selectedEmployeeIds
|
||||
.map((empId) => {
|
||||
return empId; // Return just the ID as per previous discussions
|
||||
})
|
||||
.filter(Boolean); // Ensure no nulls if employee not found (though unlikely with current logic)
|
||||
|
||||
// Format data for API call
|
||||
const formattedData = {
|
||||
taskTeam: taskTeamWithDetails,
|
||||
plannedTask: data.plannedTask,
|
||||
description: data.description,
|
||||
assignmentDate: new Date().toISOString(), // Current date/time
|
||||
workItemId: assignData?.workItem?.workItem.id,
|
||||
};
|
||||
|
||||
try {
|
||||
await TasksRepository.assignTask(formattedData);
|
||||
setIsSubmitting( false );
|
||||
showToast("Task Assined Successfully.", "success");
|
||||
closedModel();
|
||||
} catch (error) {
|
||||
setIsSubmitting(false);
|
||||
showToast("Something went wrong. Please try again.", "error");
|
||||
}
|
||||
};
|
||||
|
||||
// Handler to close the modal and reset form
|
||||
const closedModel = () => {
|
||||
reset();
|
||||
onClose();
|
||||
};
|
||||
return (
|
||||
<div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
|
||||
<p className="align-items-center flex-wrap m-0 ">Assign Task</p>
|
||||
<div className="container my-3">
|
||||
<div className="mb-1">
|
||||
<p className="mb-0">
|
||||
<span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
|
||||
<span className="me-2 m-0 font-bold">Work Location :</span>
|
||||
{[
|
||||
assignData?.building?.name,
|
||||
assignData?.floor?.floorName,
|
||||
assignData?.workArea?.areaName,
|
||||
assignData?.workItem?.workItem?.activityMaster?.activityName,
|
||||
]
|
||||
.filter(Boolean) // Filter out any undefined/null values
|
||||
.map((item, index, array) => (
|
||||
<span key={index} className="d-flex align-items-center">
|
||||
{item}
|
||||
{index < array.length - 1 && (
|
||||
<i className="bx bx-chevron-right mx-2"></i>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="form-label text-start">
|
||||
<div className="row mb-1">
|
||||
<div className="col-12">
|
||||
<div className="form-text text-start">
|
||||
<div className="d-flex align-items-center form-text fs-7">
|
||||
<span className="text-dark">Select Team</span>
|
||||
<div className="me-2">{displayedSelection}</div>
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-filter bx-lg text-primary"></i>
|
||||
</a>
|
||||
|
||||
<ul className="dropdown-menu p-2 text-capitalize">
|
||||
<li key="all">
|
||||
<button
|
||||
type="button"
|
||||
className="dropdown-item py-1"
|
||||
onClick={() =>
|
||||
handleRoleChange({
|
||||
target: { value: "all" },
|
||||
})
|
||||
}
|
||||
>
|
||||
All Roles
|
||||
</button>
|
||||
</li>
|
||||
{jobRoleData?.map((user) => (
|
||||
<li key={user.id}>
|
||||
<button
|
||||
type="button"
|
||||
className="dropdown-item py-1"
|
||||
value={user.id}
|
||||
onClick={handleRoleChange}
|
||||
>
|
||||
{user.name}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12 h-sm-25 overflow-auto mt-2">
|
||||
{selectedRole !== "" && (
|
||||
<div className="row">
|
||||
{loading ? ( // Assuming 'loading' here refers to master data loading
|
||||
<div className="col-12">
|
||||
<p className="text-center">Loading roles...</p>
|
||||
</div>
|
||||
) : filteredEmployees?.length > 0 ? (
|
||||
filteredEmployees?.map((emp) => {
|
||||
const jobRole = jobRoleData?.find(
|
||||
(role) => role?.id === emp?.jobRoleId
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={emp.id}
|
||||
className="col-6 col-md-4 col-lg-3 mb-3"
|
||||
>
|
||||
<div className="form-check d-flex align-items-start">
|
||||
<Controller
|
||||
name="selectedEmployees"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<input
|
||||
{...field}
|
||||
className="form-check-input me-1 mt-1"
|
||||
type="checkbox"
|
||||
id={`employee-${emp?.id}`}
|
||||
value={emp.id}
|
||||
checked={field.value?.includes(emp.id)}
|
||||
onChange={(e) => {
|
||||
handleCheckboxChange(e, emp);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="flex-grow-1">
|
||||
<p
|
||||
className="mb-0"
|
||||
style={{ fontSize: "13px" }}
|
||||
>
|
||||
{emp.firstName} {emp.lastName}
|
||||
</p>
|
||||
<small
|
||||
className="text-muted"
|
||||
style={{ fontSize: "11px" }}
|
||||
>
|
||||
{loading ? (
|
||||
<span className="placeholder-glow">
|
||||
<span className="placeholder col-6"></span>
|
||||
</span>
|
||||
) : (
|
||||
jobRole?.name || "Unknown Role"
|
||||
)}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="col-12">
|
||||
<p className="text-center">
|
||||
No employees found for the selected role.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="col-12 h-25 overflow-auto"
|
||||
style={{ maxHeight: "200px" }}
|
||||
>
|
||||
{watch("selectedEmployees")?.length > 0 && (
|
||||
<div className="mt-1">
|
||||
<div className="text-start px-2">
|
||||
{watch("selectedEmployees")?.map((empId) => {
|
||||
const emp = employees.find((emp) => emp.id === empId);
|
||||
return (
|
||||
emp && (
|
||||
<span
|
||||
key={empId}
|
||||
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
|
||||
>
|
||||
{emp.firstName} {emp.lastName}
|
||||
<p
|
||||
type="button"
|
||||
className=" btn-close-white p-0 m-0"
|
||||
aria-label="Close"
|
||||
onClick={() => {
|
||||
const updatedSelected = watch(
|
||||
"selectedEmployees"
|
||||
).filter((id) => id !== empId);
|
||||
setValue(
|
||||
"selectedEmployees",
|
||||
updatedSelected
|
||||
);
|
||||
trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation on removing badge
|
||||
}}
|
||||
>
|
||||
<i className="icon-base bx bx-x icon-md "></i>
|
||||
</p>
|
||||
</span>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!loading && errors.selectedEmployees && (
|
||||
<div className="danger-text mt-1">
|
||||
<p>{errors.selectedEmployees.message}</p>{" "}
|
||||
{/* Use message from Zod schema */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pending Task of Activity section */}
|
||||
<div className="col-md text-start mx-0 px-0">
|
||||
<div className="form-check form-check-inline mt-3 px-1">
|
||||
<label
|
||||
className="form-text text-dark align-items-center d-flex"
|
||||
htmlFor="inlineCheckbox1"
|
||||
>
|
||||
Pending Task of Activity :
|
||||
<label
|
||||
className="form-check-label fs-7 ms-4"
|
||||
htmlFor="inlineCheckbox1"
|
||||
>
|
||||
<strong>
|
||||
{assignData?.workItem?.workItem?.plannedWork -
|
||||
assignData?.workItem?.workItem?.completedWork}
|
||||
</strong>{" "}
|
||||
<u>
|
||||
{
|
||||
assignData?.workItem?.workItem?.activityMaster
|
||||
?.unitOfMeasurement
|
||||
}
|
||||
</u>
|
||||
</label>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<div
|
||||
ref={infoRef}
|
||||
tabIndex="0"
|
||||
className="d-flex align-items-center avatar-group justify-content-center ms-2"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-trigger="focus"
|
||||
data-bs-placement="right"
|
||||
data-bs-html="true"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13"
|
||||
height="13"
|
||||
fill="currentColor"
|
||||
className="bi bi-info-circle"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
||||
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Target for Today input and validation */}
|
||||
<div className="col-md text-start mx-0 px-0">
|
||||
<div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
|
||||
<label
|
||||
className="text-dark text-start d-flex align-items-center flex-wrap form-text"
|
||||
htmlFor="inlineCheckbox1"
|
||||
>
|
||||
<span>Target for Today</span>
|
||||
<span style={{ marginLeft: "46px" }}>:</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className="form-check form-check-inline col-sm-3 mt-2"
|
||||
style={{ marginLeft: "-28px" }}
|
||||
>
|
||||
<Controller
|
||||
name="plannedTask"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<div className="d-flex align-items-center gap-1 ">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...field}
|
||||
id="defaultFormControlInput"
|
||||
aria-describedby="defaultFormControlHelp"
|
||||
/>
|
||||
<span style={{ paddingLeft: "6px" }}>
|
||||
{
|
||||
assignData?.workItem?.workItem?.activityMaster
|
||||
?.unitOfMeasurement
|
||||
}
|
||||
</span>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={infoRef1}
|
||||
tabIndex="0"
|
||||
className="d-flex align-items-center avatar-group justify-content-center ms-2"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-trigger="focus"
|
||||
data-bs-placement="right"
|
||||
data-bs-html="true"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13"
|
||||
height="13"
|
||||
fill="currentColor"
|
||||
className="bi bi-info-circle"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
||||
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errors.plannedTask && (
|
||||
<div className="danger-text mt-1">
|
||||
{errors.plannedTask.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isHelpVisible && (
|
||||
<div
|
||||
className="position-absolute bg-white border p-2 rounded shadow"
|
||||
style={{ zIndex: 10, marginLeft: "10px" }}
|
||||
>
|
||||
{/* Add your help content here */}
|
||||
<p className="mb-0">
|
||||
Enter the target value for today's task.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<label
|
||||
className="form-text fs-7 m-1 text-lg text-dark"
|
||||
htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
|
||||
>
|
||||
Description
|
||||
</label>
|
||||
<Controller
|
||||
name="description"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<textarea
|
||||
{...field}
|
||||
className="form-control"
|
||||
id="descriptionTextarea" // Changed id for better accessibility
|
||||
rows="2"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.description && (
|
||||
<div className="danger-text">{errors.description.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Submit and Cancel buttons */}
|
||||
<div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary "
|
||||
disabled={isSubmitting || loading}
|
||||
>
|
||||
{isSubmitting ? "Please Wait" : "Submit"}
|
||||
</button>
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
onClick={closedModel}
|
||||
disabled={isSubmitting || loading}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssignTask;
|
||||
@ -20,7 +20,8 @@ const taskSchema = z
|
||||
activityID: z.string().min(1, "Activity is required"),
|
||||
workCategoryId: z.string().min(1, "Work Category is required"),
|
||||
plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
|
||||
completedWork: z.number().min(0, "Completed Work must be greater than 0"),
|
||||
completedWork: z.number().min( 0, "Completed Work must be greater than 0" ),
|
||||
comment:z.string()
|
||||
})
|
||||
.refine(
|
||||
(data) =>
|
||||
@ -47,6 +48,7 @@ const EditActivityModal = ({
|
||||
workCategoryId: 0,
|
||||
plannedWork: 0,
|
||||
completedWork: 0,
|
||||
comment:""
|
||||
};
|
||||
|
||||
const { projects_Details, refetch } = useProjectDetails(selectedProject);
|
||||
@ -185,6 +187,8 @@ const EditActivityModal = ({
|
||||
workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
|
||||
completedWork:
|
||||
workItem?.workItem?.completedWork || workItem?.completedWork || 0,
|
||||
comment:
|
||||
workItem?.workItem?.description || workItem?.description || ""
|
||||
});
|
||||
return () => reset();
|
||||
}, [activities, workItem]);
|
||||
@ -384,6 +388,27 @@ const EditActivityModal = ({
|
||||
</div>
|
||||
{/* )} */}
|
||||
|
||||
|
||||
<div className="col-12">
|
||||
<label
|
||||
className="form-text fs-7 m-1 text-lg text-dark"
|
||||
htmlFor="descriptionTextarea"
|
||||
>
|
||||
Comment
|
||||
</label>
|
||||
<textarea
|
||||
{...register("comment")}
|
||||
className="form-control"
|
||||
id="descriptionTextarea"
|
||||
rows="2"
|
||||
/>
|
||||
{errors.comment && (
|
||||
<div className="danger-text">
|
||||
{errors.comment.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-center">
|
||||
<button type="submit" className="btn btn-sm btn-primary me-3" disabled={activities.length === 0 || isSubmitting}>
|
||||
{isSubmitting ? "Please Wait.." : "Edit Task"}
|
||||
|
||||
@ -14,7 +14,8 @@ const taskSchema = z.object({
|
||||
activityID: z.string().min(1, "Activity is required"),
|
||||
workCategoryId: z.string().min(1, "Work Category is required"),
|
||||
plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
|
||||
completedWork: z.number().min(0, "Completed Work must be greater than 0"),
|
||||
completedWork: z.number().min( 0, "Completed Work must be greater than 0" ),
|
||||
comment:z.string(),
|
||||
});
|
||||
|
||||
const defaultModel = {
|
||||
@ -26,6 +27,7 @@ const defaultModel = {
|
||||
workCategoryId: "",
|
||||
plannedWork: 0,
|
||||
completedWork: 0,
|
||||
comment:""
|
||||
};
|
||||
|
||||
const TaskModel = ({
|
||||
@ -124,7 +126,7 @@ const TaskModel = ({
|
||||
};
|
||||
|
||||
const onSubmitForm = async (data) => {
|
||||
console.log(data);
|
||||
|
||||
setIsSubmitting(true);
|
||||
await onSubmit(data);
|
||||
setValue("plannedWork", 0);
|
||||
@ -136,7 +138,7 @@ const TaskModel = ({
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData(defaultModel);
|
||||
setSelectedBuilding(null); // not "0"
|
||||
setSelectedBuilding(null);
|
||||
setSelectedFloor(null);
|
||||
setSelectedWorkArea(null);
|
||||
setSelectedActivity(null);
|
||||
@ -386,7 +388,6 @@ const TaskModel = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Unit */}
|
||||
{selectedActivity && selectedCategory && (
|
||||
<div className="col-2 col-md-2">
|
||||
<label className="form-label" htmlFor="unit">
|
||||
@ -400,7 +401,27 @@ const TaskModel = ({
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedActivity && selectedCategory && (
|
||||
<div className="col-12">
|
||||
<label
|
||||
className="form-text fs-7 m-1 text-lg text-dark"
|
||||
htmlFor="descriptionTextarea"
|
||||
>
|
||||
Comment
|
||||
</label>
|
||||
<textarea
|
||||
{...register("comment")}
|
||||
className="form-control"
|
||||
id="descriptionTextarea"
|
||||
rows="2"
|
||||
/>
|
||||
{errors.comment && (
|
||||
<div className="danger-text">
|
||||
{errors.comment.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="col-12 text-center">
|
||||
<button type="submit" className="btn btn-sm btn-primary me-3">
|
||||
{isSubmitting ? "Please Wait.." : "Add Task"}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import AssignRoleModel from "../AssignRole";
|
||||
import AssignTask from "../AssignTask";
|
||||
import { useParams } from "react-router-dom";
|
||||
import EditActivityModal from "./EditActivityModal";
|
||||
import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
|
||||
@ -19,6 +19,7 @@ import {
|
||||
} from "../../../slices/apiDataManager";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { refreshData } from "../../../slices/localVariablesSlice";
|
||||
import GlobalModel from "../../common/GlobalModel";
|
||||
|
||||
const WorkItem = ({
|
||||
workItem,
|
||||
@ -98,15 +99,9 @@ const WorkItem = ({
|
||||
return (
|
||||
<>
|
||||
{isModalOpen && (
|
||||
<div
|
||||
className={`modal fade ${isModalOpen ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{ display: isModalOpen ? "block" : "none" }}
|
||||
aria-hidden={!isModalOpen}
|
||||
>
|
||||
<AssignRoleModel assignData={assigndata} onClose={closeModal} setAssigned={refreshWorkItem} />
|
||||
</div>
|
||||
<GlobalModel isOpen={isModalOpen} size="lg" closeModal={closeModal}>
|
||||
<AssignTask assignData={assigndata} onClose={closeModal} setAssigned={refreshWorkItem} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{showModal && (
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import AssignRole from './AssignRole'
|
||||
import AssignRole from './AssignTask'
|
||||
|
||||
const ProjectModal = ({modalConfig,closeModal}) => {
|
||||
|
||||
|
||||
@ -78,7 +78,7 @@ const Editor = ({
|
||||
aria-disabled={loading}
|
||||
onClick={onCancel}
|
||||
>
|
||||
Cancel
|
||||
Clear
|
||||
</span>
|
||||
<span
|
||||
type="submit"
|
||||
|
||||
@ -120,7 +120,7 @@ const CreateActivity = ({ onClose }) => {
|
||||
}, []);
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<h6>Create Activity</h6>
|
||||
{/* <h6>Create Activity</h6> */}
|
||||
<div className="row">
|
||||
<div className="col-6">
|
||||
<label className="form-label">Activity</label>
|
||||
|
||||
@ -70,9 +70,9 @@ const CreateJobRole = ({onClose}) => {
|
||||
const maxDescriptionLength = 255;
|
||||
return (<>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 col-md-12">
|
||||
{/* <div className="col-12 col-md-12">
|
||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">Role</label>
|
||||
<input type="text"
|
||||
|
||||
@ -96,10 +96,10 @@ const CreateRole = ({ modalType, onClose }) => {
|
||||
return (
|
||||
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 col-md-12">
|
||||
{/* <div className="col-12 col-md-12">
|
||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Application Role</label>
|
||||
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">Role</label>
|
||||
<input type="text"
|
||||
|
||||
@ -131,7 +131,7 @@ const UpdateActivity = ({ activityData, onClose }) => {
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<h6>Update Activity</h6>
|
||||
{/* <h6>Update Activity</h6> */}
|
||||
<div className="row">
|
||||
{/* Activity Name */}
|
||||
<div className="col-md-6">
|
||||
|
||||
@ -77,9 +77,9 @@ const EditJobRole = ({data,onClose}) => {
|
||||
|
||||
return (<>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 col-md-12">
|
||||
{/* <div className="col-12 col-md-12">
|
||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Job Role</label>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">Role</label>
|
||||
<input type="text"
|
||||
|
||||
@ -146,9 +146,9 @@ const EditMaster = ({ master, onClose }) => {
|
||||
return (
|
||||
|
||||
<form className="row g-2 " onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 col-md-12">
|
||||
{/* <div className="col-12 col-md-12">
|
||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Application Role</label>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">Role</label>
|
||||
<input type="text"
|
||||
|
||||
@ -77,10 +77,10 @@ const EditWorkCategory = ({data,onClose}) => {
|
||||
|
||||
return (<>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 col-md-12">
|
||||
{/* <div className="col-12 col-md-12">
|
||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Work Category</label>
|
||||
</div>
|
||||
|
||||
*/}
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">Category Name</label>
|
||||
<input type="text"
|
||||
|
||||
@ -97,30 +97,29 @@ export const useActivitiesMaster = () =>
|
||||
{
|
||||
const [ activities, setActivites ] = useState( [] )
|
||||
const [ loading, setloading ] = useState( false );
|
||||
const [ error, setError ] = useState( "" )
|
||||
|
||||
const [ error, setError ] = useState()
|
||||
const fetchActivities =async () => {
|
||||
const cacheddata = getCachedData("ActivityMaster");
|
||||
|
||||
if (!cacheddata) {
|
||||
setloading(true);
|
||||
try {
|
||||
const response = await MasterRespository.getActivites();
|
||||
setActivites(response.data);
|
||||
cacheData("ActivityMaster", response.data);
|
||||
cacheData( "ActivityMaster", response.data );
|
||||
setloading(false);
|
||||
} catch (err) {
|
||||
setError(err);
|
||||
console.log(err);
|
||||
} finally {
|
||||
setloading(false);
|
||||
}
|
||||
} else {
|
||||
setActivites(cacheddata);
|
||||
}
|
||||
}
|
||||
}
|
||||
useEffect( () =>
|
||||
{
|
||||
fetchActivities()
|
||||
const cacheddata = getCachedData( "ActivityMaster" );
|
||||
if ( !cacheddata )
|
||||
{
|
||||
fetchActivities()
|
||||
} else
|
||||
{
|
||||
setActivites(cacheddata);
|
||||
}
|
||||
}, [] )
|
||||
|
||||
return {activities,loading,error}
|
||||
|
||||
@ -61,25 +61,37 @@ const useAttendanceStatus = (attendanceData) => {
|
||||
}
|
||||
|
||||
// 3. Already checked in and out → Handle activity === 4 (Approved)
|
||||
if (checkInTime && checkOutTime && activity === 4) {
|
||||
if (!isSameDay(checkOutTime, now) && !timeElapsed(checkOutTime, THRESH_HOLD)) {
|
||||
return setStatus({
|
||||
status: "Approved",
|
||||
action: ACTIONS.APPROVED,
|
||||
disabled: true,
|
||||
text: "Approved",
|
||||
color: 'btn-success',
|
||||
});
|
||||
} else if (isSameDay(checkOutTime, now)) {
|
||||
return setStatus({
|
||||
status: "Check-In",
|
||||
action: ACTIONS.CHECK_IN,
|
||||
disabled: false,
|
||||
text: "Check In",
|
||||
color: 'btn-primary',
|
||||
});
|
||||
}
|
||||
}
|
||||
if (checkInTime && checkOutTime && activity === 4) {
|
||||
if (!isSameDay(checkInTime, now) && !timeElapsed(checkInTime, THRESH_HOLD)) {
|
||||
// Case: Past day, but still within threshold → Approved
|
||||
return setStatus({
|
||||
status: "Approved",
|
||||
action: ACTIONS.APPROVED,
|
||||
disabled: true,
|
||||
text: "Approved",
|
||||
color: 'btn-success',
|
||||
});
|
||||
} else if (isSameDay(checkOutTime, now)) {
|
||||
// Case: same day → allow check-in again
|
||||
return setStatus({
|
||||
status: "Check In",
|
||||
action: ACTIONS.CHECK_IN,
|
||||
disabled: false,
|
||||
text: "Check In",
|
||||
color: 'btn-primary',
|
||||
});
|
||||
} else {
|
||||
// Case: not same day AND over 48 hours → freeze status as Approved
|
||||
return setStatus({
|
||||
status: "Approved",
|
||||
action: ACTIONS.APPROVED,
|
||||
disabled: true,
|
||||
text: "Approved",
|
||||
color: 'btn-success',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 4. Regularization Requested
|
||||
if (activity === 2) {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { TasksRepository } from "../repositories/TaskRepository";
|
||||
import { cacheData, getCachedData } from "../slices/apiDataManager";
|
||||
import {MasterRespository} from "../repositories/MastersRepository";
|
||||
// import {formatDate} from "../utils/dateUtils";
|
||||
|
||||
export const useTaskList = (projectId, dateFrom, toDate) => {
|
||||
@ -8,7 +9,7 @@ export const useTaskList = (projectId, dateFrom, toDate) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const fetchList = async () => {
|
||||
const fetchList = async (projectId, dateFrom, toDate) => {
|
||||
const taskList_cached = getCachedData("taskList");
|
||||
// if (!taskList_cached || taskList_cached?.projectId !== projectId) {
|
||||
try {
|
||||
@ -33,10 +34,71 @@ export const useTaskList = (projectId, dateFrom, toDate) => {
|
||||
{
|
||||
|
||||
if (projectId && dateFrom && toDate) {
|
||||
fetchList();
|
||||
fetchList(projectId, dateFrom, toDate);
|
||||
}
|
||||
|
||||
}, [projectId, dateFrom, toDate]);
|
||||
|
||||
return { TaskList, loading, error, refetch:fetchList};
|
||||
};
|
||||
|
||||
|
||||
export const useTaskById = (TaskId) =>
|
||||
{
|
||||
const [Task, setTask] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [ error, setError ] = useState( null );
|
||||
|
||||
|
||||
|
||||
const fetchTask = async(TaskId) =>
|
||||
{
|
||||
try
|
||||
{
|
||||
let res = await TasksRepository.getTaskById( TaskId );
|
||||
setTask( res.data );
|
||||
|
||||
} catch ( error )
|
||||
{
|
||||
setError(err)
|
||||
}
|
||||
}
|
||||
useEffect( () =>
|
||||
{
|
||||
if ( TaskId )
|
||||
{
|
||||
fetchTask(TaskId)
|
||||
}
|
||||
}, [ TaskId ] )
|
||||
return { Task,loading}
|
||||
}
|
||||
|
||||
export const useAuditStatus = () =>
|
||||
{
|
||||
const [ status, setStatus ] = useState( [] );
|
||||
const [ error, setError ] = useState( '' );
|
||||
const [ loading, setLoading ] = useState( false )
|
||||
|
||||
const fetchStatus = async() =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const res = await MasterRespository.getAuditStatus()
|
||||
setStatus( res.data )
|
||||
cacheData("AuditStatus",res.data)
|
||||
} catch ( err )
|
||||
{
|
||||
setError(err)
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
const cache_status = getCachedData('AuditStatus');
|
||||
if (cache_status) {
|
||||
setStatus(cache_status);
|
||||
} else {
|
||||
fetchStatus();
|
||||
}
|
||||
}, []);
|
||||
|
||||
return {status,error,loading}
|
||||
}
|
||||
@ -11,6 +11,8 @@ import { useSearchParams } from "react-router-dom";
|
||||
import moment from "moment";
|
||||
import FilterIcon from "../../components/common/FilterIcon"; // Import the FilterIcon component
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import AssignTask from "../../components/Project/AssignTask";
|
||||
import SubTask from "../../components/Activities/SubTask";
|
||||
|
||||
const DailyTask = () => {
|
||||
const [searchParams] = useSearchParams();
|
||||
@ -55,7 +57,7 @@ const DailyTask = () => {
|
||||
|
||||
const {
|
||||
TaskList,
|
||||
loading: task_loading,
|
||||
loading: task_loading,
|
||||
error: task_error,
|
||||
refetch,
|
||||
} = useTaskList(
|
||||
@ -64,7 +66,7 @@ const DailyTask = () => {
|
||||
initialized ? dateRange.endDate : null
|
||||
);
|
||||
|
||||
const [TaskLists, setTaskLists] = useState([]);
|
||||
const [TaskLists, setTaskLists] = useState([]);
|
||||
const [dates, setDates] = useState([]);
|
||||
const popoverRefs = useRef([]);
|
||||
|
||||
@ -114,7 +116,7 @@ const DailyTask = () => {
|
||||
}, [TaskLists]);
|
||||
|
||||
const [selectedTask, selectTask] = useState(null);
|
||||
const [comments, setComment] = useState(null);
|
||||
const [comments, setComment] = useState({ task: null, isActionAllow: false });
|
||||
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isModalOpenComment, setIsModalOpenComment] = useState(false);
|
||||
@ -124,7 +126,8 @@ const DailyTask = () => {
|
||||
|
||||
const openComment = () => setIsModalOpenComment(true);
|
||||
const closeCommentModal = () => setIsModalOpenComment(false);
|
||||
|
||||
const [IsSubTaskNeeded, setIsSubTaskNeeded] = useState(false);
|
||||
const [SubTaskData, setSubTaskData] = useState();
|
||||
const handletask = (task) => {
|
||||
selectTask(task);
|
||||
openModal();
|
||||
@ -137,16 +140,22 @@ const DailyTask = () => {
|
||||
trigger: "focus",
|
||||
placement: "left",
|
||||
html: true,
|
||||
content: el.getAttribute("data-bs-content"),
|
||||
content: el.getAttribute("data-bs-content"),
|
||||
});
|
||||
}
|
||||
});
|
||||
},[dates, TaskLists]);
|
||||
|
||||
}, [dates, TaskLists]);
|
||||
|
||||
|
||||
const handlecloseModal = () =>
|
||||
{
|
||||
setIsModalOpen( false )
|
||||
refetch(selectedProject, dateRange.startDate, dateRange.endDate);
|
||||
}
|
||||
const handleProjectChange = (e) => {
|
||||
const newProjectId = e.target.value;
|
||||
dispatch(setProjectId(newProjectId));
|
||||
setTaskLists([]);
|
||||
setTaskLists([]);
|
||||
setFilters({
|
||||
selectedBuilding: "",
|
||||
selectedFloors: [],
|
||||
@ -154,29 +163,55 @@ const DailyTask = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleCloseAction = (IsSubTask) => {
|
||||
if (IsSubTask) {
|
||||
setIsSubTaskNeeded(true);
|
||||
setIsModalOpenComment(false);
|
||||
} else {
|
||||
refetch(selectedProject, dateRange.startDate, dateRange.endDate);
|
||||
setIsModalOpenComment(false);
|
||||
}
|
||||
};
|
||||
const hanleCloseSubTask = () => {
|
||||
setIsSubTaskNeeded(false);
|
||||
setComment( null );
|
||||
refetch(selectedProject, dateRange.startDate, dateRange.endDate);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`modal fade ${isModalOpen ? "show d-block" : ""}`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{ display: isModalOpen ? "block" : "none" }}
|
||||
aria-hidden={!isModalOpen}
|
||||
>
|
||||
|
||||
|
||||
{isModalOpen && <GlobalModel isOpen={isModalOpen} size="md" closeModal={handlecloseModal} >
|
||||
<ReportTask
|
||||
report={selectedTask}
|
||||
closeModal={closeModal}
|
||||
closeModal={handlecloseModal}
|
||||
refetch={refetch}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</GlobalModel>}
|
||||
|
||||
{isModalOpenComment && (
|
||||
<GlobalModel isOpen={isModalOpenComment} size="lg" closeModal={()=>setIsModalOpenComment(false)}>
|
||||
<ReportTaskComments
|
||||
commentsData={comments}
|
||||
closeModal={closeCommentModal}
|
||||
/>
|
||||
<GlobalModel
|
||||
isOpen={isModalOpenComment}
|
||||
size="lg"
|
||||
closeModal={() => setIsModalOpenComment(false)}
|
||||
>
|
||||
<ReportTaskComments
|
||||
commentsData={comments.task}
|
||||
actionAllow={comments.isActionAllow}
|
||||
handleCloseAction={handleCloseAction}
|
||||
closeModal={closeCommentModal}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{IsSubTaskNeeded && (
|
||||
<GlobalModel
|
||||
isOpen={IsSubTaskNeeded}
|
||||
size="lg"
|
||||
closeModal={hanleCloseSubTask}
|
||||
>
|
||||
<SubTask activity={comments.task} onClose={hanleCloseSubTask} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
@ -198,37 +233,13 @@ const DailyTask = () => {
|
||||
dateFormat="DD-MM-YYYY"
|
||||
/>
|
||||
<FilterIcon
|
||||
taskListData={TaskList}
|
||||
taskListData={TaskList}
|
||||
onApplyFilters={setFilters}
|
||||
currentSelectedBuilding={filters.selectedBuilding}
|
||||
currentSelectedFloors={filters.selectedFloors}
|
||||
currentSelectedActivities={filters.selectedActivities}
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="col-md-4 col-12 text-center mb-2 mb-md-0">
|
||||
<select
|
||||
name="project_select"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select form-select-sm"
|
||||
value={selectedProject || ""}
|
||||
onChange={handleProjectChange}
|
||||
aria-label="Select Project"
|
||||
disabled={project_loading}
|
||||
>
|
||||
{project_loading && (
|
||||
<option value="" disabled>
|
||||
Loading Projects...
|
||||
</option>
|
||||
)}
|
||||
{!project_loading &&
|
||||
projects &&
|
||||
projects?.map((project) => (
|
||||
<option value={project.id} key={project.id}>
|
||||
{project.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap mt-3">
|
||||
<table className="table">
|
||||
@ -409,7 +420,7 @@ const DailyTask = () => {
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<div className="d-flex justify-content-center">
|
||||
<div className="d-flex justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-xs btn-primary ${
|
||||
@ -424,11 +435,34 @@ const DailyTask = () => {
|
||||
>
|
||||
Report
|
||||
</button>
|
||||
{task.reportedDate && (
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-xs btn-warning ${
|
||||
task.reportedDate && task.approvedBy
|
||||
? "d-none"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setComment({
|
||||
task: task,
|
||||
isActionAllow: true,
|
||||
});
|
||||
openComment();
|
||||
}}
|
||||
>
|
||||
QC
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary ms-2"
|
||||
onClick={() => {
|
||||
setComment(task);
|
||||
setComment({
|
||||
task: task,
|
||||
isActionAllow: false,
|
||||
});
|
||||
openComment();
|
||||
}}
|
||||
>
|
||||
|
||||
@ -32,7 +32,7 @@ const DirectoryPageHeader = ({
|
||||
<div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control"
|
||||
className="form-control form-control-sm me-2"
|
||||
placeholder="Search Contact..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
|
||||
@ -25,6 +25,7 @@ import ConfirmModal from "../../components/common/ConfirmModal";
|
||||
import { useSelector } from "react-redux";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import { newlineChars } from "pdf-lib";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
|
||||
const EmployeeList = () => {
|
||||
// const selectedProjectId = useSelector((store) => store.localVariables.projectId);
|
||||
@ -207,18 +208,17 @@ const EmployeeList = () => {
|
||||
recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProject);
|
||||
};
|
||||
|
||||
const handleAllEmployeesToggle = (e) => {
|
||||
const isChecked = e.target.checked;
|
||||
setShowInactive(false);
|
||||
setShowAllEmployees(isChecked);
|
||||
if (isChecked) {
|
||||
recallEmployeeData(false, null);
|
||||
} else {
|
||||
recallEmployeeData(false, selectedProjectId);
|
||||
}
|
||||
const handleAllEmployeesToggle = (e) => {
|
||||
const isChecked = e.target.checked;
|
||||
setShowInactive(false);
|
||||
setShowAllEmployees(isChecked);
|
||||
|
||||
if (!isChecked) {
|
||||
setSelectedProject(selectedProjectId || "");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// recallEmployeeData(false, isChecked ? null : selectedProject);
|
||||
};
|
||||
|
||||
const handleEmployeeModel = (id) => {
|
||||
setSelecedEmployeeId(id);
|
||||
@ -260,7 +260,7 @@ const EmployeeList = () => {
|
||||
{isCreateModalOpen && (
|
||||
<ManageEmp employeeId={modelConfig} onClosed={closeModal} />
|
||||
)}
|
||||
{showModal && (<div
|
||||
{/* {showModal && (<div
|
||||
className={`modal fade ${showModal ? "show" : ""} `}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
@ -278,7 +278,16 @@ const EmployeeList = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>)}
|
||||
</div> )} */}
|
||||
|
||||
{showModal && (
|
||||
<GlobalModel isOpen={showModal} size="lg" closeModal={()=>setShowModal(false)}>
|
||||
<ManageEmployee
|
||||
employeeId={selectedEmployeeId}
|
||||
onClosed={()=>setShowModal(false)}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{IsDeleteModalOpen && (
|
||||
<div
|
||||
|
||||
@ -54,6 +54,8 @@ export const MasterRespository = {
|
||||
|
||||
getContactTag: () => api.get( `/api/master/contact-tags` ),
|
||||
createContactTag: (data ) => api.post( `/api/master/contact-tag`, data ),
|
||||
updateContactTag: ( id, data ) => api.post( `/api/master/contact-tag/edit/${ id }`, data )
|
||||
updateContactTag: ( id, data ) => api.post( `/api/master/contact-tag/edit/${ id }`, data ),
|
||||
|
||||
getAuditStatus:()=>api.get('/api/Master/work-status')
|
||||
|
||||
}
|
||||
@ -14,6 +14,12 @@ export const TasksRepository = {
|
||||
|
||||
return api.get(url);
|
||||
},
|
||||
|
||||
getTaskById:(id)=>api.get(`/api/task/get/${id}`),
|
||||
reportTask: (data) => api.post("api/task/report", data),
|
||||
taskComments: (data) => api.post("api/task/comment", data),
|
||||
taskComments: ( data ) => api.post( "api/task/comment", data ),
|
||||
auditTask: ( data ) => api.post( '/api/task/approve', data ),
|
||||
|
||||
assignTask:(data) =>api.post('/api/task/assign',data)
|
||||
|
||||
};
|
||||
|
||||
@ -8,8 +8,8 @@ import showToast from "./toastService";
|
||||
import eventBus from "./eventBus";
|
||||
import { useSelector } from "react-redux";
|
||||
import { clearApiCacheKey } from "../slices/apiCacheSlice";
|
||||
const base_Url = process.env.VITE_BASE_URL;
|
||||
// const base_Url = "https://devapi.marcoaiot.com";
|
||||
import { BASE_URL } from "../utils/constants";
|
||||
const base_Url = BASE_URL;
|
||||
let connection = null;
|
||||
|
||||
const targetPath = "";
|
||||
|
||||
@ -3,8 +3,9 @@ import { useNavigate } from "react-router-dom";
|
||||
import axiosRetry from "axios-retry";
|
||||
import showToast from "../services/toastService";
|
||||
import { startSignalR, stopSignalR } from "../services/signalRService";
|
||||
const base_Url = process.env.VITE_BASE_URL;
|
||||
// const base_Url = "https://api.marcoaiot.com";
|
||||
import { BASE_URL } from "./constants";
|
||||
const base_Url = BASE_URL
|
||||
|
||||
export const axiosClient = axios.create({
|
||||
baseURL: base_Url,
|
||||
withCredentials: false,
|
||||
|
||||
@ -32,4 +32,7 @@ export const DIRECTORY_ADMIN = "4286a13b-bb40-4879-8c6d-18e9e393beda"
|
||||
|
||||
export const DIRECTORY_MANAGER = "62668630-13ce-4f52-a0f0-db38af2230c5"
|
||||
|
||||
export const DIRECTORY_USER = "0f919170-92d4-4337-abd3-49b66fc871bb"
|
||||
export const DIRECTORY_USER = "0f919170-92d4-4337-abd3-49b66fc871bb"
|
||||
|
||||
export const BASE_URL = process.env.VITE_BASE_URL;
|
||||
// export const BASE_URL = "https://api.marcoaiot.com";
|
||||
Loading…
x
Reference in New Issue
Block a user