Patrick Toal
b2420b270c
All checks were successful
Build BAB Application Deployment Artifact / build (push) Successful in 2m28s
87 lines
2.3 KiB
Vue
87 lines
2.3 KiB
Vue
<template>
|
|
<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="!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 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 pastUserReservations"
|
|
:key="reservation.$id">
|
|
<ReservationCardComponent :modelValue="reservation" />
|
|
</div>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { useReservationStore } from 'src/stores/reservation';
|
|
import ReservationCardComponent from 'src/components/scheduling/ReservationCardComponent.vue';
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const { futureUserReservations, pastUserReservations } = useReservationStore();
|
|
|
|
onMounted(() => useReservationStore().fetchUserReservations());
|
|
|
|
const tab = ref('upcoming');
|
|
|
|
// const showMarker = (
|
|
// index: number,
|
|
// items: Reservation[] | undefined
|
|
// ): boolean => {
|
|
// if (!items) return false;
|
|
|
|
// const currentItemDate = new Date(items[index].start);
|
|
// const nextItemDate = index > 0 ? new Date(items[index - 1].start) : null;
|
|
|
|
// // Show marker if current item is past and the next item is future or vice versa
|
|
// return (
|
|
// isPast(currentItemDate) && (nextItemDate === null || !isPast(nextItemDate))
|
|
// );
|
|
// };
|
|
</script>
|