Minor UI tweaks

src/components/BoatReservationComponent.vue

@@ -5,7 +5,7 @@
       class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
       <q-card-section>
         <div class="text-h5 q-mt-none q-mb-xs">
-          {{ reservation?.value ? 'Modify Booking' : 'New Booking' }}
+          {{ reservation ? 'Modify Booking' : 'New Booking' }}
         </div>
         <div class="text-caption text-grey-8">for: {{ bookingName }}</div>
       </q-card-section>
@@ -98,11 +98,15 @@
         </q-item>
       </q-list>
       <q-card-actions align="right">
+        <q-btn
+          label="Delete"
+          color="negative"
+          v-if="reservation?.$id"
+          @click="onDelete" />
         <q-btn
           label="Reset"
           @click="onReset"
-          color="secondary"
-          size="md" />
+          color="secondary" />
         <q-btn
           label="Submit"
           @click="onSubmit"
@@ -112,7 +116,9 @@
     <q-dialog
       v-model="boatSelect"
       full-width>
-      <BoatScheduleTableComponent v-model="bookingForm.interval" />
+      <BoatScheduleTableComponent
+        :model-value="bookingForm.interval"
+        @update:model-value="updateInterval" />
     </q-dialog>
   </div>
 </template>
@@ -174,6 +180,11 @@ watch(reservation, (newReservation) => {
   }
 });
 
+const updateInterval = (interval: Interval) => {
+  bookingForm.value.interval = interval;
+  boatSelect.value = false;
+};
+
 const bookingDuration = computed((): { hours: number; minutes: number } => {
   if (bookingForm.value.interval?.start && bookingForm.value.interval?.end) {
     const start = new Date(bookingForm.value.interval.start).getTime();
@@ -195,6 +206,10 @@ const boat = computed((): Boat | null => {
   return boatStore.getBoatById(boatId);
 });
 
+const onDelete = () => {
+  reservationStore.deleteReservation(reservation.value?.id);
+};
+
 const onReset = () => {
   bookingForm.value.interval = null;
   bookingForm.value = reservation.value