Fix update of timblock

src/pages/schedule/BoatReservationPage.vue

@@ -24,7 +24,7 @@
             Use the calendar to pick a date. Select an available boat and
             timeslot below.
           </q-banner>
-          <BoatScheduleTableComponent @updateBoatTime="updateBoat" />
+          <BoatScheduleTableComponent v-model="timeblock" />
 
           <q-banner
             rounded
@@ -79,11 +79,20 @@ import { useScheduleStore } from 'src/stores/schedule';
 import { Reservation, Timeblock } from 'src/stores/schedule.types';
 import BoatScheduleTableComponent from 'src/components/scheduling/boat/BoatScheduleTableComponent.vue';
 
+interface BookingForm {
+  bookingId: string;
+  name?: string;
+  boat?: Boat;
+  startDate?: string;
+  endDate?: string;
+}
+
 const auth = useAuthStore();
 const dateFormat = 'MMM D, YYYY h:mm A';
 const resourceView = ref(true);
 const scheduleStore = useScheduleStore();
-const bookingForm = reactive({
+const timeblock = ref<Timeblock>();
+const bookingForm = ref<BookingForm>({
   bookingId: scheduleStore.getNewId(),
   name: auth.currentUser?.name,
   boat: <Boat | undefined>undefined,
@@ -91,22 +100,21 @@ const bookingForm = reactive({
   endDate: date.formatDate(new Date(), dateFormat),
 });
 
-watch(bookingForm, (b, a) => {
-  const newRes = <Reservation>{
-    id: b.bookingId,
-    user: b.name,
-    resource: b.boat,
-    start: date.extractDate(b.startDate, dateFormat),
-    end: date.extractDate(b.endDate, dateFormat),
-    reservationDate: new Date(),
-    status: 'tentative',
-  };
-  //TODO: Turn this into a validator.
-  scheduleStore.isReservationOverlapped(newRes)
-    ? Dialog.create({ message: 'This booking overlaps another!' })
-    : scheduleStore.addOrCreateReservation(newRes);
+watch(timeblock, (tb_new) => {
+  console.log('Hi');
+  bookingForm.value.boat = useBoatStore().boats.find(
+    (b) => b.$id === tb_new?.boatId
+  );
+  bookingForm.value.startDate = date.formatDate(tb_new?.start, dateFormat);
+  bookingForm.value.endDate = date.formatDate(tb_new?.end, dateFormat);
+  console.log(tb_new);
 });
 
+// //TODO: Turn this into a validator.
+// scheduleStore.isReservationOverlapped(newRes)
+//   ? Dialog.create({ message: 'This booking overlaps another!' })
+//   : scheduleStore.addOrCreateReservation(newRes);
+
 const onReset = () => {
   // TODO
 };
@@ -115,27 +123,27 @@ const onSubmit = () => {
   // TODO
 };
 
-const updateBoat = (block: Timeblock) => {
-  bookingForm.boat = useBoatStore().boats.find((b) => b.$id === block.boatId);
-  bookingForm.startDate = date.formatDate(block.start, dateFormat);
-  bookingForm.endDate = date.formatDate(block.end, dateFormat);
-  console.log(bookingForm.startDate);
-};
 const bookingDuration = computed(() => {
-  const diff = date.getDateDiff(
-    bookingForm.endDate,
-    bookingForm.startDate,
-    'minutes'
-  );
-  return diff <= 0
-    ? 'Invalid'
-    : (diff > 60 ? Math.trunc(diff / 60) + ' hours' : '') +
-        (diff % 60 > 0 ? ' ' + (diff % 60) + ' minutes' : '');
+  if (bookingForm.value.endDate && bookingForm.value.startDate) {
+    const diff = date.getDateDiff(
+      bookingForm.value.endDate,
+      bookingForm.value.startDate,
+      'minutes'
+    );
+    return diff <= 0
+      ? 'Invalid'
+      : (diff > 60 ? Math.trunc(diff / 60) + ' hours' : '') +
+          (diff % 60 > 0 ? ' ' + (diff % 60) + ' minutes' : '');
+  } else {
+    return 0;
+  }
 });
 
 const bookingSummary = computed(() => {
-  return bookingForm.boat && bookingForm.startDate && bookingForm.endDate
-    ? `${bookingForm.boat.name} @ ${bookingForm.startDate} for ${bookingDuration.value}`
+  return bookingForm.value.boat &&
+    bookingForm.value.startDate &&
+    bookingForm.value.endDate
+    ? `${bookingForm.value.boat.name} @ ${bookingForm.value.startDate} for ${bookingDuration.value}`
     : '';
 });
 </script>