diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx index 6e00e720..8ec2c23e 100644 --- a/src/pages/Directory/Directory.jsx +++ b/src/pages/Directory/Directory.jsx @@ -4,7 +4,7 @@ import IconButton from "../../components/common/IconButton"; import GlobalModel from "../../components/common/GlobalModel"; import ManageDirectory from "../../components/Directory/ManageDirectory"; import ListViewDirectory from "../../components/Directory/ListViewDirectory"; -import { useDirectory } from "../../hooks/useDirectory"; +import { useBuckets, useDirectory } from "../../hooks/useDirectory"; import { DirectoryRepository } from "../../repositories/DirectoryRepository"; import { getCachedData } from "../../slices/apiDataManager"; import showToast from "../../services/toastService"; @@ -20,14 +20,16 @@ const Directory = () => { const [isOpenModalNote, setIsOpenModalNote] = useState(false); const [selectedContact, setSelectedContact] = useState(null); const [open_contact, setOpen_contact] = useState(null); - const [ContatList, setContactList] = useState([]); + const [ContactList, setContactList] = useState([]); const [contactCategories, setContactCategories] = useState([]); const [searchText, setSearchText] = useState(""); const [listView, setListView] = useState(false); + const [selectedBucketIds, setSelectedBucketIds] = useState([]); const { contacts, loading } = useDirectory(); const { contactCategory, loading: contactCategoryLoading } = useContactCategory(); + const { buckets } = useBuckets(); const submitContact = async (data) => { try { let response; @@ -83,17 +85,38 @@ const Directory = () => { prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id] ); }; + + const handleBucketChange = (id) => { + setSelectedBucketIds((prev) => + prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id] + ); + }; + const usedBucketIds = [ + ...new Set(contacts.flatMap((c) => c.bucketIds || [])), + ]; + + const filteredBuckets = buckets.filter((bucket) => + usedBucketIds.includes(bucket.id) + ); + const filteredContacts = useMemo(() => { - return ContatList.filter((c) => { + return ContactList.filter((c) => { const matchesSearch = c.name.toLowerCase().includes(searchText.toLowerCase()) || c.organization.toLowerCase().includes(searchText.toLowerCase()); + const matchesCategory = selectedCategoryIds.length === 0 || selectedCategoryIds.includes(c.contactCategory?.id); - return matchesSearch && matchesCategory; + + const matchesBucket = + selectedBucketIds.length === 0 || + (c.bucketIds || []).some((id) => selectedBucketIds.includes(id)); + + return matchesSearch && matchesCategory && matchesBucket; }).sort((a, b) => a.name.localeCompare(b.name)); - }, [ContatList, searchText, selectedCategoryIds]); + }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]); + const { currentPage, totalPages, currentItems, paginate } = usePagination( filteredContacts, ITEMS_PER_PAGE @@ -129,10 +152,9 @@ const Directory = () => { {isOpenModal && ( - { - setSelectedContact(null) - setIsOpenModal(false) + closeModal={() => { + setSelectedContact(null); + setIsOpenModal(false); }} size="lg" > @@ -142,14 +164,19 @@ const Directory = () => { {isOpenModalNote && ( - { - setOpen_contact(null) - setIsOpenModalNote(false) + closeModal={() => { + setOpen_contact(null); + setIsOpenModalNote(false); }} size="lg" > - {open_contact && setIsOpenModalNote(false)} />} + {open_contact && ( + setIsOpenModalNote(false)} + /> + )} )}
@@ -200,22 +227,56 @@ const Directory = () => { > -
@@ -232,6 +293,7 @@ const Directory = () => { {!listView && loading &&

Loading...

} + {!listView && !loading && currentItems.length == 0 &&

Not Found Contact

} {listView ? (
@@ -282,9 +344,6 @@ const Directory = () => { @@ -297,12 +356,12 @@ const Directory = () => { )} {!loading && - contacts.length == 0 && - ContatList.length === 0 && ( + currentItems.length === 0 && ( - + )} + {!loading && currentItems.map((contact) => (
Category Action
No Contact FoundNot Found Contact