<script setup>
import { SessionUser } from "@/components/session/token/SessionUser.vue";
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 DepartmentNotificationsPhoneTable
  from "@/components/displays/department/notifications/departmentNotificationsPhoneTable.vue";
import DepartmentTimeBookingsTypesTable
  from "@/components/displays/department/timebookings/departmentTimeBookingsTypesTable.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(SessionUser.objects.department_time_bookings_types.meta.endpoint, false);
  setFilter("department", router.currentRoute.value.params.departmentId);
} else {
  setEndpoint(SessionUser.objects.department_time_bookings_types.meta.endpoint, true);
}

</script>

<template>
  <input @input="search($event.target.value)" class="input" type="text" :placeholder="'Søg efter ' + SessionUser.objects.department_time_bookings_types.meta.labels.single + '...'">
  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage" >
    <template #paginationColumns>
      <div class="column is-auto-fill"></div>
      <div class="column is-narrow">
        <label class="label">&nbsp</label>
        <div class="control">
          <button class="button is-info" @click="SessionUser.objects.department_time_bookings_types.showCreateObjectForm(() => loadList(), {department: parseInt(router.currentRoute.value.params.departmentId)})">
            <span class="icon is-small">
              <i class="fas fa-plus"></i>
            </span>
            <span>
              {{SessionUser.objects.global.language.add}} {{SessionUser.objects.department_time_bookings_types.meta.labels.single}}
            </span>
          </button>
        </div>
      </div>
    </template>
  </PaginationDisplay>
  <DepartmentTimeBookingsTypesTable :objects="list" :hide-columns="['id']" />
  <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">{{SessionUser.objects.global.language.reload}}</LoadButtonWhileAwait>
</template>

<style scoped>

</style>