From a3920224995826390bd3453095399befd26ce293 Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Sun, 12 May 2024 00:14:56 +0300
Subject: [PATCH] fix modals and publishers list filter zindex

---
 components/ConfirmationModal.tsx           | 20 +++++++-------
 components/layout.tsx                      |  1 +
 components/publisher/PublisherSearchBox.js |  7 +++--
 pages/cart/publishers/index.tsx            | 32 ++++++++++++----------
 4 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/components/ConfirmationModal.tsx b/components/ConfirmationModal.tsx
index 1900155..ddf646b 100644
--- a/components/ConfirmationModal.tsx
+++ b/components/ConfirmationModal.tsx
@@ -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) {
\ No newline at end of file
diff --git a/components/layout.tsx b/components/layout.tsx
index 7c5639b..77f1073 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -63,6 +63,7 @@ export default function Layout({ children }) {
             <div className="">
               {children}
             </div>
+            <div id="modal-root"></div>  {/* Modal container */}
           </main>
         </div>
       </div>
diff --git a/components/publisher/PublisherSearchBox.js b/components/publisher/PublisherSearchBox.js
index 7ad9925..18085c7 100644
--- a/components/publisher/PublisherSearchBox.js
+++ b/components/publisher/PublisherSearchBox.js
@@ -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 >
     );
 }
 
diff --git a/pages/cart/publishers/index.tsx b/pages/cart/publishers/index.tsx
index 57d9d35..493fe3e 100644
--- a/pages/cart/publishers/index.tsx
+++ b/pages/cart/publishers/index.tsx
@@ -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>