Compare commits

..

No commits in common. "bcc09851d3b945123ea7d20785336925662ac6bc" and "b4d3e6453fe5b6d8972c9d6e12fd76d3046d0f83" have entirely different histories.

7 changed files with 91 additions and 156 deletions

View File

@ -1,23 +1,13 @@
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 = ({
IsActive,
contact,
setSelectedContact,
setIsOpenModal,
setOpen_contact,
setIsOpenModalNote,
IsDeleted,
}) => {
const { buckets } = useBuckets();
const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpen_contact, setIsOpenModalNote, IsDeleted} ) =>
{
const {buckets} = useBuckets()
return (
<div
className="card text-start border-1"
style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }}
>
<div className="card text-start border-1">
<div className="card-body px-1 py-2 pb-0">
<div className="d-flex justify-content-between">
<div className="d-flex align-items-center">
@ -33,7 +23,7 @@ const CardViewDirectory = ({
<p className="m-0">{contact.name}</p>
</div>
<div>
<div className={`dropdown z-2 ${!IsActive && "d-none"}`}>
<div className="dropdown z-2 ">
<button
type="button"
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
@ -55,7 +45,6 @@ const CardViewDirectory = ({
setSelectedContact(contact);
setIsOpenModal(true);
}}
>
<a className="dropdown-item px-2 py-0">
<i className="bx bx-pencil bx-xs me-2"></i>
@ -63,10 +52,7 @@ const CardViewDirectory = ({
</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>
@ -77,23 +63,19 @@ const CardViewDirectory = ({
</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={() => {
if (IsActive) {
setIsOpenModalNote(true);
setOpen_contact(contact);
}
}}
>
<div className="card-footer text-start px-1 py-1" onClick={() =>
{
setIsOpenModalNote(true)
setOpen_contact(contact)
}}>
<hr className="my-0" />
{contact.contactEmails[0] && (
<ul className="list-inline my-1 ">
@ -109,11 +91,7 @@ const CardViewDirectory = ({
{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}
@ -131,16 +109,17 @@ const CardViewDirectory = ({
</ul>
<ul className="list-inline m-0">
{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>
{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>

View File

@ -3,16 +3,13 @@ import Avatar from '../common/Avatar';
import { getEmailIcon,getPhoneIcon } from './DirectoryUtils';
const ListViewDirectory = ({IsActive, contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
return (
<tr style={{background:`${!IsActive ? "#f8f6f6":""}`}} >
<tr >
<td className="text-start cursor-pointer" style={{width: '18%'}} colSpan={2} onClick={() =>
{
if ( IsActive )
{
setIsOpenModalNote(true)
setIsOpenModalNote(true)
setOpen_contact(contact)
}
}}>
<div className="d-flex align-items-center">
<Avatar
@ -61,16 +58,14 @@ const ListViewDirectory = ({IsActive, contact,setSelectedContact,setIsOpenModal,
</td>
{/* Actions */}
{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>
}
<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>
);
};

View File

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

View File

@ -10,18 +10,12 @@ 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 [ IsActive, setIsActive ] = useState( true )
const {contactNotes} = useContactNotes(contactProfile?.id,!IsActive)
const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
const [NotesData, setNotesData] = useState();
const [IsSubmitting, setIsSubmitting] = useState(false);
const [addNote, setAddNote] = useState(false);
@ -72,8 +66,7 @@ const NotesDirectory = ( {isLoading, contactProfile, setProfileContact} ) =>
setValue("note", "");
setIsSubmitting(false);
showToast("Note added successfully!", "success");
setAddNote( false );
setIsActive(true)
setAddNote(false);
} catch (error) {
setIsSubmitting(false);
const msg =
@ -92,21 +85,7 @@ 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>
<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
<span
className={`btn btn-xs ${addNote ? "btn-danger" : "btn-primary"}`}
onClick={() => setAddNote( !addNote )}
>
@ -117,7 +96,6 @@ const NotesDirectory = ( {isLoading, contactProfile, setProfileContact} ) =>
></i> */}
{addNote ? "close" : "Add Note"}
</span>
</div>
</div>
{addNote && (
<form onSubmit={handleSubmit(onSubmit)}>
@ -141,22 +119,17 @@ const NotesDirectory = ( {isLoading, contactProfile, setProfileContact} ) =>
</div>
)}
{!isLoading &&
[...(IsActive ? contactProfile?.notes || [] : contactNotes || [])]
[...(contactProfile?.notes || [])]
.reverse()
.map((noteItem) => (
<NoteCardDirectory
IsActive={IsActive}
noteItem={noteItem}
contactId={contactProfile?.id}
setProfileContact={setProfileContact}
key={noteItem.id}
/>
) )}
{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>
)}
<p>{!isLoading && contactProfile?.notes.length == 0 && !addNote && (<p className="text-center">No Notes Found</p>) }</p>
</div>
</div>
);

View File

@ -2,43 +2,35 @@ import { useEffect, useState } from "react";
import { DirectoryRepository } from "../repositories/DirectoryRepository";
import { cacheData, getCachedData } from "../slices/apiDataManager";
export const useDirectory = (isActive) => {
export const useDirectory = () => {
const [contacts, setContacts] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [error, setError] = useState();
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);
}
};
useEffect(() => {
const cachedContacts = getCachedData("contacts");
if (!cachedContacts?.data || cachedContacts.isActive !== isActive) {
fetch(isActive);
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(cachedContacts.data);
setContacts(cache_contacts);
}
}, [isActive]);
return {
contacts,
loading,
error,
refetch: fetch,
};
useState(() => {
fetch();
}, []);
return { contacts, loading, error };
};
export const useBuckets = () => {
const [buckets, setBuckets] = useState([]);
const [loading, setLoading] = useState(false);
@ -109,9 +101,9 @@ const fetchContactProfile = async () => {
}
export const useContactNotes = (id,IsActive) =>
export const useContactNotes = (id) =>
{
const [ contactNotes, setContactNotes ] = useState( [] );
const [ conatNotes, setContactNotes ] = useState( [] );
const [ loading, setLoading ] = useState( false );
const [ Error, setError ] = useState( "" );
@ -122,7 +114,7 @@ const fetchContactNotes = async () => {
if (!cached || cached.contactId !== id) {
setLoading(true);
try {
const resp = await DirectoryRepository.GetNote(id,IsActive);
const resp = await DirectoryRepository.GetNote(id);
setContactNotes(resp.data);
cacheData("Contact Notes", { data: resp.data, contactId: id });
} catch (err) {
@ -144,5 +136,5 @@ const fetchContactNotes = async () => {
}
}, [id]);
return { contactNotes, loading, Error };
return { conatProfile, loading, Error };
}

View File

@ -16,9 +16,7 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
import ConfirmModal from "../../components/common/ConfirmModal";
const Directory = () =>
{
const[IsActive,setIsActive] = useState(true)
const Directory = () => {
const [isOpenModal, setIsOpenModal] = useState(false);
const [isOpenModalNote, setIsOpenModalNote] = useState(false);
const [selectedContact, setSelectedContact] = useState(null);
@ -34,7 +32,7 @@ const Directory = () =>
const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
const { contacts, loading } = useDirectory(IsActive);
const { contacts, loading } = useDirectory();
const { contactCategory, loading: contactCategoryLoading } =
useContactCategory();
const { buckets } = useBuckets();
@ -42,7 +40,7 @@ const Directory = () =>
try {
let response;
let updatedContacts;
const contacts_cache = getCachedData("contacts")?.data || [];
const contacts_cache = getCachedData("contacts") || [];
if (selectedContact) {
response = await DirectoryRepository.UpdateContact(data.id, data);
@ -58,7 +56,7 @@ const Directory = () =>
showToast("Contact created successfully", "success");
setIsOpenModal(false);
}
cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
setContactList(updatedContacts);
} catch (error) {
const msg =
@ -72,12 +70,12 @@ const Directory = () =>
const handleDeleteContact = async () => {
try {
setIsDeletng(true);
const contacts_cache = getCachedData("contacts")?.data || [];
const contacts_cache = getCachedData("contacts") || [];
const response = await DirectoryRepository.DeleteContact(deleteContact);
const updatedContacts = ContactList.filter((c) => c.id !== deleteContact);
setContactList(updatedContacts);
cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
cacheData("Contacts", updatedContacts);
showToast("Contact deleted successfully", "success");
setDeleteContact(null);
@ -104,6 +102,7 @@ const Directory = () =>
useEffect(() => {
setContactList(contacts);
// Set temp filter list only (UI checkboxes, not actual filtering yet)
setTempSelectedCategoryIds([]);
setTempSelectedBucketIds([]);
}, [contacts]);
@ -248,7 +247,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
@ -300,7 +299,7 @@ const Directory = () =>
<ul className="dropdown-menu p-3" style={{ width: "320px" }}>
<div>
<p className="small-text fw-semibold text-muted m-0">Filter by</p>
<p className="small-text text-muted m-0">Filter by</p>
{/* Bucket Filter */}
<div className="mt-1">
@ -378,17 +377,17 @@ const Directory = () =>
</div>
</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( !IsActive )} value={IsActive} disabled={ loading} />
<span className="switch-toggle-slider">
<span className="switch-on">
<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 className="switch-off">
<span class="switch-off">
{/* <i class="icon-base bx bx-x"></i> */}
</span>
</span>
<span className="switch-label small-text">Show Inactive Contacts</span>
<span class="switch-label">Show Inactive Contacts</span>
</label>
<button
type="button"
@ -453,11 +452,11 @@ const Directory = () =>
</div>
</th>
<th className="mx-2">Category</th>
{IsActive && <th>Action</th>}
<th>Action</th>
</tr>
</thead>
<tbody className="table-border-bottom-0 overflow-auto ">
{loading && (
{loading && ContatList.length === 0 && (
<tr>
<td colSpan={10}>Loading...</td>
</tr>
@ -472,7 +471,6 @@ const Directory = () =>
currentItems.map((contact) => (
<ListViewDirectory
key={contact.id}
IsActive={IsActive}
contact={contact}
setSelectedContact={setSelectedContact}
setIsOpenModal={setIsOpenModal}
@ -486,13 +484,12 @@ const Directory = () =>
</div>
) : (
<div className="row">
{!loading && currentItems.map((contact, index) => (
{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}

View File

@ -1,7 +1,7 @@
import {api} from "../utils/axiosClient";
export const DirectoryRepository = {
GetContacts: (isActive) => api.get( `/api/directory?active=${isActive}` ),
GetContacts: () => api.get( '/api/directory' ),
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,isActive ) => api.get( `/api/directory/note/${ id }?active=${isActive}` ),
GetNote: ( id ) => api.get( `/api/directory/note/${ id }` ),
UpdateNote: ( id, data ) => api.put( `/api/directory/note/${ id }`, data ),
DeleteNote:(id)=> api.delete(`/api/directory/note/${ id }`)
}