From d3ade91b80af2e8b7b93c15428baa02109a3c3dc Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Tue, 28 May 2024 18:21:50 +0300
Subject: [PATCH] more responsive calendar UI

---
 components/calendar/ShiftComponent.tsx | 12 ++++++++-
 pages/cart/calendar/index.tsx          | 34 +++++++++++++++++++++-----
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/components/calendar/ShiftComponent.tsx b/components/calendar/ShiftComponent.tsx
index 9ce66a5..d937df3 100644
--- a/components/calendar/ShiftComponent.tsx
+++ b/components/calendar/ShiftComponent.tsx
@@ -9,7 +9,7 @@ const common = require('src/helpers/common');
 
 
 
-function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, allPublishersInfo }) {
+function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, allPublishersInfo, onAssignmentChange }) {
     const [isDeleted, setIsDeleted] = useState(false);
     const [assignments, setAssignments] = useState(shift.assignments);
     const [isModalOpen, setIsModalOpen] = useState(false);
@@ -59,7 +59,11 @@ function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, a
         try {
             console.log("Removing assignment with id:", id);
             await axiosInstance.delete("/api/data/assignments/" + id);
+            let assingmnt = assignments.find(ass => ass.id == id);
             setAssignments(prevAssignments => prevAssignments.filter(ass => ass.id !== id));
+            if (onAssignmentChange) {
+                onAssignmentChange(assingmnt.publisherId, 'remove');
+            }
         } catch (error) {
             console.error("Error removing assignment:", error);
         }
@@ -77,6 +81,12 @@ function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, a
             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;
+            //ToDo: see if we need to update in state
+            // publisher.currentWeekAssignments += 1;
+            // publisher.currentMonthAssignments += 1;
+            if (onAssignmentChange) {
+                onAssignmentChange(data.publisher.id, 'add')
+            }
             setAssignments(prevAssignments => [...prevAssignments, data]);
         } catch (error) {
             console.error("Error adding assignment:", error);
diff --git a/pages/cart/calendar/index.tsx b/pages/cart/calendar/index.tsx
index 0b40c34..461c88d 100644
--- a/pages/cart/calendar/index.tsx
+++ b/pages/cart/calendar/index.tsx
@@ -358,7 +358,7 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
 
     const addAssignment = async (publisher, shiftId) => {
         try {
-            console.log(`new assignment for publisher ${publisher.id} - ${publisher.firstName} ${publisher.lastName}`);
+            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 } },
@@ -367,6 +367,7 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
             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;
+            handleAssignmentChange(publisher.id, 'add');
         } catch (error) {
             console.error("Error adding assignment:", error);
         }
@@ -374,12 +375,25 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
     const removeAssignment = async (publisher, shiftId) => {
         try {
             const assignment = publisher.assignments.find(ass => ass.shift.id === shiftId);
-            console.log(`remove assignment for shift ${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')
         } catch (error) {
             console.error("Error removing assignment:", error);
         }
     }
+    function handleAssignmentChange(id, type) {
+        // Handle assignment change logic here
+        let pub = availablePubs.find(pub => pub.id === id)
+        pub.currentMonthAssignments += type === 'add' ? 1 : -1;
+        pub.currentWeekAssignments += type === 'add' ? 1 : -1;
+        //store in state
+        setAvailablePubs([...availablePubs]);
+
+    }
 
     // ----------------------------------------------------------
     // button handlers
@@ -558,6 +572,7 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
         await axiosInstance.get(`/api/?action=copyOldAvailabilities&date=${common.getISODateOnly(value)}`);
     }
 
+
     async function handleCreateNewShift(event: MouseEvent<HTMLButtonElement, MouseEvent>): Promise<void> {
         //get last shift end time
         let lastShift = shifts.sort((a, b) => new Date(b.endTime).getTime() - new Date(a.endTime).getTime())[0];
@@ -807,12 +822,19 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
 
                         {/* Shift list section */}
                         <div className="flex-grow mx-5">
+
                             <div className="flex-col" id="shiftlist">
                                 {shifts.map((shift, index) => (
-                                    <ShiftComponent key={index} shift={shift}
-                                        onShiftSelect={handleShiftSelection} isSelected={shift.id == selectedShiftId}
-                                        onPublisherSelect={handleSelectedPublisher} showAllAuto={true}
-                                        allPublishersInfo={availablePubs} />
+                                    <ShiftComponent
+                                        key={index}
+                                        shift={shift}
+                                        onShiftSelect={handleShiftSelection}
+                                        isSelected={shift.id == selectedShiftId}
+                                        onPublisherSelect={handleSelectedPublisher}
+                                        onAssignmentChange={handleAssignmentChange}
+                                        showAllAuto={true}
+                                        allPublishersInfo={availablePubs}
+                                    />
                                 ))}
                             </div>
                             <button