Small improvements on account pages, added payment info card

software/src/components/basics/cardView.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 defineProps({
   title: String,
   subtitle: String,

software/src/components/basics/circularProgressIndeterminate.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <v-progress-circular
+    size="128"
+    width="12"
+    color="primary"
+    indeterminate
+  />
+</template>

software/src/layouts/accountSubPageLayout.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+
+const router = useRouter()
+</script>
+
+<template>
+  <v-container max-width="1000">
+    <!-- Back to previous page -->
+    <v-row>
+      <v-col>
+        <outlined-button prepend-icon="mdi-arrow-left" @click="router.back()" >
+          {{ $t('misc.onePageBack') }}
+        </outlined-button>
+      </v-col>
+    </v-row>
+
+    <slot></slot>
+  </v-container>
+</template>

software/src/locales/de.json

@@ -106,7 +106,8 @@
       }
     },
     "addNewAccount": "Neuen Account hinzufügen",
-    "accountRole": "Account Rolle"
+    "accountRole": "Account Rolle",
+    "noRealPaymentsNeeded": "Keine echten Kontodaten nötig!"
   },
   "order": {
     "orders": "Bestellung | Bestellungen",

software/src/locales/en.json

@@ -106,7 +106,8 @@
       }
     },
     "addNewAccount": "Add new account",
-    "accountRole": "Account Role"
+    "accountRole": "Account Role",
+    "noRealPaymentsNeeded": "No real payment data required!"
   },
   "order": {
     "orders": "Order | Orders",

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

@@ -3,22 +3,14 @@ import accountDataCard from './accountDataCard.vue';
 import accountManagingCard from './accountManagingCard.vue';
 import addressesCard from './addressesCard.vue';
 import paymentsCard from './paymentsCard.vue';
-import OutlinedButton from '@/components/basics/outlinedButton.vue';
 import { useRouter } from 'vue-router';
+import accountSubPageLayout from '@/layouts/accountSubPageLayout.vue';
 
 const router = useRouter()
 </script>
 
 <template>
-  <v-container max-width="1000">
+  <account-sub-page-layout>
-    <v-row>
-      <v-col>
-        <outlined-button prepend-icon="mdi-arrow-left" @click="router.back()" >
-          {{ $t('misc.onePageBack') }}
-        </outlined-button>
-      </v-col>
-    </v-row>
-
     <v-row>
       <v-col>
         <account-data-card />
@@ -42,5 +34,5 @@ const router = useRouter()
         <account-managing-card />
       </v-col>
     </v-row>
-  </v-container>
+  </account-sub-page-layout>
 </template>

software/src/pages/account/accountDataPage/paymentsCard.vue

@@ -4,9 +4,9 @@ import { useAccountStore } from '@/stores/account.store';
 import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { PaymentModel } from '@/data/models/user/paymentModel';
 import { getIbanRules, getStringRules } from '@/scripts/validationRules';
+import cardViewOneLine from '@/components/basics/cardViewOneLine.vue';
 
 const accountStore = useAccountStore()
-
 </script>
 
 <template>
@@ -14,9 +14,19 @@ const accountStore = useAccountStore()
     icon="mdi-currency-usd"
     :title="$t('account.userData.payment')"
   >
-    <v-expansion-panels
+    <v-row>
-      v-if="accountStore.userAccount.payments.length > 0"
+      <v-col>
-    >
+        <card-view-one-line
+          color="amber"
+          prepend-icon="mdi-alert"
+          :title="$t('account.noRealPaymentsNeeded')"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row v-if="accountStore.userAccount.payments.length > 0">
+      <v-col>
+        <v-expansion-panels>
           <v-expansion-panel
             v-for="payment in accountStore.userAccount.payments"
             color="primary"
@@ -56,12 +66,19 @@ const accountStore = useAccountStore()
             </template>
           </v-expansion-panel>
         </v-expansion-panels>
+      </v-col>
+    </v-row>
 
+    <v-row v-else>
+      <v-col>
         <v-empty-state
-      v-else
           :title="$t('account.noPayments')"
           icon="mdi-currency-usd-off"
         />
+      </v-col>
+    </v-row>
+
+
 
     <template #actions>
       <outlined-button

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

@@ -1,27 +1,28 @@
 <script setup lang="ts">
 import { useAccountStore } from '@/stores/account.store';
 import orderItem from './orderItem.vue';
-import { useRouter } from 'vue-router';
+import accountSubPageLayout from '@/layouts/accountSubPageLayout.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
+import circularProgressIndeterminate from '@/components/basics/circularProgressIndeterminate.vue';
 
 const accountStore = useAccountStore()
-const router = useRouter()
 
 accountStore.refreshOrders()
 </script>
 
 <template>
-  <v-container max-width="1000">
+  <account-sub-page-layout>
-    <v-row>
+    <!-- During fetching state -->
-      <v-col>
+    <v-row
-        <outlined-button prepend-icon="mdi-arrow-left" @click="router.back()" >
+      v-if="accountStore.fetchInProgress"
-          {{ $t('misc.onePageBack') }}
+    >
-        </outlined-button>
+      <v-col class="text-center">
+        <circular-progress-indeterminate />
       </v-col>
     </v-row>
 
+    <!-- Display all orders -->
     <v-row
-      v-if="accountStore.orders.length > 0"
+      v-else-if="accountStore.orders.length > 0"
       v-for="order in accountStore.orders"
     >
       <v-col>
@@ -31,6 +32,7 @@ accountStore.refreshOrders()
       </v-col>
     </v-row>
 
+    <!-- No orders -->
     <v-row v-else>
       <v-col>
         <v-empty-state
@@ -40,5 +42,5 @@ accountStore.refreshOrders()
         />
       </v-col>
     </v-row>
-  </v-container>
+  </account-sub-page-layout>
 </template>

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

@@ -5,11 +5,7 @@ import { OrderApiModel } from '@/data/models/apiEndpoints/orderApiModel';
 import moment from 'moment';
 
 defineProps({
-  order: OrderApiModel,
+  order: OrderApiModel
-  loading: {
-    type: Boolean,
-    default: false
-  }
 })
 </script>
 
@@ -52,7 +48,7 @@ defineProps({
           :location="ticket.concert.location"
           :city="ticket.concert.location.city"
           :image="ticket.concert.image"
-          :seat="ticket.seat.seatNr"
+          :seat-nr="ticket.seat.seatNr"
           :seat-group="ticket.seat.seatRow.seatGroup.name"
           :seat-row="ticket.seat.seatRow.row"
         />

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

@@ -7,6 +7,7 @@ import concertListItem from '@/components/pageParts/concertListItem.vue';
 import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { useConcertStore } from '@/stores/concert.store';
 import ticketListItem from '@/components/pageParts/ticketListItem.vue';
+import circularProgressIndeterminate from '@/components/basics/circularProgressIndeterminate.vue';
 
 const router = useRouter()
 const basketStore = useBasketStore()
@@ -53,12 +54,7 @@ concertStore.getConcert(Number(router.currentRoute.value.params.id))
 
         <v-row >
           <v-col class="text-center" v-if="concertStore.fetchInProgress">
-            <v-progress-circular
+            <circular-progress-indeterminate />
-              size="x-large"
-              width="10"
-              color="primary"
-              indeterminate
-            />
 
             <div class="pt-5 text-h3">
               {{ $t('misc.loading') }}...

software/src/pages/locations/locationDetailPage/index.vue

@@ -2,12 +2,11 @@
 import { useRouter } from 'vue-router';
 import sectionDivider from '@/components/basics/sectionDivider.vue';
 import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
-import { ref } from 'vue';
 import heroImage from '@/components/pageParts/heroImage.vue';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
-import { LocationDetailsApiModel } from '@/data/models/locations/locationDetailsApiModel';
 import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
 import { useLocationStore } from '@/stores/location.store';
+import circularProgressIndeterminate from '@/components/basics/circularProgressIndeterminate.vue';
 
 const router = useRouter()
 const locationStore = useLocationStore()
@@ -82,7 +81,7 @@ locationStore.getLocationByName(String(router.currentRoute.value.params.name))
 
         <div v-if="locationStore.fetchInProgress">
           <v-col class="text-center">
-            <v-progress-circular indeterminate :size="128" :width="12" color="primary" />
+            <circular-progress-indeterminate />
           </v-col>
         </div>
 

software/src/pages/locations/locationsPage/index.vue

@@ -11,9 +11,6 @@ locationStore.getLocations()
 
 <template>
   <v-container>
-    <v-row>
-
-    </v-row>
     <v-row>
       <v-spacer />
 
@@ -26,7 +23,7 @@ locationStore.getLocations()
             </v-col>
           </v-row>
 
-          <v-row >
+          <v-row>
             <v-col class="text-center" v-for="i in 4" cols="3">
               <card-with-top-image :loading="true" />
             </v-col>