From 9eb8418330e4c27a056962ec4c56807b712488a4 Mon Sep 17 00:00:00 2001 From: Kartik sharma Date: Sun, 6 Jul 2025 13:37:42 +0530 Subject: [PATCH] Change the design of Filter drower. --- src/pages/Gallary/ImageGallary.jsx | 227 +++++++++++++---------------- src/pages/Gallary/ImageGallery.css | 6 +- 2 files changed, 101 insertions(+), 132 deletions(-) diff --git a/src/pages/Gallary/ImageGallary.jsx b/src/pages/Gallary/ImageGallary.jsx index e12ad6c7..70f3cf9c 100644 --- a/src/pages/Gallary/ImageGallary.jsx +++ b/src/pages/Gallary/ImageGallary.jsx @@ -10,15 +10,15 @@ 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 SCROLL_THRESHOLD = 5; const ImageGallery = () => { const [images, setImages] = useState([]); + const [allImagesData, setAllImagesData] = useState([]); const [pageNumber, setPageNumber] = useState(1); 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'); @@ -60,9 +60,9 @@ const ImageGallery = () => { const [loadingMore, setLoadingMore] = useState(false); const imageGroupRefs = useRef({}); + const loaderRef = useRef(null); const filterPanelRef = useRef(null); const filterButtonRef = useRef(null); - const loaderRef = useRef(null); useEffect(() => { const handleClickOutside = (event) => { @@ -75,15 +75,22 @@ const ImageGallery = () => { setIsFilterPanelOpen(false); } }; - document.addEventListener("mousedown", handleClickOutside); + + if (isFilterPanelOpen) { + document.addEventListener("mousedown", handleClickOutside); + } else { + document.removeEventListener("mousedown", handleClickOutside); + } + return () => { document.removeEventListener("mousedown", handleClickOutside); }; - }, []); + }, [isFilterPanelOpen]); useEffect(() => { if (!selectedProjectId) { setImages([]); + setAllImagesData([]); setLoading(false); setHasMore(false); return; @@ -94,7 +101,8 @@ const ImageGallery = () => { setHasMore(true); setLoading(true); - fetchImages(1, appliedFilters); + setAllImagesData([]); + fetchImages(1, appliedFilters, true); }, [selectedProjectId, appliedFilters]); const fetchImages = useCallback(async (page, filters) => { @@ -103,13 +111,6 @@ const ImageGallery = () => { try { 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); } @@ -122,22 +123,23 @@ const ImageGallery = () => { const uniqueNewBatches = newBatches.filter( (newBatch) => !prevImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId) ); - const updatedImages = [...prevImages, ...uniqueNewBatches]; + return [...prevImages, ...uniqueNewBatches]; + }); - const noFiltersApplied = Object.values(filters).every( - (val) => val === null || (Array.isArray(val) && val.length === 0) + setAllImagesData((prevAllImages) => { + const uniqueAllImages = newBatches.filter( + (newBatch) => !prevAllImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId) ); - if (page === 1 && noFiltersApplied) { - setInitialImageCache(updatedImages); - } - - return updatedImages; + return [...prevAllImages, ...uniqueAllImages]; }); setHasMore(receivedCount === PAGE_SIZE); } catch (err) { console.error("Error fetching images:", err); - setImages([]); + if (page === 1) { + setImages([]); + setAllImagesData([]); + } setHasMore(false); } finally { setLoading(false); @@ -145,19 +147,14 @@ const ImageGallery = () => { } }, [selectedProjectId]); - const isNoFiltersApplied = (filters) => - Object.values(filters).every( - (val) => val === null || (Array.isArray(val) && val.length === 0) - ); - - useEffect(() => { const handleExternalEvent = (data) => { - if (selectedProjectId == data.projectId) { + if (selectedProjectId === data.projectId) { setImages([]); + setAllImagesData([]); setPageNumber(1); setHasMore(true); - fetchImages(1, appliedFilters); + fetchImages(1, appliedFilters, true); } }; @@ -199,22 +196,28 @@ const ImageGallery = () => { } }, [pageNumber, fetchImages, appliedFilters]); - const getUniqueValuesWithIds = useCallback((idKey, nameKey, dataArray = initialImageCache) => { + const getUniqueValuesWithIds = useCallback((idKey, nameKey) => { const map = new Map(); - dataArray.forEach(batch => { - const id = batch[idKey]; + allImagesData.forEach(batch => { + let id; + if (idKey === "floorIds") { + id = batch.floorIds; + } else { + id = batch[idKey]; + } + const name = batch[nameKey]; + if (id && name && !map.has(id)) { map.set(id, name); } }); return Array.from(map.entries()); - }, [initialImageCache]); - + }, [allImagesData]); const getUniqueUploadedByUsers = useCallback(() => { const uniqueUsersMap = new Map(); - images.forEach(batch => { + allImagesData.forEach(batch => { batch.documents.forEach(doc => { if (doc.uploadedBy && doc.uploadedBy.id) { const fullName = `${doc.uploadedBy.firstName || ""} ${doc.uploadedBy.lastName || ""}`.trim(); @@ -225,15 +228,14 @@ const ImageGallery = () => { }); }); return Array.from(uniqueUsersMap.entries()); - }, [images]); + }, [allImagesData]); - 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 buildings = getUniqueValuesWithIds("buildingId", "buildingName"); + const floors = getUniqueValuesWithIds("floorIds", "floorName"); + const activities = getUniqueValuesWithIds("activityId", "activityName"); + const workAreas = getUniqueValuesWithIds("workAreaId", "workAreaName"); const uploadedByUsers = getUniqueUploadedByUsers(); - const workCategories = getUniqueValuesWithIds("workCategoryId", "workCategoryName", initialImageCache); + const workCategories = getUniqueValuesWithIds("workCategoryId", "workCategoryName"); const toggleFilter = useCallback((type, itemId, itemName) => { setSelectedFilters((prev) => { @@ -310,18 +312,21 @@ const ImageGallery = () => { } return false; } + if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) { + return false; + } return oldVal !== newVal; }); if (areFiltersChanged) { - setAppliedFilters(payload); - setImages([]); - setPageNumber(1); - setHasMore(true); + setAppliedFilters(payload); + setImages([]); + setPageNumber(1); + setHasMore(true); } + // Removed setIsFilterPanelOpen(false); to keep the drawer open }, [selectedFilters, appliedFilters]); - const handleClearAllFilters = useCallback(() => { const initialStateSelected = { building: [], @@ -351,40 +356,6 @@ const ImageGallery = () => { setHasMore(true); }, []); - const filteredBatches = images.filter((batch) => { - const firstDocUploadedAt = batch.documents[0]?.uploadedAt; - const uploadedAtMoment = firstDocUploadedAt ? moment(firstDocUploadedAt) : null; - - const startDateMoment = appliedFilters.startDate - ? moment(appliedFilters.startDate) - : null; - const endDateMoment = appliedFilters.endDate - ? moment(appliedFilters.endDate) - : null; - - const isWithinDateRange = - (!startDateMoment || (uploadedAtMoment && uploadedAtMoment.isSameOrAfter(startDateMoment, "day"))) && - (!endDateMoment || (uploadedAtMoment && uploadedAtMoment.isSameOrBefore(endDateMoment, "day"))); - - const passesCategoryFilters = - (appliedFilters.buildingIds === null || - appliedFilters.buildingIds.includes(batch.buildingId)) && - (appliedFilters.floorIds === null || - appliedFilters.floorIds.includes(batch.floorId)) && - (appliedFilters.activityIds === null || - appliedFilters.activityIds.includes(batch.activityId)) && - (appliedFilters.workAreaIds === null || - appliedFilters.workAreaIds.includes(batch.workAreaId)) && - (appliedFilters.workCategoryIds === null || - appliedFilters.workCategoryIds.includes(batch.workCategoryId)); - - const passesUploadedByFilter = - appliedFilters.uploadedByIds === null || - batch.documents.some(doc => appliedFilters.uploadedByIds.includes(doc.uploadedBy?.id)); - - return isWithinDateRange && passesCategoryFilters && passesUploadedByFilter; - }); - const scrollLeft = useCallback((key) => { imageGroupRefs.current[key]?.scrollBy({ left: -200, behavior: "smooth" }); }, []); @@ -430,7 +401,15 @@ const ImageGallery = () => { {!collapsedFilters[type] && (
{type === "dateRange" ? ( - null +
+ +
) : ( items.map((item) => { const itemId = item[0]; @@ -457,22 +436,33 @@ const ImageGallery = () => { ); return ( -
+
+ +
{loading && pageNumber === 1 ? (
- ) : filteredBatches.length > 0 ? ( - filteredBatches.map((batch) => { + ) : images.length > 0 ? ( + images.map((batch) => { const firstDoc = batch.documents[0]; const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || "" }`.trim(); 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 ( @@ -514,7 +504,6 @@ const ImageGallery = () => {
- {/* Render Left Scroll Button conditionally */} {showScrollButtons && (
- {/* Render Right Scroll Button conditionally */} {showScrollButtons && (
-
- -
-
-
toggleCollapse('dateRange')}> - Date Range - - - {collapsedFilters.dateRange ? '+' : '-'} - -
- {!collapsedFilters.dateRange && ( -
- -
- )} -
+
+
+
+ Filters +
+ +
+
+ {renderFilterCategory("Date Range", [], "dateRange")} {renderFilterCategory("Building", buildings, "building")} {renderFilterCategory("Floor", floors, "floor")} {renderFilterCategory("Work Area", workAreas, "workArea")} @@ -633,7 +604,7 @@ const ImageGallery = () => { {renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")} {renderFilterCategory("Work Category", workCategories, "workCategory")} -
+
diff --git a/src/pages/Gallary/ImageGallery.css b/src/pages/Gallary/ImageGallery.css index 25567dda..4f7ada69 100644 --- a/src/pages/Gallary/ImageGallery.css +++ b/src/pages/Gallary/ImageGallery.css @@ -1,7 +1,5 @@ -/* ImageGallery.css */ .gallery-container { display: grid; - grid-template-columns: 1fr 50px; gap: 4px; padding: 25px; font-family: sans-serif; @@ -69,7 +67,7 @@ transition: background-color 0.2s ease, box-shadow 0.2s ease, width 0.3s ease-in-out, height 0.3s ease-in-out, border-radius 0.3s ease-in-out, padding 0.3s ease-in-out; position: absolute; - top: 0; + top: 250px; right: 0; height: 40px; width: 40px; @@ -544,4 +542,4 @@ hr { .datepicker { margin-right: 135px; margin-top: 6px; -} \ No newline at end of file +}