admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

addded new component for profile contact , that open in modal for adding notes

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-20 18:14:55 +05:30
parent 1a7636ad82
commit e3cfc1c073
1 changed files with 148 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

274
src/pages/Directory/Directory.jsx
View File

@ -12,15 +12,18 @@ import UpdateContact from "../../components/Directory/UpdateContact";
import CardViewDirectory from "../../components/Directory/CardViewDirectory"; import CardViewDirectory from "../../components/Directory/CardViewDirectory";
import { useContactCategory } from "../../hooks/masterHook/useMaster"; import { useContactCategory } from "../../hooks/masterHook/useMaster";
import usePagination from "../../hooks/usePagination"; import usePagination from "../../hooks/usePagination";
import {ITEMS_PER_PAGE} from "../../utils/constants"; import { ITEMS_PER_PAGE } from "../../utils/constants";
import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
const Directory = () => { const Directory = () => {
const [isOpenModal, setIsOpenModal] = useState(false); const [isOpenModal, setIsOpenModal] = useState(false);
const [isOpenModalNote, setIsOpenModalNote] = useState(false);
const [selectedContact, setSelectedContact] = useState(null); const [selectedContact, setSelectedContact] = useState(null);
const [open_contact, setOpen_contact] = useState(null);
const [ContatList, setContactList] = useState([]); const [ContatList, setContactList] = useState([]);
const [contactCategories, setContactCategories] = useState([]); const [contactCategories, setContactCategories] = useState([]);
const [ searchText, setSearchText ] = useState( "" ); const [searchText, setSearchText] = useState("");
const [listView, setListView] = useState(true); const [listView, setListView] = useState(false);
const { contacts, loading } = useDirectory(); const { contacts, loading } = useDirectory();
const { contactCategory, loading: contactCategoryLoading } = const { contactCategory, loading: contactCategoryLoading } =
@ -59,6 +62,7 @@ const Directory = () => {
const closedModel = () => { const closedModel = () => {
setIsOpenModal(false); setIsOpenModal(false);
setSelectedContact(null); setSelectedContact(null);
setOpen_contact(null);
}; };
useEffect(() => { useEffect(() => {
setContactList(contacts); setContactList(contacts);
@ -80,23 +84,39 @@ const Directory = () => {
); );
}; };
const filteredContacts = useMemo(() => { const filteredContacts = useMemo(() => {
return ContatList return ContatList.filter((c) => {
.filter((c) => { const matchesSearch =
const matchesSearch = c.name.toLowerCase().includes(searchText.toLowerCase()) ||
c.name.toLowerCase().includes(searchText.toLowerCase()) || c.organization.toLowerCase().includes(searchText.toLowerCase());
c.organization.toLowerCase().includes(searchText.toLowerCase()); const matchesCategory =
const matchesCategory = selectedCategoryIds.length === 0 ||
selectedCategoryIds.length === 0 || selectedCategoryIds.includes(c.contactCategory?.id);
selectedCategoryIds.includes(c.contactCategory?.id); return matchesSearch && matchesCategory;
return matchesSearch && matchesCategory; }).sort((a, b) => a.name.localeCompare(b.name));
})
.sort((a, b) => a.name.localeCompare(b.name));
}, [ContatList, searchText, selectedCategoryIds]); }, [ContatList, searchText, selectedCategoryIds]);
const { currentPage, totalPages, currentItems, paginate } = usePagination( const { currentPage, totalPages, currentItems, paginate } = usePagination(
filteredContacts, filteredContacts,
ITEMS_PER_PAGE ITEMS_PER_PAGE
); );
const renderModalContent = () => {
if (selectedContact) {
return (
<UpdateContact
existingContact={selectedContact}
submitContact={submitContact}
onCLosed={closedModel}
/>
);
}
if (!open_contact) {
return (
<ManageDirectory submitContact={submitContact} onCLosed={closedModel} />
);
}
};
return ( return (
<div className="container-xxl flex-grow-1 container-p-y"> <div className="container-xxl flex-grow-1 container-p-y">
<Breadcrumb <Breadcrumb
@ -112,23 +132,22 @@ const Directory = () => {
closeModal={() => setIsOpenModal(false)} closeModal={() => setIsOpenModal(false)}
size="lg" size="lg"
> >
{selectedContact ? ( {renderModalContent()}
<UpdateContact </GlobalModel>
existingContact={selectedContact} )}
submitContact={submitContact} {isOpenModalNote && (
onCLosed={closedModel} <GlobalModel
/> isOpen={isOpenModalNote}
) : ( closeModal={() => setIsOpenModalNote(false)}
<ManageDirectory size="lg"
submitContact={submitContact} IsCloseBtn={false}
onCLosed={closedModel} >
/> {open_contact && <ProfileContactDirectory contact={open_contact} setOpen_contact={setOpen_contact} closeModal={ () => setIsOpenModalNote(false)} />}
)}
</GlobalModel> </GlobalModel>
)} )}
<div className="card p-2"> <div className="card p-2">
<div className="row mx-0 px-0 align-items-center"> <div className="row mx-0 px-0 align-items-center">
<div className="col-7 col-md-4 mb-2 px-1 d-flex align-items-center "> <div className="col-12 col-md-4 mb-2 px-1 d-flex align-items-center ">
<input <input
type="search" type="search"
className="form-control form-control-sm me-2" className="form-control form-control-sm me-2"
@ -166,7 +185,7 @@ const Directory = () => {
<i className="bx bx-list-ul bx-sm"></i> <i className="bx bx-list-ul bx-sm"></i>
</button> </button>
</div> </div>
<div className="dropdown"> <div className="dropdown">
<a <a
className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center" className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
@ -194,117 +213,118 @@ const Directory = () => {
</div> </div>
</div> </div>
<div className="col-5 col-md-8 mb-2 px-1 text-md-end text-end"> <div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
<button <button
type="button" type="button"
className="btn btn-xs btn-primary" className="btn btn-xs btn-primary"
onClick={() => setIsOpenModal(true)} onClick={() => setIsOpenModal(true)}
> >
<i className="bx bx-plus-circle me-2"></i> <i className="bx bx-plus-circle me-2"></i>
<span className="d-sm-block d-none"> New Contact</span> New Contact
</button> </button>
</div> </div>
</div> </div>
{ {listView ? (
listView ? ( <div className="table-responsive text-nowrap py-2 ">
<div className="table-responsive text-nowrap py-2 "> <table className="table px-2">
<table className="table px-2"> <thead>
<thead> <tr>
<tr> <th colSpan={2}>
<th colSpan={2}> <div className="d-flex align-items-center gap-1">
<div className="d-flex align-items-center gap-1"> <IconButton
<IconButton size={12}
size={12} iconClass="bx bx-user"
iconClass="bx bx-user" color="secondary"
color="secondary" onClick={() => alert("User icon clicked")}
onClick={() => alert("User icon clicked")} />
/> <span>Name</span>
<span>Name</span> </div>
</div> </th>
</th> <th className="px-2 text-start">
<th className="px-2 text-start"> <div className="d-flex text-center align-items-center gap-1 justify-content-start">
<div className="d-flex text-center align-items-center gap-1 justify-content-start"> <IconButton
<IconButton size={12}
size={12} iconClass="bx bx-envelope"
iconClass="bx bx-envelope" color="primary"
color="primary" />
/> <span>Email</span>
<span>Email</span> </div>
</div> </th>
</th>
<th className="mx-2"> <th className="mx-2">
<div className="d-flex align-items-center m-0 p-0 gap-1"> <div className="d-flex align-items-center m-0 p-0 gap-1">
<IconButton <IconButton
size={12} size={12}
iconClass="bx bx-phone" iconClass="bx bx-phone"
color="warning" color="warning"
onClick={() => alert("User icon clicked")} onClick={() => alert("User icon clicked")}
/> />
<span>Phone</span> <span>Phone</span>
</div> </div>
</th> </th>
<th className="mx-2"> <th className="mx-2">
<div className="d-flex align-items-center gap-1"> <div className="d-flex align-items-center gap-1">
<IconButton <IconButton
size={12} size={12}
iconClass="bx bxs-grid-alt" iconClass="bx bxs-grid-alt"
color="info" color="info"
/> />
<span>Organization</span> <span>Organization</span>
</div> </div>
</th> </th>
<th className="mx-2">Category</th> <th className="mx-2">Category</th>
<th <th
// className={`mx-2 ${ // className={`mx-2 ${
// HasManageProject ? "d-sm-table-cell" : "d-none" // HasManageProject ? "d-sm-table-cell" : "d-none"
// }`} // }`}
> >
Action Action
</th> </th>
</tr>
</thead>
<tbody className="table-border-bottom-0 overflow-auto ">
{loading && ContatList.length === 0 && (
<tr>
<td colSpan={10}>Loading...</td>
</tr> </tr>
)} </thead>
{!loading && contacts.length == 0 && ContatList.length === 0 && ( <tbody className="table-border-bottom-0 overflow-auto ">
<tr> {loading && ContatList.length === 0 && (
<td colSpan={10}>No Contact Found</td> <tr>
</tr> <td colSpan={10}>Loading...</td>
)} </tr>
{!loading && )}
currentItems.map((contact) => ( {!loading &&
<ListViewDirectory contacts.length == 0 &&
ContatList.length === 0 && (
<tr>
<td colSpan={10}>No Contact Found</td>
</tr>
)}
{!loading &&
currentItems.map((contact) => (
<ListViewDirectory
key={contact.id} key={contact.id}
contact={contact} contact={contact}
setSelectedContact={setSelectedContact} setSelectedContact={setSelectedContact}
setIsOpenModal={setIsOpenModal} setIsOpenModal={setIsOpenModal}
/> />
))} ))}
</tbody> </tbody>
</table> </table>
</div> </div>
) : ( ) : (
<div className="row"> <div className="row">
{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"> <div
<CardViewDirectory contact={contact} key={contact.id}
setSelectedContact={setSelectedContact} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
setIsOpenModal={setIsOpenModal} >
<CardViewDirectory
/> contact={contact}
</div> setSelectedContact={setSelectedContact}
))} setIsOpenModal={setIsOpenModal}
</div> setOpen_contact={setOpen_contact}
) setIsOpenModalNote={setIsOpenModalNote}
} />
</div>
))}
</div>
)}
{!loading && ( {!loading && (
<nav aria-label="Page "> <nav aria-label="Page ">