Band filter by genre

software/src/stores/band.store.ts

@@ -3,6 +3,8 @@ import { ref } from "vue";
 import { BandApiModel } from "../data/models/acts/bandApiModel";
 import { fetchAllBands, fetchBandByName } from "../data/api/bandApi";
 import { BandDetailsApiModel } from "../data/models/acts/bandDetailsApiModel";
+import { GenreModel } from "@/data/models/acts/genreModel";
+import { fetchAllGenres } from "@/data/api/genreApi";
 
 export const useBandStore = defineStore("bandStore", {
   state: () => ({
@@ -11,22 +13,54 @@ export const useBandStore = defineStore("bandStore", {
 
     /** All information about a single band */
     band: ref<BandDetailsApiModel>(new BandDetailsApiModel()),
+
+    filteredGenres: ref<Array<GenreModel>>([]),
+
+    availableGenres: ref<Array<GenreModel>>([]),
     
     /** Request to server sent, waiting for data response */
     fetchInProgress: ref(false)
   }),
 
   actions: {
+    /**
+     * Get all bands from server
+     */
     async getBands() {
       this.fetchInProgress = true
 
-      fetchAllBands()
+      await fetchAllBands()
         .then(result => {
-          this.bands = result.data
-          this.fetchInProgress = false
+          this.bands = result.data.filter((band: BandApiModel) => {
+            if (this.filteredGenres.length == 0) {
+              return true
+            }
+
+            for (let bandGenre of band.genres) {
+              for (let filteredGenres of this.filteredGenres) {
+                if (bandGenre.name == filteredGenres.name) {
+                  return true
+                }
+              }
+            }
+
+            return false
+          })
         })
+
+      await fetchAllGenres()
+        .then(result => {
+          this.availableGenres = result.data
+        })
+
+      this.fetchInProgress = false
     },
 
+    /**
+     * Get all available data about a specific band
+     * 
+     * @param name Name of band
+     */
     async getBand(name: string) {
       this.fetchInProgress = true
 
@@ -35,6 +69,6 @@ export const useBandStore = defineStore("bandStore", {
           this.band = result.data
           this.fetchInProgress = false
         })
-    } 
+    }
   }
 })