managebucket component is split

src/components/Directory/AssignedBucket.jsx

@@ -1,13 +1,67 @@
-import React from "react";
+import { useState, useEffect } from "react";
 import EmployeeList from "./EmployeeList";
+import { useAllEmployees } from "../../hooks/useEmployees";
+import showToast from "../../services/toastService";
+import { DirectoryRepository } from "../../repositories/DirectoryRepository";
+import { useAssignEmpToBucket } from "../../hooks/useDirectory";
 
-const AssignedBucket = ({ employees, selectedBucket, onChange }) => {
-  if (!selectedBucket) return null;
+const AssignedBucket = ({ selectedBucket, handleClose }) => {
+  const { employeesList } = useAllEmployees(false);
+  const [selectedEmployees, setSelectedEmployees] = useState([]);
+
+  useEffect(() => {
+    if (selectedBucket) {
+      const preselected = employeesList
+        .filter((emp) => selectedBucket?.employeeIds?.includes(emp.employeeId))
+        .map((emp) => ({ ...emp, isActive: true }));
+
+      setSelectedEmployees(preselected);
+    }
+  }, [selectedBucket, employeesList]);
+
+  const { mutate: AssignEmployee, isPending } = useAssignEmpToBucket(() =>
+    handleClose()
+  );
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const existingEmployeeIds = selectedBucket?.employeeIds || [];
+
+    const employeesToUpdate = selectedEmployees.filter((emp) => {
+      const isExisting = existingEmployeeIds.includes(emp.employeeId);
+      return (!isExisting && emp.isActive) || (isExisting && !emp.isActive);
+    });
+
+    if (employeesToUpdate.length === 0) {
+      showToast("No changes to update", "info");
+      return;
+    }
+
+    AssignEmployee({
+      bucketId: selectedBucket.id,
+      EmployeePayload: employeesToUpdate.map((emp) => ({
+        employeeId: emp.employeeId,
+        isActive: emp.isActive,
+      })),
+    });
+  };
 
   return (
-    <div className="mt-1">
-      <EmployeeList employees={employees} onChange={onChange} bucket={selectedBucket} />
-    </div>
+    <form onSubmit={handleSubmit}>
+      <EmployeeList
+        employees={employeesList}
+        bucket={selectedBucket}
+        selectedEmployees={selectedEmployees}
+        onChange={setSelectedEmployees}
+      />
+
+      <div className="mt-3 d-flex justify-content-end gap-3">
+        <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
+         {isPending ? "Please Wait...":"Assign"}
+        </button>
+      </div>
+    </form>
   );
 };
 

src/components/Directory/BucketForm.jsx

@@ -1,9 +1,10 @@
-import React from "react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { bucketScheam } from "./DirectorySchema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Label from "../common/Label";
 
-const BucketForm = ({ onSubmit, selectedBucket, onCancel, isSubmitting }) => {
+const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) => {
   const {
     register,
     handleSubmit,
@@ -11,33 +12,83 @@ const BucketForm = ({ onSubmit, selectedBucket, onCancel, isSubmitting }) => {
     formState: { errors },
   } = useForm({
     resolver: zodResolver(bucketScheam),
-    defaultValues: {
-      name: selectedBucket?.name || "",
-      description: selectedBucket?.description || "",
-    },
+    defaultValues: selectedBucket || { name: "", description: "" },
   });
 
+  useEffect(() => {
+    reset(selectedBucket || { name: "", description: "" });
+  }, [selectedBucket, reset]);
+
+  const isEditMode = mode === "edit";
+  const isCreateMode = mode === "create";
+
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
-      <div className="mb-3">
-        <label htmlFor="bucketName" className="form-label">Bucket Name</label>
-        <input id="bucketName" className="form-control form-control-sm" {...register("name")} />
-        {errors.name && <small className="danger-text">{errors.name.message}</small>}
+    <div className="row">
+      <div className="d-flex justify-content-between align-items-center">
+        <i
+          className="bx bx-left-arrow-alt bx-md cursor-pointer"
+          onClick={onCancel}
+        ></i>
+
+        {/* Show edit toggle only for existing bucket in edit mode */}
+        {/* {isEditMode && (
+          <i className="bx bx-edit bx-sm text-primary cursor-pointer"></i>
+        )} */}
       </div>
 
-      <div className="mb-3">
-        <label htmlFor="bucketDescription" className="form-label">Bucket Description</label>
-        <textarea id="bucketDescription" className="form-control form-control-sm" rows="3" {...register("description")} />
-        {errors.description && <small className="danger-text">{errors.description.message}</small>}
-      </div>
+      {(isCreateMode || isEditMode) ? (
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="mb-3">
+            <Label htmlFor="Name" className="text-start" required>
+              Name
+            </Label>
+            <input
+              className="form-control form-control-sm"
+              {...register("name")}
+            />
+            {errors.name && (
+              <small className="danger-text">{errors.name.message}</small>
+            )}
+          </div>
 
-      <div className="mt-4 d-flex justify-content-center gap-3">
-        <button type="button" onClick={onCancel} className="btn btn-sm btn-secondary" disabled={isSubmitting}>Cancel</button>
-        <button type="submit" className="btn btn-sm btn-primary" disabled={isSubmitting}>
-          {isSubmitting ? "Please wait..." : "Submit"}
-        </button>
-      </div>
-    </form>
+          <div className="mb-3">
+            <Label htmlFor="description" className="text-start" required>
+              Description
+            </Label>
+            <textarea
+              className="form-control form-control-sm"
+              {...register("description")}
+              rows="3"
+            />
+            {errors.description && (
+              <small className="danger-text">{errors.description.message}</small>
+            )}
+          </div>
+
+          <div className="mt-4 d-flex gap-3 justify-content-end">
+            <button
+              type="button"
+              className="btn btn-sm btn-secondary"
+              onClick={onCancel}
+              disabled={isPending}
+            >
+              Cancel
+            </button>
+            <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
+              {isPending ? "Please Wait " : isEditMode ? "Update" : "Create"}
+            </button>
+          </div>
+        </form>
+      ) : (
+        <dl className="row text-start my-2">
+          <dt className="col-sm-2">Name</dt>
+          <dd className="col-sm-10">{selectedBucket?.name || "-"}</dd>
+
+          <dt className="col-sm-2">Description</dt>
+          <dd className="col-sm-10">{selectedBucket?.description || "-"}</dd>
+        </dl>
+      )}
+    </div>
   );
 };
 

src/components/Directory/BucketList.jsx

@@ -1,30 +1,34 @@
-import React from "react";
-
-const BucketList = ({ buckets, searchTerm, onEdit, onDelete, loading }) => {
-  const filteredBuckets = buckets.filter(bucket =>
+const BucketList = ({ buckets, loading, searchTerm, onEdit, onDelete }) => {
+  const sorted = buckets.filter((bucket) =>
     bucket.name.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
-  if (loading) return <p className="text-center">Loading...</p>;
-  if (filteredBuckets.length === 0) return <p className="text-center">No buckets found.</p>;
+  if (loading) return <div>Loading...</div>;
+  if (!loading && sorted.length === 0) return <div>No buckets found</div>;
 
   return (
     <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0">
-      {filteredBuckets.map(bucket => (
+      {sorted.map((bucket) => (
         <div className="col" key={bucket.id}>
           <div className="card h-100">
             <div className="card-body p-4">
               <h6 className="card-title d-flex justify-content-between">
                 <span>{bucket.name}</span>
                 <div className="d-flex gap-2">
-                  <i className="bx bx-edit bx-sm text-primary cursor-pointer" onClick={() => onEdit(bucket)}></i>
-                  <i className="bx bx-trash bx-sm text-danger cursor-pointer" onClick={() => onDelete(bucket.id)}></i>
+                  <i
+                    className="bx bx-edit bx-sm text-primary cursor-pointer"
+                    onClick={() => onEdit(bucket)}
+                  />
+                  <i
+                    className="bx bx-trash bx-sm text-danger cursor-pointer"
+                    onClick={() => onDelete(bucket.id)}
+                  />
                 </div>
               </h6>
-              <h6 className="card-subtitle mb-2 text-muted">Contacts: {bucket.numberOfContacts || 0}</h6>
-              <p className="card-text" title={bucket.description}>
-                {bucket.description || "No description available."}
-              </p>
+              <h6 className="card-subtitle mb-2 text-muted">
+                Contacts: {bucket.numberOfContacts || 0}
+              </h6>
+              <p className="card-text">{bucket.description || "No description"}</p>
             </div>
           </div>
         </div>
@@ -33,4 +37,4 @@ const BucketList = ({ buckets, searchTerm, onEdit, onDelete, loading }) => {
   );
 };
 
-export default BucketList;
+export default BucketList;

src/components/Directory/ManageBucket1.jsx

@@ -1,14 +1,98 @@
-import React from "react";
+import { useState } from "react";
+import {
+  useBucketList,
+  useBuckets,
+  useCreateBucket,
+  useUpdateBucket,
+} from "../../hooks/useDirectory";
+import { useAllEmployees } from "../../hooks/useEmployees";
+import BucketList from "./BucketList";
+import BucketForm from "./BucketForm";
+import AssignEmployees from "./AssignedBucket";
+import AssignedBucket from "./AssignedBucket";
+
+const ManageBucket1 = () => {
+  const { data, isError, isLoading, error } = useBucketList();
+  const { employeesList } = useAllEmployees(false);
+  const [action, setAction] = useState(null); // "create" | "edit" | null
+  const [selectedBucket, setSelectedBucket] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const handleClose = ()=>{
+  setAction(null);
+    setSelectedBucket(null);
+  }
+  const { mutate: createBucket, isPending: creating } = useCreateBucket(() => {
+    handleClose()
+  });
+  const { mutate: updateBucket, isPending: updating } = useUpdateBucket(() => {
+    handleClose()
+  });
+
+  const handleSubmit = (BucketPayload) => {
+    if (selectedBucket) {
+      updateBucket({
+        bucketId: selectedBucket.id,
+        BucketPayload: { ...BucketPayload, id: selectedBucket.id },
+      });
+    } else createBucket(BucketPayload);
+  };
+
+
 
-const ManageBucket1 = ({ closeModal }) => {
   return (
-    <div className="container">
-      <div className="text-center">
-        <h5 className="fw-semibold">Manage Bucket</h5>
+    <div className="container m-0 p-0" style={{ minHeight: "00px" }}>
+      <div className="d-flex justify-content-center">
+        <p className="fs-6 fw-semibold m-0">Manage Buckets</p>
       </div>
-      <div className="text-start p-0"></div>
+      {action ? (
+        <>
+          <BucketForm
+            selectedBucket={selectedBucket}
+            mode={action} // pass create | edit
+            onSubmit={handleSubmit}
+            onCancel={() => {
+              setAction(null);
+              setSelectedBucket(null);
+            }}
+            isPending={creating || updating}
+          />
+          {action === "edit" && selectedBucket && (
+            <AssignedBucket selectedBucket={selectedBucket} handleClose={handleClose} />
+          )}
+        </>
+      ) : (
+        <>
+          <div className="d-flex justify-content-between align-items-center gap-2 my-2">
+            <input
+              type="search"
+              className="form-control form-control-sm w-25"
+              placeholder="Search..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <button
+              className="btn btn-sm btn-primary"
+              onClick={() => setAction("create")}
+            >
+              <i className="bx bx-plus-circle me-2"></i>
+              Add Bucket
+            </button>
+          </div>
+
+          <BucketList
+            buckets={data}
+            loading={isLoading}
+            searchTerm={searchTerm}
+            onEdit={(bucket) => {
+              setSelectedBucket(bucket);
+              setAction("edit");
+            }}
+            onDelete={(id) => console.log("delete", id)}
+          />
+        </>
+      )}
     </div>
   );
 };
-
 export default ManageBucket1;

src/hooks/useDirectory.js

@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react";
 import { DirectoryRepository } from "../repositories/DirectoryRepository";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import showToast from "../services/toastService";
 
-export const useDirectory = (isActive,prefernceContacts) => {
+export const useDirectory = (isActive, prefernceContacts) => {
   const [contacts, setContacts] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -11,7 +12,10 @@ export const useDirectory = (isActive,prefernceContacts) => {
   const fetch = async (activeParam = isActive) => {
     setLoading(true);
     try {
-      const response = await DirectoryRepository.GetContacts(activeParam,prefernceContacts);
+      const response = await DirectoryRepository.GetContacts(
+        activeParam,
+        prefernceContacts
+      );
       setContacts(response.data);
       cacheData("contacts", { data: response.data, isActive: activeParam });
     } catch (error) {
@@ -23,12 +27,16 @@ export const useDirectory = (isActive,prefernceContacts) => {
 
   useEffect(() => {
     const cachedContacts = getCachedData("contacts");
-    if (!cachedContacts?.data || cachedContacts.isActive !== isActive || prefernceContacts) {
-      fetch(isActive,prefernceContacts);
+    if (
+      !cachedContacts?.data ||
+      cachedContacts.isActive !== isActive ||
+      prefernceContacts
+    ) {
+      fetch(isActive, prefernceContacts);
     } else {
       setContacts(cachedContacts.data);
     }
-  }, [isActive,prefernceContacts]);
+  }, [isActive, prefernceContacts]);
 
   return {
     contacts,
@@ -55,7 +63,7 @@ export const useBuckets = () => {
         error?.response?.data?.message ||
         error?.message ||
         "Something went wrong";
-      setError( msg );
+      setError(msg);
       setLoading(false);
     }
   };
@@ -78,35 +86,30 @@ export const useContactProfile = (id) => {
   const [Error, setError] = useState("");
 
   const fetchContactProfile = async () => {
-
-      setLoading(true);
-      try {
-        const resp = await DirectoryRepository.GetContactProfile(id);
-        setContactProfile(resp.data);
-        cacheData("Contact Profile", { data: resp.data, contactId: id });
-      } catch (err) {
-        const msg =
-          err?.response?.data?.message ||
-          err?.message ||
-          "Something went wrong";
-        setError(msg);
-      } finally {
-        setLoading(false);
-      }
-    
+    setLoading(true);
+    try {
+      const resp = await DirectoryRepository.GetContactProfile(id);
+      setContactProfile(resp.data);
+      cacheData("Contact Profile", { data: resp.data, contactId: id });
+    } catch (err) {
+      const msg =
+        err?.response?.data?.message || err?.message || "Something went wrong";
+      setError(msg);
+    } finally {
+      setLoading(false);
+    }
   };
 
-  useEffect( () =>
-  {
+  useEffect(() => {
     const cached = getCachedData("Contact Profile");
-       if (!cached || cached.contactId !== id) {
+    if (!cached || cached.contactId !== id) {
       fetchContactProfile(id);
     } else {
       setContactProfile(cached.data);
     }
   }, [id]);
 
-  return { contactProfile, loading, Error ,refetch:fetchContactProfile};
+  return { contactProfile, loading, Error, refetch: fetchContactProfile };
 };
 
 export const useContactNotes = (id, IsActive) => {
@@ -114,36 +117,31 @@ export const useContactNotes = (id, IsActive) => {
   const [loading, setLoading] = useState(false);
   const [Error, setError] = useState("");
 
-  const fetchContactNotes = async (id,IsActive) => {
-   
-
-      setLoading(true);
-      try {
-        const resp = await DirectoryRepository.GetNote(id, IsActive);
-        setContactNotes(resp.data);
-        cacheData("Contact Notes", { data: resp.data, contactId: id });
-      } catch (err) {
-        const msg =
-          err?.response?.data?.message ||
-          err?.message ||
-          "Something went wrong";
-        setError(msg);
-      } finally {
-        setLoading(false);
-      }
-   
+  const fetchContactNotes = async (id, IsActive) => {
+    setLoading(true);
+    try {
+      const resp = await DirectoryRepository.GetNote(id, IsActive);
+      setContactNotes(resp.data);
+      cacheData("Contact Notes", { data: resp.data, contactId: id });
+    } catch (err) {
+      const msg =
+        err?.response?.data?.message || err?.message || "Something went wrong";
+      setError(msg);
+    } finally {
+      setLoading(false);
+    }
   };
 
   useEffect(() => {
     const cached = getCachedData("Contact Notes");
     if (!cached || cached.contactId !== id) {
-      id && fetchContactNotes(id,IsActive);
-     } else {
+      id && fetchContactNotes(id, IsActive);
+    } else {
       setContactNotes(cached.data);
     }
-  }, [id,IsActive]);
+  }, [id, IsActive]);
 
-  return { contactNotes, loading, Error,refetch:fetchContactNotes };
+  return { contactNotes, loading, Error, refetch: fetchContactNotes };
 };
 
 export const useOrganization = () => {
@@ -212,21 +210,115 @@ export const useDesignation = () => {
   return { designationList, loading, error };
 };
 
-// ------------------------------Query--------------------------------------------
+// ------------------------------Query------------------------------------------------------------------
 
-export const useBucketList =()=>{
+export const useBucketList = () => {
   return useQuery({
-    queryKey:["bucketList"],
-    queryFn:async()=>{
+    queryKey: ["bucketList"],
+    queryFn: async () => {
       const resp = await DirectoryRepository.GetBucktes();
       return resp.data;
-    }
+    },
+  });
+};
+
+export const useDirectoryNotes = (
+  pageSize,
+  pageNumber,
+  filter,
+  searchString
+) => {
+  return useQuery({
+    queryKey: ["directoryNotes", pageSize, pageNumber, filter, searchString],
+    queryFn: async () =>
+      await DirectoryRepository.GetBucktes(
+        pageSize,
+        pageNumber,
+        filter,
+        searchString
+      ),
+  });
+};
+
+// ---------------------------Mutation------------------------------------------------------------------
+
+export const useCreateBucket =(onSuccessCallBack)=>{
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn:async(BucketPayload)=> await DirectoryRepository.CreateBuckets(BucketPayload),
+     onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({queryKey: ["bucketList"]})
+      showToast("Bucket created Successfully", "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.response.data.message ||
+          "Something went wrong.Please try again later.",
+        "error"
+      );
+    },
   })
 }
 
-export const useDirectoryNotes=(pageSize, pageNumber, filter, searchString)=>{
-  return useQuery({
-    queryKey:["directoryNotes",pageSize, pageNumber, filter, searchString],
-    queryFn:async()=>  await DirectoryRepository.GetBucktes(pageSize, pageNumber, filter, searchString), 
+
+export const useUpdateBucket = (onSuccessCallBack) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ bucketId, BucketPayload}) => await DirectoryRepository.UpdateBuckets(bucketId, BucketPayload),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["bucketList"] });
+      showToast("Bucket updated successfully", "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          "Something went wrong. Please try again later.",
+        "error"
+      );
+    },
+  });
+};
+
+
+export const useAssignEmpToBucket =()=>{
+  return useMutation({
+
+     mutationFn:async({bucketId,EmployeePayload})=> await DirectoryRepository.AssignedBuckets(bucketId,EmployeePayload),
+     onSuccess: (_, variables) => {
+      const {EmployeePayload} = variables
+      queryClient.invalidateQueries({queryKey: ["bucketList"]})
+      showToast(`Bucket shared ${EmployeePayload?.length} Employee Successfully`, "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.response.data.message ||
+          "Something went wrong.Please try again later.",
+        "error"
+      );
+    },
   })
-}
+}
+export const useDeleteBucket = (onSuccessCallBack) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (bucketId) =>
+      await DirectoryRepository.DeleteBucket(bucketId),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({queryKey: ["bucketList"]})
+      showToast("Bucket deleted Successfully", "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.response.data.message ||
+          "Something went wrong.Please try again later.",
+        "error"
+      );
+    },
+  });
+};
+