Store compare selection in query

src/composables/useQuery.ts

@@ -0,0 +1,28 @@
+import { useRoute, useRouter } from 'vue-router';
+import { ref, watch } from 'vue';
+
+export function useQuery() {
+  const route = useRoute();
+  const router = useRouter();
+
+  const selectedLeft = ref('');
+  if (route.query.left && typeof route.query.left === 'string') {
+    selectedLeft.value = route.query.left;
+  }
+
+  const selectedRight = ref('');
+  if (route.query.right && typeof route.query.right === 'string') {
+    selectedRight.value = route.query.right;
+  }
+
+  function updateQuery() {
+    router.push({
+      path: route.path,
+      query: { left: selectedLeft.value, right: selectedRight.value }
+    });
+  }
+  watch(selectedLeft, updateQuery);
+  watch(selectedRight, updateQuery);
+
+  return { selectedLeft, selectedRight };
+}

src/views/CompareDegreesView.vue

@@ -1,27 +1,27 @@
 <script setup lang="ts">
 import DataSelect from '@/components/DataSelect.vue';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { faculties } from '@/data';
 import CompareDegree from '@/components/CompareDegree.vue';
+import { useQuery } from '@/composables/useQuery';
 
-const selectedDegreeLeft = ref('');
-const selectedDegreeRight = ref('');
+const { selectedLeft, selectedRight } = useQuery();
 
 const leftDegree = computed(() =>
   faculties
     .flatMap(({ degrees, ...f }) => degrees.map((d) => ({ ...d, faculty: f })))
-    .find((d) => d.slug === selectedDegreeLeft.value)
+    .find((d) => d.slug === selectedLeft.value)
 );
 const rightDegree = computed(() =>
   faculties
     .flatMap(({ degrees, ...f }) => degrees.map((d) => ({ ...d, faculty: f })))
-    .find((d) => d.slug === selectedDegreeRight.value)
+    .find((d) => d.slug === selectedRight.value)
 );
 </script>
 
 <template>
   <main class="grid grid-cols-6 gap-3 p-3">
-    <DataSelect v-model:selected="selectedDegreeLeft" />
+    <DataSelect v-model:selected="selectedLeft" />
     <CompareDegree v-if="leftDegree" :degree="leftDegree" class="col-span-2" />
     <div v-else class="col-span-2">
       <h2>Wähle links einen Studiengang aus!</h2>
@@ -34,7 +34,7 @@ const rightDegree = computed(() =>
     <div v-else class="col-span-2">
       <h2>Wähle rechts einen Studiengang aus!</h2>
     </div>
-    <DataSelect v-model:selected="selectedDegreeRight" right />
+    <DataSelect v-model:selected="selectedRight" right />
   </main>
 </template>
 

src/views/CompareFacultiesView.vue

@@ -1,23 +1,22 @@
 <script setup lang="ts">
 import DataSelect from '@/components/DataSelect.vue';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { faculties } from '@/data';
 import CompareFaculty from '@/components/CompareFaculty.vue';
+import { useQuery } from '@/composables/useQuery';
 
-const selectedFacultyLeft = ref('');
-const selectedFacultyRight = ref('');
-
+const { selectedLeft, selectedRight } = useQuery();
 const leftFaculty = computed(() =>
-  faculties.find((f) => f.name === selectedFacultyLeft.value)
+  faculties.find((f) => f.name === selectedLeft.value)
 );
 const rightFaculty = computed(() =>
-  faculties.find((f) => f.name === selectedFacultyRight.value)
+  faculties.find((f) => f.name === selectedRight.value)
 );
 </script>
 
 <template>
   <main class="grid grid-cols-6 gap-3 p-3">
-    <DataSelect v-model:selected="selectedFacultyLeft" hide-degrees />
+    <DataSelect v-model:selected="selectedLeft" hide-degrees />
     <CompareFaculty
       v-if="leftFaculty"
       :faculty="leftFaculty"
@@ -34,7 +33,7 @@ const rightFaculty = computed(() =>
     <div v-else class="col-span-2">
       <h2>Wähle rechts eine Fakultät aus!</h2>
     </div>
-    <DataSelect v-model:selected="selectedFacultyRight" hide-degrees right />
+    <DataSelect v-model:selected="selectedRight" hide-degrees right />
   </main>
 </template>