Sorting Alphabate wise and adding Clear and appy filter button on the top of filter drower.

2025-07-07 11:42:42 +05:30 · 2025-07-07 11:42:42 +05:30 · 7b39da098f
commit 7b39da098f
parent 0af211a218
2 changed files with 290 additions and 165 deletions
--- a/src/pages/Gallary/ImageGallary.jsx
+++ b/src/pages/Gallary/ImageGallary.jsx
@ -1,4 +1,3 @@
-// ImageGallery.js
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import "./ImageGallery.css";
 import { ImageGalleryAPI } from "./ImageGalleryAPI";
@ -7,10 +6,17 @@ import { useSelector } from "react-redux";
 import { useModal } from "./ModalContext";
 import ImagePop from "./ImagePop";
 import Avatar from "../../components/common/Avatar";
-import DateRangePicker from "../../components/common/DateRangePicker"; // Assuming this is the path to your DateRangePicker
+import DateRangePicker from "../../components/common/DateRangePicker";
+import eventBus from "../../services/eventBus";
+
+const PAGE_SIZE = 10;
+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();

@ -51,8 +57,10 @@ const ImageGallery = () => {
  const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
  const [hoveredImage, setHoveredImage] = useState(null);
  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);

  const imageGroupRefs = useRef({});
+  const loaderRef = useRef(null);
  const filterPanelRef = useRef(null);
  const filterButtonRef = useRef(null);

@ -68,61 +76,161 @@ const ImageGallery = () => {
      }
    };

+    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;
    }

+    setImages([]);
+    setPageNumber(1);
+    setHasMore(true);
    setLoading(true);

-    ImageGalleryAPI.ImagesGet(selectedProjectId, appliedFilters)
-      .then((res) => {
-        setImages(res.data);
-      })
-      .catch((err) => {
-        console.error("Error fetching images:", err);
-        setImages([]);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
+    setAllImagesData([]);
+    fetchImages(1, appliedFilters, true);
  }, [selectedProjectId, appliedFilters]);

-  const getUniqueValuesWithIds = useCallback(
-    (idKey, nameKey) => {
-      const uniqueMap = new Map();
-      images.forEach((img) => {
-        if (img[idKey] && img[nameKey]) {
-          uniqueMap.set(img[idKey], img[nameKey]);
+  const fetchImages = useCallback(async (page, filters) => {
+    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((prevImages) => {
+        const uniqueNewBatches = newBatches.filter(
+          (newBatch) => !prevImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
+        );
+        return [...prevImages, ...uniqueNewBatches];
+      });
+
+      setAllImagesData((prevAllImages) => {
+        const uniqueAllImages = newBatches.filter(
+          (newBatch) => !prevAllImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
+        );
+        return [...prevAllImages, ...uniqueAllImages];
+      });
+
+      setHasMore(receivedCount === PAGE_SIZE);
+    } catch (err) {
+      console.error("Error fetching images:", err);
+      if (page === 1) {
+        setImages([]);
+        setAllImagesData([]);
+      }
+      setHasMore(false);
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  }, [selectedProjectId]);
+
+  useEffect(() => {
+    const handleExternalEvent = (data) => {
+      if (selectedProjectId === data.projectId) {
+        setImages([]);
+        setAllImagesData([]);
+        setPageNumber(1);
+        setHasMore(true);
+        fetchImages(1, appliedFilters, true);
+      }
+    };
+
+    eventBus.on("image_gallery", handleExternalEvent);
+
+    return () => {
+      eventBus.off("image_gallery", handleExternalEvent);
+    };
+  }, [appliedFilters, fetchImages, selectedProjectId]);
+
+  useEffect(() => {
+    if (!loaderRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !loadingMore && !loading) {
+          setPageNumber((prevPageNumber) => prevPageNumber + 1);
+        }
+      },
+      {
+        root: null,
+        rootMargin: "200px",
+        threshold: 0.1,
+      }
+    );
+
+    observer.observe(loaderRef.current);
+
+    return () => {
+      if (loaderRef.current) {
+        observer.unobserve(loaderRef.current);
+      }
+    };
+  }, [hasMore, loadingMore, loading]);
+
+  useEffect(() => {
+    if (pageNumber > 1) {
+      fetchImages(pageNumber, appliedFilters);
+    }
+  }, [pageNumber, fetchImages, appliedFilters]);
+
+  const getUniqueValuesWithIds = useCallback((idKey, nameKey) => {
+    const map = new Map();
+    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(uniqueMap.entries());
-    },
-    [images]
-  );
+    // Sort alphabetically by name
+    return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
+  }, [allImagesData]);

  const getUniqueUploadedByUsers = useCallback(() => {
    const uniqueUsersMap = new Map();
-    images.forEach((img) => {
-      if (img.uploadedBy && img.uploadedBy.id) {
-        const fullName = `${img.uploadedBy.firstName || ""} ${
-          img.uploadedBy.lastName || ""
-        }`.trim();
+    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(img.uploadedBy.id, fullName);
+            uniqueUsersMap.set(doc.uploadedBy.id, fullName);
          }
        }
      });
-    return Array.from(uniqueUsersMap.entries());
-  }, [images]);
+    });
+    // Sort alphabetically by full name
+    return Array.from(uniqueUsersMap.entries()).sort((a, b) => a[1].localeCompare(b[1]));
+  }, [allImagesData]);

  const buildings = getUniqueValuesWithIds("buildingId", "buildingName");
  const floors = getUniqueValuesWithIds("floorIds", "floorName");
@ -191,9 +299,35 @@ 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;
+      }
+      if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) {
+        return false;
+      }
+      return oldVal !== newVal;
+    });
+
+    if (areFiltersChanged) {
      setAppliedFilters(payload);
-    setIsFilterPanelOpen(false);
-  }, [selectedFilters]);
+      setImages([]);
+      setPageNumber(1);
+      setHasMore(true);
+    }
+    // Removed setIsFilterPanelOpen(false); to keep the drawer open
+  }, [selectedFilters, appliedFilters]);

  const handleClearAllFilters = useCallback(() => {
    const initialStateSelected = {
@ -219,49 +353,11 @@ const ImageGallery = () => {
      endDate: null,
    };
    setAppliedFilters(initialStateApplied);
+    setImages([]);
+    setPageNumber(1);
+    setHasMore(true);
  }, []);

-  const filteredImages = images.filter((img) => {
-    const uploadedAtMoment = moment(img.uploadedAt);
-    const startDateMoment = appliedFilters.startDate
-      ? moment(appliedFilters.startDate)
-      : null;
-    const endDateMoment = appliedFilters.endDate
-      ? moment(appliedFilters.endDate)
-      : null;
-
-    const isWithinDateRange =
-      (!startDateMoment || uploadedAtMoment.isSameOrAfter(startDateMoment, "day")) &&
-      (!endDateMoment || uploadedAtMoment.isSameOrBefore(endDateMoment, "day"));
-
-    const passesCategoryFilters =
-      (appliedFilters.buildingIds === null ||
-        appliedFilters.buildingIds.includes(img.buildingId)) &&
-      (appliedFilters.floorIds === null ||
-        appliedFilters.floorIds.includes(img.floorIds)) &&
-      (appliedFilters.activityIds === null ||
-        appliedFilters.activityIds.includes(img.activityId)) &&
-      (appliedFilters.workAreaIds === null ||
-        appliedFilters.workAreaIds.includes(img.workAreaId)) &&
-      (appliedFilters.uploadedByIds === null ||
-        appliedFilters.uploadedByIds.includes(img.uploadedBy?.id)) &&
-      (appliedFilters.workCategoryIds === null ||
-        appliedFilters.workCategoryIds.includes(img.workCategoryId));
-
-    return isWithinDateRange && passesCategoryFilters;
-  });
-
-  const imagesByActivityUser = {};
-  filteredImages.forEach((img) => {
-    const userName = `${img.uploadedBy?.firstName || ""} ${
-      img.uploadedBy?.lastName || ""
-    }`.trim();
-    const workArea = img.workAreaName || "Unknown";
-    const key = `${img.activityName}__${userName}__${workArea}`;
-    if (!imagesByActivityUser[key]) imagesByActivityUser[key] = [];
-    imagesByActivityUser[key].push(img);
-  });
-
  const scrollLeft = useCallback((key) => {
    imageGroupRefs.current[key]?.scrollBy({ left: -200, behavior: "smooth" });
  }, []);
@ -307,7 +403,15 @@ const ImageGallery = () => {
      {!collapsedFilters[type] && (
        <div className="dropdown-content">
          {type === "dateRange" ? (
-            null
+            <div className="date-range-inputs">
+              <DateRangePicker
+                onRangeChange={setDateRange}
+                defaultStartDate={selectedFilters.startDate || yesterday}
+                defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')}
+                startDate={selectedFilters.startDate}
+                endDate={selectedFilters.endDate}
+              />
+            </div>
          ) : (
            items.map((item) => {
              const itemId = item[0];
@ -334,35 +438,49 @@ const ImageGallery = () => {
  );

  return (
-    <div className={`gallery-container ${isFilterPanelOpen ? "filter-panel-open" : ""}`}>
+    <div className={`gallery-container ${isFilterPanelOpen ? "filter-panel-open-end" : ""}`}>
      <div className="main-content">
+        <button
+          className={`filter-button btn-primary ${isFilterPanelOpen ? "closed-icon" : ""}`}
+          onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
+          ref={filterButtonRef}
+        >
+          {isFilterPanelOpen ? (
+            <i className="fa-solid fa-times fs-5"></i>
+          ) : (
+            <><i className="fa-solid fa-filter ms-1 fs-5"></i></>
+          )}
+        </button>
+
        <div className="activity-section">
-          {loading ? (
+          {loading && pageNumber === 1 ? (
            <div className="spinner-container">
              <div className="spinner" />
            </div>
-          ) : Object.entries(imagesByActivityUser).length > 0 ? (
-            Object.entries(imagesByActivityUser).map(([key, imgs]) => {
-              const [activity, userName, workArea] = key.split("__");
-              const { buildingName, floorName, uploadedAt, workCategoryName } = imgs[0];
-              const date = moment(uploadedAt).format("YYYY-MM-DD");
-              const time = moment(uploadedAt).format("hh:mm A");
+          ) : 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");
+
+              const showScrollButtons = batch.documents.length > SCROLL_THRESHOLD;

              return (
-                <div key={key} className="grouped-section">
+                <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="xxs"
-                          firstName={imgs[0].uploadedBy?.firstName}
-                          lastName={imgs[0].uploadedBy?.lastName}
+                          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">
-                            {imgs[0].uploadedBy?.firstName}{" "}
-                            {imgs[0].uploadedBy?.lastName}
+                            {userName}
                          </strong>
                          <span className="me-2">
                            {date} {time}
@ -373,13 +491,14 @@ const ImageGallery = () => {

                    <div className="location-line">
                      <div>
-                        {buildingName} &gt; {floorName} &gt; <strong> {workArea} &gt;{" "}
-                        {activity}</strong>
+                        {batch.buildingName} &gt; {batch.floorName} &gt;{" "}
+                        <strong>{batch.workAreaName || "Unknown"} &gt;{" "}
+                          {batch.activityName}</strong>
                      </div>
-                      {workCategoryName && (
+                      {batch.workCategoryName && (
                        <div className="work-category-display ms-2">
                          <span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1">
-                            {workCategoryName}
+                            {batch.workCategoryName}
                          </span>
                        </div>
                      )}
@ -387,34 +506,36 @@ const ImageGallery = () => {
                  </div>

                  <div className="image-group-wrapper">
+                    {showScrollButtons && (
                      <button
                        className="scroll-arrow left-arrow"
-                      onClick={() => scrollLeft(key)}
+                        onClick={() => scrollLeft(batch.batchId)}
                      >
                        &#8249;
                      </button>
+                    )}
                    <div
                      className="image-group-horizontal"
-                      ref={(el) => (imageGroupRefs.current[key] = el)}
+                      ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
                    >
-                      {imgs.map((img, idx) => {
-                        const hoverDate = moment(img.uploadedAt).format("YYYY-MM-DD");
-                        const hoverTime = moment(img.uploadedAt).format("hh:mm A");
+                      {batch.documents.map((doc, idx) => {
+                        const hoverDate = moment(doc.uploadedAt).format("DD-MM-YYYY");
+                        const hoverTime = moment(doc.uploadedAt).format("hh:mm A");

                        return (
                          <div
-                            key={img.imageUrl}
+                            key={doc.id}
                            className="image-card"
                            onClick={() =>
-                              openModal(<ImagePop images={imgs} initialIndex={idx} />)
+                              openModal(<ImagePop batch={batch} initialIndex={idx} />)
                            }
-                            onMouseEnter={() => setHoveredImage(img)}
+                            onMouseEnter={() => setHoveredImage(doc)}
                            onMouseLeave={() => setHoveredImage(null)}
                          >
                            <div className="image-wrapper">
-                              <img src={img.imageUrl} alt={`Image ${idx + 1}`} />
+                              <img src={doc.url} alt={`Image ${idx + 1}`} />
                            </div>
-                            {hoveredImage === img && (
+                            {hoveredImage === doc && (
                              <div className="image-hover-description">
                                <p>
                                  <strong>Date:</strong> {hoverDate}
@ -423,7 +544,7 @@ const ImageGallery = () => {
                                  <strong>Time:</strong> {hoverTime}
                                </p>
                                <p>
-                                  <strong>Activity:</strong> {img.activityName}
+                                  <strong>Activity:</strong> {batch.activityName}
                                </p>
                              </div>
                            )}
@ -431,69 +552,53 @@ const ImageGallery = () => {
                        );
                      })}
                    </div>
+                    {showScrollButtons && (
                      <button
                        className="scroll-arrow right-arrow"
-                      onClick={() => scrollRight(key)}
+                        onClick={() => scrollRight(batch.batchId)}
                      >
                        &#8250;
                      </button>
+                    )}
                  </div>
                </div>
              );
            })
          ) : (
-            <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>
+            !loading && <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>
              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>
        </div>
      </div>

-      <div className="filter-drawer-wrapper">
-        <button
-          className={`filter-button btn-primary ${isFilterPanelOpen ? "" : "closed-icon"}`}
-          onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
-          ref={filterButtonRef}
+      <div
+        className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`}
+        tabIndex="-1"
+        id="filterOffcanvas"
+        aria-labelledby="filterOffcanvasLabel"
+        ref={filterPanelRef}
      >
-          {isFilterPanelOpen ? (
-            <>
-              Filter <span className="ms-1">&#10006;</span> {/* Added ms-1 for spacing */}
-            </>
-          ) : (
-            <>
-              <i className="fa-solid fa-filter ms-1 fs-5"></i>
-            </>
-          )}
-        </button>
-        <div className={`filter-panel ${isFilterPanelOpen ? "open" : ""}`} ref={filterPanelRef}>
-          <div className={`dropdown ${collapsedFilters.dateRange ? 'collapsed' : ''}`}>
-            <div className="dropdown-header" onClick={() => toggleCollapse('dateRange')}>
-              <strong>Date Range</strong>
-
-              <span className="collapse-icon">
-                {collapsedFilters.dateRange ? '+' : '-'}
-              </span>
+        <div className="offcanvas-header">
+          <h5 className="offcanvas-title" id="filterOffcanvasLabel">
+            Filters
+          </h5>
+          <button
+            type="button"
+            className="btn-close"
+            onClick={() => setIsFilterPanelOpen(false)}
+            aria-label="Close"
+          ></button>
        </div>
-            {!collapsedFilters.dateRange && (
-              <div className="datepicker" >
-                <DateRangePicker
-                  onRangeChange={setDateRange}
-                  defaultStartDate={selectedFilters.startDate || yesterday}
-                  defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')}
-                  startDate={selectedFilters.startDate}
-                  endDate={selectedFilters.endDate}
-                />
-              </div>
-            )}
-          </div>
-          {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")}
-
-          <div className="filter-actions">
+        {/* Top Filter Actions */}
+        <div className="filter-actions-top d-flex justify-content-between px-3 pb-2">
          <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
            Clear All
          </button>
@ -501,6 +606,23 @@ const ImageGallery = () => {
            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")}
+
+          {/* <div className="filter-actions mt-auto">
+            <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
+              Clear All
+            </button>
+            <button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>
+              Apply Filters
+            </button>
+          </div> */}
        </div>
      </div>
    </div>
--- 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;
@ -140,7 +138,6 @@
  border-radius: 0 0 4px 4px;
  max-height: 150px;
  /* Default max-height for scrollable dropdowns */
-  overflow-y: auto;
  /* Default overflow for scrollable dropdowns */
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
 }
@ -246,6 +243,7 @@
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease, border-bottom 0.3s ease;
+   margin-top: 5px;
 }

 .dropdown.collapsed .dropdown-header {
@ -400,6 +398,7 @@
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  width: 100%;
+  margin-left: 34px;
 }

 .scroll-arrow {
@ -544,3 +543,7 @@ hr {
  margin-right: 135px;
  margin-top: 6px;
 }
+.px-3 {
+    padding-inline-end: 1.75rem !important;
+    padding-inline-start: 14.25rem !important;
+}