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

modified cache for immiedtky reflacted on screen.

Browse Source
This commit is contained in:
Pramod Mahajan 2025-04-18 19:46:33 +05:30 committed by Vikas Nale
parent b458ac4780
commit fb774f45d1
1 changed files with 95 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState, useRef } from "react";
import { useProfile } from "../../hooks/useProfile"; import { useProfile } from "../../hooks/useProfile";
import moment from "moment"; import moment from "moment";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
@ -6,6 +6,9 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod"; import { z } from "zod";
import { TasksRepository } from "../../repositories/TaskRepository"; import { TasksRepository } from "../../repositories/TaskRepository";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import Avatar from "../common/Avatar";
import { getBgClassFromHash } from "../../utils/projectStatus";
import {cacheData, getCachedData} from "../../slices/apiDataManager";
const schema = z.object({ const schema = z.object({
comment: z.string().min(1, "Comment cannot be empty"), comment: z.string().min(1, "Comment cannot be empty"),
@ -15,6 +18,7 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
const [loading, setloading] = useState(false); const [loading, setloading] = useState(false);
const { profile } = useProfile(); const { profile } = useProfile();
const [comments, setComment] = useState([]); const [comments, setComment] = useState([]);
const [bgClass, setBgClass] = useState("");
const { const {
register, register,
handleSubmit, handleSubmit,
@ -24,10 +28,17 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
resolver: zodResolver(schema), resolver: zodResolver(schema),
}); });
const containerRef = useRef(null);
useEffect(() => { useEffect(() => {
setComment(commentsData?.comments); setComment(commentsData?.comments);
}, [commentsData]); }, [commentsData]);
const isLoggedUser = (usrId) => profile?.employeeInfo.id;
useEffect(() => {
if (containerRef.current) {
containerRef.current.scrollTop = containerRef.current.scrollHeight;
}
}, [comments]);
const isLoggedUser = (usrId) => profile?.employeeInfo.id === usrId;
const onSubmit = async (data) => { const onSubmit = async (data) => {
let sendComment = { let sendComment = {
@ -35,117 +46,113 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
taskAllocationId: commentsData?.id, taskAllocationId: commentsData?.id,
commentDate: new Date().toISOString(), commentDate: new Date().toISOString(),
}; };
try { try {
setloading(true); setloading(true);
// const resp = await TasksRepository.taskComments( sendComment ); const resp = await TasksRepository.taskComments(sendComment);
// console.timeLog( resp ) 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(); reset();
setloading(false); setloading(false);
showToast("Successfully Sent", "success"); showToast("Successfully Sent", "success");
closeModal(); // closeModal();
} catch (err) { } catch (error) {
setloading(false); setloading( false );
console.log(error)
showToast(error.response.data?.message || "Something wrong", "error"); showToast(error.response.data?.message || "Something wrong", "error");
} }
}; };
return ( return (
<div <div
className="modal-dialog modal-md modal-simple report-task-comments-modal" className="modal-dialog modal-lg modal-simple report-task-comments-modal mx-sm-auto mx-1"
role="document" role="document"
> >
<div className="modal-content"> <div className="modal-content">
<div className="modal-body px-1"> <div className="modal-body p-sm-4 p-0">
<button <button
type="button" type="button"
className="btn-close" className="btn-close"
onClick={closeModal} onClick={closeModal}
aria-label="Close" aria-label="Close"
></button> ></button>
<div className="container "> <p className="fs-6 text-dark text-start">{`${ commentsData?.workItem?.workArea?.floor?.building?.name }`} <i class='bx bx-chevron-right'></i> {`${ commentsData?.workItem?.workArea?.floor?.floorName } `} <i class='bx bx-chevron-right'></i>{`${ commentsData?.workItem?.workArea?.areaName }`}<i class='bx bx-chevron-right'></i>{` ${commentsData?.workItem?.activityMaster?.activityName}`}</p>
{ <ul
comments && comments.map( ( data ) => className="list-grouph px-0 mx-0 overflow-auto"
( ref={containerRef}
<div className="text-start" key={data.id}> style={{ maxHeight: "400px" }}
<div class={`li-wrapper d-flex justify-content-${isLoggedUser(data?.employee?.id) ? "end":"start"} align-items-start`}> >
{comments &&
comments.map((data) => {
const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
const bgClass = getBgClassFromHash(fullName);
return (
<li
className={`list-group-item list-group-item-action my-2 p-1`}
>
<div
className={`li-wrapper d-flex justify-content-start align-items-start my-0 `}
>
<div class="avatar avatar-xs me-1"> <div class="avatar avatar-xs me-1">
<span class="avatar-initial rounded-circle bg-label-success"> <span class={`avatar-initial rounded-circle bg-label-primary}`}>
{data?.employee?.firstName.slice(0,1)} {`${data?.employee?.firstName.slice(0,1)} ${data?.employee?.lastName.slice(0,1)}`}
</span> </span>
</div> </div>
<div class="text-start py-0">
<p class="mb-0">
<strong>{ `${data?.employee?.firstName} ${data?.employee?.lastName}`}</strong>
</p>
<small style={{fontSize: "10px"}}>{ moment(data?.commentDate).fromNow()}</small>
</div>
</div>
<p className={`ms-${ isLoggedUser( data?.employee?.id ) ? "0 text-end me-6" : "6 " } mt-1`}>{ data?.comment
}</p>
</div>
))}
{/* by other users */}
{/* <div className="text-start">
<div className="li-wrapper d-flex justify-content-start align-items-start">
<div className="avatar avatar-xs me-1">
<span className="avatar-initial rounded-circle bg-label-success">
M
</span>
</div>
<div className="text-start py-0">
<p className="mb-0">
<strong>Mahajan</strong>
</p>
<small style={{ fontSize: "10px" }}>2 hour ago</small>
</div>
</div>
<p className="ms-6 mt-1">Stylized implementation of HTML’s element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hov </p>
</div> */}
{/* by login usrer */} <div className={` text-start py-0 `}>
{/* <div className="text-start"> <p className={`mb-0 text-${bgClass}`}>{fullName}</p>
<div className="li-wrapper d-flex justify-content-end align-items-start"> <p
<div className="avatar avatar-xs me-1"> className=" text-muted m-0 "
<span className="avatar-initial rounded-circle bg-label-success"> style={{ fontSize: "10px" }}
M >
</span>
</div> {moment.utc(data?.commentDate).local().fromNow()}
<div className"text-start py-0">
<p className="mb-0"> </p>
<strong>Pramod Mahajan</strong> </div>
</div>
<p className={`ms-6 text-start mb-0 text-body`}>
{data?.comment}
</p> </p>
<small style={{ fontSize: "10px" }}>2 hour ago</small> </li>
</div> );
</div> })}
<p className="ms-6 mt-1">Stylized implementation of HTML’s element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hov </p> </ul>
</div> */} <form onSubmit={handleSubmit(onSubmit)}>
<form onSubmit={handleSubmit(onSubmit)}> <textarea
<textarea {...register("comment")}
{...register("comment")} className="form-control"
className="form-control" id="exampleFormControlTextarea1"
id="exampleFormControlTextarea1" rows="1"
rows="1" placeholder="Enter comment"
placeholder="Enter comment" />
/> {errors.comment && (
{errors.comment && ( <div className="danger-text">{errors.comment.message}</div>
<div className="danger-text">{errors.comment.message}</div> )}
)} <div className="text-end my-1">
<div className="text-end my-1"> <button
<button type="button"
type="button" className="btn btn-sm btn-secondary"
className="btn btn-sm btn-secondary" onClick={closeModal}
onClick={closeModal} data-bs-dismiss="modal"
data-bs-dismiss="modal" >
> 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"> {loading ? "Sending..." : "Comment"}
{loading ? "Sending..." : "Comment"} </button>
</button> </div>
</div> </form>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>