56 lines
1.9 KiB
Vue
56 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { useReservationStore } from '~/stores/reservation';
|
|
import ReservationCardComponent from '~/components/scheduling/ReservationCardComponent.vue';
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const reservationStore = useReservationStore();
|
|
onMounted(() => reservationStore.fetchUserReservations());
|
|
|
|
const tab = ref('upcoming');
|
|
</script>
|
|
|
|
<template>
|
|
<q-page>
|
|
<q-tabs v-model="tab" inline-label class="text-primary">
|
|
<q-tab name="upcoming" icon="schedule" label="Upcoming" />
|
|
<q-tab name="past" icon="history" label="Past" />
|
|
</q-tabs>
|
|
<q-separator />
|
|
<q-tab-panels v-model="tab" animated>
|
|
<q-tab-panel name="upcoming" class="q-pa-none">
|
|
<q-card clas="q-ma-md" v-if="!reservationStore.futureUserReservations.length">
|
|
<q-card-section>
|
|
<div class="text-h6">You don't have any upcoming bookings!</div>
|
|
<div class="text-h8">Why don't you go make one?</div>
|
|
</q-card-section>
|
|
<q-card-actions>
|
|
<q-btn
|
|
color="primary"
|
|
icon="event"
|
|
:size="`1.25em`"
|
|
label="Book Now"
|
|
rounded
|
|
class="full-width"
|
|
:align="'left'"
|
|
to="/schedule/book" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
<div v-else>
|
|
<div
|
|
v-for="reservation in reservationStore.futureUserReservations"
|
|
:key="reservation.$id">
|
|
<ReservationCardComponent :modelValue="reservation" />
|
|
</div>
|
|
</div>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="past" class="q-pa-none">
|
|
<div
|
|
v-for="reservation in reservationStore.pastUserReservations"
|
|
:key="reservation.$id">
|
|
<ReservationCardComponent :modelValue="reservation" />
|
|
</div>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-page>
|
|
</template>
|