2025-05-24 04:39:57 +00:00
7 changed files with 156 additions and 91 deletions
--- a/src/components/Directory/CardViewDirectory.jsx
+++ b/src/components/Directory/CardViewDirectory.jsx
@ -1,13 +1,23 @@
 import React from "react";
 import Avatar from "../common/Avatar";
-import {getBucketNameById} from "./DirectoryUtils";
-import {useBuckets} from "../../hooks/useDirectory";
+import { getBucketNameById } from "./DirectoryUtils";
+import { useBuckets } from "../../hooks/useDirectory";
 import { getPhoneIcon } from "./DirectoryUtils";
-const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpen_contact, setIsOpenModalNote, IsDeleted} ) =>
-{
-  const {buckets} = useBuckets()
+const CardViewDirectory = ({
+  IsActive,
+  contact,
+  setSelectedContact,
+  setIsOpenModal,
+  setOpen_contact,
+  setIsOpenModalNote,
+  IsDeleted,
+}) => {
+  const { buckets } = useBuckets();
  return (
-    <div className="card text-start border-1">
+    <div
+      className="card text-start border-1"
+      style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }}
+    >
      <div className="card-body  px-1 py-2 pb-0">
        <div className="d-flex justify-content-between">
          <div className="d-flex align-items-center">
@ -23,7 +33,7 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
            <p className="m-0">{contact.name}</p>
          </div>
          <div>
-            <div className="dropdown z-2 ">
+            <div className={`dropdown z-2 ${!IsActive && "d-none"}`}>
              <button
                type="button"
                className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
@ -45,6 +55,7 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
                    setSelectedContact(contact);
                    setIsOpenModal(true);
                  }}
+                 
                >
                  <a className="dropdown-item px-2 py-0">
                    <i className="bx bx-pencil bx-xs me-2"></i>
@ -52,7 +63,10 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
                  </a>
                </li>
                <li>
-                  <a className="dropdown-item  px-2 py-0" onClick={()=> IsDeleted(contact.id)}>
+                  <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>
@ -63,19 +77,23 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
        </div>

        <ul className="list-inline m-0 ps-4">
-          <li className="list-inline-item me-1" style={{fontSize:"10px"}}>
+          <li className="list-inline-item me-1" style={{ fontSize: "10px" }}>
            <i className="bx bx-building bx-xs"></i>
          </li>
-          <li className="list-inline-item" style={{fontSize:"10px"}}>
+          <li className="list-inline-item" style={{ fontSize: "10px" }}>
            {contact.organization}
          </li>
        </ul>
      </div>
-      <div className="card-footer text-start px-1 py-1" onClick={() =>
-      {
-        setIsOpenModalNote(true)
-        setOpen_contact(contact)
-      }}>
+      <div
+        className="card-footer text-start px-1 py-1"
+        onClick={() => {
+          if (IsActive) {
+            setIsOpenModalNote(true);
+            setOpen_contact(contact);
+          }
+        }}
+      >
        <hr className="my-0" />
        {contact.contactEmails[0] && (
          <ul className="list-inline my-1 ">
@ -91,7 +109,11 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
        {contact.contactPhones[0] && (
          <ul className="list-inline m-0">
            <li className="list-inline-item me-2">
-              <i className={` ${getPhoneIcon(contact.contactPhones[0].label)} 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}
@ -109,17 +131,16 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
        </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></>
+          {contact.bucketIds.map((bucketId) => (
+            <React.Fragment key={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>
+            </React.Fragment>
          ))}
-      
        </ul>
      </div>
    </div>
--- a/src/components/Directory/ListViewDirectory.jsx
+++ b/src/components/Directory/ListViewDirectory.jsx
@ -3,13 +3,16 @@ import Avatar from '../common/Avatar';
 import { getEmailIcon,getPhoneIcon } from './DirectoryUtils';


-const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
+const ListViewDirectory = ({IsActive, contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
  return (
-    <tr  >
+    <tr style={{background:`${!IsActive ? "#f8f6f6":""}`}} >
      <td className="text-start cursor-pointer" style={{width: '18%'}} colSpan={2} onClick={() =>
      {
-         setIsOpenModalNote(true)
+        if ( IsActive )
+        {
+           setIsOpenModalNote(true)
        setOpen_contact(contact)
+       }
      }}>
     <div className="d-flex align-items-center">
  <Avatar
@ -58,14 +61,16 @@ const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal,setOpen_c
      </td>

      {/* Actions */}
-      <td className="align-middle text-center ">
-        <i className='bx bx-edit bx-sm text-primary cursor-pointer' onClick={() =>
-        {
-          setSelectedContact( contact )
-          setIsOpenModal(true)
-        }}></i>
-         <i className='bx bx-trash bx-sm text-danger cursor-pointer' onClick={()=> IsDeleted(contact.id)}></i>
-      </td>
+      {IsActive &&
+        <td className="align-middle text-center ">
+          <i className='bx bx-edit bx-sm text-primary cursor-pointer' onClick={() =>
+          {
+            setSelectedContact( contact )
+            setIsOpenModal( true )
+          }}></i>
+          <i className='bx bx-trash bx-sm text-danger cursor-pointer' onClick={() => IsDeleted( contact.id )}></i>
+        </td>
+      }
    </tr>
  );
 };
--- a/src/components/Directory/NoteCardDirectory.jsx
+++ b/src/components/Directory/NoteCardDirectory.jsx
@ -7,7 +7,7 @@ import showToast from "../../services/toastService";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import "../common/TextEditor/Editor.css";

-const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
+const NoteCardDirectory = ({ IsActive,noteItem, contactId, setProfileContact }) => {
  const [editing, setEditing] = useState(false);
  const [editorValue, setEditorValue] = useState(noteItem.note);
  const [isLoading, setIsLoading] = useState(false);
@ -50,7 +50,8 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
        cacheData("Contact Profile", updatedProfile);
      }
      setEditing(false);
-      setIsLoading(false);
+      setIsLoading( false );
+      
      showToast("Note Updated successfully", "success");
    } catch (error) {
      setIsLoading(false);
@ -104,7 +105,7 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
  return (
    <div
      className="card p-1 shadow-sm border-1 mb-2 conntactNote"
-      style={{ width: "100%", minWidth: "300px", borderRadius: "0px" }}
+      style={{ width: "100%", minWidth: "300px", borderRadius: "0px", background: `${!IsActive ? "#f8f6f6" : ""}`  }}
      key={noteItem.id}
    >
      <div className="d-flex justify-content-between align-items-center mb-1">
@ -128,7 +129,7 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
            </span>
          </div>
        </div>
-        <div>
+        <div className={`${IsActive ? " ":"d-none"}`}>
          <i
            className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
            onClick={() => setEditing(true)}
--- a/src/components/Directory/NotesDirectory.jsx
+++ b/src/components/Directory/NotesDirectory.jsx
@ -10,12 +10,18 @@ import moment from "moment";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import NoteCardDirectory from "./NoteCardDirectory";
 import showToast from "../../services/toastService";
+import {useContactNotes} from "../../hooks/useDirectory";

 const schema = z.object({
  note: z.string().min(1, { message: "Note is required" }),
 });

-const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
+const NotesDirectory = ( {isLoading, contactProfile, setProfileContact} ) =>
+{
+  const [ IsActive, setIsActive ] = useState( true )
+  const {contactNotes} = useContactNotes(contactProfile?.id,!IsActive)
+
+  
  const [NotesData, setNotesData] = useState();
  const [IsSubmitting, setIsSubmitting] = useState(false);
  const [addNote, setAddNote] = useState(false);
@ -66,7 +72,8 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
      setValue("note", "");
      setIsSubmitting(false);
      showToast("Note added successfully!", "success");
-      setAddNote(false);
+      setAddNote( false );
+      setIsActive(true)
    } catch (error) {
      setIsSubmitting(false);
      const msg =
@ -85,7 +92,21 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
    <div className="text-start">
      <div className="d-flex align-items-center justify-content-between">
        <p className="fw-semibold m-0">Notes :</p>
-        <span
+        <div className="m-0 d-flex aligin-items-center">
+
+          <label className="switch switch-primary">
+              <input type="checkbox" className="switch-input" onChange={() => setIsActive( !IsActive )} value={IsActive}  />
+              <span className="switch-toggle-slider">
+                <span className="switch-on">
+                  {/* <i class="icon-base bx bx-check"></i> */}
+                </span>
+                <span className="switch-off">
+                  {/* <i class="icon-base bx bx-x"></i> */}
+                </span>
+              </span>
+              <span className="switch-label small-text">Show Inactive Notes</span>
+            </label>
+            <span
          className={`btn btn-xs   ${addNote ? "btn-danger" : "btn-primary"}`}
          onClick={() => setAddNote( !addNote )}
        >
@ -96,6 +117,7 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
          ></i> */}
          {addNote ? "close" : "Add Note"}
        </span>
+       </div>
      </div>
      {addNote && (
        <form onSubmit={handleSubmit(onSubmit)}>
@ -119,17 +141,22 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
          </div>
        )}
        {!isLoading &&
-          [...(contactProfile?.notes || [])]
+          [...(IsActive ?   contactProfile?.notes || [] : contactNotes || [])]
            .reverse()
            .map((noteItem) => (
              <NoteCardDirectory
+                IsActive={IsActive}
                noteItem={noteItem}
                contactId={contactProfile?.id}
                setProfileContact={setProfileContact}
                key={noteItem.id}
              />
            ) )}
-        <p>{!isLoading && contactProfile?.notes.length == 0 && !addNote && (<p className="text-center">No Notes Found</p>) }</p>
+        {IsActive && ( <p>{!isLoading && contactProfile?.notes.length == 0 && !addNote && ( <p className="text-center">No Notes Found</p> )}</p> )}
+        {!IsActive && (
+        <p>{!isLoading && contactNotes.length == 0 && !addNote && (<p className="text-center">No Notes Found</p>) }</p>
+
+        )}
      </div>
    </div>
  );
--- a/src/hooks/useDirectory.js
+++ b/src/hooks/useDirectory.js
@ -2,35 +2,43 @@ import { useEffect, useState } from "react";
 import { DirectoryRepository } from "../repositories/DirectoryRepository";
 import { cacheData, getCachedData } from "../slices/apiDataManager";

-export const useDirectory = () => {
+export const useDirectory = (isActive) => {
  const [contacts, setContacts] = useState([]);
  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState();
+  const [error, setError] = useState(null);

-  const fetch = async () => {
-    const cache_contacts = getCachedData("contacts");
-    if (!cache_contacts) {
-      setLoading(true);
-      try {
-        const response = await DirectoryRepository.GetContacts();
-        setContacts(response.data);
-        cacheData("contacts", response.data);
-        setLoading(false);
-      } catch (error) {
-        setError(error);
-        setLoading(false);
-      }
-    } else {
-      setContacts(cache_contacts);
+  const fetch = async (activeParam = isActive) => {
+    setLoading(true);
+    try {
+      const response = await DirectoryRepository.GetContacts(activeParam);
+      setContacts(response.data);
+      cacheData("contacts", { data: response.data, isActive: activeParam });
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
    }
  };

-  useState(() => {
-    fetch();
-  }, []);
-  return { contacts, loading, error };
+  useEffect(() => {
+    const cachedContacts = getCachedData("contacts");
+    if (!cachedContacts?.data || cachedContacts.isActive !== isActive) {
+      fetch(isActive);
+    } else {
+      setContacts(cachedContacts.data);
+    }
+  }, [isActive]);
+
+  return {
+    contacts,
+    loading,
+    error,
+    refetch: fetch,
+  };
 };

+
+
 export const useBuckets = () => {
  const [buckets, setBuckets] = useState([]);
  const [loading, setLoading] = useState(false);
@ -101,9 +109,9 @@ const fetchContactProfile = async () => {
 }


-export const useContactNotes = (id) =>
+export const useContactNotes = (id,IsActive) =>
 {
-  const [ conatNotes, setContactNotes ] = useState( [] );
+  const [ contactNotes, setContactNotes ] = useState( [] );
  const [ loading, setLoading ] = useState( false );
  const [ Error, setError ] = useState( "" );

@ -114,7 +122,7 @@ const fetchContactNotes = async () => {
    if (!cached || cached.contactId !== id) {
      setLoading(true);
      try {
-        const resp = await DirectoryRepository.GetNote(id);
+        const resp = await DirectoryRepository.GetNote(id,IsActive);
        setContactNotes(resp.data);
        cacheData("Contact Notes", { data: resp.data, contactId: id });
      } catch (err) {
@ -136,5 +144,5 @@ const fetchContactNotes = async () => {
    }
  }, [id]);

-  return { conatProfile, loading, Error };
+  return { contactNotes, loading, Error };
 }
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@ -16,7 +16,9 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
 import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
 import ConfirmModal from "../../components/common/ConfirmModal";

-const Directory = () => {
+const Directory = () =>
+{
+  const[IsActive,setIsActive] = useState(true)
  const [isOpenModal, setIsOpenModal] = useState(false);
  const [isOpenModalNote, setIsOpenModalNote] = useState(false);
  const [selectedContact, setSelectedContact] = useState(null);
@ -32,7 +34,7 @@ const Directory = () => {
  const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
  const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);

-  const { contacts, loading } = useDirectory();
+  const { contacts, loading } = useDirectory(IsActive);
  const { contactCategory, loading: contactCategoryLoading } =
    useContactCategory();
  const { buckets } = useBuckets();
@ -40,7 +42,7 @@ const Directory = () => {
    try {
      let response;
      let updatedContacts;
-      const contacts_cache = getCachedData("contacts") || [];
+      const contacts_cache = getCachedData("contacts")?.data || [];

      if (selectedContact) {
        response = await DirectoryRepository.UpdateContact(data.id, data);
@ -56,7 +58,7 @@ const Directory = () => {
        showToast("Contact created successfully", "success");
        setIsOpenModal(false);
      }
-
+       cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
      setContactList(updatedContacts);
    } catch (error) {
      const msg =
@ -70,12 +72,12 @@ const Directory = () => {
  const handleDeleteContact = async () => {
    try {
      setIsDeletng(true);
-      const contacts_cache = getCachedData("contacts") || [];
+      const contacts_cache = getCachedData("contacts")?.data || [];

      const response = await DirectoryRepository.DeleteContact(deleteContact);
      const updatedContacts = ContactList.filter((c) => c.id !== deleteContact);
      setContactList(updatedContacts);
-      cacheData("Contacts", updatedContacts);
+      cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
      showToast("Contact deleted successfully", "success");
      setDeleteContact(null);

@ -102,7 +104,6 @@ const Directory = () => {
  useEffect(() => {
    setContactList(contacts);

-    // Set temp filter list only (UI checkboxes, not actual filtering yet)
    setTempSelectedCategoryIds([]);
    setTempSelectedBucketIds([]);
  }, [contacts]);
@ -247,7 +248,7 @@ const Directory = () => {
        </div>
      )}

-      <div className="card p-2">
+      <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 ">
            <input
@ -299,7 +300,7 @@ const Directory = () => {

                <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
                  <div>
-                    <p className="small-text text-muted m-0">Filter by</p>
+                    <p className="small-text fw-semibold text-muted m-0">Filter by</p>

                    {/* Bucket Filter */}
                    <div className="mt-1">
@ -377,17 +378,17 @@ const Directory = () => {
            </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">
+            <label className="switch switch-primary">
+              <input type="checkbox" className="switch-input" onChange={() => setIsActive( !IsActive )} value={IsActive} disabled={ loading} />
+              <span className="switch-toggle-slider">
+                <span className="switch-on">
                  {/* <i class="icon-base bx bx-check"></i> */}
                </span>
-                <span class="switch-off">
+                <span className="switch-off">
                  {/* <i class="icon-base bx bx-x"></i> */}
                </span>
              </span>
-              <span class="switch-label">Show Inactive Contacts</span>
+              <span className="switch-label small-text">Show Inactive Contacts</span>
            </label>
            <button
              type="button"
@ -452,11 +453,11 @@ const Directory = () => {
                    </div>
                  </th>
                  <th className="mx-2">Category</th>
-                  <th>Action</th>
+                  {IsActive && <th>Action</th>}
                </tr>
              </thead>
              <tbody className="table-border-bottom-0 overflow-auto ">
-                {loading && ContatList.length === 0 && (
+                {loading &&  (
                  <tr>
                    <td colSpan={10}>Loading...</td>
                  </tr>
@ -471,6 +472,7 @@ const Directory = () => {
                  currentItems.map((contact) => (
                    <ListViewDirectory
                      key={contact.id}
+                      IsActive={IsActive}
                      contact={contact}
                      setSelectedContact={setSelectedContact}
                      setIsOpenModal={setIsOpenModal}
@ -484,12 +486,13 @@ const Directory = () => {
          </div>
        ) : (
          <div className="row">
-            {currentItems.map((contact, index) => (
+            {!loading && currentItems.map((contact, index) => (
              <div
                key={contact.id}
                className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
              >
                <CardViewDirectory
+                  IsActive={IsActive}
                  contact={contact}
                  setSelectedContact={setSelectedContact}
                  setIsOpenModal={setIsOpenModal}
--- a/src/repositories/DirectoryRepository.jsx
+++ b/src/repositories/DirectoryRepository.jsx
@ -1,7 +1,7 @@
 import {api} from "../utils/axiosClient";

 export const DirectoryRepository = {
-    GetContacts: () => api.get( '/api/directory' ),
+    GetContacts: (isActive) => api.get( `/api/directory?active=${isActive}` ),
    CreateContact: ( data ) => api.post( '/api/directory', data ),
    UpdateContact: ( id, data ) => api.put( `/api/directory/${ id }`, data ),
    DeleteContact:(id)=>api.delete(`/api/directory/${id}`),
@ -11,7 +11,7 @@ export const DirectoryRepository = {
    GetContactProfile: ( id ) => api.get( `/api/directory/profile/${ id }` ),
    
    CreateNote: ( data ) => api.post( '/api/directory/note', data ),
-    GetNote: ( id ) => api.get( `/api/directory/note/${ id }` ),
+    GetNote: ( id,isActive ) => api.get( `/api/directory/note/${ id }?active=${isActive}` ),
    UpdateNote: ( id, data ) => api.put( `/api/directory/note/${ id }`, data ),
    DeleteNote:(id)=> api.delete(`/api/directory/note/${ id }`)
 }