Split concertsPage

software/src/pages/bands/bandsPage/bandFilterbar.vue

@@ -8,6 +8,8 @@ import { useGenreStore } from '@/stores/genre.store';
 const bandStore = useBandStore()
 const genreStore = useGenreStore()
 
+genreStore.getGenres()
+
 function itemProps(item: GenreModel) {
   return {
     title: item.name

software/src/pages/concerts/concertsPage/concertsListSection.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+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()
+</script>
+
+<template>
+  <div
+    v-if="concertStore.fetchInProgress"
+  >
+    <section-divider :loading="true" />
+    <v-row v-for="i in 3">
+      <v-col>
+        <card-view-horizontal :loading="true" />
+      </v-col>
+    </v-row>
+  </div>
+
+  <div
+    v-else-if="concertStore.concerts.length > 0"
+    v-for="(concert, index) of concertStore.concerts"
+  >
+    <v-row 
+      v-if="index == 0 || 
+      new Date(concertStore.concerts[index - 1].date).getMonth() != 
+      new Date(concertStore.concerts[index].date).getMonth()"
+    >
+      <v-col>
+        <section-divider
+          :title="new Date(concert.date).toLocaleString('default', { month: 'long' }) + ' ' + new Date(concert.date).getFullYear()"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <concert-list-item
+          :concert="concert"
+          :band="concert.band"
+          :location="concert.location"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>

software/src/pages/concerts/concertsPage/index.vue

@@ -4,6 +4,7 @@ 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';
+import ConcertsListSection from './concertsListSection.vue';
 
 const concertStore = useConcertStore()
 
@@ -22,43 +23,7 @@ concertStore.getConcerts()
           </v-col>
         </v-row>
 
-        <v-row
+        <concerts-list-section />
-          v-if="concertStore.fetchInProgress"
-          v-for="i in 3"
-        >
-          <v-col>
-            <card-view-horizontal :loading="true" />        
-          </v-col>
-        </v-row>
-
-
-
-        <div
-          v-else-if="concertStore.concerts.length > 0"
-          v-for="(concert, index) of concertStore.concerts"
-        >
-          <v-row 
-            v-if="index == 0 || 
-            new Date(concertStore.concerts[index - 1].date).getMonth() != 
-            new Date(concertStore.concerts[index].date).getMonth()"
-          >
-            <v-col>
-              <section-divider
-                :title="new Date(concert.date).toLocaleString('default', { month: 'long' }) + ' ' + new Date(concert.date).getFullYear()"
-              />
-            </v-col>
-          </v-row>
-
-          <v-row>
-            <v-col>
-              <concert-list-item
-                :concert="concert"
-                :band="concert.band"
-                :location="concert.location"
-              />
-            </v-col>
-          </v-row>
-        </div>
       </v-col>
 
       <v-spacer />