Integrated React-query in Gallery for handling api calling #264
@ -2,84 +2,115 @@ import { useState, useCallback } from "react";
|
||||
// import { ImageGalleryAPI } from "../repositories/ImageGalleyRepository";
|
||||
import { ImageGalleryAPI } from "../repositories/ImageGalleryAPI";
|
||||
|
||||
// const PAGE_SIZE = 10;
|
||||
|
||||
// const useImageGallery = (selectedProjectId) => {
|
||||
// const [images, setImages] = useState([]);
|
||||
// const [allImagesData, setAllImagesData] = useState([]);
|
||||
// const [pageNumber, setPageNumber] = useState(1);
|
||||
// const [hasMore, setHasMore] = useState(true);
|
||||
// const [loading, setLoading] = useState(false);
|
||||
// const [loadingMore, setLoadingMore] = useState(false);
|
||||
|
||||
// const fetchImages = useCallback(async (page = 1, filters = {}, reset = false) => {
|
||||
// if (!selectedProjectId) return;
|
||||
|
||||
// try {
|
||||
// if (page === 1) {
|
||||
// setLoading(true);
|
||||
// } else {
|
||||
// setLoadingMore(true);
|
||||
// }
|
||||
|
||||
// const res = await ImageGalleryAPI.ImagesGet(
|
||||
// selectedProjectId,
|
||||
// filters,
|
||||
// page,
|
||||
// PAGE_SIZE
|
||||
// );
|
||||
|
||||
// const newBatches = res.data || [];
|
||||
// const receivedCount = newBatches.length;
|
||||
|
||||
// setImages((prev) => {
|
||||
// if (page === 1 || reset) return newBatches;
|
||||
// const uniqueNew = newBatches.filter(
|
||||
// (batch) => !prev.some((b) => b.batchId === batch.batchId)
|
||||
// );
|
||||
// return [...prev, ...uniqueNew];
|
||||
// });
|
||||
|
||||
// setAllImagesData((prev) => {
|
||||
// if (page === 1 || reset) return newBatches;
|
||||
// const uniqueAll = newBatches.filter(
|
||||
// (batch) => !prev.some((b) => b.batchId === batch.batchId)
|
||||
// );
|
||||
// return [...prev, ...uniqueAll];
|
||||
// });
|
||||
|
||||
// setHasMore(receivedCount === PAGE_SIZE);
|
||||
// } catch (error) {
|
||||
// console.error("Error fetching images:", error);
|
||||
// if (page === 1) {
|
||||
// setImages([]);
|
||||
// setAllImagesData([]);
|
||||
// }
|
||||
// setHasMore(false);
|
||||
// } finally {
|
||||
// setLoading(false);
|
||||
// setLoadingMore(false);
|
||||
// }
|
||||
// }, [selectedProjectId]);
|
||||
|
||||
// const resetGallery = useCallback(() => {
|
||||
// setImages([]);
|
||||
// setAllImagesData([]);
|
||||
// setPageNumber(1);
|
||||
// setHasMore(true);
|
||||
// }, []);
|
||||
|
||||
// return {
|
||||
// images,
|
||||
// allImagesData,
|
||||
// pageNumber,
|
||||
// setPageNumber,
|
||||
// hasMore,
|
||||
// loading,
|
||||
// loadingMore,
|
||||
// fetchImages,
|
||||
// resetGallery,
|
||||
// };
|
||||
// };
|
||||
|
||||
// export default useImageGallery;
|
||||
import { useInfiniteQuery } from "@tanstack/react-query";
|
||||
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
const useImageGallery = (selectedProjectId) => {
|
||||
const [images, setImages] = useState([]);
|
||||
const [allImagesData, setAllImagesData] = useState([]);
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
|
||||
const fetchImages = useCallback(async (page = 1, filters = {}, reset = false) => {
|
||||
if (!selectedProjectId) return;
|
||||
|
||||
try {
|
||||
if (page === 1) {
|
||||
setLoading(true);
|
||||
} else {
|
||||
setLoadingMore(true);
|
||||
}
|
||||
const useImageGallery = (selectedProjectId, filters) => {
|
||||
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;
|
||||
},
|
||||
queryFn: async ({ pageParam = 1 }) => {
|
||||
const res = await ImageGalleryAPI.ImagesGet(
|
||||
selectedProjectId,
|
||||
filters,
|
||||
page,
|
||||
hasFilters ? filters : undefined,
|
||||
pageParam,
|
||||
PAGE_SIZE
|
||||
);
|
||||
|
||||
const newBatches = res.data || [];
|
||||
const receivedCount = newBatches.length;
|
||||
|
||||
setImages((prev) => {
|
||||
if (page === 1 || reset) return newBatches;
|
||||
const uniqueNew = newBatches.filter(
|
||||
(batch) => !prev.some((b) => b.batchId === batch.batchId)
|
||||
);
|
||||
return [...prev, ...uniqueNew];
|
||||
});
|
||||
|
||||
setAllImagesData((prev) => {
|
||||
if (page === 1 || reset) return newBatches;
|
||||
const uniqueAll = newBatches.filter(
|
||||
(batch) => !prev.some((b) => b.batchId === batch.batchId)
|
||||
);
|
||||
return [...prev, ...uniqueAll];
|
||||
});
|
||||
|
||||
setHasMore(receivedCount === PAGE_SIZE);
|
||||
} catch (error) {
|
||||
console.error("Error fetching images:", error);
|
||||
if (page === 1) {
|
||||
setImages([]);
|
||||
setAllImagesData([]);
|
||||
}
|
||||
setHasMore(false);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setLoadingMore(false);
|
||||
}
|
||||
}, [selectedProjectId]);
|
||||
|
||||
const resetGallery = useCallback(() => {
|
||||
setImages([]);
|
||||
setAllImagesData([]);
|
||||
setPageNumber(1);
|
||||
setHasMore(true);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
images,
|
||||
allImagesData,
|
||||
pageNumber,
|
||||
setPageNumber,
|
||||
hasMore,
|
||||
loading,
|
||||
loadingMore,
|
||||
fetchImages,
|
||||
resetGallery,
|
||||
};
|
||||
return res;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export default useImageGallery;
|
||||
export default useImageGallery;
|
||||
|
||||
|
||||
@ -16,32 +16,20 @@ import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
const SCROLL_THRESHOLD = 5;
|
||||
|
||||
const ImageGallery = () => {
|
||||
const selectedProjectId = useSelector((store) => store.localVariables.projectId);
|
||||
const selectedProjectId = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const dispatch = useDispatch();
|
||||
const { projectNames } = useProjectName();
|
||||
|
||||
const dispatch = useDispatch()
|
||||
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||
// Auto-select a project on mount
|
||||
useEffect(() => {
|
||||
if(selectedProjectId == null){
|
||||
dispatch(setProjectId(projectNames[0]?.id));
|
||||
}
|
||||
},[])
|
||||
|
||||
const {
|
||||
images,
|
||||
allImagesData,
|
||||
pageNumber,
|
||||
setPageNumber,
|
||||
hasMore,
|
||||
loading,
|
||||
loadingMore,
|
||||
fetchImages,
|
||||
resetGallery,
|
||||
} = useImageGallery(selectedProjectId);
|
||||
|
||||
const { openModal } = useModal();
|
||||
|
||||
const yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD');
|
||||
if (!selectedProjectId && projectNames?.length) {
|
||||
dispatch(setProjectId(projectNames[0].id));
|
||||
}
|
||||
}, [selectedProjectId, projectNames, dispatch]);
|
||||
|
||||
// Filter states
|
||||
const [selectedFilters, setSelectedFilters] = useState({
|
||||
building: [],
|
||||
floor: [],
|
||||
@ -52,7 +40,6 @@ const ImageGallery = () => {
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
});
|
||||
|
||||
const [appliedFilters, setAppliedFilters] = useState({
|
||||
buildingIds: null,
|
||||
floorIds: null,
|
||||
@ -63,7 +50,6 @@ const ImageGallery = () => {
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
});
|
||||
|
||||
const [collapsedFilters, setCollapsedFilters] = useState({
|
||||
dateRange: false,
|
||||
building: false,
|
||||
@ -73,7 +59,6 @@ const ImageGallery = () => {
|
||||
workCategory: false,
|
||||
workArea: false,
|
||||
});
|
||||
|
||||
const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
|
||||
const [hoveredImage, setHoveredImage] = useState(null);
|
||||
|
||||
@ -81,133 +66,113 @@ const ImageGallery = () => {
|
||||
const loaderRef = useRef(null);
|
||||
const filterPanelRef = useRef(null);
|
||||
const filterButtonRef = useRef(null);
|
||||
const { openModal } = useModal();
|
||||
|
||||
const {
|
||||
data,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isLoading,
|
||||
isFetchingNextPage,
|
||||
refetch,
|
||||
} = useImageGallery(selectedProjectId, appliedFilters);
|
||||
|
||||
const images = data?.pages.flatMap((page) => page.data) || [];
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
const handleClick = (e) => {
|
||||
if (
|
||||
filterPanelRef.current &&
|
||||
!filterPanelRef.current.contains(event.target) &&
|
||||
!filterPanelRef.current.contains(e.target) &&
|
||||
filterButtonRef.current &&
|
||||
!filterButtonRef.current.contains(event.target)
|
||||
!filterButtonRef.current.contains(e.target)
|
||||
) {
|
||||
setIsFilterPanelOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handleClick);
|
||||
return () => document.removeEventListener("mousedown", handleClick);
|
||||
}, []);
|
||||
|
||||
if (isFilterPanelOpen) {
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
} else {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
}
|
||||
useEffect(() => {
|
||||
if (selectedProjectId) refetch();
|
||||
}, [selectedProjectId, appliedFilters, refetch]);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
useEffect(() => {
|
||||
const handler = (data) => {
|
||||
if (data.projectId === selectedProjectId) refetch();
|
||||
};
|
||||
}, [isFilterPanelOpen]);
|
||||
eventBus.on("image_gallery", handler);
|
||||
return () => eventBus.off("image_gallery", handler);
|
||||
}, [selectedProjectId, refetch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedProjectId) {
|
||||
resetGallery();
|
||||
return;
|
||||
}
|
||||
useEffect(() => {
|
||||
if (!loaderRef.current) return;
|
||||
|
||||
resetGallery();
|
||||
fetchImages(1, appliedFilters, true);
|
||||
}, [selectedProjectId, appliedFilters]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleExternalEvent = (data) => {
|
||||
if (selectedProjectId === data.projectId) {
|
||||
resetGallery();
|
||||
fetchImages(1, appliedFilters, true);
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting && hasNextPage && !isFetchingNextPage && !isLoading) {
|
||||
fetchNextPage();
|
||||
}
|
||||
};
|
||||
},
|
||||
{ rootMargin: "200px", threshold: 0.1 }
|
||||
);
|
||||
|
||||
eventBus.on("image_gallery", handleExternalEvent);
|
||||
observer.observe(loaderRef.current);
|
||||
|
||||
return () => {
|
||||
eventBus.off("image_gallery", handleExternalEvent);
|
||||
};
|
||||
}, [appliedFilters, fetchImages, selectedProjectId]);
|
||||
return () => {
|
||||
if (loaderRef.current) {
|
||||
observer.unobserve(loaderRef.current);
|
||||
}
|
||||
};
|
||||
}, [hasNextPage, isFetchingNextPage, isLoading, fetchNextPage]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loaderRef.current) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && hasMore && !loadingMore && !loading) {
|
||||
setPageNumber((prevPageNumber) => prevPageNumber + 1);
|
||||
// Utility: derive filter options
|
||||
const getUniqueValues = useCallback(
|
||||
(idKey, nameKey) => {
|
||||
const m = new Map();
|
||||
images.forEach((batch) => {
|
||||
const id = idKey === "floorIds" ? batch.floorIds : batch[idKey];
|
||||
if (id && batch[nameKey] && !m.has(id)) {
|
||||
m.set(id, batch[nameKey]);
|
||||
}
|
||||
},
|
||||
{
|
||||
root: null,
|
||||
rootMargin: "200px",
|
||||
threshold: 0.1,
|
||||
}
|
||||
);
|
||||
});
|
||||
return [...m.entries()].sort((a, b) => a[1].localeCompare(b[1]));
|
||||
},
|
||||
[images]
|
||||
);
|
||||
|
||||
observer.observe(loaderRef.current);
|
||||
|
||||
return () => {
|
||||
if (loaderRef.current) {
|
||||
observer.unobserve(loaderRef.current);
|
||||
}
|
||||
};
|
||||
}, [hasMore, loadingMore, loading]);
|
||||
|
||||
useEffect(() => {
|
||||
if (pageNumber > 1) {
|
||||
fetchImages(pageNumber, appliedFilters);
|
||||
}
|
||||
}, [pageNumber]);
|
||||
|
||||
const getUniqueValuesWithIds = useCallback((idKey, nameKey) => {
|
||||
const map = new Map();
|
||||
allImagesData.forEach(batch => {
|
||||
let id = idKey === "floorIds" ? batch.floorIds : batch[idKey];
|
||||
const name = batch[nameKey];
|
||||
if (id && name && !map.has(id)) {
|
||||
map.set(id, name);
|
||||
}
|
||||
});
|
||||
return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
|
||||
}, [allImagesData]);
|
||||
|
||||
const getUniqueUploadedByUsers = useCallback(() => {
|
||||
const uniqueUsersMap = new Map();
|
||||
allImagesData.forEach(batch => {
|
||||
batch.documents.forEach(doc => {
|
||||
if (doc.uploadedBy && doc.uploadedBy.id) {
|
||||
const fullName = `${doc.uploadedBy.firstName || ""} ${doc.uploadedBy.lastName || ""}`.trim();
|
||||
if (fullName) {
|
||||
uniqueUsersMap.set(doc.uploadedBy.id, fullName);
|
||||
}
|
||||
const getUploadedBy = useCallback(() => {
|
||||
const m = new Map();
|
||||
images.forEach((batch) => {
|
||||
batch.documents.forEach((doc) => {
|
||||
const name = `${doc.uploadedBy?.firstName || ""} ${
|
||||
doc.uploadedBy?.lastName || ""
|
||||
}`.trim();
|
||||
if (doc.uploadedBy?.id && name && !m.has(doc.uploadedBy.id)) {
|
||||
m.set(doc.uploadedBy.id, name);
|
||||
}
|
||||
});
|
||||
});
|
||||
return Array.from(uniqueUsersMap.entries()).sort((a, b) => a[1].localeCompare(b[1]));
|
||||
}, [allImagesData]);
|
||||
return [...m.entries()].sort((a, b) => a[1].localeCompare(b[1]));
|
||||
}, [images]);
|
||||
|
||||
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");
|
||||
const buildings = getUniqueValues("buildingId", "buildingName");
|
||||
const floors = getUniqueValues("floorIds", "floorName");
|
||||
const activities = getUniqueValues("activityId", "activityName");
|
||||
const workAreas = getUniqueValues("workAreaId", "workAreaName");
|
||||
const workCategories = getUniqueValues("workCategoryId", "workCategoryName");
|
||||
const uploadedByUsers = getUploadedBy();
|
||||
|
||||
const toggleFilter = useCallback((type, itemId, itemName) => {
|
||||
const toggleFilter = useCallback((type, id, name) => {
|
||||
setSelectedFilters((prev) => {
|
||||
const current = prev[type];
|
||||
const isSelected = current.some((item) => item[0] === itemId);
|
||||
|
||||
const newArray = isSelected
|
||||
? current.filter((item) => item[0] !== itemId)
|
||||
: [...current, [itemId, itemName]];
|
||||
|
||||
return {
|
||||
...prev,
|
||||
[type]: newArray,
|
||||
};
|
||||
const arr = prev[type];
|
||||
const exists = arr.some(([x]) => x === id);
|
||||
const updated = exists
|
||||
? arr.filter(([x]) => x !== id)
|
||||
: [...arr, [id, name]];
|
||||
return { ...prev, [type]: updated };
|
||||
});
|
||||
}, []);
|
||||
|
||||
@ -220,48 +185,33 @@ const ImageGallery = () => {
|
||||
}, []);
|
||||
|
||||
const toggleCollapse = useCallback((type) => {
|
||||
setCollapsedFilters((prev) => ({
|
||||
...prev,
|
||||
[type]: !prev[type],
|
||||
}));
|
||||
setCollapsedFilters((prev) => ({ ...prev, [type]: !prev[type] }));
|
||||
}, []);
|
||||
|
||||
const handleApplyFilters = useCallback(() => {
|
||||
const payload = {
|
||||
buildingIds: selectedFilters.building.length ? selectedFilters.building.map((item) => item[0]) : null,
|
||||
floorIds: selectedFilters.floor.length ? selectedFilters.floor.map((item) => item[0]) : null,
|
||||
workAreaIds: selectedFilters.workArea.length ? selectedFilters.workArea.map((item) => item[0]) : null,
|
||||
workCategoryIds: selectedFilters.workCategory.length ? selectedFilters.workCategory.map((item) => item[0]) : null,
|
||||
activityIds: selectedFilters.activity.length ? selectedFilters.activity.map((item) => item[0]) : null,
|
||||
uploadedByIds: selectedFilters.uploadedBy.length ? selectedFilters.uploadedBy.map((item) => item[0]) : null,
|
||||
buildingIds: selectedFilters.building.map(([x]) => x) || null,
|
||||
floorIds: selectedFilters.floor.map(([x]) => x) || null,
|
||||
activityIds: selectedFilters.activity.map(([x]) => x) || null,
|
||||
uploadedByIds: selectedFilters.uploadedBy.map(([x]) => x) || null,
|
||||
workCategoryIds: selectedFilters.workCategory.map(([x]) => x) || null,
|
||||
workAreaIds: selectedFilters.workArea.map(([x]) => x) || null,
|
||||
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);
|
||||
for (const item of newSet) {
|
||||
if (!oldSet.has(item)) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) return false;
|
||||
return oldVal !== newVal;
|
||||
const changed = Object.keys(payload).some((key) => {
|
||||
const oldVal = appliedFilters[key],
|
||||
newVal = payload[key];
|
||||
return Array.isArray(oldVal)
|
||||
? oldVal.length !== newVal.length ||
|
||||
oldVal.some((x) => !newVal.includes(x))
|
||||
: oldVal !== newVal;
|
||||
});
|
||||
|
||||
if (areFiltersChanged) {
|
||||
setAppliedFilters(payload);
|
||||
resetGallery();
|
||||
}
|
||||
if (changed) setAppliedFilters(payload);
|
||||
}, [selectedFilters, appliedFilters]);
|
||||
|
||||
const handleClearAllFilters = useCallback(() => {
|
||||
const initialStateSelected = {
|
||||
const handleClear = useCallback(() => {
|
||||
setSelectedFilters({
|
||||
building: [],
|
||||
floor: [],
|
||||
activity: [],
|
||||
@ -270,10 +220,8 @@ const ImageGallery = () => {
|
||||
workArea: [],
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
};
|
||||
setSelectedFilters(initialStateSelected);
|
||||
|
||||
const initialStateApplied = {
|
||||
});
|
||||
setAppliedFilters({
|
||||
buildingIds: null,
|
||||
floorIds: null,
|
||||
activityIds: null,
|
||||
@ -282,69 +230,70 @@ const ImageGallery = () => {
|
||||
workAreaIds: null,
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
};
|
||||
setAppliedFilters(initialStateApplied);
|
||||
resetGallery();
|
||||
});
|
||||
}, []);
|
||||
|
||||
const scrollLeft = useCallback((key) => {
|
||||
imageGroupRefs.current[key]?.scrollBy({ left: -200, behavior: "smooth" });
|
||||
}, []);
|
||||
const scrollLeft = useCallback(
|
||||
(key) =>
|
||||
imageGroupRefs.current[key]?.scrollBy({ left: -200, behavior: "smooth" }),
|
||||
[]
|
||||
);
|
||||
const scrollRight = useCallback(
|
||||
(key) =>
|
||||
imageGroupRefs.current[key]?.scrollBy({ left: 200, behavior: "smooth" }),
|
||||
[]
|
||||
);
|
||||
|
||||
const scrollRight = useCallback((key) => {
|
||||
imageGroupRefs.current[key]?.scrollBy({ left: 200, behavior: "smooth" });
|
||||
}, []);
|
||||
|
||||
const renderFilterCategory = (label, items, type) => (
|
||||
<div className={`dropdown my-2 ${collapsedFilters[type] ? "collapsed" : ""}`}>
|
||||
<div className="dropdown-header bg-label-primary" onClick={() => toggleCollapse(type)}>
|
||||
const renderCategory = (label, items, type) => (
|
||||
<div
|
||||
className={`dropdown my-2 ${collapsedFilters[type] ? "collapsed" : ""}`}
|
||||
>
|
||||
<div
|
||||
className="dropdown-header bg-label-primary"
|
||||
onClick={() => toggleCollapse(type)}
|
||||
>
|
||||
<strong>{label}</strong>
|
||||
<div className="header-controls">
|
||||
{type === "dateRange" && (selectedFilters.startDate || selectedFilters.endDate) && (
|
||||
{((type === "dateRange" &&
|
||||
(selectedFilters.startDate || selectedFilters.endDate)) ||
|
||||
(type !== "dateRange" && selectedFilters[type]?.length > 0)) && (
|
||||
<button
|
||||
className="clear-button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedFilters((prev) => ({ ...prev, startDate: "", endDate: "" }));
|
||||
setSelectedFilters((prev) => ({
|
||||
...prev,
|
||||
[type]: type === "dateRange" ? "" : [],
|
||||
...(type === "dateRange" && { startDate: "", endDate: "" }),
|
||||
}));
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
{type !== "dateRange" && selectedFilters[type]?.length > 0 && (
|
||||
<button
|
||||
className="clear-button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedFilters((prev) => ({ ...prev, [type]: [] }));
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
<span className="collapse-icon">{collapsedFilters[type] ? '+' : '-'}</span>
|
||||
<span className="collapse-icon">
|
||||
{collapsedFilters[type] ? "+" : "-"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{!collapsedFilters[type] && (
|
||||
<div className="dropdown-content">
|
||||
{type === "dateRange" ? (
|
||||
<div className="date-range-inputs">
|
||||
<DateRangePicker
|
||||
onRangeChange={setDateRange}
|
||||
endDateMode="today"
|
||||
startDate={selectedFilters.startDate}
|
||||
endDate={selectedFilters.endDate}
|
||||
/>
|
||||
</div>
|
||||
<DateRangePicker
|
||||
onRangeChange={setDateRange}
|
||||
endDateMode="today"
|
||||
startDate={selectedFilters.startDate}
|
||||
endDate={selectedFilters.endDate}
|
||||
/>
|
||||
) : (
|
||||
items.map(([itemId, itemName]) => (
|
||||
<label key={itemId}>
|
||||
items.map(([id, name]) => (
|
||||
<label key={id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedFilters[type].some((item) => item[0] === itemId)}
|
||||
onChange={() => toggleFilter(type, itemId, itemName)}
|
||||
checked={selectedFilters[type].some(([x]) => x === id)}
|
||||
onChange={() => toggleFilter(type, id, name)}
|
||||
/>
|
||||
{itemName}
|
||||
{name}
|
||||
</label>
|
||||
))
|
||||
)}
|
||||
@ -354,105 +303,193 @@ const ImageGallery = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`gallery-container container-fluid ${isFilterPanelOpen ? "filter-panel-open-end" : ""}`}>
|
||||
<Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Gallary", link: null }]} />
|
||||
<div
|
||||
className={`gallery-container container-fluid ${
|
||||
isFilterPanelOpen ? "filter-panel-open-end" : ""
|
||||
}`}
|
||||
>
|
||||
<Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Gallery" }]} />
|
||||
<div className="main-content">
|
||||
<button
|
||||
className={`filter-button btn-primary ${isFilterPanelOpen ? "closed-icon" : ""}`}
|
||||
onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
|
||||
className={`filter-button btn-primary ${
|
||||
isFilterPanelOpen ? "closed-icon" : ""
|
||||
}`}
|
||||
onClick={() => setIsFilterPanelOpen((p) => !p)}
|
||||
ref={filterButtonRef}
|
||||
>
|
||||
{isFilterPanelOpen ? <i className="fa-solid fa-times fs-5"></i> : <i className="fa-solid fa-filter ms-1 fs-5"></i>}
|
||||
{isFilterPanelOpen ? (
|
||||
<i className="fa-solid fa-times fs-5" />
|
||||
) : (
|
||||
<i className="fa-solid fa-filter ms-1 fs-5" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="activity-section">
|
||||
{loading && pageNumber === 1 ? (
|
||||
<div className="spinner-container"><div className="spinner" /></div>
|
||||
) : images.length > 0 ? (
|
||||
{isLoading ? (
|
||||
<div className="text-center">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
) : images.length ? (
|
||||
images.map((batch) => {
|
||||
const firstDoc = batch.documents[0];
|
||||
const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""}`.trim();
|
||||
const date = formatUTCToLocalTime(firstDoc?.uploadedAt);
|
||||
const showScrollButtons = batch.documents.length > SCROLL_THRESHOLD;
|
||||
|
||||
const doc = batch.documents[0];
|
||||
const userName = `${doc.uploadedBy?.firstName || ""} ${
|
||||
doc.uploadedBy?.lastName || ""
|
||||
}`.trim();
|
||||
const date = formatUTCToLocalTime(doc.uploadedAt);
|
||||
const hasArrows = batch.documents.length > SCROLL_THRESHOLD;
|
||||
return (
|
||||
<div key={batch.batchId} className="grouped-section">
|
||||
<div className="group-heading">
|
||||
<div className="d-flex flex-column">
|
||||
<div className="d-flex align-items-center mb-1">
|
||||
<Avatar size="xs" firstName={firstDoc?.uploadedBy?.firstName} lastName={firstDoc?.uploadedBy?.lastName} className="me-2" />
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
<strong className="user-name-text">{userName}</strong>
|
||||
<span className="me-2">{date}</span>
|
||||
</div>
|
||||
{/* Uploader Info */}
|
||||
<div className="d-flex align-items-center mb-1">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={doc.uploadedBy?.firstName}
|
||||
lastName={doc.uploadedBy?.lastName}
|
||||
className="me-2"
|
||||
/>
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
<strong className="user-name-text">{userName}</strong>
|
||||
<span className="text-muted small">{date}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="location-line">
|
||||
<div>{batch.buildingName} > {batch.floorName} > <strong>{batch.workAreaName || "Unknown"} > {batch.activityName}</strong></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">
|
||||
<span>{batch.buildingName}</span>
|
||||
<i className="bx bx-chevron-right " />
|
||||
</span>
|
||||
<span className="d-flex align-items-center">
|
||||
<span>{batch.floorName}</span>
|
||||
<i className="bx bx-chevron-right m" />
|
||||
</span>
|
||||
<span className="d-flex align-items-center ">
|
||||
<span>{batch.workAreaName || "Unknown"}</span>
|
||||
<i className="bx bx-chevron-right " />
|
||||
<span>{batch.activityName}</span>
|
||||
</span>
|
||||
</div>
|
||||
{batch.workCategoryName && (
|
||||
<div className="work-category-display ms-2">
|
||||
<span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1">
|
||||
{batch.workCategoryName}
|
||||
</span>
|
||||
</div>
|
||||
<span className="badge bg-label-primary ms-2">
|
||||
{batch.workCategoryName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="image-group-wrapper">
|
||||
{showScrollButtons && <button className="scroll-arrow left-arrow" onClick={() => scrollLeft(batch.batchId)}>‹</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");
|
||||
const hoverTime = moment(doc.uploadedAt).format("hh:mm A");
|
||||
|
||||
<div className="image-group-wrapper">
|
||||
{hasArrows && (
|
||||
<button
|
||||
className="scroll-arrow left-arrow"
|
||||
onClick={() => scrollLeft(batch.batchId)}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
)}
|
||||
<div
|
||||
className="image-group-horizontal"
|
||||
ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
|
||||
>
|
||||
{batch.documents.map((d, i) => {
|
||||
const hoverDate = moment(d.uploadedAt).format(
|
||||
"DD-MM-YYYY"
|
||||
);
|
||||
const hoverTime = moment(d.uploadedAt).format(
|
||||
"hh:mm A"
|
||||
);
|
||||
return (
|
||||
<div key={doc.id} className="image-card" onClick={() => openModal(<ImagePop batch={batch} initialIndex={idx} />)} onMouseEnter={() => setHoveredImage(doc)} onMouseLeave={() => setHoveredImage(null)}>
|
||||
<div
|
||||
key={d.id}
|
||||
className="image-card"
|
||||
onClick={() =>
|
||||
openModal(
|
||||
<ImagePop batch={batch} initialIndex={i} />
|
||||
)
|
||||
}
|
||||
onMouseEnter={() => setHoveredImage(d)}
|
||||
onMouseLeave={() => setHoveredImage(null)}
|
||||
>
|
||||
<div className="image-wrapper">
|
||||
<img src={doc.url} alt={`Image ${idx + 1}`} />
|
||||
<img src={d.url} alt={`Image ${i + 1}`} />
|
||||
</div>
|
||||
{hoveredImage === doc && (
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{showScrollButtons && <button className="scroll-arrow right-arrow" onClick={() => scrollRight(batch.batchId)}>›</button>}
|
||||
{hasArrows && (
|
||||
<button
|
||||
className="scroll-arrow right-arrow"
|
||||
onClick={() => scrollRight(batch.batchId)}
|
||||
>
|
||||
<i className="bx bx-chevron-right"></i>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
!loading && <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>No images match the selected filters.</p>
|
||||
<p className="text-center text-muted mt-5">
|
||||
No images match the selected filters.
|
||||
</p>
|
||||
)}
|
||||
<div ref={loaderRef} style={{ height: '50px', margin: '20px 0', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
{loadingMore && hasMore && <div className="spinner" />}
|
||||
{!hasMore && !loading && images.length > 0 && <p style={{ color: '#aaa' }}>You've reached the end of the images.</p>}
|
||||
<div ref={loaderRef}>
|
||||
{isFetchingNextPage && hasNextPage && <p>Loading...</p>}
|
||||
{!hasNextPage && !isLoading && images.length > 0 && (
|
||||
<p className="text-muted">
|
||||
You've reached the end of the images.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`} tabIndex="-1" id="filterOffcanvas" aria-labelledby="filterOffcanvasLabel" ref={filterPanelRef}>
|
||||
<div
|
||||
className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`}
|
||||
ref={filterPanelRef}
|
||||
>
|
||||
<div className="offcanvas-header">
|
||||
<h5 className="offcanvas-title" id="filterOffcanvasLabel">Filters</h5>
|
||||
<button type="button" className="btn-close" onClick={() => setIsFilterPanelOpen(false)} aria-label="Close" />
|
||||
<h5>Filters</h5>
|
||||
<button
|
||||
className="btn-close"
|
||||
onClick={() => setIsFilterPanelOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
<div className="filter-actions mt-auto mx-2">
|
||||
<button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>Clear All</button>
|
||||
<button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>Apply Filters</button>
|
||||
<button className="btn btn-secondary btn-xs" onClick={handleClear}>
|
||||
Clear All
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-primary btn-xs"
|
||||
onClick={handleApplyFilters}
|
||||
>
|
||||
Apply Filters
|
||||
</button>
|
||||
</div>
|
||||
<div className="offcanvas-body d-flex flex-column">
|
||||
{renderFilterCategory("Date Range", [], "dateRange")}
|
||||
{renderFilterCategory("Building", buildings, "building")}
|
||||
{renderFilterCategory("Floor", floors, "floor")}
|
||||
{renderFilterCategory("Work Area", workAreas, "workArea")}
|
||||
{renderFilterCategory("Activity", activities, "activity")}
|
||||
{renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
|
||||
{renderFilterCategory("Work Category", workCategories, "workCategory")}
|
||||
{renderCategory("Date Range", [], "dateRange")}
|
||||
{renderCategory("Building", buildings, "building")}
|
||||
{renderCategory("Floor", floors, "floor")}
|
||||
{renderCategory("Work Area", workAreas, "workArea")}
|
||||
{renderCategory("Activity", activities, "activity")}
|
||||
{renderCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
|
||||
{renderCategory("Work Category", workCategories, "workCategory")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -42,14 +42,23 @@
|
||||
}
|
||||
|
||||
/* Image Styles */
|
||||
.modal-image {
|
||||
max-width: 100%;
|
||||
max-height: 70vh;
|
||||
width: auto;
|
||||
|
||||
.image-container {
|
||||
aspect-ratio: 1 / 1; /* Square shape: width and height are equal */
|
||||
width: 100%; /* or set a fixed width like 300px */
|
||||
max-width: 400px; /* Optional: limit how large it grows */
|
||||
border-radius: 10px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 20px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Scrollable Container for Text Details */
|
||||
|
||||
@ -54,44 +54,34 @@ const ImagePop = ({ batch, initialIndex = 0 }) => {
|
||||
return (
|
||||
<div className="image-modal-overlay">
|
||||
<div className="image-modal-content">
|
||||
{/* Close button */}
|
||||
<button className="close-button" onClick={closeModal}>
|
||||
×
|
||||
</button>
|
||||
|
||||
<i className='bx bx-x close-button' onClick={closeModal}></i>
|
||||
|
||||
{/* Previous button, only shown if there's a previous image */}
|
||||
{hasPrev && (
|
||||
<button className="nav-button prev-button" onClick={handlePrev}>
|
||||
‹ {/* Unicode for single left angle quotation mark */}
|
||||
<i className='bx bx-chevron-left'></i>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* The main image display */}
|
||||
<img src={image.url} alt="Preview" className="modal-image" />
|
||||
<div className="image-container">
|
||||
<img src={image.url} alt="Preview" className="modal-image" />
|
||||
</div>
|
||||
|
||||
{/* Next button, only shown if there's a next image */}
|
||||
{hasNext && (
|
||||
<button className="nav-button next-button" onClick={handleNext}>
|
||||
› {/* Unicode for single right angle quotation mark */}
|
||||
<i className='bx bx-chevron-right'></i>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Image details */}
|
||||
<div className="image-details">
|
||||
<p>
|
||||
<strong>👤 Uploaded By:</strong> {fullName}
|
||||
</p>
|
||||
<p>
|
||||
<strong>📅 Date:</strong> {date}
|
||||
</p>
|
||||
<p>
|
||||
<strong>🏢 Location:</strong> {buildingName} > {floorName} >{" "}
|
||||
{workAreaName || "Unknown"} > {activityName}
|
||||
</p>
|
||||
<p>
|
||||
{/* Display the comment from the batch object */}
|
||||
<strong>📝 Comments:</strong> {batchComment || "N/A"}
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user