Refactor_Expenses #321
@ -1,5 +1,4 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
import CreateRole from "./CreateRole";
|
import CreateRole from "./CreateRole";
|
||||||
import DeleteMaster from "./DeleteMaster";
|
import DeleteMaster from "./DeleteMaster";
|
||||||
import EditRole from "./EditRole";
|
import EditRole from "./EditRole";
|
||||||
@ -19,66 +18,41 @@ import EditContactCategory from "./EditContactCategory";
|
|||||||
import EditContactTag from "./EditContactTag";
|
import EditContactTag from "./EditContactTag";
|
||||||
import { useDeleteMasterItem } from "../../hooks/masterHook/useMaster";
|
import { useDeleteMasterItem } from "../../hooks/masterHook/useMaster";
|
||||||
|
|
||||||
|
|
||||||
const MasterModal = ({ modaldata, closeModal }) => {
|
const MasterModal = ({ modaldata, closeModal }) => {
|
||||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||||
const { mutate: deleteMasterItem, isPending } = useDeleteMasterItem();
|
const { mutate: deleteMasterItem, isPending } = useDeleteMasterItem();
|
||||||
|
|
||||||
// const handleSelectedMasterDeleted = async () =>
|
|
||||||
// {
|
|
||||||
// debugger
|
|
||||||
// const deleteFn = MasterRespository[modaldata.masterType];
|
|
||||||
// if (!deleteFn) {
|
|
||||||
// showToast(`No delete strategy defined for master type`,"error");
|
|
||||||
// return false;
|
|
||||||
// }
|
|
||||||
// try
|
|
||||||
// {
|
|
||||||
// const response = await deleteFn( modaldata?.item?.id );
|
|
||||||
// const selected_cachedData = getCachedData( modaldata?.masterType );
|
|
||||||
// const updated_master = selected_cachedData?.filter(item => item.id !== modaldata?.item.id);
|
|
||||||
// cacheData( modaldata?.masterType, updated_master )
|
|
||||||
|
|
||||||
// showToast(`${modaldata?.masterType} is deleted successfully`, "success");
|
|
||||||
// handleCloseDeleteModal()
|
|
||||||
|
|
||||||
// } catch ( error )
|
|
||||||
// {
|
|
||||||
// const message = error.response.data.message || error.message || "Error occured api during call"
|
|
||||||
// showToast(message, "success");
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
const handleSelectedMasterDeleted = () => {
|
const handleSelectedMasterDeleted = () => {
|
||||||
if (!modaldata?.masterType || !modaldata?.item?.id) {
|
const { masterType, item, validateFn } = modaldata || {};
|
||||||
|
if (!masterType || !item?.id) {
|
||||||
showToast("Missing master type or item", "error");
|
showToast("Missing master type or item", "error");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteMasterItem(
|
deleteMasterItem(
|
||||||
{
|
{ masterType, item, validateFn },
|
||||||
masterType: modaldata.masterType,
|
{ onSuccess: handleCloseDeleteModal }
|
||||||
item: modaldata.item,
|
|
||||||
validateFn: modaldata.validateFn, // optional
|
|
||||||
},
|
|
||||||
{
|
|
||||||
onSuccess: () => {
|
|
||||||
handleCloseDeleteModal();
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleCloseDeleteModal = () => {
|
||||||
|
setIsDeleteModalOpen(false);
|
||||||
|
closeModal();
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (modaldata?.modalType === "delete") {
|
if (modaldata?.modalType === "delete") {
|
||||||
setIsDeleteModalOpen(true);
|
setIsDeleteModalOpen(true);
|
||||||
}
|
}
|
||||||
}, [modaldata]);
|
}, [modaldata]);
|
||||||
|
|
||||||
const handleCloseDeleteModal = () => {
|
if (!modaldata?.modalType) {
|
||||||
setIsDeleteModalOpen(false);
|
|
||||||
closeModal();
|
closeModal();
|
||||||
};
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
if (modaldata?.modalType === "delete" && isDeleteModalOpen) {
|
if (modaldata.modalType === "delete" && isDeleteModalOpen) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="modal fade show"
|
className="modal fade show"
|
||||||
@ -90,86 +64,63 @@ const MasterModal = ({ modaldata, closeModal }) => {
|
|||||||
<ConfirmModal
|
<ConfirmModal
|
||||||
type="delete"
|
type="delete"
|
||||||
header={`Delete ${modaldata.masterType}`}
|
header={`Delete ${modaldata.masterType}`}
|
||||||
message={"Are you sure you want delete?"}
|
message="Are you sure you want delete?"
|
||||||
onSubmit={handleSelectedMasterDeleted}
|
onSubmit={handleSelectedMasterDeleted}
|
||||||
onClose={handleCloseDeleteModal}
|
onClose={handleCloseDeleteModal}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const renderModalContent = () => {
|
||||||
|
const { modalType, item, masterType } = modaldata;
|
||||||
|
|
||||||
|
const modalComponents = {
|
||||||
|
"Application Role": <CreateRole masmodalType={masterType} onClose={closeModal} />,
|
||||||
|
"Edit-Application Role": <EditRole master={modaldata} onClose={closeModal} />,
|
||||||
|
"Job Role": <CreateJobRole onClose={closeModal} />,
|
||||||
|
"Edit-Job Role": <EditJobRole data={item} onClose={closeModal} />,
|
||||||
|
"Activity": <CreateActivity onClose={closeModal} />,
|
||||||
|
"Edit-Activity": <EditActivity activityData={item} onClose={closeModal} />,
|
||||||
|
"Work Category": <CreateWorkCategory onClose={closeModal} />,
|
||||||
|
"Edit-Work Category": <EditWorkCategory data={item} onClose={closeModal} />,
|
||||||
|
"Contact Category": <CreateCategory data={item} onClose={closeModal} />,
|
||||||
|
"Edit-Contact Category": <EditContactCategory data={item} onClose={closeModal} />,
|
||||||
|
"Contact Tag": <CreateContactTag data={item} onClose={closeModal} />,
|
||||||
|
"Edit-Contact Tag": <EditContactTag data={item} onClose={closeModal} />,
|
||||||
|
};
|
||||||
|
|
||||||
|
return modalComponents[modalType] || null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const isLargeModal = ["Application Role", "Edit-Application Role"].includes(
|
||||||
|
modaldata.modalType
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="modal fade"
|
className="modal fade show"
|
||||||
id="master-modal"
|
id="master-modal"
|
||||||
tabIndex="-1"
|
tabIndex="-1"
|
||||||
aria-hidden="true"
|
|
||||||
role="dialog"
|
role="dialog"
|
||||||
|
aria-hidden="true"
|
||||||
aria-labelledby="modalToggleLabel"
|
aria-labelledby="modalToggleLabel"
|
||||||
|
style={{ display: "block" }}
|
||||||
>
|
>
|
||||||
<div
|
<div className={`modal-dialog mx-sm-auto mx-1 ${isLargeModal ? "modal-lg" : "modal-md"} modal-simple`}>
|
||||||
className={`modal-dialog mx-sm-auto mx-1 ${
|
|
||||||
["Application Role", "Edit-Application Role"].includes(
|
|
||||||
modaldata?.modalType
|
|
||||||
)
|
|
||||||
? "modal-lg"
|
|
||||||
: "modal-md"
|
|
||||||
} modal-simple`}
|
|
||||||
>
|
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
<div className="modal-body p-sm-4 p-0">
|
<div className="modal-body p-sm-4 p-0">
|
||||||
<div className="d-flex justify-content-between">
|
<div className="d-flex justify-content-between">
|
||||||
<h6>{`${modaldata?.modalType} `}</h6>
|
<h6>{modaldata?.modalType}</h6>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn-close"
|
className="btn-close"
|
||||||
data-bs-dismiss="modal"
|
data-bs-dismiss="modal"
|
||||||
aria-label="Close"
|
aria-label="Close"
|
||||||
onClick={closeModal}
|
onClick={closeModal}
|
||||||
></button>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
{renderModalContent()}
|
||||||
{modaldata.modalType === "Application Role" && (
|
|
||||||
<CreateRole
|
|
||||||
masmodalType={modaldata.masterType}
|
|
||||||
onClose={closeModal}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{modaldata.modalType === "Edit-Application Role" && (
|
|
||||||
<EditRole master={modaldata} onClose={closeModal} />
|
|
||||||
)}
|
|
||||||
{modaldata.modalType === "Job Role" && (
|
|
||||||
<CreateJobRole onClose={closeModal} />
|
|
||||||
)}
|
|
||||||
{modaldata.modalType === "Edit-Job Role" && (
|
|
||||||
<EditJobRole data={modaldata.item} onClose={closeModal} />
|
|
||||||
)}
|
|
||||||
{modaldata.modalType === "Activity" && (
|
|
||||||
<CreateActivity onClose={closeModal} />
|
|
||||||
)}
|
|
||||||
{modaldata.modalType === "Edit-Activity" && (
|
|
||||||
<EditActivity
|
|
||||||
activityData={modaldata.item}
|
|
||||||
onClose={closeModal}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{modaldata.modalType === "Work Category" && (
|
|
||||||
<CreateWorkCategory onClose={closeModal} />
|
|
||||||
)}
|
|
||||||
{modaldata.modalType === "Edit-Work Category" && (
|
|
||||||
<EditWorkCategory data={modaldata.item} onClose={closeModal} />
|
|
||||||
)}
|
|
||||||
{modaldata.modalType === "Contact Category" && (
|
|
||||||
<CreateCategory data={modaldata.item} onClose={closeModal} />
|
|
||||||
)}
|
|
||||||
{modaldata.modalType === "Edit-Contact Category" && (
|
|
||||||
<EditContactCategory data={modaldata.item} onClose={closeModal} />
|
|
||||||
)}
|
|
||||||
{modaldata.modalType === "Contact Tag" && (
|
|
||||||
<CreateContactTag data={modaldata.item} onClose={closeModal} />
|
|
||||||
)}
|
|
||||||
{modaldata.modalType === "Edit-Contact Tag" && (
|
|
||||||
<EditContactTag data={modaldata.item} onClose={closeModal} />
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user