more responsive week popup ui

components/publisher/PublisherShiftsModal.js

@@ -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 && (
+                                        {shift.isAvailable && (
-                                            <button onClick={() => { addAssignment(publisher, shift.id); }}
+                                            <button
-                                                className="mt-2 bg-green-500 text-white p-1 rounded hover:bg-green-600 active:bg-green-700 focus:outline-none"
+                                                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>
-                                        )}
-                                        {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>
@@ -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;