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

fix confirmation modal on top of other confirmation modal

Browse Source
This commit is contained in:
Dobromir Popov
2024-05-11 22:26:29 +03:00
parent e29807540f
commit e987b0028c
4 changed files with 51 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/ConfirmationModal.tsx
View File

@ -5,8 +5,8 @@ export default function ConfirmationModal({ isOpen, onClose, onConfirm, message
if (!isOpen) return null; if (!isOpen) return null;
return ( return (
<div className="opacity-100 fixed inset-0 flex items-center justify-center z-1002" > <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" style={{ zIndex: 1002 }}> <div className="bg-white p-4 rounded-md shadow-lg modal-content">
<p className="mb-4">{message}</p> <p className="mb-4">{message}</p>
<button <button
className="bg-red-500 text-white px-4 py-2 rounded mr-2" className="bg-red-500 text-white px-4 py-2 rounded mr-2"

10
pages/api/index.ts
View File

@ -835,8 +835,8 @@ async function replaceInAssignment(oldPublisherId, newPublisherId, shiftId) {
where: { where: {
id: shiftId id: shiftId
}, },
select: {
startTime: true, include: {
cartEvent: { cartEvent: {
select: { select: {
location: { location: {
@ -845,9 +845,7 @@ async function replaceInAssignment(oldPublisherId, newPublisherId, shiftId) {
} }
} }
} }
} },
},
include: {
assignments: { assignments: {
include: { include: {
publisher: { publisher: {
@ -880,7 +878,7 @@ async function replaceInAssignment(oldPublisherId, newPublisherId, shiftId) {
publisher: { connect: { id: oldPublisherId } }, publisher: { connect: { id: oldPublisherId } },
shift: { connect: { id: shiftId } }, shift: { connect: { id: shiftId } },
type: EventLogType.AssignmentReplacementManual, type: EventLogType.AssignmentReplacementManual,
content: "Въведено заместване от " + originalPublisher.firstName + " " + originalPublisher.lastName + ". Ще го замества " + newPublisher.firstName + " " + newPublisher.lastName + "." content: "Заместване въведено от " + originalPublisher.firstName + " " + originalPublisher.lastName + ". Ще го замества " + newPublisher.firstName + " " + newPublisher.lastName + "."
} }
}); });

32
pages/cart/reports/coverMe.tsx
View File

@ -25,7 +25,17 @@ export default function EventLogList() {
useEffect(() => { useEffect(() => {
const fetchLocations = async () => { const fetchLocations = async () => {
try { try {
const { data: eventLogsData } = await axiosInstance.get(`/api/data/prisma/eventLog?where={"type":"${EventLogType.AssignmentReplacementAccepted}"}&include={"publisher":{"select":{"firstName":true,"lastName":true}},"shift":{"include":{"assignments":{"include":{"publisher":{"select":{"firstName":true,"lastName":true}}}}}}}`); const { data: eventLogsDataold } = await axiosInstance.get(`/api/data/prisma/eventLog?where={"type":"${EventLogType.AssignmentReplacementAccepted}"}&include={"publisher":{"select":{"firstName":true,"lastName":true}},"shift":{"include":{"assignments":{"include":{"publisher":{"select":{"firstName":true,"lastName":true}}}}}}}`);
// const where = encodeURIComponent(`{OR: [{type: "${EventLogType.AssignmentReplacementAccepted}"}, {type: "${EventLogType.AssignmentReplacementManual}"}]}`);
const where = encodeURIComponent(JSON.stringify({
OR: [
{ type: EventLogType.AssignmentReplacementAccepted },
{ type: EventLogType.AssignmentReplacementManual }
]
}));
const { data: eventLogsData } = await axiosInstance.get(`/api/data/prisma/eventLog?where=${where}&include={"publisher":{"select":{"firstName":true,"lastName":true}},"shift":{"include":{"assignments":{"include":{"publisher":{"select":{"firstName":true,"lastName":true}}}}}}}`);
setEventLog(eventLogsData); setEventLog(eventLogsData);
@ -40,6 +50,9 @@ export default function EventLogList() {
fetchLocations(); fetchLocations();
} }
}, []); }, []);
return ( return (
<Layout> <Layout>
<ProtectedRoute allowedRoles={[UserRole.POWERUSER, UserRole.ADMIN]}> <ProtectedRoute allowedRoles={[UserRole.POWERUSER, UserRole.ADMIN]}>
@ -67,15 +80,18 @@ export default function EventLogList() {
<table className="w-full table-auto"> <table className="w-full table-auto">
<thead> <thead>
<tr> <tr>
<th className="px-4 py-2 text-left">На</th>
<th className="px-4 py-2 text-left">От</th> <th className="px-4 py-2 text-left">От</th>
<th className="px-4 py-2 text-left">Дата</th> <th className="px-4 py-2 text-left">Дата</th>
<th className="px-4 py-2 text-left">Смяна</th> <th className="px-4 py-2 text-left">Смяна</th>
<th className="px-4 py-2 text-left">Действия</th> <th className="px-4 py-2 text-left">Събитие</th>
{/* <th className="px-4 py-2 text-left">Действия</th> */}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{!showOpenRequests && (eventLogs.map((event) => ( {!showOpenRequests && (eventLogs.map((event) => (
<tr key={event.id}> <tr key={event.id}>
<td className="border px-2 py-2">{new Date(event.date).toLocaleString('bg')}</td>
<td className="border px-2 py-2">{event.publisher.firstName + " " + event.publisher.lastName}</td> <td className="border px-2 py-2">{event.publisher.firstName + " " + event.publisher.lastName}</td>
<td className="border px-2 py-2">{new Date(event.shift?.startTime).toLocaleString('bg')}</td> <td className="border px-2 py-2">{new Date(event.shift?.startTime).toLocaleString('bg')}</td>
<td className="border px-2 py-2"> <td className="border px-2 py-2">
@ -86,17 +102,18 @@ export default function EventLogList() {
<td className="border px-2 py-2"> <td className="border px-2 py-2">
{event.content} {event.content}
</td> </td>
<td className="border px-4 py-2"> {/* <td className="border px-4 py-2">
<button <button
className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"> className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
Изтрий Изтрий
</button> </button>
</td> </td> */}
</tr> </tr>
)) ))
)} )}
{showOpenRequests && (requestedAssignments.map((assignment) => ( {showOpenRequests && (requestedAssignments.map((assignment) => (
<tr key={assignment.id}> <tr key={assignment.id}>
<td className="border px-2 py-2">{new Date(assignment.date).toLocaleString('bg')}</td>
<td className="border px-2 py-2">{assignment.publisher.firstName + " " + assignment.publisher.lastName}</td> <td className="border px-2 py-2">{assignment.publisher.firstName + " " + assignment.publisher.lastName}</td>
<td className="border px-2 py-2">{new Date(assignment.shift.startTime).toLocaleString('bg')}</td> <td className="border px-2 py-2">{new Date(assignment.shift.startTime).toLocaleString('bg')}</td>
<td className="border px-2 py-2"> <td className="border px-2 py-2">
@ -104,12 +121,13 @@ export default function EventLogList() {
<div key={ass.id}>{ass.publisher.firstName + " " + ass.publisher.lastName}</div> <div key={ass.id}>{ass.publisher.firstName + " " + ass.publisher.lastName}</div>
))} ))}
</td> </td>
<td className="border px-4 py-2"> {/* <td className="border px-4 py-2">
<button <button
className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"> className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
>
Изтрий Изтрий
</button> </button>
</td> </td> */}
</tr> </tr>
)) ))
)} )}

22
styles/styles.css
View File

@ -37,12 +37,30 @@ iframe {
filter: invert(1); filter: invert(1);
} }
.modal-container {
display: flex;
flex-direction: column-reverse; /* Newest first if new elements are prepended */
}
.modal-content { .modal-content {
z-index: 1002; /* or a higher value if necessary */ /* z-index: 1002; or a higher value if necessary */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Center the modal */
z-index: 1051; /* Higher z-index than overlay */
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1051; /* High z-index */
} }
.modal-overlay { .modal-overlay {
z-index: 1001; position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
z-index: 1050; /* High z-index */
} }
.publisher { .publisher {
position: relative; position: relative;