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" indexUrl: "/cart/availabilities"
}; };
const id = parseInt(router.query.id);
//coalsce existingItems to empty array //coalsce existingItems to empty array
existingItems = existingItems || []; existingItems = existingItems || [];
@ -76,7 +77,6 @@ export default function AvailabilityForm({ publisherId, existingItems, inline, o
const fetchItemFromDB = async () => { const fetchItemFromDB = async () => {
const id = parseInt(router.query.id);
if (existingItems.length == 0 && id) { if (existingItems.length == 0 && id) {
try { try {
const response = await axiosInstance.get(`/api/data/availabilities/${id}`); 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 AvCalendar = ({ publisherId, events, selectedDate }) => {
const [date, setDate] = useState(new Date()); 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 [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 [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 [visibleRange, setVisibleRange] = useState(() => {
const start = new Date(); const start = new Date();
start.setDate(1); // Set to the first day of the current month 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) => { const filterEvents = (evts, publisherId, startdate) => {
setDate(startdate); // Assuming setDate is a function that sets some state or context 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 // Filter events based on the publisher ID and the start date/time
const existingEvents = evts?.filter(event => { const existingEvents = evts?.filter(event => {
// Ensure the event belongs to the specified publisher // Ensure the event belongs to the specified publisher
const isPublisherMatch = (event.publisher?.id || event.publisherId) === publisherId; const isPublisherMatch = (event.publisher?.id || event.publisherId) === publisherId;
const eventDayOfWeek = event.startTime.getDay();
let isDateMatch; let isDateMatch;
const eventDate = new Date(event.startTime); const eventDate = new Date(event.startTime);
if (event.repeatWeekly && event.date) { if (event.repeatWeekly && filterDayOfWeek === eventDayOfWeek) {
// Compare only the time part isDateMatch = true;
let evenStarttHHmm = eventDate.getHours() * 100 + eventDate.getMinutes();
let eventEndHHmm = eventDate.getHours() * 100 + eventDate.getMinutes();
isDateMatch = filterHHmm >= evenStarttHHmm && filterHHmm <= eventEndHHmm;
} else if (event.date) { } else if (event.date) {
// Compare the full date. issameday is not working. do it manually // 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); 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 //ToDo: properly fix this. filterEvents does not return the expcted results
let existingEvents = filterEvents(evts, publisherId, startdate); let existingEvents = filterEvents(evts, publisherId, startdate);
// if existingEvents is empty - create new with the selected range // if existingEvents is empty - create new with the selected range
if (existingEvents.length === 0) { // if (existingEvents.length === 0) {
existingEvents = [{ startTime: start, endTime: end }]; // existingEvents = [{ startTime: start, endTime: end }];
} // }
console.log("handleSelect: " + existingEvents); console.log("handleSelect: " + existingEvents);
setSelectedEvents(existingEvents); setSelectedEvents(existingEvents);
setIsModalOpen(true); setIsModalOpen(true);
@ -244,7 +245,12 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
const handleEventClick = (event) => { const handleEventClick = (event) => {
if (event.type === "assignment") return; 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) => { const handleDialogClose = async (dialogEvent) => {