added attachment views
This commit is contained in:
Pramod Mahajan
parent
6b9670b942
commit
3ed5999f29
@ -8,6 +8,7 @@ import showToast from "../../services/toastService";
|
|||||||
import Avatar from "../common/Avatar";
|
import Avatar from "../common/Avatar";
|
||||||
import { getBgClassFromHash } from "../../utils/projectStatus";
|
import { getBgClassFromHash } from "../../utils/projectStatus";
|
||||||
import { cacheData, getCachedData } from "../../slices/apiDataManager";
|
import { cacheData, getCachedData } from "../../slices/apiDataManager";
|
||||||
|
import ImagePreview from "../common/ImagePreview";
|
||||||
|
|
||||||
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"),
|
||||||
@ -40,7 +41,9 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const taskList = getCachedData("taskList");
|
const taskList = getCachedData("taskList");
|
||||||
if (taskList && taskList.data && commentsData?.id) {
|
if (taskList && taskList.data && commentsData?.id) {
|
||||||
const currentTask = taskList.data.find(task => task.id === commentsData.id);
|
const currentTask = taskList.data.find(
|
||||||
|
(task) => task.id === commentsData.id
|
||||||
|
);
|
||||||
if (currentTask && currentTask.comments) {
|
if (currentTask && currentTask.comments) {
|
||||||
setComment(currentTask.comments);
|
setComment(currentTask.comments);
|
||||||
} else {
|
} else {
|
||||||
@ -99,157 +102,170 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
|||||||
showToast("Successfully Sent", "success");
|
showToast("Successfully Sent", "success");
|
||||||
} 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"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="p-1">
|
||||||
className="modal-dialog modal-lg modal-simple report-task-comments-modal mx-sm-auto mx-1"
|
<div className="modal-body p-sm-4 p-0">
|
||||||
role="document"
|
<h5 className=" text-center mb-2">Activity Summary</h5>
|
||||||
>
|
|
||||||
<div className="modal-content">
|
|
||||||
<div className="modal-body p-sm-4 p-0">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn-close"
|
|
||||||
onClick={closeModal}
|
|
||||||
aria-label="Close"
|
|
||||||
></button>
|
|
||||||
<h5 className=" text-center mb-2">
|
|
||||||
Activity Summary
|
|
||||||
</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>
|
||||||
|
|
||||||
<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>
|
||||||
|
|
||||||
<p className="fw-bold my-2 text-start">
|
<p className="fw-bold my-2 text-start">
|
||||||
Reported By :
|
Reported 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>
|
||||||
|
|
||||||
<p className="fw-bold my-2 text-start">
|
<p className="fw-bold my-2 text-start">
|
||||||
Location :
|
Location :
|
||||||
<span className="fw-normal ms-2 text-start">
|
<span className="fw-normal ms-2 text-start">
|
||||||
{`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
|
{`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
|
||||||
<i className="bx bx-chevron-right"></i>{" "}
|
<i className="bx bx-chevron-right"></i>{" "}
|
||||||
{`${commentsData?.workItem?.workArea?.floor?.floorName} `}{" "}
|
{`${commentsData?.workItem?.workArea?.floor?.floorName} `}{" "}
|
||||||
<i className="bx bx-chevron-right"></i>
|
<i className="bx bx-chevron-right"></i>
|
||||||
{`${commentsData?.workItem?.workArea?.areaName}`}
|
{`${commentsData?.workItem?.workArea?.areaName}`}
|
||||||
<i className="bx bx-chevron-right"></i>
|
<i className="bx bx-chevron-right"></i>
|
||||||
{` ${commentsData?.workItem?.activityMaster?.activityName}`}
|
{` ${commentsData?.workItem?.activityMaster?.activityName}`}
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="fw-bold my-2 text-start">
|
<p className="fw-bold my-2 text-start">
|
||||||
Planned Work: {commentsData?.plannedTask}{" "}
|
Planned Work: {commentsData?.plannedTask}{" "}
|
||||||
{
|
{commentsData?.workItem?.activityMaster?.unitOfMeasurement}
|
||||||
commentsData?.workItem?.activityMaster
|
</p>
|
||||||
?.unitOfMeasurement
|
<p className="fw-bold my-2 text-start">
|
||||||
}
|
{" "}
|
||||||
</p>
|
Completed Work : {commentsData?.completedTask}{" "}
|
||||||
<p className="fw-bold my-2 text-start">
|
{commentsData?.workItem?.activityMaster?.unitOfMeasurement}
|
||||||
{" "}
|
</p>
|
||||||
Completed Work : {commentsData?.completedTask}{" "}
|
<div className="d-flex align-items-center flex-wrap">
|
||||||
{
|
<p className="fw-bold text-start m-0 me-1">Team :</p>
|
||||||
commentsData?.workItem?.activityMaster
|
<div className="d-flex flex-wrap align-items-center gap-2">
|
||||||
?.unitOfMeasurement
|
{commentsData?.teamMembers?.map((member, idx) => (
|
||||||
}
|
<span key={idx} className="d-flex align-items-center">
|
||||||
</p>
|
<Avatar
|
||||||
<div className="d-flex align-items-center flex-wrap">
|
firstName={member?.firstName}
|
||||||
<p className="fw-bold text-start m-0 me-1">Team :</p>
|
lastName={member?.lastName}
|
||||||
<div className="d-flex flex-wrap align-items-center gap-2">
|
size="xs"
|
||||||
{commentsData?.teamMembers?.map((member, idx) => (
|
/>
|
||||||
<span key={idx} className="d-flex align-items-center">
|
{member?.firstName + " " + member?.lastName}
|
||||||
<Avatar
|
</span>
|
||||||
firstName={member?.firstName}
|
))}
|
||||||
lastName={member?.lastName}
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
{member?.firstName + " " + member?.lastName}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="text-start">
|
|
||||||
<label className="fw-bold text-start my-1">Add comment :</label>
|
|
||||||
<textarea
|
|
||||||
{...register("comment")}
|
|
||||||
className="form-control"
|
|
||||||
id="exampleFormControlTextarea1"
|
|
||||||
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" disabled={loading}>
|
|
||||||
{loading ? "Sending..." : "Comment"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<ul
|
|
||||||
className="list-group px-0 mx-0 overflow-auto border-0"
|
|
||||||
ref={containerRef}
|
|
||||||
>
|
|
||||||
{comments &&
|
|
||||||
comments
|
|
||||||
?.slice()
|
|
||||||
.reverse()
|
|
||||||
.map((data, idx) => {
|
|
||||||
const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
|
|
||||||
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-center 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={`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()}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className={`ms-6 text-start mb-0 text-body`}>{data?.comment}</p>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
{commentsData?.reportedPreSignedUrls?.length > 0 && (
|
||||||
|
<div className=" text-start">
|
||||||
|
<p className="fw-bold m-0">Attachment</p>
|
||||||
|
<ImagePreview
|
||||||
|
IsReported={true}
|
||||||
|
images={commentsData?.reportedPreSignedUrls}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)} className="text-start">
|
||||||
|
<label className="fw-bold text-start my-1">Add comment :</label>
|
||||||
|
<textarea
|
||||||
|
{...register("comment")}
|
||||||
|
className="form-control"
|
||||||
|
id="exampleFormControlTextarea1"
|
||||||
|
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"
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? "Sending..." : "Comment"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<ul
|
||||||
|
className="list-group px-0 mx-0 overflow-auto border-0"
|
||||||
|
ref={containerRef}
|
||||||
|
>
|
||||||
|
{comments &&
|
||||||
|
comments
|
||||||
|
?.slice()
|
||||||
|
.reverse()
|
||||||
|
.map((data, idx) => {
|
||||||
|
const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
|
||||||
|
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-center 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={`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()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className={`ms-6 text-start mb-0 text-body`}>
|
||||||
|
{data?.comment}
|
||||||
|
</p>
|
||||||
|
{data?.preSignedUrls?.length > 0 && (
|
||||||
|
<div className="ps-6 text-start">
|
||||||
|
<small className="">Attachment</small>
|
||||||
|
<ImagePreview images={data?.preSignedUrls} IsReported={true} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
66
src/components/common/ImagePreview.jsx
Normal file
66
src/components/common/ImagePreview.jsx
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import "./ImagePreviewstyle.css";
|
||||||
|
import GlobalModel from "./GlobalModel";
|
||||||
|
|
||||||
|
const ImagePreview = ({ images = [], IsReported = false }) => {
|
||||||
|
const [selectedImage, setSelectedImage] = useState(null);
|
||||||
|
|
||||||
|
const handleOpen = (imgSrc) => {
|
||||||
|
setSelectedImage(imgSrc);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setSelectedImage(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{IsReported ? (
|
||||||
|
<div className="d-flex flex-wrap gap-2">
|
||||||
|
{images.map((img, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="img-container position-relative"
|
||||||
|
onClick={() => handleOpen(img)}
|
||||||
|
>
|
||||||
|
<img src={img} alt={`thumb-${index}`} className="img-thumbnail" />
|
||||||
|
|
||||||
|
<div className="eye-overlay d-flex justify-content-center align-items-center">
|
||||||
|
<i className="fa-solid fa-eye fs-6"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="d-flex flex-wrap gap-2">
|
||||||
|
{images.map((img, index) => (
|
||||||
|
<div key={index} className="" onClick={() => handleOpen(img)}>
|
||||||
|
{/* <img src={img} alt={`thumb-${ index }`} className="img-thumbnail" /> */}
|
||||||
|
<i className="fa-regular fa-image fs-3 cursor-pointer"></i>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selectedImage && (
|
||||||
|
<GlobalModel
|
||||||
|
isOpen={selectedImage}
|
||||||
|
size="lg"
|
||||||
|
dialogClass="modal-dialog-centered"
|
||||||
|
closeModal={() => setSelectedImage(null)}
|
||||||
|
>
|
||||||
|
<div className="mt-3 img-preview" >
|
||||||
|
<img
|
||||||
|
src={selectedImage}
|
||||||
|
alt="Previe Image"
|
||||||
|
className="w-100"
|
||||||
|
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</GlobalModel>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ImagePreview;
|
||||||
50
src/components/common/ImagePreviewstyle.css
Normal file
50
src/components/common/ImagePreviewstyle.css
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
.img-container {
|
||||||
|
width: 70px; /* or whatever size you want */
|
||||||
|
height: 30px;
|
||||||
|
position: relative; /* to contain the absolute overlay */
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-container img.img-thumbnail {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0,0,0,0.4);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* center icon */
|
||||||
|
.eye-overlay i {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fade in on hover */
|
||||||
|
.img-container:hover .eye-overlay {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto; /* enable pointer events on hover */
|
||||||
|
}
|
||||||
|
.iconImage{
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-preview {
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
background-color: #E9E9E9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@ -10,6 +10,7 @@ import DateRangePicker from "../../components/common/DateRangePicker";
|
|||||||
import { useSearchParams } from "react-router-dom";
|
import { useSearchParams } from "react-router-dom";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import FilterIcon from "../../components/common/FilterIcon"; // Import the FilterIcon component
|
import FilterIcon from "../../components/common/FilterIcon"; // Import the FilterIcon component
|
||||||
|
import GlobalModel from "../../components/common/GlobalModel";
|
||||||
|
|
||||||
const DailyTask = () => {
|
const DailyTask = () => {
|
||||||
const [searchParams] = useSearchParams();
|
const [searchParams] = useSearchParams();
|
||||||
@ -170,19 +171,14 @@ const DailyTask = () => {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
{isModalOpenComment && (
|
||||||
className={`modal fade ${isModalOpenComment ? "show d-block" : ""}`}
|
<GlobalModel isOpen={isModalOpenComment} size="lg" closeModal={()=>setIsModalOpenComment(false)}>
|
||||||
tabIndex="-1"
|
<ReportTaskComments
|
||||||
role="dialog"
|
|
||||||
style={{ display: isModalOpenComment ? "block" : "none" }}
|
|
||||||
aria-hidden={!isModalOpenComment}
|
|
||||||
>
|
|
||||||
<ReportTaskComments
|
|
||||||
commentsData={comments}
|
commentsData={comments}
|
||||||
closeModal={closeCommentModal}
|
closeModal={closeCommentModal}
|
||||||
/>
|
/>
|
||||||
|
</GlobalModel>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
<div className="container-xxl flex-grow-1 container-p-y">
|
<div className="container-xxl flex-grow-1 container-p-y">
|
||||||
<Breadcrumb
|
<Breadcrumb
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user