From f80f74fd3bf4fd822ab46e3b4de02b994669829c Mon Sep 17 00:00:00 2001
From: Mel <97147377+MelissaAutumn@users.noreply.github.com>
Date: Tue, 28 May 2024 06:50:53 -0700
Subject: [PATCH] Use hashes for navigating calendar modes (#430)

* Use hashes for navigating calendar modes

* Fix the opacity that the frontend linter does not want us to have.
---
 frontend/src/components/CalendarQalendar.vue | 23 ++++++++++++++++++--
 frontend/src/router.js                       | 15 +------------
 frontend/src/views/BookingView.vue           |  2 +-
 frontend/src/views/CalendarView.vue          |  4 ++--
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/CalendarQalendar.vue b/frontend/src/components/CalendarQalendar.vue
index 088d78337..b5059a1ac 100644
--- a/frontend/src/components/CalendarQalendar.vue
+++ b/frontend/src/components/CalendarQalendar.vue
@@ -14,9 +14,12 @@ import {
   qalendarSlotDurations,
 } from '@/definitions';
 import { getLocale, getPreferredTheme, timeFormat } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
 
 // component constants
 const dj = inject('dayjs');
+const router = useRouter();
+const route = useRoute();
 
 // component properties
 const props = defineProps({
@@ -37,10 +40,12 @@ const {
 
 const qalendarRef = ref();
 
+const isValidMode = (mode) => ['#day', '#week', '#month'].indexOf(mode) !== -1;
+
 const displayFormat = timeFormat();
 const calendarColors = ref({});
 const selectedDate = ref(null);
-const calendarMode = ref('month');
+const calendarMode = ref(isValidMode(route.hash) ? route.hash.slice(1) : 'month');
 const preferredTheme = getPreferredTheme();
 
 // component emits
@@ -109,7 +114,9 @@ const dateChange = (evt) => {
  * On mode change. e.g. month, week, day.
  */
 const modeChange = (evt) => {
-  calendarMode.value = evt?.mode ?? 'month';
+  const hash = evt?.mode ?? 'month';
+  calendarMode.value = hash;
+  router.push({ hash: `#${hash}` });
 };
 
 /* Functions */
@@ -339,6 +346,18 @@ watch(dayBoundary, () => {
   qalendarRef.value.time.DAY_START = dayBoundary.value.start * 100;
   qalendarRef.value.time.DAY_END = dayBoundary.value.end * 100;
 });
+
+watch(route, () => {
+  if (!qalendarRef?.value) {
+    return;
+  }
+
+  // Route.hash never returns null, so need to do falsey default here.
+  const hash = route.hash || '#month';
+  if (isValidMode(hash)) {
+    qalendarRef.value.mode = hash.replace('#', '');
+  }
+});
 </script>
 <template>
   <div
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 7b7afd9fa..0c9374930 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -58,7 +58,7 @@ const routes = [
     redirect: { name: 'calendar' },
   },
   {
-    path: '/calendar/:view?/:date?',
+    path: '/calendar/:date?',
     name: 'calendar',
     component: CalendarView,
   },
@@ -111,17 +111,4 @@ const router = createRouter({
   routes,
 });
 
-// set default route parameters
-router.beforeEach((to) => {
-  if (to.name === 'calendar' && !to.params.view) {
-    to.params.view = 'month';
-    return to;
-  }
-  if (to.name === 'appointments' && !to.params.view) {
-    to.params.view = 'all';
-    return to;
-  }
-  return null;
-});
-
 export default router;
diff --git a/frontend/src/views/BookingView.vue b/frontend/src/views/BookingView.vue
index 1cf37dbb4..dbac86d11 100644
--- a/frontend/src/views/BookingView.vue
+++ b/frontend/src/views/BookingView.vue
@@ -136,7 +136,7 @@ const getViewBySlotDistribution = (slots) => {
  * @returns {Promise<Object|null>}
  */
 const getAppointment = async () => {
-  const request = call('schedule/public/availability').post({ url: window.location.href });
+  const request = call('schedule/public/availability').post({ url: window.location.href.split('#')[0] });
 
   const { data, error } = await request.json();
 
diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue
index ca0be579a..c745abea1 100644
--- a/frontend/src/views/CalendarView.vue
+++ b/frontend/src/views/CalendarView.vue
@@ -104,7 +104,7 @@ const activeDateRange = computed(() => ({
 }));
 
 // active menu item for tab navigation of calendar views
-const tabActive = ref(calendarViews[route.params.view]);
+const tabActive = calendarViews.month;
 
 // get remote calendar data for current year
 const calendarEvents = ref([]);
@@ -147,7 +147,7 @@ const selectDate = async (d) => {
   const date = dj(d);
   await router.replace({
     name: route.name,
-    params: { view: route.params.view, date: date.format('YYYY-MM-DD') },
+    params: { date: date.format('YYYY-MM-DD') },
   });
   // Check if we need to pull remote events
   await onDateChange({ start: date.startOf('month'), end: date.endOf('month') });