Redesign account pages, split payments and addresses to single pages, new dashboard

src/pages/account/accountAddressesPage/addressEditDialog.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import OutlinedButton from '@/components/basics/outlinedButton.vue';
+import { getIbanRules, getNumberStartRules, getPostalRules, getStringRules } from '@/scripts/validationRules';
+import { useAccountStore } from '@/stores/account.store';
+import cardViewOneLine from '@/components/basics/cardViewOneLine.vue';
+import { ref } from 'vue';
+
+const valid = ref(false)
+
+const accountStore = useAccountStore()
+</script>
+
+<template>
+  <action-dialog
+    v-model="accountStore.showEditDialog"
+    max-width="800"
+    :title="$t('account.payments.editAddress')"
+  >
+    <v-container>
+      <v-form v-model="valid">
+        <v-row class="pt-5">
+            <v-col>
+              <v-text-field
+                :label="$t('account.userData.street')"
+                v-model="accountStore.address.street"
+                :rules="getStringRules()"
+                variant="outlined"
+                clearable
+              />
+            </v-col>
+            <v-col>
+              <v-text-field
+                :label="$t('account.userData.houseNumber')"
+                v-model="accountStore.address.houseNumber"
+                :rules="getNumberStartRules()"
+                variant="outlined"
+                clearable
+              />
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col>
+              <v-text-field
+                :label="$t('account.userData.postalCode')"
+                v-model="accountStore.address.postalCode"
+                :rules="getPostalRules()"
+                variant="outlined"
+                clearable
+              />
+            </v-col>
+            <v-col>
+              <v-text-field
+                :label="$t('account.userData.placeOfResidence')"
+                v-model="accountStore.address.city"
+                :rules="getStringRules()"
+                variant="outlined"
+                clearable
+              />
+            </v-col>
+          </v-row>
+      </v-form>
+
+    </v-container>
+
+    <template #actions>
+      <outlined-button
+        color="success"
+        prepend-icon="mdi-content-save"
+        :disabled="!valid"
+        :loading="accountStore.fetchInProgress"
+        @click="accountStore.saveAddress"
+      >
+        {{ $t('misc.actions.save') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>

src/pages/account/accountAddressesPage/index.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import dataLayout from '@/layouts/dataLayout.vue';
+import { useAccountStore } from '@/stores/account.store';
+import { useFeedbackStore } from '@/stores/feedback.store';
+import addressEditDialog from './addressEditDialog.vue';
+
+const accountStore = useAccountStore()
+const feedbackStore = useFeedbackStore()
+
+const headers = [
+  { title: feedbackStore.i18n.t('account.userData.street'), value: "street" },
+  { title: feedbackStore.i18n.t('account.userData.houseNumber'), value: "houseNumber" },
+  { title: feedbackStore.i18n.t('account.userData.postalCode'), value: "postalCode" },
+  { title: feedbackStore.i18n.t('account.userData.placeOfResidence'), value: "city" },
+  { title: "Aktionen", value: "actions", width: 130 }
+]
+
+accountStore.refreshAccount()
+</script>
+
+<template>
+  <data-layout
+    :add-button-string="$t('misc.actions.add')"
+    :fetch-in-progress="accountStore.fetchInProgress"
+    :on-add-click="() => { accountStore.newAddress() }"
+  >
+    <v-data-table
+      :headers="headers"
+      :items="accountStore.userAccount.addresses"
+      :loading="accountStore.fetchInProgress"
+    >
+      <template #item.actions="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          variant="plain"
+          color="orange"
+          @click="accountStore.editAddress(item)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="accountStore.removeAddress(item)"
+        />
+      </template>
+    </v-data-table>
+  </data-layout>
+
+  <address-edit-dialog />
+</template>