From 048a8c30ff41bad4b67b362346db281a852857d9 Mon Sep 17 00:00:00 2001
From: TobiZog <developer@zoghaib.de>
Date: Tue, 22 Oct 2024 20:11:09 +0200
Subject: [PATCH] Band filter by genre

---
 software/src/locales/de.json                  |  3 +-
 software/src/locales/en.json                  |  3 +-
 .../pages/bands/bandsPage/bandFilterbar.vue   | 43 +++++++++++++++++++
 software/src/pages/bands/bandsPage/index.vue  |  3 +-
 software/src/stores/band.store.ts             | 42 ++++++++++++++++--
 5 files changed, 87 insertions(+), 7 deletions(-)
 create mode 100644 software/src/pages/bands/bandsPage/bandFilterbar.vue

diff --git a/software/src/locales/de.json b/software/src/locales/de.json
index f7755bf..fbf3e44 100644
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -178,5 +178,6 @@
   "allConcerts": "Alle Konzerte",
   "more": "Mehr",
   "upcomingConcerts": "Nächste Konzerte",
-  "pleaseLogin": "Bitte anmelden"
+  "pleaseLogin": "Bitte anmelden",
+  "genres": "Genres"
 }
diff --git a/software/src/locales/en.json b/software/src/locales/en.json
index 6196fbc..0084d46 100644
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -178,5 +178,6 @@
   "allConcerts": "All Concerts",
   "more": "More",
   "upcomingConcerts": "Upcoming Concerts",
-  "pleaseLogin": "Please login"
+  "pleaseLogin": "Please login",
+  "genres": "Genres"
 }
diff --git a/software/src/pages/bands/bandsPage/bandFilterbar.vue b/software/src/pages/bands/bandsPage/bandFilterbar.vue
new file mode 100644
index 0000000..9c404b9
--- /dev/null
+++ b/software/src/pages/bands/bandsPage/bandFilterbar.vue
@@ -0,0 +1,43 @@
+<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';
+
+const bandStore = useBandStore()
+
+function itemProps(item: GenreModel) {
+  return {
+    title: item.name
+  }
+}
+</script>
+
+<template>
+  <card-view :title="$t('filtering')">
+    <v-row>
+      <v-col>
+        <v-select
+          v-model="bandStore.filteredGenres"
+          :items="bandStore.availableGenres"
+          variant="outlined"
+          :label="$t('genres')"
+          :item-props="itemProps"
+          chips
+          clearable
+          hide-details
+          multiple
+        />
+      </v-col>
+
+      <v-col cols="auto">
+        <outlined-button
+          @click="bandStore.getBands"
+          height="100%"
+        >
+          {{ $t('filtering') }}
+        </outlined-button>
+      </v-col>
+    </v-row>
+  </card-view>
+</template>
\ No newline at end of file
diff --git a/software/src/pages/bands/bandsPage/index.vue b/software/src/pages/bands/bandsPage/index.vue
index 7d385a9..0781456 100644
--- a/software/src/pages/bands/bandsPage/index.vue
+++ b/software/src/pages/bands/bandsPage/index.vue
@@ -2,6 +2,7 @@
 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';
 
 const bandStore = useBandStore()
 
@@ -16,7 +17,7 @@ bandStore.getBands()
       <v-col cols="10">
         <v-row>
           <v-col>
-            Filterbar
+            <band-filterbar />
           </v-col>
         </v-row>
 
diff --git a/software/src/stores/band.store.ts b/software/src/stores/band.store.ts
index 4874c48..718ccd7 100644
--- a/software/src/stores/band.store.ts
+++ b/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
         })
-    } 
+    }
   }
 })
\ No newline at end of file