8315-devToTest #1094
|
@ -1,5 +1,5 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref, toRef } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
import VnLv from 'components/ui/VnLv.vue';
|
import VnLv from 'components/ui/VnLv.vue';
|
||||||
|
@ -13,7 +13,7 @@ const DEFAULT_PRICE_KG = 0;
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
defineProps({
|
const props = defineProps({
|
||||||
item: {
|
item: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
|
@ -25,57 +25,63 @@ defineProps({
|
||||||
});
|
});
|
||||||
|
|
||||||
const dialog = ref(null);
|
const dialog = ref(null);
|
||||||
|
const card = toRef(props, 'item');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container order-catalog-item overflow-hidden">
|
<div class="container order-catalog-item overflow-hidden">
|
||||||
<QCard class="card shadow-6">
|
<QCard class="card shadow-6">
|
||||||
<div class="img-wrapper">
|
<div class="img-wrapper">
|
||||||
<VnImg :id="item.id" class="image" zoom-resolution="1600x900" />
|
<VnImg :id="card.id" class="image" zoom-resolution="1600x900" />
|
||||||
<div v-if="item.hex && isCatalog" class="item-color-container">
|
<div v-if="card.hex && isCatalog" class="item-color-container">
|
||||||
<div
|
<div
|
||||||
class="item-color"
|
class="item-color"
|
||||||
:style="{ backgroundColor: `#${item.hex}` }"
|
:style="{ backgroundColor: `#${card.hex}` }"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<span class="link">
|
<span class="link">
|
||||||
{{ item.name }}
|
{{ card.name }}
|
||||||
<ItemDescriptorProxy :id="item.id" />
|
<ItemDescriptorProxy :id="card.id" />
|
||||||
</span>
|
</span>
|
||||||
<p class="subName">{{ item.subName }}</p>
|
<p class="subName">{{ card.subName }}</p>
|
||||||
<template v-for="index in 4" :key="`tag-${index}`">
|
<template v-for="index in 4" :key="`tag-${index}`">
|
||||||
<VnLv
|
<VnLv
|
||||||
v-if="item?.[`tag${index + 4}`]"
|
v-if="card?.[`tag${index + 4}`]"
|
||||||
:label="item?.[`tag${index + 4}`] + ':'"
|
:label="card?.[`tag${index + 4}`] + ':'"
|
||||||
:value="item?.[`value${index + 4}`]"
|
:value="card?.[`value${index + 4}`]"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<div v-if="item.minQuantity" class="min-quantity">
|
<div v-if="card.minQuantity" class="min-quantity">
|
||||||
<QIcon name="production_quantity_limits" size="xs" />
|
<QIcon name="production_quantity_limits" size="xs" />
|
||||||
{{ item.minQuantity }}
|
{{ card.minQuantity }}
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<div class="price">
|
<div class="price">
|
||||||
<p v-if="isCatalog">
|
<p v-if="isCatalog">
|
||||||
{{ item.available }} {{ t('to') }}
|
{{ card.available }} {{ t('to') }}
|
||||||
{{ toCurrency(item.price) }}
|
{{ toCurrency(card.price) }}
|
||||||
</p>
|
</p>
|
||||||
<slot name="price" />
|
<slot name="price" />
|
||||||
<QIcon v-if="isCatalog" name="add_circle" class="icon">
|
<QIcon v-if="isCatalog" name="add_circle" class="icon">
|
||||||
<QTooltip>{{ t('globals.add') }}</QTooltip>
|
<QTooltip>{{ t('globals.add') }}</QTooltip>
|
||||||
<QPopupProxy ref="dialog">
|
<QPopupProxy ref="dialog">
|
||||||
<OrderCatalogItemDialog
|
<OrderCatalogItemDialog
|
||||||
:item="item"
|
:item="card"
|
||||||
@added="() => dialog.hide()"
|
@added="
|
||||||
|
(quantityAdded) => {
|
||||||
|
card.available += quantityAdded;
|
||||||
|
dialog.hide();
|
||||||
|
}
|
||||||
|
"
|
||||||
/>
|
/>
|
||||||
</QPopupProxy>
|
</QPopupProxy>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
</div>
|
</div>
|
||||||
<p v-if="item.priceKg" class="price-kg">
|
<p v-if="card.priceKg" class="price-kg">
|
||||||
{{ t('price-kg') }}
|
{{ t('price-kg') }}
|
||||||
{{ toCurrency(item.priceKg) || DEFAULT_PRICE_KG }}
|
{{ toCurrency(card.priceKg) || DEFAULT_PRICE_KG }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -25,6 +25,25 @@ const total = computed(() => state.get('orderTotal'));
|
||||||
// const onItemSaved = inject('onItemSaved');
|
// const onItemSaved = inject('onItemSaved');
|
||||||
const prices = ref((props.item.prices || []).map((item) => ({ ...item, quantity: 0 })));
|
const prices = ref((props.item.prices || []).map((item) => ({ ...item, quantity: 0 })));
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
|
const calculateTotals = (items) => {
|
||||||
|
return items.reduce(
|
||||||
|
(acc, item) => {
|
||||||
|
acc.totalQuantity += item.quantity;
|
||||||
|
acc.totalSum += item.quantity * item.price;
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
{ totalQuantity: 0, totalSum: 0 }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// const totalSum = (items) =>
|
||||||
|
// items.reduce((acc, item) => {
|
||||||
|
// return acc + item.quantity * item.price;
|
||||||
|
// }, 0);
|
||||||
|
// const totalQuantity = (items) =>
|
||||||
|
// items.reduce((acc, item) => {
|
||||||
|
// return acc + item.quantity;
|
||||||
|
// }, 0);
|
||||||
const addToOrder = async () => {
|
const addToOrder = async () => {
|
||||||
if (isLoading.value) return;
|
if (isLoading.value) return;
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
|
@ -33,10 +52,13 @@ const addToOrder = async () => {
|
||||||
items,
|
items,
|
||||||
orderFk: Number(route.params.id),
|
orderFk: Number(route.params.id),
|
||||||
});
|
});
|
||||||
state.set('orderTotal', total.value + 100);
|
|
||||||
|
const { totalQuantity, totalSum } = calculateTotals(items);
|
||||||
|
|
||||||
|
state.set('orderTotal', total.value + totalSum);
|
||||||
notify(t('globals.dataSaved'), 'positive');
|
notify(t('globals.dataSaved'), 'positive');
|
||||||
// onItemSaved({ ...props, items, saved: true });
|
// onItemSaved({ ...props, items, saved: true });
|
||||||
emit('added', items);
|
emit('added', -totalQuantity);
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
};
|
};
|
||||||
const canAddToOrder = () => {
|
const canAddToOrder = () => {
|
||||||
|
|
Loading…
Reference in New Issue