diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx index 6e00e720..d66e8651 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,17 @@ 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 [ 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 +86,38 @@ const Directory = () => { prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id] ); }; - const filteredContacts = useMemo(() => { - return ContatList.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; - }).sort((a, b) => a.name.localeCompare(b.name)); - }, [ContatList, searchText, selectedCategoryIds]); + + 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 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); + + const matchesBucket = + selectedBucketIds.length === 0 || + (c.bucketIds || []).some((id) => selectedBucketIds.includes(id)); + + return matchesSearch && matchesCategory && matchesBucket; + }).sort((a, b) => a.name.localeCompare(b.name)); +}, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]); + const { currentPage, totalPages, currentItems, paginate } = usePagination( filteredContacts, ITEMS_PER_PAGE @@ -201,22 +225,48 @@ const Directory = () => { + + +

Apply Bucket Filter

+ {filteredBuckets.map(({ id, name }) => ( +
  • +
    + handleBucketChange(id)} + /> + +
    +
  • + ) )} +
    +

    Apply Category Filter

    + {filteredCategories.map(({ id, name }) => ( +
  • +
    + handleCategoryChange(id)} + /> + +
    +
  • + ))} + + + + +