wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Update order summary

This commit is contained in:
Kevin Martinez 2023-12-19 12:45:11 -04:00
parent 612fe9d605
commit 827a3a4e5a
1 changed files with 73 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/pages/Order/Card/OrderSummary.vue
View File

@ -1,13 +1,14 @@
<script setup>
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import CardSummary from 'components/ui/CardSummary.vue';
import { useI18n } from 'vue-i18n';
import VnLv from 'components/ui/VnLv.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import { toCurrency, toDateHour } from 'src/filters';
import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { toCurrency, toDateHour } from 'src/filters';
import VnLv from 'components/ui/VnLv.vue';
import CardSummary from 'components/ui/CardSummary.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
const { t } = useI18n();
const route = useRoute();
@ -29,22 +30,22 @@ const detailsColumns = ref([
sortable: true,
},
{
name: t('order.summary.description'),
name: 'description',
label: t('order.summary.description'),
field: (row) => row?.item?.name,
},
{
name: t('order.summary.quantity'),
name: 'quantity',
label: t('order.summary.quantity'),
field: (row) => row?.quantity,
},
{
name: t('order.summary.price'),
name: 'price',
label: t('order.summary.price'),
field: (row) => toCurrency(row?.price),
},
{
name: t('order.summary.amount'),
name: 'amount',
label: t('order.summary.amount'),
field: (row) => toCurrency(row?.quantity * row?.price),
},
@ -159,6 +160,40 @@ const detailsColumns = ref([
flat
hide-pagination
>
<template #header="props">
<QTr :props="props">
<QTh auto-width>{{ t('order.summary.item') }}</QTh>
<QTh>{{ t('order.summary.description') }}</QTh>
<QTh auto-width>{{ t('order.summary.quantity') }}</QTh>
<QTh auto-width>{{ t('order.summary.price') }}</QTh>
<QTh auto-width>{{ t('order.summary.amount') }}</QTh>
</QTr>
</template>
<template #body="props">
<QTr :props="props">
<QTd key="item" :props="props" class="item">
{{ props.row.item?.id }}
</QTd>
<QTd key="description" :props="props" class="description">
<div class="name">
<span>{{ props.row.item.name }}</span>
<span v-if="props.row.item.subName" class="subName">
{{ props.row.item.subName }}
</span>
</div>
<fetched-tags :item="props.row.item" :max-length="5" />
</QTd>
<QTd key="quantity" :props="props">
{{ props.row.quantity }}
</QTd>
<QTd key="price" :props="props">
{{ props.row.price }}
</QTd>
<QTd key="amount" :props="props">
{{ toCurrency(props.row?.quantity * props.row?.price) }}
</QTd>
</QTr>
</template>
</QTable>
</QCard>
</template>
@ -168,4 +203,33 @@ const detailsColumns = ref([
.address {
white-space: normal;
}
.item {
text-align: center;
}
.description {
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
height: auto;
padding-top: 12px;
padding-bottom: 12px;
.name {
display: flex;
align-items: center;
padding-bottom: 8px;
& > * {
flex: 1;
}
.subName {
text-transform: uppercase;
color: var(--vn-label);
}
}
}
</style>