Slight changes on TicketListItem append section

software/src/components/basics/cardViewOneLine.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps({
+  /** Displayed smaller text on the left side */
+  descriptionText: {
+    type: String,
+    default: ""
+  },
+
+  /** Displayed bigger text on the right side */
+  valueText: [ String, Number ]
+})
+</script>
+
+<template>
+  <v-card variant="outlined" class="my-1 mx-2 px-2">
+    <v-row class="d-flex justify-center align-center">
+      <v-col class="text-caption text-left" v-if="descriptionText.length > 0">
+        {{ descriptionText }}
+      </v-col>
+
+      <v-col class="text-h5 font-weight-bold text-right">
+        {{ valueText }}
+      </v-col>
+    </v-row>
+  </v-card>
+</template>

software/src/components/pageParts/ticketListItem.vue

@@ -5,6 +5,7 @@ import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
 import { BandModel } from '@/data/models/acts/bandModel';
 import { LocationModel } from '@/data/models/locations/locationModel';
 import { CityModel } from '@/data/models/locations/cityModel';
+import cardViewOneLine from '../basics/cardViewOneLine.vue';
 
 defineProps({
   concert: {
@@ -34,9 +35,7 @@ defineProps({
 
   seatRow: Number,
 
-  seatNr: Number,
-
-  standingArea: Boolean
+  seatNr: Number
 })
 </script>
 
@@ -76,41 +75,28 @@ defineProps({
     <template #append>
       <v-row>
         <v-col>
-          <v-card variant="outlined" class="my-1" >
-            <div class="text-caption">
-              {{ $t('seatGroup') }}
+          <card-view-one-line
+            :description-text="$t('seatGroup')"
+            :value-text="seatGroup"
+          />
+
+          <div v-if="seatRow != 0">
+            <card-view-one-line
+              :description-text="$t('seatRow')"
+              :value-text="seatRow"
+            />
+
+            <card-view-one-line
+              :description-text="$t('seat')"
+              :value-text="seatNr"
+            />
           </div>
 
-            <div>
-              {{ seatGroup }}
-            </div>
-
-            <div v-if="standingArea" class="text-caption">
-              {{ $t('standingArea') }}
-            </div>
-          </v-card>
-
-          <div v-if="!standingArea">
-            <v-card variant="outlined" class="my-1" >
-              <div class="text-caption">
-                {{ $t('seatRow') }}
-              </div>
-
-              <div>
-                {{ seatRow }}
-              </div>
-            </v-card>
-
-            <v-card variant="outlined" class="my-1" >
-              <div class="text-caption">
-                {{ $t('seat') }}
-              </div>
-
-              <div>
-                {{ seatNr }}
-              </div>
-            </v-card>
-          </div>
+          <v-div v-else>
+            <card-view-one-line
+              :value-text="$t('standingArea')"
+            />
+          </v-div>
         </v-col>
       </v-row>
     </template>

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

@@ -55,34 +55,8 @@ defineProps({
           :seat="ticket.seat.seatNr"
           :seat-group="ticket.seat.seatRow.seatGroup.name"
           :seat-row="ticket.seat.seatRow.row"
-          :standing-area="ticket.seat.seatRow.seatGroup.standingArea"
         />
       </v-col>
     </v-row>
-
-      <!-- <v-row>
-        <v-col>
-          <v-table class="bg-surface-light">
-            <thead>
-              <tr>
-                <th>{{ $t('quantity') }}</th>
-                <th>{{ $t('event') }}</th>
-                <th>{{ $t('seatGroup') }}</th>
-                <th>{{ $t('seatRow') }}</th>
-                <th>{{ $t('seat') }}</th>
-                <th>{{ $t('product.productPrice') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="orderItem in order.orderItems">
-                <td>{{ orderItem.quantity }}x</td>
-                <td>{{ orderItem }}</td>
-                <td>{{ orderItem }}</td>
-                <td>{{ orderItem }} €</td>
-              </tr>
-            </tbody>
-          </v-table>
-        </v-col>
-      </v-row> -->
   </card-view>
 </template>

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

@@ -6,6 +6,7 @@ import { useBasketStore } from '@/stores/basket.store';
 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';
 
 const router = useRouter()
 const basketStore = useBasketStore()
@@ -84,7 +85,16 @@ concertStore.getConcert(Number(router.currentRoute.value.params.id))
           <v-col>
             <v-list >
               <v-list-item v-for="seat in basketStore.selectedSeats" >
-                Group: {{ seat.seatGroupName }} - Row: {{ seat.seatRow }} - Seat: {{ seat.seat.seatNr }}
+                <ticket-list-item
+                  :concert="concertStore.concert"
+                  :band="concertStore.concert.band"
+                  :location="concertStore.concert.location"
+                  :city="concertStore.concert.location.city"
+                  :image="concertStore.concert.image"
+                  :seat-group="seat.seatGroupName"
+                  :seat-nr="seat.seat.seatNr"
+                  :seat-row="seat.seatRow"
+                />
               </v-list-item>
             </v-list>
           </v-col>