From 634cff507cc704d466fa5b6805db059ce4126613 Mon Sep 17 00:00:00 2001 From: Patrick Toal Date: Sat, 4 May 2024 23:17:05 -0400 Subject: [PATCH] Converted some schedule to use backend --- package.json | 2 +- .../boat/BoatScheduleTableComponent.vue | 113 +++++++++++------- src/components/task/TaskListComponent.vue | 3 +- src/pages/schedule/BoatReservationPage.vue | 3 +- src/stores/schedule.ts | 11 +- src/stores/task.ts | 3 +- yarn.lock | 8 +- 7 files changed, 83 insertions(+), 60 deletions(-) diff --git a/package.json b/package.json index d489648..ec7ceb7 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ }, "dependencies": { "@quasar/extras": "^1.16.11", - "appwrite": "^13.0.0", + "appwrite": "^14.0.1", "pinia": "^2.1.7", "vue": "3", "vue-router": "4" diff --git a/src/components/scheduling/boat/BoatScheduleTableComponent.vue b/src/components/scheduling/boat/BoatScheduleTableComponent.vue index 40fe43d..14bb370 100644 --- a/src/components/scheduling/boat/BoatScheduleTableComponent.vue +++ b/src/components/scheduling/boat/BoatScheduleTableComponent.vue @@ -20,18 +20,15 @@ > @@ -71,7 +68,6 @@ import { Timestamp, diffTimestamp, today, - parsed, parseTimestamp, parseDate, addToDate, @@ -79,26 +75,26 @@ import { } from '@quasar/quasar-ui-qcalendar'; import CalendarHeaderComponent from './CalendarHeaderComponent.vue'; -import { ref, computed } from 'vue'; +import { ref, computed, onMounted } from 'vue'; import { Boat, useBoatStore } from 'src/stores/boat'; import { useScheduleStore } from 'src/stores/schedule'; import { Reservation, Timeblock } from 'src/stores/schedule.types'; import { date } from 'quasar'; -interface BoatData extends Boat { - blocks?: Timeblock[]; - reservations?: Reservation[]; -} - const scheduleStore = useScheduleStore(); const boatStore = useBoatStore(); +const boatData = boatStore.boats; const selectedBlock = defineModel(); const selectedDate = ref(today()); -const boatData = ref(boatStore.boats); - const calendar = ref(null); +onMounted(async () => { + await boatStore.fetchBoats(); + await scheduleStore.fetchTimeBlocks(); + // useScheduleStore().fetchReservations() +}); // TODO: Probably need this to be more sophisticated. + function handleSwipe({ ...event }) { event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next(); } @@ -121,13 +117,19 @@ function blockStyles( timeDurationHeight: (d: number) => string ) { return genericBlockStyle( - parsed(block.start) as Timestamp, - parsed(block.end) as Timestamp, + parseDate(new Date(block.start)) as Timestamp, + parseDate(new Date(block.end)) as Timestamp, timeStartPos, timeDurationHeight ); } +function getBoatDisplayName(scope: DayBodyScope) { + return boatData && boatData.value[scope.columnIndex] + ? boatData.value[scope.columnIndex].displayName + : ''; +} + function genericBlockStyle( start: Timestamp, end: Timestamp, @@ -168,33 +170,52 @@ function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Timeblock) { : (selectedBlock.value = block); } -function changeEvent({ start }: { start: string }) { - const newBlocks = scheduleStore.getTimeblocksForDate(start); - const reservations = scheduleStore.getBoatReservations( - parsed(start) as Timestamp - ); - boatData.value.map((boat) => { - boat.reservations = reservations.filter( - (reservation) => reservation.resource === boat - ); - boat.blocks = newBlocks.filter( - (block) => - block.boatId === boat.$id && - boat.reservations?.filter( - (r) => - r.start < - date.addToDate(makeDateTime(parsed(block.end) as Timestamp), { - hours: 4, - }) && - r.end > - date.addToDate(makeDateTime(parsed(block.start) as Timestamp), { - hours: 4, - }) - ).length == 0 - ); - }); +interface BoatBlocks { + [key: string]: Timeblock[]; +} - setTimeout(() => calendar.value?.scrollToTime('09:00'), 100); // Should figure out why we need this setTimeout... +const boatBlocks = computed((): BoatBlocks => { + return scheduleStore + .getTimeblocksForDate(selectedDate.value) + .reduce((result, tb) => { + if (!result[tb.boatId]) result[tb.boatId] = []; + result[tb.boatId].push(tb); + return result; + }, {}); +}); + +function getBoatBlocks(scope: DayBodyScope): Timeblock[] { + return boatData.value[scope.columnIndex] + ? boatBlocks.value[boatData.value[scope.columnIndex].$id] + : []; +} + +function changeEvent({ start }: { start: string }) { + // const newBlocks = scheduleStore.getTimeblocksForDate(start); + // const reservations = scheduleStore.getBoatReservations( + // parsed(start) as Timestamp + // ); + // boatData.value.map((boat) => { + // boat.reservations = reservations.filter( + // (reservation) => reservation.resource === boat + // ); + // boat.blocks = newBlocks.filter( + // (block) => + // block.boatId === boat.$id && + // boat.reservations?.filter( + // (r: Reservation) => + // r.start < + // date.addToDate(makeDateTime(parsed(block.end) as Timestamp), { + // hours: 4, + // }) && + // r.end > + // date.addToDate(makeDateTime(parsed(block.start) as Timestamp), { + // hours: 4, + // }) + // ).length == 0 + // ); + // }); + // setTimeout(() => calendar.value?.scrollToTime('09:00'), 100); // Should figure out why we need this setTimeout... } const disabledBefore = computed(() => { diff --git a/src/components/task/TaskListComponent.vue b/src/components/task/TaskListComponent.vue index d0138b7..fe9698d 100644 --- a/src/components/task/TaskListComponent.vue +++ b/src/components/task/TaskListComponent.vue @@ -9,9 +9,8 @@ diff --git a/src/pages/schedule/BoatReservationPage.vue b/src/pages/schedule/BoatReservationPage.vue index 0f21568..5884495 100644 --- a/src/pages/schedule/BoatReservationPage.vue +++ b/src/pages/schedule/BoatReservationPage.vue @@ -131,8 +131,7 @@ const bookingForm = ref({ }); watch(timeblock, (tb_new) => { - console.log('Hi'); - bookingForm.value.boat = useBoatStore().boats.find( + bookingForm.value.boat = useBoatStore().boats.value.find( (b) => b.$id === tb_new?.boatId ); bookingForm.value.startDate = date.formatDate(tb_new?.start, dateFormat); diff --git a/src/stores/schedule.ts b/src/stores/schedule.ts index c6daeef..14f5a5c 100644 --- a/src/stores/schedule.ts +++ b/src/stores/schedule.ts @@ -21,9 +21,12 @@ export const useScheduleStore = defineStore('schedule', () => { if (!timeblocks.value) { fetchTimeBlocks(); } - return timeblocks.value.filter((b) => - compareDate(parsed(b.start) as Timestamp, parsed(date) as Timestamp) - ); + return timeblocks.value.filter((b) => { + return compareDate( + parseDate(new Date(b.start)) as Timestamp, + parsed(date) as Timestamp + ); + }); }; const getBoatReservations = ( @@ -113,9 +116,11 @@ export const useScheduleStore = defineStore('schedule', () => { return { reservations, + timeblocks, getBoatReservations, getConflictingReservations, getTimeblocksForDate, + fetchTimeBlocks, getNewId, addOrCreateReservation, isReservationOverlapped, diff --git a/src/stores/task.ts b/src/stores/task.ts index 86d4383..d25e4ec 100644 --- a/src/stores/task.ts +++ b/src/stores/task.ts @@ -86,13 +86,12 @@ export const useTaskStore = defineStore('tasks', { return; } try { - const response = await databases.deleteDocument( + await databases.deleteDocument( AppwriteIds.databaseId, AppwriteIds.collection.task, docId ); this.tasks = this.tasks.filter((task) => docId !== task.$id); - console.log(response); } catch (error) { // Need some better error handling, here. console.error('Failed to delete task:', error); diff --git a/yarn.lock b/yarn.lock index acd1837..3ef1716 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1620,10 +1620,10 @@ anymatch@~3.1.2: normalize-path "^3.0.0" picomatch "^2.0.4" -appwrite@^13.0.0: - version "13.0.2" - resolved "https://registry.yarnpkg.com/appwrite/-/appwrite-13.0.2.tgz#225f38225a012bb7dc2a70ea777fae363f9188fa" - integrity sha512-ISkUXO8pojDWGx5XqknCwwikgAQye4Ni4FL+Ns8Hg42rXeyehLlmvHGjFOmpS+odT6nsWYUaXzVjV4SZuDorog== +appwrite@^14.0.1: + version "14.0.1" + resolved "https://registry.yarnpkg.com/appwrite/-/appwrite-14.0.1.tgz#8a7e653597b370f0b9472c007e29ca0be8af182a" + integrity sha512-ORlvfqVif/2K3qKGgGiGfMP33Zwm+xxB1fIC4Lm3sojOkDd8u8YvgKQO0Meq5UXb8Dc0Rl66Z7qlGBAfRQ04bA== dependencies: cross-fetch "3.1.5" isomorphic-form-data "2.0.0"