added feature active and inactive not displays

This commit is contained in:
Pramod Mahajan 2025-05-23 18:24:19 +05:30
parent d9ce90e20e
commit 45cd17c808
5 changed files with 72 additions and 23 deletions

View File

@ -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)}

View File

@ -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>
);

View File

@ -109,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( "" );
@ -122,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) {
@ -144,5 +144,5 @@ const fetchContactNotes = async () => {
}
}, [id]);
return { conatProfile, loading, Error };
return { contactNotes, loading, Error };
}

View File

@ -0,0 +1,21 @@
import React, { useEffect } from "react";
import { useDirectory } from "./useDirectory";
export const useDirectoryFilter = (active) => {
const { contacts, loading, refetch } = useDirectory( active);
// Debounced search refetch
useEffect(() => {
// if (searchQuery) {
// const timer = setTimeout(() => {
// refetch(searchQuery, active, [], []);
// }, 1000);
// return () => clearTimeout(timer);
// }
refetch(active)
}, [ active]);
return {
contacts,
loading,
};
};

View File

@ -18,7 +18,7 @@ import ConfirmModal from "../../components/common/ConfirmModal";
const Directory = () =>
{
const[IsActivite,setIsActive] = useState(true)
const[IsActive,setIsActive] = useState(true)
const [isOpenModal, setIsOpenModal] = useState(false);
const [isOpenModalNote, setIsOpenModalNote] = useState(false);
const [selectedContact, setSelectedContact] = useState(null);
@ -34,7 +34,7 @@ const Directory = () =>
const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
const { contacts, loading } = useDirectory(IsActivite);
const { contacts, loading } = useDirectory(IsActive);
const { contactCategory, loading: contactCategoryLoading } =
useContactCategory();
const { buckets } = useBuckets();
@ -42,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);
@ -58,7 +58,7 @@ const Directory = () =>
showToast("Contact created successfully", "success");
setIsOpenModal(false);
}
cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
setContactList(updatedContacts);
} catch (error) {
const msg =
@ -72,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);
@ -104,7 +104,6 @@ const Directory = () =>
useEffect(() => {
setContactList(contacts);
// Set temp filter list only (UI checkboxes, not actual filtering yet)
setTempSelectedCategoryIds([]);
setTempSelectedBucketIds([]);
}, [contacts]);
@ -380,7 +379,7 @@ const Directory = () =>
</div>
<div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
<label className="switch switch-primary">
<input type="checkbox" className="switch-input" onChange={()=>setIsActive(!IsActivite)} value={IsActivite} />
<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> */}
@ -454,7 +453,7 @@ 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 ">
@ -473,6 +472,7 @@ const Directory = () =>
currentItems.map((contact) => (
<ListViewDirectory
key={contact.id}
IsActive={IsActive}
contact={contact}
setSelectedContact={setSelectedContact}
setIsOpenModal={setIsOpenModal}
@ -492,7 +492,7 @@ const Directory = () =>
className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
>
<CardViewDirectory
IsActive={IsActivite}
IsActive={IsActive}
contact={contact}
setSelectedContact={setSelectedContact}
setIsOpenModal={setIsOpenModal}