Added Document Managment feature #388
@ -4,27 +4,39 @@ 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 useMaster, { useMasterMenu } from "../../hooks/masterHook/useMaster";
|
||||
import MasterTable from "./MasterTable";
|
||||
import { getCachedData } from "../../slices/apiDataManager";
|
||||
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({ modalType: "", item: null, masterType: null });
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const { data, isLoading, isError, error: menuError } = useMasterMenu();
|
||||
const [modalConfig, setModalConfig] = useState({
|
||||
modalType: "",
|
||||
item: null,
|
||||
masterType: 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 selectedMaster = useSelector(
|
||||
(store) => store.localVariables.selectedMaster
|
||||
);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: masterData = [], loading, error, RecallApi,isError:isMasterError } = useMaster();
|
||||
const {
|
||||
data: masterData = [],
|
||||
loading,
|
||||
error,
|
||||
RecallApi,
|
||||
isError: isMasterError,
|
||||
} = useMaster();
|
||||
|
||||
const openModal = () => setIsCreateModalOpen(true);
|
||||
|
||||
@ -33,17 +45,21 @@ const MasterPage = () => {
|
||||
setModalConfig(null);
|
||||
|
||||
// Clean up Bootstrap modal manually
|
||||
const modalEl = document.getElementById('master-modal');
|
||||
modalEl?.classList.remove('show');
|
||||
if (modalEl) modalEl.style.display = 'none';
|
||||
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.body.classList.remove("modal-open");
|
||||
document.body.style.overflow = "auto";
|
||||
|
||||
document.querySelectorAll('.modal-backdrop').forEach((el) => el.remove());
|
||||
document.querySelectorAll(".modal-backdrop").forEach((el) => el.remove());
|
||||
};
|
||||
|
||||
const handleModalData = (modalType, item, masterType = selectedMaster) => {
|
||||
const handleModalData = (
|
||||
modalType,
|
||||
item = null,
|
||||
masterType = selectedMaster
|
||||
) => {
|
||||
setModalConfig({ modalType, item, masterType });
|
||||
};
|
||||
|
||||
@ -54,15 +70,17 @@ const MasterPage = () => {
|
||||
if (!masterData?.length) return;
|
||||
|
||||
const results = masterData.filter((item) =>
|
||||
Object.values(item).some(
|
||||
(field) => field?.toString().toLowerCase().includes(value)
|
||||
Object.values(item).some((field) =>
|
||||
field?.toString().toLowerCase().includes(value)
|
||||
)
|
||||
);
|
||||
setFilteredResults(results);
|
||||
};
|
||||
const displayData = useMemo(() => {
|
||||
if (searchTerm) return filteredResults;
|
||||
return queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
|
||||
return (
|
||||
queryClient.getQueryData(["masterData", selectedMaster]) || masterData
|
||||
);
|
||||
}, [searchTerm, filteredResults, selectedMaster, masterData]);
|
||||
|
||||
const columns = useMemo(() => {
|
||||
@ -84,15 +102,22 @@ const MasterPage = () => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
if(isError || 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>
|
||||
<p className="text-muted">{error?.message || menuError?.message}</p>
|
||||
</div>
|
||||
if (isError || 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>
|
||||
<p className="text-muted">{error?.message || menuError?.message}</p>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{isCreateModalOpen && (
|
||||
<MasterModal modaldata={modalConfig} closeModal={closeModal} />
|
||||
|
||||
<GlobalModel isOpen={isCreateModalOpen} closeModal={()=>closeModal()}>
|
||||
<MasterModal modaldata={modalConfig} closeModal={closeModal} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
<div className="container-fluid">
|
||||
@ -119,11 +144,17 @@ const MasterPage = () => {
|
||||
>
|
||||
<label>
|
||||
<select
|
||||
onChange={(e) => dispatch(changeMaster(e.target.value))}
|
||||
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" }}
|
||||
style={{
|
||||
fontSize: "0.875rem",
|
||||
height: "32px",
|
||||
width: "190px",
|
||||
}}
|
||||
value={selectedMaster}
|
||||
>
|
||||
{isLoading && <option value="">Loading...</option>}
|
||||
@ -155,10 +186,13 @@ const MasterPage = () => {
|
||||
></input>
|
||||
</label>
|
||||
</div>
|
||||
<div className={`dt-buttons btn-group flex-wrap ${!hasMasterPermission && 'd-none'}`}>
|
||||
<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"
|
||||
@ -166,14 +200,14 @@ const MasterPage = () => {
|
||||
type="button"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#master-modal"
|
||||
onClick={() => {
|
||||
handleModalData(selectedMaster, "null", selectedMaster)
|
||||
}}
|
||||
onClick={() =>
|
||||
handleModalData(selectedMaster, null)
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
<span className=" d-sm-inline-block">
|
||||
Add {selectedMaster}
|
||||
Add {selectedMaster}
|
||||
</span>
|
||||
</span>
|
||||
</button>{" "}
|
||||
@ -183,13 +217,17 @@ const MasterPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MasterTable data={displayData} columns={columns} loading={loading} handleModalData={handleModalData} />
|
||||
<MasterTable
|
||||
data={displayData}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
handleModalData={handleModalData}
|
||||
/>
|
||||
<div style={{ width: "1%" }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user