Atomize model classes

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

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { BandModel } from '@/data/models/acts/bandModel';
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { BandApiModel } from '@/data/models/acts/bandApiModel';
+import { RatingModel } from '@/data/models/acts/ratingModel';
 import { calcRating, calcRatingValues } from '@/scripts/concertScripts';
 
-const feedbackStore = useFeedbackStore()
-
 defineProps({
-  band: {
-    type: BandModel,
+  ratings: {
+    type: Array<RatingModel>,
     required: true
   }
 })
@@ -18,32 +16,32 @@ defineProps({
     <v-col>
       <div class="d-flex align-center justify-center flex-column" style="height: 100%;">
         <div class="text-h2 mt-5">
-          {{ calcRating(band.ratings).toFixed(1) }}
+          {{ calcRating(ratings).toFixed(1) }}
           <span class="text-h6 ml-n3">/5</span>
         </div>
     
         <v-rating
-          :model-value="calcRating(band.ratings)"
+          :model-value="calcRating(ratings)"
           color="yellow-darken-3"
           half-increments
           size="x-large"
           readonly
         />
 
-        <div class="px-3 text-h6">{{ band.ratings.length }} {{ $t('rating', band.ratings.length) }}</div>
+        <div class="px-3 text-h6">{{ ratings.length }} {{ $t('rating', ratings.length) }}</div>
       </div>
     </v-col>
 
     <v-col>
       <v-list>
-        <v-list-item v-for="ratingValue in calcRatingValues(band.ratings)">
+        <v-list-item v-for="ratingValue in calcRatingValues(ratings)">
           <template v-slot:prepend>
             <span>{{ ratingValue.value }}</span>
             <v-icon class="ml-3 mr-n3" icon="mdi-star" />
           </template>
 
           <v-progress-linear
-            :model-value="(ratingValue.count / band.ratings.length) * 100"
+            :model-value="(ratingValue.count / ratings.length) * 100"
             height="20"
             color="yellow-darken-3"
             rounded