Connect Orders database table with Payments and Addresses, visualize it in the frontend

software/src/pages/basketPage/orderingDialog.vue

@@ -9,12 +9,28 @@ const basketStore = useBasketStore()
 const accountStore = useAccountStore()
 const showDialog: ModelRef<boolean> = defineModel()
 const orderingInProgress = ref(false)
+const addressError = ref(false)
+const paymentError = ref(false)
 
 async function doOrder() {
   orderingInProgress.value = true
-  await basketStore.takeOrder()
+  addressError.value = false
+  paymentError.value = false
+
+  if (basketStore.usedAddress == null) {
+    addressError.value = true
+  }
+
+  if (basketStore.usedPayment == null){
+    paymentError.value = true
+  }
+
+  if (basketStore.usedAddress != null && basketStore.usedPayment != null) {
+    
+    await basketStore.takeOrder()
+    showDialog.value = false
+  }
   
-  showDialog.value = false
   orderingInProgress.value = false
 }
 </script>
@@ -25,29 +41,65 @@ async function doOrder() {
     icon="mdi-basket-check"
     v-model="showDialog"
     max-width="800"
+    persistent
   >
     <v-row>
       <v-col>
-        Address
+        {{ $t('account.address', accountStore.userAccount.addresses.length) }}
       </v-col>
     </v-row>
     
     <v-row>
       <v-col>
-        <v-radio-group>
+        <v-radio-group
+          v-model="basketStore.usedAddress"
+          :error="addressError"
+        >
           <v-radio
             v-for="address in accountStore.userAccount.addresses"
             :value="address"
             :label="address.street + ' ' + address.houseNumber + ', ' + address.postalCode + ' ' + address.city"
+            
+          />
+        </v-radio-group>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        {{ $t('account.payment', accountStore.userAccount.payments.length) }}
+      </v-col>
+    </v-row>
+    
+    <v-row>
+      <v-col>
+        <v-radio-group
+          v-model="basketStore.usedPayment"
+        >
+          <v-radio
+            v-for="payment in accountStore.userAccount.payments"
+            :value="payment"
+            :label="payment.bankName + ': ' + payment.iban"
+            :error="paymentError"
           />
         </v-radio-group>
       </v-col>
     </v-row>
 
     <template #actions>
+      <outlined-button 
+        @click="showDialog = false"
+        prepend-icon="mdi-close"
+        color="orange"
+      >
+        {{ $t('dialog.cancel') }}
+      </outlined-button>
+
       <outlined-button
         @click="doOrder"
         :loading="orderingInProgress"
+        prepend-icon="mdi-send"
+        color="green"
       >
         {{ $t('ordering.takeOrder') }}
       </outlined-button>

software/src/pages/ordersPage/ordersCard.vue

@@ -36,46 +36,81 @@ function formatDateTimeString(string: string) {
     :subtitle="$t('totalPrice') + ': ' + accountStore.getOrderTotalPrice(order.id) + ' €'"
   >
     <template #withoutContainer>
-      <v-timeline direction="horizontal" side="start" size="x-large">
-        <v-timeline-item :dot-color="getDotColor(order, 1)" icon="mdi-basket-check">
-          {{ $t('orders.ordered') }}
-        </v-timeline-item>
+      <v-row>
+        <v-col>
+          <v-timeline direction="horizontal" side="start" size="x-large">
+            <v-timeline-item :dot-color="getDotColor(order, 1)" icon="mdi-basket-check">
+              {{ $t('orders.ordered') }}
+            </v-timeline-item>
 
-        <v-timeline-item :dot-color="getDotColor(order, 2)" icon="mdi-package-variant">
-          {{ $t('orders.preparingForShipping') }}
-        </v-timeline-item>
+            <v-timeline-item :dot-color="getDotColor(order, 2)" icon="mdi-package-variant">
+              {{ $t('orders.preparingForShipping') }}
+            </v-timeline-item>
 
-        <v-timeline-item :dot-color="getDotColor(order, 3)" icon="mdi-send">
-          {{ $t('orders.shipped') }}
-        </v-timeline-item>
+            <v-timeline-item :dot-color="getDotColor(order, 3)" icon="mdi-send">
+              {{ $t('orders.shipped') }}
+            </v-timeline-item>
 
-        <v-timeline-item :dot-color="getDotColor(order, 4)" icon="mdi-truck-fast">
-          {{ $t('orders.inDelivery') }}
-        </v-timeline-item>
+            <v-timeline-item :dot-color="getDotColor(order, 4)" icon="mdi-truck-fast">
+              {{ $t('orders.inDelivery') }}
+            </v-timeline-item>
 
-        <v-timeline-item :dot-color="getDotColor(order, 5)" icon="mdi-package-check">
-          {{ $t('orders.delivered') }}
-        </v-timeline-item>
-      </v-timeline>
+            <v-timeline-item :dot-color="getDotColor(order, 5)" icon="mdi-package-check">
+              {{ $t('orders.delivered') }}
+            </v-timeline-item>
+          </v-timeline>
+        </v-col>
+      </v-row>
 
-      <v-table class="bg-surface-light">
-        <thead>
-          <tr>
-            <th>{{ $t('quantity') }}</th>
-            <th>{{ $t('product.brand') }}</th>
-            <th>{{ $t('product.productName') }}</th>
-            <th>{{ $t('product.productPrice') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="orderItem in order.orderItems">
-            <td>{{ orderItem.quantity }}x</td>
-            <td>{{ orderItem.product.brand.name }}</td>
-            <td>{{ orderItem.product.name }}</td>
-            <td>{{ orderItem.product.price }} €</td>
-          </tr>
-        </tbody>
-      </v-table>
+      <v-row>
+        <v-col>
+          <v-card variant="outlined" class="ml-5 pa-3">
+            <div class="text-h6">
+              <v-icon icon="mdi-home" />
+              {{ $t('account.address', 1) }}
+            </div>
+
+            <div class="pl-9">{{ order.address.street }} {{ order.address.houseNumber }}</div>
+            <div class="pl-9">{{ order.address.postalCode }} {{ order.address.city }}</div>
+          </v-card>
+        </v-col>
+
+        <v-col>
+          <v-card variant="outlined" class="mr-5 pa-3">
+            <div class="text-h6">
+              <v-icon icon="mdi-currency-usd" />
+              {{ $t('account.payment', 1) }}
+            </div>
+            <div class="pl-9">{{ order.payment.bankName }}</div>
+            <div class="pl-9">{{ order.payment.iban }}</div>
+          </v-card>
+        </v-col>
+
+        
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-table class="bg-surface-light">
+            <thead>
+              <tr>
+                <th>{{ $t('quantity') }}</th>
+                <th>{{ $t('product.brand') }}</th>
+                <th>{{ $t('product.productName') }}</th>
+                <th>{{ $t('product.productPrice') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="orderItem in order.orderItems">
+                <td>{{ orderItem.quantity }}x</td>
+                <td>{{ orderItem.product.brand.name }}</td>
+                <td>{{ orderItem.product.name }}</td>
+                <td>{{ orderItem.product.price }} €</td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-col>
+      </v-row>
     </template>
   </card-view>
 </template>

software/src/pages/productsPage/productDetailsDialog.vue

@@ -142,7 +142,7 @@ watch(() => props.product.images, () => {
         v-model="nrOfArticles"
         variant="outlined"
         :min="1"
-        :max="10"
+        :max="product.inStock"
         density="comfortable"
         :hide-details="true"
         :disabled="product.inStock == 0"