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

Merge pull request 'pramod_Task#213' (#100) from pramod_Task#213 into Issue_May_2W

Browse Source 
Reviewed-on: #100
This commit is contained in:
Vikas Nale 2025-05-12 09:18:29 +00:00
commit bea3661ce2
2 changed files with 102 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/css/default.css
View File

@ -189,3 +189,7 @@
text-align: left;
padding-left: 50px;
} */
.small-text{
font-size: 12px;
}

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

@ -27,15 +27,21 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
});
const containerRef = useRef(null);
const firstRender = useRef(true);
useEffect(() => {
setComment(commentsData?.comments);
}, [commentsData]);
// Scroll logic: scroll to bottom when new comments are added
useEffect(() => {
if (containerRef.current) {
if (!firstRender.current && containerRef.current) {
containerRef.current.scrollTop = containerRef.current.scrollHeight;
} else {
firstRender.current = false; // Mark the first render as complete
}
}, [comments]);
}, [comments]); // Run this when comments array is updated
const onSubmit = async (data) => {
let sendComment = {
@ -70,9 +76,10 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
// closeModal();
} catch (error) {
setloading(false);
showToast(error.response.data?.message || "Something wrong", "error");
showToast(error.response.data?.message || "Something went wrong", "error");
}
};
return (
<div
className="modal-dialog modal-lg modal-simple report-task-comments-modal mx-sm-auto mx-1"
@ -86,61 +93,56 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
onClick={closeModal}
aria-label="Close"
></button>
<p className="fs-6 text-dark text-start">
{`${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}`}
<p className="fs-6 text-dark text-start m-0">Activity Summary</p>
<p className="small-text text-start my-2">
{comments && comments[0]?.comment}
</p>
<p className="fw-bold my-2 text-start">
Assigned By :
<span className=" ms-2">
{commentsData?.assignedBy.firstName +
" " +
commentsData?.assignedBy.lastName}
</span>{" "}
</p>
<ul
className="list-grouph px-0 mx-0 overflow-auto"
ref={containerRef}
style={{ maxHeight: "400px" }}
>
{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 className="avatar avatar-xs me-1">
<span
className={`avatar-initial rounded-circle bg-label-primary}`}
>
{`${data?.employee?.firstName?.slice(
0,
1
)} ${data?.employee?.lastName?.slice(0, 1)}`}
</span>
</div>
<p className="fw-bold my-2 text-start">
Loaction :
<span className="fw-normal ms-2 text-start">
{`${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>
<p className="fw-bold my-2 text-start">
Planned Work: {commentsData?.plannedTask}
</p>
<p className="fw-bold my-2 text-start">
{" "}
Completed Work : {commentsData?.completedTask}
</p>
<div className="d-flex align-items-center flex-wrap">
<p className="fw-bold text-start m-0 me-1">Team:</p>
<div className="d-flex flex-wrap align-items-center gap-2">
{commentsData?.teamMembers?.map((member, idx) => (
<span key={idx} className="d-flex align-items-center">
<Avatar
firstName={member?.firstName}
lastName={member?.lastName}
size="xs"
/>
{member?.firstName + " " + member?.lastName}
</span>
))}
</div>
</div>
<div className={` text-start py-0 `}>
<p className={`mb-0 text-${bgClass}`}>{fullName}</p>
<p
className=" text-muted m-0 "
style={{ fontSize: "10px" }}
>
{moment.utc(data?.commentDate).local().fromNow()}
</p>
</div>
</div>
<p className={`ms-6 text-start mb-0 text-body`}>
{data?.comment}
</p>
</li>
);
})}
</ul>
<form onSubmit={handleSubmit(onSubmit)}>
<form onSubmit={handleSubmit(onSubmit)} className="text-start">
<label className="fw-bold text-start my-1">Add comment :</label>
<textarea
{...register("comment")}
className="form-control"
@ -165,6 +167,47 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
</button>
</div>
</form>
<ul
className="list-group px-0 mx-0 overflow-auto border-0"
// ref={containerRef} // auto scroll according data
style={{ maxHeight: "200px" }}
>
{comments &&
comments
?.slice()
.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`}
>
<div className="avatar avatar-xs me-1">
<span
className={`avatar-initial rounded-circle bg-label-primary`}
>
{`${data?.employee?.firstName?.slice(0, 1)} ${data?.employee?.lastName?.slice(0, 1)}`}
</span>
</div>
<div className={`text-start py-0`}>
<p className={`mb-0 text-${bgClass}`}>{fullName}</p>
<p className="text-muted m-0" style={{ fontSize: "10px" }}>
{moment.utc(data?.commentDate).local().fromNow()}
</p>
</div>
</div>
<p className={`ms-6 text-start mb-0 text-body`}>{data?.comment}</p>
</li>
);
})}
</ul>
</div>
</div>
</div>