Exercise 3.1 fully implemented

src/components/navigation/urlBar.vue

@@ -6,7 +6,8 @@ const router = useRouter()
 const path = ref("https://www.eventmaster.com" + router.currentRoute.value.fullPath)
 
 function navigate() {
-  router.replace({ path: path.value.substring(path.value.indexOf('.com') + 4) })
+  let newPath = path.value.substring(path.value.indexOf('.com') + 4)
+  router.push(newPath)
 }
 
 watch(() => router.currentRoute.value.fullPath, () => {

src/pages/bands/bandsPage/bandFilterbar.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import cardView from '@/components/basics/cardView.vue';
-import { useBandStore } from '@/stores/band.store';
 import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { GenreModel } from '@/data/models/acts/genreModel';
 import { useGenreStore } from '@/stores/genre.store';
+import { useRouter } from 'vue-router';
 
-const bandStore = useBandStore()
 const genreStore = useGenreStore()
+const router = useRouter()
 
 genreStore.getGenres()
 
@@ -15,6 +15,9 @@ function itemProps(item: GenreModel) {
     title: item.name
   }
 }
+
+// Select genre from query parameter
+genreStore.setGenreByName(String(router.currentRoute.value.query["genreName"]))
 </script>
 
 <template>
@@ -25,21 +28,19 @@ function itemProps(item: GenreModel) {
     <v-row>
       <v-col>
         <v-select
-          v-model="genreStore.filteredGenres"
+          v-model="genreStore.genre"
           :items="genreStore.genres"
           variant="outlined"
           :label="$t('band.genre', 2)"
           :item-props="itemProps"
-          chips
           clearable
           hide-details
-          multiple
         />
       </v-col>
 
       <v-col cols="auto">
         <outlined-button
-          @click="bandStore.getBands"
+          @click="router.push({ path: '/bands', query: { genreName: genreStore.genre.name }})"
           height="100%"
         >
           {{ $t('misc.actions.filtering') }}

src/pages/bands/bandsPage/index.vue

@@ -3,10 +3,18 @@ import { useBandStore } from '@/stores/band.store';
 import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
 import bandListItem from '@/components/pageParts/bandListItem.vue';
 import bandFilterbar from './bandFilterbar.vue';
+import { watch } from 'vue';
+import { useRouter } from 'vue-router';
 
 const bandStore = useBandStore()
+const router = useRouter()
 
 bandStore.getBands()
+
+// Refetch bands if query parameter changes
+watch(() => router.currentRoute.value.query, () => {
+  bandStore.getBands()
+})
 </script>
 
 <template>

src/stores/band.store.ts

@@ -33,16 +33,14 @@ export const useBandStore = defineStore("bandStore", {
       await fetchAllBands()
         .then(result => {
           this.bands = result.data.filter((band: BandApiModel) => {
-            if (genreStore.filteredGenres.length == 0) {
+            if (genreStore.genre == null) {
               return true
             }
 
             for (let bandGenre of band.genres) {
-              for (let filteredGenres of genreStore.filteredGenres) {
+                if (bandGenre.name == genreStore.genre.name) {
-                if (bandGenre.name == filteredGenres.name) {
                   return true
                 }
-              }
             }
 
             return false

src/stores/genre.store.ts

@@ -10,11 +10,8 @@ export const useGenreStore = defineStore("genreStore", {
     /** All available genres from server */
     genres: ref<Array<GenreApiModel>>([]),
 
-    /** Currently edited genre */
+    /** Currently selected genre */
-    genre: ref<GenreApiModel>(new GenreApiModel()),
+    genre: ref<GenreApiModel>(null),
-
-    /** Genres to filter bands for */
-    filteredGenres: ref<Array<GenreApiModel>>([]),
 
     /** Show or hide edit dialog for Genre object */
     showEditDialog: ref(false),
@@ -107,6 +104,19 @@ export const useGenreStore = defineStore("genreStore", {
             feedbackStore.addSnackbar(BannerStateEnum.GENREDELETEERROR)
           }
         })
+    },
+
+    setGenreByName(name: string) {
+      this.genre = null
+      name = name.replace("+", " ")
+
+      let newGenre = this.genres.find(genre => {
+        return genre.name == name
+      })
+
+      if (newGenre != undefined) {
+        this.genre = newGenre
+      }
     }
   }
 })