Move Navigation from NavDrawer to AppBar, redesign page structure and routes

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import { useAccountStore } from '@/data/stores/accountStore';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+
+const accountStore = useAccountStore()
+const feedbackStore = useFeedbackStore()
+
+const passwordRules = [
+  value => {
+    if (value) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('required')
+    }
+  },
+  value => {
+    if (value?.length >= 8) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('passwordToShort')
+    }
+  }
+]
+
+const stringRules = [
+  value => {
+    if (value) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('required')
+    }
+  },
+  value => {
+    if (/[^0-9]/.test(value)) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('noDigitsAllowed')
+    }
+  },
+  value => {
+    if (value?.length >= 3) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('notEnoughChars')
+    }
+  }
+]
+</script>
+
+<template>
+  <card-view
+    :title="$t('account.masterData')"
+    icon="mdi-account"
+  >
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.email')"
+          v-model="accountStore.userAccount.email"
+          disabled
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.username')"
+          v-model="accountStore.userAccount.username"
+          disabled
+        />
+      </v-col>
+      <v-col>
+        <v-text-field
+          :label="$t('account.password')"
+          v-model="accountStore.userAccount.password"
+          type="password"
+          :rules="passwordRules"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('userInfo.firstName')"
+          v-model="accountStore.userAccount.firstName"
+          :rules="stringRules"
+        />
+      </v-col>
+      <v-col>
+        <v-text-field
+          :label="$t('userInfo.lastName')"
+          v-model="accountStore.userAccount.lastName"
+          :rules="stringRules"
+        />
+      </v-col>
+    </v-row>
+  </card-view>
+</template>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import confirmDialog from '@/components/confirmDialog.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
+import { ref } from 'vue';
+
+const showConfirmDialog = ref(false)
+
+function deleteAccount() {
+  // todo
+}
+</script>
+
+<template>
+  <card-view
+    :title="$t('account.managingAccount')"
+    icon="mdi-account-edit"
+  >
+    <v-row>
+      <v-col class="d-flex justify-center align-center">
+        <outlined-button
+          prepend-icon="mdi-delete"
+          color="red"
+          @click="showConfirmDialog = true"
+        >
+          {{ $t("account.delete") }}
+        </outlined-button>
+      </v-col>
+    </v-row>
+  </card-view>
+
+  <confirm-dialog
+    v-model="showConfirmDialog"
+    :title="$t('dialog.deleteAccount.title')"
+    :description="$t('dialog.deleteAccount.description')"
+    :onConfirm="deleteAccount"
+  />
+</template>

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

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import { useAccountStore } from '@/data/stores/accountStore';
+import outlinedButton from '@/components/outlinedButton.vue';
+import { AddressModel } from '@/data/models/addressModel';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { getNumberStartRules, getPostalRules, getStringRules } from '@/scripts/validationRules';
+
+const accountStore = useAccountStore()
+</script>
+
+<template>
+  <card-view 
+    icon="mdi-home"
+    :title="$t('account.address')"
+  >
+    <v-expansion-panels v-if="accountStore.userAccount.addresses.length > 0">
+      <v-expansion-panel
+        v-for="address in accountStore.userAccount.addresses"
+        color="primary"
+      >
+        <template #title>
+          {{ address.street + ' ' + address.houseNumber }}
+        </template>
+
+        <template #text>
+          <v-row class="pt-5">
+            <v-col>
+              <v-text-field
+                :label="$t('userInfo.street')"
+                v-model="address.street"
+                :rules="getStringRules()"
+                clearable
+              />
+            </v-col>
+            <v-col>
+              <v-text-field
+                :label="$t('userInfo.houseNumber')"
+                v-model="address.houseNumber"
+                :rules="getNumberStartRules()"
+                clearable
+              />
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col>
+              <v-text-field
+                :label="$t('userInfo.postalCode')"
+                v-model="address.postalCode"
+                :rules="getPostalRules()"
+                clearable
+              />
+            </v-col>
+            <v-col>
+              <v-text-field
+                :label="$t('userInfo.city')"
+                v-model="address.city"
+                :rules="getStringRules()"
+                clearable
+              />
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col class="d-flex justify-center align-center">
+              <outlined-button
+                @click="accountStore.removeAddress(address)"
+                color="red"
+                prepend-icon="mdi-delete"
+              >
+                {{ $t('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="green"
+      >
+        {{ $t('add') }}
+      </outlined-button>
+    </template>
+  </card-view>
+</template>

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

@@ -0,0 +1,61 @@
+<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 { ref } from 'vue';
+import { useAccountStore } from '@/data/stores/accountStore';
+
+const accountStore = useAccountStore()
+const updateInProgress = ref(false)
+
+async function updateAccount() {
+  updateInProgress.value = true
+
+  await accountStore.updateAccount()
+
+  updateInProgress.value = false
+}
+</script>
+
+<template>
+  <v-container max-width="1000">
+    <v-row>
+      <v-col>
+        <account-data-card />
+      </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 />
+      </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/accountDataPage/paymentsCard.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import { useAccountStore } from '@/data/stores/accountStore';
+import outlinedButton from '@/components/outlinedButton.vue';
+import { PaymentModel } from '@/data/models/paymentModel';
+import { getIbanRules, getStringRules } from '@/scripts/validationRules';
+
+const accountStore = useAccountStore()
+
+</script>
+
+<template>
+  <card-view 
+    icon="mdi-currency-usd"
+    :title="$t('account.payment')"
+  >
+    <v-expansion-panels
+      v-if="accountStore.userAccount.payments.length > 0"
+    >
+      <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('userInfo.bankName')"
+                v-model="payment.bankName"
+                :rules="getStringRules()"
+              />
+            </v-col>
+            <v-col>
+              <v-text-field
+                :label="$t('userInfo.iban')"
+                v-model="payment.iban"
+                :rules="getIbanRules()"
+              />
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col class="d-flex justify-center align-center">
+              <outlined-button
+                @click="accountStore.removePayment(payment)"
+                color="red"
+                prepend-icon="mdi-delete"
+              >
+                {{ $t('remove') }}
+              </outlined-button>
+            </v-col>
+          </v-row>
+        </template>
+      </v-expansion-panel>
+    </v-expansion-panels>
+
+    <v-empty-state
+      v-else
+      :title="$t('account.noPayments')"
+      icon="mdi-currency-usd-off"
+    />
+
+    <template #actions>
+      <outlined-button
+        @click="accountStore.userAccount.payments.push(new PaymentModel())"
+        prepend-icon="mdi-plus"
+        color="green"
+      >
+        {{ $t('add') }}
+      </outlined-button>
+    </template>
+  </card-view>
+</template>

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

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  Account Home
+
+  <v-btn to="/account/edit" >Account Data</v-btn>
+
+  <v-btn to="/account/orders" >Orders</v-btn>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import loginForm from './loginForm.vue';
+import registerForm from './registerForm.vue';
+
+const showRegisterCard = ref(false)
+</script>
+
+<template>
+  <v-container max-width="500">
+    <v-expand-transition>
+      <v-row v-if="!showRegisterCard">
+        <v-col>
+          <login-form v-model:show-register-card="showRegisterCard" />
+        </v-col>
+      </v-row>
+    </v-expand-transition>
+
+    <v-expand-transition>
+      <v-row v-if="showRegisterCard">
+        <v-col>
+          <register-form v-model:show-register-card="showRegisterCard" />
+        </v-col>
+      </v-row>
+    </v-expand-transition>
+  </v-container>
+</template>

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

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import cardView from '@/components/cardView.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
+import { useAccountStore } from '@/data/stores/accountStore';
+
+const accountStore = useAccountStore()
+const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
+const loginInProgress = ref(false)
+const username = ref("duranduran")
+const password = ref("H4nn0ver")
+const usernameWrong = ref(false)
+const passwordWrong = ref(false)
+
+async function startLogin() {
+  loginInProgress.value = true
+  usernameWrong.value = false
+  passwordWrong.value = false
+
+  if (username.value == null || username.value.length == 0) {
+    usernameWrong.value = true
+  } 
+
+  if (password.value == null || password.value.length == 0) {
+    passwordWrong.value = true
+  }
+
+  if (username.value != null && username.value.length > 0 && 
+    password.value != null && password.value.length > 0)
+  {
+    await accountStore.login(username.value, password.value)
+  }
+
+  loginInProgress.value = false
+}
+</script>
+
+<template>
+  <card-view :title="$t('menu.login')" prepend-icon="mdi-login" elevation="8">
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.username')"
+          prepend-icon="mdi-account"
+          v-model="username"
+          :error="usernameWrong"
+          clearable
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.password')"
+          prepend-icon="mdi-key"
+          type="password" 
+          v-model="password"
+          :error="passwordWrong"
+          clearable
+        />
+      </v-col>
+    </v-row>
+
+    <template #actions>
+      <outlined-button 
+        @click="showRegisterCard = true"
+        prepend-icon="mdi-plus"
+        :disabled="loginInProgress"
+      >
+        {{ $t('account.noAccountRegister') }}
+      </outlined-button>
+
+      <outlined-button
+        append-icon="mdi-arrow-right"
+        @click="startLogin"
+        :loading="loginInProgress"
+      >
+        {{ $t('menu.login') }}
+      </outlined-button>
+    </template>
+  </card-view>
+</template>

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

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { AccountModel } from '@/data/models/accountModel';
+import { ref } from 'vue';
+import cardView from '@/components/cardView.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
+import { useAccountStore } from '@/data/stores/accountStore';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { getEmailRules, getPasswordRules, getStringRules } from '@/scripts/validationRules';
+
+const newUser = ref(new AccountModel())
+const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
+const accountStore = useAccountStore()
+const registerInProgress = ref(false)
+
+async function registerAccount() {
+  registerInProgress.value = true
+
+  await accountStore.registerAccount(newUser.value)
+  registerInProgress.value = false
+}
+</script>
+
+<template>
+  <card-view
+    :title="$t('account.register')"
+    icon="mdi-account-plus"
+  >
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.username')"
+          prepend-icon="mdi-account"
+          v-model="newUser.username"
+          clearable
+          :rules="getStringRules()"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.password')"
+          prepend-icon="mdi-key"
+          type="password"
+          v-model="newUser.password"
+          clearable
+          :rules="getPasswordRules()"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.email')"
+          prepend-icon="mdi-mail"
+          v-model="newUser.email"
+          :rules="getEmailRules()"
+          clearable
+        />
+      </v-col>
+    </v-row>
+
+    <template #actions>
+      <outlined-button
+        prepend-icon="mdi-arrow-left" 
+        @click="showRegisterCard = false"
+        :disabled="registerInProgress"
+      >
+        {{ $t('account.backToLogin') }}
+      </outlined-button>
+
+      <outlined-button
+        prepend-icon="mdi-account-plus"
+        @click="registerAccount"
+        :loading="registerInProgress"
+      >
+        {{ $t('account.register') }}
+      </outlined-button>
+    </template>
+  </card-view>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useAccountStore } from '@/data/stores/accountStore';
+import ordersCard from './ordersCard.vue';
+
+const accountStore = useAccountStore()
+
+function getDotColor(order, step: number) {
+  if (order.shippingProgress == step)
+  {
+    return "orange"
+  } else if (order.shippingProgress >= step) 
+  {
+    return "green"
+  } 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>
+  <v-container max-width="1000">
+    <v-row
+      v-if="accountStore.orders.length > 0"
+      v-for="order in accountStore.orders"
+    >
+      <v-col>
+        <orders-card :order="order" />
+      </v-col>
+    </v-row>
+
+    <v-row v-else>
+      <v-col>
+        <v-empty-state
+          icon="mdi-basket-off"
+          :title="$t('noOrders')"
+          :text="$t('noOrdersText')"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

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

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import { OrderModel } from '@/data/models/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>