feat:#30 reactive URL parameters RoomOccupation

frontend/src/view/FreeRooms.vue

@@ -134,6 +134,7 @@ import { requestFreeRooms } from "@/api/requestFreeRooms.ts";
 import { FilterMatchMode } from "primevue/api";
 import { padStart } from "@fullcalendar/core/internal";
 import router from "@/router";
+import { formatYearMonthDay } from "@/helpers/dates";
 
 const mobilePage = inject("mobilePage") as Ref<boolean>;
 const filters = ref({
@@ -146,7 +147,7 @@ function occupationRoute(room: string): void {
     name: "room-schedule",
     query: {
       room: room,
-      date: date.value.toISOString().split("T")[0].replace(/-/g, ""),
+      date: formatYearMonthDay(date.value),
     },
   });
 }

frontend/src/view/RoomFinder.vue

@@ -1,53 +1,67 @@
 <script lang="ts" setup>
-import { Ref, ref } from "vue";
+import { Ref, computed, ref, watch } from "vue";
 import { fetchRoom } from "../api/fetchRoom.ts";
 import DynamicPage from "./DynamicPage.vue";
 import RoomOccupation from "../components/RoomOccupation.vue";
 import { computedAsync } from "@vueuse/core";
+import router from "@/router";
 
-function isRoomAvailable(room: string, rooms: { name: string }[]) {
+type Room = {
+  name: string;
+};
+
+const selectedRoom: Ref<Room> = ref({ name: "" });
+
+// Watch for changes in URL parameter
+router.afterEach(async (to) => {
+  const room = to.query.room;
+  if (room && typeof room === "string") {
+    setRoomFromList(room, rooms.value);
+  }
+});
+
+const rooms = computedAsync<Set<string>>(async () => {
+  let rooms: Set<string> = new Set();
+  return await fetchRoom()
+    .then((data) => {
+      rooms = new Set(data);
+      return rooms;
+    })
+    .finally(() => {
+      const room = router.currentRoute.value.query.room;
+      if (room && typeof room === "string") {
+        // check if room is available in roomsList
+        setRoomFromList(room, rooms);
+      }
+    });
+}, new Set());
+
+const roomsList = computed(() => {
+  return Array.from(rooms.value).map((room) => {
+    return { name: room } as Room;
+  });
+});
+
+/**
+ * Set the room from the list of rooms
+ * @param room Name of the room
+ * @param rooms List of available rooms
+ */
+function setRoomFromList(room: string, rooms: Set<string>) {
   // wait for the roomsList to be available
-  const roomInList = rooms.some((r) => r.name === room);
+  const roomInList: boolean = rooms.has(room);
   if (roomInList) {
     selectedRoom.value.name = room;
   }
 }
 
-const selectedRoom: Ref<{ name: string }> = ref({ name: "" });
-
-// Get Query Parameters if available
-// room, date
-const urlParams = new URLSearchParams(window.location.search);
-const room = urlParams.get("room");
-
-const roomsList = computedAsync(async () => {
-  let rooms: { name: string }[] = [];
-  return await fetchRoom()
-    .then(
-      (data) =>
-        (rooms = data.map((room: string) => {
-          return { name: room };
-        })),
-    )
-    .finally(() => {
-      if (room) {
-        // check if room is available in roomsList
-        isRoomAvailable(room, rooms);
-      }
+watch(selectedRoom, (newRoom: Room) => {
+  if (newRoom.name !== "") {
+    router.push({
+      query: { ...router.currentRoute.value.query, room: newRoom.name },
     });
-}, []);
-
-const selectedDate: Ref<Date | undefined> = ref(undefined);
-
-// Set the selected date from the UR
-const date = urlParams.get("date");
-if (date) {
-  // date is in format like YYYYMMDD
-  const year = date.substring(0, 4);
-  const month = date.substring(4, 6);
-  const day = date.substring(6, 8);
-  selectedDate.value = new Date(`${year}-${month}-${day}`);
-}
+  }
+});
 </script>
 
 <template>
@@ -70,7 +84,7 @@ if (date) {
       />
     </template>
     <template #content>
-      <RoomOccupation :room="selectedRoom.name" :date="selectedDate" />
+      <RoomOccupation :room="selectedRoom.name" />
     </template>
   </DynamicPage>
 </template>