Payments and Addresses add- and removeable

software/src/data/models/addressModel.ts

@@ -1,6 +1,6 @@
 export class AddressModel {
   street: string = ""
-  houseNumber: number = 0
-  postalCode: number = 0
+  houseNumber: number
+  postalCode: number
   city: string = ""
 }

software/src/data/stores/accountStore.ts

@@ -7,6 +7,8 @@ import { loginAccount, registerAccount, updateAccount } from "../api/accountApi"
 import { getUserOrders } from "../api/orderApi";
 import { BannerStateEnum } from "../enums/bannerStateEnum";
 import { calcPrice } from "@/scripts/productScripts";
+import { AddressModel } from "../models/addressModel";
+import { PaymentModel } from "../models/paymentModel";
 
 export const useAccountStore = defineStore("accountStore", {
   state: () => ({
@@ -89,6 +91,18 @@ export const useAccountStore = defineStore("accountStore", {
       }
 
       return Math.round(totalPrice * 100) / 100
+    },
+
+    removeAddress(address: AddressModel) {
+      this.userAccount.addresses = this.userAccount.addresses.filter((addr: AddressModel) => 
+        addr != address
+      )
+    },
+
+    removePayment(payment: PaymentModel) {
+      this.userAccount.payments = this.userAccount.payments.filter((paym: PaymentModel) =>
+        paym != payment
+      )
     }
   }
 })

software/src/locales/de.json

@@ -68,7 +68,10 @@
     "managingAccount": "Account verwalten",
     "addresses": "Adressen",
     "payments": "Bezahlarten",
-    "masterData": "Stammdaten"
+    "masterData": "Stammdaten",
+    "noAddresses": "Keine Adressen gefunden",
+    "noPayments": "Keine Bezahlarten gefunden",
+    "newPayment": "New Payment"
   },
   "bannerMessages": {
     "loginSuccessful": "Login erfolgreich!",
@@ -122,5 +125,7 @@
   "passwordToShort": "Passwort zu kurz",
   "onlyDigitsAllowed": "Nur Zahlen erlaubt",
   "noOrders": "Keine Bestellungen gefunden",
-  "noOrdersText": "Bisher wurden keine Bestellungen von diesem Account getätigt. Gehe zum Warenkorb und bestelle!"
+  "noOrdersText": "Bisher wurden keine Bestellungen von diesem Account getätigt. Gehe zum Warenkorb und bestelle!",
+  "add": "Hinzufügen",
+  "remove": "Entfernen"
 }

software/src/locales/en.json

@@ -68,7 +68,10 @@
     "managingAccount": "Managing Account",
     "addresses": "Addresses",
     "payments": "Payments",
-    "masterData": "Master data"
+    "masterData": "Master data",
+    "noAddresses": "No Addresses found",
+    "noPayments": "No payments found",
+    "newPayment": "New Payment"
   },
   "bannerMessages": {
     "loginSuccessful": "Login erfolgreich!",
@@ -122,5 +125,7 @@
   "passwordToShort": "Password too short",
   "onlyDigitsAllowed": "Only digits are allowed",
   "noOrders": "No orders found",
-  "noOrdersText": "There are no orders with this account until now. Go to the basket page and order something!"
+  "noOrdersText": "There are no orders with this account until now. Go to the basket page and order something!",
+  "add": "Add",
+  "remove": "Remove"
 }

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>