Multiple addresses & payments of an account configurable in frontend

2024-09-24 13:55:48 +02:00
parent abe1b496a2
commit 5b8f1fbead
16 changed files with 460 additions and 370 deletions
--- a/software/backend/data/accounts.json
+++ b/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": [
--- a/software/src/components/cardView.vue
+++ b/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>
--- a/software/src/components/confirmDialog.vue
+++ b/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
--- a/software/src/locales/de.json
+++ b/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!",
--- a/software/src/locales/en.json
+++ b/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!",
--- a/software/src/pages/accountPage/accountDataCard.vue
+++ b/software/src/pages/accountPage/accountDataCard.vue
@@ -7,8 +7,10 @@ const accountStore = useAccountStore()
 </script>

 <template>
-  <card-view title="Account">
-    <v-container>
+  <card-view
+    :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()"
--- a/software/src/pages/accountPage/accountManagingCard.vue
+++ b/software/src/pages/accountPage/accountManagingCard.vue
@@ -12,8 +12,10 @@ function deleteAccount() {
 </script>

 <template>
-  <card-view :title="$t('account.managingAccount')">
-    <v-container>
+  <card-view
+    :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
--- a/software/src/pages/accountPage/addressesCard.vue
+++ b/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>
--- a/software/src/pages/accountPage/index.vue
+++ b/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 />
--- a/software/src/pages/accountPage/paymentsCard.vue
+++ b/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>
--- a/software/src/pages/loginPage/loginForm.vue
+++ b/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 
--- a/software/src/pages/loginPage/registerForm.vue
+++ b/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
--- a/software/src/pages/preferencesPage/pageSetup.vue
+++ b/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>
--- a/software/src/pages/preferencesPage/systemSetup.vue
+++ b/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
--- a/software/src/pages/productsPage/productCard.vue
+++ b/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>

--- a/software/src/pages/productsPage/productDetailsDialog.vue
+++ b/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