popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix modals and publishers list filter zindex

Browse Source
This commit is contained in:
Dobromir Popov
2024-05-12 00:14:56 +03:00
parent e987b0028c
commit a392022499
4 changed files with 32 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/ConfirmationModal.tsx
View File

@ -1,29 +1,29 @@
import zIndex from "@mui/material/styles/zIndex";
import ReactDOM from 'react-dom';
export default function ConfirmationModal({ isOpen, onClose, onConfirm, message }) {
//export default function ConfirmationModal({ isOpen, onClose, onConfirm, message })
if (!isOpen) return null;
return (
<div className="modal-container opacity-100 inset-0 flex items-center justify-center z-1152" >
const modalContent = (
<div className="modal-container opacity-100 inset-0 flex items-center justify-center z-1152">
<div className="bg-white p-4 rounded-md shadow-lg modal-content">
<p className="mb-4">{message}</p>
<button
className="bg-red-500 text-white px-4 py-2 rounded mr-2"
onClick={onConfirm}
>
<button className="bg-red-500 text-white px-4 py-2 rounded mr-2" onClick={onConfirm}>
Потвтрждавам
</button>
<button
className="bg-gray-300 px-4 py-2 rounded"
onClick={onClose}
>
<button className="bg-gray-300 px-4 py-2 rounded" onClick={onClose}>
Отказвам
</button>
</div>
<div className="fixed inset-0 bg-black opacity-50 modal-overlay" onClick={onClose}></div>
</div>
);
return ReactDOM.createPortal(
modalContent,
document.getElementById('modal-root')
);
};
// const CustomCalendar = ({ month, year, shifts }) => {
// export default function CustomCalendar({ date, shifts }: CustomCalendarProps) {

1
components/layout.tsx
View File

@ -63,6 +63,7 @@ export default function Layout({ children }) {
<div className="">
{children}
</div>
<div id="modal-root"></div> {/* Modal container */}
</main>
</div>
</div>

7
components/publisher/PublisherSearchBox.js
View File

@ -127,7 +127,7 @@ function PublisherSearchBox({ id, selectedId, onChange, isFocused, filterDate, s
) : null}
{showList ? (
// Display only clickable list of all publishers
<ul className="absolute bg-white border border-gray-300 w-full z-10">
<ul className="absolute bg-white border border-gray-300 w-full z-10 overflow-y-auto">
{publishers.map((publisher) => (
<li key={publisher.id}
className="p-2 cursor-pointer hover:bg-gray-200"
@ -136,8 +136,9 @@ function PublisherSearchBox({ id, selectedId, onChange, isFocused, filterDate, s
</li>
))}
</ul>
) : null}
</div>
) : null
}
</div >
);
}

32
pages/cart/publishers/index.tsx
View File

@ -14,6 +14,7 @@ import toast from "react-hot-toast";
import { levenshteinEditDistance } from "levenshtein-edit-distance";
import ProtectedRoute from '../../../components/protectedRoute';
import ConfirmationModal from '../../../components/ConfirmationModal';
import { relative } from "path";
@ -165,7 +166,7 @@ function PublishersPage({ publishers = [] }: IProps) {
return (
<Layout>
<ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
<div className="">
<div className="mx-auto ">
<div className="flex items-center justify-center space-x-4 m-4">
<div className="flex justify-center m-4">
<a href="/cart/publishers/new" className="btn">Добави вестител</a>
@ -196,23 +197,24 @@ function PublishersPage({ publishers = [] }: IProps) {
</div>
</div>
<div name="filters" className="flex items-center justify-center space-x-4 m-4 sticky top-4 z-10 bg-gray-100 p-2">
<label htmlFor="filter">Filter:</label>
<input type="text" id="filter" name="filter" value={filter} onChange={handleFilterChange}
className="border border-gray-300 rounded-md px-2 py-1"
/>
<label htmlFor="zeroShiftsOnly" className="ml-4 inline-flex items-center">
<input type="checkbox" id="zeroShiftsOnly" checked={showZeroShiftsOnly}
onChange={e => setShowZeroShiftsOnly(e.target.checked)}
className="form-checkbox text-indigo-600"
<div className="z-60 sticky top-0" style={{ zIndex: 60, position: relative }}>
<div name="filters" className="flex items-center justify-center space-x-4 m-4 bg-gray-100 p-2" >
<label htmlFor="filter">Filter:</label>
<input type="text" id="filter" name="filter" value={filter} onChange={handleFilterChange}
className="border border-gray-300 rounded-md px-2 py-1"
/>
<span className="ml-2">само без смени</span>
</label>
<span id="filter-info" className="ml-4">{publishers.length} от {publishers.length} вестителя</span>
<label htmlFor="zeroShiftsOnly" className="ml-4 inline-flex items-center">
<input type="checkbox" id="zeroShiftsOnly" checked={showZeroShiftsOnly}
onChange={e => setShowZeroShiftsOnly(e.target.checked)}
className="form-checkbox text-indigo-600"
/>
<span className="ml-2">само без смени</span>
</label>
<span id="filter-info" className="ml-4">{publishers.length} от {publishers.length} вестителя</span>
</div>
</div>
<div className="grid gap-4 grid-cols-1 md:grid-cols-4 z-0">
{renderPublishers()}
</div>