AvForm is now stable and working as expected

components/availability/AvailabilityForm.js

@@ -25,7 +25,7 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
 
   const [editMode, setEditMode] = useState(existingItems.length > 0);
   const [publisher, setPublisher] = useState({ id: publisherId });
-  const [day, setDay] = useState(new Date(date || new Date()));
+  const [day, setDay] = useState(new Date(date));
   const [doRepeat, setDoRepeat] = useState(false);
   const [repeatFrequency, setRepeatFrequency] = useState(1);
   const [repeatUntil, setRepeatUntil] = useState(null);
@@ -37,8 +37,8 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
     name: "Нов",
     dayofweek: "Monday",
     dayOfMonth: null,
-    startTime: "08:00",
+    // startTime: "08:00",
-    endTime: "20:00",
+    // endTime: "20:00",
     isactive: true,
     repeatWeekly: false,
     endDate: null,
@@ -110,8 +110,15 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
         console.log("Updating existing availabilities");
         const updatedAvailabilities = await Promise.all(availabilities.map(async (availability, index) => {
           const group = groupedTimeSlots[index];
+          const id = availability.id;
           const updatedAvailability = updateAvailabilityFromGroup(availability, group);
-          await axiosInstance.put(`${urls.apiUrl}${availability.id}`, updatedAvailability);
+          delete updatedAvailability.id;
+          delete updatedAvailability.type;
+          delete updatedAvailability.publisherId;
+          delete updatedAvailability.title;
+          delete updatedAvailability.date;
+          updatedAvailability.publisher = { connect: { id: publisher.id } };
+          await axiosInstance.put(`${urls.apiUrl}${id}`, updatedAvailability);
           return updatedAvailability;
         }));
 
@@ -168,10 +175,12 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
   // const firstSlotWithTransport = timeSlots[0].checked && timeSlots[0]?.isWithTransport;
   // const lastSlotWithTransport = timeSlots[timeSlots.length - 1].checked && timeSlots[timeSlots.length - 1]?.isWithTransport;
   function createAvailabilityFromGroup(group) {
-    const startTime = new Date(day);
+    let startTime = new Date(day);
-    startTime.setTime(group[0].startTime)
+    startTime.setHours(group[0].startTime.getHours(), group[0].startTime.getMinutes(), group[0].startTime.getSeconds(), 0);
-    const endTime = new Date(day);
+
-    endTime.setTime(group[group.length - 1].endTime);
+    let endTime = new Date(day);
+    endTime.setHours(group[group.length - 1].endTime.getHours(), group[group.length - 1].endTime.getMinutes(), group[group.length - 1].endTime.getSeconds(), 0);
+
 
     return {
       name: common.getTimeFomatted(startTime) + "-" + common.getTimeFomatted(endTime),
@@ -188,17 +197,16 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
   }
 
   function updateAvailabilityFromGroup(availability, group) {
-    availability.name = common.getTimeFomatted(startTime) + "-" + common.getTimeFomatted(endTime);
     availability.startTime.setTime(group[0].startTime);
     availability.endTime.setTime(group[group.length - 1].endTime);
+    availability.name = common.getTimeFomatted(availability.startTime) + "-" + common.getTimeFomatted(availability.endTime);
 
     availability.isWithTransportIn = group[0].isFirst && timeSlots[0].isWithTransport;
     availability.isWithTransportOut = group[group.length - 1].isLast && timeSlots[timeSlots.length - 1].isWithTransport;
 
     availability.repeatWeekly = doRepeat;
-    availability.dayOfMonth = doRepeat ? null : group.startTime.getDate();
+    availability.dayOfMonth = doRepeat ? null : availability.startTime.getDate();
     availability.endDate = doRepeat ? repeatUntil : null;
-
     return availability;
   }
 
@@ -242,28 +250,25 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
 
   // console.log("AvailabilityForm: publisherId: " + publisher.id + ", id: " + availabilit .id, ", inline: " + isInline);
 
-
   const generateTimeSlots = (start, end, increment, items) => {
     const slots = [];
-    const baseDate = new Date(day || new Date());
+    // Initialize baseDate at the start of the day
-    baseDate.setHours(start, 0, 0, 0); // Initialize base date with start hour
+    const baseDate = new Date(items?.startTime || day);
+    baseDate.setHours(start, 0, 0, 0);
     let currentTime = baseDate.getTime();
 
-    // Assuming end time is the same for all items, otherwise, this logic needs adjustment
+    const endTime = new Date(baseDate).setHours(end, 0, 0, 0);
-    const endDate = new Date(day || new Date());
-    endDate.setHours(end, 0, 0, 0);
-    const endTime = endDate.getTime();
 
     while (currentTime < endTime) {
       let slotStart = new Date(currentTime);
-      let slotEnd = new Date(currentTime + increment * 60 * 60 * 1000);
+      let slotEnd = new Date(currentTime + increment * 60000); // increment is in minutes
+
+      const isChecked = items.some(item =>
+        item.startTime && item.endTime &&
+        (slotStart.getHours() * 60 + slotStart.getMinutes()) < (item.endTime.getHours() * 60 + item.endTime.getMinutes()) &&
+        (slotEnd.getHours() * 60 + slotEnd.getMinutes()) > (item.startTime.getHours() * 60 + item.startTime.getMinutes())
+      );
 
-      // Determine if the slot is checked based on overlapping with any item time ranges
-      const isChecked = items.some(item => {
-        const itemStartTime = new Date(item.startTime);
-        const itemEndTime = new Date(item.endTime);
-        return slotStart < itemEndTime && slotEnd > itemStartTime;
-      });
 
       slots.push({
         startTime: slotStart,
@@ -271,21 +276,21 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
         isChecked: isChecked,
       });
 
-      currentTime += increment * 60 * 60 * 1000;
+      currentTime += increment * 60000; // Increment in milliseconds (minutes to milliseconds)
     }
 
-    // Assign 'isFirst' and 'isLast' based on the slot's position in the array
+    // Optional: Add isFirst, isLast, and isWithTransport properties
     if (slots.length > 0) {
       slots[0].isFirst = true;
       slots[slots.length - 1].isLast = true;
-      // Assuming isWithTransport flags are global settings, not unique per slot
+      slots[0].isWithTransport = items[0].isWithTransportIn;
-      slots[0].isWithTransport = items[0]?.isWithTransportIn;
+      slots[slots.length - 1].isWithTransport = items[items.length - 1].isWithTransportOut;
-      slots[slots.length - 1].isWithTransport = items[items.length - 1]?.isWithTransportOut;
     }
 
     return slots;
   };
 
+
   const TimeSlotCheckboxes = ({ slots, setSlots, items: [] }) => {
     const [allDay, setAllDay] = useState(false);
 
@@ -296,6 +301,7 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
       }));
       setSlots(updatedSlots);
       setAllDay(e.target.checked)
+      setCanUpdate(true);
       console.log("handleAllDayChange: allDay: " + allDay + ", updatedSlots: " + JSON.stringify(updatedSlots));
     };
     useEffect(() => {
@@ -344,7 +350,7 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
           <span className="checkmark"></span>
         </label>
         {slots.map((slot, index) => {
-          const slotLabel = `${slot.startTime.getHours()}:${slot.startTime.getMinutes() === 0 ? '00' : slot.startTime.getMinutes()} до ${slot.endTime.getHours()}:${slot.endTime.getMinutes() === 0 ? '00' : slot.endTime.getMinutes()}`;
+          const slotLabel = `${common.getTimeFomatted(slot.startTime)} до ${common.getTimeFomatted(slot.endTime)}`;
           slot.transportNeeded = slot.isFirst || slot.isLast;
           // Determine if the current slot is the first or the last
 
@@ -378,7 +384,7 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
   };
 
   useEffect(() => {
-    setTimeSlots(generateTimeSlots(9, 18, 1.5, availabilities));
+    setTimeSlots(generateTimeSlots(9, 18, 90, availabilities));
   }, []);
 
   return (

components/calendar/avcalendar.tsx

@@ -56,7 +56,12 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
 
     // Update internal state when `events` prop changes
     useEffect(() => {
-        setEvents(events);
+        const updatedEvents = events.map(event => ({
+            ...event,
+            date: new Date(event.startTime).setHours(0, 0, 0, 0)
+        }));
+
+        setEvents(updatedEvents);
         // Call any function here to process and set displayedEvents
         // based on the new events, if necessary
     }, [events]);
@@ -181,8 +186,13 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
         setDate(start);
 
         // get exising events for the selected date
-        const existingEvents = evts?.filter(event => event.publisherId === publisherId && event.startTime === start.toDateString());
+        const existingEvents = evts?.filter(event => (event.publisher?.id || event.publisherId) === publisherId && new Date(event.date).toDateString() === start.toDateString());
-
+        // const existingEvents = evts?.filter(event => {
+        //     return event.publisherId === publisherId &&
+        //         new Date(event.startTime).getFullYear() === start.getFullYear() &&
+        //         new Date(event.startTime).getMonth() === start.getMonth() &&
+        //         new Date(event.startTime).getDate() === start.getDate();
+        // });
         console.log("handleSelect: " + existingEvents);
         setSelectedEvents(existingEvents);
 
@@ -203,23 +213,24 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
 
     const handleEventClick = (event) => {
         if (event.type === "assignment") return;
+        handleSelect({ start: event.startTime, end: event.endTime });
         // Handle event click
-        const eventForEditing = {
+        // const eventForEditing = {
-            ...event,
+        //     ...event,
-            startTime: new Date(event.startTime),
+        //     startTime: new Date(event.startTime),
-            endTime: new Date(event.endTime),
+        //     endTime: new Date(event.endTime),
-            publisherId: event.publisherId || event.publisher?.connect?.id,
+        //     publisherId: event.publisherId || event.publisher?.connect?.id,
-            repeatWeekly: event.repeatWeekly || false,
+        //     repeatWeekly: event.repeatWeekly || false,
-        };
+        // };
-        //strip title, start, end and allDay properties
+        // //strip title, start, end and allDay properties
-        delete eventForEditing.title;
+        // delete eventForEditing.title;
-        delete eventForEditing.start;
+        // delete eventForEditing.start;
-        delete eventForEditing.end;
+        // delete eventForEditing.end;
-        delete eventForEditing.type;
+        // delete eventForEditing.type;
-        delete eventForEditing.publisher
+        // delete eventForEditing.publisher
-        console.log("handleEventClick: " + eventForEditing);
+        // console.log("handleEventClick: " + eventForEditing);
-        setSelectedEvents([eventForEditing]);
+        // setSelectedEvents([eventForEditing]);
-        setIsModalOpen(true);
+        // setIsModalOpen(true);
 
     };