Compare commits
No commits in common. "978165d3de7a2bdeac983b165bc9342295d6647c" and "49d38f553ad5a289548c222365f1db19c7aee3c6" have entirely different histories.
978165d3de
...
49d38f553a
@ -1,21 +1,12 @@
|
||||
import React from "react";
|
||||
import Avatar from "../common/Avatar";
|
||||
|
||||
const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => {
|
||||
const CardViewDirectory = ({contact}) => {
|
||||
return (
|
||||
<div class="card text-start border-1">
|
||||
<div class="card text-start ">
|
||||
<div class="card-body d-flex justify-content-between px-1 py-2">
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={
|
||||
(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
|
||||
}
|
||||
lastName={
|
||||
(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
|
||||
}
|
||||
/>{" "}
|
||||
<p className="m-0">{contact.name}</p>
|
||||
<div>
|
||||
<p className="fs-6 m-0">{contact.name}</p>
|
||||
<small className="simple-text m-0 text-muted"></small>
|
||||
</div>
|
||||
<div>
|
||||
<div className="dropdown z-2 ">
|
||||
@ -35,11 +26,7 @@ const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => {
|
||||
></i>
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end w-auto">
|
||||
<li onClick={() =>
|
||||
{
|
||||
setSelectedContact(contact)
|
||||
setIsOpenModal(true)
|
||||
}}>
|
||||
<li >
|
||||
<a className="dropdown-item px-2 py-0">
|
||||
<i className="bx bx-pencil bx-xs me-2"></i>
|
||||
<span className="align-left small-text">Modify</span>
|
||||
@ -56,43 +43,30 @@ const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => {
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-start px-1 py-1">
|
||||
<hr className="my-0" />
|
||||
{contact.contactEmails[0] && (
|
||||
<ul className="list-inline my-1 ">
|
||||
<li className="list-inline-item me-2">
|
||||
<i className="bx bx-envelope bx-xs"></i>
|
||||
</li>
|
||||
<li className="list-inline-item small-text">
|
||||
{contact.contactEmails[0]?.emailAddress}
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
<hr className="my-0"/>
|
||||
{contact.contactEmails && <ul className="list-inline my-1 ">
|
||||
<li className="list-inline-item me-2">
|
||||
<i className="bx bx-envelope bx-xs"></i>
|
||||
</li>
|
||||
<li className="list-inline-item small-text">{contact.contactEmails[ 0 ]?.emailAddress}</li>
|
||||
</ul>}
|
||||
|
||||
{contact.contactPhones[0] && (
|
||||
<ul className="list-inline m-0">
|
||||
<li className="list-inline-item me-2">
|
||||
<i className="bx bx-phone bx-xs"></i>
|
||||
</li>
|
||||
<li className="list-inline-item small-text">
|
||||
{contact.contactPhones[0]?.phoneNumber}
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
{contact.contactPhones && <ul className="list-inline m-0">
|
||||
<li className="list-inline-item me-2">
|
||||
<i className="bx bx-phone bx-xs"></i>
|
||||
</li>
|
||||
<li className="list-inline-item small-text">{contact.contactPhones[ 0 ]?.phoneNumber}</li>
|
||||
</ul>}
|
||||
|
||||
<ul className="list-inline m-0">
|
||||
<li className="list-inline-item me-2">
|
||||
<i className="bx bx-merge bx-xs"></i>
|
||||
</li>
|
||||
<li className="list-inline-item small-text">
|
||||
{contact.contactCategory.name}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul className="list-inline m-0">
|
||||
<li className="list-inline-item me-2">
|
||||
<i className="bx bx-building bx-xs"></i>
|
||||
</li>
|
||||
<li className="list-inline-item small-text">
|
||||
{contact.organization}
|
||||
</li>
|
||||
<li className="list-inline-item me-2">
|
||||
<i className="bx bx-merge bx-xs"></i>
|
||||
</li>
|
||||
<li className="list-inline-item small-text">
|
||||
{contact.contactCategory.name}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -24,7 +24,7 @@ export const ContactSchema = z
|
||||
phoneNumber: z
|
||||
.string()
|
||||
.min(6, "Invalid Number")
|
||||
.max(13, "Invalid Number")
|
||||
.max(10, "Invalid Number")
|
||||
.regex(/^[\d\s+()-]+$/, "Invalid phone number format").or(z.literal("")),
|
||||
})
|
||||
)
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from 'react'
|
||||
import Avatar from '../common/Avatar';
|
||||
|
||||
const getEmailIcon = (type) => {
|
||||
switch (type) {
|
||||
@ -24,22 +23,10 @@ const getPhoneIcon = (type) => {
|
||||
}
|
||||
};
|
||||
|
||||
const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
|
||||
const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal }) => {
|
||||
return (
|
||||
<tr >
|
||||
<td className="text-start" style={{width: '18%'}} colSpan={2}>
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""}
|
||||
lastName={(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""}
|
||||
/>
|
||||
|
||||
<span >{contact?.name || ""}</span>
|
||||
</div>
|
||||
|
||||
|
||||
</td>
|
||||
<tr key={contact.id} >
|
||||
<td className="text-start" style={{ width: '18%' }} colSpan={2}>{`${contact.name}`}</td>
|
||||
|
||||
{/* Emails */}
|
||||
<td >
|
||||
@ -70,7 +57,7 @@ const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
|
||||
|
||||
<td>
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
<span className="badge badge-outline-primary">{contact?.contactCategory?.name }</span>
|
||||
<span class="badge badge-outline-primary">{contact?.contactCategory?.name }</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
||||
@ -144,6 +144,7 @@ useEffect(() => {
|
||||
<FormProvider {...methods}>
|
||||
<form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="d-flex justify-content-center align-items-center">
|
||||
<IconButton size={15} iconClass="bx bx-user-plus" color="primary" />{" "}
|
||||
<h6 className="m-0 fw-18"> Create New Contact</h6>
|
||||
</div>
|
||||
<div className="row">
|
||||
@ -210,7 +211,7 @@ useEffect(() => {
|
||||
onClick={handleAddEmail}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-plus-circle bx-xs" />
|
||||
<i className="bx bx-plus bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
@ -219,7 +220,7 @@ useEffect(() => {
|
||||
onClick={() => removeEmail(index)}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-minus-circle bx-xs" />
|
||||
<i className="bx bx-x bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@ -270,7 +271,7 @@ useEffect(() => {
|
||||
onClick={handleAddPhone}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-plus-circle bx-xs" />
|
||||
<i className="bx bx-plus bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
@ -279,7 +280,7 @@ useEffect(() => {
|
||||
onClick={() => removePhone(index)}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-minus-circle bx-xs" />
|
||||
<i className="bx bx-x bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@ -310,7 +311,7 @@ useEffect(() => {
|
||||
</option>
|
||||
) : (
|
||||
<>
|
||||
<option disabled value="">
|
||||
<option disabled selected value="">
|
||||
Select Category
|
||||
</option>
|
||||
{contactCategory?.map((cate) => (
|
||||
|
||||
@ -111,29 +111,19 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
|
||||
};
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
const cleaned = {
|
||||
...data,
|
||||
contactEmails: (data.contactEmails || [])
|
||||
.filter((e) => e.emailAddress?.trim() !== "")
|
||||
.map((email, index) => {
|
||||
const existingEmail = existingContact.contactEmails?.[index];
|
||||
return existingEmail
|
||||
? { ...email, id: existingEmail.id }
|
||||
: email;
|
||||
}),
|
||||
contactPhones: (data.contactPhones || [])
|
||||
.filter((p) => p.phoneNumber?.trim() !== "")
|
||||
.map((phone, index) => {
|
||||
const existingPhone = existingContact.contactPhones?.[index];
|
||||
return existingPhone
|
||||
? { ...phone, id: existingPhone.id }
|
||||
: phone;
|
||||
}),
|
||||
};
|
||||
|
||||
setSubmitting(true);
|
||||
await submitContact({ ...cleaned, id: existingContact.id });
|
||||
debugger;
|
||||
const cleaned = {
|
||||
...data,
|
||||
contactEmails: (data.contactEmails || []).filter(
|
||||
(e) => e.emailAddress?.trim() !== ""
|
||||
),
|
||||
contactPhones: (data.contactPhones || []).filter(
|
||||
(p) => p.phoneNumber?.trim() !== ""
|
||||
),
|
||||
};
|
||||
|
||||
setSubmitting(true);
|
||||
await submitContact({ ...cleaned, id: existingContact.id });
|
||||
setSubmitting(false);
|
||||
|
||||
};
|
||||
@ -171,7 +161,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
|
||||
setIsInitialized(true)
|
||||
}
|
||||
|
||||
// return()=> reset()
|
||||
return()=> reset()
|
||||
}, [ existingContact, buckets, projects ] );
|
||||
|
||||
|
||||
@ -179,6 +169,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
|
||||
<FormProvider {...methods}>
|
||||
<form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="d-flex justify-content-center align-items-center">
|
||||
<IconButton size={15} iconClass="bx bx-user-plus" color="primary" />{" "}
|
||||
<h6 className="m-0 fw-18"> Update Contact</h6>
|
||||
</div>
|
||||
<div className="row">
|
||||
@ -245,7 +236,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
|
||||
onClick={handleAddEmail}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-plus-circle bx-xs" />
|
||||
<i className="bx bx-plus bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
@ -254,7 +245,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
|
||||
onClick={() => removeEmail(index)}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-minus-circle bx-xs" />
|
||||
<i className="bx bx-x bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@ -305,7 +296,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
|
||||
onClick={handleAddPhone}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-plus-circle bx-xs" />
|
||||
<i className="bx bx-plus bx-xs" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
@ -314,7 +305,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
|
||||
onClick={() => removePhone(index)}
|
||||
style={{ width: "24px", height: "24px" }}
|
||||
>
|
||||
<i className="bx bx-minus-circle bx-xs" />
|
||||
<i className="bx bx-x bx-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@ -345,7 +336,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
|
||||
</option>
|
||||
) : (
|
||||
<>
|
||||
<option disabled value="">
|
||||
<option disabled selected value="">
|
||||
Select Category
|
||||
</option>
|
||||
{contactCategory?.map((cate) => (
|
||||
|
||||
@ -15,7 +15,7 @@ const GlobalModel = ({
|
||||
useEffect(() => {
|
||||
const modalElement = modalRef.current;
|
||||
const modalInstance = new window.bootstrap.Modal(modalElement, {
|
||||
backdrop: false,
|
||||
backdrop: false // Disable backdrop
|
||||
});
|
||||
|
||||
if (isOpen) {
|
||||
@ -26,27 +26,16 @@ useEffect(() => {
|
||||
|
||||
const handleHideModal = () => {
|
||||
closeModal();
|
||||
|
||||
// ✅ FIX: Remove any lingering body classes/styles
|
||||
document.body.classList.remove('modal-open');
|
||||
document.body.style.overflow = '';
|
||||
document.body.style.paddingRight = '';
|
||||
};
|
||||
|
||||
modalElement.addEventListener('hidden.bs.modal', handleHideModal);
|
||||
|
||||
return () => {
|
||||
modalElement.removeEventListener('hidden.bs.modal', handleHideModal);
|
||||
|
||||
// Also clean up just in case component unmounts
|
||||
document.body.classList.remove('modal-open');
|
||||
document.body.style.overflow = '';
|
||||
document.body.style.paddingRight = '';
|
||||
};
|
||||
}, [isOpen, closeModal]);
|
||||
|
||||
|
||||
|
||||
// Dynamically set the modal size classes (modal-sm, modal-lg, modal-xl)
|
||||
const modalSizeClass = size ? `modal-${size}` : ''; // Default is empty if no size is specified
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ const Directory = () => {
|
||||
const [ContatList, setContactList] = useState([]);
|
||||
const [contactCategories, setContactCategories] = useState([]);
|
||||
const [ searchText, setSearchText ] = useState( "" );
|
||||
const [listView, setListView] = useState(true);
|
||||
const [listView, setListView] = useState(false);
|
||||
|
||||
const { contacts, loading } = useDirectory();
|
||||
const { contactCategory, loading: contactCategoryLoading } =
|
||||
@ -79,7 +79,7 @@ const Directory = () => {
|
||||
);
|
||||
};
|
||||
const filteredContacts = useMemo(() => {
|
||||
return ContatList
|
||||
return contacts
|
||||
.filter((c) => {
|
||||
const matchesSearch =
|
||||
c.name.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
@ -90,7 +90,7 @@ const Directory = () => {
|
||||
return matchesSearch && matchesCategory;
|
||||
})
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
}, [ContatList, searchText, selectedCategoryIds]);
|
||||
}, [contacts, searchText, selectedCategoryIds]);
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
filteredContacts,
|
||||
10
|
||||
@ -196,7 +196,7 @@ const Directory = () => {
|
||||
<div className="col-5 col-md-8 mb-2 px-1 text-md-end text-end">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary"
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => setIsOpenModal(true)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
@ -277,7 +277,6 @@ const Directory = () => {
|
||||
{!loading &&
|
||||
currentItems.map((contact) => (
|
||||
<ListViewDirectory
|
||||
key={contact.id}
|
||||
contact={contact}
|
||||
setSelectedContact={setSelectedContact}
|
||||
setIsOpenModal={setIsOpenModal}
|
||||
@ -288,13 +287,9 @@ const Directory = () => {
|
||||
</div>
|
||||
) : (
|
||||
<div className="row">
|
||||
{currentItems.map((contact, index) => (
|
||||
<div key={contact.id} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
|
||||
<CardViewDirectory contact={contact}
|
||||
setSelectedContact={setSelectedContact}
|
||||
setIsOpenModal={setIsOpenModal}
|
||||
|
||||
/>
|
||||
{currentItems.map((item, index) => (
|
||||
<div key={index} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
|
||||
<CardViewDirectory contact={item} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user