admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 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

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

@ -25,12 +25,11 @@ const schema = z.object({
const ReportTaskComments = ({ commentsData, closeModal }) => {
const [loading, setloading] = useState(false);
const [comments, setComment] = useState([]);
const [bgClass, setBgClass] = useState("");
const {
register,
handleSubmit,
formState: { errors },
reset,
reset, // Destructure reset from useForm
} = useForm({
resolver: zodResolver(schema),
});
@ -38,19 +37,28 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
const containerRef = useRef(null);
const firstRender = useRef(true);
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]);
// Scroll logic: scroll to bottom when new comments are added
useEffect(() => {
if (!firstRender.current && containerRef.current) {
containerRef.current.scrollTop = containerRef.current.scrollHeight;
} 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) => {
let sendComment = {
@ -61,34 +69,40 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
try {
setloading(true);
const resp = await TasksRepository.taskComments(sendComment);
setComment((prevItems) => [...prevItems, resp.data]);
const taskList = getCachedData("taskList");
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,
});
reset();
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,
});
}
reset();
setloading(false);
showToast("Successfully Sent", "success");
// closeModal();
} catch (error) {
setloading(false);
showToast(error.response.data?.message || "Something went wrong", "error");
}
};
console.log("Kartik", commentsData)
return (
<div
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
</h5>
<p className="small-text text-start my-2">
{commentsData?.workItem?.workArea?.floor?.building?.description}
</p>
@ -114,9 +127,9 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
<p className="fw-bold my-2 text-start">
Assigned By :
<span className=" ms-2">
{commentsData?.assignedBy.firstName +
{commentsData?.assignedBy?.firstName +
" " +
commentsData?.assignedBy.lastName}
commentsData?.assignedBy?.lastName}
</span>{" "}
</p>
@ -161,7 +174,6 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
{...register("comment")}
className="form-control"
id="exampleFormControlTextarea1"
// rows="2"
placeholder="Enter comment"
/>
{errors.comment && (
@ -176,7 +188,7 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
>
Close
</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"}
</button>
</div>
@ -184,23 +196,21 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
<ul
className="list-group px-0 mx-0 overflow-auto border-0"
// ref={containerRef} // auto scroll according data
// style={{ maxHeight: "200px" }}
ref={containerRef}
>
{comments &&
comments
?.slice()
.reverse()
.reverse()
.map((data, idx) => {
const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
const bgClass = getBgClassFromHash(fullName);
return (
<li
className={`list-group-item list-group-item-action border-none my-1 p-1`}
key={idx}
>
<div
className={`li-wrapper d-flex justify-content-start align-items-start my-0`}
className={`li-wrapper d-flex justify-content-start align-items-center my-0`}
>
<div className="avatar avatar-xs me-1">
<span
@ -210,7 +220,7 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
</span>
</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={`text-secondary m-0`} style={{ fontSize: "10px" }}>
{moment.utc(data?.commentDate).local().fromNow()}