stash - try to fix publisher modal in calendar
This commit is contained in:
Dobromir Popov
189
components/publisher/PublisherShiftsModal.js
Normal file
189
components/publisher/PublisherShiftsModal.js
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import common from 'src/helpers/common';
|
||||||
|
import axiosInstance from 'src/axiosSecure';
|
||||||
|
|
||||||
|
const PublisherShiftsModal = ({ publisher, _shifts, onClose, date, onAssignmentChange }) => {
|
||||||
|
|
||||||
|
const [shifts, setShifts] = React.useState([_shifts]);
|
||||||
|
//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
|
||||||
|
|
||||||
|
const monthInfo = common.getMonthDatesInfo(new Date(date));
|
||||||
|
const monthShifts = shifts.filter(shift => {
|
||||||
|
const shiftDate = new Date(shift.startTime);
|
||||||
|
return shiftDate > monthInfo.firstDay && shiftDate < monthInfo.lastDay;
|
||||||
|
});
|
||||||
|
const weekShifts = monthShifts.filter(shift => {
|
||||||
|
const shiftDate = new Date(shift.startTime);
|
||||||
|
return common.getStartOfWeek(date) <= shiftDate && shiftDate <= common.getEndOfWeek(date);
|
||||||
|
});
|
||||||
|
const dayShifts = weekShifts.map(shift => {
|
||||||
|
const isAvailable = publisher?.availabilities?.some(avail =>
|
||||||
|
avail.startTime <= shift.startTime && avail.endTime >= shift.endTime
|
||||||
|
);
|
||||||
|
let color = isAvailable ? getColorForShift(shift) : 'bg-gray-300';
|
||||||
|
if (shift.isFromPreviousMonth) {
|
||||||
|
color += ' border-l-4 border-orange-500 ';
|
||||||
|
}
|
||||||
|
if (shift.isFromPreviousAssignment) {
|
||||||
|
color += ' border-l-4 border-red-500 ';
|
||||||
|
}
|
||||||
|
return { ...shift, isAvailable, color };
|
||||||
|
}).reduce((acc, shift) => {
|
||||||
|
const dayIndex = new Date(shift.startTime).getDay();
|
||||||
|
acc[dayIndex] = acc[dayIndex] || [];
|
||||||
|
acc[dayIndex].push(shift);
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
console.log("dayShifts:", dayShifts);
|
||||||
|
|
||||||
|
const hasAssignment = (shiftId) => {
|
||||||
|
// return publisher.assignments.some(ass => ass.shift.id == shiftId);
|
||||||
|
return publisher.assignments?.some(ass => {
|
||||||
|
//console.log(`Comparing: ${ass.shift.id} to ${shiftId}: ${ass.shift.id === shiftId}`);
|
||||||
|
return ass.shift.id === shiftId;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleKeyDown = (event) => {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
console.log('ESC: closing modal.');
|
||||||
|
onClose(); // Call the onClose function when ESC key is pressed
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add event listener
|
||||||
|
window.addEventListener('keydown', handleKeyDown);
|
||||||
|
|
||||||
|
// Remove event listener on cleanup
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('keydown', handleKeyDown);
|
||||||
|
};
|
||||||
|
}, [onClose]); // Include onClose in the dependency array
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50 z-50">
|
||||||
|
<div className="relative bg-white p-8 rounded-lg shadow-xl max-w-xl w-full h-auto overflow-y-auto">
|
||||||
|
<h2 className="text-xl font-semibold mb-4">График на <span title={publisher.email} className='publisher'>
|
||||||
|
<strong>{publisher.firstName} {publisher.lastName}</strong>
|
||||||
|
<span className="publisher-tooltip" onClick={common.copyToClipboard}>{publisher.email}</span>
|
||||||
|
</span> тази седмица:</h2>
|
||||||
|
|
||||||
|
{/* ... Display shifts in a calendar-like UI ... */}
|
||||||
|
<div className="grid grid-cols-6 gap-4 mb-4">
|
||||||
|
{Object.entries(dayShifts).map(([dayIndex, shiftsForDay]) => (
|
||||||
|
<div key={dayIndex} className="flex flex-col space-y-2 justify-end">
|
||||||
|
{/* Day header */}
|
||||||
|
<div className="text-center font-medium">{new Date(shiftsForDay[0].startTime).getDate()}-ти</div>
|
||||||
|
|
||||||
|
{shiftsForDay.map((shift, index) => {
|
||||||
|
const assignmentExists = hasAssignment(shift.id);
|
||||||
|
const availability = publisher.availabilities.find(avail =>
|
||||||
|
avail.startTime <= shift.startTime && avail.endTime >= shift.endTime
|
||||||
|
);
|
||||||
|
const isFromPrevMonth = availability && availability.isFromPreviousMonth;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={`text-sm text-white p-2 rounded-md ${isFromPrevMonth ? 'border-l-6 border-black-500' : ''} ${shift.color} ${assignmentExists ? 'border-2 border-blue-500' : ""} h-24 flex flex-col justify-center`}
|
||||||
|
>
|
||||||
|
{common.getTimeRange(shift.startTime, shift.endTime)} {shift.id}
|
||||||
|
|
||||||
|
{!assignmentExists && shift.isAvailable && (
|
||||||
|
<button onClick={() => { addAssignment(publisher, shift.id); }}
|
||||||
|
className="mt-2 bg-green-500 text-white p-1 rounded hover:bg-green-600 active:bg-green-700 focus:outline-none"
|
||||||
|
>
|
||||||
|
добави
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{assignmentExists && (
|
||||||
|
<button onClick={() => { removeAssignment(publisher, shift.id) }} // Implement the removeAssignment function
|
||||||
|
className="mt-2 bg-red-500 text-white p-1 rounded hover:bg-red-600 active:bg-red-700 focus:outline-none"
|
||||||
|
>
|
||||||
|
махни
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Close button in the top right corner */}
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="absolute top-3 right-2 p-2 px-3 bg-red-500 text-white rounded-full hover:bg-red-600 active:bg-red-700 focus:outline-none"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* <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">
|
||||||
|
<i className="fas fa-edit" />
|
||||||
|
</Link> */}
|
||||||
|
{/* Edit button in the top right corner, next to the close button */}
|
||||||
|
<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" />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
</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';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//ToDo: DRY - move to common
|
||||||
|
const addAssignment = async (publisher, shiftId) => {
|
||||||
|
try {
|
||||||
|
console.log(`calendar.idx: new assignment for publisher ${publisher.id} - ${publisher.firstName} ${publisher.lastName}`);
|
||||||
|
const newAssignment = {
|
||||||
|
publisher: { connect: { id: publisher.id } },
|
||||||
|
shift: { connect: { id: shiftId } },
|
||||||
|
isConfirmed: true
|
||||||
|
};
|
||||||
|
const { data } = await axiosInstance.post("/api/data/assignments", newAssignment);
|
||||||
|
|
||||||
|
// Update the 'publisher' property of the returned data with the full publisher object
|
||||||
|
data.publisher = publisher;
|
||||||
|
data.shift = shifts.find(shift => shift.id === shiftId);
|
||||||
|
publisher.assignments = [...publisher.assignments, data];
|
||||||
|
// handleAssignmentChange(publisher.id, 'add');
|
||||||
|
if (onAssignmentChange) { onAssignmentChange(publisher.id, 'add'); }
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error adding assignment:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const removeAssignment = async (publisher, shiftId) => {
|
||||||
|
try {
|
||||||
|
const assignment = publisher.assignments.find(ass => ass.shift.id === shiftId);
|
||||||
|
console.log(`calendar.idx: remove assignment for shift ${shiftId}`);
|
||||||
|
const { data } = await axiosInstance.delete(`/api/data/assignments/${assignment.id}`);
|
||||||
|
//remove from local assignments:
|
||||||
|
publisher.assignments = publisher.assignments.filter(a => a.id !== assignment.id)
|
||||||
|
//
|
||||||
|
// handleAssignmentChange(publisher.id, 'remove')
|
||||||
|
if (onAssignmentChange) {
|
||||||
|
onAssignmentChange(publisher.id, 'remove')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error removing assignment:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default PublisherShiftsModal;
|
||||||
@ -899,7 +899,15 @@ 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}
|
||||||
|
onAssignmentChange={handleAssignmentChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</ProtectedRoute >
|
</ProtectedRoute >
|
||||||
</Layout >
|
</Layout >
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user