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

Adding New Dropdown in Master page.

Browse Source
This commit is contained in:
Kartik Sharma 2025-10-07 17:37:42 +05:30
parent 97dca1a10b
commit dcfb803813
2 changed files with 88 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Organization/OrgPicker.css
View File

@ -22,3 +22,35 @@
.scrollable-tbody:hover::-webkit-scrollbar-track {
background: transparent;
}
/* For Master Page */
/* Thin scrollbar for the dropdown */
.thin-scroll::-webkit-scrollbar {
width: 5px; /* width of vertical scrollbar */
}
.thin-scroll::-webkit-scrollbar-track {
background: transparent; /* track color */
margin-bottom: 4px;
}
.thin-scroll::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3); /* scrollbar thumb color */
border-radius: 10px; /* rounded edges */
}
.thin-scroll::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.5); /* hover effect */
}
.full-highlight {
border: 1px solid rgba(0, 0, 0, 0.15); /* subtle border all sides */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* shadow all around */
border-radius: 0.5rem; /* rounded corners for modern look */
background-color: #fff; /* ensure background is visible */
padding: 0.25rem 0; /* optional: spacing inside dropdown */
}

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

@ -15,7 +15,7 @@ import { changeMaster } from "../../slices/localVariablesSlice";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_MASTER } from "../../utils/constants";
import GlobalModel from "../../components/common/GlobalModel";
import "../../components/Organization/OrgPicker.css";
export const MasterContext = createContext();
export const useMasterContext = () => {
@ -46,9 +46,9 @@ const MasterPage = () => {
isError: isMasterError,
} = useMaster();
const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem();
const [isDeleletingServiceItem,setDeleletingServiceItem] = useState({isOpen:false,ItemId:null,whichItem:null})
const {mutate:DeleteSericeGroup,isPending:deletingGroup} =useDeleteServiceGroup()
const {mutate:DeleteAcivity,isPending:deletingActivity} = useDeleteActivity()
const [isDeleletingServiceItem, setDeleletingServiceItem] = useState({ isOpen: false, ItemId: null, whichItem: null })
const { mutate: DeleteSericeGroup, isPending: deletingGroup } = useDeleteServiceGroup()
const { mutate: DeleteAcivity, isPending: deletingActivity } = useDeleteActivity()
const [modalConfig, setModalConfig] = useState(null);
const [deleteData, setDeleteData] = useState(null);
@ -89,15 +89,15 @@ const MasterPage = () => {
};
const handleDeleteServiceItem =()=>{
if(!isDeleletingServiceItem.ItemId) return
const handleDeleteServiceItem = () => {
if (!isDeleletingServiceItem.ItemId) return
debugger
if(isDeleletingServiceItem.whichItem === "activity"){
DeleteAcivity(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
}else{
DeleteSericeGroup(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
if (isDeleletingServiceItem.whichItem === "activity") {
DeleteAcivity(isDeleletingServiceItem.ItemId, { onSuccess: () => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null }) })
} else {
DeleteSericeGroup(isDeleletingServiceItem.ItemId, { onSuccess: () => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null }) })
}
}
@ -115,7 +115,7 @@ const MasterPage = () => {
);
return (
<MasterContext.Provider value={{setDeleletingServiceItem}}>
<MasterContext.Provider value={{ setDeleletingServiceItem }}>
{modalConfig && (
<GlobalModel
size={
@ -134,7 +134,7 @@ const MasterPage = () => {
/>
</GlobalModel>
)}
<ConfirmModal
type="delete"
@ -145,15 +145,15 @@ const MasterPage = () => {
onSubmit={handleDeleteSubmit}
onClose={() => setDeleteData(null)}
/>
<ConfirmModal
type="delete"
header={`Delete ${isDeleletingServiceItem?.whichItem}`}
message={`Are you sure you want to delete this ${isDeleletingServiceItem?.whichItem}?`}
isOpen={!!isDeleletingServiceItem?.isOpen}
loading={deletingActivity}
onSubmit={handleDeleteServiceItem}
onClose={() => setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})}
onSubmit={handleDeleteServiceItem}
onClose={() => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null })}
/>
<div className="container-fluid">
@ -168,28 +168,49 @@ const MasterPage = () => {
style={{ overflow: "hidden" }}
>
<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))}
>
<div className="col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
<div className="btn-group w-100">
{menuLoading ? (
<option value="">Loading...</option>
<span className="btn btn-sm w-100 border d-flex justify-content-start">
Loading...
</span>
) : (
menuData?.map((item) => (
<option key={item.id} value={item.name}>
{item.name}
</option>
))
<>
<button
className="btn btn-sm w-100 border fs-6 dropdown-toggle d-flex justify-content-between align-items-center"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<span className="text-start">{selectedMaster || "Select Master"}</span>
</button>
<ul
className="dropdown-menu w-100 thin-scroll full-highlight"
style={{ maxHeight: "250px", overflowY: "auto" }}
>
{menuData?.map((item) => (
<li key={item.id}>
<button
className="dropdown-item text-start"
onClick={() => dispatch(changeMaster(item.name))}
>
{item.name}
</button>
</li>
))}
</ul>
</>
)}
</select>
</div>
</div>
<div className="col-md-9 col-sm-6 d-flex justify-content-end align-items-center gap-2">
<div className="w-25">
<input
@ -224,7 +245,7 @@ const MasterPage = () => {
</div>
</div>
</div>
</MasterContext.Provider>
</MasterContext.Provider>
);
};