Merge pull request 'Adding ImageGallery Chips.' (#517) from Image_Gallery_FilterChips into Purchase_Invoice_Management

Reviewed-on: #517
merged

src/components/Organization/AssignOrg.jsx

@@ -100,7 +100,7 @@ const AssignOrg = ({ setStep }) => {
               alt="logo"
               width={40}
               height={40}
-                  />  <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
+            />  <p className="fw-semibold fs-5 mt-2 m-0">{orgData.name}</p>
           </div>
           <div className="text-end">
             <button
@@ -113,9 +113,9 @@ const AssignOrg = ({ setStep }) => {
           </div>
         </div>
       </div>
-      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
+      <div className="d-flex text-secondary mb-3"> <i className="bx bx-sm bx-info-circle me-2" /> Organization Info</div>
       {/* Contact Info */}
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-4">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
@@ -126,7 +126,7 @@ const AssignOrg = ({ setStep }) => {
           <div className="text-muted">{orgData.contactPerson}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-4">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
@@ -137,7 +137,7 @@ const AssignOrg = ({ setStep }) => {
           <div className="text-muted">{orgData.contactNumber}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-4">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
@@ -145,22 +145,22 @@ const AssignOrg = ({ setStep }) => {
           >
             <i className='bx bx-sm me-1 bx-envelope'></i>  Email Address :
           </label>
-          <div className="text-muted">{orgData.email}</div>
+          <div className="text-muted text-wrap">{orgData.email}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-4">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
             style={{ maxWidth: "130px" }}
           >
-          <i className="bx bx-sm me-1 bx-barcode"></i>
+            <i className="bx bx-sm me-2 bx-barcode"></i>
             Service Provider Id (SPRID) :
           </label>
           <div className="text-muted">{orgData.sprid}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-4">
         <div className="d-flex">
           <label
             className="form-label me-1 mb-0 fw-semibold"

src/components/Organization/ManagOrg.jsx

@@ -189,7 +189,7 @@ const ManagOrg = () => {
           )}
         </div>
 
-        <div className="d-flex justify-content-between gap-2 my-2">
+        <div className="d-flex justify-content-between gap-2 my-5">
           <button
             type="button"
             className="btn btn-sm btn-outline-secondary"

src/components/Organization/OrgPickerFromSPId.jsx

@@ -45,7 +45,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
   return (
     <div className="d-block mt-4">
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="row align-items-center g-2">
+        <div className="row align-items-center g-2 mb-3">
           {/* Input Section */}
           <div className="col-12 col-md-8 d-block d-md-flex align-items-center gap-2 m-0 text-start">
             <Label className="text-nowrap mb-1 mb-md-0" required>
@@ -88,7 +88,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
         <div className="py-2 text-tiny text-center">
           <div className="d-flex flex-column gap-2 border-0 bg-none">
             {data.data.map((org) => (
-              <div className="d-flex flex-row gap-2 text-start text-black ">
+              <div className="d-flex flex-row gap-2 text-start text-black mt-3">
                 <div className="mt-1">
                   <img
                     src="/public/assets/img/orgLogo.png"
@@ -97,19 +97,19 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
                     height={50}
                   />
                 </div>
-                <div className="d-flex flex-column p-0 m-0 cursor-pointer">
-                  <span className="fs-6 fw-semibold">{org.name}</span>
+                <div className="d-flex flex-column p-0 m-0 cursor-pointer mb-3">
+                  <span className="fs-6 fw-semibold mb-2">{org.name}</span>
                   <div className="d-flex gap-2">
                     <small
-                      className=" fw-semibold text-uppercase"
+                      className=" fw-semibold text-uppercase mb-2"
                       style={{ letterSpacing: "1px" }}
                     >
                       SPRID :{" "}
                     </small>
                     <small className="fs-6">{org.sprid}</small>
                   </div>
-                  <div className="d-flex flex-row gap-2">
-                    <small className="text-small fw-semibold">Address:</small>
+                  <div className="d-flex flex-row gap-2 mb-4">
+                    <small className="text-small fw-semibold ">Address:</small>
                     <div className="d-flex text-wrap">{org.address}</div>
                   </div>
                   <div className="m-0 p-0">

src/components/Organization/OrganizationsList.jsx

@@ -122,6 +122,7 @@ const OrganizationsList = ({searchText}) => {
                     {organizationsColumns.map((col) => (
                       <td
                         key={col.key}
+                        style={{ height: "50px" }}
                         className={`d-table-cell ${col.align ?? ""}`}
                       >
                         {col.customRender

src/components/Organization/ViewOrganization.jsx

@@ -9,7 +9,7 @@ const VieworgDataanization = ({ orgId }) => {
   return (
     <div className="row text-black  text-black text-start ">
       {/* Header */}
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-5">
         <div className="d-flex justify-content-between align-items-center text-start mb-1">
           <div className="d-flex flex-row gap-2 align-items-center text-wrap">
             <img
@@ -18,7 +18,7 @@ const VieworgDataanization = ({ orgId }) => {
               width={40}
               height={40}
             />{" "}
-            <p className="fw-semibold fs-6 m-0">{data?.name}</p>
+            <p className="fw-semibold fs-5 mt-2 m-0">{data?.name}</p>
           </div>
           <div className="text-end">
             <span
@@ -30,12 +30,12 @@ const VieworgDataanization = ({ orgId }) => {
           </div>
         </div>
       </div>
-      <div className="d-flex text-secondary mb-2">
+      <div className="d-flex text-secondary mb-5">
         {" "}
         <i className="bx bx-sm bx-info-circle me-1" /> Organization Info
       </div>
       {/* Contact Info */}
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-5">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
@@ -46,7 +46,7 @@ const VieworgDataanization = ({ orgId }) => {
           <div className="text-muted">{data?.contactPerson}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-5">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
@@ -57,7 +57,7 @@ const VieworgDataanization = ({ orgId }) => {
           <div className="text-muted">{data?.contactNumber}</div>
         </div>
       </div>
-      <div className="col-md-12 mb-3">
+      <div className="col-md-12 mb-5">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
@@ -68,32 +68,32 @@ const VieworgDataanization = ({ orgId }) => {
           <div className="text-muted">{data?.email}</div>
         </div>
       </div>
-      <div className="col-6 mb-3">
+      <div className="col-12 mb-5">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
             style={{ maxWidth: "130px" }}
           >
-            <i className="bx bx-sm me-1 bx-barcode"></i>
+            <i className="bx bx-sm me-2 bx-barcode"></i>
             Service Provider Id (SPRID) :
           </label>
           <div className="text-muted">{data?.sprid}</div>
         </div>
       </div>
 
-      <div className="col-6 mb-3">
+      <div className="col-12 mb-5">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
             style={{ maxWidth: "130px" }}
           >
-            <i className="bx bx-sm me-1 bx-group"></i>
+            <i className="bx bx-sm me-2 bx-group"></i>
             Employees :
           </label>
           <div className="text-muted">{data?.activeEmployeeCount}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-5">
         <div className="d-flex">
           <label
             className="form-label me-1 mb-0 fw-semibold"
@@ -104,7 +104,7 @@ const VieworgDataanization = ({ orgId }) => {
           <div className="text-muted text-start">{data?.address}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-5">
         <div
           className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
           data-bs-toggle="collapse"
@@ -162,7 +162,7 @@ const VieworgDataanization = ({ orgId }) => {
       </div>
 
       {/* Services Section */}
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-5">
         <div
           className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
           data-bs-toggle="collapse"
@@ -180,7 +180,7 @@ const VieworgDataanization = ({ orgId }) => {
           {data?.services && data.services.length > 0 ? (
             <div className="row">
               {data.services.map((service) => (
-                <div key={service.id} className="col-md-12 mb-3">
+                <div key={service.id} className="col-md-12 mb-5">
                   <div className="card h-100 shadow-sm border-0">
                     <div className="card-body">
                       <h6 className="fw-semibold mb-1">

src/components/gallary/GalleryFilterChips.jsx

@@ -0,0 +1,59 @@
+import React, { useMemo } from "react";
+
+const GalleryFilterChips = ({ filter, filterData, removeFilterChip, clearFilter }) => {
+  const data = filterData?.data || filterData || {};
+
+  const filterChips = useMemo(() => {
+    const chips = [];
+
+    const addGroup = (ids, list, label, key) => {
+      if (!ids?.length) return;
+      const items = ids.map((id) => ({
+        id,
+        name: list?.find((i) => i.id === id)?.name || id,
+      }));
+      chips.push({ key, label, items });
+    };
+
+    addGroup(filter.buildingIds, data.buildings, "Building", "buildingIds");
+    addGroup(filter.floorIds, data.floors, "Floor", "floorIds");
+    addGroup(filter.workAreaIds, data.workAreas, "Work Area", "workAreaIds");
+    addGroup(filter.activityIds, data.activities, "Activity", "activityIds");
+    addGroup(filter.workCategoryIds, data.workCategories, "Work Category", "workCategoryIds");
+    addGroup(filter.uploadedByIds, data.uploadedBy, "Uploaded By", "uploadedByIds");
+    addGroup(filter.serviceIds, data.services, "Service", "serviceIds");
+
+    return chips;
+  }, [filter, filterData]);
+
+  if (!filterChips.length) return null;
+  return (
+    <div className="d-flex flex-wrap align-items-center gap-2">
+      {filterChips.map((chipGroup) => (
+        <div key={chipGroup.key} className="d-flex align-items-center flex-wrap">
+          <span className="fw-semibold me-2">{chipGroup.label}:</span>
+          {chipGroup.items.map((item) => (
+            <span
+              key={item.id}
+              className="d-flex align-items-center bg-light rounded px-2 py-1 me-1"
+            >
+              <span>{item.name}</span>
+              <button
+                type="button"
+                className="btn-close btn-close-white btn-sm ms-2"
+                style={{
+                  filter: "invert(1) grayscale(1)",
+                  opacity: 0.7,
+                  fontSize: "0.6rem",
+                }}
+                onClick={() => removeFilterChip(chipGroup.key, item.id)}
+              />
+            </span>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default GalleryFilterChips;

src/components/gallary/GalleryFilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { useImageGalleryFilter } from "../../hooks/useImageGallery";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { FormProvider, useForm } from "react-hook-form";
@@ -10,19 +10,52 @@ import SelectMultiple from "../common/SelectMultiple";
 import { localToUtc } from "../../utils/appUtils";
 import { useLocation } from "react-router-dom";
 
-const GalleryFilterPanel = ({ onApply }) => {
+const GalleryFilterPanel = forwardRef(({ onApply, setFilterdata, clearFilter }, ref) => {
   const selectedProject = useSelectedProject();
   const [resetKey, setResetKey] = useState(0);
 
   const { data, isLoading, isError, error } =
     useImageGalleryFilter(selectedProject);
 
+
+  const dynamicDefaultFilter = useMemo(() => {
+    return {
+      ...defaultGalleryFilterValue,
+      buildingIds: defaultGalleryFilterValue.buildingIds || [],
+      floorIds: defaultGalleryFilterValue.floorIds || [],
+      workAreaIds: defaultGalleryFilterValue.workAreaIds || [],
+      activityIds: defaultGalleryFilterValue.activityIds || [],
+      workCategoryIds: defaultGalleryFilterValue.workCategoryIds || [],
+      startDate: defaultGalleryFilterValue.startDate,
+      endDate: defaultGalleryFilterValue.endDate,
+      uploadedByIds: defaultGalleryFilterValue.uploadedByIds || [],
+      serviceIds: defaultGalleryFilterValue.serviceIds || [],
+    };
+  }, [selectedProject]);
+
+  useImperativeHandle(ref, () => ({
+    resetFieldValue: (name, value) => {
+      // Reset specific field
+      if (value !== undefined) {
+        setValue(name, value);
+      } else {
+        reset({ ...methods.getValues(), [name]: defaultFilter[name] });
+      }
+    },
+    getValues: methods.getValues, // optional, to read current filter state
+  }));
+
+  useEffect(() => {
+    if (data && setFilterdata) {
+      setFilterdata(data);
+    }
+  }, [data, setFilterdata]);
   const closePanel = () => {
     document.querySelector(".offcanvas.show .btn-close")?.click();
   };
   const methods = useForm({
     resolver: zodResolver(gallerySchema),
-    defaultValues: defaultGalleryFilterValue,
+    defaultValues: dynamicDefaultFilter,
   });
 
   const {
@@ -144,6 +177,6 @@ const GalleryFilterPanel = ({ onApply }) => {
       </FormProvider>
     </div>
   );
-};
+});
 
 export default GalleryFilterPanel;

src/components/gallary/ImageGalleryListView.jsx

@@ -8,7 +8,8 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
 import Pagination from "../common/Pagination";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import { SpinnerLoader } from "../common/Loader";
-const ImageGalleryListView = ({filter}) => {
+import GalleryFilterChips from "./GalleryFilterChips";
+const ImageGalleryListView = ({ filter, filterData, removeFilterChip, clearFilter }) => {
   const [hoveredImage, setHoveredImage] = useState(null);
   const selectedProject = useSelectedProject();
   const [currentPage, setCurrentPage] = useState(1);
@@ -40,7 +41,7 @@ const ImageGalleryListView = ({filter}) => {
         </span>
       </div>
     );
-}
+  }
 
 
   if (isLoading) {
@@ -51,15 +52,25 @@ const ImageGalleryListView = ({filter}) => {
     );
   } 
 
+ 
+
+
   return (
     <div className="main-content">
+      <div className="col-12 mb-2 mt-2 px-4">
+      <GalleryFilterChips
+        filter={filter}
+        filterData={filterData}
+        removeFilterChip={removeFilterChip}
+        clearFilter={clearFilter}
+      />
+    </div>
       <div className="activity-section">
         {data?.data?.map((batch) => {
           if (!batch.documents?.length) return null;
 
           const doc = batch.documents[0];
-          const userName = `${doc.uploadedBy?.firstName || ""} ${
-            doc.uploadedBy?.lastName || ""
+          const userName = `${doc.uploadedBy?.firstName || ""} ${doc.uploadedBy?.lastName || ""
             }`.trim();
           const date = formatUTCToLocalTime(doc.uploadedAt);
           //   const hasArrows = batch.documents.length > scrollThreshold;

src/hooks/useImageGallery.js

@@ -47,6 +47,7 @@ export const useImageGalleryFilter  = (project)=>{
       const response = await ImageGalleryRepository.getImageGalleryFilter(project);
       return response.data;
     },
+    enabled:!!project
   })
 }
 

src/pages/Gallary/ImageGallaryPage.jsx

@@ -23,6 +23,7 @@ import GlobalModel from "../../components/common/GlobalModel";
 import ViewGallery from "../../components/gallary/ViewGallery";
 import { useFab } from "../../Context/FabContext";
 import GalleryFilterPanel from "../../components/gallary/GalleryFilterPanel";
+import { defaultGalleryFilterValue } from "../../components/gallary/GallerySchema";
 
 const GalleryContext = createContext();
 
@@ -36,12 +37,12 @@ export const useGalleryContext = () => {
 };
 
 const ImageGalleryPage = () => {
-  const [filter, setFilter] = useState();
+  const [filter, setFilter] = useState(defaultGalleryFilterValue);
   const selectedProjectId = useSelectedProject();
   const { projectNames } = useProjectName();
-
+  const [filterData, setFilterdata] = useState(null);
+  const updatedRef = useRef();
   const [openGallery, setOpenGallery] = useState({ isOpen: false, data: null });
-
   const { data: assignedServices = [], isLoading } =
     useProjectAssignedServices(selectedProjectId);
 
@@ -55,13 +56,18 @@ const ImageGalleryPage = () => {
     setOpenGallery,
   };
 
+  const clearFilter = () => setFilter(defaultGalleryFilterValue);
   const { setOffcanvasContent, setShowTrigger } = useFab();
 
   useEffect(() => {
     setShowTrigger(true);
     setOffcanvasContent(
       "Gallery Filter",
-      <GalleryFilterPanel onApply={setFilter} />
+      <GalleryFilterPanel
+        onApply={setFilter}
+        ref={updatedRef}
+        clearFilter={clearFilter}
+        setFilterdata={setFilterdata} />
     );
 
     return () => {
@@ -70,6 +76,22 @@ const ImageGalleryPage = () => {
     };
   }, []);
 
+  const handleRemoveChip = (key, id) => {
+    setFilter((prev) => {
+      const updated = { ...prev };
+
+      if (Array.isArray(updated[key])) {
+        updated[key] = updated[key].filter((v) => v !== id);
+        setTimeout(() => updatedRef.current?.resetFieldValue(key, updated[key]), 0);
+      } else {
+        updated[key] = null;
+        setTimeout(() => updatedRef.current?.resetFieldValue(key, null), 0);
+      }
+
+      return updated;
+    });
+  };
+
   return (
     <GalleryContext.Provider value={contextMessager}>
       <div className="container-fluid">
@@ -78,34 +100,11 @@ const ImageGalleryPage = () => {
         />
 
         <div className="card page-min-h p-2">
-          {/* {selectedProjectId && (
-            <div className="d-flex flex-row w-20 pb-2">
-            {!isLoading && assignedServices?.length === 0 ? (
-              <span className="badge bg-label-secondary">
-                Not service assiged yet
-              </span>
-            ) : (
-              <select className="form-select form-select-sm">
-                <option>Select Service</option>
-                {isLoading ? (
-                  <option>Loading...</option>
-                ) : assignedServices.length === 1 ? (
-                  <span className="badge bg-label-secondary">
-                    {assignedServices[0].name}
-                  </span>
-                ) : (
-                  assignedServices?.map((service) => (
-                    <option key={service.id} value={service?.id}>
-                      {service?.name}
-                    </option>
-                  ))
-                )}
-              </select>
-            )}
-          </div>
-          )} */}
-
-          <ImageGalleryListView filter={filter} />
+          <ImageGalleryListView
+            filter={filter}
+            filterData={filterData}
+            removeFilterChip={handleRemoveChip}
+            clearFilter={clearFilter} />
         </div>
 
         {openGallery?.isOpen && (

src/pages/collections/CollectionPage.jsx

@@ -146,7 +146,7 @@ const CollectionPage = () => {
                 value={searchText}
                 onChange={(e) => setSearchText(e.target.value)}
                 placeholder="Search Collection"
-                className="form-control form-control-sm   mt-2 mt-sm-0"
+                className="form-control form-control-sm w-25 mt-2 mt-sm-0"
               />
               <div className="d-flex justify-content-between justify-content-sm-between mt-2 mt-sm-0">
                 <FormProvider {...methods} className="me-3">