Remove EventTable in database, redesign frontend URL paths
This commit is contained in:
60
software/src/pages/misc/basketPage/index.vue
Normal file
60
software/src/pages/misc/basketPage/index.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import { useBasketStore } from '@/data/stores/basketStore';
|
||||
import cardView from '@/components/basics/cardView.vue';
|
||||
import orderingDialog from './orderingDialog.vue';
|
||||
import outlinedButton from '@/components/basics/outlinedButton.vue';
|
||||
import { ref } from 'vue';
|
||||
import { useAccountStore } from '@/data/stores/accountStore';
|
||||
import ticketsTable from './ticketsTable.vue';
|
||||
|
||||
const basketStore = useBasketStore()
|
||||
const accountStore = useAccountStore()
|
||||
const showOrderingDialog = ref()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container max-width="1000">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<card-view
|
||||
:title="$t('basket')"
|
||||
:subtitle="basketStore.itemsInBasket.length + ' ' +
|
||||
$tc('product.product', basketStore.itemsInBasket.length)"
|
||||
v-model="showOrderingDialog"
|
||||
icon="mdi-cart"
|
||||
>
|
||||
<!-- Display items if basket is not empty -->
|
||||
<div v-if="basketStore.itemsInBasket.length > 0">
|
||||
<tickets-table />
|
||||
</div>
|
||||
|
||||
<!-- Display empty state if card is empty -->
|
||||
<v-empty-state v-else
|
||||
icon="mdi-basket-off"
|
||||
:title="$t('emptyBasketTitle')"
|
||||
:text="$t('emptyBasketText')"
|
||||
/>
|
||||
|
||||
<v-card-text class="text-right text-h5" v-if="basketStore.itemsInBasket.length > 0">
|
||||
{{ $t('totalPrice') }}: {{ (basketStore.getTotalPrice).toFixed(2) }} €
|
||||
</v-card-text>
|
||||
|
||||
|
||||
<template #actions>
|
||||
<outlined-button
|
||||
prepend-icon="mdi-basket-check"
|
||||
:disabled="basketStore.itemsInBasket.length == 0 || accountStore.userAccount.id == null"
|
||||
variant="outlined"
|
||||
color="green"
|
||||
@click="showOrderingDialog = true"
|
||||
>
|
||||
{{ $t('orderNow') }}
|
||||
</outlined-button>
|
||||
</template>
|
||||
</card-view>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<ordering-dialog v-model="showOrderingDialog" />
|
||||
</template>
|
||||
109
software/src/pages/misc/basketPage/orderingDialog.vue
Normal file
109
software/src/pages/misc/basketPage/orderingDialog.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<script setup lang="ts">
|
||||
import actionDialog from '@/components/basics/actionDialog.vue';
|
||||
import { useBasketStore } from '@/data/stores/basketStore';
|
||||
import outlinedButton from '@/components/basics/outlinedButton.vue';
|
||||
import { ModelRef, ref } from 'vue';
|
||||
import { useAccountStore } from '@/data/stores/accountStore';
|
||||
|
||||
const basketStore = useBasketStore()
|
||||
const accountStore = useAccountStore()
|
||||
const showDialog: ModelRef<boolean> = defineModel()
|
||||
const orderingInProgress = ref(false)
|
||||
const addressError = ref(false)
|
||||
const paymentError = ref(false)
|
||||
|
||||
async function doOrder() {
|
||||
orderingInProgress.value = true
|
||||
addressError.value = false
|
||||
paymentError.value = false
|
||||
|
||||
if (basketStore.usedAddress == null) {
|
||||
addressError.value = true
|
||||
}
|
||||
|
||||
if (basketStore.usedPayment == null){
|
||||
paymentError.value = true
|
||||
}
|
||||
|
||||
if (basketStore.usedAddress != null && basketStore.usedPayment != null) {
|
||||
|
||||
await basketStore.takeOrder()
|
||||
showDialog.value = false
|
||||
}
|
||||
|
||||
orderingInProgress.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<action-dialog
|
||||
:title="$t('ordering.ordering')"
|
||||
icon="mdi-basket-check"
|
||||
v-model="showDialog"
|
||||
max-width="800"
|
||||
persistent
|
||||
>
|
||||
<v-row>
|
||||
<v-col>
|
||||
{{ $t('account.address', accountStore.userAccount.addresses.length) }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-radio-group
|
||||
v-model="basketStore.usedAddress"
|
||||
:error="addressError"
|
||||
>
|
||||
<v-radio
|
||||
v-for="address in accountStore.userAccount.addresses"
|
||||
:value="address"
|
||||
:label="address.street + ' ' + address.houseNumber + ', ' + address.postalCode + ' ' + address.city"
|
||||
|
||||
/>
|
||||
</v-radio-group>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
{{ $t('account.payment', accountStore.userAccount.payments.length) }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-radio-group
|
||||
v-model="basketStore.usedPayment"
|
||||
>
|
||||
<v-radio
|
||||
v-for="payment in accountStore.userAccount.payments"
|
||||
:value="payment"
|
||||
:label="payment.bankName + ': ' + payment.iban"
|
||||
:error="paymentError"
|
||||
/>
|
||||
</v-radio-group>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<template #actions>
|
||||
<outlined-button
|
||||
@click="showDialog = false"
|
||||
prepend-icon="mdi-close"
|
||||
color="orange"
|
||||
:disabled="orderingInProgress"
|
||||
>
|
||||
{{ $t('dialog.cancel') }}
|
||||
</outlined-button>
|
||||
|
||||
<outlined-button
|
||||
@click="doOrder"
|
||||
:loading="orderingInProgress"
|
||||
prepend-icon="mdi-send"
|
||||
color="green"
|
||||
>
|
||||
{{ $t('ordering.takeOrder') }}
|
||||
</outlined-button>
|
||||
</template>
|
||||
</action-dialog>
|
||||
</template>
|
||||
67
software/src/pages/misc/basketPage/ticketsTable.vue
Normal file
67
software/src/pages/misc/basketPage/ticketsTable.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
import { useBasketStore } from '@/data/stores/basketStore';
|
||||
import { BasketItemModel } from '@/data/models/ordering/basketItemModel';
|
||||
import { calcPrice } from '@/scripts/concertScripts';
|
||||
|
||||
const basketStore = useBasketStore()
|
||||
|
||||
function removeFromBasket(basketItem: BasketItemModel) {
|
||||
basketStore.removeItemFromBasket(basketItem)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('band') }}</th>
|
||||
<th>{{ $t('event') }}</th>
|
||||
<th class="text-center">{{ $t('quantity') }}</th>
|
||||
<th class="text-right">{{ $t('product.productPrice') }}</th>
|
||||
<th class="text-right">{{ $t('totalPrice') }}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="basketItem in basketStore.itemsInBasket">
|
||||
<!-- Band name -->
|
||||
<td>
|
||||
{{ basketItem.band.name }}
|
||||
</td>
|
||||
|
||||
<!-- Event name -->
|
||||
<td>
|
||||
{{ basketItem.event.name }}
|
||||
</td>
|
||||
|
||||
<!-- Quantity -->
|
||||
<td class="text-center">
|
||||
{{ basketItem.seats.length }}x
|
||||
</td>
|
||||
|
||||
<!-- Price per event -->
|
||||
<td class="text-right">
|
||||
<div v-if="basketItem.seats">
|
||||
{{ basketItem.price }} €
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Total price -->
|
||||
<td class="text-right">
|
||||
{{ (calcPrice(basketItem.concert.price, basketItem.seats.length)).toFixed(2) }} €
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<v-btn
|
||||
icon="mdi-delete"
|
||||
@click="removeFromBasket(basketItem)"
|
||||
color="red"
|
||||
variant="text"
|
||||
flat
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</template>
|
||||
Reference in New Issue
Block a user