Merge pull request 'Implemented delete functionality for contacts' (#130) from pramod_Task-#321 into Feature_Directory

Reviewed-on: #130

src/components/Directory/CardViewDirectory.jsx

@@ -1,7 +1,11 @@
 import React from "react";
 import Avatar from "../common/Avatar";
-
+import {getBucketNameById} from "./DirectoryUtils";
-const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen_contact,setIsOpenModalNote }) => {
+import {useBuckets} from "../../hooks/useDirectory";
+import { getPhoneIcon } from "./DirectoryUtils";
+const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpen_contact, setIsOpenModalNote, IsDeleted} ) =>
+{
+  const {buckets} = useBuckets()
   return (
     <div className="card text-start border-1">
       <div className="card-body  px-1 py-2 pb-0">
@@ -48,7 +52,7 @@ const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen
                   </a>
                 </li>
                 <li>
-                  <a className="dropdown-item  px-2 py-0">
+                  <a className="dropdown-item  px-2 py-0" onClick={()=> IsDeleted(contact.id)}>
                     <i className="bx bx-trash bx-xs me-2"></i>
                     <span className="align-left small-text">Delete</span>
                   </a>
@@ -87,7 +91,7 @@ const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen
         {contact.contactPhones[0] && (
           <ul className="list-inline m-0">
             <li className="list-inline-item me-2">
-              <i className="bx bx-phone bx-xs"></i>
+              <i className={` ${getPhoneIcon(contact.contactPhones[0].label)} bx-xs`} ></i>
             </li>
             <li className="list-inline-item small-text">
               {contact.contactPhones[0]?.phoneNumber}
@@ -103,6 +107,20 @@ const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen
             {contact.contactCategory.name}
           </li>
         </ul>
+
+        <ul className="list-inline m-0">
+          {contact.bucketIds.map( ( bucketId ) => (
+            <>
+            
+                  <li className="list-inline-item me-1">
+            <i className="bx bx-pin bx-xs"></i>
+          </li>
+          <li className="list-inline-item small-text">
+            {getBucketNameById(buckets,bucketId)}
+          </li></>
+          ))}
+      
+        </ul>
       </div>
     </div>
   );

src/components/Directory/DirectoryUtils.js

@@ -0,0 +1,26 @@
+import {useBuckets} from "../../hooks/useDirectory";
+
+export const getEmailIcon = (type) => {
+  switch (type) {
+    case 'Work': return "bx bx-briefcase me-1 " ;
+    case 'Personal': return "bx bx-user me-1";
+    case 'support': return "bx headphone-mic me-1";
+    case 'billing': return "bx bx-receipt me-1";
+    default: return "bx bx-envelope me-1";
+  }
+};
+
+export const getPhoneIcon = (type) => {
+  switch (type) {
+    case 'Business': return "bx bx-phone me-1 ";
+    case 'Personal': return "bx bx-mobile me-1 ";
+    case 'Office': return "bx bx-phone me-1 ";
+    default: return "bx bx-phone me-1";
+  }
+};
+
+
+export const getBucketNameById = (buckets, id) => {
+  const bucket = buckets.find(b => b.id === id);
+  return bucket ? bucket.name : 'Unknown';
+};

src/components/Directory/ListViewDirectory.jsx

@@ -1,33 +1,16 @@
 import React from 'react'
 import Avatar from '../common/Avatar';
+import { getEmailIcon,getPhoneIcon } from './DirectoryUtils';
 
-const getEmailIcon = (type) => {
-  switch (type) {
-    case 'work': return "bx bx-briefcase me-1 " ;
-    case 'personal': return "bx bx-user me-1";
-    case 'support': return "bxr headphone-mic me-1";
-    case 'billing': return "bx bx-receipt me-1";
-    default: return "bx bx-envelope me-1";
-  }
-};
 
-const getPhoneIcon = (type) => {
+const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
-  switch (type) {
-    case 'business': return "bx bx-briefcase me-1 ";
-    case 'home': return "bx bx-mobile me-1 ";
-    case 'personal': return "bx bx-user me-1 ";
-    case 'landline': return "bx bx-phone me-1 ";
-    case 'fax': return "bx bx-printer me-1";
-    case 'whatsapp': return "bxl-whatsapp me-1";
-    case 'emergency': return "bx bx-error-circle me-1";
-    default: return "bx bx-phone me-1";
-  }
-};
-
-const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
   return (
     <tr  >
-      <td className="text-start" style={{width: '18%'}} colSpan={2}>
+      <td className="text-start cursor-pointer" style={{width: '18%'}} colSpan={2} onClick={() =>
+      {
+         setIsOpenModalNote(true)
+        setOpen_contact(contact)
+      }}>
      <div className="d-flex align-items-center">
   <Avatar
   size="xs"
@@ -81,7 +64,7 @@ const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
           setSelectedContact( contact )
           setIsOpenModal(true)
         }}></i>
-         <i className='bx bx-trash bx-sm text-danger cursor-pointer'></i>
+         <i className='bx bx-trash bx-sm text-danger cursor-pointer' onClick={()=> IsDeleted(contact.id)}></i>
       </td>
     </tr>
   );

src/components/Directory/NoteCardDirectory.jsx

@@ -120,7 +120,11 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
               {noteItem.createdBy.firstName} {noteItem.createdBy.lastName}
             </span>
             <span className="text-muted" style={{ fontSize: "10px" }}>
-              {moment(noteItem.createdAt).format("MMMM DD, YYYY [at] hh:mm A")}
+              {moment
+                .utc(noteItem.createdAt)
+                .add(5, "hours")
+                .add(30, "minutes")
+                .format("MMMM DD, YYYY [at] hh:mm A")}
             </span>
           </div>
         </div>

src/components/Directory/NotesDirectory.jsx

@@ -83,27 +83,19 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
 
   return (
     <div className="text-start">
-      <div
+      <div className="d-flex align-items-center justify-content-between">
-        className={`${
+        <p className="fw-semibold m-0">Notes :</p>
-          contactProfile?.notes?.length > 0
+        <span
-            ? "d-flex justify-content-between"
+          className={`btn btn-xs   ${addNote ? "btn-danger" : "btn-primary"}`}
-            : "d-flex justify-content-end"
+          onClick={() => setAddNote( !addNote )}
-        }`}
-      >
-        {contactProfile?.notes.length > 0 && (
-          <p className="fw-semibold m-0">Notes :</p>
-        )}
-        <a
-          className="small-text m-0 cursor-pointer"
-          onClick={() => setAddNote(!addNote)}
         >
-          <u>
+          {/* <i
-            {addNote ? "" : "Add Note"}
+            className={`icon-base  bx ${
-            <i
+              addNote ? "bx-x bx-sm" : "bx-pencil"
-              className={`bx  ${addNote ? "bx-x" : "bx-pencil"} bx-xs`}
+            } bx-xs `}
-            ></i>{" "}
+          ></i> */}
-          </u>{" "}
+          {addNote ? "close" : "Add Note"}
-        </a>
+        </span>
       </div>
       {addNote && (
         <form onSubmit={handleSubmit(onSubmit)}>
@@ -119,10 +111,7 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
           )}
         </form>
       )}
-      <div
+      <div className=" justify-content-start  px-1 mt-1">
-        className=" justify-content-start overflow-auto px-1"
-        style={{ maxHeight: "300px" }}
-      >
         {isLoading && (
           <div className="text-center">
             {" "}
@@ -139,7 +128,8 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
                 setProfileContact={setProfileContact}
                 key={noteItem.id}
               />
-            ))}
+            ) )}
+        <p>{!isLoading && contactProfile?.notes.length == 0 && !addNote && (<p className="text-center">No Notes Found</p>) }</p>
       </div>
     </div>
   );

src/pages/Directory/Directory.jsx

@@ -6,7 +6,7 @@ import ManageDirectory from "../../components/Directory/ManageDirectory";
 import ListViewDirectory from "../../components/Directory/ListViewDirectory";
 import { useBuckets, useDirectory } from "../../hooks/useDirectory";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
-import { getCachedData } from "../../slices/apiDataManager";
+import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
 import UpdateContact from "../../components/Directory/UpdateContact";
 import CardViewDirectory from "../../components/Directory/CardViewDirectory";
@@ -14,6 +14,7 @@ import { useContactCategory } from "../../hooks/masterHook/useMaster";
 import usePagination from "../../hooks/usePagination";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
+import ConfirmModal from "../../components/common/ConfirmModal";
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
@@ -25,6 +26,11 @@ const Directory = () => {
   const [searchText, setSearchText] = useState("");
   const [listView, setListView] = useState(false);
   const [selectedBucketIds, setSelectedBucketIds] = useState([]);
+  const [deleteContact, setDeleteContact] = useState(null);
+  const [IsDeleting, setIsDeletng] = useState(false);
+
+  const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
+  const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
 
   const { contacts, loading } = useDirectory();
   const { contactCategory, loading: contactCategoryLoading } =
@@ -61,36 +67,64 @@ const Directory = () => {
     }
   };
 
+  const handleDeleteContact = async () => {
+    try {
+      setIsDeletng(true);
+      const contacts_cache = getCachedData("contacts") || [];
+
+      const response = await DirectoryRepository.DeleteContact(deleteContact);
+      const updatedContacts = ContactList.filter((c) => c.id !== deleteContact);
+      setContactList(updatedContacts);
+      cacheData("Contacts", updatedContacts);
+      showToast("Contact deleted successfully", "success");
+      setDeleteContact(null);
+
+      setIsDeletng(false);
+    } catch (error) {
+      const msg =
+        error.response.data.message ||
+        error.message ||
+        "Error occured during API calling";
+      showToast(msg, "error");
+      setIsDeletng(false);
+    }
+  };
+
   const closedModel = () => {
     setIsOpenModal(false);
     setSelectedContact(null);
     setOpen_contact(null);
   };
-  useEffect(() => {
-    setContactList(contacts);
-  }, [contacts]);
-
   const [selectedCategoryIds, setSelectedCategoryIds] = useState(
     contactCategory.map((category) => category.id)
   );
 
+  useEffect(() => {
+    setContactList(contacts);
+
+    // Set temp filter list only (UI checkboxes, not actual filtering yet)
+    setTempSelectedCategoryIds([]);
+    setTempSelectedBucketIds([]);
+  }, [contacts]);
+
   const usedCategoryIds = [
     ...new Set(contacts.map((c) => c.contactCategory?.id)),
   ];
   const filteredCategories = contactCategory.filter((category) =>
     usedCategoryIds.includes(category.id)
   );
-  const handleCategoryChange = (id) => {
+  const handleTempBucketChange = (id) => {
-    setSelectedCategoryIds((prev) =>
+    setTempSelectedBucketIds((prev) =>
+      prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
+    );
+  };
+
+  const handleTempCategoryChange = (id) => {
+    setTempSelectedCategoryIds((prev) =>
       prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id]
     );
   };
 
-  const handleBucketChange = (id) => {
-    setSelectedBucketIds((prev) =>
-      prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
-    );
-  };
   const usedBucketIds = [
     ...new Set(contacts.flatMap((c) => c.bucketIds || [])),
   ];
@@ -117,6 +151,18 @@ const Directory = () => {
     }).sort((a, b) => a.name.localeCompare(b.name));
   }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]);
 
+  const applyFilter = () => {
+    setSelectedBucketIds(tempSelectedBucketIds);
+    setSelectedCategoryIds(tempSelectedCategoryIds);
+  };
+
+  const clearFilter = () => {
+    setTempSelectedBucketIds([]);
+    setTempSelectedCategoryIds([]);
+    setSelectedBucketIds([]);
+    setSelectedCategoryIds([]);
+  };
+
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredContacts,
     ITEMS_PER_PAGE
@@ -145,7 +191,7 @@ const Directory = () => {
       <Breadcrumb
         data={[
           { label: "Home", link: "/dashboard" },
-          { label: "Directory (Comming Soon)", link: null },
+          { label: "Directory", link: null },
         ]}
       ></Breadcrumb>
 
@@ -179,6 +225,28 @@ const Directory = () => {
           )}
         </GlobalModel>
       )}
+      {deleteContact && (
+        <div
+          className={`modal fade  ${deleteContact ? "show" : ""}`}
+          tabIndex="-1"
+          role="dialog"
+          style={{
+            display: deleteContact ? "block" : "none",
+            backgroundColor: deleteContact ? "rgba(0,0,0,0.5)" : "transparent",
+          }}
+          aria-hidden="false"
+        >
+          <ConfirmModal
+            type={"delete"}
+            header={"Delete Contact"}
+            message={"Are you sure you want delete?"}
+            onSubmit={handleDeleteContact}
+            onClose={() => setDeleteContact(null)}
+            loading={IsDeleting}
+          />
+        </div>
+      )}
+
       <div className="card p-2">
         <div className="row mx-0 px-0 align-items-center">
           <div className="col-12 col-md-4 mb-2 px-1 d-flex align-items-center ">
@@ -219,69 +287,108 @@ const Directory = () => {
                 <i className="bx bx-list-ul bx-sm"></i>
               </button>
             </div>
-            <div className="dropdown">
+            <div className="dropdown" style={{ width: "fit-content" }}>
-              <a
+              <div className="dropdown" style={{ width: "fit-content" }}>
-                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
+                <a
-                data-bs-toggle="dropdown"
+                  className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
-                aria-expanded="false"
+                  data-bs-toggle="dropdown"
-              >
+                  aria-expanded="false"
-                <i className="bx bx-filter bx-lg  ms-1"></i>
+                >
-              </a>
+                  <i className="fa-solid fa-filter ms-1 fs-5"></i>
-              <ul
+                </a>
-                className="dropdown-menu p-2 text-capitalize"
-                style={{ Width: "100%" }}
-              >
-                <p className="small-text text-muted m-0">Filter by</p>
-                <div className="d-flex gap-4 justify-content-between">
-                  {/* Bucket Filter */}
-                  <div className="flex-fill ">
-                    <p className="small-text mb-2 ">Buckets</p>
-                    {filteredBuckets.map(({ id, name }) => (
-                      <div className="form-check mb-1" key={id}>
-                        <input
-                          className="form-check-input  "
-                          type="checkbox"
-                          id={`bucket-${id}`}
-                          checked={selectedBucketIds.includes(id)}
-                          onChange={() => handleBucketChange(id)}
-                        />
-                        <label
-                          className="form-check-label text-nowrap"
-                          htmlFor={`bucket-${id}`}
-                        >
-                          {name}
-                        </label>
-                      </div>
-                    ))}
-                  </div>
 
-                  {/* Category Filter */}
+                <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
-                  <div className="flex-fill">
+                  <div>
-                    <p className="small-text mb-2">Categories</p>
+                    <p className="small-text text-muted m-0">Filter by</p>
-                    {filteredCategories.map(({ id, name }) => (
+
-                      <div className="form-check mb-1" key={id}>
+                    {/* Bucket Filter */}
-                        <input
+                    <div className="mt-1">
-                          className="form-check-input"
+                      <p className="small-text mb-1 fw-semibold">Buckets</p>
-                          type="checkbox"
+                      <div className="d-flex flex-wrap">
-                          id={`cat-${id}`}
+                        {filteredBuckets.map(({ id, name }) => (
-                          checked={selectedCategoryIds.includes(id)}
+                          <div
-                          onChange={() => handleCategoryChange(id)}
+                            className="form-check me-1 mb-1"
-                        />
+                            style={{ width: "33.33%" }}
-                        <label
+                            key={id}
-                          className="form-check-label text-nowrap"
+                          >
-                          htmlFor={`cat-${id}`}
+                            <input
-                        >
+                              className="form-check-input"
-                          {name}
+                              type="checkbox"
-                        </label>
+                              id={`bucket-${id}`}
+                              checked={tempSelectedBucketIds.includes(id)}
+                              onChange={() => handleTempBucketChange(id)}
+                            />
+                            <label
+                              className="form-check-label text-nowrap small-text"
+                              htmlFor={`bucket-${id}`}
+                            >
+                              {name}
+                            </label>
+                          </div>
+                        ))}
                       </div>
-                    ))}
+                    </div>
+                    <hr className="m-0" />
+                    {/* Category Filter */}
+                    <div className="mt-1">
+                      <p className="small-text mb-1 fw-semibold">Categories</p>
+                      <div className="d-flex flex-wrap">
+                        {filteredCategories.map(({ id, name }) => (
+                          <div
+                            className="form-check me-1 mb-1"
+                            style={{ width: "33.33%" }}
+                            key={id}
+                          >
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              id={`cat-${id}`}
+                              checked={tempSelectedCategoryIds.includes(id)}
+                              onChange={() => handleTempCategoryChange(id)}
+                            />
+                            <label
+                              className="form-check-label text-nowrap small-text"
+                              htmlFor={`cat-${id}`}
+                            >
+                              {name}
+                            </label>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    <div className="d-flex justify-content-end gap-2 mt-1">
+                      <button
+                        className="btn btn-xs btn-secondary"
+                        onClick={clearFilter}
+                      >
+                        Clear
+                      </button>
+                      <button
+                        className="btn btn-xs btn-primary"
+                        onClick={applyFilter}
+                      >
+                        Apply Filter
+                      </button>
+                    </div>
                   </div>
-                </div>
+                </ul>
-              </ul>
+              </div>
             </div>
           </div>
-
           <div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
+            <label class="switch switch-primary">
+              <input type="checkbox" class="switch-input" />
+              <span class="switch-toggle-slider">
+                <span class="switch-on">
+                  {/* <i class="icon-base bx bx-check"></i> */}
+                </span>
+                <span class="switch-off">
+                  {/* <i class="icon-base bx bx-x"></i> */}
+                </span>
+              </span>
+              <span class="switch-label">Show Inactive Contacts</span>
+            </label>
             <button
               type="button"
               className="btn btn-xs btn-primary"
@@ -293,7 +400,9 @@ const Directory = () => {
           </div>
         </div>
         {!listView && loading && <p>Loading...</p>}
-        {!listView && !loading && currentItems.length == 0  && <p>Not Found Contact</p>}
+        {!listView && !loading && currentItems.length == 0 && (
+          <p>No Matching Contact Found</p>
+        )}
         {listView ? (
           <div className="table-responsive text-nowrap py-2 ">
             <table className="table px-2">
@@ -343,10 +452,7 @@ const Directory = () => {
                     </div>
                   </th>
                   <th className="mx-2">Category</th>
-                  <th
+                  <th>Action</th>
-                  >
-                    Action
-                  </th>
                 </tr>
               </thead>
               <tbody className="table-border-bottom-0 overflow-auto ">
@@ -355,13 +461,12 @@ const Directory = () => {
                     <td colSpan={10}>Loading...</td>
                   </tr>
                 )}
-                {!loading &&
+                {!loading && currentItems.length === 0 && (
-                  currentItems.length === 0 && (
+                  <tr>
-                    <tr>
+                    <td colSpan={10}>No Matching Contact Found</td>
-                      <td colSpan={10}>Not Found Contact</td>
+                  </tr>
-                    </tr>
+                )}
-                  )}
+
-                
                 {!loading &&
                   currentItems.map((contact) => (
                     <ListViewDirectory
@@ -369,6 +474,9 @@ const Directory = () => {
                       contact={contact}
                       setSelectedContact={setSelectedContact}
                       setIsOpenModal={setIsOpenModal}
+                      setOpen_contact={setOpen_contact}
+                      setIsOpenModalNote={setIsOpenModalNote}
+                      IsDeleted={setDeleteContact}
                     />
                   ))}
               </tbody>
@@ -387,13 +495,14 @@ const Directory = () => {
                   setIsOpenModal={setIsOpenModal}
                   setOpen_contact={setOpen_contact}
                   setIsOpenModalNote={setIsOpenModalNote}
+                  IsDeleted={setDeleteContact}
                 />
               </div>
             ))}
           </div>
         )}
 
-        {!loading && (
+        {!loading && currentItems < ITEMS_PER_PAGE && (
           <nav aria-label="Page ">
             <ul className="pagination pagination-sm justify-content-end py-1">
               <li

src/repositories/DirectoryRepository.jsx

@@ -3,7 +3,8 @@ import {api} from "../utils/axiosClient";
 export const DirectoryRepository = {
     GetContacts: () => api.get( '/api/directory' ),
     CreateContact: ( data ) => api.post( '/api/directory', data ),
-    UpdateContact:(id,data)=>api.put(`/api/directory/${id}`,data),
+    UpdateContact: ( id, data ) => api.put( `/api/directory/${ id }`, data ),
+    DeleteContact:(id)=>api.delete(`/api/directory/${id}`),
     
     GetBucktes: () => api.get( `/api/directory/buckets` ),