70 lines
2.2 KiB
Vue
70 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { useBoatStore } from '~/stores/boat';
|
|
import { useReservationStore } from '~/stores/reservation';
|
|
import type { Reservation } from '~/utils/schedule.types';
|
|
import { formatDate, isPast } from '~/utils/schedule';
|
|
import { ref } from 'vue';
|
|
|
|
const cancelDialog = ref(false);
|
|
const boatStore = useBoatStore();
|
|
const reservationStore = useReservationStore();
|
|
|
|
const reservation = defineModel<Reservation>({ required: true });
|
|
|
|
const cancelReservation = () => {
|
|
cancelDialog.value = true;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<q-card
|
|
bordered
|
|
:class="isPast(reservation.end) ? 'text-blue-grey-6' : ''"
|
|
class="q-ma-md">
|
|
<q-card-section>
|
|
<div class="row items-center no-wrap">
|
|
<div class="col">
|
|
<div class="text-h6">
|
|
{{ boatStore.getBoatById(reservation.resource)?.name }}
|
|
</div>
|
|
<div class="text-subtitle2">
|
|
<p>
|
|
Start: {{ formatDate(reservation.start) }}<br />
|
|
End: {{ formatDate(reservation.end) }}<br />
|
|
Type: {{ reservation.reason }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-actions v-if="!isPast(reservation.end)">
|
|
<q-btn flat size="lg" :to="`/schedule/edit/${reservation.$id}`">Modify</q-btn>
|
|
<q-btn flat size="lg" @click="cancelReservation()">Delete</q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
<q-dialog v-model="cancelDialog">
|
|
<q-card>
|
|
<q-card-section class="row items-center">
|
|
<q-avatar icon="warning" color="negative" text-color="white" />
|
|
<span class="q-ml-md">Warning!</span>
|
|
<p class="q-pt-md">
|
|
This will delete your reservation for
|
|
{{ boatStore.getBoatById(reservation?.resource)?.name }} on
|
|
{{ formatDate(reservation?.start) }}
|
|
</p>
|
|
</q-card-section>
|
|
<q-card-actions align="right">
|
|
<q-btn flat size="lg" label="Cancel" color="primary" v-close-popup />
|
|
<q-btn
|
|
flat
|
|
size="lg"
|
|
label="Delete"
|
|
color="negative"
|
|
@click="reservationStore.deleteReservation(reservation)"
|
|
v-close-popup />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|