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

Adding next and previous button hide and correction in filter logic.

Browse Source
This commit is contained in:
Kartik sharma 2025-07-05 21:59:18 +05:30
parent aebae577df
commit 4adfbc8e8e
1 changed files with 93 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/pages/Gallary/ImageGallary.jsx
View File

@ -10,6 +10,7 @@ import DateRangePicker from "../../components/common/DateRangePicker";
import eventBus from "../../services/eventBus";
const PAGE_SIZE = 10;
const SCROLL_THRESHOLD = 5; // Define how many images are visible before scroll buttons appear
const ImageGallery = () => {
const [images, setImages] = useState([]);
@ -17,6 +18,7 @@ const ImageGallery = () => {
const [hasMore, setHasMore] = useState(true);
const selectedProjectId = useSelector((store) => store.localVariables.projectId);
const { openModal } = useModal();
const [initialImageCache, setInitialImageCache] = useState([]);
const yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD');
@ -95,23 +97,41 @@ const ImageGallery = () => {
fetchImages(1, appliedFilters);
}, [selectedProjectId, appliedFilters]);
// ✅ 1. Define fetchImages first
const fetchImages = useCallback(async (page, filters) => {
if (!selectedProjectId) return;
try {
if (page === 1) setLoading(true);
else setLoadingMore(true);
if (page === 1) {
setLoading(true);
const noFiltersApplied = Object.values(filters).every(
(val) => val === null || (Array.isArray(val) && val.length === 0)
);
if (noFiltersApplied) {
setInitialImageCache([]); // Reset cache before fetching
}
} else {
setLoadingMore(true);
}
const res = await ImageGalleryAPI.ImagesGet(selectedProjectId, filters, page, PAGE_SIZE);
const newBatches = res.data || [];
const receivedCount = newBatches.length;
setImages((prevImages) => {
const uniqueNew = newBatches.filter(
(batch) => !prevImages.some((prev) => prev.batchId === batch.batchId)
const uniqueNewBatches = newBatches.filter(
(newBatch) => !prevImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
);
return [...prevImages, ...uniqueNew];
const updatedImages = [...prevImages, ...uniqueNewBatches];
const noFiltersApplied = Object.values(filters).every(
(val) => val === null || (Array.isArray(val) && val.length === 0)
);
if (page === 1 && noFiltersApplied) {
setInitialImageCache(updatedImages);
}
return updatedImages;
});
setHasMore(receivedCount === PAGE_SIZE);
@ -125,14 +145,19 @@ const ImageGallery = () => {
}
}, [selectedProjectId]);
// ✅ 2. THEN use fetchImages inside useEffect
const isNoFiltersApplied = (filters) =>
Object.values(filters).every(
(val) => val === null || (Array.isArray(val) && val.length === 0)
);
useEffect(() => {
const handleExternalEvent = (data) => {
if (selectedProjectId == data.projectId) {
setImages([]);
setPageNumber(1);
setHasMore(true);
fetchImages(1, appliedFilters); // Now safe
fetchImages(1, appliedFilters);
}
};
@ -141,7 +166,7 @@ const ImageGallery = () => {
return () => {
eventBus.off("image_gallery", handleExternalEvent);
};
}, [appliedFilters, fetchImages,selectedProjectId]);
}, [appliedFilters, fetchImages, selectedProjectId]);
useEffect(() => {
if (!loaderRef.current) return;
@ -174,7 +199,7 @@ const ImageGallery = () => {
}
}, [pageNumber, fetchImages, appliedFilters]);
const getUniqueValuesWithIds = useCallback((idKey, nameKey, dataArray = images) => {
const getUniqueValuesWithIds = useCallback((idKey, nameKey, dataArray = initialImageCache) => {
const map = new Map();
dataArray.forEach(batch => {
const id = batch[idKey];
@ -184,7 +209,8 @@ const ImageGallery = () => {
}
});
return Array.from(map.entries());
}, [images]);
}, [initialImageCache]);
const getUniqueUploadedByUsers = useCallback(() => {
const uniqueUsersMap = new Map();
@ -201,12 +227,13 @@ const ImageGallery = () => {
return Array.from(uniqueUsersMap.entries());
}, [images]);
const buildings = getUniqueValuesWithIds("buildingId", "buildingName");
const floors = getUniqueValuesWithIds("floorIds", "floorName");
const activities = getUniqueValuesWithIds("activityId", "activityName");
const workAreas = getUniqueValuesWithIds("workAreaId", "workAreaName");
const buildings = getUniqueValuesWithIds("buildingId", "buildingName", initialImageCache);
const floors = getUniqueValuesWithIds("floorId", "floorName", initialImageCache);
const activities = getUniqueValuesWithIds("activityId", "activityName", initialImageCache);
const workAreas = getUniqueValuesWithIds("workAreaId", "workAreaName", initialImageCache);
const uploadedByUsers = getUniqueUploadedByUsers();
const workCategories = getUniqueValuesWithIds("workCategoryId", "workCategoryName");
const workCategories = getUniqueValuesWithIds("workCategoryId", "workCategoryName", initialImageCache);
const toggleFilter = useCallback((type, itemId, itemName) => {
setSelectedFilters((prev) => {
@ -268,12 +295,32 @@ const ImageGallery = () => {
startDate: selectedFilters.startDate || null,
endDate: selectedFilters.endDate || null,
};
const areFiltersChanged = Object.keys(payload).some(key => {
const oldVal = appliedFilters[key];
const newVal = payload[key];
if (Array.isArray(oldVal) && Array.isArray(newVal)) {
if (oldVal.length !== newVal.length) return true;
const oldSet = new Set(oldVal);
const newSet = new Set(newVal);
if (oldSet.size !== newSet.size) return true;
for (const item of newSet) {
if (!oldSet.has(item)) return true;
}
return false;
}
return oldVal !== newVal;
});
if (areFiltersChanged) {
setAppliedFilters(payload);
setIsFilterPanelOpen(false);
setImages([]);
setPageNumber(1);
setHasMore(true);
}, [selectedFilters]);
}
}, [selectedFilters, appliedFilters]);
const handleClearAllFilters = useCallback(() => {
const initialStateSelected = {
@ -323,7 +370,7 @@ const ImageGallery = () => {
(appliedFilters.buildingIds === null ||
appliedFilters.buildingIds.includes(batch.buildingId)) &&
(appliedFilters.floorIds === null ||
appliedFilters.floorIds.includes(batch.floorIds)) &&
appliedFilters.floorIds.includes(batch.floorId)) &&
(appliedFilters.activityIds === null ||
appliedFilters.activityIds.includes(batch.activityId)) &&
(appliedFilters.workAreaIds === null ||
@ -422,9 +469,12 @@ const ImageGallery = () => {
const firstDoc = batch.documents[0];
const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""
}`.trim();
const date = moment(firstDoc?.uploadedAt).format("DD-MM-YYYY"); // Changed format to DD/MM/YYYY
const date = moment(firstDoc?.uploadedAt).format("DD-MM-YYYY");
const time = moment(firstDoc?.uploadedAt).format("hh:mm A");
// Determine if scroll buttons should be shown for this batch
const showScrollButtons = batch.documents.length > SCROLL_THRESHOLD;
return (
<div key={batch.batchId} className="grouped-section">
<div className="group-heading">
@ -464,18 +514,21 @@ const ImageGallery = () => {
</div>
<div className="image-group-wrapper">
{/* Render Left Scroll Button conditionally */}
{showScrollButtons && (
<button
className="scroll-arrow left-arrow"
onClick={() => scrollLeft(batch.batchId)}
>
&#8249;
</button>
)}
<div
className="image-group-horizontal"
ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
>
{batch.documents.map((doc, idx) => {
const hoverDate = moment(doc.uploadedAt).format("DD-MM-YYYY"); // Changed format to DD/MM/YYYY
const hoverDate = moment(doc.uploadedAt).format("DD-MM-YYYY");
const hoverTime = moment(doc.uploadedAt).format("hh:mm A");
return (
@ -508,12 +561,15 @@ const ImageGallery = () => {
);
})}
</div>
{/* Render Right Scroll Button conditionally */}
{showScrollButtons && (
<button
className="scroll-arrow right-arrow"
onClick={() => scrollRight(batch.batchId)}
>
&#8250;
</button>
)}
</div>
</div>
);