more responsive week popup ui
This commit is contained in:
Dobromir Popov
@ -70,78 +70,6 @@ const PublisherShiftsModal = ({ publisher, _shifts, onClose, date, onAssignmentC
|
|||||||
};
|
};
|
||||||
}, [onClose]); // Include onClose in the dependency array
|
}, [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) {
|
function getColorForShift(shift) {
|
||||||
const assignedCount = shift.assignedCount || 0; // Assuming each shift has an assignedCount property
|
const assignedCount = shift.assignedCount || 0; // Assuming each shift has an assignedCount property
|
||||||
switch (assignedCount) {
|
switch (assignedCount) {
|
||||||
@ -197,5 +125,79 @@ const removeAssignment = async (publisher, shiftId) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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}
|
||||||
|
|
||||||
|
{shift.isAvailable && (
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
if (assignmentExists) {
|
||||||
|
removeAssignment(publisher, shift.id);
|
||||||
|
} else {
|
||||||
|
addAssignment(publisher, shift.id);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={`mt-2 ${assignmentExists ? 'bg-red-500 hover:bg-red-600 active:bg-red-700' : 'bg-green-500 hover:bg-green-600 active:bg-green-700'} text-white p-1 rounded focus:outline-none`}
|
||||||
|
>
|
||||||
|
{assignmentExists ? 'махни' : 'добави'}
|
||||||
|
</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 >
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default PublisherShiftsModal;
|
export default PublisherShiftsModal;
|
||||||
Reference in New Issue
Block a user