From a3e8d30b6ccf6519b50233250ed27e94bebbbcb8 Mon Sep 17 00:00:00 2001
From: Tobias Zoghaib <tobias.zoghaib@stud.uni-hannover.de>
Date: Mon, 4 Nov 2024 12:04:15 +0100
Subject: [PATCH] Small improvements on account pages, added payment info card

---
 software/src/components/basics/cardView.vue   |   1 -
 .../basics/circularProgressIndeterminate.vue  |  11 ++
 software/src/layouts/accountSubPageLayout.vue |  21 ++++
 software/src/locales/de.json                  |   3 +-
 software/src/locales/en.json                  |   3 +-
 .../pages/account/accountDataPage/index.vue   |  14 +--
 .../account/accountDataPage/paymentsCard.vue  | 111 ++++++++++--------
 .../src/pages/account/ordersPage/index.vue    |  24 ++--
 .../pages/account/ordersPage/orderItem.vue    |   8 +-
 .../concerts/concertBookingPage/index.vue     |   8 +-
 .../locations/locationDetailPage/index.vue    |   5 +-
 .../pages/locations/locationsPage/index.vue   |   5 +-
 12 files changed, 123 insertions(+), 91 deletions(-)
 create mode 100644 software/src/components/basics/circularProgressIndeterminate.vue
 create mode 100644 software/src/layouts/accountSubPageLayout.vue

diff --git a/software/src/components/basics/cardView.vue b/software/src/components/basics/cardView.vue
index 2fc5899..7b2abb3 100644
--- a/software/src/components/basics/cardView.vue
+++ b/software/src/components/basics/cardView.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 defineProps({
   title: String,
   subtitle: String,
diff --git a/software/src/components/basics/circularProgressIndeterminate.vue b/software/src/components/basics/circularProgressIndeterminate.vue
new file mode 100644
index 0000000..d2506d7
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/software/src/layouts/accountSubPageLayout.vue b/software/src/layouts/accountSubPageLayout.vue
new file mode 100644
index 0000000..a75141f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/software/src/locales/de.json b/software/src/locales/de.json
index 55ca551..44b1249 100644
--- a/software/src/locales/de.json
+++ b/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",
diff --git a/software/src/locales/en.json b/software/src/locales/en.json
index 3e8ca12..23c92f7 100644
--- a/software/src/locales/en.json
+++ b/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",
diff --git a/software/src/pages/account/accountDataPage/index.vue b/software/src/pages/account/accountDataPage/index.vue
index 4810733..2155b2a 100644
--- a/software/src/pages/account/accountDataPage/index.vue
+++ b/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">
-    <v-row>
-      <v-col>
-        <outlined-button prepend-icon="mdi-arrow-left" @click="router.back()" >
-          {{ $t('misc.onePageBack') }}
-        </outlined-button>
-      </v-col>
-    </v-row>
-
+  <account-sub-page-layout>
     <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>
\ No newline at end of file
diff --git a/software/src/pages/account/accountDataPage/paymentsCard.vue b/software/src/pages/account/accountDataPage/paymentsCard.vue
index 6ce3f22..6a13c35 100644
--- a/software/src/pages/account/accountDataPage/paymentsCard.vue
+++ b/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,54 +14,71 @@ const accountStore = useAccountStore()
     icon="mdi-currency-usd"
     :title="$t('account.userData.payment')"
   >
-    <v-expansion-panels
-      v-if="accountStore.userAccount.payments.length > 0"
-    >
-      <v-expansion-panel
-        v-for="payment in accountStore.userAccount.payments"
-        color="primary"
-      >
-        <template #title>
-          {{ payment.bankName }}
-        </template>
-        <template #text>
-          <v-row class="pt-5">
-            <v-col>
-              <v-text-field
-                :label="$t('account.userData.bankName')"
-                v-model="payment.bankName"
-                :rules="getStringRules()"
-              />
-            </v-col>
-            <v-col>
-              <v-text-field
-                :label="$t('account.userData.iban')"
-                v-model="payment.iban"
-                :rules="getIbanRules()"
-              />
-            </v-col>
-          </v-row>
+    <v-row>
+      <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"
+          >
+            <template #title>
+              {{ payment.bankName }}
+            </template>
+            <template #text>
+              <v-row class="pt-5">
+                <v-col>
+                  <v-text-field
+                    :label="$t('account.userData.bankName')"
+                    v-model="payment.bankName"
+                    :rules="getStringRules()"
+                  />
+                </v-col>
+                <v-col>
+                  <v-text-field
+                    :label="$t('account.userData.iban')"
+                    v-model="payment.iban"
+                    :rules="getIbanRules()"
+                  />
+                </v-col>
+              </v-row>
+
+              <v-row>
+                <v-col class="d-flex justify-center align-center">
+                  <outlined-button
+                    @click="accountStore.removePayment(payment)"
+                    color="red"
+                    prepend-icon="mdi-delete"
+                  >
+                    {{ $t('misc.actions.remove') }}
+                  </outlined-button>
+                </v-col>
+              </v-row>
+            </template>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-col>
+    </v-row>
+
+    <v-row v-else>
+      <v-col>
+        <v-empty-state
+          :title="$t('account.noPayments')"
+          icon="mdi-currency-usd-off"
+        />
+      </v-col>
+    </v-row>
 
-          <v-row>
-            <v-col class="d-flex justify-center align-center">
-              <outlined-button
-                @click="accountStore.removePayment(payment)"
-                color="red"
-                prepend-icon="mdi-delete"
-              >
-                {{ $t('misc.actions.remove') }}
-              </outlined-button>
-            </v-col>
-          </v-row>
-        </template>
-      </v-expansion-panel>
-    </v-expansion-panels>
 
-    <v-empty-state
-      v-else
-      :title="$t('account.noPayments')"
-      icon="mdi-currency-usd-off"
-    />
 
     <template #actions>
       <outlined-button
diff --git a/software/src/pages/account/ordersPage/index.vue b/software/src/pages/account/ordersPage/index.vue
index b00affa..e7311e4 100644
--- a/software/src/pages/account/ordersPage/index.vue
+++ b/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 outlinedButton from '@/components/basics/outlinedButton.vue';
+import accountSubPageLayout from '@/layouts/accountSubPageLayout.vue';
+import circularProgressIndeterminate from '@/components/basics/circularProgressIndeterminate.vue';
 
 const accountStore = useAccountStore()
-const router = useRouter()
 
 accountStore.refreshOrders()
 </script>
 
 <template>
-  <v-container max-width="1000">
-    <v-row>
-      <v-col>
-        <outlined-button prepend-icon="mdi-arrow-left" @click="router.back()" >
-          {{ $t('misc.onePageBack') }}
-        </outlined-button>
+  <account-sub-page-layout>
+    <!-- During fetching state -->
+    <v-row
+      v-if="accountStore.fetchInProgress"
+    >
+      <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>
\ No newline at end of file
diff --git a/software/src/pages/account/ordersPage/orderItem.vue b/software/src/pages/account/ordersPage/orderItem.vue
index c52fbc6..85434ea 100644
--- a/software/src/pages/account/ordersPage/orderItem.vue
+++ b/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,
-  loading: {
-    type: Boolean,
-    default: false
-  }
+  order: OrderApiModel
 })
 </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"
         />
diff --git a/software/src/pages/concerts/concertBookingPage/index.vue b/software/src/pages/concerts/concertBookingPage/index.vue
index 2a769b2..61ae855 100644
--- a/software/src/pages/concerts/concertBookingPage/index.vue
+++ b/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
-              size="x-large"
-              width="10"
-              color="primary"
-              indeterminate
-            />
+            <circular-progress-indeterminate />
 
             <div class="pt-5 text-h3">
               {{ $t('misc.loading') }}...
diff --git a/software/src/pages/locations/locationDetailPage/index.vue b/software/src/pages/locations/locationDetailPage/index.vue
index 5c105bd..875286f 100644
--- a/software/src/pages/locations/locationDetailPage/index.vue
+++ b/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>
 
diff --git a/software/src/pages/locations/locationsPage/index.vue b/software/src/pages/locations/locationsPage/index.vue
index af4b111..472a096 100644
--- a/software/src/pages/locations/locationsPage/index.vue
+++ b/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>