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

display contact in list view

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-15 12:20:55 +05:30
parent cc98f34b44
commit 50ef045479
1 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,11 +3,16 @@ import Breadcrumb from "../../components/common/Breadcrumb";
import IconButton from "../../components/common/IconButton"; import IconButton from "../../components/common/IconButton";
import GlobalModel from "../../components/common/GlobalModel"; import GlobalModel from "../../components/common/GlobalModel";
import ManageDirectory from "../../components/Directory/ManageDirectory"; import ManageDirectory from "../../components/Directory/ManageDirectory";
import ListViewDirectory from "../../components/Directory/ListViewDirectory";
import {useDirectory} from "../../hooks/useDirectory";
const Directory = () => { const Directory = () => {
const [isOpenModal, setIsOpenModal] = useState(false); const [isOpenModal, setIsOpenModal] = useState(false);
const closedModel = () => setIsOpenModal(false); const closedModel = () => setIsOpenModal( false );
const {contacts} = useDirectory();
console.log(contacts)
return ( return (
<div className="container-xxl flex-grow-1 container-p-y"> <div className="container-xxl flex-grow-1 container-p-y">
<Breadcrumb <Breadcrumb
@ -17,17 +22,17 @@ const Directory = () => {
]} ]}
></Breadcrumb> ></Breadcrumb>
<GlobalModel isOpen={isOpenModal} closeModal={closedModel}> <GlobalModel isOpen={isOpenModal} closeModal={closedModel} size="lg">
<ManageDirectory /> <ManageDirectory />
</GlobalModel> </GlobalModel>
<div className="row"> <div className="card p-2">
<div className="row mx-0 px-0"> <div className="row mx-0 px-0">
<div className="col-md-4 col-6 flex-grow-1 mb-2 px-1"> <div className="col-md-4 col-6 flex-grow-1 mb-2 px-1">
<input <input
type="search" type="search"
className="form-control form-control-sm" className="form-control form-control-sm"
placeholder="Search projects..." placeholder="Search Contact..."
/> />
</div> </div>
<div className="col-md-8 col-6 text-end flex-grow-1 mb-2 px-1"> <div className="col-md-8 col-6 text-end flex-grow-1 mb-2 px-1">
@ -43,22 +48,30 @@ const Directory = () => {
</div> </div>
<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 className="text-start" colSpan="2"> <th>
Name
</th>
<th className="px-2">
<div className="d-flex align-items-center gap-1"> <div className="d-flex align-items-center gap-1">
<IconButton
size={12}
iconClass="bx bx-user"
color="secondary"
onClick={() => alert("User icon clicked")}
/>
<span>Name</span>
</div>
</th>
<th colSpan="2" className="px-2 text-center">
<div className="d-flex text-center align-items-center gap-1 justify-content-center">
<IconButton <IconButton
size={12} size={12}
iconClass="bx bx-envelope" iconClass="bx bx-envelope"
color="primary" color="primary"
onClick={() => alert("User icon clicked")}
/> />
<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
@ -87,7 +100,7 @@ const Directory = () => {
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false" aria-expanded="false"
> >
Type <i className="bx bx-filter bx-sm"></i> Category <i className="bx bx-filter bx-sm"></i>
</a> </a>
{/* <ul className="dropdown-menu p-2 text-capitalize"> {/* <ul className="dropdown-menu p-2 text-capitalize">
{[ {[
@ -124,11 +137,9 @@ const Directory = () => {
</tr> </tr>
</thead> </thead>
<tbody className="table-border-bottom-0 overflow-auto "> <tbody className="table-border-bottom-0 overflow-auto ">
<tr> {contacts.map((contact) => (
<td colSpan="12" className="text-center py-4"> <ListViewDirectory contact={contact} />
comming soon.... ))}
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>