Fix update of timblock

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -90,17 +90,13 @@ interface BoatData extends Boat {
 
 const scheduleStore = useScheduleStore();
 const boatStore = useBoatStore();
-const selectedBlock = ref<Timeblock | null>(null);
+const selectedBlock = defineModel<Timeblock | null>();
 const selectedDate = ref(today());
 
 const boatData = ref<BoatData[]>(boatStore.boats);
 
 const calendar = ref<QCalendarDay | null>(null);
 
-const emit = defineEmits<{
-  updateBoatTime: [block: Timeblock];
-}>();
-
 function handleSwipe({ ...event }) {
   event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
 }
@@ -168,8 +164,6 @@ function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Timeblock) {
   selectedBlock.value === block
     ? (selectedBlock.value = null)
     : (selectedBlock.value = block);
-
-  emit('updateBoatTime', block);
 }
 
 function changeEvent({ start }: { start: string }) {

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>

src/stores/schedule.ts

@@ -81,9 +81,12 @@ export const useScheduleStore = defineStore('schedule', () => {
     return isResourceTimeOverlapped(res.resource, res.start, res.end);
   };
 
-  const getNewId = () => {
+  const getNewId = (): string => {
+    return [...Array(20)]
+      .map(() => Math.floor(Math.random() * 16).toString(16))
+      .join('');
     // Trivial placeholder
-    return Math.max(...reservations.value.map((item) => item.id)) + 1;
+    //return Math.max(...reservations.value.map((item) => item.id)) + 1;
   };
 
   const addOrCreateReservation = (reservation: Reservation) => {

src/stores/schedule.types.ts

@@ -2,7 +2,7 @@ import type { Boat } from './boat';
 
 export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
 export interface Reservation {
-  id: number;
+  id: string;
   user: string;
   start: Date;
   end: Date;