Documentation

software/src/pages/account/ordersPage/index.vue

@@ -8,7 +8,6 @@ import { useOrderStore } from '@/stores/order.store';
 const accountStore = useAccountStore()
 const orderStore = useOrderStore()
 
-accountStore.refreshOrders()
 orderStore.getOrdersOfAccount(accountStore.userAccount)
 </script>
 
@@ -16,7 +15,7 @@ orderStore.getOrdersOfAccount(accountStore.userAccount)
   <account-sub-page-layout>
     <!-- During fetching state -->
     <v-row
-      v-if="accountStore.fetchInProgress"
+      v-if="orderStore.fetchInProgress"
     >
       <v-col class="text-center">
         <circular-progress-indeterminate />

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

@@ -1,19 +1,18 @@
 <script setup lang="ts">
 import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
-import { BandApiModel } from '@/data/models/acts/bandApiModel';
+import sectionDivider from '@/components/basics/sectionDivider.vue';
 import { useBandStore } from '@/stores/band.store';
 
 const bandStore = useBandStore()
-
-defineProps({
-  band: {
-    type: BandApiModel,
-    required: true
-  }
-})
 </script>
 
 <template>
+  <v-row>
+    <v-col>
+      <section-divider :title="$t('band.bandMember')" />
+    </v-col>
+  </v-row>
+
   <v-row v-if="bandStore.fetchInProgress" >
     <v-col cols="3" v-for="i in 4">
       <card-with-top-image :loading="true" />
@@ -23,7 +22,7 @@ defineProps({
   <v-row>
     <v-spacer />
 
-    <v-col v-for="member of band.members" cols="3">
+    <v-col v-for="member of bandStore.band.members" cols="3">
       <card-with-top-image
         :title="member.name"
         :image=" member.image"

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

@@ -1,30 +1,30 @@
 <script setup lang="ts">
 import concertListItem from '@/components/pageParts/concertListItem.vue';
-import { BandApiModel } from '@/data/models/acts/bandApiModel';
-import { ConcertApiModel } from '@/data/models/acts/concertApiModel';
 import CardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
-import { useConcertStore } from '@/stores/concert.store';
+import sectionDivider from '@/components/basics/sectionDivider.vue';
+import { useBandStore } from '@/stores/band.store';
 
-const concertStore = useConcertStore()
-
-defineProps({
-  band: BandApiModel,
-  concerts: Array<ConcertApiModel>
-})
+const bandStore = useBandStore()
 </script>
 
 <template>
-  <v-row v-if="concertStore.fetchInProgress" v-for="i in 3">
+  <v-row>
+    <v-col>
+      <section-divider :title="$t('concert.concert', 2)" />
+    </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-for="concert of concerts">
+  <v-row v-for="concert of bandStore.band.concerts">
     <v-col>
       <concert-list-item
         :concert="concert"
-        :band="band"
+        :band="bandStore.band"
         :location="concert.location"
         :title="concert.location.city.name"
         :link="concert.inStock > 0"

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

@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { BandModel } from '@/data/models/acts/bandModel';
 import { useBandStore } from '@/stores/band.store';
+import sectionDivider from '@/components/basics/sectionDivider.vue';
 
 const bandStore = useBandStore()
-
-defineProps({
-  band: {
-    type: BandModel,
-    required: true
-  }
-})
 </script>
 
 <template>
+  <v-row>
+    <v-col>
+      <section-divider :title="$t('band.image', 2)" />
+    </v-col>
+  </v-row>
+
   <v-row>
     <v-col>
       <v-skeleton-loader
@@ -43,7 +42,7 @@ defineProps({
 
 
           <v-carousel-item
-            v-for="image in band.images"
+            v-for="image in bandStore.band.images"
             :src="image" 
             cover
           />

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

@@ -5,7 +5,6 @@ import bandMemberSection from './bandMemberSection.vue';
 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 { useBandStore } from '@/stores/band.store';
 import { onMounted, watch } from 'vue';
 
@@ -36,49 +35,16 @@ watch(() => router.currentRoute.value.params.name, () => {
       <v-spacer />
 
       <v-col cols="10">
-        <v-row>
-          <v-col>
-            <section-divider :title="$t('concert.concert', 2)" />
-          </v-col>
-        </v-row>
+        <concert-section />
 
-        <concert-section
-          :band="bandStore.band"
-          :concerts="bandStore.band.concerts"
-        />
-
-        <v-row>
-          <v-col>
-            <section-divider :title="$t('band.bandMember')" />
-          </v-col>
-        </v-row>
-
-        <band-member-section
-          :band="bandStore.band"
-        />
-        
-
-        <v-row>
-          <v-col>
-            <section-divider :title="$t('band.rating', 2)" />
-          </v-col>
-        </v-row>
+        <band-member-section />
 
         <rating-section
           :rating="bandStore.band.rating"
           :ratings="bandStore.band.ratingValues"
         />
 
-
-        <v-row>
-          <v-col>
-            <section-divider :title="$t('band.image', 2)" />
-          </v-col>
-        </v-row>
-
-        <gallery-section
-          :band="bandStore.band"
-        />
+        <gallery-section />
       </v-col>
 
       <v-spacer />

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { RatingModel } from '@/data/models/acts/ratingModel';
+import sectionDivider from '@/components/basics/sectionDivider.vue';
 
 defineProps({
   /**
@@ -18,6 +19,12 @@ defineProps({
 </script>
 
 <template>
+  <v-row>
+    <v-col>
+      <section-divider :title="$t('band.rating', 2)" />
+    </v-col>
+  </v-row>
+
   <v-row>
     <v-col>
       <div class="d-flex align-center justify-center flex-column" style="height: 100%;">