more responsive week popup ui
This commit is contained in:
@ -70,6 +70,61 @@ const PublisherShiftsModal = ({ publisher, _shifts, onClose, date, onAssignmentC
|
||||
};
|
||||
}, [onClose]); // Include onClose in the dependency array
|
||||
|
||||
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');
|
||||
|
||||
setAssignments(prevAssignments => [...prevAssignments, data]);
|
||||
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)
|
||||
// Update local state
|
||||
setAssignments(prevAssignments => prevAssignments.filter(a => a.id !== assignment.id));
|
||||
|
||||
//
|
||||
// handleAssignmentChange(publisher.id, 'remove')
|
||||
if (onAssignmentChange) {
|
||||
onAssignmentChange(publisher.id, 'remove')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error removing assignment:", error);
|
||||
}
|
||||
}
|
||||
|
||||
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">
|
||||
@ -98,24 +153,23 @@ const PublisherShiftsModal = ({ publisher, _shifts, onClose, date, onAssignmentC
|
||||
>
|
||||
{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"
|
||||
{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`}
|
||||
>
|
||||
добави
|
||||
</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"
|
||||
>
|
||||
махни
|
||||
{assignmentExists ? 'махни' : 'добави'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -140,62 +194,10 @@ const PublisherShiftsModal = ({ publisher, _shifts, onClose, date, onAssignmentC
|
||||
</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');
|
||||
|
||||
setAssignments(prevAssignments => [...prevAssignments, data]);
|
||||
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)
|
||||
// Update local state
|
||||
setAssignments(prevAssignments => prevAssignments.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;
|
Reference in New Issue
Block a user