added feature active and inactive not displays
This commit is contained in:
parent
d9ce90e20e
commit
45cd17c808
@ -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)}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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 };
|
||||
}
|
||||
|
21
src/hooks/useDirectoryFilter.js
Normal file
21
src/hooks/useDirectoryFilter.js
Normal 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,
|
||||
};
|
||||
};
|
@ -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}
|
||||
|
Loading…
x
Reference in New Issue
Block a user