Redesign and reimplementing account page

software/src/locales/de.json

@@ -35,14 +35,6 @@
   "emptyBasketText": "Gehe zu unseren Produkten und lege Artikel in den Warenkorb",
   "totalPrice": "Gesamtpreis",
   "orderNow": "Jetzt bestellen",
-  "orders": {
-    "orderFrom": "Bestellung vom",
-    "ordered": "Bestellt",
-    "preparingForShipping": "Versandvorbereitung",
-    "shipped": "Versendet",
-    "delivered": "Geliefert",
-    "inDelivery": "In Zustellung"
-  },
   "userInfo": {
     "firstName": "Vorname",
     "lastName": "Nachname",
@@ -151,5 +143,15 @@
   "loading": "Lade",
   "orderSummary": "Bestellübersicht",
   "basket": "Warenkorb",
-  "event": "Event"
+  "event": "Event",
+  "hello": "Hallo",
+  "accountManagement": "Account verwalten",
+  "accountManagementDescription": "Persönliche Daten, Adressen, Bezahlmethoden",
+  "orders": "Bestellung | Bestellungen",
+  "ordersDescription": "Übersicht aller getätigten Bestellungen",
+  "onePageBack": "Zurück zur vorherigen Seite",
+  "orderedAt": "Bestellt am",
+  "logout": "Ausloggen",
+  "logoutDescription": "Aktuellen Useraccount ausloggen",
+  "login": "Login"
 }

software/src/locales/en.json

@@ -35,14 +35,6 @@
   "emptyBasketText": "Go to our products and add some of them to the basket",
   "totalPrice": "Total price",
   "orderNow": "Order now",
-  "orders": {
-    "orderFrom": "Order from",
-    "ordered": "Ordered",
-    "preparingForShipping": "Preparing for shipping",
-    "shipped": "Shipped",
-    "delivered": "Delivered",
-    "inDelivery": "In Delivery"
-  },
   "userInfo": {
     "firstName": "First Name",
     "lastName": "Family Name",
@@ -151,5 +143,15 @@
   "loading": "Loading",
   "orderSummary": "Order Summary",
   "basket": "Basket",
-  "event": "Event"
+  "event": "Event",
+  "hello": "Hello",
+  "accountManagement": "Account Management",
+  "accountManagementDescription": "Contact data, Addresses, Payment methods",
+  "orders": "Order | Orders",
+  "ordersDescription": "Overview about all orders",
+  "onePageBack": "Back to previous page",
+  "orderedAt": "Ordered at",
+  "logout": "Logout",
+  "logoutDescription": "Logout current account",
+  "login": "Login"
 }

software/src/pages/account/accountDataPage/accountManagingCard.vue

@@ -2,13 +2,24 @@
 import cardView from '@/components/cardView.vue';
 import confirmDialog from '@/components/confirmDialog.vue';
 import outlinedButton from '@/components/outlinedButton.vue';
+import { useAccountStore } from '@/data/stores/accountStore';
 import { ref } from 'vue';
 
 const showConfirmDialog = ref(false)
+const updateInProgress = ref(false)
+const accountStore = useAccountStore()
 
 function deleteAccount() {
   // todo
 }
+
+async function updateAccount() {
+  updateInProgress.value = true
+
+  await accountStore.updateAccount()
+
+  updateInProgress.value = false
+}
 </script>
 
 <template>
@@ -26,6 +37,16 @@ function deleteAccount() {
           {{ $t("account.delete") }}
         </outlined-button>
       </v-col>
+
+      <v-col class="d-flex justify-center align-center">
+        <outlined-button
+          prepend-icon="mdi-content-save"
+          color="green"
+          @click="updateAccount"
+        >
+          {{ $t("save") }}
+        </outlined-button>
+      </v-col>
     </v-row>
   </card-view>
 

software/src/pages/account/accountDataPage/index.vue

@@ -3,23 +3,22 @@ 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';
+import OutlinedButton from '@/components/outlinedButton.vue';
+import { useRouter } from 'vue-router';
 
-const accountStore = useAccountStore()
-const updateInProgress = ref(false)
-
-async function updateAccount() {
-  updateInProgress.value = true
-
-  await accountStore.updateAccount()
-
-  updateInProgress.value = false
-}
+const router = useRouter()
 </script>
 
 <template>
   <v-container max-width="1000">
+    <v-row>
+      <v-col>
+        <outlined-button prepend-icon="mdi-arrow-left" @click="router.back()" >
+          {{ $t('onePageBack') }}
+        </outlined-button>
+      </v-col>
+    </v-row>
+
     <v-row>
       <v-col>
         <account-data-card />
@@ -44,18 +43,4 @@ async function updateAccount() {
       </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/account/accountHomePage/index.vue

@@ -1,10 +1,60 @@
 <script setup lang="ts">
+import { useAccountStore } from '@/data/stores/accountStore';
+import cardView from '@/components/cardView.vue';
+import { useRouter } from 'vue-router';
+
+const accountStore = useAccountStore()
+const router = useRouter()
 </script>
 
 <template>
-  Account Home
+  <v-container max-width="1000">
+    <v-row>
+      <v-col>
+        <card-view
+          :title="$t('hello') + ' ' + accountStore.userAccount.firstName + ' ' + accountStore.userAccount.lastName"
+          icon="mdi-hand-wave"
+        >
+          <v-container>
+            <v-row>
+              <v-col>
+                <card-view
+                  :title="$t('orders', 2)"
+                  icon="mdi-basket-check"
+                  @click="router.push('/account/orders')"
+                >
+                  {{ $t('ordersDescription') }}
+                </card-view>
+              </v-col>
+            </v-row>
 
-  <v-btn to="/account/edit" >Account Data</v-btn>
+            <v-row>
+              <v-col>
+                <card-view
+                  :title="$t('accountManagement')"
+                  icon="mdi-account"
+                  @click="router.push('/account/edit')"
+                >
+                  {{ $t('accountManagementDescription') }}
+                </card-view>
+              </v-col>
+            </v-row>
 
-  <v-btn to="/account/orders" >Orders</v-btn>
+            <v-row>
+              <v-col>
+                <card-view
+                  :title="$t('logout')"
+                  icon="mdi-logout"
+                  @click="accountStore.logout(); router.push('/account/login')"
+                >
+                  {{ $t('logoutDescription') }}
+                </card-view>
+              </v-col>
+            </v-row>
+          </v-container>
+        </card-view>
+        
+      </v-col>
+    </v-row>
+  </v-container>
 </template>

software/src/pages/account/loginPage/loginForm.vue

@@ -29,6 +29,7 @@ async function startLogin() {
     password.value != null && password.value.length > 0)
   {
     await accountStore.login(username.value, password.value)
+    // todo: Route to account home page
   }
 
   loginInProgress.value = false
@@ -36,7 +37,7 @@ async function startLogin() {
 </script>
 
 <template>
-  <card-view :title="$t('menu.login')" prepend-icon="mdi-login" elevation="8">
+  <card-view :title="$t('login')" prepend-icon="mdi-login" elevation="8">
     <v-row>
       <v-col>
         <v-text-field
@@ -76,7 +77,7 @@ async function startLogin() {
         @click="startLogin"
         :loading="loginInProgress"
       >
-        {{ $t('menu.login') }}
+        {{ $t('login') }}
       </outlined-button>
     </template>
   </card-view>

software/src/pages/account/ordersPage/index.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { useAccountStore } from '@/data/stores/accountStore';
-import ordersCard from './ordersCard.vue';
+import ordersCard from './orderItem.vue';
+import { useRouter } from 'vue-router';
+import outlinedButton from '@/components/outlinedButton.vue';
 
 const accountStore = useAccountStore()
+const router = useRouter()
 
 function getDotColor(order, step: number) {
   if (order.shippingProgress == step)
@@ -27,6 +30,14 @@ function formatDateTimeString(string: string) {
 
 <template>
   <v-container max-width="1000">
+    <v-row>
+      <v-col>
+        <outlined-button prepend-icon="mdi-arrow-left" @click="router.back()" >
+          {{ $t('onePageBack') }}
+        </outlined-button>
+      </v-col>
+    </v-row>
+
     <v-row
       v-if="accountStore.orders.length > 0"
       v-for="order in accountStore.orders"

software/src/pages/account/ordersPage/orderItem.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import { OrderModel } from '@/data/models/ordering/orderModel';
+import { useAccountStore } from '@/data/stores/accountStore';
+import concertListItem from '@/components/pageParts/concertListItem.vue';
+
+const accountStore = useAccountStore()
+
+defineProps({
+  order: OrderModel
+})
+
+function formatDateTimeString(string: string) {
+  let date = new Date(string)
+
+  return date.getDate() + '.' + (date.getMonth() + 1) + '.' + date.getFullYear() + ', ' + 
+    date.getHours() + ':' + date.getMinutes()
+}
+</script>
+
+<template>
+  <card-view
+    :title="$t('orderedAt') + ' ' + formatDateTimeString(order.orderedAt) + ' ' + $t('oclock')"
+    :subtitle="$t('totalPrice') + ': ' + accountStore.getOrderTotalPrice(order.id) + ' €'"
+  >
+    <v-row>
+      <v-col>
+        <v-card variant="outlined" class="ml-5 pa-3">
+          <div class="text-h6">
+            <v-icon icon="mdi-home" />
+            {{ $t('account.address', 1) }}
+          </div>
+
+          <div class="pl-9">{{ order.address.street }} {{ order.address.houseNumber }}</div>
+          <div class="pl-9">{{ order.address.postalCode }} {{ order.address.city }}</div>
+        </v-card>
+      </v-col>
+
+      <v-col>
+        <v-card variant="outlined" class="mr-5 pa-3">
+          <div class="text-h6">
+            <v-icon icon="mdi-currency-usd" />
+            {{ $t('account.payment', 1) }}
+          </div>
+          <div class="pl-9">{{ order.payment.bankName }}</div>
+          <div class="pl-9">{{ order.payment.iban }}</div>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      
+    </v-row>
+
+      <v-row>
+        <v-col>
+          <v-table class="bg-surface-light">
+            <thead>
+              <tr>
+                <th>{{ $t('quantity') }}</th>
+                <th>{{ $t('product.brand') }}</th>
+                <th>{{ $t('product.productName') }}</th>
+                <th>{{ $t('product.productPrice') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="orderItem in order.orderItems">
+                <td>{{ orderItem.quantity }}x</td>
+                <td>{{ orderItem }}</td>
+                <td>{{ orderItem }}</td>
+                <td>{{ orderItem }} €</td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-col>
+      </v-row>
+  </card-view>
+</template>

software/src/pages/account/ordersPage/ordersCard.vue

@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import cardView from '@/components/cardView.vue';
-import { OrderModel } from '@/data/models/ordering/orderModel';
-import { useAccountStore } from '@/data/stores/accountStore';
-
-const accountStore = useAccountStore()
-
-defineProps({
-  order: OrderModel
-})
-
-function getDotColor(order: OrderModel, step: number) {
-  if (order.shippingProgress >= step)
-  {
-    return "green"
-  } else if (order.shippingProgress + 1 == step) 
-  {
-    return "blue"
-  } else 
-  {
-    return "grey"
-  }
-}
-
-function formatDateTimeString(string: string) {
-  let date = new Date(string)
-
-  return date.getDate() + '.' + (date.getMonth() + 1) + '.' + date.getFullYear() + ', ' + 
-    date.getHours() + ':' + date.getMinutes()
-}
-</script>
-
-<template>
-  <card-view
-    :title="$t('orders.orderFrom') + ' ' + formatDateTimeString(order.orderedAt) + ' ' + $t('oclock')"
-    :subtitle="$t('totalPrice') + ': ' + accountStore.getOrderTotalPrice(order.id) + ' €'"
-  >
-    <template #withoutContainer>
-      <v-row>
-        <v-col>
-          <v-timeline direction="horizontal" side="start" size="x-large">
-            <v-timeline-item :dot-color="getDotColor(order, 1)" icon="mdi-basket-check">
-              {{ $t('orders.ordered') }}
-            </v-timeline-item>
-
-            <v-timeline-item :dot-color="getDotColor(order, 2)" icon="mdi-package-variant">
-              {{ $t('orders.preparingForShipping') }}
-            </v-timeline-item>
-
-            <v-timeline-item :dot-color="getDotColor(order, 3)" icon="mdi-send">
-              {{ $t('orders.shipped') }}
-            </v-timeline-item>
-
-            <v-timeline-item :dot-color="getDotColor(order, 4)" icon="mdi-truck-fast">
-              {{ $t('orders.inDelivery') }}
-            </v-timeline-item>
-
-            <v-timeline-item :dot-color="getDotColor(order, 5)" icon="mdi-package-check">
-              {{ $t('orders.delivered') }}
-            </v-timeline-item>
-          </v-timeline>
-        </v-col>
-      </v-row>
-
-      <v-row>
-        <v-col>
-          <v-card variant="outlined" class="ml-5 pa-3">
-            <div class="text-h6">
-              <v-icon icon="mdi-home" />
-              {{ $t('account.address', 1) }}
-            </div>
-
-            <div class="pl-9">{{ order.address.street }} {{ order.address.houseNumber }}</div>
-            <div class="pl-9">{{ order.address.postalCode }} {{ order.address.city }}</div>
-          </v-card>
-        </v-col>
-
-        <v-col>
-          <v-card variant="outlined" class="mr-5 pa-3">
-            <div class="text-h6">
-              <v-icon icon="mdi-currency-usd" />
-              {{ $t('account.payment', 1) }}
-            </div>
-            <div class="pl-9">{{ order.payment.bankName }}</div>
-            <div class="pl-9">{{ order.payment.iban }}</div>
-          </v-card>
-        </v-col>
-
-        
-      </v-row>
-
-      <v-row>
-        <v-col>
-          <v-table class="bg-surface-light">
-            <thead>
-              <tr>
-                <th>{{ $t('quantity') }}</th>
-                <th>{{ $t('product.brand') }}</th>
-                <th>{{ $t('product.productName') }}</th>
-                <th>{{ $t('product.productPrice') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="orderItem in order.orderItems">
-                <td>{{ orderItem.quantity }}x</td>
-                <td>{{ orderItem.product.brand.name }}</td>
-                <td>{{ orderItem.product.name }}</td>
-                <td>{{ orderItem.product.price }} €</td>
-              </tr>
-            </tbody>
-          </v-table>
-        </v-col>
-      </v-row>
-    </template>
-  </card-view>
-</template>