196 lines
4.8 KiB
Vue
196 lines
4.8 KiB
Vue
<script setup>
|
|
import { ref, toRef } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import VnLv from 'components/ui/VnLv.vue';
|
|
import VnImg from 'src/components/ui/VnImg.vue';
|
|
import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
|
|
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
|
|
|
import { toCurrency } from 'filters/index';
|
|
|
|
const DEFAULT_PRICE_KG = 0;
|
|
|
|
const { t } = useI18n();
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
isCatalog: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const dialog = ref(null);
|
|
const card = toRef(props, 'item');
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container order-catalog-item overflow-hidden">
|
|
<QCard class="card shadow-6">
|
|
<div class="img-wrapper">
|
|
<VnImg :id="card.id" class="image" zoom-resolution="1600x900" />
|
|
<div v-if="card.hex && isCatalog" class="item-color-container">
|
|
<div
|
|
class="item-color"
|
|
:style="{ backgroundColor: `#${card.hex}` }"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<span class="link">
|
|
{{ card.name }}
|
|
<ItemDescriptorProxy :id="card.id" />
|
|
</span>
|
|
<p class="subName">{{ card.subName }}</p>
|
|
<template v-for="index in 4" :key="`tag-${index}`">
|
|
<VnLv
|
|
v-if="card?.[`tag${index + 4}`]"
|
|
:label="card?.[`tag${index + 4}`] + ':'"
|
|
:value="card?.[`value${index + 4}`]"
|
|
/>
|
|
</template>
|
|
<div v-if="card.minQuantity" class="min-quantity">
|
|
<QIcon name="production_quantity_limits" size="xs" />
|
|
{{ card.minQuantity }}
|
|
</div>
|
|
<div class="footer">
|
|
<div class="price">
|
|
<p v-if="isCatalog">
|
|
{{ card.available }} {{ t('to') }}
|
|
{{ toCurrency(card.price) }}
|
|
</p>
|
|
<slot name="price" />
|
|
<QIcon v-if="isCatalog" name="add_circle" class="icon">
|
|
<QTooltip>{{ t('globals.add') }}</QTooltip>
|
|
<QPopupProxy ref="dialog">
|
|
<OrderCatalogItemDialog
|
|
:item="card"
|
|
@added="
|
|
(quantityAdded) => {
|
|
card.available += quantityAdded;
|
|
dialog.hide();
|
|
}
|
|
"
|
|
/>
|
|
</QPopupProxy>
|
|
</QIcon>
|
|
</div>
|
|
<p v-if="card.priceKg" class="price-kg">
|
|
{{ t('price-kg') }}
|
|
{{ toCurrency(card.priceKg) || DEFAULT_PRICE_KG }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</QCard>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.order-catalog-item {
|
|
.vn-label-value {
|
|
display: flex;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
|
|
.label {
|
|
color: var(--vn-label-color);
|
|
}
|
|
|
|
.value {
|
|
color: var(--vn-text-color);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
max-width: 448px;
|
|
width: 100%;
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
height: 100%;
|
|
max-height: 192px;
|
|
}
|
|
|
|
.card > * {
|
|
flex: 1;
|
|
}
|
|
|
|
.img-wrapper {
|
|
position: relative;
|
|
max-width: 192px;
|
|
}
|
|
|
|
.content {
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.min-quantity {
|
|
text-align: right;
|
|
color: $negative !important;
|
|
}
|
|
|
|
.footer {
|
|
.price {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
p {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.icon {
|
|
color: $primary;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.price-kg {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.item-color-container {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
right: 12px;
|
|
background: linear-gradient(var(--vn-section-color), $primary);
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 4px;
|
|
|
|
.item-color {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
</style>
|
|
<i18n>
|
|
es:
|
|
to: to
|
|
price-kg: Precio por Kg
|
|
en:
|
|
to: hasta
|
|
price-kg: Price per Kg
|
|
</i18n>
|