verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 59 Releases Wiki Activity

perf: ItemProposal

This commit is contained in:
Javier Segarra 2024-06-12 22:23:58 +02:00
parent 8d9bfd8f1d
commit 4226c52fc5
4 changed files with 82 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ui/VnPaginate.vue
View File

@ -160,13 +160,10 @@ defineExpose({ fetch, addFilter });
<template> <template>
<div v-if="append" class="full-width"> <div v-if="append" class="full-width">
{{ !props.autoLoad && !store.data && !isLoading }}
{{ props.skeleton && props.autoLoad && !store.data }}
<div <div
v-if="!props.autoLoad && !store.data && !isLoading" v-if="!props.autoLoad && !store.data && !isLoading"
class="info-row q-pa-md text-center" class="info-row q-pa-md text-center"
> >
asd
<h5> <h5>
{{ t('No data to display') }} {{ t('No data to display') }}
</h5> </h5>

170
src/pages/Item/components/ItemProposal.vue
View File

@ -14,11 +14,17 @@ const $props = defineProps({
required: true, required: true,
default: () => {}, default: () => {},
}, },
tickets: {
type: Array,
required: false,
default: () => [],
},
}); });
const proposalSelected = ref([]); const proposalSelected = ref([]);
const quantity = ref(-1); const quantity = ref(-1);
const token = session.getTokenMultimedia(); const token = session.getTokenMultimedia();
const index = ref(0);
const currentTicket = computed(() => $props.tickets[index.value]);
const showProposalDialog = ref(false); const showProposalDialog = ref(false);
const defaultColumnAttrs = { const defaultColumnAttrs = {
align: 'left', align: 'left',
@ -32,8 +38,16 @@ const statusConditionalValue = (row) => {
return status; return status;
}; };
const conditionalValue = (tag) => (tag === 1 ? 'match' : 'not-match'); const conditionalValue = (tag) => (tag === 1 ? 'match' : 'not-match');
const conditionalValuePrice = ({ price2, priceOld }) => const conditionalValuePrice = (price) =>
price2 > priceOld * 1.3 ? 'match' : 'not-match'; price > currentTicket.value.price * 1.3 ? 'match' : 'not-match';
const changeTicket = (type, _index = 0) => {
const value = type ? 1 : -1;
const nextIndex = index.value + value + _index;
const ticket = $props.tickets[nextIndex];
if (ticket.ticketFk === currentTicket.value.ticketFk)
return changeTicket(true, nextIndex - 1);
index.value = nextIndex;
};
const columns = computed(() => [ const columns = computed(() => [
{ {
...defaultColumnAttrs, ...defaultColumnAttrs,
@ -111,7 +125,6 @@ const columns = computed(() => [
label: t('proposal.price2'), label: t('proposal.price2'),
name: 'price2', name: 'price2',
field: 'price2', field: 'price2',
classes: ({ match8 }) => conditionalValuePrice(match8),
}, },
{ {
...defaultColumnAttrs, ...defaultColumnAttrs,
@ -120,20 +133,6 @@ const columns = computed(() => [
field: 'located', field: 'located',
}, },
]); ]);
const columnPrices = computed(() => [
{
...defaultColumnAttrs,
label: t('proposal.ticket'),
name: 'ticketFk',
field: 'counter',
},
{
...defaultColumnAttrs,
label: t('proposal.Diff'),
name: 'Diff',
field: 'counter',
},
]);
async function confirm() { async function confirm() {
quantity.value = 0; quantity.value = 0;
// const response = { address: address.value }; // const response = { address: address.value };
@ -170,13 +169,38 @@ async function confirm() {
<QBtn icon="close" flat round dense v-close-popup /> <QBtn icon="close" flat round dense v-close-popup />
</QCardSection> </QCardSection>
<QCardSection class="row items-center justify-center column items-stretch"> <QCardSection class="row items-center justify-center column items-stretch">
<span class="text-h6 text-grey">{{ t('proposal.title') }}</span> <span class="text-h6 text-grey">
{{ currentTicket }}
{{
t('proposal.title', {
ticketFk: currentTicket.ticketFk,
saleFk: currentTicket.saleFk,
})
}}**
</span>
</QCardSection> </QCardSection>
<QCardSection class="row items-center justify-center column items-stretch"> <QCardSection class="row items-center justify-center column items-stretch">
<VnRow style="display: flex"> <!-- <VnRow style="display: flex"> -->
<div class="calendars-header" v-if="$props.tickets.length > 0">
<QBtn
icon="arrow_left"
flat
class="full-height"
@click="changeTicket(false)"
:disable="index === 0"
/>
<!-- <span>{{ currentTicket.ticketFk }}</span> -->
<QBtn
icon="arrow_right"
flat
class="full-height"
@click="changeTicket(true)"
:disable="index === $props.tickets.length - 1"
/>
</div>
<div>
<VnPaginate <VnPaginate
:append="false" :append="false"
style="width: 70vw !important"
data-key="ItemsGetSimilar" data-key="ItemsGetSimilar"
url="Items/getSimilar" url="Items/getSimilar"
:filter="{ :filter="{
@ -204,8 +228,8 @@ async function confirm() {
:rows-per-page-options="[0]" :rows-per-page-options="[0]"
hide-pagination hide-pagination
> >
<template #top-row="{ cols }"> <template #top-row>
<QTr> <!-- <QTr>
<QTd /> <QTd />
<QTd <QTd
v-for="(col, index) in cols" v-for="(col, index) in cols"
@ -221,7 +245,7 @@ async function confirm() {
dense dense
/> />
</QTd> </QTd>
</QTr> </QTr> -->
</template> </template>
<template #body-cell-longName="{ row, value }"> <template #body-cell-longName="{ row, value }">
<QTd align="right" class="text-primary"> <QTd align="right" class="text-primary">
@ -237,88 +261,22 @@ async function confirm() {
></div> ></div>
</QTd> </QTd>
</template> </template>
</QTable> <template #body-cell-price2="{ row, value }">
</template>
</VnPaginate>
<VnPaginate
class="q-ml-sm"
:append="false"
style="width: 20vw !important; margin-left: 40px !important"
data-key="ItemsGetSimilar"
url="Items/getSimilar"
:filter="{
where: {
itemFk: $props.item.itemFk,
warehouseFk: $props.item.warehouseFk,
},
}"
auto-load
>
<template #body>
<QTable
:rows="[
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%',
},
]"
:columns="columnPrices"
row-key="id"
selection="single"
:pagination="{ rowsPerPage: 0 }"
class="full-width q-mt-md"
:no-data-label="t('globals.noResults')"
v-model:selected="proposalSelected"
:dense="$q.screen.lt.md"
flat
:grid="$q.screen.lt.md"
auto-load
:rows-per-page-options="[0]"
hide-pagination
>
<template #top-row="{ cols }">
<QTr>
<QTd />
<QTd <QTd
v-for="(col, index) in cols" class="col"
:key="index" align="center"
style="max-width: 100px" :class="[conditionalValuePrice(value)]"
> >
<component <QTooltip>
:is="col.columnFilter.component" {{ row.price2 }}/{{ currentTicket.price }}
v-if="col.columnFilter" </QTooltip>
v-model="col.columnFilter.filterValue" {{ value }}
v-bind="col.columnFilter.attrs"
v-on="col.columnFilter.event(col)"
dense
/>
</QTd>
</QTr>
</template>
<template #body-cell-longName="{ row, value }">
<QTd align="right" class="text-primary">
<QBtn flat color="blue" dense>{{ value }}</QBtn>
<ItemDescriptorProxy :id="row.id" />
</QTd>
</template>
<template #body-cell-status="{ value }">
<QTd class="col" align="center">
<div
:style="{ 'background-color': value }"
style="height: 10px"
></div>
</QTd> </QTd>
</template> </template>
</QTable> </QTable>
</template> </template>
</VnPaginate> </VnPaginate>
</VnRow> </div>
</QCardSection> </QCardSection>
<QCardActions align="right"> <QCardActions align="right">
<QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup /> <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
@ -350,9 +308,13 @@ async function confirm() {
.not-match { .not-match {
color: inherit; color: inherit;
} }
.calendars-header {
height: 45px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: $primary;
font-weight: bold;
font-size: 16px;
}
</style> </style>
<i18n>
es:
xx: xx
</i18n>

2
src/pages/Item/locale/es.yml
View File

@ -89,7 +89,7 @@ itemType:
category: Reino category: Reino
temperature: Temperatura temperature: Temperatura
proposal: proposal:
title: Items de sustitución title: Items de sustitución para el ticket {ticketFk}:{saleFk}
itemFk: Item itemFk: Item
longName: Nombre longName: Nombre
subName: Productor subName: Productor

25
src/pages/Ticket/Negative/TicketLackDetail.vue
View File

@ -343,18 +343,6 @@ const split = async () => {
> >
</Teleport> </Teleport>
<Teleport to="#st-data" v-if="stateStore?.isSubToolbarShown()"> <Teleport to="#st-data" v-if="stateStore?.isSubToolbarShown()">
<QImg
:src="`/api/Images/catalog/50x50/${item.itemFk}/download?access_token=${token}`"
spinner-color="primary"
:ratio="1"
height="50px"
width="50px"
class="image remove-bg"
:alt="'asdads'"
/>
<span class="text-h6">{{ item.longName }}</span>
<span>{{ item }}</span>
<QSpace /> <QSpace />
<QBtnGroup push style="column-gap: 1px"> <QBtnGroup push style="column-gap: 1px">
<QBtn <QBtn
@ -416,6 +404,18 @@ const split = async () => {
> >
<!-- :rows="rows" --> <!-- :rows="rows" -->
<template #body="{ rows }"> <template #body="{ rows }">
<QImg
:src="`/api/Images/catalog/50x50/${item.itemFk}/download?access_token=${token}`"
spinner-color="primary"
:ratio="1"
height="50px"
width="50px"
class="image remove-bg"
:alt="'asdads'"
/>
<span class="text-h6">{{ item.longName }}</span>
<QTable <QTable
ref="tableRef" ref="tableRef"
:columns="columns" :columns="columns"
@ -533,5 +533,6 @@ const split = async () => {
@hide="onDialogHide" @hide="onDialogHide"
v-model="showProposalDialog" v-model="showProposalDialog"
:item="item" :item="item"
:tickets="selectedRows"
></ItemProposal> ></ItemProposal>
</template> </template>