Many improvements. Still no reactivity on List

src/components/BoatReservationComponent.vue

@@ -166,7 +166,7 @@ watch(reservation, (newReservation) => {
       interval: {
         start: newReservation.start,
         end: newReservation.end,
-        boatId: newReservation.resource,
+        resource: newReservation.resource,
       },
     };
     bookingForm.value = updatedReservation;
@@ -190,7 +190,7 @@ const bookingName = computed(() =>
 );
 
 const boat = computed((): Boat | null => {
-  const boatId = bookingForm.value.interval?.boatId;
+  const boatId = bookingForm.value.interval?.resource;
   console.log('Boat Lookup:', boatId);
   return boatStore.getBoatById(boatId);
 });
@@ -203,18 +203,18 @@ const onReset = () => {
         interval: {
           start: reservation.value.start,
           end: reservation.value.end,
-          boatId: reservation.value.resource,
+          resource: reservation.value.resource,
         },
       }
     : { ...newForm };
 };
 
-const onSubmit = () => {
+const onSubmit = async () => {
   const booking = bookingForm.value;
   if (
     !(
       booking.interval &&
-      booking.interval.boatId &&
+      booking.interval.resource &&
       booking.interval.start &&
       booking.interval.end &&
       auth.currentUser
@@ -224,7 +224,7 @@ const onSubmit = () => {
     return;
   }
   const reservation = <Reservation>{
-    resource: booking.interval.boatId,
+    resource: booking.interval.resource,
     start: booking.interval.start,
     end: booking.interval.end,
     user: auth.currentUser.$id,
@@ -232,15 +232,34 @@ const onSubmit = () => {
     reason: booking.reason,
     comment: booking.comment,
   };
-  // TODO: Fix this.  It will always look successful
-  reservationStore.createReservation(reservation); // Probably should pass the notify as a callback to the reservation creation.
-  $q.notify({
-    color: 'green-4',
+  const status = $q.notify({
+    color: 'secondary',
     textColor: 'white',
-    icon: 'cloud_done',
-    message: 'Submitted',
-    timeout: 3000,
+    message: 'Submitting Reservation',
+    spinner: true,
+    closeBtn: 'Dismiss',
+    position: 'top',
+    timeout: 0,
+    group: false,
   });
+  try {
+    const r = await reservationStore.createReservation(reservation);
+    status({
+      color: 'positive',
+      icon: 'cloud_done',
+      message: `Booking successful: ${
+        boatStore.getBoatById(r.resource)?.name
+      } at ${formatDate(r.start)}`,
+      spinner: false,
+    });
+  } catch (e) {
+    status({
+      color: 'negative',
+      icon: 'error',
+      spinner: false,
+      message: 'Failed to book!' + e,
+    });
+  }
   router.go(-1);
 };
 </script>