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>

src/pages/account/accountDataPage/accountDataCard.vue

@@ -81,7 +81,6 @@ const stringRules = [
           v-model="accountStore.userAccount.firstName"
           variant="outlined"
           :rules="stringRules"
-          hide-details
         />
       </v-col>
       <v-col>
@@ -90,7 +89,6 @@ const stringRules = [
           v-model="accountStore.userAccount.lastName"
           variant="outlined"
           :rules="stringRules"
-          hide-details
         />
       </v-col>
     </v-row>

src/pages/account/accountDataPage/addressesCard.vue

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
-import { useAccountStore } from '@/stores/account.store';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
-import { AddressModel } from '@/data/models/user/addressModel';
-import { getNumberStartRules, getPostalRules, getStringRules } from '@/scripts/validationRules';
-
-const accountStore = useAccountStore()
-</script>
-
-<template>
-  <card-view 
-    icon="mdi-home"
-    :title="$t('account.userData.address', 2)"
-  >
-    <v-expansion-panels v-if="accountStore.userAccount.addresses != undefined && accountStore.userAccount.addresses.length > 0">
-      <v-expansion-panel
-        v-for="address in accountStore.userAccount.addresses"
-        color="primary"
-      >
-        <template #title>
-          <div v-if="address.street != undefined">
-            {{ address.street }}
-          </div>
-          
-          &nbsp;
-          
-          <div v-if="address.houseNumber != undefined">
-            {{ address.houseNumber }}
-          </div>
-        </template>
-
-        <template #text>
-          <v-row class="pt-5">
-            <v-col>
-              <v-text-field
-                :label="$t('account.userData.street')"
-                v-model="address.street"
-                :rules="getStringRules()"
-                variant="outlined"
-                clearable
-                hide-details
-              />
-            </v-col>
-            <v-col>
-              <v-text-field
-                :label="$t('account.userData.houseNumber')"
-                v-model="address.houseNumber"
-                :rules="getNumberStartRules()"
-                variant="outlined"
-                clearable
-                hide-details
-              />
-            </v-col>
-          </v-row>
-
-          <v-row>
-            <v-col>
-              <v-text-field
-                :label="$t('account.userData.postalCode')"
-                v-model="address.postalCode"
-                :rules="getPostalRules()"
-                variant="outlined"
-                clearable
-                hide-details
-              />
-            </v-col>
-            <v-col>
-              <v-text-field
-                :label="$t('account.userData.placeOfResidence')"
-                v-model="address.city"
-                :rules="getStringRules()"
-                variant="outlined"
-                clearable
-                hide-details
-              />
-            </v-col>
-          </v-row>
-
-          <v-row>
-            <v-col class="d-flex justify-center align-center">
-              <outlined-button
-                @click="accountStore.removeAddress(address)"
-                color="error"
-                prepend-icon="mdi-delete"
-              >
-                {{ $t('misc.actions.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.userAccount.addresses.push(new AddressModel())"
-        prepend-icon="mdi-plus"
-        color="success"
-      >
-        {{ $t('misc.actions.add') }}
-      </outlined-button>
-    </template>
-  </card-view>
-</template>

src/pages/account/accountDataPage/index.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import accountDataCard from './accountDataCard.vue';
 import accountManagingCard from './accountManagingCard.vue';
-import addressesCard from './addressesCard.vue';
-import paymentsCard from './paymentsCard.vue';
 import { useRouter } from 'vue-router';
 import accountSubPageLayout from '@/layouts/accountSubPageLayout.vue';
 
@@ -17,18 +15,6 @@ const router = useRouter()
       </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 />

src/pages/account/accountDataPage/paymentsCard.vue

@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
-import { useAccountStore } from '@/stores/account.store';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
-import { PaymentModel } from '@/data/models/user/paymentModel';
-import { getIbanRules, getStringRules } from '@/scripts/validationRules';
-import cardViewOneLine from '@/components/basics/cardViewOneLine.vue';
-
-const accountStore = useAccountStore()
-</script>
-
-<template>
-  <card-view 
-    icon="mdi-currency-usd"
-    :title="$t('account.userData.payment', 2)"
-  >
-    <v-row>
-      <v-col>
-        <card-view-one-line
-          color="warning"
-          prepend-icon="mdi-alert"
-          :title="$t('account.noRealPaymentsNeeded')"
-        />
-      </v-col>
-    </v-row>
-
-    <v-row v-if="accountStore.userAccount.payments.length > 0">
-      <v-col>
-        <v-expansion-panels>
-          <v-expansion-panel
-            v-for="payment in accountStore.userAccount.payments"
-            color="primary"
-          >
-            <template #title>
-              {{ payment.bankName }}
-            </template>
-            <template #text>
-              <v-row class="pt-5">
-                <v-col>
-                  <v-text-field
-                    :label="$t('account.userData.bankName')"
-                    v-model="payment.bankName"
-                    :rules="getStringRules()"
-                    variant="outlined"
-                    hide-details
-                  />
-                </v-col>
-                <v-col>
-                  <v-text-field
-                    :label="$t('account.userData.iban')"
-                    v-model="payment.iban"
-                    :rules="getIbanRules()"
-                    variant="outlined"
-                    hide-details
-                  />
-                </v-col>
-              </v-row>
-
-              <v-row>
-                <v-col class="d-flex justify-center align-center">
-                  <outlined-button
-                    @click="accountStore.removePayment(payment)"
-                    color="error"
-                    prepend-icon="mdi-delete"
-                  >
-                    {{ $t('misc.actions.remove') }}
-                  </outlined-button>
-                </v-col>
-              </v-row>
-            </template>
-          </v-expansion-panel>
-        </v-expansion-panels>
-      </v-col>
-    </v-row>
-
-    <v-row v-else>
-      <v-col>
-        <v-empty-state
-          :title="$t('account.noPayments')"
-          icon="mdi-currency-usd-off"
-        />
-      </v-col>
-    </v-row>
-
-
-
-    <template #actions>
-      <outlined-button
-        @click="accountStore.userAccount.payments.push(new PaymentModel())"
-        prepend-icon="mdi-plus"
-        color="success"
-      >
-        {{ $t('misc.actions.add') }}
-      </outlined-button>
-    </template>
-  </card-view>
-</template>

src/pages/account/accountHomePage/index.vue

@@ -1,60 +1,76 @@
 <script setup lang="ts">
 import { useAccountStore } from '@/stores/account.store';
-import cardView from '@/components/basics/cardView.vue';
+import dashboardCard from '@/components/pageParts/dashboardCard.vue';
+import { useOrderStore } from '@/stores/order.store';
+import OutlinedButton from '@/components/basics/outlinedButton.vue';
 import { useRouter } from 'vue-router';
+import moment from 'moment';
+import { millisecondsToHumanReadableString } from '@/scripts/dateTimeScripts';
 
 const accountStore = useAccountStore()
+const orderStore = useOrderStore()
 const router = useRouter()
+
+orderStore.getOrdersOfAccount(accountStore.userAccount)
+accountStore.refreshAccount()
 </script>
 
 <template>
-  <v-container max-width="1000">
+  <v-container>
     <v-row>
-      <v-col>
-        <card-view
-          :title="$t('misc.greeting', { msg: accountStore.userAccount.username })"
-          icon="mdi-hand-wave"
-        >
-          <v-container>
-            <v-row>
-              <v-col>
-                <card-view
-                  :title="$t('order.order', 2)"
-                  icon="mdi-basket-check"
-                  @click="router.push('/account/orders')"
-                >
-                  {{ $t('order.ordersDescription') }}
-                </card-view>
-              </v-col>
-            </v-row>
+      <dashboard-card
+        :title="$t('order.order', 2)"
+        icon="mdi-basket-check"
+        :first-line="orderStore.orders.length + ' ' + $t('order.order', 2)"
+        :second-line="$t('order.ordersDescription')"
+        button-route="/account/orders"
+        :loading="orderStore.fetchInProgress"
+      />
 
-            <v-row>
-              <v-col>
-                <card-view
-                  :title="$t('account.accountManagement')"
-                  icon="mdi-account"
-                  @click="router.push('/account/data')"
-                >
-                  {{ $t('account.accountManagementDescription') }}
-                </card-view>
-              </v-col>
-            </v-row>
+      <dashboard-card
+        :title="$t('account.accountManagement')"
+        icon="mdi-account"
+        :first-line="accountStore.userAccount.username"
+        :second-line="$t('account.accountManagementDescription')"
+        :loading="accountStore.fetchInProgress"
+        button-route="/account/data"
+      />
 
-            <v-row>
-              <v-col>
-                <card-view
-                  :title="$t('account.logout.logout')"
-                  icon="mdi-logout"
-                  @click="accountStore.logout(); router.push('/account/login')"
-                >
-                  {{ $t('account.logout.logoutDescription') }}
-                </card-view>
-              </v-col>
-            </v-row>
-          </v-container>
-        </card-view>
-        
-      </v-col>
+      <dashboard-card
+        :title="$t('account.addressManagement')"
+        icon="mdi-city"
+        :first-line="accountStore.userAccount.addresses?.length + ' ' + 
+          $t('account.userData.address', accountStore.userAccount.addresses?.length)"
+        :second-line="$t('account.addressManagementDetails')"
+        :loading="accountStore.fetchInProgress"
+        button-route="/account/addresses"
+      />
+
+      <dashboard-card
+        :title="$t('account.paymentsManagement', 2)"
+        icon="mdi-currency-eur"
+        :first-line="accountStore.userAccount.payments?.length + ' ' + 
+          $t('account.userData.payment', accountStore.userAccount.payments?.length)"
+        :second-line="$t('account.managePaymentsDescription')"
+        :loading="accountStore.fetchInProgress"
+        button-route="/account/payments"
+      />
+
+      <dashboard-card
+        :title="$t('account.logout.logout')"
+        :first-line="millisecondsToHumanReadableString(moment().diff(moment(accountStore.loggedInTimeStamp))) + ' h ' + $t('account.sessionTime')"
+        :second-line="$t('account.logout.logoutDescription')"
+        icon="mdi-logout"
+      >
+        <template #actions>
+          <outlined-button
+            color="error"
+            @click="accountStore.logout(); router.push('/account/login')"
+          >
+            {{ $t('account.logout.logout') }}
+          </outlined-button>
+        </template>
+      </dashboard-card>
     </v-row>
   </v-container>
 </template>

src/pages/account/accountPaymentsPage/index.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import dataLayout from '@/layouts/dataLayout.vue';
+import { useAccountStore } from '@/stores/account.store';
+import { useFeedbackStore } from '@/stores/feedback.store';
+import PaymentEditDialog from './paymentEditDialog.vue';
+
+const accountStore = useAccountStore()
+const feedbackStore = useFeedbackStore()
+
+const headers = [
+  { title: feedbackStore.i18n.t('account.userData.bankName'), value: "bankName" },
+  { title: feedbackStore.i18n.t('account.userData.iban'), value: "iban" },
+  { 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.newPayment() }"
+  >
+    <v-data-table
+      :headers="headers"
+      :items="accountStore.userAccount.payments"
+      :loading="accountStore.fetchInProgress"
+    >
+      <template #item.actions="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          variant="plain"
+          color="orange"
+          @click="accountStore.editPayment(item)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="accountStore.removePayment(item)"
+        />
+      </template>
+    </v-data-table>
+  </data-layout>
+
+  <payment-edit-dialog />
+</template>

src/pages/account/accountPaymentsPage/paymentEditDialog.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import OutlinedButton from '@/components/basics/outlinedButton.vue';
+import { getIbanRules, 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.editPayment')"
+  >
+    <v-container>
+      <v-row>
+        <v-col>
+          <card-view-one-line
+            color="warning"
+            prepend-icon="mdi-alert"
+            :title="$t('account.noRealPaymentsNeeded')"
+          />
+        </v-col>
+      </v-row>
+
+      <v-form v-model="valid">
+        <v-row>
+          <v-col>
+            <v-text-field
+              :label="$t('account.userData.bankName')"
+              v-model="accountStore.payment.bankName"
+              :rules="getStringRules(8)"
+              variant="outlined"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <v-text-field
+              :label="$t('account.userData.iban')"
+              v-model="accountStore.payment.iban"
+              :rules="getIbanRules()"
+              variant="outlined"
+            />
+          </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.savePayment"
+      >
+        {{ $t('misc.actions.save') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>

src/pages/account/loginPage/registerForm.vue

@@ -10,6 +10,7 @@ const accountStore = useAccountStore()
 async function registerAccount() {
   accountStore.registerAccount()
     .then(result => {
+      console.log(result)
       if (result) {
         showRegisterCard.value = false
       }