handle delete master modal
This commit is contained in:
parent
1a7e77c814
commit
eea36a2722
@ -1,48 +1,46 @@
|
||||
import React, { useState } from "react";
|
||||
import axios from "axios";
|
||||
import { useDeleteMasterItem } from "../../hooks/masterHook/useMaster";
|
||||
|
||||
const API_URL = "http://localhost:5000/mastersdata";
|
||||
|
||||
const DeleteMaster = ({ master, onClose }) => {
|
||||
const [loader, setLoader] = useState(false);
|
||||
const { mutate: deleteMaster, isPending } = useDeleteMasterItem();
|
||||
|
||||
const handleDelete = () => {
|
||||
const index = mastersdata[master?.masterType]?.findIndex(
|
||||
(item) => String(item?.id) === String(master?.item?.id)
|
||||
deleteMaster(
|
||||
{ masterType: master?.masterType, item: master?.item },
|
||||
{
|
||||
onSuccess: () => {
|
||||
onClose();
|
||||
},
|
||||
}
|
||||
);
|
||||
if (index !== -1) {
|
||||
mastersdata[master?.masterType].splice(index, 1);
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="row g-2">
|
||||
<p className="h5">Are your sure , you want delete</p>
|
||||
<div className="col-12 d-flex justify-content-between width-md-6 width-sm-12">
|
||||
<p className="h5">Are you sure you want to delete?</p>
|
||||
<div className="col-12 d-flex justify-content-between">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary me-3"
|
||||
type="button"
|
||||
className="btn btn-danger me-3"
|
||||
onClick={handleDelete}
|
||||
disabled={isPending}
|
||||
>
|
||||
{loader ? (
|
||||
<div className="spinner-border text-primary" role="status">
|
||||
<span className="sr-only">Loading...</span>
|
||||
{isPending ? (
|
||||
<div className="spinner-border text-light" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
"Delete"
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button" // ✅ not reset
|
||||
type="button"
|
||||
className="btn btn-label-secondary"
|
||||
onClick={() => {
|
||||
onClose?.(); // properly close modal
|
||||
}}
|
||||
onClick={onClose}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,235 +1,135 @@
|
||||
import React, { useState, useEffect, useMemo } from "react";
|
||||
import React, { useState, useMemo, useEffect } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import MasterModal from "../../components/master/MasterModal";
|
||||
import { mastersList } from "../../data/masters";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import useMaster, { useMasterMenu } from "../../hooks/masterHook/useMaster";
|
||||
import ConfirmModal from "../../components/common/ConfirmModal";
|
||||
import MasterTable from "./MasterTable";
|
||||
import { getCachedData } from "../../slices/apiDataManager";
|
||||
import useMaster, { useDeleteMasterItem, useMasterMenu } from "../../hooks/masterHook/useMaster";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { MANAGE_MASTER } from "../../utils/constants";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
|
||||
const MasterPage = () => {
|
||||
const { data, isLoading, isError, error: menuError } = useMasterMenu();
|
||||
const [modalConfig, setModalConfig] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [filteredResults, setFilteredResults] = useState([]);
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
|
||||
const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
|
||||
const dispatch = useDispatch();
|
||||
const selectedMaster = useSelector(
|
||||
(store) => store.localVariables.selectedMaster
|
||||
);
|
||||
const queryClient = useQueryClient();
|
||||
const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
|
||||
const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
|
||||
|
||||
const {
|
||||
data: masterData = [],
|
||||
loading,
|
||||
error,
|
||||
RecallApi,
|
||||
isError: isMasterError,
|
||||
} = useMaster();
|
||||
const { data: menuData, isLoading: menuLoading, isError: menuErrorFlag, error: menuError } = useMasterMenu();
|
||||
const { data: masterData = [], loading, isError: isMasterError } = useMaster();
|
||||
const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem();
|
||||
|
||||
const openModal = () => setIsCreateModalOpen(true);
|
||||
const [modalConfig, setModalConfig] = useState(null);
|
||||
const [deleteData, setDeleteData] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
const closeModal = () => {
|
||||
setIsCreateModalOpen(false);
|
||||
setModalConfig(null);
|
||||
|
||||
// Clean up Bootstrap modal manually
|
||||
const modalEl = document.getElementById("master-modal");
|
||||
modalEl?.classList.remove("show");
|
||||
if (modalEl) modalEl.style.display = "none";
|
||||
|
||||
document.body.classList.remove("modal-open");
|
||||
document.body.style.overflow = "auto";
|
||||
|
||||
document.querySelectorAll(".modal-backdrop").forEach((el) => el.remove());
|
||||
};
|
||||
|
||||
const handleModalData = (
|
||||
modalType,
|
||||
item = null,
|
||||
masterType = selectedMaster
|
||||
) => {
|
||||
setModalConfig({ modalType, item, masterType });
|
||||
};
|
||||
|
||||
const handleSearch = (e) => {
|
||||
const value = e.target.value.toLowerCase();
|
||||
setSearchTerm(value);
|
||||
|
||||
if (!masterData?.length) return;
|
||||
|
||||
const results = masterData.filter((item) =>
|
||||
Object.values(item).some((field) =>
|
||||
field?.toString().toLowerCase().includes(value)
|
||||
const displayData = useMemo(() => {
|
||||
const dataSource = queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
|
||||
if (!searchTerm) return dataSource;
|
||||
return dataSource.filter((item) =>
|
||||
Object.values(item).some((val) =>
|
||||
val?.toString().toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
);
|
||||
setFilteredResults(results);
|
||||
};
|
||||
const displayData = useMemo(() => {
|
||||
if (searchTerm) return filteredResults;
|
||||
return (
|
||||
queryClient.getQueryData(["masterData", selectedMaster]) || masterData
|
||||
);
|
||||
}, [searchTerm, filteredResults, selectedMaster, masterData]);
|
||||
}, [searchTerm, masterData, selectedMaster, queryClient]);
|
||||
|
||||
const columns = useMemo(() => {
|
||||
if (!displayData?.length) return [];
|
||||
return Object.keys(displayData[0]).map((key) => ({
|
||||
key,
|
||||
label: key.toUpperCase(),
|
||||
}));
|
||||
if (!displayData.length) return [];
|
||||
return Object.keys(displayData[0]).map((key) => ({ key, label: key.toUpperCase() }));
|
||||
}, [displayData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (modalConfig) openModal();
|
||||
}, [modalConfig]);
|
||||
const handleModalData = (type, item = null, masterType = selectedMaster) => {
|
||||
if (type === "delete") setDeleteData({ item, masterType });
|
||||
else setModalConfig({ modalType: type, item, masterType });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setIsCreateModalOpen(false);
|
||||
closeModal();
|
||||
};
|
||||
}, []);
|
||||
const handleDeleteSubmit = () => {
|
||||
if (!deleteData) return;
|
||||
DeleteMaster({ masterType: deleteData.masterType, item: deleteData.item }, {
|
||||
onSuccess: () => setDeleteData(null),
|
||||
});
|
||||
};
|
||||
|
||||
if (isError || isMasterError)
|
||||
if (menuErrorFlag || isMasterError)
|
||||
return (
|
||||
<div className="d-flex flex-column align-items-center justify-content-center py-5">
|
||||
<h4 className=" mb-3">
|
||||
<i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error
|
||||
occurred
|
||||
<h4 className="mb-3">
|
||||
<i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error occurred
|
||||
</h4>
|
||||
<p className="text-muted">{error?.message || menuError?.message}</p>
|
||||
<p className="text-muted">{menuError?.message || "Error fetching master data"}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isCreateModalOpen && (
|
||||
{modalConfig && (
|
||||
<GlobalModel
|
||||
size={
|
||||
modalConfig?.masterType === "Application Role" ||
|
||||
modalConfig?.masterType === "Edit-Application Role"
|
||||
? "lg"
|
||||
: "md"
|
||||
}
|
||||
isOpen={isCreateModalOpen}
|
||||
closeModal={() => closeModal()}
|
||||
size={["Application Role", "Edit-Application Role"].includes(modalConfig.masterType) ? "lg" : "md"}
|
||||
isOpen={!!modalConfig}
|
||||
closeModal={() => setModalConfig(null)}
|
||||
>
|
||||
<MasterModal modaldata={modalConfig} closeModal={closeModal} />
|
||||
<MasterModal modaldata={modalConfig} closeModal={() => setModalConfig(null)} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
<ConfirmModal
|
||||
type="delete"
|
||||
header={`Delete ${selectedMaster}`}
|
||||
message={`Are you sure you want to delete this ${selectedMaster}?`}
|
||||
isOpen={!!deleteData}
|
||||
loading={isDeleting}
|
||||
onSubmit={handleDeleteSubmit}
|
||||
onClose={() => setDeleteData(null)}
|
||||
/>
|
||||
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Masters", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
<Breadcrumb data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]} />
|
||||
|
||||
<div className="row">
|
||||
<div className="card">
|
||||
<div className="card-datatable table-responsive py-4">
|
||||
<div
|
||||
id="DataTables_Table_0_wrapper"
|
||||
className="dataTables_wrapper dt-bootstrap5 no-footer"
|
||||
style={{ width: "98%" }}
|
||||
>
|
||||
<div className="row mb-2">
|
||||
<div className="col-md-3 col-sm-6">
|
||||
<div className="ms-0">
|
||||
<div
|
||||
className="dataTables_length text-start"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<label>
|
||||
<select
|
||||
onChange={(e) =>
|
||||
dispatch(changeMaster(e.target.value))
|
||||
}
|
||||
name="DataTables_Table_0_length"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select py-1 px-2"
|
||||
style={{
|
||||
fontSize: "0.875rem",
|
||||
height: "32px",
|
||||
width: "190px",
|
||||
}}
|
||||
value={selectedMaster}
|
||||
>
|
||||
{isLoading && <option value="">Loading...</option>}
|
||||
{!isLoading &&
|
||||
data?.map((item) => (
|
||||
<option key={item.id} value={item.name}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-9 col-sm-6">
|
||||
<div className="dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-sm-end justify-content-between gap-2 flex-md-row flex-sm-column mb-3 mb-md-0 mt-1 mt-md-0 gap-md-4">
|
||||
<div
|
||||
id="DataTables_Table_0_filter"
|
||||
className="dataTables_filter"
|
||||
>
|
||||
<label>
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search"
|
||||
aria-controls="DataTables_Table_0"
|
||||
value={searchTerm}
|
||||
onChange={handleSearch}
|
||||
></input>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className={`dt-buttons btn-group flex-wrap ${
|
||||
!hasMasterPermission && "d-none"
|
||||
}`}
|
||||
>
|
||||
{" "}
|
||||
<div className="input-group">
|
||||
<button
|
||||
className={`btn btn-sm add-new btn-primary `}
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
type="button"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#master-modal"
|
||||
onClick={() =>
|
||||
handleModalData(selectedMaster, null)
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
<span className=" d-sm-inline-block">
|
||||
Add {selectedMaster}
|
||||
</span>
|
||||
</span>
|
||||
</button>{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-2">
|
||||
<div className="col-md-3 col-sm-6">
|
||||
<select
|
||||
className="form-select py-1 px-2"
|
||||
style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
|
||||
value={selectedMaster}
|
||||
onChange={(e) => dispatch(changeMaster(e.target.value))}
|
||||
>
|
||||
{menuLoading ? (
|
||||
<option value="">Loading...</option>
|
||||
) : (
|
||||
menuData?.map((item) => <option key={item.id} value={item.name}>{item.name}</option>)
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-9 col-sm-6 d-flex justify-content-end align-items-center gap-2">
|
||||
<div className="w-25"><input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/></div>
|
||||
{hasMasterPermission && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => handleModalData(selectedMaster, null, selectedMaster)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>Add {selectedMaster}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<MasterTable
|
||||
data={displayData}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
handleModalData={handleModalData}
|
||||
/>
|
||||
<div style={{ width: "1%" }}></div>
|
||||
</div>
|
||||
|
||||
<MasterTable
|
||||
data={displayData}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
handleModalData={handleModalData}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -179,9 +179,8 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
|
||||
aria-label="Delete"
|
||||
type="button"
|
||||
className="btn p-0 dropdown-toggle hide-arrow"
|
||||
onClick={() =>
|
||||
handleModalData("delete", item, selectedMaster)
|
||||
}
|
||||
onClick={() => handleModalData("delete", item, selectedMaster)}
|
||||
|
||||
>
|
||||
<i className="bx bx-trash me-1 text-danger"></i>
|
||||
</button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user