Add cosmatic changes
This commit is contained in:
parent
9573daa8b0
commit
c3a52c46eb
@ -23,12 +23,17 @@ const CardViewDirectory = ({
|
||||
>
|
||||
<div className="card-body px-1 py-2 pb-0">
|
||||
<div className="d-flex justify-content-between">
|
||||
<div className={`d-flex align-items-center ${IsActive && "cursor-pointer"}`} onClick={() => {
|
||||
if (IsActive) {
|
||||
setIsOpenModalNote(true);
|
||||
setOpen_contact(contact);
|
||||
}
|
||||
}}>
|
||||
<div
|
||||
className={`d-flex align-items-center ${
|
||||
IsActive && "cursor-pointer"
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (IsActive) {
|
||||
setIsOpenModalNote(true);
|
||||
setOpen_contact(contact);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={
|
||||
@ -50,7 +55,7 @@ const CardViewDirectory = ({
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i
|
||||
className="bx bx-dots-vertical-rounded bx-sm text-muted p-0"
|
||||
className="bx bx-dots-vertical-rounded text-muted p-0"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
@ -100,16 +105,18 @@ const CardViewDirectory = ({
|
||||
</div>
|
||||
|
||||
<ul className="list-inline m-0 ps-4 d-flex align-items-start">
|
||||
<li className="list-inline-item me-1 small">
|
||||
{/* <li className="list-inline-item me-1 small">
|
||||
<i className="fa-solid fa-briefcase me-2"></i>
|
||||
</li>
|
||||
<li className="list-inline-item text-break small">
|
||||
</li> */}
|
||||
<li className="list-inline-item text-break small ms-5">
|
||||
{contact.organization}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className={`card-footer text-start px-1 py-1 ${IsActive && "cursor-pointer"}`}
|
||||
className={`card-footer text-start px-1 py-1 ${
|
||||
IsActive && "cursor-pointer"
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (IsActive) {
|
||||
setIsOpenModalNote(true);
|
||||
@ -119,7 +126,7 @@ const CardViewDirectory = ({
|
||||
>
|
||||
<hr className="my-0" />
|
||||
{contact.contactEmails[0] && (
|
||||
<ul className="list-unstyled my-1 d-flex align-items-start">
|
||||
<ul className="list-unstyled my-1 d-flex align-items-start ms-2">
|
||||
<li className="me-2">
|
||||
<i className="bx bx-envelope bx-xs mt-1"></i>
|
||||
</li>
|
||||
@ -130,7 +137,7 @@ const CardViewDirectory = ({
|
||||
)}
|
||||
|
||||
{contact.contactPhones[0] && (
|
||||
<ul className="list-inline m-0 ">
|
||||
<ul className="list-inline m-0 ms-2">
|
||||
<li className="list-inline-item me-1">
|
||||
<i
|
||||
className={` ${getPhoneIcon(
|
||||
@ -145,24 +152,24 @@ const CardViewDirectory = ({
|
||||
)}
|
||||
|
||||
{contact?.contactCategory?.name ? (
|
||||
<ul className="list-inline m-0">
|
||||
<ul className="list-inline m-0 ms-2">
|
||||
<li className="list-inline-item me-2 my-1">
|
||||
<i className="fa-solid fa-tag fs-6"></i>
|
||||
<i className="fa-solid fa-tag fs-6 ms-1"></i>
|
||||
</li>
|
||||
<li className="list-inline-item text-small active">
|
||||
{contact?.contactCategory?.name}
|
||||
</li>
|
||||
</ul>
|
||||
) : (
|
||||
<ul className="list-inline m-0">
|
||||
<ul className="list-inline m-0 ms-2">
|
||||
<li className="list-inline-item me-2 my-1">
|
||||
<i className="fa-solid fa-tag fs-6"></i>
|
||||
<i className="fa-solid fa-tag fs-6 ms-1"></i>
|
||||
</li>
|
||||
<li className="list-inline-item text-small active">Other</li>
|
||||
</ul>
|
||||
)}
|
||||
|
||||
<ul className="list-inline m-0">
|
||||
<ul className="list-inline m-0 ms-2">
|
||||
{contact?.bucketIds?.map((bucketId) => (
|
||||
<li key={bucketId} className="list-inline-item me-1">
|
||||
<span
|
||||
|
||||
@ -18,13 +18,12 @@ import ConfirmModal from "../../components/common/ConfirmModal";
|
||||
import DirectoryListTableHeader from "./DirectoryListTableHeader";
|
||||
import DirectoryPageHeader from "./DirectoryPageHeader";
|
||||
import ManageBucket from "../../components/Directory/ManageBucket";
|
||||
import {useFab} from "../../Context/FabContext";
|
||||
import {DireProvider, useDir} from "../../Context/DireContext";
|
||||
import { useFab } from "../../Context/FabContext";
|
||||
import { DireProvider, useDir } from "../../Context/DireContext";
|
||||
|
||||
const Directory = ({IsPage=true,prefernceContacts}) =>
|
||||
{
|
||||
const [ projectPrefernce, setPerfence ] = useState( null )
|
||||
const[IsActive,setIsActive] = useState(true)
|
||||
const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
const [projectPrefernce, setPerfence] = useState(null);
|
||||
const [IsActive, setIsActive] = useState(true);
|
||||
const [isOpenModal, setIsOpenModal] = useState(false);
|
||||
const [isOpenModalNote, setIsOpenModalNote] = useState(false);
|
||||
const [selectedContact, setSelectedContact] = useState(null);
|
||||
@ -35,21 +34,22 @@ const Directory = ({IsPage=true,prefernceContacts}) =>
|
||||
const [listView, setListView] = useState(false);
|
||||
const [selectedBucketIds, setSelectedBucketIds] = useState([]);
|
||||
const [deleteContact, setDeleteContact] = useState(null);
|
||||
const [ IsDeleting, setDeleting ] = useState( false );
|
||||
const [ openBucketModal, setOpenBucketModal ] = useState( false )
|
||||
|
||||
const [IsDeleting, setDeleting] = useState(false);
|
||||
const [openBucketModal, setOpenBucketModal] = useState(false);
|
||||
|
||||
const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
|
||||
const [ tempSelectedCategoryIds, setTempSelectedCategoryIds ] = useState( [] );
|
||||
const {setActions} = useFab()
|
||||
const { dirActions, setDirActions } = useDir();
|
||||
const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
|
||||
const { setActions } = useFab();
|
||||
const { dirActions, setDirActions } = useDir();
|
||||
|
||||
|
||||
const { contacts, loading , refetch} = useDirectory(IsActive,projectPrefernce);
|
||||
const { contacts, loading, refetch } = useDirectory(
|
||||
IsActive,
|
||||
projectPrefernce
|
||||
);
|
||||
const { contactCategory, loading: contactCategoryLoading } =
|
||||
useContactCategory();
|
||||
const {buckets,refetch:refetchBucket} = useBuckets();
|
||||
|
||||
useContactCategory();
|
||||
const { buckets, refetch: refetchBucket } = useBuckets();
|
||||
|
||||
const submitContact = async (data) => {
|
||||
try {
|
||||
let response;
|
||||
@ -63,18 +63,18 @@ const Directory = ({IsPage=true,prefernceContacts}) =>
|
||||
);
|
||||
showToast("Contact updated successfully", "success");
|
||||
setIsOpenModal(false);
|
||||
setSelectedContact( null );
|
||||
setSelectedContact(null);
|
||||
} else {
|
||||
response = await DirectoryRepository.CreateContact(data);
|
||||
updatedContacts = [...contacts_cache, response.data];
|
||||
showToast("Contact created successfully", "success");
|
||||
setIsOpenModal(false);
|
||||
}
|
||||
|
||||
|
||||
// cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
|
||||
// setContactList(updatedContacts);
|
||||
refetch( IsActive, prefernceContacts )
|
||||
refetchBucket()
|
||||
refetch(IsActive, prefernceContacts);
|
||||
refetchBucket();
|
||||
} catch (error) {
|
||||
const msg =
|
||||
error.response?.data?.message ||
|
||||
@ -84,44 +84,45 @@ const Directory = ({IsPage=true,prefernceContacts}) =>
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteContact = async (overrideId = null) => {
|
||||
try
|
||||
{
|
||||
if (!IsActive) {
|
||||
setDirActions((prev) => ({ ...prev, action: true }));
|
||||
} else {
|
||||
setDeleting(true);
|
||||
}
|
||||
const handleDeleteContact = async (overrideId = null) => {
|
||||
try {
|
||||
if (!IsActive) {
|
||||
setDirActions((prev) => ({ ...prev, action: true }));
|
||||
} else {
|
||||
setDeleting(true);
|
||||
}
|
||||
const id = overrideId || (!IsActive ? dirActions.id : deleteContact);
|
||||
if (!id) {
|
||||
showToast("No contact selected for deletion", "error");
|
||||
return;
|
||||
if (!id) {
|
||||
showToast("No contact selected for deletion", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
await DirectoryRepository.DeleteContact(id, !IsActive);
|
||||
|
||||
const updatedContacts = ContactList.filter((c) => c.id !== id);
|
||||
setContactList(updatedContacts);
|
||||
cacheData("Contacts", { data: updatedContacts, isActive: IsActive });
|
||||
|
||||
showToast(
|
||||
`Contact ${IsActive ? "Deleted" : "Restored"} successfully`,
|
||||
"success"
|
||||
);
|
||||
|
||||
setDeleteContact(null);
|
||||
refetchBucket();
|
||||
setDirActions({ action: false, id: null });
|
||||
setDeleting(false);
|
||||
} catch (error) {
|
||||
const msg =
|
||||
error?.response?.data?.message ||
|
||||
error.message ||
|
||||
"Error occurred during API call";
|
||||
showToast(msg, "error");
|
||||
|
||||
setDeleting(false);
|
||||
setDirActions({ action: false, id: null });
|
||||
}
|
||||
|
||||
await DirectoryRepository.DeleteContact(id, !IsActive);
|
||||
|
||||
const updatedContacts = ContactList.filter((c) => c.id !== id);
|
||||
setContactList(updatedContacts);
|
||||
cacheData("Contacts", { data: updatedContacts, isActive: IsActive });
|
||||
|
||||
showToast(`Contact ${IsActive ? "Deleted":"Restored"} successfully`, "success");
|
||||
|
||||
setDeleteContact( null );
|
||||
refetchBucket()
|
||||
setDirActions({ action: false, id: null });
|
||||
setDeleting(false);
|
||||
} catch (error) {
|
||||
const msg =
|
||||
error?.response?.data?.message ||
|
||||
error.message ||
|
||||
"Error occurred during API call";
|
||||
showToast(msg, "error");
|
||||
|
||||
setDeleting(false);
|
||||
setDirActions({ action: false, id: null });
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
const closedModel = () => {
|
||||
setIsOpenModal(false);
|
||||
@ -181,7 +182,13 @@ const handleDeleteContact = async (overrideId = null) => {
|
||||
|
||||
return matchesSearch && matchesCategory && matchesBucket;
|
||||
}).sort((a, b) => a.name.localeCompare(b.name));
|
||||
}, [ContactList, searchText, selectedCategoryIds, selectedBucketIds,selectedContact]);
|
||||
}, [
|
||||
ContactList,
|
||||
searchText,
|
||||
selectedCategoryIds,
|
||||
selectedBucketIds,
|
||||
selectedContact,
|
||||
]);
|
||||
|
||||
const applyFilter = () => {
|
||||
setSelectedBucketIds(tempSelectedBucketIds);
|
||||
@ -218,46 +225,44 @@ const handleDeleteContact = async (overrideId = null) => {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const actions = [];
|
||||
|
||||
useEffect(() => {
|
||||
const actions = [];
|
||||
if (IsPage) {
|
||||
actions.push({
|
||||
label: "Manage Bucket",
|
||||
icon: "fa-solid fa-bucket fs-5",
|
||||
color: "primary",
|
||||
onClick: () => setOpenBucketModal(true),
|
||||
});
|
||||
}
|
||||
if (buckets?.length > 0) {
|
||||
actions.push({
|
||||
label: "New Contact",
|
||||
icon: "bx bx-plus-circle",
|
||||
color: "warning",
|
||||
onClick: () => setIsOpenModal(true),
|
||||
});
|
||||
}
|
||||
|
||||
if (IsPage) {
|
||||
actions.push({
|
||||
label: "Manage Bucket",
|
||||
icon: "fa-solid fa-bucket fs-5",
|
||||
color:"primary",
|
||||
onClick: () => setOpenBucketModal(true),
|
||||
});
|
||||
}
|
||||
if ( buckets?.length > 0 )
|
||||
{
|
||||
actions.push( {
|
||||
label: "New Contact",
|
||||
icon: "bx bx-plus-circle",
|
||||
color: "warning",
|
||||
onClick: () => setIsOpenModal( true ),
|
||||
} );
|
||||
}
|
||||
setActions(actions);
|
||||
|
||||
setActions(actions);
|
||||
|
||||
return () => setActions([]);
|
||||
}, [IsPage,buckets]);
|
||||
useEffect( () =>
|
||||
{
|
||||
setPerfence(prefernceContacts)
|
||||
},[prefernceContacts])
|
||||
return () => setActions([]);
|
||||
}, [IsPage, buckets]);
|
||||
useEffect(() => {
|
||||
setPerfence(prefernceContacts);
|
||||
}, [prefernceContacts]);
|
||||
|
||||
return (
|
||||
<div className="container-xxl flex-grow-1 container-p-y">
|
||||
|
||||
{IsPage && ( <Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Directory", link: null },
|
||||
]}
|
||||
></Breadcrumb>)}
|
||||
{IsPage && (
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Directory", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
)}
|
||||
|
||||
{isOpenModal && (
|
||||
<GlobalModel
|
||||
@ -266,7 +271,7 @@ const handleDeleteContact = async (overrideId = null) => {
|
||||
setSelectedContact(null);
|
||||
setIsOpenModal(false);
|
||||
}}
|
||||
size="lg"
|
||||
size="xl"
|
||||
>
|
||||
{renderModalContent()}
|
||||
</GlobalModel>
|
||||
@ -312,155 +317,164 @@ const handleDeleteContact = async (overrideId = null) => {
|
||||
)}
|
||||
|
||||
{openBucketModal && (
|
||||
<GlobalModel
|
||||
<GlobalModel
|
||||
isOpen={openBucketModal}
|
||||
closeModal={() =>setOpenBucketModal(false)}
|
||||
closeModal={() => setOpenBucketModal(false)}
|
||||
size="lg"
|
||||
>
|
||||
<ManageBucket buckets={buckets} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
<div className="card p-2 card-minHeight">
|
||||
<DirectoryPageHeader
|
||||
searchText={searchText}
|
||||
setSearchText={setSearchText}
|
||||
setIsActive={setIsActive}
|
||||
listView={listView}
|
||||
setListView={setListView}
|
||||
filteredBuckets={filteredBuckets}
|
||||
tempSelectedBucketIds={tempSelectedBucketIds}
|
||||
handleTempBucketChange={handleTempBucketChange}
|
||||
filteredCategories={filteredCategories}
|
||||
tempSelectedCategoryIds={tempSelectedCategoryIds}
|
||||
handleTempCategoryChange={handleTempCategoryChange}
|
||||
clearFilter={clearFilter}
|
||||
applyFilter={applyFilter}
|
||||
loading={loading}
|
||||
IsActive={IsActive}
|
||||
setOpenBucketModal={setOpenBucketModal}
|
||||
/>
|
||||
<div className="card p-2 card-minHeight">
|
||||
<DirectoryPageHeader
|
||||
searchText={searchText}
|
||||
setSearchText={setSearchText}
|
||||
setIsActive={setIsActive}
|
||||
listView={listView}
|
||||
setListView={setListView}
|
||||
filteredBuckets={filteredBuckets}
|
||||
tempSelectedBucketIds={tempSelectedBucketIds}
|
||||
handleTempBucketChange={handleTempBucketChange}
|
||||
filteredCategories={filteredCategories}
|
||||
tempSelectedCategoryIds={tempSelectedCategoryIds}
|
||||
handleTempCategoryChange={handleTempCategoryChange}
|
||||
clearFilter={clearFilter}
|
||||
applyFilter={applyFilter}
|
||||
loading={loading}
|
||||
IsActive={IsActive}
|
||||
setOpenBucketModal={setOpenBucketModal}
|
||||
/>
|
||||
|
||||
{/* Messages when listView is false */}
|
||||
{!listView && (
|
||||
<div className="d-flex flex-column justify-content-center align-items-center text-center ">
|
||||
{loading && <p>Loading...</p>}
|
||||
{!loading && contacts?.length === 0 && <p>No contact found</p>}
|
||||
{!loading && contacts?.length > 0 && currentItems.length === 0 && (
|
||||
<p>No matching contact found</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Table view (listView === true) */}
|
||||
{listView ? (
|
||||
<DirectoryListTableHeader>
|
||||
{loading && (
|
||||
<tr>
|
||||
<td colSpan={10}>Loading...</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!loading && contacts?.length === 0 && (
|
||||
<tr >
|
||||
<td colSpan={10}>No contact found</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!loading && currentItems.length === 0 && contacts?.length > 0 && (
|
||||
<tr>
|
||||
<td colSpan={10}>No matching contact found</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!loading &&
|
||||
currentItems.map((contact) => (
|
||||
<ListViewDirectory
|
||||
key={contact.id}
|
||||
IsActive={IsActive}
|
||||
contact={contact}
|
||||
setSelectedContact={setSelectedContact}
|
||||
setIsOpenModal={setIsOpenModal}
|
||||
setOpen_contact={setOpen_contact}
|
||||
setIsOpenModalNote={setIsOpenModalNote}
|
||||
IsDeleted={setDeleteContact}
|
||||
restore={handleDeleteContact}
|
||||
/>
|
||||
))}
|
||||
</DirectoryListTableHeader>
|
||||
) : (
|
||||
<div className="row">
|
||||
{!loading &&
|
||||
currentItems.map((contact) => (
|
||||
<div
|
||||
key={contact.id}
|
||||
className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
|
||||
>
|
||||
<CardViewDirectory
|
||||
IsActive={IsActive}
|
||||
contact={contact}
|
||||
setSelectedContact={setSelectedContact}
|
||||
setIsOpenModal={setIsOpenModal}
|
||||
setOpen_contact={setOpen_contact}
|
||||
setIsOpenModalNote={setIsOpenModalNote}
|
||||
IsDeleted={setDeleteContact}
|
||||
restore={handleDeleteContact}
|
||||
/>
|
||||
{/* Messages when listView is false */}
|
||||
{!listView && (
|
||||
<div className="d-flex flex-column justify-content-center align-items-center text-center ">
|
||||
{loading && <p className="mt-10">Loading...</p>}
|
||||
{!loading && contacts?.length === 0 && (
|
||||
<p className="mt-10">No contact found</p>
|
||||
)}
|
||||
{!loading && contacts?.length > 0 && currentItems.length === 0 && (
|
||||
<p className="mt-10">No matching contact found</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{!loading &&
|
||||
contacts?.length > 0 &&
|
||||
currentItems.length < ITEMS_PER_PAGE && (
|
||||
<nav aria-label="Page navigation">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
onClick={() => paginate(currentPage - 1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{/* Table view (listView === true) */}
|
||||
{listView ? (
|
||||
<DirectoryListTableHeader>
|
||||
{loading && (
|
||||
<tr>
|
||||
<td colSpan={10}>
|
||||
{" "}
|
||||
<p className="mt-10">Loading...</p>{" "}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => paginate(index + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
{!loading && contacts?.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={10}>
|
||||
<p className="mt-10">No contact found</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
{!loading && currentItems.length === 0 && contacts?.length > 0 && (
|
||||
<tr>
|
||||
<td colSpan={10}>
|
||||
<p className="mt-10">No matching contact found</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!loading &&
|
||||
currentItems.map((contact) => (
|
||||
<ListViewDirectory
|
||||
key={contact.id}
|
||||
IsActive={IsActive}
|
||||
contact={contact}
|
||||
setSelectedContact={setSelectedContact}
|
||||
setIsOpenModal={setIsOpenModal}
|
||||
setOpen_contact={setOpen_contact}
|
||||
setIsOpenModalNote={setIsOpenModalNote}
|
||||
IsDeleted={setDeleteContact}
|
||||
restore={handleDeleteContact}
|
||||
/>
|
||||
))}
|
||||
</DirectoryListTableHeader>
|
||||
) : (
|
||||
<div className="row mt-5">
|
||||
{!loading &&
|
||||
currentItems.map((contact) => (
|
||||
<div
|
||||
key={contact.id}
|
||||
className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
|
||||
>
|
||||
<CardViewDirectory
|
||||
IsActive={IsActive}
|
||||
contact={contact}
|
||||
setSelectedContact={setSelectedContact}
|
||||
setIsOpenModal={setIsOpenModal}
|
||||
setOpen_contact={setOpen_contact}
|
||||
setIsOpenModalNote={setIsOpenModalNote}
|
||||
IsDeleted={setDeleteContact}
|
||||
restore={handleDeleteContact}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{!loading &&
|
||||
contacts?.length > 0 &&
|
||||
currentItems.length > ITEMS_PER_PAGE && (
|
||||
<nav aria-label="Page navigation">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
|
||||
>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
onClick={() => paginate(currentPage - 1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => paginate(index + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -27,15 +27,16 @@ const DirectoryPageHeader = ({
|
||||
}, [tempSelectedBucketIds, tempSelectedCategoryIds]);
|
||||
return (
|
||||
<>
|
||||
<div className="row"></div>
|
||||
<div className="row mx-0 px-0 align-items-center">
|
||||
{/* <div className="row">vikas</div> */}
|
||||
<div className="row mx-0 px-0 align-items-center mt-2">
|
||||
<div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm me-2"
|
||||
className="form-control me-2"
|
||||
placeholder="Search Contact..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
style={{ width: "200px" }}
|
||||
/>
|
||||
<div className="d-flex gap-2 ">
|
||||
<button
|
||||
@ -50,7 +51,7 @@ const DirectoryPageHeader = ({
|
||||
data-bs-custom-class="tooltip"
|
||||
title="Card View"
|
||||
>
|
||||
<i className="bx bx-grid-alt bx-sm"></i>
|
||||
<i className="bx bx-grid-alt"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@ -64,7 +65,7 @@ const DirectoryPageHeader = ({
|
||||
data-bs-custom-class="tooltip"
|
||||
title="List View"
|
||||
>
|
||||
<i className="bx bx-list-ul bx-sm"></i>
|
||||
<i className="bx bx-list-ul "></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="dropdown" style={{ width: "fit-content" }}>
|
||||
@ -74,12 +75,16 @@ const DirectoryPageHeader = ({
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? 'text-primary' : 'text-muted'}`}></i>
|
||||
<i
|
||||
className={`fa-solid fa-filter ms-1 fs-5 ${
|
||||
filtered > 0 ? "text-primary" : "text-muted"
|
||||
}`}
|
||||
></i>
|
||||
|
||||
{filtered > 0 && (
|
||||
<span
|
||||
className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning"
|
||||
style={{ fontSize: "0.4rem"}}
|
||||
style={{ fontSize: "0.4rem" }}
|
||||
>
|
||||
{filtered}
|
||||
</span>
|
||||
@ -88,9 +93,7 @@ const DirectoryPageHeader = ({
|
||||
|
||||
<ul className="dropdown-menu p-3" style={{ width: "320px" }}>
|
||||
<div>
|
||||
<p className="text-small text-muted m-0">
|
||||
Filter by
|
||||
</p>
|
||||
<p className="text-muted m-0 h6 ">Filter by</p>
|
||||
|
||||
{/* Bucket Filter */}
|
||||
<div className="mt-1">
|
||||
@ -168,22 +171,22 @@ const DirectoryPageHeader = ({
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end gap-2 align-items-center text-end">
|
||||
<label className="switch switch-primary align-self-start mb-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="switch-input me-3"
|
||||
onChange={() => setIsActive(!IsActive)}
|
||||
value={IsActive}
|
||||
disabled={loading}
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className=" list-inline-item ms-12 small-text">
|
||||
Show Inactive Contacts
|
||||
</span>
|
||||
</label>
|
||||
<label className="switch switch-primary align-self-start mb-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="switch-input me-3"
|
||||
onChange={() => setIsActive(!IsActive)}
|
||||
value={IsActive}
|
||||
disabled={loading}
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className=" list-inline-item ms-12 ">
|
||||
Show Inactive Contacts
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@ -191,4 +194,3 @@ const DirectoryPageHeader = ({
|
||||
};
|
||||
|
||||
export default DirectoryPageHeader;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user