fix modal afrer refactoring
This commit is contained in:
@ -1,16 +1,22 @@
|
|||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import common from 'src/helpers/common';
|
||||||
|
|
||||||
|
const PublisherShiftsModal = ({ publisher, shifts, onClose, date }) => {
|
||||||
|
|
||||||
//Refactor ToDo: show the whole month instead of just the current week by showing the shift start time in front of the rows, and show all shifts in the month from the first to the last week in the cell where we show one shift now
|
//Refactor ToDo: show the whole month instead of just the current week by showing the shift start time in front of the rows, and show all shifts in the month from the first to the last week in the cell where we show one shift now
|
||||||
function PublisherShiftsModal({ publisher, shifts, onClose }) {
|
|
||||||
const monthInfo = common.getMonthDatesInfo(new Date(value));
|
const monthInfo = common.getMonthDatesInfo(new Date(date));
|
||||||
const monthShifts = shifts.filter(shift => {
|
const monthShifts = shifts.filter(shift => {
|
||||||
const shiftDate = new Date(shift.startTime);
|
const shiftDate = new Date(shift.startTime);
|
||||||
return shiftDate > monthInfo.firstDay && shiftDate < monthInfo.lastDay;
|
return shiftDate > monthInfo.firstDay && shiftDate < monthInfo.lastDay;
|
||||||
});
|
});
|
||||||
const weekShifts = monthShifts.filter(shift => {
|
const weekShifts = monthShifts.filter(shift => {
|
||||||
const shiftDate = new Date(shift.startTime);
|
const shiftDate = new Date(shift.startTime);
|
||||||
return common.getStartOfWeek(value) <= shiftDate && shiftDate <= common.getEndOfWeek(value);
|
return common.getStartOfWeek(date) <= shiftDate && shiftDate <= common.getEndOfWeek(date);
|
||||||
});
|
});
|
||||||
const dayShifts = weekShifts.map(shift => {
|
const dayShifts = weekShifts.map(shift => {
|
||||||
const isAvailable = publisher.availabilities?.some(avail =>
|
const isAvailable = publisher?.availabilities?.some(avail =>
|
||||||
avail.startTime <= shift.startTime && avail.endTime >= shift.endTime
|
avail.startTime <= shift.startTime && avail.endTime >= shift.endTime
|
||||||
);
|
);
|
||||||
let color = isAvailable ? getColorForShift(shift) : 'bg-gray-300';
|
let color = isAvailable ? getColorForShift(shift) : 'bg-gray-300';
|
||||||
@ -113,12 +119,12 @@ function PublisherShiftsModal({ publisher, shifts, onClose }) {
|
|||||||
×
|
×
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* <Link href={`/cart/publishers/edit/${modalPub.id}`}
|
{/* <Link href={`/cart/publishers/edit/${publisher.id}`}
|
||||||
className="mt-2 bg-blue-500 text-white p-1 rounded hover:bg-blue-600 active:bg-blue-700 focus:outline-none">
|
className="mt-2 bg-blue-500 text-white p-1 rounded hover:bg-blue-600 active:bg-blue-700 focus:outline-none">
|
||||||
<i className="fas fa-edit" />
|
<i className="fas fa-edit" />
|
||||||
</Link> */}
|
</Link> */}
|
||||||
{/* Edit button in the top right corner, next to the close button */}
|
{/* Edit button in the top right corner, next to the close button */}
|
||||||
<Link href={`/cart/publishers/edit/${modalPub.id}`} className="absolute top-3 right-12 p-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 active:bg-blue-700 focus:outline-none">
|
<Link href={`/cart/publishers/edit/${publisher.id}`} className="absolute top-3 right-12 p-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 active:bg-blue-700 focus:outline-none">
|
||||||
<i className="fas fa-edit" />
|
<i className="fas fa-edit" />
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
@ -126,3 +132,17 @@ function PublisherShiftsModal({ publisher, shifts, onClose }) {
|
|||||||
</div >
|
</div >
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getColorForShift(shift) {
|
||||||
|
const assignedCount = shift.assignedCount || 0; // Assuming each shift has an assignedCount property
|
||||||
|
switch (assignedCount) {
|
||||||
|
case 0: return 'bg-blue-300';
|
||||||
|
case 1: return 'bg-green-300';
|
||||||
|
case 2: return 'bg-yellow-300';
|
||||||
|
case 3: return 'bg-orange-300';
|
||||||
|
case 4: return 'bg-red-200';
|
||||||
|
default: return 'bg-gray-300';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PublisherShiftsModal;
|
@ -93,7 +93,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
|||||||
const shifts = await prisma.shift.findMany({
|
const shifts = await prisma.shift.findMany({
|
||||||
where: {
|
where: {
|
||||||
isActive: true,
|
isActive: true,
|
||||||
isPublished: true,
|
OR: [
|
||||||
|
{ isPublished: true },
|
||||||
|
{ user: { role: 'admin' } } // Todo: example. fix this
|
||||||
|
],
|
||||||
startTime: {
|
startTime: {
|
||||||
gte: fromDate,
|
gte: fromDate,
|
||||||
//lt: toDate,
|
//lt: toDate,
|
||||||
|
@ -821,8 +821,7 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
|
|||||||
className={`flex justify-between items-center p-4 sm:py-2 rounded-lg shadow-sm mb-2
|
className={`flex justify-between items-center p-4 sm:py-2 rounded-lg shadow-sm mb-2
|
||||||
${bgAndBorderColorClass} ${selectedBorderClass} ${activeOpacityClass}
|
${bgAndBorderColorClass} ${selectedBorderClass} ${activeOpacityClass}
|
||||||
${pub.currentMonthAssignments === pub.desiredShiftsPerMonth ? 'text-gray-400' : pub.currentMonthAssignments > pub.desiredShiftsPerMonth ? 'text-orange-300' : 'text-gray-800'}`}
|
${pub.currentMonthAssignments === pub.desiredShiftsPerMonth ? 'text-gray-400' : pub.currentMonthAssignments > pub.desiredShiftsPerMonth ? 'text-orange-300' : 'text-gray-800'}`}
|
||||||
onDoubleClick={(handlePublisherModalOpen.bind(this, pub))}
|
onDoubleClick={() => handlePublisherModalOpen(pub)}
|
||||||
onClick={handleSelectedPublisher.bind(this, pub)}
|
|
||||||
>
|
>
|
||||||
<span className={`${pub.isAvailableForShift ? 'font-bold' : 'font-medium'} `}>
|
<span className={`${pub.isAvailableForShift ? 'font-bold' : 'font-medium'} `}>
|
||||||
{pub.firstName} {pub.lastName}
|
{pub.firstName} {pub.lastName}
|
||||||
@ -838,11 +837,10 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
|
|||||||
<button tooltip="желани участия на месец" title="желани участия" className={`badge py-1 px-2 rounded-md text-xs ${pub.desiredShiftsPerMonth ? 'bg-purple-500 text-white' : 'bg-purple-200 text-gray-400'}`}>{pub.desiredShiftsPerMonth || 0}</button>
|
<button tooltip="желани участия на месец" title="желани участия" className={`badge py-1 px-2 rounded-md text-xs ${pub.desiredShiftsPerMonth ? 'bg-purple-500 text-white' : 'bg-purple-200 text-gray-400'}`}>{pub.desiredShiftsPerMonth || 0}</button>
|
||||||
<button tooltip="push" title="push" className={`badge py-1 px-2 rounded-md text-xs bg-red-100`}
|
<button tooltip="push" title="push" className={`badge py-1 px-2 rounded-md text-xs bg-red-100`}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
if (selectedPublisher && selectedShiftId)
|
handleSelectedPublisher(pub);
|
||||||
addAssignment(selectedPublisher, selectedShiftId);
|
addAssignment(pub, selectedShiftId);
|
||||||
}}
|
}}
|
||||||
>+</button>
|
>+</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
@ -881,24 +879,21 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
|
|||||||
<div>
|
<div>
|
||||||
{/* <CustomCalendar date={value} shifts={shifts} /> */}
|
{/* <CustomCalendar date={value} shifts={shifts} /> */}
|
||||||
</div>
|
</div>
|
||||||
{isModalOpen && <PublisherShiftsModal publisher={modalPub} shifts={allShifts} onClose={() => setIsModalOpen(false)} />}
|
{isModalOpen && (
|
||||||
|
<PublisherShiftsModal
|
||||||
|
publisher={modalPub}
|
||||||
|
shifts={allShifts}
|
||||||
|
onClose={() => setIsModalOpen(false)}
|
||||||
|
date={value}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</ProtectedRoute >
|
</ProtectedRoute >
|
||||||
</Layout >
|
</Layout >
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
function getColorForShift(shift) {
|
|
||||||
const assignedCount = shift.assignedCount || 0; // Assuming each shift has an assignedCount property
|
|
||||||
switch (assignedCount) {
|
|
||||||
case 0: return 'bg-blue-300';
|
|
||||||
case 1: return 'bg-green-300';
|
|
||||||
case 2: return 'bg-yellow-300';
|
|
||||||
case 3: return 'bg-orange-300';
|
|
||||||
case 4: return 'bg-red-200';
|
|
||||||
default: return 'bg-gray-300';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
import axiosServer from '../../../src/axiosServer';
|
import axiosServer from '../../../src/axiosServer';
|
||||||
|
Reference in New Issue
Block a user