popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AvForm is now stable and working as expected

Browse Source
This commit is contained in:
Dobromir Popov
2024-03-03 04:06:45 +02:00
parent 193dd91605
commit d9625f624f
2 changed files with 68 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
components/availability/AvailabilityForm.js
View File

@ -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",
endTime: "20:00",
// startTime: "08: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);
startTime.setTime(group[0].startTime)
const endTime = new Date(day);
endTime.setTime(group[group.length - 1].endTime);
let startTime = new Date(day);
startTime.setHours(group[0].startTime.getHours(), group[0].startTime.getMinutes(), group[0].startTime.getSeconds(), 0);
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());
baseDate.setHours(start, 0, 0, 0); // Initialize base date with start hour
// Initialize baseDate at the start of the day
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 endDate = new Date(day || new Date());
endDate.setHours(end, 0, 0, 0);
const endTime = endDate.getTime();
const endTime = new Date(baseDate).setHours(end, 0, 0, 0);
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[slots.length - 1].isWithTransport = items[items.length - 1]?.isWithTransportOut;
slots[0].isWithTransport = items[0].isWithTransportIn;
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 (

49
components/calendar/avcalendar.tsx
View File

@ -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 = {
...event,
startTime: new Date(event.startTime),
endTime: new Date(event.endTime),
publisherId: event.publisherId || event.publisher?.connect?.id,
repeatWeekly: event.repeatWeekly || false,
};
//strip title, start, end and allDay properties
delete eventForEditing.title;
delete eventForEditing.start;
delete eventForEditing.end;
delete eventForEditing.type;
delete eventForEditing.publisher
console.log("handleEventClick: " + eventForEditing);
setSelectedEvents([eventForEditing]);
setIsModalOpen(true);
// const eventForEditing = {
// ...event,
// startTime: new Date(event.startTime),
// endTime: new Date(event.endTime),
// publisherId: event.publisherId || event.publisher?.connect?.id,
// repeatWeekly: event.repeatWeekly || false,
// };
// //strip title, start, end and allDay properties
// delete eventForEditing.title;
// delete eventForEditing.start;
// delete eventForEditing.end;
// delete eventForEditing.type;
// delete eventForEditing.publisher
// console.log("handleEventClick: " + eventForEditing);
// setSelectedEvents([eventForEditing]);
// setIsModalOpen(true);
};