feat: itemProposal and LackDetail
This commit is contained in:
parent
7b047e1637
commit
6ef53e790a
|
|
@ -72,4 +72,15 @@ function copyValueText() {
|
|||
.info {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
& > .q-btn .value {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ globals:
|
|||
saveAndContinue: Guardar y continuar
|
||||
remove: Eliminar
|
||||
reset: Restaurar
|
||||
refresh: Actualizar
|
||||
close: Cerrar
|
||||
cancel: Cancelar
|
||||
clone: Clonar
|
||||
|
|
|
|||
|
|
@ -5,15 +5,19 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
|
|||
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
||||
import FetchedTags from 'components/ui/FetchedTags.vue';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
const MATCH_VALUES = [5, 6, 7, 8];
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
|
||||
const primaryColor = 'red';
|
||||
const colorSpacer = '#ecf0f1';
|
||||
const gradientStyle = computed(() => {
|
||||
return `linear-gradient(to right, ${primaryColor} ${compatibility.value}, ${colorSpacer} 10%)`;
|
||||
});
|
||||
const compatibilityItem = (value) => `${100 * (value / MATCH_VALUES.length)}%`;
|
||||
const gradientStyle = (value) =>
|
||||
`linear-gradient(to right, ${primaryColor} ${compatibilityItem(
|
||||
value
|
||||
)}, ${colorSpacer} 10%)`;
|
||||
|
||||
const $props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
|
|
@ -29,26 +33,24 @@ const $props = defineProps({
|
|||
const proposalSelected = ref([]);
|
||||
const quantity = ref(-1);
|
||||
const token = session.getTokenMultimedia();
|
||||
const index = ref(0);
|
||||
const currentTicket = computed(() => $props.tickets[index.value]);
|
||||
// const index = ref(0);
|
||||
// const currentTicket = computed(() => $props.tickets[index.value]);
|
||||
const showProposalDialog = ref(false);
|
||||
const defaultColumnAttrs = {
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
};
|
||||
const compatibility = ref(null);
|
||||
// const compatibility = ref(null);
|
||||
// const compatibility = computed(() => `linear-gradient(to right,red 10%, white 10%);`);
|
||||
const statusConditionalValue = (row) => {
|
||||
const values = [5, 6, 7, 8];
|
||||
const total = values.reduce((acc, i) => acc + row[`match${i}`], 0);
|
||||
const STATUS_VALUES = { 1: 'white', 2: '$secondary', 3: 'positive', 4: 'warning' };
|
||||
const status = STATUS_VALUES[total];
|
||||
compatibility.value = `${100 * (total / values.length)}%`;
|
||||
return { status, total, compatibility };
|
||||
const total = MATCH_VALUES.reduce((acc, i) => acc + row[`match${i}`], 0);
|
||||
// const STATUS_VALUES = { 1: 'white', 2: '$secondary', 3: 'positive', 4: 'warning' };
|
||||
// const status = STATUS_VALUES[total];
|
||||
// const compatibility = `${100 * (total / values.length)}%`;
|
||||
return total;
|
||||
};
|
||||
// const conditionalValue = (tag) => (tag === 1 ? 'match' : 'not-match');
|
||||
const conditionalValuePrice = (price) =>
|
||||
price > currentTicket.value.price * 1.3 ? 'match' : 'not-match';
|
||||
const conditionalValuePrice = (price) => (price > 1.3 ? 'match' : 'not-match');
|
||||
// const changeTicket = (type, _index = 0) => {
|
||||
// const value = type ? 1 : -1;
|
||||
// const nextIndex = index.value + value + _index;
|
||||
|
|
@ -75,6 +77,7 @@ const columns = computed(() => [
|
|||
label: t('Compatibildiad'),
|
||||
name: 'status',
|
||||
field: statusConditionalValue,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
...defaultColumnAttrs,
|
||||
|
|
@ -84,7 +87,7 @@ const columns = computed(() => [
|
|||
},
|
||||
|
||||
{
|
||||
align: 'center',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
label: t('proposal.longName'),
|
||||
name: 'longName',
|
||||
|
|
@ -124,11 +127,11 @@ const columns = computed(() => [
|
|||
field: 'value8',
|
||||
classes: ({ match8 }) => conditionalValue(match8),
|
||||
},*/
|
||||
{
|
||||
...defaultColumnAttrs,
|
||||
label: t('proposal.tags'),
|
||||
name: 'tags',
|
||||
},
|
||||
// {
|
||||
// ...defaultColumnAttrs,
|
||||
// label: t('proposal.tags'),
|
||||
// name: 'tags',
|
||||
// },
|
||||
|
||||
{
|
||||
...defaultColumnAttrs,
|
||||
|
|
@ -171,32 +174,38 @@ async function confirm() {
|
|||
<QDialog ref="dialogRef" @hide="onDialogHide" v-model="showProposalDialog" full-width>
|
||||
<QCard class="q-pa-lg">
|
||||
<QCardSection class="row items-center q-pb-none">
|
||||
<QImg
|
||||
:src="`/api/Images/catalog/50x50/${item.id}/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 class="text"
|
||||
><sub>{{ item.longName }}</sub></span
|
||||
>
|
||||
<VnLv class="image">
|
||||
<template #label>
|
||||
<QImg
|
||||
:src="`/api/Images/catalog/50x50/${item.id}/download?access_token=${token}`"
|
||||
spinner-color="primary"
|
||||
:ratio="1"
|
||||
height="50px"
|
||||
width="50px"
|
||||
class="image remove-bg"
|
||||
:alt="'asdads'"
|
||||
/>
|
||||
</template>
|
||||
<template #value>
|
||||
<QBtn flat class="link text-blue">
|
||||
{{ item.longName }}
|
||||
<ItemDescriptorProxy :id="item.id" />
|
||||
</QBtn>
|
||||
<FetchedTags class="q-ml-md" :item="item" :max-length="5" />
|
||||
</template>
|
||||
</VnLv>
|
||||
<QSpace />
|
||||
<QBtn icon="close" flat round dense v-close-popup />
|
||||
</QCardSection>
|
||||
<QCardSection class="row items-center justify-center column items-stretch">
|
||||
<span class="text-h6 text-grey">
|
||||
<!-- {{ currentTicket }} -->
|
||||
{{
|
||||
<!-- {{
|
||||
t('proposal.title', {
|
||||
ticketFk: currentTicket.ticketFk,
|
||||
saleFk: currentTicket.saleFk,
|
||||
})
|
||||
}}
|
||||
}} -->
|
||||
</span>
|
||||
</QCardSection>
|
||||
<QCardSection class="row items-center justify-center column items-stretch">
|
||||
|
|
@ -251,7 +260,7 @@ async function confirm() {
|
|||
</QTr> -->
|
||||
</template>
|
||||
<template #body-cell-longName="{ row, value }">
|
||||
<QTd align="right" class="text-primary">
|
||||
<QTd align="left" class="text-primary">
|
||||
<QTooltip>
|
||||
{{ row.id }}
|
||||
</QTooltip>
|
||||
|
|
@ -262,30 +271,28 @@ async function confirm() {
|
|||
height="50px"
|
||||
width="50px"
|
||||
class="image remove-bg"
|
||||
:alt="'asdads'"
|
||||
/>
|
||||
:alt="'asdads'" />
|
||||
<QBtn flat color="blue" dense>{{ value }}</QBtn>
|
||||
|
||||
<ItemDescriptorProxy :id="row.id" />
|
||||
</QTd>
|
||||
<FetchedTags :item="row" :max-length="5"
|
||||
/></QTd>
|
||||
</template>
|
||||
<template #body-cell-status="{ value }">
|
||||
<QTd class="col" align="center">
|
||||
<div
|
||||
:style="{ background: gradientStyle }"
|
||||
:style="{ background: gradientStyle(value) }"
|
||||
class="compatibility"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ value }}
|
||||
{{ compatibilityItem(value) }}
|
||||
</QTooltip>
|
||||
</div>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-tags="{ row }">
|
||||
<QTd class="col" align="center"
|
||||
><FetchedTags :item="row" :max-length="5"
|
||||
/></QTd>
|
||||
</template>
|
||||
<!-- <template #body-cell-tags="{ row }">
|
||||
<QTd class="col" align="center"> </QTd>
|
||||
</template> -->
|
||||
|
||||
<template #body-cell-price2="{ row, value }">
|
||||
<QTd
|
||||
|
|
|
|||
|
|
@ -88,6 +88,7 @@ itemType:
|
|||
worker: Trabajador
|
||||
category: Reino
|
||||
temperature: Temperatura
|
||||
itemProposal: Artículos similares
|
||||
proposal:
|
||||
title: Items de sustitución para los tickets seleccionados
|
||||
itemFk: Item
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
<script setup>
|
||||
import { ref, toRefs } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
import useNotify from 'src/composables/useNotify';
|
||||
import { useValidator } from 'src/composables/useValidator';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnSelect from 'components/common/VnSelect.vue';
|
||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import { watch } from 'vue';
|
||||
import { onMounted } from 'vue';
|
||||
const { t } = useI18n();
|
||||
const columns = [
|
||||
{
|
||||
name: 'name',
|
||||
required: true,
|
||||
label: 'Dessert (100g serving)',
|
||||
align: 'left',
|
||||
field: (row) => row.name,
|
||||
format: (val) => `${val}`,
|
||||
sortable: true,
|
||||
},
|
||||
];
|
||||
|
||||
const rows = [
|
||||
{
|
||||
name: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6.0,
|
||||
carbs: 24,
|
||||
protein: 4.0,
|
||||
sodium: 87,
|
||||
calcium: '14%',
|
||||
iron: '1%',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QBtn color="primary" icon="show_chart">
|
||||
<QPopupProxy ref="popupProxyRef" style="max-width: none">
|
||||
<QCard class="column q-pa-md">
|
||||
<span class="text-body1 q-mb-sm">{{ t('Campaign consumption') }}</span>
|
||||
<VnRow class="q-gutter-md q-mb-md" style="min-width: 70vw">
|
||||
<QCard class="column q-pa-md vn-one">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<span class="text-body1 q-mb-sm"
|
||||
>Lineas a transferir</span
|
||||
></VnRow
|
||||
>
|
||||
<QTable
|
||||
flat
|
||||
bordered
|
||||
title="Treats"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="name"
|
||||
/>
|
||||
</QCard>
|
||||
<QCard class="column q-pa-md vn-one">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<span class="text-body1 q-mb-sm"
|
||||
>Ticket destinatario</span
|
||||
></VnRow
|
||||
>
|
||||
<QTable
|
||||
flat
|
||||
bordered
|
||||
title="Treats"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="name"
|
||||
/>
|
||||
</QCard>
|
||||
</VnRow>
|
||||
<!-- <div class="q-mt-lg row justify-end">
|
||||
<QBtn
|
||||
:label="t('globals.cancel')"
|
||||
color="primary"
|
||||
flat
|
||||
class="q-mr-md"
|
||||
v-close-popup
|
||||
/>
|
||||
<QBtn
|
||||
:label="t('globals.save')"
|
||||
type="submit"
|
||||
color="primary"
|
||||
@click="onSubmit()"
|
||||
/>
|
||||
</div> -->
|
||||
</QCard>
|
||||
</QPopupProxy>
|
||||
<QTooltip>{{ t('Campaign consumption') }}</QTooltip>
|
||||
</QBtn>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
params:
|
||||
valentinesDay: Valentine's Day
|
||||
mothersDay: Mother's Day
|
||||
allSaints: All Saints' Day
|
||||
es:
|
||||
params:
|
||||
valentinesDay: Día de San Valentín
|
||||
mothersDay: Día de la Madre
|
||||
allSaints: Día de Todos los Santos
|
||||
Campaign consumption: Consumo campaña
|
||||
Campaign: Campaña
|
||||
From: Desde
|
||||
To: Hasta
|
||||
</i18n>
|
||||
|
|
@ -8,7 +8,10 @@ import ChangeQuantityDialog from 'pages/Ticket/Negative/components/ChangeQuantit
|
|||
import ChangeStateDialog from 'pages/Ticket/Negative/components/ChangeStateDialog.vue';
|
||||
import ItemProposal from 'pages/Item/components/ItemProposal.vue';
|
||||
import { useVnConfirm } from 'composables/useVnConfirm';
|
||||
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import FetchedTags from 'components/ui/FetchedTags.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import TickerSplit from '../Card/TicketSplit.vue';
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import VnSelect from 'components/common/VnSelect.vue';
|
||||
|
|
@ -20,7 +23,6 @@ import { useStateStore } from 'stores/useStateStore';
|
|||
import { useDialogPluginComponent } from 'quasar';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import ZoneDescriptorProxy from 'pages/Zone/Card/ZoneDescriptorProxy.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
onMounted(() => {
|
||||
stateStore.rightDrawer = false;
|
||||
nextTick(() => {
|
||||
|
|
@ -353,74 +355,71 @@ const split = async () => {
|
|||
</QBtn></QBtnGroup
|
||||
>
|
||||
</Teleport> -->
|
||||
<Teleport to="#st-data" v-if="stateStore?.isSubToolbarShown()">
|
||||
<QSpace />
|
||||
<QBtnGroup push style="column-gap: 1px">
|
||||
<QBtn
|
||||
icon="refresh"
|
||||
color="primary"
|
||||
:label="t('negative.buttonsUpdate.state')"
|
||||
:disable="selectedRows.length < 2"
|
||||
@click="showChangeStateDialog = true"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('negative.detail.modal.changeState.title') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
icon="refresh"
|
||||
color="primary"
|
||||
:label="t('negative.buttonsUpdate.quantity')"
|
||||
@click="showChangeQuantityDialog = true"
|
||||
:disable="selectedRows.length < 2"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('negative.detail.modal.changeQuantity.title') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
icon="refresh"
|
||||
color="primary"
|
||||
:label="t('negative.buttonsUpdate.itemProposal')"
|
||||
@click="showChangeQuantityDialog = true"
|
||||
:disable="selectedRows.length < 2"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('negative.itemProposal') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
color="primary"
|
||||
@click="
|
||||
openConfirmationModal(
|
||||
t('negative.detail.modal.split.title'),
|
||||
t('negative.detail.modal.split.subTitle'),
|
||||
split,
|
||||
() => (showSplitDialog = true)
|
||||
)
|
||||
"
|
||||
:disable="selectedRows.length < 1"
|
||||
icon="call_split"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('globals.split') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
icon="vn:item"
|
||||
color="primary"
|
||||
:disable="selectedRows.length < 1"
|
||||
@click="showProposalDialog = true"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('Item proposal') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</QBtnGroup>
|
||||
<QCheckbox v-model="showFree" :label="t('negative.detail.showFree')" />
|
||||
</Teleport>
|
||||
<VnSubToolbar>
|
||||
<template #st-data>
|
||||
<QBtnGroup push style="column-gap: 1px">
|
||||
<QBtn
|
||||
icon="refresh"
|
||||
color="primary"
|
||||
:label="t('negative.buttonsUpdate.state')"
|
||||
:disable="selectedRows.length < 2"
|
||||
@click="showChangeStateDialog = true"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('negative.detail.modal.changeState.title') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
icon="refresh"
|
||||
color="primary"
|
||||
:label="t('negative.buttonsUpdate.quantity')"
|
||||
@click="showChangeQuantityDialog = true"
|
||||
:disable="selectedRows.length < 2"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('negative.detail.modal.changeQuantity.title') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
icon="refresh"
|
||||
color="primary"
|
||||
:label="t('negative.buttonsUpdate.itemProposal')"
|
||||
@click="showChangeQuantityDialog = true"
|
||||
:disable="selectedRows.length < 2"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('globals.refresh') }}
|
||||
{{ t('negative.buttonsUpdate.itemProposal') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
<TickerSplit></TickerSplit>
|
||||
<QBtn
|
||||
color="primary"
|
||||
@click="
|
||||
openConfirmationModal(
|
||||
t('negative.detail.modal.split.title'),
|
||||
t('negative.detail.modal.split.subTitle'),
|
||||
split,
|
||||
() => (showSplitDialog = true)
|
||||
)
|
||||
"
|
||||
:disable="selectedRows.length < 1"
|
||||
icon="call_split"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('globals.split') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn icon="vn:item" color="primary" @click="showProposalDialog = true">
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('itemProposal') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</QBtnGroup>
|
||||
<QCheckbox v-model="showFree" :label="t('negative.detail.showFree')" />
|
||||
</template>
|
||||
</VnSubToolbar>
|
||||
<QPage>
|
||||
<VnSubToolbar />
|
||||
<div class="full-width q-pa-md">
|
||||
<VnPaginate
|
||||
:data-key="URL_KEY"
|
||||
|
|
@ -431,8 +430,10 @@ const split = async () => {
|
|||
>
|
||||
<!-- :rows="rows" -->
|
||||
<template #body="{ rows }">
|
||||
<!-- <VnRow style="align-items: center">
|
||||
<div>
|
||||
{{ item }}
|
||||
|
||||
<VnLv class="image">
|
||||
<template #label>
|
||||
<QImg
|
||||
:src="`/api/Images/catalog/50x50/${entityId}/download?access_token=${token}`"
|
||||
spinner-color="primary"
|
||||
|
|
@ -442,8 +443,22 @@ const split = async () => {
|
|||
class="image remove-bg"
|
||||
:alt="'asdads'"
|
||||
/>
|
||||
|
||||
<span class="text-h6">{{ item.longName }}</span>
|
||||
</template>
|
||||
<template #value>
|
||||
<QBtn flat class="link text-blue">
|
||||
{{ item.longName }}
|
||||
<ItemDescriptorProxy :id="entityId" />
|
||||
</QBtn>
|
||||
<FetchedTags class="q-ml-md" :item="item" :max-length="5" />
|
||||
</template>
|
||||
</VnLv>
|
||||
<!-- <ItemDescriptorProxy :id="entityId" />
|
||||
<span class="text-h6">{{ item.longName }}</span>
|
||||
<span class="text-h6"
|
||||
><sub>{{ item.longName }}</sub></span
|
||||
> -->
|
||||
<!-- <VnRow style="align-items: center">
|
||||
<div>
|
||||
</div>
|
||||
<QIcon name="arrow_right" size="lg" />
|
||||
<VnSelectDialog action-icon="call_split"></VnSelectDialog
|
||||
|
|
@ -552,13 +567,13 @@ const split = async () => {
|
|||
></QPage>
|
||||
<ChangeStateDialog
|
||||
ref="changeStateDialogRef"
|
||||
@hide="onDetailDialogHide"
|
||||
@hide="onDialogHide"
|
||||
v-model="showChangeStateDialog"
|
||||
:selected-rows="selectedRows"
|
||||
></ChangeStateDialog>
|
||||
<ChangeQuantityDialog
|
||||
ref="changeQuantityDialogRef"
|
||||
@hide="onDetailDialogHide"
|
||||
@hide="onDialogHide"
|
||||
v-model="showChangeQuantityDialog"
|
||||
:selected-rows="selectedRows"
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in New Issue