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

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

@ -23,14 +23,13 @@ const Directory = () => {
const [ContactList, setContactList] = useState([]); const [ContactList, setContactList] = useState([]);
const [contactCategories, setContactCategories] = useState([]); const [contactCategories, setContactCategories] = useState([]);
const [searchText, setSearchText] = useState(""); const [searchText, setSearchText] = useState("");
const [ listView, setListView ] = useState( false ); const [listView, setListView] = useState(false);
const [selectedBucketIds, setSelectedBucketIds] = useState([]); const [selectedBucketIds, setSelectedBucketIds] = useState([]);
const { contacts, loading } = useDirectory(); const { contacts, loading } = useDirectory();
const { contactCategory, loading: contactCategoryLoading } = const { contactCategory, loading: contactCategoryLoading } =
useContactCategory(); useContactCategory();
const {buckets} = useBuckets() const { buckets } = useBuckets();
const submitContact = async (data) => { const submitContact = async (data) => {
try { try {
let response; let response;
@ -91,16 +90,16 @@ const Directory = () => {
setSelectedBucketIds((prev) => setSelectedBucketIds((prev) =>
prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id] prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
); );
}; };
const usedBucketIds = [ const usedBucketIds = [
...new Set(contacts.flatMap((c) => c.bucketIds || [])), ...new Set(contacts.flatMap((c) => c.bucketIds || [])),
]; ];
const filteredBuckets = buckets.filter((bucket) => const filteredBuckets = buckets.filter((bucket) =>
usedBucketIds.includes(bucket.id) usedBucketIds.includes(bucket.id)
); );
const filteredContacts = useMemo(() => { const filteredContacts = useMemo(() => {
return ContactList.filter((c) => { return ContactList.filter((c) => {
const matchesSearch = const matchesSearch =
c.name.toLowerCase().includes(searchText.toLowerCase()) || c.name.toLowerCase().includes(searchText.toLowerCase()) ||
@ -116,7 +115,7 @@ const filteredContacts = useMemo(() => {
return matchesSearch && matchesCategory && matchesBucket; return matchesSearch && matchesCategory && matchesBucket;
}).sort((a, b) => a.name.localeCompare(b.name)); }).sort((a, b) => a.name.localeCompare(b.name));
}, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]); }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]);
const { currentPage, totalPages, currentItems, paginate } = usePagination( const { currentPage, totalPages, currentItems, paginate } = usePagination(
filteredContacts, filteredContacts,
@ -153,10 +152,9 @@ const filteredContacts = useMemo(() => {
{isOpenModal && ( {isOpenModal && (
<GlobalModel <GlobalModel
isOpen={isOpenModal} isOpen={isOpenModal}
closeModal={() => closeModal={() => {
{ setSelectedContact(null);
setSelectedContact(null) setIsOpenModal(false);
setIsOpenModal(false)
}} }}
size="lg" size="lg"
> >
@ -166,14 +164,19 @@ const filteredContacts = useMemo(() => {
{isOpenModalNote && ( {isOpenModalNote && (
<GlobalModel <GlobalModel
isOpen={isOpenModalNote} isOpen={isOpenModalNote}
closeModal={() => closeModal={() => {
{ setOpen_contact(null);
setOpen_contact(null) setIsOpenModalNote(false);
setIsOpenModalNote(false)
}} }}
size="lg" 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> </GlobalModel>
)} )}
<div className="card p-2"> <div className="card p-2">
@ -224,31 +227,39 @@ const filteredContacts = useMemo(() => {
> >
<i className="bx bx-filter bx-lg ms-1"></i> <i className="bx bx-filter bx-lg ms-1"></i>
</a> </a>
<ul className="dropdown-menu p-2 text-capitalize"> <ul
className="dropdown-menu p-2 text-capitalize"
style={{ Width: "100%" }}
<p className="small-text mb-1">Apply Bucket Filter</p> >
<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 }) => ( {filteredBuckets.map(({ id, name }) => (
<li key={id}> <div className="form-check mb-1" key={id}>
<div className="form-check">
<input <input
className="form-check-input" className="form-check-input "
type="checkbox" type="checkbox"
id={`bucket-${id}`} id={`bucket-${id}`}
checked={selectedBucketIds.includes(id)} checked={selectedBucketIds.includes(id)}
onChange={() => handleBucketChange(id)} onChange={() => handleBucketChange(id)}
/> />
<label className="form-check-label" htmlFor={`bucket-${id}`}> <label
className="form-check-label text-nowrap"
htmlFor={`bucket-${id}`}
>
{name} {name}
</label> </label>
</div> </div>
</li> ))}
) )} </div>
<hr className="my-2" />
<p className="small-text mb-1">Apply Category Filter</p> {/* Category Filter */}
<div className="flex-fill">
<p className="small-text mb-2">Categories</p>
{filteredCategories.map(({ id, name }) => ( {filteredCategories.map(({ id, name }) => (
<li key={id}> <div className="form-check mb-1" key={id}>
<div className="form-check">
<input <input
className="form-check-input" className="form-check-input"
type="checkbox" type="checkbox"
@ -256,17 +267,17 @@ const filteredContacts = useMemo(() => {
checked={selectedCategoryIds.includes(id)} checked={selectedCategoryIds.includes(id)}
onChange={() => handleCategoryChange(id)} onChange={() => handleCategoryChange(id)}
/> />
<label className="form-check-label" htmlFor={`cat-${id}`}> <label
className="form-check-label text-nowrap"
htmlFor={`cat-${id}`}
>
{name} {name}
</label> </label>
</div> </div>
</li>
))} ))}
</div>
</div>
</ul>
</ul>
</div> </div>
</div> </div>
@ -282,6 +293,7 @@ const filteredContacts = useMemo(() => {
</div> </div>
</div> </div>
{!listView && loading && <p>Loading...</p>} {!listView && loading && <p>Loading...</p>}
{!listView && !loading && currentItems.length == 0 && <p>Not Found Contact</p>}
{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">
@ -332,9 +344,6 @@ const filteredContacts = useMemo(() => {
</th> </th>
<th className="mx-2">Category</th> <th className="mx-2">Category</th>
<th <th
// className={`mx-2 ${
// HasManageProject ? "d-sm-table-cell" : "d-none"
// }`}
> >
Action Action
</th> </th>
@ -347,12 +356,12 @@ const filteredContacts = useMemo(() => {
</tr> </tr>
)} )}
{!loading && {!loading &&
contacts.length == 0 && currentItems.length === 0 && (
ContatList.length === 0 && (
<tr> <tr>
<td colSpan={10}>No Contact Found</td> <td colSpan={10}>Not Found Contact</td>
</tr> </tr>
)} )}
{!loading && {!loading &&
currentItems.map((contact) => ( currentItems.map((contact) => (
<ListViewDirectory <ListViewDirectory