<script setup>
import { useRouter } from "vue-router";
import {
  isLoaded,
  isLoading,
  list,
  loadList,
  metaCurrentPage,
  metaItemsPerPage,
  metaTotalItems,
  setEndpoint,
  setMetaItemsPerPage,
  setPage,
  metaSearch,
  search,
  setFilter,
} from "@/components/pagination/paginatedList.vue";
import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";

import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
import BookingsTable from "@/components/displays/user/bookings/bookingsTable.vue";
const router = useRouter();

// If the departmentId is set, in the route, filter the orders by the departmentId
if (router.currentRoute.value.params.departmentId) {
  setEndpoint("/bookings", false);
  setFilter("department", router.currentRoute.value.params.departmentId);
} else {
  setEndpoint("/bookings", true);
}

</script>

<template>
  <input @input="search($event.target.value)" class="input" type="text" placeholder="Søg efter ordre" />
  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage" />
  <BookingsTable :bookings="list" />
  <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
  <LoadButtonWhileAwait class="is-dark" :isLoading="!isLoaded()" :loadFunction="loadList" icon="fas fa-sync-alt">Reload</LoadButtonWhileAwait>
</template>

<style scoped>

</style>