Payments and Addresses add- and removeable

software/src/pages/accountPage/accountDataCard.vue

@@ -2,6 +2,7 @@
 import cardView from '@/components/cardView.vue';
 import outlinedButton from '@/components/outlinedButton.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
+import { ref } from 'vue';
 
 const accountStore = useAccountStore()
 </script>
@@ -42,15 +43,5 @@ const accountStore = useAccountStore()
         />
       </v-col>
     </v-row>
-
-    <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/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>

software/src/pages/accountPage/index.vue

@@ -4,16 +4,23 @@ import accountDataCard from './accountDataCard.vue';
 import accountManagingCard from './accountManagingCard.vue';
 import addressesCard from './addressesCard.vue';
 import paymentsCard from './paymentsCard.vue';
+import { ref } from 'vue';
+import { useAccountStore } from '@/data/stores/accountStore';
+
+const accountStore = useAccountStore()
+const updateInProgress = ref(false)
+
+async function updateAccount() {
+  updateInProgress.value = true
+
+  await accountStore.updateAccount()
+
+  updateInProgress.value = false
+}
 </script>
 
 <template>
   <v-container max-width="1000">
-    <v-row>
-      <v-col>
-        <alert-banner />
-      </v-col>
-    </v-row>
-
     <v-row>
       <v-col>
         <account-data-card />
@@ -38,4 +45,18 @@ import paymentsCard from './paymentsCard.vue';
       </v-col>
     </v-row>
   </v-container>
+
+  <VLayoutItem model-value position="bottom" size="60">
+    <div class="ma-4">
+      <v-fab
+        icon="mdi-content-save"
+        location="right"
+        color="green"
+        absolute
+        offset
+        @click="updateAccount"
+        :loading="updateInProgress"
+      />
+    </div>
+  </VLayoutItem>
 </template>

software/src/pages/accountPage/paymentsCard.vue

@@ -2,8 +2,10 @@
 import cardView from '@/components/cardView.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
 import outlinedButton from '@/components/outlinedButton.vue';
+import { PaymentModel } from '@/data/models/paymentModel';
 
 const accountStore = useAccountStore()
+
 </script>
 
 <template>
@@ -11,12 +13,16 @@ const accountStore = useAccountStore()
     icon="mdi-currency-usd"
     :title="$t('account.payments')"
   >
-    <v-expansion-panels>
+    <v-expansion-panels
+      v-if="accountStore.userAccount.payments.length > 0"
+    >
       <v-expansion-panel
         v-for="payment in accountStore.userAccount.payments"
-        :title="payment.bankName"
-        color="grey"
+        color="primary"
       >
+        <template #title>
+          {{ payment.bankName }}
+        </template>
         <template #text>
           <v-row class="pt-5">
             <v-col>
@@ -32,17 +38,35 @@ const accountStore = useAccountStore()
               />
             </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('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
-        @click="accountStore.updateAccount()"
-        prepend-icon="mdi-content-save"
+        @click="accountStore.userAccount.payments.push(new PaymentModel())"
+        prepend-icon="mdi-plus"
         color="green"
       >
-        Save
+        {{ $t('add') }}
       </outlined-button>
     </template>
   </card-view>