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

pramod_Task-#320 #127

Merged
pramod.mahajan merged 2 commits from pramod_Task-#320 into Feature_Directory 2025-05-21 12:55:35 +00:00
Conversation 0 Commits 2 Files Changed 1 +93 -84
1 changed files with 93 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 228c178acf - Show all commits

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

@ -26,11 +26,10 @@ const Directory = () => {
const [listView, setListView] = useState(false);
const [selectedBucketIds, setSelectedBucketIds] = useState([]);
const { contacts, loading } = useDirectory();
const { contactCategory, loading: contactCategoryLoading } =
useContactCategory();
const {buckets} = useBuckets()
const { buckets } = useBuckets();
const submitContact = async (data) => {
try {
let response;
@ -153,10 +152,9 @@ const filteredContacts = useMemo(() => {
{isOpenModal && (
<GlobalModel
isOpen={isOpenModal}
closeModal={() =>
{
setSelectedContact(null)
setIsOpenModal(false)
closeModal={() => {
setSelectedContact(null);
setIsOpenModal(false);
}}
size="lg"
>
@ -166,14 +164,19 @@ const filteredContacts = useMemo(() => {
{isOpenModalNote && (
<GlobalModel
isOpen={isOpenModalNote}
closeModal={() =>
{
setOpen_contact(null)
setIsOpenModalNote(false)
closeModal={() => {
setOpen_contact(null);
setIsOpenModalNote(false);
}}
size="lg"
>
{open_contact && <ProfileContactDirectory contact={open_contact} setOpen_contact={setOpen_contact} closeModal={ () => setIsOpenModalNote(false)} />}
{open_contact && (
<ProfileContactDirectory
contact={open_contact}
setOpen_contact={setOpen_contact}
closeModal={() => setIsOpenModalNote(false)}
/>
)}
</GlobalModel>
)}
<div className="card p-2">
@ -224,13 +227,17 @@ const filteredContacts = useMemo(() => {
>
<i className="bx bx-filter bx-lg ms-1"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
<p className="small-text mb-1">Apply Bucket Filter</p>
<ul
className="dropdown-menu p-2 text-capitalize"
style={{ Width: "100%" }}
>
<p className="small-text text-muted m-0">Filter by</p>
<div className="d-flex gap-4 justify-content-between">
{/* Bucket Filter */}
<div className="flex-fill ">
<p className="small-text mb-2 ">Buckets</p>
{filteredBuckets.map(({ id, name }) => (
<li key={id}>
<div className="form-check">
<div className="form-check mb-1" key={id}>
<input
className="form-check-input "
type="checkbox"
@ -238,17 +245,21 @@ const filteredContacts = useMemo(() => {
checked={selectedBucketIds.includes(id)}
onChange={() => handleBucketChange(id)}
/>
<label className="form-check-label" htmlFor={`bucket-${id}`}>
<label
className="form-check-label text-nowrap"
htmlFor={`bucket-${id}`}
>
{name}
</label>
</div>
</li>
))}
<hr className="my-2" />
<p className="small-text mb-1">Apply Category Filter</p>
</div>
{/* Category Filter */}
<div className="flex-fill">
<p className="small-text mb-2">Categories</p>
{filteredCategories.map(({ id, name }) => (
<li key={id}>
<div className="form-check">
<div className="form-check mb-1" key={id}>
<input
className="form-check-input"
type="checkbox"
@ -256,17 +267,17 @@ const filteredContacts = useMemo(() => {
checked={selectedCategoryIds.includes(id)}
onChange={() => handleCategoryChange(id)}
/>
<label className="form-check-label" htmlFor={`cat-${id}`}>
<label
className="form-check-label text-nowrap"
htmlFor={`cat-${id}`}
>
{name}
</label>
</div>
</li>
))}
</div>
</div>
</ul>
</div>
</div>
@ -282,6 +293,7 @@ const filteredContacts = useMemo(() => {
</div>
</div>
{!listView && loading && <p>Loading...</p>}
{!listView && !loading && currentItems.length == 0 && <p>Not Found Contact</p>}
{listView ? (
<div className="table-responsive text-nowrap py-2 ">
<table className="table px-2">
@ -332,9 +344,6 @@ const filteredContacts = useMemo(() => {
</th>
<th className="mx-2">Category</th>
<th
// className={`mx-2 ${
// HasManageProject ? "d-sm-table-cell" : "d-none"
// }`}
>
Action
</th>
@ -347,12 +356,12 @@ const filteredContacts = useMemo(() => {
</tr>
)}
{!loading &&
contacts.length == 0 &&
ContatList.length === 0 && (
currentItems.length === 0 && (
<tr>
<td colSpan={10}>No Contact Found</td>
<td colSpan={10}>Not Found Contact</td>
</tr>
)}
{!loading &&
currentItems.map((contact) => (
<ListViewDirectory