htwkalender-pwa/frontend/src/view/RoomFinder.vue

<script lang="ts" setup>
import { Ref, ref } from "vue";
import { fetchRoom } from "../api/fetchRoom.ts";
import DynamicPage from "./DynamicPage.vue";
import RoomOccupation from "../components/RoomOccupation.vue";

const rooms = async () => {
  return await fetchRoom();
};

const roomsList: Ref<{ name: string }[]> = ref([]);
const selectedRoom: Ref<{ name: string }> = ref({ name: "" });

rooms().then(
  (data) =>
    (roomsList.value = data.map((room) => {
      return { name: room };
    })),
);
</script>

<template>
  <DynamicPage
    :hideContent="selectedRoom.name === ''"
    :headline="$t('roomFinderPage.headline')"
    :subTitle="$t('roomFinderPage.detail')"
    icon="pi pi-search"
  >
    <template #selection>
      <Dropdown
        v-model="selectedRoom"
        :options="roomsList"
        class="flex-1 m-0"
        filter
        option-label="name"
        :placeholder="$t('roomFinderPage.dropDownSelect')"
        :empty-message="$t('roomFinderPage.noRoomsAvailable')"
        :auto-filter-focus="true"
      />
    </template>
    <template #content>
      <RoomOccupation
        :room="selectedRoom.name"
      />
    </template>
  </DynamicPage>
</template>