admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Comments popup submit button issue. #154

Merged
vikas.nale merged 1 commits from Kartik_Bug#389 into Issue_May_5W 2025-05-28 10:29:14 +00:00
Conversation 0 Commits 1 Files Changed 1 +47 -37
1 changed files with 47 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/Activities/ReportTaskComments.jsx
View File

@ -25,12 +25,11 @@ const schema = z.object({
const ReportTaskComments = ({ commentsData, closeModal }) => { const ReportTaskComments = ({ commentsData, closeModal }) => {
const [loading, setloading] = useState(false); const [loading, setloading] = useState(false);
const [comments, setComment] = useState([]); const [comments, setComment] = useState([]);
const [bgClass, setBgClass] = useState("");
const { const {
register, register,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
reset, reset, // Destructure reset from useForm
} = useForm({ } = useForm({
resolver: zodResolver(schema), resolver: zodResolver(schema),
}); });
@ -38,19 +37,28 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
const containerRef = useRef(null); const containerRef = useRef(null);
const firstRender = useRef(true); const firstRender = useRef(true);
useEffect(() => { useEffect(() => {
setComment(commentsData?.comments); const taskList = getCachedData("taskList");
if (taskList && taskList.data && commentsData?.id) {
const currentTask = taskList.data.find(task => task.id === commentsData.id);
if (currentTask && currentTask.comments) {
setComment(currentTask.comments);
} else {
setComment(commentsData?.comments || []);
}
} else {
setComment(commentsData?.comments || []);
}
firstRender.current = true;
}, [commentsData]); }, [commentsData]);
// Scroll logic: scroll to bottom when new comments are added
useEffect(() => { useEffect(() => {
if (!firstRender.current && containerRef.current) { if (!firstRender.current && containerRef.current) {
containerRef.current.scrollTop = containerRef.current.scrollHeight; containerRef.current.scrollTop = containerRef.current.scrollHeight;
} else { } else {
firstRender.current = false; // Mark the first render as complete firstRender.current = false;
} }
}, [comments]); // Run this when comments array is updated }, [comments]);
const onSubmit = async (data) => { const onSubmit = async (data) => {
let sendComment = { let sendComment = {
@ -61,34 +69,40 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
try { try {
setloading(true); setloading(true);
const resp = await TasksRepository.taskComments(sendComment); const resp = await TasksRepository.taskComments(sendComment);
setComment((prevItems) => [...prevItems, resp.data]); setComment((prevItems) => [...prevItems, resp.data]);
const taskList = getCachedData("taskList"); const taskList = getCachedData("taskList");
const updatedTaskList = taskList.data.map((task) => {
if (task.id === resp.data.taskAllocationId) { if (taskList && taskList.data) {
const existingComments = Array.isArray(task.comments) const updatedTaskList = taskList.data.map((task) => {
? task.comments if (task.id === resp.data.taskAllocationId) {
: []; const existingComments = Array.isArray(task.comments)
return { ? task.comments
...task, : [];
comments: [...existingComments, resp.data], return {
}; ...task,
} comments: [...existingComments, resp.data],
return task; };
}); }
cacheData("taskList", { return task;
data: updatedTaskList, });
projectId: taskList.projectId,
}); cacheData("taskList", {
data: updatedTaskList,
projectId: taskList.projectId,
});
}
reset(); reset();
setloading(false); setloading(false);
showToast("Successfully Sent", "success"); showToast("Successfully Sent", "success");
// closeModal();
} catch (error) { } catch (error) {
setloading(false); setloading(false);
showToast(error.response.data?.message || "Something went wrong", "error"); showToast(error.response.data?.message || "Something went wrong", "error");
} }
}; };
console.log("Kartik", commentsData)
return ( return (
<div <div
className="modal-dialog modal-lg modal-simple report-task-comments-modal mx-sm-auto mx-1" className="modal-dialog modal-lg modal-simple report-task-comments-modal mx-sm-auto mx-1"
@ -106,7 +120,6 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
Activity Summary Activity Summary
</h5> </h5>
<p className="small-text text-start my-2"> <p className="small-text text-start my-2">
{commentsData?.workItem?.workArea?.floor?.building?.description} {commentsData?.workItem?.workArea?.floor?.building?.description}
</p> </p>
@ -114,9 +127,9 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
<p className="fw-bold my-2 text-start"> <p className="fw-bold my-2 text-start">
Assigned By : Assigned By :
<span className=" ms-2"> <span className=" ms-2">
{commentsData?.assignedBy.firstName + {commentsData?.assignedBy?.firstName +
" " + " " +
commentsData?.assignedBy.lastName} commentsData?.assignedBy?.lastName}
</span>{" "} </span>{" "}
</p> </p>
@ -161,7 +174,6 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
{...register("comment")} {...register("comment")}
className="form-control" className="form-control"
id="exampleFormControlTextarea1" id="exampleFormControlTextarea1"
// rows="2"
placeholder="Enter comment" placeholder="Enter comment"
/> />
{errors.comment && ( {errors.comment && (
@ -176,7 +188,7 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
> >
Close Close
</button> </button>
<button type="submit" className="btn btn-sm btn-primary ms-2"> <button type="submit" className="btn btn-sm btn-primary ms-2" disabled={loading}>
{loading ? "Sending..." : "Comment"} {loading ? "Sending..." : "Comment"}
</button> </button>
</div> </div>
@ -184,8 +196,7 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
<ul <ul
className="list-group px-0 mx-0 overflow-auto border-0" className="list-group px-0 mx-0 overflow-auto border-0"
// ref={containerRef} // auto scroll according data ref={containerRef}
// style={{ maxHeight: "200px" }}
> >
{comments && {comments &&
comments comments
@ -193,14 +204,13 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
.reverse() .reverse()
.map((data, idx) => { .map((data, idx) => {
const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`; const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
const bgClass = getBgClassFromHash(fullName);
return ( return (
<li <li
className={`list-group-item list-group-item-action border-none my-1 p-1`} className={`list-group-item list-group-item-action border-none my-1 p-1`}
key={idx} key={idx}
> >
<div <div
className={`li-wrapper d-flex justify-content-start align-items-start my-0`} className={`li-wrapper d-flex justify-content-start align-items-center my-0`}
> >
<div className="avatar avatar-xs me-1"> <div className="avatar avatar-xs me-1">
<span <span
@ -210,7 +220,7 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
</span> </span>
</div> </div>
<div className={`text-start py-0 d-flex align-items-center justify-content-start`}> <div className={`d-flex align-items-center justify-content-start`}>
<p className={`mb-0 text-muted me-2`}>{fullName}</p> <p className={`mb-0 text-muted me-2`}>{fullName}</p>
<p className={`text-secondary m-0`} style={{ fontSize: "10px" }}> <p className={`text-secondary m-0`} style={{ fontSize: "10px" }}>
{moment.utc(data?.commentDate).local().fromNow()} {moment.utc(data?.commentDate).local().fromNow()}