From b1eea15bac3f10690e2e8c3814f553b5843db463 Mon Sep 17 00:00:00 2001
From: Tobias Zoghaib <tobias.zoghaib@stud.uni-hannover.de>
Date: Tue, 22 Oct 2024 20:26:35 +0200
Subject: [PATCH] Filterbar on Concert page

---
 software/backend/routes/concert.routes.ts     |  8 ++-
 software/src/locales/de.json                  |  2 +-
 software/src/locales/en.json                  |  2 +-
 .../pages/bands/bandsPage/bandFilterbar.vue   |  5 +-
 .../concertsPage/concertFilterbar.vue         | 51 +++++++++++++++++++
 .../src/pages/concerts/concertsPage/index.vue |  4 +-
 software/src/stores/concert.store.ts          | 19 ++++++-
 7 files changed, 84 insertions(+), 7 deletions(-)
 create mode 100644 software/src/pages/concerts/concertsPage/concertFilterbar.vue

diff --git a/software/backend/routes/concert.routes.ts b/software/backend/routes/concert.routes.ts
index f7c02da..c23c142 100644
--- a/software/backend/routes/concert.routes.ts
+++ b/software/backend/routes/concert.routes.ts
@@ -16,7 +16,13 @@ concert.get("/", (req: Request, res: Response) => {
   let count = req.query.count
 
   Concert.findAll({
-    include: [ Band, Location ],
+    include: [
+      {
+        model: Location,
+        include: [ City ]
+      },
+      Band
+    ],
     order: [
       [ 'date', 'ASC' ]
     ]
diff --git a/software/src/locales/de.json b/software/src/locales/de.json
index fbf3e44..c4ff84a 100644
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -132,7 +132,7 @@
   "noConcertsFound": "Keine Konzerte gefunden",
   "from": "ab",
   "soldOut": "Ausverkauft",
-  "city": "Stadt",
+  "city": "Stadt | Städte",
   "seatPlan": "Saalplan",
   "stage": "Bühne",
   "filtering": "Filtern",
diff --git a/software/src/locales/en.json b/software/src/locales/en.json
index 0084d46..eccf835 100644
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -132,7 +132,7 @@
   "noConcertsFound": "No Concerts found",
   "from": "from",
   "soldOut": "Sold Out",
-  "city": "City",
+  "city": "City | Cities",
   "seatPlan": "Seat Plan",
   "stage": "Stage",
   "filtering": "Filtering",
diff --git a/software/src/pages/bands/bandsPage/bandFilterbar.vue b/software/src/pages/bands/bandsPage/bandFilterbar.vue
index 9c404b9..84d5de3 100644
--- a/software/src/pages/bands/bandsPage/bandFilterbar.vue
+++ b/software/src/pages/bands/bandsPage/bandFilterbar.vue
@@ -14,7 +14,10 @@ function itemProps(item: GenreModel) {
 </script>
 
 <template>
-  <card-view :title="$t('filtering')">
+  <card-view
+    :title="$t('filtering')"
+    icon="mdi-filter"
+  >
     <v-row>
       <v-col>
         <v-select
diff --git a/software/src/pages/concerts/concertsPage/concertFilterbar.vue b/software/src/pages/concerts/concertsPage/concertFilterbar.vue
new file mode 100644
index 0000000..147cee7
--- /dev/null
+++ b/software/src/pages/concerts/concertsPage/concertFilterbar.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { CityModel } from '@/data/models/locations/cityModel';
+import { LocationModel } from '@/data/models/locations/locationModel';
+import { useConcertStore } from '@/stores/concert.store';
+import { useLocationStore } from '@/stores/location.store';
+
+const concertStore = useConcertStore()
+const locationStore = useLocationStore()
+
+locationStore.getLocations()
+
+function itemProps(item: CityModel) {
+  return {
+    title: item.name
+  }
+}
+</script>
+
+<template>
+  <card-view
+    :title="$t('filtering')"
+    icon="mdi-filter"
+  >
+    <v-row>
+      <v-col>
+        <v-select
+          v-model="concertStore.filteredCities"
+          :items="locationStore.cities"
+          variant="outlined"
+          :label="$t('city', 2)"
+          :item-props="itemProps"
+          chips
+          clearable
+          hide-details
+          multiple
+        />
+      </v-col>
+
+      <v-col cols="auto">
+        <outlined-button
+          @click="concertStore.getConcerts"
+          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/concerts/concertsPage/index.vue b/software/src/pages/concerts/concertsPage/index.vue
index 7bb3f12..fd27bbf 100644
--- a/software/src/pages/concerts/concertsPage/index.vue
+++ b/software/src/pages/concerts/concertsPage/index.vue
@@ -3,6 +3,7 @@ import { useConcertStore } from '@/stores/concert.store';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
 import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
 import sectionDivider from '@/components/basics/sectionDivider.vue';
+import concertFilterbar from './concertFilterbar.vue';
 
 const concertStore = useConcertStore()
 
@@ -17,8 +18,7 @@ concertStore.getConcerts()
       <v-col cols="10">
         <v-row>
           <v-col>
-            Filterbar
-            <!-- todo: Filterbar? -->
+            <concert-filterbar />
           </v-col>
         </v-row>
 
diff --git a/software/src/stores/concert.store.ts b/software/src/stores/concert.store.ts
index 54b1b5c..63cd6d1 100644
--- a/software/src/stores/concert.store.ts
+++ b/software/src/stores/concert.store.ts
@@ -3,6 +3,7 @@ import { ref } from "vue";
 import { ConcertApiModel } from "../data/models/acts/concertApiModel";
 import { fetchConcertById, fetchAllConcerts, fetchUpcomingConcerts } from "../data/api/concertApi";
 import { ConcertDetailsApiModel } from "../data/models/acts/concertDetailsApiModel";
+import { CityModel } from "@/data/models/locations/cityModel";
 
 export const useConcertStore = defineStore("concertStore", {
   state: () => ({
@@ -15,6 +16,9 @@ export const useConcertStore = defineStore("concertStore", {
     /** Enhanced data about a specific concert */
     concert: ref<ConcertDetailsApiModel>(new ConcertDetailsApiModel()),
 
+    /** Array of cities for which the concerts should be filtered */
+    filteredCities: ref<Array<CityModel>>([]),
+
     /** Request to server sent, waiting for data response */
     fetchInProgress: ref(false)
   }),
@@ -28,7 +32,20 @@ export const useConcertStore = defineStore("concertStore", {
 
       fetchAllConcerts()
         .then(result => {
-          this.concerts = result.data
+          this.concerts = result.data.filter((concert: ConcertApiModel) => {
+            if (this.filteredCities.length == 0) {
+              return true
+            }
+
+            for (let city of this.filteredCities) {
+              if (city.name == concert.location.city.name) {
+                return true
+              }
+            }
+
+            return false
+          })
+
           this.fetchInProgress = false
         })
     },