Add assignment UI change in calendar
This commit is contained in:
Dobromir Popov
@ -152,15 +152,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
||||
//bold the text after - in the notes
|
||||
notes: notes,
|
||||
notes_bold: notes_bold,
|
||||
names: shift.assignments
|
||||
.map((assignment) => {
|
||||
return (
|
||||
assignment.publisher.firstName +
|
||||
" " +
|
||||
assignment.publisher.lastName
|
||||
);
|
||||
})
|
||||
.join(", "),
|
||||
names: shift.assignments.length > 0
|
||||
? shift.assignments
|
||||
.map((assignment) => {
|
||||
return (
|
||||
assignment.publisher.firstName +
|
||||
" " +
|
||||
assignment.publisher.lastName
|
||||
);
|
||||
})
|
||||
.join(", ")
|
||||
: shift.name,
|
||||
};
|
||||
|
||||
if (shiftSchedule.names.length > 0) {
|
||||
|
||||
@ -9,6 +9,7 @@ import Shift from '../../../components/calendar/ShiftComponent';
|
||||
import { DayOfWeek, UserRole } from '@prisma/client';
|
||||
import { env } from 'process'
|
||||
import ShiftComponent from '../../../components/calendar/ShiftComponent';
|
||||
import PublisherShiftsModal from '../../../components/publisher/PublisherShiftsModal';
|
||||
//import { set } from 'date-fns';
|
||||
const common = require('src/helpers/common');
|
||||
import { toast } from 'react-toastify';
|
||||
@ -66,6 +67,7 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
|
||||
const [shifts, setShifts] = React.useState([]);
|
||||
const [error, setError] = React.useState(null);
|
||||
const [availablePubs, setAvailablePubs] = React.useState([]);
|
||||
const [selectedPublisher, setSelectedPublisher] = React.useState(null);
|
||||
|
||||
const [selectedShiftId, setSelectedShiftId] = useState(null);
|
||||
|
||||
@ -214,8 +216,8 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
|
||||
};
|
||||
|
||||
const handleSelectedPublisher = (publisher) => {
|
||||
// Do something with the selected publisher
|
||||
console.log("handle pub clicked:", publisher);
|
||||
setSelectedPublisher(publisher);
|
||||
}
|
||||
const handlePublisherModalOpen = async (publisher) => {
|
||||
// Do something with the selected publisher
|
||||
@ -365,6 +367,10 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
|
||||
isConfirmed: true
|
||||
};
|
||||
const { data } = await axiosInstance.post("/api/data/assignments", newAssignment);
|
||||
if (selectedShiftId == shiftId) {
|
||||
handleShiftSelection(shifts.find(shift => shift.id === shiftId));
|
||||
}
|
||||
|
||||
// Update the 'publisher' property of the returned data with the full publisher object
|
||||
data.publisher = publisher;
|
||||
data.shift = shifts.find(shift => shift.id === shiftId);
|
||||
@ -816,6 +822,7 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
|
||||
${bgAndBorderColorClass} ${selectedBorderClass} ${activeOpacityClass}
|
||||
${pub.currentMonthAssignments >= pub.desiredShiftsPerMonth ? 'text-gray-400' : 'text-gray-800'}`}
|
||||
onDoubleClick={(handlePublisherModalOpen.bind(this, pub))}
|
||||
onClick={handleSelectedPublisher.bind(this, pub)}
|
||||
>
|
||||
<span className={`${pub.isAvailableForShift ? 'font-bold' : 'font-medium'} `}>
|
||||
{pub.firstName} {pub.lastName}
|
||||
@ -831,33 +838,8 @@ 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="push" title="push" className={`badge py-1 px-2 rounded-md text-xs bg-red-100`}
|
||||
onClick={async () => {
|
||||
await fetch('/api/notify', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
id: pub.id,
|
||||
message: "Тестово съобщение",
|
||||
title: "Това е тестово съобщение от https://sofia.mwitnessing.com",
|
||||
actions: [
|
||||
{ action: 'OK', title: 'OK', icon: '✅' },
|
||||
{ action: 'close', title: 'Затвори', icon: '❌' }
|
||||
]
|
||||
// actions: [
|
||||
// {
|
||||
// title: 'Open URL',
|
||||
// action: 'open_url',
|
||||
// icon: '/images/open-url.png'
|
||||
// },
|
||||
// {
|
||||
// title: 'Dismiss',
|
||||
// action: 'dismiss',
|
||||
// icon: '/images/dismiss.png'
|
||||
// }
|
||||
// ]
|
||||
})
|
||||
})
|
||||
if (selectedPublisher && selectedShiftId)
|
||||
addAssignment(selectedPublisher, selectedShiftId);
|
||||
}}
|
||||
>+</button>
|
||||
|
||||
@ -905,133 +887,6 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
|
||||
</>
|
||||
);
|
||||
|
||||
function PublisherShiftsModal({ publisher, shifts, onClose }) {
|
||||
const monthInfo = common.getMonthDatesInfo(new Date(value));
|
||||
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(value) <= shiftDate && shiftDate <= common.getEndOfWeek(value);
|
||||
});
|
||||
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/${modalPub.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/${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">
|
||||
<i className="fas fa-edit" />
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
function getColorForShift(shift) {
|
||||
const assignedCount = shift.assignedCount || 0; // Assuming each shift has an assignedCount property
|
||||
|
||||
Reference in New Issue
Block a user