HTWK/htwkalender-pwa
1
0
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git synced 2025-07-16 09:38:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

change occupation to useQuery

Browse Source
This commit is contained in:
Niclas Jost
2024-03-29 12:19:57 +01:00
parent 0ce0144ed9
commit fd0c98689d
1 changed files with 24 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/components/RoomOccupation.vue
View File

@ -3,13 +3,16 @@ import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import { computed, ComputedRef, inject, ref, Ref, watch } from "vue";
import { computed, ComputedRef, inject, ref, Ref } from "vue";
import { CalendarOptions, DatesSetArg, EventInput } from "@fullcalendar/core";
import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
import { useI18n } from "vue-i18n";
import allLocales from "@fullcalendar/core/locales-all";
import router from "@/router";
import { formatYearMonthDay } from "@/helpers/dates";
import { useQuery } from "@tanstack/vue-query";
import { watch } from "vue";
const { t } = useI18n({ useScope: "global" });
const props = defineProps({
@ -19,13 +22,6 @@ const props = defineProps({
},
});
type CalenderEvent = {
id: number;
start: string;
end: string;
showFree: boolean;
};
const date: Ref<Date> = ref(new Date());
// Set the selected date from the URL
@ -48,44 +44,33 @@ setDateFromQuery();
const currentDateFrom: Ref<string> = ref("");
const currentDateTo: Ref<string> = ref("");
const occupations: Ref<CalenderEvent[]> = ref([]);
const mobilePage = inject("mobilePage") as Ref<boolean>;
const selectedRoom = computed(() => props.room);
watch(selectedRoom, () => {
getOccupation();
const { data: occupations } = useQuery({
queryKey: ["roomOccupation", selectedRoom, currentDateFrom, currentDateTo],
queryFn: () =>
fetchEventsByRoomAndDuration(
selectedRoom.value,
currentDateFrom.value,
currentDateTo.value,
),
select: (data) =>
data.map((event, index) => ({
id: index,
start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
showFree: event.free,
})),
enabled: () => selectedRoom.value !== "" && currentDateFrom.value !== "",
staleTime: 5000000, // 500 seconds
});
const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
watch(occupations, () => fullCalendar.value?.getApi().refetchEvents());
async function getOccupation() {
if (selectedRoom.value === "") {
return;
}
fetchEventsByRoomAndDuration(
selectedRoom.value,
currentDateFrom.value,
currentDateTo.value,
)
.then((events) => {
occupations.value = events?.map((event, index) => {
return {
id: index,
start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
showFree: event.free,
};
});
})
.finally(() => {
fullCalendar.value?.getApi().refetchEvents();
})
.catch((error) => {
console.error(error);
});
}
const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
locales: allLocales,
@ -157,12 +142,12 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
date: formatYearMonthDay(endDate),
},
});
getOccupation();
},
events: function (
_info: unknown,
successCallback: (events: EventInput[]) => void,
) {
if (!occupations.value) return;
successCallback(
occupations.value.map((event) => {
return {