admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add cosmatic changes

Browse Source
This commit is contained in:
Vikas Nale 2025-06-10 12:46:53 +05:30
parent 9573daa8b0
commit c3a52c46eb
3 changed files with 295 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Directory/CardViewDirectory.jsx
View File

@ -23,12 +23,17 @@ const CardViewDirectory = ({
> >
<div className="card-body px-1 py-2 pb-0"> <div className="card-body px-1 py-2 pb-0">
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
<div className={`d-flex align-items-center ${IsActive && "cursor-pointer"}`} onClick={() => { <div
className={`d-flex align-items-center ${
IsActive && "cursor-pointer"
}`}
onClick={() => {
if (IsActive) { if (IsActive) {
setIsOpenModalNote(true); setIsOpenModalNote(true);
setOpen_contact(contact); setOpen_contact(contact);
} }
}}> }}
>
<Avatar <Avatar
size="xs" size="xs"
firstName={ firstName={
@ -50,7 +55,7 @@ const CardViewDirectory = ({
aria-expanded="false" aria-expanded="false"
> >
<i <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-toggle="tooltip"
data-bs-offset="0,8" data-bs-offset="0,8"
data-bs-placement="top" data-bs-placement="top"
@ -100,16 +105,18 @@ const CardViewDirectory = ({
</div> </div>
<ul className="list-inline m-0 ps-4 d-flex align-items-start"> <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> <i className="fa-solid fa-briefcase me-2"></i>
</li> </li> */}
<li className="list-inline-item text-break small"> <li className="list-inline-item text-break small ms-5">
{contact.organization} {contact.organization}
</li> </li>
</ul> </ul>
</div> </div>
<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={() => { onClick={() => {
if (IsActive) { if (IsActive) {
setIsOpenModalNote(true); setIsOpenModalNote(true);
@ -119,7 +126,7 @@ const CardViewDirectory = ({
> >
<hr className="my-0" /> <hr className="my-0" />
{contact.contactEmails[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"> <li className="me-2">
<i className="bx bx-envelope bx-xs mt-1"></i> <i className="bx bx-envelope bx-xs mt-1"></i>
</li> </li>
@ -130,7 +137,7 @@ const CardViewDirectory = ({
)} )}
{contact.contactPhones[0] && ( {contact.contactPhones[0] && (
<ul className="list-inline m-0 "> <ul className="list-inline m-0 ms-2">
<li className="list-inline-item me-1"> <li className="list-inline-item me-1">
<i <i
className={` ${getPhoneIcon( className={` ${getPhoneIcon(
@ -145,24 +152,24 @@ const CardViewDirectory = ({
)} )}
{contact?.contactCategory?.name ? ( {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"> <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>
<li className="list-inline-item text-small active"> <li className="list-inline-item text-small active">
{contact?.contactCategory?.name} {contact?.contactCategory?.name}
</li> </li>
</ul> </ul>
) : ( ) : (
<ul className="list-inline m-0"> <ul className="list-inline m-0 ms-2">
<li className="list-inline-item me-2 my-1"> <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>
<li className="list-inline-item text-small active">Other</li> <li className="list-inline-item text-small active">Other</li>
</ul> </ul>
)} )}
<ul className="list-inline m-0"> <ul className="list-inline m-0 ms-2">
{contact?.bucketIds?.map((bucketId) => ( {contact?.bucketIds?.map((bucketId) => (
<li key={bucketId} className="list-inline-item me-1"> <li key={bucketId} className="list-inline-item me-1">
<span <span

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

@ -18,13 +18,12 @@ import ConfirmModal from "../../components/common/ConfirmModal";
import DirectoryListTableHeader from "./DirectoryListTableHeader"; import DirectoryListTableHeader from "./DirectoryListTableHeader";
import DirectoryPageHeader from "./DirectoryPageHeader"; import DirectoryPageHeader from "./DirectoryPageHeader";
import ManageBucket from "../../components/Directory/ManageBucket"; import ManageBucket from "../../components/Directory/ManageBucket";
import {useFab} from "../../Context/FabContext"; import { useFab } from "../../Context/FabContext";
import {DireProvider, useDir} from "../../Context/DireContext"; import { DireProvider, useDir } from "../../Context/DireContext";
const Directory = ({IsPage=true,prefernceContacts}) => const Directory = ({ IsPage = true, prefernceContacts }) => {
{ const [projectPrefernce, setPerfence] = useState(null);
const [ projectPrefernce, setPerfence ] = useState( null ) const [IsActive, setIsActive] = useState(true);
const[IsActive,setIsActive] = useState(true)
const [isOpenModal, setIsOpenModal] = useState(false); const [isOpenModal, setIsOpenModal] = useState(false);
const [isOpenModalNote, setIsOpenModalNote] = useState(false); const [isOpenModalNote, setIsOpenModalNote] = useState(false);
const [selectedContact, setSelectedContact] = useState(null); const [selectedContact, setSelectedContact] = useState(null);
@ -35,20 +34,21 @@ const Directory = ({IsPage=true,prefernceContacts}) =>
const [listView, setListView] = useState(false); const [listView, setListView] = useState(false);
const [selectedBucketIds, setSelectedBucketIds] = useState([]); const [selectedBucketIds, setSelectedBucketIds] = useState([]);
const [deleteContact, setDeleteContact] = useState(null); const [deleteContact, setDeleteContact] = useState(null);
const [ IsDeleting, setDeleting ] = useState( false ); const [IsDeleting, setDeleting] = useState(false);
const [ openBucketModal, setOpenBucketModal ] = useState( false ) const [openBucketModal, setOpenBucketModal] = useState(false);
const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]); const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
const [ tempSelectedCategoryIds, setTempSelectedCategoryIds ] = useState( [] ); const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
const {setActions} = useFab() const { setActions } = useFab();
const { dirActions, setDirActions } = useDir(); const { dirActions, setDirActions } = useDir();
const { contacts, loading, refetch } = useDirectory(
const { contacts, loading , refetch} = useDirectory(IsActive,projectPrefernce); IsActive,
projectPrefernce
);
const { contactCategory, loading: contactCategoryLoading } = const { contactCategory, loading: contactCategoryLoading } =
useContactCategory(); useContactCategory();
const {buckets,refetch:refetchBucket} = useBuckets(); const { buckets, refetch: refetchBucket } = useBuckets();
const submitContact = async (data) => { const submitContact = async (data) => {
try { try {
@ -63,7 +63,7 @@ const Directory = ({IsPage=true,prefernceContacts}) =>
); );
showToast("Contact updated successfully", "success"); showToast("Contact updated successfully", "success");
setIsOpenModal(false); setIsOpenModal(false);
setSelectedContact( null ); setSelectedContact(null);
} else { } else {
response = await DirectoryRepository.CreateContact(data); response = await DirectoryRepository.CreateContact(data);
updatedContacts = [...contacts_cache, response.data]; updatedContacts = [...contacts_cache, response.data];
@ -73,8 +73,8 @@ const Directory = ({IsPage=true,prefernceContacts}) =>
// cacheData("Contacts", {data:updatedContacts,isActive:IsActive}); // cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
// setContactList(updatedContacts); // setContactList(updatedContacts);
refetch( IsActive, prefernceContacts ) refetch(IsActive, prefernceContacts);
refetchBucket() refetchBucket();
} catch (error) { } catch (error) {
const msg = const msg =
error.response?.data?.message || error.response?.data?.message ||
@ -84,9 +84,8 @@ const Directory = ({IsPage=true,prefernceContacts}) =>
} }
}; };
const handleDeleteContact = async (overrideId = null) => { const handleDeleteContact = async (overrideId = null) => {
try try {
{
if (!IsActive) { if (!IsActive) {
setDirActions((prev) => ({ ...prev, action: true })); setDirActions((prev) => ({ ...prev, action: true }));
} else { } else {
@ -104,10 +103,13 @@ const handleDeleteContact = async (overrideId = null) => {
setContactList(updatedContacts); setContactList(updatedContacts);
cacheData("Contacts", { data: updatedContacts, isActive: IsActive }); cacheData("Contacts", { data: updatedContacts, isActive: IsActive });
showToast(`Contact ${IsActive ? "Deleted":"Restored"} successfully`, "success"); showToast(
`Contact ${IsActive ? "Deleted" : "Restored"} successfully`,
"success"
);
setDeleteContact( null ); setDeleteContact(null);
refetchBucket() refetchBucket();
setDirActions({ action: false, id: null }); setDirActions({ action: false, id: null });
setDeleting(false); setDeleting(false);
} catch (error) { } catch (error) {
@ -120,8 +122,7 @@ const handleDeleteContact = async (overrideId = null) => {
setDeleting(false); setDeleting(false);
setDirActions({ action: false, id: null }); setDirActions({ action: false, id: null });
} }
}; };
const closedModel = () => { const closedModel = () => {
setIsOpenModal(false); setIsOpenModal(false);
@ -181,7 +182,13 @@ const handleDeleteContact = async (overrideId = null) => {
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,selectedContact]); }, [
ContactList,
searchText,
selectedCategoryIds,
selectedBucketIds,
selectedContact,
]);
const applyFilter = () => { const applyFilter = () => {
setSelectedBucketIds(tempSelectedBucketIds); setSelectedBucketIds(tempSelectedBucketIds);
@ -218,7 +225,6 @@ const handleDeleteContact = async (overrideId = null) => {
} }
}; };
useEffect(() => { useEffect(() => {
const actions = []; const actions = [];
@ -226,38 +232,37 @@ const handleDeleteContact = async (overrideId = null) => {
actions.push({ actions.push({
label: "Manage Bucket", label: "Manage Bucket",
icon: "fa-solid fa-bucket fs-5", icon: "fa-solid fa-bucket fs-5",
color:"primary", color: "primary",
onClick: () => setOpenBucketModal(true), onClick: () => setOpenBucketModal(true),
}); });
} }
if ( buckets?.length > 0 ) if (buckets?.length > 0) {
{ actions.push({
actions.push( {
label: "New Contact", label: "New Contact",
icon: "bx bx-plus-circle", icon: "bx bx-plus-circle",
color: "warning", color: "warning",
onClick: () => setIsOpenModal( true ), onClick: () => setIsOpenModal(true),
} ); });
} }
setActions(actions); setActions(actions);
return () => setActions([]); return () => setActions([]);
}, [IsPage,buckets]); }, [IsPage, buckets]);
useEffect( () => useEffect(() => {
{ setPerfence(prefernceContacts);
setPerfence(prefernceContacts) }, [prefernceContacts]);
},[prefernceContacts])
return ( return (
<div className="container-xxl flex-grow-1 container-p-y"> <div className="container-xxl flex-grow-1 container-p-y">
{IsPage && (
{IsPage && ( <Breadcrumb <Breadcrumb
data={[ data={[
{ label: "Home", link: "/dashboard" }, { label: "Home", link: "/dashboard" },
{ label: "Directory", link: null }, { label: "Directory", link: null },
]} ]}
></Breadcrumb>)} ></Breadcrumb>
)}
{isOpenModal && ( {isOpenModal && (
<GlobalModel <GlobalModel
@ -266,7 +271,7 @@ const handleDeleteContact = async (overrideId = null) => {
setSelectedContact(null); setSelectedContact(null);
setIsOpenModal(false); setIsOpenModal(false);
}} }}
size="lg" size="xl"
> >
{renderModalContent()} {renderModalContent()}
</GlobalModel> </GlobalModel>
@ -314,7 +319,7 @@ const handleDeleteContact = async (overrideId = null) => {
{openBucketModal && ( {openBucketModal && (
<GlobalModel <GlobalModel
isOpen={openBucketModal} isOpen={openBucketModal}
closeModal={() =>setOpenBucketModal(false)} closeModal={() => setOpenBucketModal(false)}
size="lg" size="lg"
> >
<ManageBucket buckets={buckets} /> <ManageBucket buckets={buckets} />
@ -344,10 +349,12 @@ const handleDeleteContact = async (overrideId = null) => {
{/* Messages when listView is false */} {/* Messages when listView is false */}
{!listView && ( {!listView && (
<div className="d-flex flex-column justify-content-center align-items-center text-center "> <div className="d-flex flex-column justify-content-center align-items-center text-center ">
{loading && <p>Loading...</p>} {loading && <p className="mt-10">Loading...</p>}
{!loading && contacts?.length === 0 && <p>No contact found</p>} {!loading && contacts?.length === 0 && (
<p className="mt-10">No contact found</p>
)}
{!loading && contacts?.length > 0 && currentItems.length === 0 && ( {!loading && contacts?.length > 0 && currentItems.length === 0 && (
<p>No matching contact found</p> <p className="mt-10">No matching contact found</p>
)} )}
</div> </div>
)} )}
@ -357,19 +364,26 @@ const handleDeleteContact = async (overrideId = null) => {
<DirectoryListTableHeader> <DirectoryListTableHeader>
{loading && ( {loading && (
<tr> <tr>
<td colSpan={10}>Loading...</td> <td colSpan={10}>
{" "}
<p className="mt-10">Loading...</p>{" "}
</td>
</tr> </tr>
)} )}
{!loading && contacts?.length === 0 && ( {!loading && contacts?.length === 0 && (
<tr > <tr>
<td colSpan={10}>No contact found</td> <td colSpan={10}>
<p className="mt-10">No contact found</p>
</td>
</tr> </tr>
)} )}
{!loading && currentItems.length === 0 && contacts?.length > 0 && ( {!loading && currentItems.length === 0 && contacts?.length > 0 && (
<tr> <tr>
<td colSpan={10}>No matching contact found</td> <td colSpan={10}>
<p className="mt-10">No matching contact found</p>
</td>
</tr> </tr>
)} )}
@ -389,7 +403,7 @@ const handleDeleteContact = async (overrideId = null) => {
))} ))}
</DirectoryListTableHeader> </DirectoryListTableHeader>
) : ( ) : (
<div className="row"> <div className="row mt-5">
{!loading && {!loading &&
currentItems.map((contact) => ( currentItems.map((contact) => (
<div <div
@ -414,10 +428,12 @@ const handleDeleteContact = async (overrideId = null) => {
{/* Pagination */} {/* Pagination */}
{!loading && {!loading &&
contacts?.length > 0 && contacts?.length > 0 &&
currentItems.length < ITEMS_PER_PAGE && ( currentItems.length > ITEMS_PER_PAGE && (
<nav aria-label="Page navigation"> <nav aria-label="Page navigation">
<ul className="pagination pagination-sm justify-content-end py-1"> <ul className="pagination pagination-sm justify-content-end py-1">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}> <li
className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
>
<button <button
className="page-link btn-xs" className="page-link btn-xs"
onClick={() => paginate(currentPage - 1)} onClick={() => paginate(currentPage - 1)}
@ -457,9 +473,7 @@ const handleDeleteContact = async (overrideId = null) => {
</ul> </ul>
</nav> </nav>
)} )}
</div> </div>
</div> </div>
); );
}; };

26
src/pages/Directory/DirectoryPageHeader.jsx
View File

@ -27,15 +27,16 @@ const DirectoryPageHeader = ({
}, [tempSelectedBucketIds, tempSelectedCategoryIds]); }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
return ( return (
<> <>
<div className="row"></div> {/* <div className="row">vikas</div> */}
<div className="row mx-0 px-0 align-items-center"> <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 "> <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
<input <input
type="search" type="search"
className="form-control form-control-sm me-2" className="form-control me-2"
placeholder="Search Contact..." placeholder="Search Contact..."
value={searchText} value={searchText}
onChange={(e) => setSearchText(e.target.value)} onChange={(e) => setSearchText(e.target.value)}
style={{ width: "200px" }}
/> />
<div className="d-flex gap-2 "> <div className="d-flex gap-2 ">
<button <button
@ -50,7 +51,7 @@ const DirectoryPageHeader = ({
data-bs-custom-class="tooltip" data-bs-custom-class="tooltip"
title="Card View" title="Card View"
> >
<i className="bx bx-grid-alt bx-sm"></i> <i className="bx bx-grid-alt"></i>
</button> </button>
<button <button
type="button" type="button"
@ -64,7 +65,7 @@ const DirectoryPageHeader = ({
data-bs-custom-class="tooltip" data-bs-custom-class="tooltip"
title="List View" title="List View"
> >
<i className="bx bx-list-ul bx-sm"></i> <i className="bx bx-list-ul "></i>
</button> </button>
</div> </div>
<div className="dropdown" style={{ width: "fit-content" }}> <div className="dropdown" style={{ width: "fit-content" }}>
@ -74,12 +75,16 @@ const DirectoryPageHeader = ({
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false" 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 && ( {filtered > 0 && (
<span <span
className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning"
style={{ fontSize: "0.4rem"}} style={{ fontSize: "0.4rem" }}
> >
{filtered} {filtered}
</span> </span>
@ -88,9 +93,7 @@ const DirectoryPageHeader = ({
<ul className="dropdown-menu p-3" style={{ width: "320px" }}> <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
<div> <div>
<p className="text-small text-muted m-0"> <p className="text-muted m-0 h6 ">Filter by</p>
Filter by
</p>
{/* Bucket Filter */} {/* Bucket Filter */}
<div className="mt-1"> <div className="mt-1">
@ -180,7 +183,7 @@ const DirectoryPageHeader = ({
<span className="switch-on"></span> <span className="switch-on"></span>
<span className="switch-off"></span> <span className="switch-off"></span>
</span> </span>
<span className=" list-inline-item ms-12 small-text"> <span className=" list-inline-item ms-12 ">
Show Inactive Contacts Show Inactive Contacts
</span> </span>
</label> </label>
@ -191,4 +194,3 @@ const DirectoryPageHeader = ({
}; };
export default DirectoryPageHeader; export default DirectoryPageHeader;