From e9903ee2f68fc549d88f3634aef7650951c80427 Mon Sep 17 00:00:00 2001 From: Pramod Mahajan Date: Sun, 18 May 2025 23:14:45 +0530 Subject: [PATCH 01/20] added new component for card View directory-contacts --- .../Directory/CardViewDirectory.jsx | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 src/components/Directory/CardViewDirectory.jsx diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx new file mode 100644 index 00000000..3dfda7be --- /dev/null +++ b/src/components/Directory/CardViewDirectory.jsx @@ -0,0 +1,75 @@ +import React from "react"; + +const CardViewDirectory = ({contact}) => { + return ( +
+
+
+

{contact.name}

+ +
+
+
+ + +
+
+
+
+
+ {contact.contactEmails &&
    +
  • + +
    • +
  • {contact.contactEmails[ 0 ]?.emailAddress}
    • +
} + + {contact.contactPhones &&
    +
  • + +
    • +
  • {contact.contactPhones[ 0 ]?.phoneNumber}
    • +
} + +
    +
  • + +
    • +
  • + {contact.contactCategory.name} +
    • +
+ +
+
+ ); +}; + +export default CardViewDirectory; From b65be7280933a5a267debe39c0b3f712653539d4 Mon Sep 17 00:00:00 2001 From: Pramod Mahajan Date: Sun, 18 May 2025 23:16:04 +0530 Subject: [PATCH 02/20] increased width of name coulmn --- src/components/Directory/ListViewDirectory.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Directory/ListViewDirectory.jsx b/src/components/Directory/ListViewDirectory.jsx index 441aee45..033290cd 100644 --- a/src/components/Directory/ListViewDirectory.jsx +++ b/src/components/Directory/ListViewDirectory.jsx @@ -26,7 +26,7 @@ const getPhoneIcon = (type) => { const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal }) => { return ( - {`${contact.name}`} + {`${contact.name}`} {/* Emails */} From 49d38f553ad5a289548c222365f1db19c7aee3c6 Mon Sep 17 00:00:00 2001 From: Pramod Mahajan Date: Sun, 18 May 2025 23:16:34 +0530 Subject: [PATCH 03/20] added category filter and search --- src/pages/Directory/Directory.jsx | 218 +++++++++++++++++++++++------- 1 file changed, 172 insertions(+), 46 deletions(-) diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx index e7396339..b78a0bc3 100644 --- a/src/pages/Directory/Directory.jsx +++ b/src/pages/Directory/Directory.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import Breadcrumb from "../../components/common/Breadcrumb"; import IconButton from "../../components/common/IconButton"; import GlobalModel from "../../components/common/GlobalModel"; @@ -9,13 +9,21 @@ import { DirectoryRepository } from "../../repositories/DirectoryRepository"; import { getCachedData } from "../../slices/apiDataManager"; import showToast from "../../services/toastService"; import UpdateContact from "../../components/Directory/UpdateContact"; +import CardViewDirectory from "../../components/Directory/CardViewDirectory"; +import { useContactCategory } from "../../hooks/masterHook/useMaster"; +import usePagination from "../../hooks/usePagination"; const Directory = () => { const [isOpenModal, setIsOpenModal] = useState(false); const [selectedContact, setSelectedContact] = useState(null); const [ContatList, setContactList] = useState([]); + const [contactCategories, setContactCategories] = useState([]); + const [ searchText, setSearchText ] = useState( "" ); + const [listView, setListView] = useState(false); const { contacts, loading } = useDirectory(); + const { contactCategory, loading: contactCategoryLoading } = + useContactCategory(); const submitContact = async (data) => { try { let response; @@ -23,13 +31,12 @@ const Directory = () => { const contacts_cache = getCachedData("contacts") || []; if (selectedContact) { - response = await DirectoryRepository.UpdateContact(data.id, data); updatedContacts = contacts_cache.map((contact) => contact.id === data.id ? response.data : contact ); showToast("Contact updated successfully", "success"); - setIsOpenModal( false ); + setIsOpenModal(false); setSelectedContact(null); } else { response = await DirectoryRepository.CreateContact(data); @@ -55,6 +62,40 @@ const Directory = () => { useEffect(() => { setContactList(contacts); }, [contacts]); + + const [selectedCategoryIds, setSelectedCategoryIds] = useState( + contactCategory.map((category) => category.id) + ); + + const usedCategoryIds = [ + ...new Set(contacts.map((c) => c.contactCategory?.id)), + ]; + const filteredCategories = contactCategory.filter((category) => + usedCategoryIds.includes(category.id) + ); + const handleCategoryChange = (id) => { + setSelectedCategoryIds((prev) => + prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id] + ); + }; + const filteredContacts = useMemo(() => { + return contacts + .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)); + }, [contacts, searchText, selectedCategoryIds]); + const { currentPage, totalPages, currentItems, paginate } = usePagination( + filteredContacts, + 10 + ); + return (
{ )} )} -
-
-
+
+
setSearchText(e.target.value)} /> +
+ + +
+
+ +
    +

    Apply Filter

    + {filteredCategories.map(({ id, name }) => ( +
  • +
    + handleCategoryChange(id)} + /> + +
    +
    • + ))} +
+
-
+ +
-
+ { + listView ? ( +
@@ -152,40 +253,7 @@ const Directory = () => { Organization - + )} {!loading && - ContatList.map((contact) => ( + currentItems.map((contact) => ( {
-
- - {/*
    - {[ - { id: 1, label: "Active" }, - { id: 2, label: "On Hold" }, - { id: 3, label: "Inactive" }, - { id: 4, label: "Completed" }, - ].map(({ id, label }) => ( -
  • -
    - handleStatusChange(id)} - /> - -
    -
    • - ))} -
- */} -
- 		Category {
+ ) : ( +
+ {currentItems.map((item, index) => ( +
+ +
+ ))} +
+ ) + } + + + + + + {!loading && ( + + )}
); From 1cac05ddcbe1d3953b865831a30a5be42a658eb2 Mon Sep 17 00:00:00 2001 From: Pramod Mahajan Date: Mon, 19 May 2025 09:47:34 +0530 Subject: [PATCH 04/20] updated state for reflacte immediately update in rendered UI --- src/pages/Directory/Directory.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx index b78a0bc3..c31d2fdf 100644 --- a/src/pages/Directory/Directory.jsx +++ b/src/pages/Directory/Directory.jsx @@ -79,7 +79,7 @@ const Directory = () => { ); }; const filteredContacts = useMemo(() => { - return contacts + return ContatList .filter((c) => { const matchesSearch = c.name.toLowerCase().includes(searchText.toLowerCase()) || @@ -90,7 +90,7 @@ const Directory = () => { return matchesSearch && matchesCategory; }) .sort((a, b) => a.name.localeCompare(b.name)); - }, [contacts, searchText, selectedCategoryIds]); + }, [ContatList, searchText, selectedCategoryIds]); const { currentPage, totalPages, currentItems, paginate } = usePagination( filteredContacts, 10 From 7613f36624786e6f4101d723a3e7397b6fd10300 Mon Sep 17 00:00:00 2001 From: Pramod Mahajan Date: Mon, 19 May 2025 11:21:37 +0530 Subject: [PATCH 05/20] added avatar for name --- src/components/Directory/CardViewDirectory.jsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx index 3dfda7be..b7213829 100644 --- a/src/components/Directory/CardViewDirectory.jsx +++ b/src/components/Directory/CardViewDirectory.jsx @@ -1,12 +1,17 @@ import React from "react"; +import Avatar from "../common/Avatar"; const CardViewDirectory = ({contact}) => { return (
-
-

{contact.name}

- +
+

{contact.name}

+
@@ -44,14 +49,14 @@ const CardViewDirectory = ({contact}) => {
- {contact.contactEmails &&