Improve filterBar on eventsPage, improve API access from frontend

software/src/pages/events/eventsPage/filterBar.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
+import { GenreModel } from '@/data/models/acts/genreModel';
+import { CityModel } from '@/data/models/locations/cityModel';
+import { useShoppingStore } from '@/data/stores/shoppingStore';
+
+const shoppingStore = useShoppingStore()
+
+shoppingStore.getCities()
+shoppingStore.getGenres()
+
+function itemPropsCity(city: CityModel) {
+  return {
+    title: city.name
+  }
+}
+
+function itemPropsGenre(genre: GenreModel) {
+  return {
+    title: genre.name
+  }
+}
+</script>
+
+<template>
+  <card-view
+    variant="tonal"
+    :title="$t('filtering')"
+    subtitle="123"
+    icon="mdi-cog"
+  >
+    <v-row class="d-flex justify-center" >
+      <v-col cols="3">
+        <v-select
+          variant="outlined"
+          :items="shoppingStore.cities"
+          :item-props="itemPropsCity"
+          v-model="shoppingStore.cityFilterName"
+          :label="$t('city')"
+          class="mb-n5"
+          :clearable="shoppingStore.cityFilterName != ''"
+          base-color="secondary"
+          color="secondary"
+          item-value="name"
+        />
+      </v-col>
+
+      <v-col cols="4">
+        <v-select
+          variant="outlined"
+          :items="shoppingStore.genres"
+          :item-props="itemPropsGenre"
+          v-model="shoppingStore.genreFilterName"
+          label="Genre"
+          :clearable="shoppingStore.genreFilterName != ''"
+          class="mb-n5"
+          base-color="secondary"
+          color="secondary"
+          item-value="name"
+        />
+      </v-col>
+
+      <v-col cols="2">
+        <outlined-button
+          height="100%"
+          append-icon="mdi-chevron-right"
+          @click="shoppingStore.getEvents()"
+        >
+          {{ $t('filtering') }}
+        </outlined-button>
+      </v-col>
+    </v-row>
+  </card-view>
+</template>

software/src/pages/events/eventsPage/index.vue

@@ -25,16 +25,16 @@ shoppingStore.getEvents()
 
         <v-row
           v-if="shoppingStore.events.length > 0"
-          v-for="tour of shoppingStore.events"
+          v-for="event of shoppingStore.events"
         >
           <v-col>
             <card-with-left-image
-              :title="tour.band.name + ' - ' +  tour.name"
-              :image="'http://localhost:3000/static/tours/' + tour.image"
-              @click="router.push('/bands/' + tour.band.name.replaceAll(' ', '-').toLowerCase())"
+              :title="event.band.name + ' - ' +  event.name"
+              :image="'http://localhost:3000/static/tours/' + event.image"
+              @click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
             >
-              {{ createDateRangeString(tour) }}
-              <div>{{ tour.concerts.length }} {{ $t('concert', tour.concerts.length) }}</div>
+              {{ createDateRangeString(event) }}
+              <div>{{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}</div>
 
               <template #append>
                 <div>
@@ -44,7 +44,7 @@ shoppingStore.getEvents()
                     size="x-large"
                   />
                 </div>
-                ab {{ lowestTicketPrice(tour) }} €
+                ab {{ lowestTicketPrice(event) }} €
               </template>
             </card-with-left-image>
           </v-col>

software/src/pages/shows/eventsPage/filterBar.vue

@@ -1,95 +0,0 @@
-<script setup lang="ts">
-import cardView from '@/components/cardView.vue';
-import { useConcertStore } from '@/data/stores/concertStore';
-
-const concertStore = useConcertStore()
-</script>
-
-<template>
-  <card-view
-    variant="tonal"
-  >
-    <v-row>
-      <v-col cols="3">
-        <v-select
-          variant="outlined"
-          :items="concertStore.cities"
-          v-model="concertStore.cityFilter"
-          :label="$t('city')"
-          density="compact"
-          class="mb-n5"
-          :clearable="concertStore.cityFilter != null && concertStore.cityFilter.id != undefined"
-          base-color="secondary"
-          color="secondary"
-        >
-          <template #item="{ props, item }">
-            <v-list-item
-            v-bind="props"
-              :title="item.raw.name + ' (' + item.raw.locations.length + ' ' + 
-              $t('location', item.raw.locations.length) + ')'" />
-          </template>
-
-          <template #selection="{ item }">
-            <v-list-item :title="item.raw.name" />
-          </template>
-        </v-select>
-      </v-col>
-
-      <v-col cols="auto" class="d-flex justify-center align-center px-0">
-        <v-icon icon="mdi-chevron-right" />
-      </v-col>
-
-      <v-col cols="4">
-        <v-select
-          variant="outlined"
-          :items="concertStore.filteredLocations"
-          v-model="concertStore.locationFilter"
-          :label="$t('location', 2)"
-          density="compact"
-          :clearable="concertStore.locationFilter != null && concertStore.locationFilter.id != undefined"
-          :disabled="concertStore.cityFilter == null || concertStore.cityFilter.id == undefined"
-          class="mb-n5"
-          base-color="secondary"
-          color="secondary"
-        >
-          <template #item="{ props, item }">
-            <v-list-item
-              v-bind="props"
-              :title="item.raw.name + ' (' + item.raw.concerts + ' Locations)'"
-            />
-          </template>
-
-          <template #selection="{ item }">
-            <v-list-item :title="item.raw.name" />
-          </template>
-        </v-select>
-      </v-col>
-
-      <v-divider vertical />
-
-      <v-col cols="4">
-        <v-select
-          variant="outlined"
-          :items="concertStore.genres"
-          v-model="concertStore.genreFilter"
-          label="Genre"
-          density="compact"
-          :clearable="concertStore.genreFilter != null && concertStore.genreFilter.id != undefined"
-          class="mb-n5"
-          base-color="secondary"
-          color="secondary"
-        >
-          <template #item="{ props, item }">
-            <v-list-item v-bind="props" :title="item.raw.name + ' (' + item.raw.bands.length + 
-            ' ' + $t('band', item.raw.bands.length) +  ')'"
-          />
-          </template>
-
-          <template #selection="{ item }">
-            <v-list-item :title="item.raw.name" />
-          </template>
-        </v-select>
-      </v-col>
-    </v-row>
-  </card-view>
-</template>