fix availability ui bug

components/availability/AvailabilityForm.js

@@ -1,5 +1,5 @@
 import axiosInstance from '../../src/axiosSecure';
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, use } from "react";
 import toast from "react-hot-toast";
 import { useRouter } from "next/router";
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
@@ -26,9 +26,6 @@ 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));
-  const [doRepeat, setDoRepeat] = useState(false);
-  const [repeatFrequency, setRepeatFrequency] = useState(1);
-  const [repeatUntil, setRepeatUntil] = useState(null);
   const [canUpdate, setCanUpdate] = useState(true);
 
   const [timeSlots, setTimeSlots] = useState([]);
@@ -46,6 +43,10 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
     isLast: false,
   }]);
 
+  const [doRepeat, setDoRepeat] = useState(existingItems && existingItems.length > 0 ? existingItems[0].repeatWeekly : false);
+  const [repeatFrequency, setRepeatFrequency] = useState(1);
+  const [repeatUntil, setRepeatUntil] = useState(null);
+
   const [isInline, setInline] = useState(inline || false);
   const [config, setConfig] = useState(null);
   useEffect(() => {
@@ -69,6 +70,7 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
         const response = await axiosInstance.get(`/api/data/availabilities/${id}`);
         setAvailabilities([response.data]);
         setEditMode(true);
+        setDoRepeat(response.data.repeatWeekly);
       } catch (error) {
         console.error(error);
         toast.error("Error fetching availability data.");
@@ -202,10 +204,24 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
     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 : availability.startTime.getDate();
-    availability.endDate = doRepeat ? repeatUntil : null;
+    delete availability.weekOfMonth;
+    if (doRepeat) {
+      availability.repeatWeekly = true;
+      availability.dayOfMonth = null;
+      availability.weekOfMonth = 0;
+      availability.endDate = repeatUntil;
+    } else {
+      availability.repeatWeekly = false;
+      availability.dayOfMonth = availability.startTime.getDate();
+      availability.endDate = null;
+    }
+
     availability.dateOfEntry = new Date();
+    if (availability.parentAvailabilityId) {
+      availability.parentAvailability = { connect: { id: parentAvailabilityId } };
+    }
+    delete availability.parentAvailabilityId;
+
     return availability;
   }
 
@@ -288,8 +304,7 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
 
 
   const TimeSlotCheckboxes = ({ slots, setSlots, items: [] }) => {
-    const [allDay, setAllDay] = useState(false);
-
+    const [allDay, setAllDay] = useState(slots.every(slot => slot.isChecked));
     const handleAllDayChange = (e) => {
       const updatedSlots = slots.map(slot => ({
         ...slot,
@@ -297,7 +312,9 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
       }));
       setSlots(updatedSlots);
       setAllDay(e.target.checked)
-      setCanUpdate(true);
+      // setCanUpdate(slots.some(slot => slot.isChecked));
+      const anyChecked = updatedSlots.some(slot => slot.isChecked);
+      setCanUpdate(anyChecked);
       console.log("handleAllDayChange: allDay: " + allDay + ", updatedSlots: " + JSON.stringify(updatedSlots));
     };
     useEffect(() => {
@@ -352,9 +369,9 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
 
           return (
             <div key={index} className="mb-1 flex justify-between items-center">
-              <label className={`checkbox-container flex items-center mb-2 ${allDay ? 'opacity-50' : ''}`}>
+              <label className={`checkbox-container flex items-center mb-2 `}>
                 <input type="checkbox" checked={slot.isChecked || allDay} onChange={() => handleSlotCheckedChange(slot)}
-                  disabled={allDay}
+
                   className="form-checkbox h-5 w-5 text-gray-600 mx-2" />
                 {slotLabel}
                 <span className="checkmark"></span>
@@ -362,11 +379,11 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
 
               {/* Conditionally render transport checkbox based on slot being first or last */}
               {slot.transportNeeded && (
-                <label className={`checkbox-container flex items-center ${(!slot.isChecked || allDay) ? 'opacity-50' : ''}`}>
+                <label className={`checkbox-container flex items-center ${(!slot.isChecked) ? 'opacity-50' : ''}`}>
                   <input type="checkbox"
                     className="form-checkbox h-5 w-5 text-gray-600 mx-2"
                     checked={slot.isWithTransport}
-                    disabled={!slot.isChecked || allDay}
+                    disabled={!slot.isChecked}
                     onChange={() => handleTransportChange(slot)} />
                   {slot.isFirst ? 'Вземане' : 'Връщане'}
                   <span className="checkmark"></span>
@@ -395,12 +412,6 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
           <div className="mb-2">
             <DatePicker label="Изберете дата" value={day} onChange={(value) => setDay({ value })} />
           </div>
-          <div>
-            <div className="mb-1">
-              {/* Time slot checkboxes */}
-              <TimeSlotCheckboxes slots={timeSlots} setSlots={setTimeSlots} items={availabilities} />
-            </div>
-          </div>
 
           <div className="mb-2">
             <label className="checkbox-container">
@@ -445,6 +456,13 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
               <DatePicker label="До" value={repeatUntil} onChange={(value) => setRepeatUntil({ value })} />
             </div>
           )}
+          <div>
+            <div className="mb-1">
+              {/* Time slot checkboxes */}
+              <TimeSlotCheckboxes slots={timeSlots} setSlots={setTimeSlots} items={availabilities} />
+            </div>
+          </div>
+
         </LocalizationProvider>
 
         <div className="flex justify-between items-center flex-nowrap w-full p-1">

components/availability/AvailabilityFormDatePicker.js

@@ -165,7 +165,6 @@ export default function AvailabilityForm({ publisherId, existingItem, inline, on
     e.preventDefault();
     try {
 
-
       if (!availability.name) {
         // availability.name = "От календара";
         availability.name = common.getTimeFomatted(availability.startTime) + "-" + common.getTimeFomatted(availability.endTime);
@@ -174,12 +173,13 @@ export default function AvailabilityForm({ publisherId, existingItem, inline, on
       availability.dayofweek = common.getDayOfWeekNameEnEnum(availability.startTime);
       if (availability.repeatWeekly) {
         availability.dayOfMonth = null;
+        availability.weekOfMonth = 0; //weekly recurrance - no need for week of month. special value 0
       } else {
         availability.endDate = null;
         availability.dayOfMonth = availability.startTime.getDate();
       }
 
-      delete availability.date; //remove date from availability as it is not part of the db model
+      delete availability.date; //remove date from availability as it is not part of the db model. we store the info in startDate and endDate
       // ---------------------- CB UI --------------
       if (config.checkboxUI.enabled) {
         const selectedSlots = timeSlots.filter(slot => slot.isChecked);