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

Missing Bottom Border in Masters Dropdown Menu.

Browse Source
This commit is contained in:
Kartik Sharma 2025-08-06 12:38:03 +05:30
parent a208bb9a17
commit 381019dcaa
2 changed files with 77 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
src/pages/master/MasterPage.jsx
View File

@ -1,94 +1,94 @@
import React, { useState, useEffect, useMemo } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import MasterModal from "../../components/master/MasterModal";
import { mastersList} from "../../data/masters";
import { mastersList } from "../../data/masters";
import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import useMaster from "../../hooks/masterHook/useMaster"
import MasterTable from "./MasterTable";
import { getCachedData } from "../../slices/apiDataManager";
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_MASTER } from "../../utils/constants";
import {useQueryClient} from "@tanstack/react-query";
import { useQueryClient } from "@tanstack/react-query";
const MasterPage = () => {
const [modalConfig, setModalConfig] = useState({ modalType: "", item: null, masterType: null });
const [searchTerm, setSearchTerm] = useState('');
const [filteredResults, setFilteredResults] = useState([]);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
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 queryClient = useQueryClient();
const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
const dispatch = useDispatch();
const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
const queryClient = useQueryClient();
const { data: masterData = [], loading, error, RecallApi } = useMaster();
const { data: masterData = [], loading, error, RecallApi } = useMaster();
const openModal = () => setIsCreateModalOpen(true);
const openModal = () => setIsCreateModalOpen(true);
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, 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)
)
);
setFilteredResults(results);
};
const displayData = useMemo(() => {
if (searchTerm) return filteredResults;
return queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
}, [searchTerm, filteredResults, selectedMaster, masterData]);
const columns = useMemo(() => {
if (!displayData?.length) return [];
return Object.keys(displayData[0]).map((key) => ({
key,
label: key.toUpperCase(),
}));
}, [displayData]);
useEffect(() => {
if (modalConfig) openModal();
}, [modalConfig]);
useEffect(() => {
return () => {
const closeModal = () => {
setIsCreateModalOpen(false);
closeModal();
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, 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)
)
);
setFilteredResults(results);
};
const displayData = useMemo(() => {
if (searchTerm) return filteredResults;
return queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
}, [searchTerm, filteredResults, selectedMaster, masterData]);
const columns = useMemo(() => {
if (!displayData?.length) return [];
return Object.keys(displayData[0]).map((key) => ({
key,
label: key.toUpperCase(),
}));
}, [displayData]);
useEffect(() => {
if (modalConfig) openModal();
}, [modalConfig]);
useEffect(() => {
return () => {
setIsCreateModalOpen(false);
closeModal();
};
}, []);
return (
<>
{isCreateModalOpen && (
<MasterModal modaldata={modalConfig} closeModal={closeModal} />
<MasterModal modaldata={modalConfig} closeModal={closeModal} />
)}
<div className="container-fluid">
@ -100,7 +100,7 @@ useEffect(() => {
></Breadcrumb>
<div className="row">
<div className="card">
<div className="card-datatable table-responsive pt-2">
<div className="card-datatable table-responsive py-4">
<div
id="DataTables_Table_0_wrapper"
className="dataTables_wrapper dt-bootstrap5 no-footer"
@ -115,15 +115,15 @@ useEffect(() => {
>
<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 form-select-sm"
value={selectedMaster}
>
{mastersList.map( ( item ) => (
{mastersList.map((item) => (
<option key={item.id} value={item.name}>{item.name}</option>
))}
</select>
@ -151,7 +151,7 @@ useEffect(() => {
<div className={`dt-buttons btn-group flex-wrap ${!hasMasterPermission && 'd-none'}`}>
{" "}
<div className="input-group">
<button
className={`btn btn-sm add-new btn-primary `}
// ${hasUserPermission('660131a4-788c-4739-a082-cbbf7879cbf2') ? "":"d-none"}
@ -161,8 +161,8 @@ useEffect(() => {
data-bs-toggle="modal"
data-bs-target="#master-modal"
onClick={() => {
handleModalData(selectedMaster,"null",selectedMaster)
handleModalData(selectedMaster, "null", selectedMaster)
}}
>
<span>
@ -177,7 +177,7 @@ useEffect(() => {
</div>
</div>
</div>
<MasterTable data={displayData} columns={columns} loading={loading} handleModalData={handleModalData} />
<div style={{ width: "1%" }}></div>
</div>

2
src/pages/master/MasterTable.jsx
View File

@ -184,7 +184,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
{/* Pagination */}
{!loading && safeData.length > 20 && (
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1">
<ul className="pagination pagination-sm justify-content-end mt-3">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
<button
className="page-link btn-xs"