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

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>