tobias/eventmaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Matching UI with improved API

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-09-24 13:12:44 +02:00
parent 8395b4427d
commit 0b34174ce9
34 changed files with 194 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
software/src/pages/accountPage/accountDataCard.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import { useUserStore } from '@/data/stores/userStore';
import cardView from '@/components/cardView.vue';
import outlinedButton from '@/components/outlinedButton.vue';
import { useAccountStore } from '@/data/stores/accountStore';
const userStore = useUserStore()
const accountStore = useAccountStore()
</script>
<template>
@@ -13,14 +13,14 @@ const userStore = useUserStore()
<v-col>
<v-text-field
:label="$t('account.username')"
v-model="userStore.userAccount.username"
v-model="accountStore.userAccount.username"
disabled
/>
</v-col>
<v-col>
<v-text-field
:label="$t('account.password')"
v-model="userStore.userAccount.password"
v-model="accountStore.userAccount.password"
type="password"
/>
</v-col>
@@ -30,13 +30,13 @@ const userStore = useUserStore()
<v-col>
<v-text-field
:label="$t('userInfo.firstName')"
v-model="userStore.userAccount.firstName"
v-model="accountStore.userAccount.firstName"
/>
</v-col>
<v-col>
<v-text-field
:label="$t('userInfo.lastName')"
v-model="userStore.userAccount.lastName"
v-model="accountStore.userAccount.lastName"
/>
</v-col>
</v-row>
@@ -45,13 +45,13 @@ const userStore = useUserStore()
<v-col>
<v-text-field
:label="$t('userInfo.street')"
v-model="userStore.userAccount.street"
v-model="accountStore.userAccount.addresses[0].street"
/>
</v-col>
<v-col>
<v-text-field
:label="$t('userInfo.houseNumber')"
v-model="userStore.userAccount.houseNumber"
v-model="accountStore.userAccount.addresses[0].houseNumber"
/>
</v-col>
</v-row>
@@ -60,13 +60,13 @@ const userStore = useUserStore()
<v-col>
<v-text-field
:label="$t('userInfo.postalCode')"
v-model="userStore.userAccount.postalCode"
v-model="accountStore.userAccount.addresses[0].postalCode"
/>
</v-col>
<v-col>
<v-text-field
:label="$t('userInfo.city')"
v-model="userStore.userAccount.city"
v-model="accountStore.userAccount.addresses[0].city"
/>
</v-col>
</v-row>
@@ -75,13 +75,13 @@ const userStore = useUserStore()
<v-col>
<v-text-field
:label="$t('userInfo.bankName')"
v-model="userStore.userAccount.bankName"
v-model="accountStore.userAccount.payments[0].bankName"
/>
</v-col>
<v-col>
<v-text-field
:label="$t('userInfo.iban')"
v-model="userStore.userAccount.iban"
v-model="accountStore.userAccount.payments[0].iban"
/>
</v-col>
</v-row>
@@ -89,7 +89,7 @@ const userStore = useUserStore()
<template #actions>
<outlined-button
@click="userStore.updateAccount()"
@click="accountStore.updateAccount()"
prepend-icon="mdi-content-save"
color="green"
>

6
software/src/pages/basketPage/index.vue
View File

@@ -3,13 +3,13 @@ import { useBasketStore } from '@/data/stores/basketStore';
import productsTable from './productsTable.vue';
import alertBanner from '@/components/alertBanner.vue';
import cardView from '@/components/cardView.vue';
import { useUserStore } from '@/data/stores/userStore';
import orderingDialog from './orderingDialog.vue';
import outlinedButton from '@/components/outlinedButton.vue';
import { ref } from 'vue';
import { useAccountStore } from '@/data/stores/accountStore';
const basketStore = useBasketStore()
const userStore = useUserStore()
const accountStore = useAccountStore()
const showOrderingDialog = ref()
</script>
@@ -47,7 +47,7 @@ const showOrderingDialog = ref()
<template #actions>
<outlined-button
prepend-icon="mdi-basket-check"
:disabled="basketStore.itemsInBasket.length == 0 || userStore.userAccount.id == null"
:disabled="basketStore.itemsInBasket.length == 0 || accountStore.userAccount.id == null"
variant="outlined"
color="green"
@click="showOrderingDialog = true"

6
software/src/pages/loginPage/loginForm.vue
View File

@@ -1,16 +1,16 @@
<script setup lang="ts">
import { useUserStore } from '@/data/stores/userStore';
import { ref } from 'vue';
import cardView from '@/components/cardView.vue';
import outlinedButton from '@/components/outlinedButton.vue';
import { useAccountStore } from '@/data/stores/accountStore';
const userStore = useUserStore()
const accountStore = useAccountStore()
const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
const username = ref("duranduran")
const password = ref("H4nn0ver")
function startLogin() {
userStore.login(username.value, password.value)
accountStore.login(username.value, password.value)
}
</script>

14
software/src/pages/loginPage/registerForm.vue
View File

@@ -1,13 +1,13 @@
<script setup lang="ts">
import { AccountModel } from '@/data/models/accountModel';
import { useUserStore } from '@/data/stores/userStore';
import { ref } from 'vue';
import cardView from '@/components/cardView.vue';
import outlinedButton from '@/components/outlinedButton.vue';
import { useAccountStore } from '@/data/stores/accountStore';
const newUser = ref(new AccountModel())
const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
const userStore = useUserStore()
const accountStore = useAccountStore()
</script>
<template>
@@ -54,12 +54,12 @@ const userStore = useUserStore()
<v-text-field
:label="$t('userInfo.street')"
prepend-icon="mdi-numeric"
v-model="newUser.street"
v-model="newUser.addresses[0].street"
clearable
/>
</v-col>
<v-col cols="4">
<v-text-field :label="$t('userInfo.houseNumber')" v-model="newUser.houseNumber" clearable />
<v-text-field :label="$t('userInfo.houseNumber')" v-model="newUser.addresses[0].houseNumber" clearable />
</v-col>
</v-row>
@@ -68,12 +68,12 @@ const userStore = useUserStore()
<v-text-field
:label="$t('userInfo.postalCode')"
prepend-icon="mdi-city"
v-model="newUser.postalCode"
v-model="newUser.addresses[0].postalCode"
clearable
/>
</v-col>
<v-col>
<v-text-field :label="$t('userInfo.city')" v-model="newUser.city" clearable />
<v-text-field :label="$t('userInfo.city')" v-model="newUser.addresses[0].city" clearable />
</v-col>
</v-row>
</v-container>
@@ -88,7 +88,7 @@ const userStore = useUserStore()
<outlined-button
prepend-icon="mdi-account-plus"
@click="userStore.registerAccount(newUser)"
@click="accountStore.registerAccount(newUser)"
>
{{ $t('account.register') }}
</outlined-button>

6
software/src/pages/ordersPage/index.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { useUserStore } from '@/data/stores/userStore';
import { useAccountStore } from '@/data/stores/accountStore';
import ordersCard from './ordersCard.vue';
const userStore = useUserStore()
const accountStore = useAccountStore()
function getDotColor(order, step: number) {
if (order.shippingProgress == step)
@@ -27,7 +27,7 @@ function formatDateTimeString(string: string) {
<template>
<v-container max-width="1000">
<v-row v-for="order in userStore.orders">
<v-row v-for="order in accountStore.orders">
<v-col>
<orders-card :order="order" />
</v-col>

8
software/src/pages/ordersPage/ordersCard.vue
View File

@@ -29,8 +29,8 @@ function formatDateTimeString(string: string) {
<template>
<card-view
:title="$t('orders.orderFrom') + ' ' + formatDateTimeString(order.createdAt) + ' ' + $t('oclock')"
:subtitle="$t('totalPrice') + ': ' + order.totalPrice + ' €'"
:title="$t('orders.orderFrom') + ' ' + formatDateTimeString(order.orderedAt) + ' ' + $t('oclock')"
:subtitle="$t('totalPrice') + ': ' + 0 + ' €'"
>
<v-timeline direction="horizontal" side="start" size="x-large">
<v-timeline-item :dot-color="getDotColor(order, 1)" icon="mdi-basket-check">
@@ -64,9 +64,9 @@ function formatDateTimeString(string: string) {
</tr>
</thead>
<tbody>
<tr v-for="orderItem in order.orderItem">
<tr v-for="orderItem in order.orderItems">
<td>{{ orderItem.quantity }}x</td>
<td>{{ orderItem.product.brand }}</td>
<td>{{ orderItem.product.brand.name }}</td>
<td>{{ orderItem.product.name }}</td>
<td>{{ orderItem.product.price }} €</td>
</tr>

12
software/src/pages/preferencesPage/pageSetup.vue
View File

@@ -1,20 +1,20 @@
<script setup lang="ts">
import { ThemeEnum } from '@/data/enums/themeEnums';
import { useTheme } from 'vuetify/lib/framework.mjs';
import { useUserStore } from '@/data/stores/userStore';
import { i18n } from '@/plugins/i18n';
import cardView from '@/components/cardView.vue';
import { usePreferencesStore } from '@/data/stores/preferencesStore';
const userStore = useUserStore()
const preferencesStore = usePreferencesStore()
const theme = useTheme()
const themeEnums = Object.values(ThemeEnum)
function changeTheme() {
theme.global.name.value = userStore.theme
theme.global.name.value = preferencesStore.theme
}
function changeLanguage() {
i18n.global.locale = userStore.language
i18n.global.locale = preferencesStore.language
}
</script>
@@ -24,7 +24,7 @@ function changeLanguage() {
<v-row>
<v-col>
<v-select
v-model="userStore.theme"
v-model="preferencesStore.theme"
:items="themeEnums"
:label="$t('preferences.selectedTheme')"
@update:model-value="changeTheme"
@@ -34,7 +34,7 @@ function changeLanguage() {
<v-row>
<v-col>
<v-select v-model="userStore.language" :items="$i18n.availableLocales" :label="$t('preferences.language')"
<v-select v-model="preferencesStore.language" :items="$i18n.availableLocales" :label="$t('preferences.language')"
@update:model-value="changeLanguage"
/>
</v-col>

6
software/src/pages/productsPage/index.vue
View File

@@ -3,16 +3,16 @@ import productCard from "./productCard.vue"
import productDetails from "./productDetailsDialog.vue"
import { ref, watch } from "vue";
import { useProductStore } from "@/data/stores/productStore";
import { ProductWithCategoryModel } from "@/data/models/productWithCategoryModel";
import alertBanner from "@/components/alertBanner.vue";
import filterNavDrawer from "./filterNavDrawer.vue";
import { ProductModel } from '@/data/models/productModel';
const productStore = useProductStore()
const showProductDetails = ref(false)
const dialogProduct = ref(new ProductWithCategoryModel())
const dialogProduct = ref(new ProductModel())
function showProductDialog(product: ProductWithCategoryModel) {
function showProductDialog(product: ProductModel) {
dialogProduct.value = product
showProductDetails.value = true
}

12
software/src/pages/productsPage/productCard.vue
View File

@@ -1,11 +1,11 @@
<script setup lang="ts">
import { ProductWithCategoryModel } from '@/data/models/productWithCategoryModel';
import { ProductModel } from '@/data/models/productModel';
import cardView from '@/components/cardView.vue';
defineProps({
product: {
required: true,
type: ProductWithCategoryModel
type: ProductModel
}
})
</script>
@@ -65,11 +65,11 @@ defineProps({
</div>
<div style="position: absolute; bottom: 0; right: 0;" class="pr-2 pb-2">
<div v-if="product.storedItems > 5" class="text-green-lighten-1">
{{ $t("product.storedItemsAvailable", [product.storedItems]) }}
<div v-if="product.inStock > 5" class="text-green-lighten-1">
{{ $t("product.storedItemsAvailable", [product.inStock]) }}
</div>
<div v-else-if="product.storedItems > 0" class="text-orange-lighten-1">
{{ $t("product.storedItemsAvailable", [product.storedItems]) }}
<div v-else-if="product.inStock > 0" class="text-orange-lighten-1">
{{ $t("product.storedItemsAvailable", [product.inStock]) }}
</div>
<div v-else class="text-red">
{{ $t("product.soldOut") }}

20
software/src/pages/productsPage/productDetailsDialog.vue
View File

@@ -4,13 +4,13 @@ import { ModelRef, ref, watch } from 'vue';
import { useBasketStore } from '@/data/stores/basketStore';
import { calcProductPrice, productToBasketItem } from '@/scripts/productScripts';
import ActionDialog from '@/components/actionDialog.vue'
import { ProductWithCategoryModel } from '@/data/models/productWithCategoryModel';
import { ProductModel } from '@/data/models/productModel';
import outlinedButton from '@/components/outlinedButton.vue';
const props = defineProps({
product: {
type: ProductWithCategoryModel,
default: new ProductWithCategoryModel()
type: ProductModel,
default: new ProductModel()
}
})
@@ -32,7 +32,7 @@ watch(() => props.product.images, () => {
<template>
<action-dialog
:title="product.brand + ': ' + product.name"
:title="product.brand.name + ': ' + product.name"
:icon="product.category.icon"
:subtitle="product.category.name"
v-model="showDialog"
@@ -107,11 +107,11 @@ watch(() => props.product.images, () => {
<v-row>
<v-col cols="3">
<div class="pt-3">
<div v-if="product.storedItems > 5" class="text-green-lighten-1">
{{ $t("product.storedItemsAvailable", [product.storedItems]) }}
<div v-if="product.inStock > 5" class="text-green-lighten-1">
{{ $t("product.storedItemsAvailable", [product.inStock]) }}
</div>
<div v-else-if="product.storedItems > 0" class="text-orange-lighten-1">
{{ $t("product.storedItemsAvailable", [product.storedItems]) }}
<div v-else-if="product.inStock > 0" class="text-orange-lighten-1">
{{ $t("product.storedItemsAvailable", [product.inStock]) }}
</div>
<div v-else class="text-red">
{{ $t("product.soldOut") }}
@@ -147,14 +147,14 @@ watch(() => props.product.images, () => {
:max="10"
density="comfortable"
:hide-details="true"
:disabled="product.storedItems == 0"
:disabled="product.inStock == 0"
/>
<outlined-button
prepend-icon="mdi-cart-plus"
@click="addProductToBasket"
height="50"
:disabled="product.storedItems == 0"
:disabled="product.inStock == 0"
>
{{ $t('addToBasket') }}
</outlined-button>