pramod_Bug#87DailyTask #31
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import moment from "moment";
|
||||
import { useForm } from "react-hook-form";
|
||||
@ -6,6 +6,9 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { TasksRepository } from "../../repositories/TaskRepository";
|
||||
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({
|
||||
comment: z.string().min(1, "Comment cannot be empty"),
|
||||
@ -15,6 +18,7 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
const [loading, setloading] = useState(false);
|
||||
const { profile } = useProfile();
|
||||
const [comments, setComment] = useState([]);
|
||||
const [bgClass, setBgClass] = useState("");
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -24,10 +28,17 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
resolver: zodResolver(schema),
|
||||
});
|
||||
|
||||
const containerRef = useRef(null);
|
||||
useEffect(() => {
|
||||
setComment(commentsData?.comments);
|
||||
}, [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) => {
|
||||
let sendComment = {
|
||||
@ -35,117 +46,113 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
taskAllocationId: commentsData?.id,
|
||||
commentDate: new Date().toISOString(),
|
||||
};
|
||||
|
||||
try {
|
||||
setloading(true);
|
||||
// const resp = await TasksRepository.taskComments( sendComment );
|
||||
// console.timeLog( resp )
|
||||
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();
|
||||
setloading(false);
|
||||
showToast("Successfully Sent", "success");
|
||||
closeModal();
|
||||
} catch (err) {
|
||||
setloading(false);
|
||||
// closeModal();
|
||||
} catch (error) {
|
||||
setloading( false );
|
||||
console.log(error)
|
||||
showToast(error.response.data?.message || "Something wrong", "error");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<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"
|
||||
>
|
||||
<div className="modal-content">
|
||||
<div className="modal-body px-1">
|
||||
<div className="modal-body p-sm-4 p-0">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={closeModal}
|
||||
aria-label="Close"
|
||||
></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>
|
||||
|
||||
{
|
||||
comments && comments.map( ( data ) =>
|
||||
(
|
||||
<div className="text-start" key={data.id}>
|
||||
<div class={`li-wrapper d-flex justify-content-${isLoggedUser(data?.employee?.id) ? "end":"start"} align-items-start`}>
|
||||
<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 class="avatar avatar-xs me-1">
|
||||
<span class="avatar-initial rounded-circle bg-label-success">
|
||||
{data?.employee?.firstName.slice(0,1)}
|
||||
<span class={`avatar-initial rounded-circle bg-label-primary}`}>
|
||||
{`${data?.employee?.firstName.slice(0,1)} ${data?.employee?.lastName.slice(0,1)}`}
|
||||
</span>
|
||||
</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">
|
||||
<div className="li-wrapper d-flex justify-content-end 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>Pramod Mahajan</strong>
|
||||
<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>
|
||||
<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> */}
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<textarea
|
||||
{...register("comment")}
|
||||
className="form-control"
|
||||
id="exampleFormControlTextarea1"
|
||||
rows="1"
|
||||
placeholder="Enter 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">
|
||||
{loading ? "Sending..." : "Comment"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<textarea
|
||||
{...register("comment")}
|
||||
className="form-control"
|
||||
id="exampleFormControlTextarea1"
|
||||
rows="1"
|
||||
placeholder="Enter 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">
|
||||
{loading ? "Sending..." : "Comment"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -18,7 +18,7 @@ const TaskPlannng = () => {
|
||||
const {projects,loading:project_listLoader,error:projects_error} = useProjects();
|
||||
const dispatch = useDispatch();
|
||||
const selectedProject = useSelector((store)=>store.localVariables.projectId);
|
||||
|
||||
console.log(selectedProject)
|
||||
|
||||
const [project, setProject] = useState(null);
|
||||
const [projectDetails, setProjectDetails] = useState(null);
|
||||
@ -52,13 +52,13 @@ const TaskPlannng = () => {
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const project_cache = getCachedData(`projectinfo-${selectedProject}`);
|
||||
if (!project_cache) {
|
||||
const project_cache = getCachedData("projectInfo");
|
||||
if (!project_cache || !project_cache.projectId == selectedProject) {
|
||||
ProjectRepository.getProjectByprojectId(selectedProject)
|
||||
.then((response) => {
|
||||
setProjectDetails(response);
|
||||
setProject(response);
|
||||
cacheData(`projectinfo-${projectId}`, response);
|
||||
setProject( response );
|
||||
cacheData("projectInfo",{data:response.data,projectId:selectedProject})
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
|
||||
@ -18,4 +18,34 @@ export const ProjectStatus =(statusId)=>{
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// for different color for each user
|
||||
export function hashString(str) {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
const char = str.charCodeAt(i);
|
||||
hash = (hash << 5) - hash + char;
|
||||
}
|
||||
return hash;
|
||||
}
|
||||
|
||||
// Map a hash value to a Bootstrap background class
|
||||
export function getBgClassFromHash(str) {
|
||||
const bgClasses = [
|
||||
"primary",
|
||||
"secondary",
|
||||
"success",
|
||||
"danger",
|
||||
"warning",
|
||||
"info",
|
||||
"dark",
|
||||
"light",
|
||||
];
|
||||
|
||||
const hash = hashString(str);
|
||||
const index = Math.abs(hash % bgClasses.length);
|
||||
return bgClasses[index];
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user