Remove EventModel in frontend

software/src/pages/bands/bandDetailPage/concertSection.vue

@@ -1,48 +1,34 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
-import { ConcertApiModel } from '@/data/models/acts/concertApiModel';
 import { BandApiModel } from '@/data/models/acts/bandApiModel';
-import { EventApiModel } from '@/data/models/acts/eventApiModel';
+import { ConcertApiModel } from '@/data/models/acts/concertApiModel';
+import CardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import { useConcertStore } from '@/data/stores/concertStore';
 
-const router = useRouter()
-const feedbackStore = useFeedbackStore()
+const concertStore = useConcertStore()
 
 defineProps({
   band: BandApiModel,
-  events: Array<EventApiModel>
+  concerts: Array<ConcertApiModel>
 })
 </script>
 
 <template>
-  <v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
+  <v-row v-if="concertStore.fetchInProgress" v-for="i in 3">
     <v-col>
-      <!-- <concert-list-item
-        :loading="true" /> -->
+      <card-view-horizontal :loading="true" />
     </v-col>
   </v-row>
 
-  <div v-else v-for="event of events">
-    <v-row v-for="concert of event.concerts">
-      <v-col>
-        <concert-list-item
-          :concert="concert"
-          :title="concert.location.city.name"
-          :link="concert.inStock > 0"
-          :onClick="() => router.push('/concert/' + concert.id)"
-        >
-          <template #description>
-            <div>
-              {{ concert.location.name }}
-            </div>
-
-            <div>
-              {{ band.name }} - {{ band.events[0].name }}
-            </div>
-          </template>
-        </concert-list-item>
-      </v-col>
-    </v-row>
-  </div>
+  <v-row v-for="concert of concerts">
+    <v-col>
+      <concert-list-item
+        :concert="concert"
+        :band="band"
+        :location="concert.location"
+        :title="concert.location.city.name"
+        :link="concert.inStock > 0"
+      />
+    </v-col>
+  </v-row>
 </template>

software/src/pages/bands/bandDetailPage/gallerySection.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { BandModel } from '@/data/models/acts/bandModel';
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { useBandStore } from '@/data/stores/bandStore';
 
-const feedbackStore = useFeedbackStore()
+const bandStore = useBandStore()
 
 defineProps({
   band: {
@@ -17,7 +17,7 @@ defineProps({
     <v-col>
       <v-skeleton-loader
         type="image"
-        :loading="feedbackStore.fetchDataFromServerInProgress"
+        :loading="bandStore.fetchInProgress"
       >
         <v-carousel
           show-arrows

software/src/pages/bands/bandDetailPage/index.vue

@@ -6,35 +6,22 @@ import gallerySection from './gallerySection.vue';
 import concertSection from './concertSection.vue';
 import heroImage from '@/components/pageParts/heroImage.vue';
 import sectionDivider from '@/components/basics/sectionDivider.vue';
-import { useShoppingStore } from '@/data/stores/shoppingStore';
-import { ref } from 'vue';
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
-import { getBand } from '@/data/api/bandApi';
-import { BandApiModel } from '@/data/models/acts/bandApiModel';
-import { genre } from 'backend/routes/genre.routes';
+import { useBandStore } from '@/data/stores/bandStore';
 
 const router = useRouter()
-const shoppingStore = useShoppingStore()
-const feedbackStore = useFeedbackStore()
-const band = ref<BandApiModel>(new BandApiModel())
+const bandStore = useBandStore()
 
-feedbackStore.fetchDataFromServerInProgress = true
-
-getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
-  .then(result => {
-    band.value = result.data
-    feedbackStore.fetchDataFromServerInProgress = false
-  })
+bandStore.getBand(String(router.currentRoute.value.params.name).replaceAll('-', ' '))
 </script>
 
 <template>
   <hero-image
-    :image="band.imageMembers"
-    :logo="band.logo"
-    :title="band.name"
-    :chips="band.genres.map(genre => genre.name)"
-    :description="band.descriptionDe"
-    :loading="feedbackStore.fetchDataFromServerInProgress"
+    :image="bandStore.band.imageMembers"
+    :logo="bandStore.band.logo"
+    :title="bandStore.band.name"
+    :chips="bandStore.band.genres.map(genre => genre.name)"
+    :description="bandStore.band.descriptionDe"
+    :loading="bandStore.fetchInProgress"
   />
 
   <v-container>
@@ -49,8 +36,8 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
         </v-row>
 
         <concert-section
-          :band="band"
-          :events="band.events"
+          :band="bandStore.band"
+          :concerts="bandStore.band.concerts"
         />
 
         <v-row>
@@ -59,7 +46,9 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
           </v-col>
         </v-row>
 
-        <band-member-section :band="band" />
+        <band-member-section
+          :band="bandStore.band"
+        />
         
 
         <v-row>
@@ -68,7 +57,10 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
           </v-col>
         </v-row>
 
-        <rating-section :ratings="band.ratings" />
+        <rating-section
+          :rating="bandStore.band.rating"
+          :ratings="bandStore.band.ratingValues"
+        />
 
 
         <v-row>
@@ -77,7 +69,9 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
           </v-col>
         </v-row>
 
-        <gallery-section :band="band" />
+        <gallery-section
+          :band="bandStore.band"
+        />
       </v-col>
 
       <v-spacer />

software/src/pages/bands/bandDetailPage/ratingSection.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { BandApiModel } from '@/data/models/acts/bandApiModel';
 import { RatingModel } from '@/data/models/acts/ratingModel';
 
 defineProps({
+  /**
+   * Overall rating of the band
+   */
   rating: Number,
+
+  /**
+   * Array of rating steps from 1 to 5
+   */
   ratings: {
     type: Array<RatingModel>,
     required: true

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

@@ -1,6 +1,49 @@
 <script setup lang="ts">
+import { useBandStore } from '@/data/stores/bandStore';
+import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import bandListItem from '@/components/pageParts/bandListItem.vue';
+
+const bandStore = useBandStore()
+
+bandStore.getBands()
 </script>
 
 <template>
-  Bands
+  <v-container>
+    <v-row>
+      <v-spacer />
+
+      <v-col cols="10">
+        <v-row>
+          <v-col>
+            Filterbar
+          </v-col>
+        </v-row>
+
+        <v-row
+          v-if="bandStore.fetchInProgress"
+          v-for="i in 3"
+        >
+          <v-col>
+            <card-view-horizontal :loading="true" />
+          </v-col>
+        </v-row>
+
+        <v-row
+          v-else-if="bandStore.bands.length > 0"
+          v-for="band in bandStore.bands"
+        >
+          <v-col>
+            <band-list-item
+              :band="band"
+              :concerts="band.concerts"
+              :genres="band.genres"
+            />
+          </v-col>
+        </v-row>
+      </v-col>
+
+      <v-spacer />
+    </v-row>
+  </v-container>
 </template>