Multiple addresses & payments of an account configurable in frontend

software/backend/data/accounts.json

@@ -92,6 +92,13 @@
           "houseNumber": 36,
           "postalCode": 30171,
           "city": "Hannover"
+        },
+        {
+          "accountId": 3,
+          "street": "Else-Ury-Weg",
+          "houseNumber": 20,
+          "postalCode": 30629,
+          "city": "Hannover"
         }
       ],
       "payments": [

software/src/components/cardView.vue

@@ -16,16 +16,19 @@ defineProps({
     :title="title"
     :subtitle="subtitle"
     :prepend-icon="icon"
-    class="card-outter"
   >
+    <!-- Show default container only, if there is content -->
+    <v-container v-if="$slots.default">
       <slot></slot>
+    </v-container>
 
+    <!-- Slot for content without padding -->
+    <slot name="withoutContainer"></slot>
+    
+    <!-- Slot for Action Buttons in the right bottom corner -->
     <v-card-actions v-if="$slots.actions" class="card-actions">
       <v-spacer />
       <slot name="actions"></slot>
     </v-card-actions>
   </v-card>
 </template>
-
-<style>
-</style>

software/src/components/confirmDialog.vue

@@ -23,13 +23,11 @@ function confirmPressed() {
     max-width="400"
     v-model="showDialog"
   >
-    <v-container>
     <v-row>
       <v-col>
         {{ description }}
       </v-col>
     </v-row>
-    </v-container>
 
     <template #actions>
       <outlined-button

software/src/locales/de.json

@@ -66,7 +66,10 @@
     "register": "Account erstellen",
     "backToLogin": "Zurück zum Login",
     "delete": "Account löschen",
-    "managingAccount": "Account verwalten"
+    "managingAccount": "Account verwalten",
+    "addresses": "Adressen",
+    "payments": "Bezahlarten",
+    "masterData": "Stammdaten"
   },
   "bannerMessages": {
     "loginSuccessful": "Login erfolgreich!",

software/src/locales/en.json

@@ -66,7 +66,10 @@
     "noAccountRegister": "Create new Account!",
     "register": "Create Account",
     "delete": "Delete Account",
-    "managingAccount": "Managing Account"
+    "managingAccount": "Managing Account",
+    "addresses": "Addresses",
+    "payments": "Payments",
+    "masterData": "Master data"
   },
   "bannerMessages": {
     "loginSuccessful": "Login erfolgreich!",

software/src/pages/accountPage/accountDataCard.vue

@@ -7,8 +7,10 @@ const accountStore = useAccountStore()
 </script>
 
 <template>
-  <card-view title="Account">
+  <card-view
-    <v-container>
+    :title="$t('account.masterData')"
+    icon="mdi-account"
+  >
     <v-row>
       <v-col>
         <v-text-field
@@ -41,52 +43,6 @@ const accountStore = useAccountStore()
       </v-col>
     </v-row>
 
-      <v-row>
-        <v-col>
-          <v-text-field
-            :label="$t('userInfo.street')"
-            v-model="accountStore.userAccount.addresses[0].street"
-          />
-        </v-col>
-        <v-col>
-          <v-text-field
-            :label="$t('userInfo.houseNumber')"
-            v-model="accountStore.userAccount.addresses[0].houseNumber"
-          />
-        </v-col>
-      </v-row>
-
-      <v-row>
-        <v-col>
-          <v-text-field
-            :label="$t('userInfo.postalCode')"
-            v-model="accountStore.userAccount.addresses[0].postalCode"
-          />
-        </v-col>
-        <v-col>
-          <v-text-field
-            :label="$t('userInfo.city')"
-            v-model="accountStore.userAccount.addresses[0].city"
-          />
-        </v-col>
-      </v-row>
-
-      <v-row>
-        <v-col>
-          <v-text-field
-            :label="$t('userInfo.bankName')"
-            v-model="accountStore.userAccount.payments[0].bankName"
-          />
-        </v-col>
-        <v-col>
-          <v-text-field
-            :label="$t('userInfo.iban')"
-            v-model="accountStore.userAccount.payments[0].iban"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
-
     <template #actions>
       <outlined-button
         @click="accountStore.updateAccount()"

software/src/pages/accountPage/accountManagingCard.vue

@@ -12,8 +12,10 @@ function deleteAccount() {
 </script>
 
 <template>
-  <card-view :title="$t('account.managingAccount')">
+  <card-view
-    <v-container>
+    :title="$t('account.managingAccount')"
+    icon="mdi-account-edit"
+  >
     <v-row>
       <v-col class="d-flex justify-center align-center">
         <outlined-button
@@ -25,7 +27,6 @@ function deleteAccount() {
         </outlined-button>
       </v-col>
     </v-row>
-    </v-container>
   </card-view>
 
   <confirm-dialog

software/src/pages/accountPage/addressesCard.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import { useAccountStore } from '@/data/stores/accountStore';
+import outlinedButton from '@/components/outlinedButton.vue';
+
+const accountStore = useAccountStore()
+</script>
+
+<template>
+  <card-view 
+    icon="mdi-home"
+    :title="$t('account.addresses')"
+  >
+    <v-expansion-panels>
+      <v-expansion-panel
+        v-for="address in accountStore.userAccount.addresses"
+        :title="address.street + ' ' + address.houseNumber"
+        color="grey"
+      >
+        <template #text>
+          <v-row class="pt-5">
+            <v-col>
+              <v-text-field
+                :label="$t('userInfo.street')"
+                v-model="address.street"
+              />
+            </v-col>
+            <v-col>
+              <v-text-field
+                :label="$t('userInfo.houseNumber')"
+                v-model="address.houseNumber"
+              />
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col>
+              <v-text-field
+                :label="$t('userInfo.postalCode')"
+                v-model="address.postalCode"
+              />
+            </v-col>
+            <v-col>
+              <v-text-field
+                :label="$t('userInfo.city')"
+                v-model="address.city"
+              />
+            </v-col>
+          </v-row>
+        </template>
+      </v-expansion-panel>
+    </v-expansion-panels>
+
+    <template #actions>
+      <outlined-button
+        @click="accountStore.updateAccount()"
+        prepend-icon="mdi-content-save"
+        color="green"
+      >
+        Save
+      </outlined-button>
+    </template>
+  </card-view>
+</template>

software/src/pages/accountPage/index.vue

@@ -2,6 +2,8 @@
 import alertBanner from '@/components/alertBanner.vue';
 import accountDataCard from './accountDataCard.vue';
 import accountManagingCard from './accountManagingCard.vue';
+import addressesCard from './addressesCard.vue';
+import paymentsCard from './paymentsCard.vue';
 </script>
 
 <template>
@@ -18,6 +20,18 @@ import accountManagingCard from './accountManagingCard.vue';
       </v-col>
     </v-row>
 
+    <v-row>
+      <v-col>
+        <addresses-card />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <payments-card />
+      </v-col>
+    </v-row>
+
     <v-row>
       <v-col>
         <account-managing-card />

software/src/pages/accountPage/paymentsCard.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import { useAccountStore } from '@/data/stores/accountStore';
+import outlinedButton from '@/components/outlinedButton.vue';
+
+const accountStore = useAccountStore()
+</script>
+
+<template>
+  <card-view 
+    icon="mdi-currency-usd"
+    :title="$t('account.payments')"
+  >
+    <v-expansion-panels>
+      <v-expansion-panel
+        v-for="payment in accountStore.userAccount.payments"
+        :title="payment.bankName"
+        color="grey"
+      >
+        <template #text>
+          <v-row class="pt-5">
+            <v-col>
+              <v-text-field
+                :label="$t('userInfo.bankName')"
+                v-model="payment.bankName"
+              />
+            </v-col>
+            <v-col>
+              <v-text-field
+                :label="$t('userInfo.iban')"
+                v-model="payment.iban"
+              />
+            </v-col>
+          </v-row>
+        </template>
+      </v-expansion-panel>
+    </v-expansion-panels>
+
+    <template #actions>
+      <outlined-button
+        @click="accountStore.updateAccount()"
+        prepend-icon="mdi-content-save"
+        color="green"
+      >
+        Save
+      </outlined-button>
+    </template>
+  </card-view>
+</template>

software/src/pages/loginPage/loginForm.vue

@@ -16,7 +16,6 @@ function startLogin() {
 
 <template>
   <card-view :title="$t('menu.login')" prepend-icon="mdi-login" elevation="8">
-    <v-container>
     <v-row>
       <v-col>
         <v-text-field :label="$t('account.username')" prepend-icon="mdi-account" clearable v-model="username"/>
@@ -29,7 +28,6 @@ function startLogin() {
           clearable v-model="password" />
       </v-col>
     </v-row>
-    </v-container>
 
     <template #actions>
       <outlined-button 

software/src/pages/loginPage/registerForm.vue

@@ -12,7 +12,6 @@ const accountStore = useAccountStore()
 
 <template>
   <card-view :title="$t('account.register')">
-    <v-container>
     <v-row>
       <v-col>
         <v-text-field
@@ -76,7 +75,6 @@ const accountStore = useAccountStore()
         <v-text-field :label="$t('userInfo.city')" v-model="newUser.addresses[0].city" clearable />
       </v-col>
     </v-row>
-    </v-container>
 
     <template #actions>
       <outlined-button

software/src/pages/preferencesPage/pageSetup.vue

@@ -20,7 +20,6 @@ function changeLanguage() {
 
 <template>
   <card-view :title="$t('preferences.pageSetup')" prepend-icon="mdi-view-dashboard" elevation="8">
-    <v-container>
     <v-row>
       <v-col>
         <v-select
@@ -39,6 +38,5 @@ function changeLanguage() {
       />
       </v-col>
     </v-row>
-    </v-container>
   </card-view>
 </template>

software/src/pages/preferencesPage/systemSetup.vue

@@ -29,7 +29,6 @@ function resetSettings() {
 
 <template>
   <card-view :title="$t('preferences.systemSetup')" prepend-icon="mdi-engine" elevation="8">
-    <v-container>
     <v-row>
       <v-col class="d-flex justify-center align-center">
         <outlined-button
@@ -49,7 +48,6 @@ function resetSettings() {
         </outlined-button>
       </v-col>
     </v-row>
-    </v-container>
   </card-view>
 
   <confirm-dialog

software/src/pages/productsPage/productCard.vue

@@ -12,6 +12,7 @@ defineProps({
 
 <template>
   <card-view link>
+    <template #withoutContainer>
       <v-row>
         <v-col cols="3">
           <v-sheet color="white">
@@ -77,6 +78,7 @@ defineProps({
           </div>
         </v-col>
       </v-row>
+    </template>
   </card-view>
 </template>
 

software/src/pages/productsPage/productDetailsDialog.vue

@@ -37,7 +37,6 @@ watch(() => props.product.images, () => {
     :subtitle="product.category.name"
     v-model="showDialog"
   >
-      <v-container class="pt-n3">
     <v-row>
       <!-- Image col -->
       <v-col>
@@ -131,7 +130,6 @@ watch(() => props.product.images, () => {
         </v-row>
       </v-col>
     </v-row>
-      </v-container>
 
     <template #actions>
       <v-number-input