Filterbar on Concert page

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

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>

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>