91 lines
3.6 KiB
JavaScript
91 lines
3.6 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import "./ImagePop.css";
|
|
import { useModal } from "./ModalContext";
|
|
import moment from "moment";
|
|
import {formatUTCToLocalTime} from "../../utils/dateUtils";
|
|
|
|
const ImagePop = ({ batch, initialIndex = 0 }) => {
|
|
const { closeModal } = useModal();
|
|
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
|
|
|
// Effect to update currentIndex if the initialIndex prop changes
|
|
useEffect(() => {
|
|
setCurrentIndex(initialIndex);
|
|
}, [initialIndex, batch]);
|
|
|
|
// If no batch or documents are provided, don't render
|
|
if (!batch || !batch.documents || batch.documents.length === 0) return null;
|
|
|
|
// Get the current image document from the batch's documents array
|
|
const image = batch.documents[currentIndex];
|
|
|
|
// Fallback if for some reason the image at the current index doesn't exist
|
|
if (!image) return null;
|
|
|
|
// Format details for display from the individual image document
|
|
const fullName = `${image.uploadedBy?.firstName || ""} ${
|
|
image.uploadedBy?.lastName || ""
|
|
}`.trim();
|
|
const date = formatUTCToLocalTime(image.uploadedAt);
|
|
|
|
// Location and category details from the 'batch' object (as previously corrected)
|
|
const buildingName = batch.buildingName;
|
|
const floorName = batch.floorName;
|
|
const workAreaName = batch.workAreaName;
|
|
const activityName = batch.activityName;
|
|
const batchComment = batch.comment;
|
|
|
|
// Handler for navigating to the previous image
|
|
const handlePrev = () => {
|
|
setCurrentIndex((prevIndex) => Math.max(0, prevIndex - 1));
|
|
};
|
|
|
|
// Handler for navigating to the next image
|
|
const handleNext = () => {
|
|
setCurrentIndex((prevIndex) =>
|
|
Math.min(batch.documents.length - 1, prevIndex + 1)
|
|
);
|
|
};
|
|
|
|
// Determine if previous/next buttons should be enabled/visible
|
|
const hasPrev = currentIndex > 0;
|
|
const hasNext = currentIndex < batch.documents.length - 1;
|
|
|
|
return (
|
|
<div className="image-modal-overlay">
|
|
<div className="image-modal-content">
|
|
|
|
<i className='bx bx-x close-button' onClick={closeModal}></i>
|
|
|
|
{hasPrev && (
|
|
<button className="nav-button prev-button" onClick={handlePrev}>
|
|
<i className='bx bx-chevron-left'></i>
|
|
</button>
|
|
)}
|
|
|
|
<div className="image-container">
|
|
<img src={image.url} alt="Preview" className="modal-image" />
|
|
</div>
|
|
|
|
{hasNext && (
|
|
<button className="nav-button next-button" onClick={handleNext}>
|
|
<i className='bx bx-chevron-right'></i>
|
|
</button>
|
|
)}
|
|
|
|
<div className="image-details">
|
|
|
|
<div className="flex alig-items-center"> <i className='bx bxs-user'></i> <span className="text-muted">Uploaded By : </span> <span className="text-secondary">{fullName}</span></div>
|
|
<div className="flex alig-items-center"> <i class='bx bxs-calendar' ></i> <span className="text-muted">Date : </span> <span className="text-secondary"> {date}</span></div>
|
|
<div className="flex alig-items-center"> <i class='bx bx-map' ></i> <span className="text-muted">Uploaded By : </span> <span className="text-secondary">{buildingName} <i className='bx bx-chevron-right'></i> {floorName} <i className='bx bx-chevron-right'></i>
|
|
{workAreaName || "Unknown"} <i className='bx bx-chevron-right'></i> {activityName}</span></div>
|
|
<div className="flex alig-items-center"> <i className='bx bx-comment-dots'></i> <span className="text-muted">comment : </span> <span className="text-secondary">{batchComment}</span></div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ImagePop; |