refactor: everything to nuxt.js

app/components/scheduling/ReservationCardComponent.vue

@@ -0,0 +1,69 @@
+<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>