fix availability ui bug
This commit is contained in:
Dobromir Popov
@ -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">
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -273,7 +273,12 @@ export default async function handler(req, res) {
|
||||
type: AvailabilityType.Monthly,
|
||||
isFromPreviousMonth: true,
|
||||
name: avail.name || "старо предпочитание",
|
||||
parentAvailabilityId: avail.id
|
||||
// parentAvailabilityId: avail.id
|
||||
parentAvailability: {
|
||||
connect: {
|
||||
id: avail.id
|
||||
}
|
||||
}
|
||||
}
|
||||
await prisma.availability.create({ data: data });
|
||||
|
||||
@ -592,6 +597,9 @@ export async function filterPublishers(selectFields, searchText, filterDate, fet
|
||||
dayofweek: dayOfWeekEnum,
|
||||
// ToDo: and weekOfMonth
|
||||
//startTime: { gte: currentMonthStart },
|
||||
},
|
||||
{
|
||||
repeatWeekly: true,
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user