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

Integrating api for imageGallery.

Browse Source
This commit is contained in:
Kartik Sharma 2025-09-23 16:17:28 +05:30
parent 1e25e2d1ad
commit c2bac4e640
3 changed files with 102 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/ImageGallery/ImageGalleryListView.jsx
View File

@ -9,7 +9,6 @@ const ImageGalleryListView = ({
hasNextPage,
loaderRef,
openModal,
SCROLL_THRESHOLD,
formatUTCToLocalTime,
moment,
}) => {
@ -19,18 +18,16 @@ const ImageGalleryListView = ({
useEffect(() => {
const updateThreshold = () => {
if (window.innerWidth >= 1400) setScrollThreshold(6); // xl screens
else if (window.innerWidth >= 992) setScrollThreshold(5); // lg
else if (window.innerWidth >= 768) setScrollThreshold(4); // md
else setScrollThreshold(3); // sm & xs
if (window.innerWidth >= 1400) setScrollThreshold(6);
else if (window.innerWidth >= 992) setScrollThreshold(5);
else if (window.innerWidth >= 768) setScrollThreshold(4);
else setScrollThreshold(3);
};
updateThreshold();
window.addEventListener("resize", updateThreshold);
return () => window.removeEventListener("resize", updateThreshold);
}, []);
const scrollLeft = useCallback(
(key) =>
imageGroupRefs.current[key]?.scrollBy({ left: -200, behavior: "smooth" }),
@ -42,25 +39,24 @@ const ImageGalleryListView = ({
[]
);
if (!images.length && !isLoading) {
return <p className="text-center text-muted mt-5">No images match the selected filters.</p>;
}
return (
<div className="main-content">
<div className="activity-section">
{isLoading ? (
<div className="text-center">
<p>Loading...</p>
</div>
) : images.length ? (
images.map((batch) => {
{images.map((batch) => {
if (!batch.documents?.length) return null; // skip empty batches
const doc = batch.documents[0];
const userName = `${doc.uploadedBy?.firstName || ""} ${doc.uploadedBy?.lastName || ""
}`.trim();
const userName = `${doc.uploadedBy?.firstName || ""} ${doc.uploadedBy?.lastName || ""}`.trim();
const date = formatUTCToLocalTime(doc.uploadedAt);
const hasArrows = batch.documents.length > scrollThreshold;
return (
<div key={batch.batchId} className="grouped-section">
<div className="group-heading">
{/* Uploader Info */}
<div className="d-flex align-items-center mb-1">
<Avatar
size="xs"
@ -74,7 +70,6 @@ const ImageGalleryListView = ({
</div>
</div>
{/* Location Info */}
<div className="location-line text-secondary">
<div className="d-flex align-items-center flex-wrap gap-1 text-secondary">
<span className="d-flex align-items-center">
@ -92,42 +87,30 @@ const ImageGalleryListView = ({
</span>
</div>
{batch.workCategoryName && (
<span className="badge bg-label-primary ms-2">
{batch.workCategoryName}
</span>
<span className="badge bg-label-primary ms-2">{batch.workCategoryName}</span>
)}
</div>
</div>
{/* Images */}
<div className="image-group-wrapper">
{hasArrows && (
<button
className="scroll-arrow left-arrow"
onClick={() => scrollLeft(batch.batchId)}
>
<button className="scroll-arrow left-arrow" onClick={() => scrollLeft(batch.batchId)}>
‹
</button>
)}
<div
className="image-group-horizontal"
ref={(el) =>
(imageGroupRefs.current[batch.batchId] = el)
}
ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
>
{batch.documents.map((d, i) => {
const hoverDate = moment(d.uploadedAt).format(
"DD MMMM, YYYY"
);
const hoverDate = moment(d.uploadedAt).format("DD MMMM, YYYY");
const hoverTime = moment(d.uploadedAt).format("hh:mm A");
return (
<div
key={d.id}
className="image-card"
onClick={() =>
openModal(<ImagePopup batch={batch} initialIndex={i} />)
}
onClick={() => openModal(<ImagePopup batch={batch} initialIndex={i} />)}
onMouseEnter={() => setHoveredImage(d)}
onMouseLeave={() => setHoveredImage(null)}
>
@ -136,15 +119,9 @@ const ImageGalleryListView = ({
</div>
{hoveredImage === d && (
<div className="image-hover-description">
<p>
<strong>Date:</strong> {hoverDate}
</p>
<p>
<strong>Time:</strong> {hoverTime}
</p>
<p>
<strong>Activity:</strong> {batch.activityName}
</p>
<p><strong>Date:</strong> {hoverDate}</p>
<p><strong>Time:</strong> {hoverTime}</p>
<p><strong>Activity:</strong> {batch.activityName}</p>
</div>
)}
</div>
@ -152,22 +129,14 @@ const ImageGalleryListView = ({
})}
</div>
{hasArrows && (
<button
className="scroll-arrow right-arrow"
onClick={() => scrollRight(batch.batchId)}
>
<i className="bx bx-chevron-right"></i>
<button className="scroll-arrow right-arrow" onClick={() => scrollRight(batch.batchId)}>
‹
</button>
)}
</div>
</div>
);
})
) : (
<p className="text-center text-muted mt-5">
No images match the selected filters.
</p>
)}
})}
<div ref={loaderRef}>
{isFetchingNextPage && hasNextPage && <p>Loading...</p>}

15
src/hooks/useImageGallery.js
View File

@ -89,16 +89,19 @@ import { useInfiniteQuery } from "@tanstack/react-query";
const PAGE_SIZE = 10;
const useImageGallery = (selectedProjectId, filters) => {
const hasFilters = filters && Object.values(filters).some(
value => Array.isArray(value) ? value.length > 0 : value !== null && value !== ""
const hasFilters =
filters &&
Object.values(filters).some((value) =>
Array.isArray(value) ? value.length > 0 : value !== null && value !== ""
);
return useInfiniteQuery({
queryKey: ["imageGallery", selectedProjectId, hasFilters ? filters : null],
enabled: !!selectedProjectId,
getNextPageParam: (lastPage, allPages) => {
if (!lastPage?.data?.length) return undefined;
return allPages.length + 1;
getNextPageParam: (lastPage) => {
const currentPage = lastPage?.data?.currentPage || 1;
const totalPages = lastPage?.data?.totalPages || 1;
return currentPage < totalPages ? currentPage + 1 : undefined;
},
queryFn: async ({ pageParam = 1 }) => {
const res = await ImageGalleryAPI.ImagesGet(
@ -107,7 +110,7 @@ const useImageGallery = (selectedProjectId, filters) => {
pageParam,
PAGE_SIZE
);
return res;
return res.data; // Important: use res.data to match API response
},
});
};

3
src/pages/ImageGallery/ImageGalleryPage.jsx
View File

@ -185,7 +185,8 @@ const ImageGalleryPage = () => {
}, [hasNextPage, isFetchingNextPage, isLoading, fetchNextPage]);
return (
<div className="container my-3">
<div className="container-fluid">
<Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Gallery" }]} />
{/* Card wrapper */}