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

implement contact deletion with confirmation and toast feedback

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-21 22:39:07 +05:30
parent 7147116d8e
commit 3b82653f23
3 changed files with 70 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import React from "react";
import Avatar from "../common/Avatar";
const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen_contact,setIsOpenModalNote }) => {
const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted }) => {
return (
<div className="card text-start border-1">
<div className="card-body px-1 py-2 pb-0">
@ -48,7 +48,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>

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

@ -3,9 +3,9 @@ import Avatar from '../common/Avatar';
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 '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";
}
@ -13,21 +13,21 @@ const getEmailIcon = (type) => {
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";
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";
}
};
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 +81,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>
);

57
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);
@ -24,7 +25,9 @@ const Directory = () => {
const [contactCategories, setContactCategories] = useState([]);
const [searchText, setSearchText] = useState("");
const [listView, setListView] = useState(false);
const [selectedBucketIds, setSelectedBucketIds] = useState([]);
const [ selectedBucketIds, setSelectedBucketIds ] = useState( [] );
const [deleteContact,setDeleteContact] = useState(null)
const[IsDeleting,setIsDeletng] = useState(false)
const { contacts, loading } = useDirectory();
const { contactCategory, loading: contactCategoryLoading } =
@ -61,6 +64,29 @@ 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);
@ -179,6 +205,29 @@ 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 ">
@ -369,6 +418,9 @@ const Directory = () => {
contact={contact}
setSelectedContact={setSelectedContact}
setIsOpenModal={setIsOpenModal}
setOpen_contact={setOpen_contact}
setIsOpenModalNote={setIsOpenModalNote}
IsDeleted={setDeleteContact}
/>
))}
</tbody>
@ -387,6 +439,7 @@ const Directory = () => {
setIsOpenModal={setIsOpenModal}
setOpen_contact={setOpen_contact}
setIsOpenModalNote={setIsOpenModalNote}
IsDeleted={setDeleteContact}
/>
</div>
))}