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

fix calendar UI bug

Browse Source
This commit is contained in:
Dobromir Popov
2024-04-20 20:54:00 +03:00
parent 22618db847
commit 74fabd8f1d
2 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/availability/AvailabilityForm.js
View File

@ -27,6 +27,7 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
indexUrl: "/cart/availabilities"
};
const id = parseInt(router.query.id);
//coalsce existingItems to empty array
existingItems = existingItems || [];
@ -76,7 +77,6 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
const fetchItemFromDB = async () => {
const id = parseInt(router.query.id);
if (existingItems.length == 0 && id) {
try {
const response = await axiosInstance.get(`/api/data/availabilities/${id}`);

32
components/calendar/avcalendar.tsx
View File

@ -46,11 +46,13 @@ const messages = {
const AvCalendar = ({ publisherId, events, selectedDate }) => {
const [date, setDate] = useState(new Date());
const [currentView, setCurrentView] = useState('month');
//ToDo: see if we can optimize this
const [evts, setEvents] = useState(events); // Existing events
const [displayedEvents, setDisplayedEvents] = useState(evts); // Events to display in the calendar
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedEvents, setSelectedEvents] = useState([]);
const [displayedEvents, setDisplayedEvents] = useState(evts); // Events to display in the calendar
const [currentView, setCurrentView] = useState('month');
const [isModalOpen, setIsModalOpen] = useState(false);
const [visibleRange, setVisibleRange] = useState(() => {
const start = new Date();
start.setDate(1); // Set to the first day of the current month
@ -170,20 +172,19 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
};
const filterEvents = (evts, publisherId, startdate) => {
setDate(startdate); // Assuming setDate is a function that sets some state or context
const filterHHmm = new Date(startdate).getHours() * 100 + new Date(startdate).getMinutes();
const filterDayOfWeek = startdate.getDay(); // Sunday - 0, Monday - 1, ..., Saturday - 6
// Filter events based on the publisher ID and the start date/time
const existingEvents = evts?.filter(event => {
// Ensure the event belongs to the specified publisher
const isPublisherMatch = (event.publisher?.id || event.publisherId) === publisherId;
const eventDayOfWeek = event.startTime.getDay();
let isDateMatch;
const eventDate = new Date(event.startTime);
if (event.repeatWeekly && event.date) {
// Compare only the time part
let evenStarttHHmm = eventDate.getHours() * 100 + eventDate.getMinutes();
let eventEndHHmm = eventDate.getHours() * 100 + eventDate.getMinutes();
isDateMatch = filterHHmm >= evenStarttHHmm && filterHHmm <= eventEndHHmm;
if (event.repeatWeekly && filterDayOfWeek === eventDayOfWeek) {
isDateMatch = true;
} else if (event.date) {
// Compare the full date. issameday is not working. do it manually
isDateMatch = eventDate.setHours(0, 0, 0, 0) === new Date(startdate).setHours(0, 0, 0, 0);
@ -234,9 +235,9 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
//ToDo: properly fix this. filterEvents does not return the expcted results
let existingEvents = filterEvents(evts, publisherId, startdate);
// if existingEvents is empty - create new with the selected range
if (existingEvents.length === 0) {
existingEvents = [{ startTime: start, endTime: end }];
}
// if (existingEvents.length === 0) {
// existingEvents = [{ startTime: start, endTime: end }];
// }
console.log("handleSelect: " + existingEvents);
setSelectedEvents(existingEvents);
setIsModalOpen(true);
@ -244,7 +245,12 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
const handleEventClick = (event) => {
if (event.type === "assignment") return;
handleSelect({ start: event.startTime, end: event.endTime });
//select the whole day
let start = new Date(event.startTime);
start.setHours(0, 0, 0, 0);
let end = new Date(event.startTime);
end.setHours(23, 59, 59, 999);
handleSelect({ mode: 'select', start: start, end: end });
};
const handleDialogClose = async (dialogEvent) => {