117 lines
3.2 KiB
Vue
117 lines
3.2 KiB
Vue
<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 class="col-auto">
|
|
<q-btn
|
|
color="grey-7"
|
|
round
|
|
flat
|
|
icon="more_vert">
|
|
<q-menu
|
|
cover
|
|
auto-close>
|
|
<q-list>
|
|
<q-item clickable>
|
|
<q-item-section>remove card</q-item-section>
|
|
</q-item>
|
|
<q-item clickable>
|
|
<q-item-section>send feedback</q-item-section>
|
|
</q-item>
|
|
<q-item clickable>
|
|
<q-item-section>share</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</div> -->
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- <q-card-section>Some more information here...</q-card-section> -->
|
|
|
|
<q-separator />
|
|
|
|
<q-card-actions v-if="!isPast(reservation.end)">
|
|
<q-btn
|
|
flat
|
|
size="lg"
|
|
:to="{ name: 'edit-reservation', params: { id: 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>
|
|
<script setup lang="ts">
|
|
import { useBoatStore } from 'src/stores/boat';
|
|
import { useReservationStore } from 'src/stores/reservation';
|
|
import type { Reservation } from 'src/stores/schedule.types';
|
|
import { formatDate, isPast } from 'src/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>
|