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

Implemented delete functionality for contacts #130

Merged
pramod.mahajan merged 9 commits from pramod_Task-#321 into Feature_Directory 2025-05-22 13:12:15 +00:00
Conversation 0 Commits 9 Files Changed 7 +270 -139
7 changed files with 270 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,11 @@
import React from "react";
import Avatar from "../common/Avatar";
const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen_contact,setIsOpenModalNote }) => {
import {getBucketNameById} from "./DirectoryUtils";
import {useBuckets} from "../../hooks/useDirectory";
import { getPhoneIcon } from "./DirectoryUtils";
const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpen_contact, setIsOpenModalNote, IsDeleted} ) =>
{
const {buckets} = useBuckets()
return (
<div className="card text-start border-1">
<div className="card-body px-1 py-2 pb-0">
@ -48,7 +52,7 @@ const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen
</a>
</li>
<li>
<a className="dropdown-item px-2 py-0">
<a className="dropdown-item px-2 py-0" onClick={()=> IsDeleted(contact.id)}>
<i className="bx bx-trash bx-xs me-2"></i>
<span className="align-left small-text">Delete</span>
</a>
@ -87,7 +91,7 @@ const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen
{contact.contactPhones[0] && (
<ul className="list-inline m-0">
<li className="list-inline-item me-2">
<i className="bx bx-phone bx-xs"></i>
<i className={` ${getPhoneIcon(contact.contactPhones[0].label)} bx-xs`} ></i>
</li>
<li className="list-inline-item small-text">
{contact.contactPhones[0]?.phoneNumber}
@ -103,6 +107,20 @@ const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen
{contact.contactCategory.name}
</li>
</ul>
<ul className="list-inline m-0">
{contact.bucketIds.map( ( bucketId ) => (
<>
<li className="list-inline-item me-1">
<i className="bx bx-pin bx-xs"></i>
</li>
<li className="list-inline-item small-text">
{getBucketNameById(buckets,bucketId)}
</li></>
))}
</ul>
</div>
</div>
);

26
src/components/Directory/DirectoryUtils.js Normal file
View File

@ -0,0 +1,26 @@
import {useBuckets} from "../../hooks/useDirectory";
export const getEmailIcon = (type) => {
switch (type) {
case 'Work': return "bx bx-briefcase me-1 " ;
case 'Personal': return "bx bx-user me-1";
case 'support': return "bx headphone-mic me-1";
case 'billing': return "bx bx-receipt me-1";
default: return "bx bx-envelope me-1";
}
};
export const getPhoneIcon = (type) => {
switch (type) {
case 'Business': return "bx bx-phone me-1 ";
case 'Personal': return "bx bx-mobile me-1 ";
case 'Office': return "bx bx-phone me-1 ";
default: return "bx bx-phone me-1";
}
};
export const getBucketNameById = (buckets, id) => {
const bucket = buckets.find(b => b.id === id);
return bucket ? bucket.name : 'Unknown';
};

33
src/components/Directory/ListViewDirectory.jsx
View File

@ -1,33 +1,16 @@
import React from 'react'
import Avatar from '../common/Avatar';
import { getEmailIcon,getPhoneIcon } from './DirectoryUtils';
const getEmailIcon = (type) => {
switch (type) {
case 'work': return "bx bx-briefcase me-1 " ;
case 'personal': return "bx bx-user me-1";
case 'support': return "bxr headphone-mic me-1";
case 'billing': return "bx bx-receipt me-1";
default: return "bx bx-envelope me-1";
}
};
const getPhoneIcon = (type) => {
switch (type) {
case 'business': return "bx bx-briefcase me-1 ";
case 'home': return "bx bx-mobile me-1 ";
case 'personal': return "bx bx-user me-1 ";
case 'landline': return "bx bx-phone me-1 ";
case 'fax': return "bx bx-printer me-1";
case 'whatsapp': return "bxl-whatsapp me-1";
case 'emergency': return "bx bx-error-circle me-1";
default: return "bx bx-phone me-1";
}
};
const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
return (
<tr >
<td className="text-start" style={{width: '18%'}} colSpan={2}>
<td className="text-start cursor-pointer" style={{width: '18%'}} colSpan={2} onClick={() =>
{
setIsOpenModalNote(true)
setOpen_contact(contact)
}}>
<div className="d-flex align-items-center">
<Avatar
size="xs"
@ -81,7 +64,7 @@ const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
setSelectedContact( contact )
setIsOpenModal(true)
}}></i>
<i className='bx bx-trash bx-sm text-danger cursor-pointer'></i>
<i className='bx bx-trash bx-sm text-danger cursor-pointer' onClick={()=> IsDeleted(contact.id)}></i>
</td>
</tr>
);

6
src/components/Directory/NoteCardDirectory.jsx
View File

@ -120,7 +120,11 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
{noteItem.createdBy.firstName} {noteItem.createdBy.lastName}
</span>
<span className="text-muted" style={{ fontSize: "10px" }}>
{moment(noteItem.createdAt).format("MMMM DD, YYYY [at] hh:mm A")}
{moment
.utc(noteItem.createdAt)
.add(5, "hours")
.add(30, "minutes")
.format("MMMM DD, YYYY [at] hh:mm A")}
</span>
</div>
</div>

40
src/components/Directory/NotesDirectory.jsx
View File

@ -83,27 +83,19 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
return (
<div className="text-start">
<div
className={`${
contactProfile?.notes?.length > 0
? "d-flex justify-content-between"
: "d-flex justify-content-end"
}`}
>
{contactProfile?.notes.length > 0 && (
<p className="fw-semibold m-0">Notes :</p>
)}
<a
className="small-text m-0 cursor-pointer"
onClick={() => setAddNote(!addNote)}
<div className="d-flex align-items-center justify-content-between">
<p className="fw-semibold m-0">Notes :</p>
<span
className={`btn btn-xs ${addNote ? "btn-danger" : "btn-primary"}`}
onClick={() => setAddNote( !addNote )}
>
<u>
{addNote ? "" : "Add Note"}
<i
className={`bx ${addNote ? "bx-x" : "bx-pencil"} bx-xs`}
></i>{" "}
</u>{" "}
</a>
{/* <i
className={`icon-base bx ${
addNote ? "bx-x bx-sm" : "bx-pencil"
} bx-xs `}
></i> */}
{addNote ? "close" : "Add Note"}
</span>
</div>
{addNote && (
<form onSubmit={handleSubmit(onSubmit)}>
@ -119,10 +111,7 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
)}
</form>
)}
<div
className=" justify-content-start overflow-auto px-1"
style={{ maxHeight: "300px" }}
>
<div className=" justify-content-start px-1 mt-1">
{isLoading && (
<div className="text-center">
{" "}
@ -139,7 +128,8 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
setProfileContact={setProfileContact}
key={noteItem.id}
/>
))}
) )}
<p>{!isLoading && contactProfile?.notes.length == 0 && !addNote && (<p className="text-center">No Notes Found</p>) }</p>
</div>
</div>
);

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

@ -6,7 +6,7 @@ import ManageDirectory from "../../components/Directory/ManageDirectory";
import ListViewDirectory from "../../components/Directory/ListViewDirectory";
import { useBuckets, useDirectory } from "../../hooks/useDirectory";
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
import { getCachedData } from "../../slices/apiDataManager";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import showToast from "../../services/toastService";
import UpdateContact from "../../components/Directory/UpdateContact";
import CardViewDirectory from "../../components/Directory/CardViewDirectory";
@ -14,6 +14,7 @@ import { useContactCategory } from "../../hooks/masterHook/useMaster";
import usePagination from "../../hooks/usePagination";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
import ConfirmModal from "../../components/common/ConfirmModal";
const Directory = () => {
const [isOpenModal, setIsOpenModal] = useState(false);
@ -25,6 +26,11 @@ const Directory = () => {
const [searchText, setSearchText] = useState("");
const [listView, setListView] = useState(false);
const [selectedBucketIds, setSelectedBucketIds] = useState([]);
const [deleteContact, setDeleteContact] = useState(null);
const [IsDeleting, setIsDeletng] = useState(false);
const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
const { contacts, loading } = useDirectory();
const { contactCategory, loading: contactCategoryLoading } =
@ -61,36 +67,64 @@ const Directory = () => {
}
};
const handleDeleteContact = async () => {
try {
setIsDeletng(true);
const contacts_cache = getCachedData("contacts") || [];
const response = await DirectoryRepository.DeleteContact(deleteContact);
const updatedContacts = ContactList.filter((c) => c.id !== deleteContact);
setContactList(updatedContacts);
cacheData("Contacts", updatedContacts);
showToast("Contact deleted successfully", "success");
setDeleteContact(null);
setIsDeletng(false);
} catch (error) {
const msg =
error.response.data.message ||
error.message ||
"Error occured during API calling";
showToast(msg, "error");
setIsDeletng(false);
}
};
const closedModel = () => {
setIsOpenModal(false);
setSelectedContact(null);
setOpen_contact(null);
};
useEffect(() => {
setContactList(contacts);
}, [contacts]);
const [selectedCategoryIds, setSelectedCategoryIds] = useState(
contactCategory.map((category) => category.id)
);
useEffect(() => {
setContactList(contacts);
// Set temp filter list only (UI checkboxes, not actual filtering yet)
setTempSelectedCategoryIds([]);
setTempSelectedBucketIds([]);
}, [contacts]);
const usedCategoryIds = [
...new Set(contacts.map((c) => c.contactCategory?.id)),
];
const filteredCategories = contactCategory.filter((category) =>
usedCategoryIds.includes(category.id)
);
const handleCategoryChange = (id) => {
setSelectedCategoryIds((prev) =>
const handleTempBucketChange = (id) => {
setTempSelectedBucketIds((prev) =>
prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
);
};
const handleTempCategoryChange = (id) => {
setTempSelectedCategoryIds((prev) =>
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 || [])),
];
@ -117,6 +151,18 @@ const Directory = () => {
}).sort((a, b) => a.name.localeCompare(b.name));
}, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]);
const applyFilter = () => {
setSelectedBucketIds(tempSelectedBucketIds);
setSelectedCategoryIds(tempSelectedCategoryIds);
};
const clearFilter = () => {
setTempSelectedBucketIds([]);
setTempSelectedCategoryIds([]);
setSelectedBucketIds([]);
setSelectedCategoryIds([]);
};
const { currentPage, totalPages, currentItems, paginate } = usePagination(
filteredContacts,
ITEMS_PER_PAGE
@ -145,7 +191,7 @@ const Directory = () => {
<Breadcrumb
data={[
{ label: "Home", link: "/dashboard" },
{ label: "Directory (Comming Soon)", link: null },
{ label: "Directory", link: null },
]}
></Breadcrumb>
@ -179,6 +225,28 @@ const Directory = () => {
)}
</GlobalModel>
)}
{deleteContact && (
<div
className={`modal fade ${deleteContact ? "show" : ""}`}
tabIndex="-1"
role="dialog"
style={{
display: deleteContact ? "block" : "none",
backgroundColor: deleteContact ? "rgba(0,0,0,0.5)" : "transparent",
}}
aria-hidden="false"
>
<ConfirmModal
type={"delete"}
header={"Delete Contact"}
message={"Are you sure you want delete?"}
onSubmit={handleDeleteContact}
onClose={() => setDeleteContact(null)}
loading={IsDeleting}
/>
</div>
)}
<div className="card p-2">
<div className="row mx-0 px-0 align-items-center">
<div className="col-12 col-md-4 mb-2 px-1 d-flex align-items-center ">
@ -219,69 +287,108 @@ const Directory = () => {
<i className="bx bx-list-ul bx-sm"></i>
</button>
</div>
<div className="dropdown">
<a
className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className="bx bx-filter bx-lg ms-1"></i>
</a>
<ul
className="dropdown-menu p-2 text-capitalize"
style={{ Width: "100%" }}
>
<p className="small-text text-muted m-0">Filter by</p>
<div className="d-flex gap-4 justify-content-between">
{/* Bucket Filter */}
<div className="flex-fill ">
<p className="small-text mb-2 ">Buckets</p>
{filteredBuckets.map(({ id, name }) => (
<div className="form-check mb-1" key={id}>
<input
className="form-check-input "
type="checkbox"
id={`bucket-${id}`}
checked={selectedBucketIds.includes(id)}
onChange={() => handleBucketChange(id)}
/>
<label
className="form-check-label text-nowrap"
htmlFor={`bucket-${id}`}
>
{name}
</label>
</div>
))}
</div>
<div className="dropdown" style={{ width: "fit-content" }}>
<div className="dropdown" style={{ width: "fit-content" }}>
<a
className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className="fa-solid fa-filter ms-1 fs-5"></i>
</a>
{/* Category Filter */}
<div className="flex-fill">
<p className="small-text mb-2">Categories</p>
{filteredCategories.map(({ id, name }) => (
<div className="form-check mb-1" key={id}>
<input
className="form-check-input"
type="checkbox"
id={`cat-${id}`}
checked={selectedCategoryIds.includes(id)}
onChange={() => handleCategoryChange(id)}
/>
<label
className="form-check-label text-nowrap"
htmlFor={`cat-${id}`}
>
{name}
</label>
<ul className="dropdown-menu p-3" style={{ width: "320px" }}>
<div>
<p className="small-text text-muted m-0">Filter by</p>
{/* Bucket Filter */}
<div className="mt-1">
<p className="small-text mb-1 fw-semibold">Buckets</p>
<div className="d-flex flex-wrap">
{filteredBuckets.map(({ id, name }) => (
<div
className="form-check me-1 mb-1"
style={{ width: "33.33%" }}
key={id}
>
<input
className="form-check-input"
type="checkbox"
id={`bucket-${id}`}
checked={tempSelectedBucketIds.includes(id)}
onChange={() => handleTempBucketChange(id)}
/>
<label
className="form-check-label text-nowrap small-text"
htmlFor={`bucket-${id}`}
>
{name}
</label>
</div>
))}
</div>
))}
</div>
<hr className="m-0" />
{/* Category Filter */}
<div className="mt-1">
<p className="small-text mb-1 fw-semibold">Categories</p>
<div className="d-flex flex-wrap">
{filteredCategories.map(({ id, name }) => (
<div
className="form-check me-1 mb-1"
style={{ width: "33.33%" }}
key={id}
>
<input
className="form-check-input"
type="checkbox"
id={`cat-${id}`}
checked={tempSelectedCategoryIds.includes(id)}
onChange={() => handleTempCategoryChange(id)}
/>
<label
className="form-check-label text-nowrap small-text"
htmlFor={`cat-${id}`}
>
{name}
</label>
</div>
))}
</div>
</div>
<div className="d-flex justify-content-end gap-2 mt-1">
<button
className="btn btn-xs btn-secondary"
onClick={clearFilter}
>
Clear
</button>
<button
className="btn btn-xs btn-primary"
onClick={applyFilter}
>
Apply Filter
</button>
</div>
</div>
</div>
</ul>
</ul>
</div>
</div>
</div>
<div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
<label class="switch switch-primary">
<input type="checkbox" class="switch-input" />
<span class="switch-toggle-slider">
<span class="switch-on">
{/* <i class="icon-base bx bx-check"></i> */}
</span>
<span class="switch-off">
{/* <i class="icon-base bx bx-x"></i> */}
</span>
</span>
<span class="switch-label">Show Inactive Contacts</span>
</label>
<button
type="button"
className="btn btn-xs btn-primary"
@ -293,7 +400,9 @@ const Directory = () => {
</div>
</div>
{!listView && loading && <p>Loading...</p>}
{!listView && !loading && currentItems.length == 0 && <p>Not Found Contact</p>}
{!listView && !loading && currentItems.length == 0 && (
<p>No Matching Contact Found</p>
)}
{listView ? (
<div className="table-responsive text-nowrap py-2 ">
<table className="table px-2">
@ -343,10 +452,7 @@ const Directory = () => {
</div>
</th>
<th className="mx-2">Category</th>
<th
>
Action
</th>
<th>Action</th>
</tr>
</thead>
<tbody className="table-border-bottom-0 overflow-auto ">
@ -355,13 +461,12 @@ const Directory = () => {
<td colSpan={10}>Loading...</td>
</tr>
)}
{!loading &&
currentItems.length === 0 && (
<tr>
<td colSpan={10}>Not Found Contact</td>
</tr>
)}
{!loading && currentItems.length === 0 && (
<tr>
<td colSpan={10}>No Matching Contact Found</td>
</tr>
)}
{!loading &&
currentItems.map((contact) => (
<ListViewDirectory
@ -369,6 +474,9 @@ const Directory = () => {
contact={contact}
setSelectedContact={setSelectedContact}
setIsOpenModal={setIsOpenModal}
setOpen_contact={setOpen_contact}
setIsOpenModalNote={setIsOpenModalNote}
IsDeleted={setDeleteContact}
/>
))}
</tbody>
@ -387,13 +495,14 @@ const Directory = () => {
setIsOpenModal={setIsOpenModal}
setOpen_contact={setOpen_contact}
setIsOpenModalNote={setIsOpenModalNote}
IsDeleted={setDeleteContact}
/>
</div>
))}
</div>
)}
{!loading && (
{!loading && currentItems < ITEMS_PER_PAGE && (
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1">
<li

3
src/repositories/DirectoryRepository.jsx
View File

@ -3,7 +3,8 @@ import {api} from "../utils/axiosClient";
export const DirectoryRepository = {
GetContacts: () => api.get( '/api/directory' ),
CreateContact: ( data ) => api.post( '/api/directory', data ),
UpdateContact:(id,data)=>api.put(`/api/directory/${id}`,data),
UpdateContact: ( id, data ) => api.put( `/api/directory/${ id }`, data ),
DeleteContact:(id)=>api.delete(`/api/directory/${id}`),
GetBucktes: () => api.get( `/api/directory/buckets` ),