Payments and Addresses add- and removeable

software/src/pages/accountPage/addressesCard.vue

@@ -2,6 +2,7 @@
 import cardView from '@/components/cardView.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
 import outlinedButton from '@/components/outlinedButton.vue';
+import { AddressModel } from '@/data/models/addressModel';
 
 const accountStore = useAccountStore()
 </script>
@@ -11,12 +12,15 @@ const accountStore = useAccountStore()
     icon="mdi-home"
     :title="$t('account.addresses')"
   >
-    <v-expansion-panels>
+    <v-expansion-panels v-if="accountStore.userAccount.addresses.length > 0">
       <v-expansion-panel
         v-for="address in accountStore.userAccount.addresses"
-        :title="address.street + ' ' + address.houseNumber"
-        color="grey"
+        color="primary"
       >
+        <template #title>
+          {{ address.street + ' ' + address.houseNumber }}
+        </template>
+
         <template #text>
           <v-row class="pt-5">
             <v-col>
@@ -47,17 +51,35 @@ const accountStore = useAccountStore()
               />
             </v-col>
           </v-row>
+
+          <v-row>
+            <v-col class="d-flex justify-center align-center">
+              <outlined-button
+                @click="accountStore.removeAddress(address)"
+                color="red"
+                prepend-icon="mdi-delete"
+              >
+                {{ $t('remove') }}
+              </outlined-button>
+            </v-col>
+          </v-row>
         </template>
       </v-expansion-panel>
     </v-expansion-panels>
 
+    <v-empty-state
+      v-else
+      :title="$t('account.noAddresses')"
+      icon="mdi-home-off"
+    />
+
     <template #actions>
       <outlined-button
-        @click="accountStore.updateAccount()"
-        prepend-icon="mdi-content-save"
+        @click="accountStore.userAccount.addresses.push(new AddressModel())"
+        prepend-icon="mdi-plus"
         color="green"
       >
-        Save
+        {{ $t('add') }}
       </outlined-button>
     </template>
   </card-view>