From 6018ecad899eb70e8bc2da7a275d2504deb48895 Mon Sep 17 00:00:00 2001 From: Filip Borum Poulsen Date: Fri, 21 Apr 2023 12:52:56 +0200 Subject: [PATCH] Fixed QOL stuff --- client/src/components/OrderPopup.vue | 14 +++++++ client/src/components/TrainerSelector.vue | 1 + client/src/views/Home.vue | 51 ++++++++++++++++++----- client/src/views/Login.vue | 2 +- server/src/routes/timeslot.ts | 8 ++-- 5 files changed, 61 insertions(+), 15 deletions(-) diff --git a/client/src/components/OrderPopup.vue b/client/src/components/OrderPopup.vue index 92613dd..4aef0e7 100644 --- a/client/src/components/OrderPopup.vue +++ b/client/src/components/OrderPopup.vue @@ -20,6 +20,7 @@
Bestil
+
x
@@ -111,6 +112,7 @@ export default { display: flex; flex-direction: column; min-width: 50%; + position: relative; } .trainer { @@ -140,4 +142,16 @@ export default { text-decoration: underline; border-color: black; } + +.closeButton { + position: absolute; + top: 10px; + right: 20px; + font-size: 2em; + cursor: pointer; +} + +.closeButton:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/client/src/components/TrainerSelector.vue b/client/src/components/TrainerSelector.vue index f5b78a2..d1accf8 100644 --- a/client/src/components/TrainerSelector.vue +++ b/client/src/components/TrainerSelector.vue @@ -31,6 +31,7 @@ export default { watch: { centers: { async handler(centers: number[]) { + this.selectedTrainers = []; const filters = centers?.map(c => `center=${c}`).join("&"); const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/trainer?${filters}`); if (res.status === 200) { diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue index 53640c3..65f1952 100644 --- a/client/src/views/Home.vue +++ b/client/src/views/Home.vue @@ -23,7 +23,8 @@ - + + @@ -111,6 +112,9 @@ export default { TrainerSelector, OrderPopup }, + created() { + this.parseQueryFilters(); + }, data() { return { range: { @@ -177,17 +181,9 @@ export default { openPopup(trainer: Trainer, timeslot: Timeslot) { this.selectedTrainer = trainer; this.selectedTimeslot = timeslot; + this.setSearchQueryFilters(); this.showPopup = true; }, - createOrder(trainer: Trainer, timeslot: Timeslot) { - this.$router.push({ - path: "/createOrder", query: { - trainer: trainer.id, - startDate: new Date(timeslot.startDate).toISOString(), - endDate: new Date(timeslot.endDate).toISOString() - } - }); - }, formatDate(date: Date): string { let output: string = dayjs(date).locale("da").format("dddd D. MMM YYYY"); let outputStringArray = output.split(""); @@ -203,16 +199,49 @@ export default { }, centerSelectionChanged(selection: number[]) { this.centers = selection; + this.setSearchQueryFilters(); }, trainerSelectionChanged(selection: number[]) { this.trainers = selection; + this.setSearchQueryFilters(); }, - async fetchTimeslots() { + parseQueryFilters() { + const filters = this.$route.query as any; + if (filters.center) + if (Array.isArray(filters.center)) + this.centers = filters.center; + else + this.centers = [filters.center]; + if (filters.trainer) + if (Array.isArray(filters.trainer)) + this.trainers = filters.trainer; + else + this.trainers = [filters.trainer]; + if (filters.startDate) + this.range.start = new Date(filters.startDate); + if (filters.endDate) + this.range.end = new Date(filters.endDate); + }, + setSearchQueryFilters() { + this.$router.replace({ + query: { + center: this.centers, + trainer: this.trainers, + startDate: this.range.start.toISOString(), + endDate: this.range.end.toISOString() + } + }) + }, + getSearchQueryFilters(): string { const centerFilters = this.centers.map(c => `center=${c}`); const trainerFilters = this.trainers.map(c => `trainer=${c}`); const startDateFilter = `startDate=${this.range.start.toISOString()}`; const endDateFilter = `endDate=${this.range.end.toISOString()}`; const filters = [...centerFilters, ...trainerFilters, startDateFilter, endDateFilter].join("&"); + return filters; + }, + async fetchTimeslots() { + const filters = this.getSearchQueryFilters(); const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/timeslot?${filters}`); if (res.status === 200) { this.trainersWithTimeslots = await res.json(); diff --git a/client/src/views/Login.vue b/client/src/views/Login.vue index 6009b27..fcbbf5b 100644 --- a/client/src/views/Login.vue +++ b/client/src/views/Login.vue @@ -49,7 +49,7 @@ export default { } else if (res.status === 204) { this.setLoginState(true); if (this.$route.query.ref) { - this.$router.push({ path: this.$route.query.ref.toString() }); + this.$router.push({ path: this.$route.query.ref.toString(), query: { ...this.$route.query, ref: undefined } }); } else { this.$router.push({ path: '/' }); } diff --git a/server/src/routes/timeslot.ts b/server/src/routes/timeslot.ts index 0fa8380..3489eef 100644 --- a/server/src/routes/timeslot.ts +++ b/server/src/routes/timeslot.ts @@ -19,7 +19,9 @@ const timeslotFiltersSchema = Joi.object({ trainer: Joi.array().single().items( idSchema.required() ), - center: idSchema, + center: Joi.array().single().items( + idSchema.required() + ), startDate: Joi.date().default(Date.now()), endDate: Joi.date().default(Date.now()), startTime: timeSchema, @@ -125,7 +127,7 @@ router.get("/timeslot", async (req: Request, res: Response) => { WHERE ((trainer_id = ANY($3)) OR $4) AND (day_of_week = ANY($5)) - AND (trainers.center_id = $6 OR $7) + AND (trainers.center_id = ANY($6) OR $7) GROUP BY weekly_timeslots.trainer_id, users.first_name, @@ -142,7 +144,7 @@ router.get("/timeslot", async (req: Request, res: Response) => { timeslotFilters.trainer !== undefined ? timeslotFilters.trainer : [], timeslotFilters.trainer === undefined, weekdays, - timeslotFilters.center, + timeslotFilters.center !== undefined ? timeslotFilters.center : [], timeslotFilters.center === undefined ]);