68 lines
2.1 KiB
Vue
68 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { BasketItemModel } from '@/data/models/basketItemModel';
|
|
import { useBasketStore } from '@/data/stores/basketStore';
|
|
import { calcPrice, calcProductPrice } from '@/scripts/productScripts';
|
|
|
|
const basketStore = useBasketStore()
|
|
|
|
function removeFromBasket(basketItem: BasketItemModel) {
|
|
basketStore.removeItemFromBasket(basketItem)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Category</th>
|
|
<th>Brand</th>
|
|
<th>Products</th>
|
|
<th class="text-center">Quantity</th>
|
|
<th class="text-right">Product price</th>
|
|
<th class="text-right">Total price</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr v-for="basketItem in basketStore.itemsInBasket">
|
|
<td><v-btn icon="mdi-delete" flat @click="removeFromBasket(basketItem)"/></td>
|
|
<td><v-icon :icon="basketItem.categoryIcon" /> {{ basketItem.categoryName }} </td>
|
|
<td>{{ basketItem.brand }}</td>
|
|
<td>{{ basketItem.name }}</td>
|
|
<td class="text-center">{{ basketItem.quantity }}x</td>
|
|
|
|
<td class="text-right">
|
|
<div v-if="basketItem.discount > 0">
|
|
<strong class="font-weight-bold text-body-1 text-red-lighten-1">
|
|
{{ calcPrice(basketItem.price, basketItem.discount) }} €
|
|
</strong>
|
|
|
|
<div class="text-decoration-line-through ml-3 mt-1 text-caption">{{ basketItem.price }} €</div>
|
|
</div>
|
|
|
|
<div v-else>
|
|
{{ basketItem.price }} €
|
|
</div>
|
|
</td>
|
|
|
|
|
|
<td class="text-right">
|
|
<div v-if="basketItem.discount > 0">
|
|
<strong class="font-weight-bold text-body-1 text-red-lighten-1">
|
|
{{ calcPrice(basketItem.price, basketItem.discount, basketItem.quantity) }} €
|
|
</strong>
|
|
|
|
<div class="text-decoration-line-through ml-3 mt-1 text-caption">
|
|
{{ calcPrice(basketItem.price, 0, basketItem.quantity) }} €
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else>
|
|
{{ calcPrice(basketItem.price, 0, basketItem.quantity) }} €
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</v-table>
|
|
</template> |