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

feat: itemProposal and LackDetail

This commit is contained in:
Javier Segarra 2024-06-17 12:19:57 +02:00
parent 7b047e1637
commit 6ef53e790a
6 changed files with 271 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/ui/VnLv.vue
View File

@ -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>

1
src/i18n/locale/es.yml
View File

@ -29,6 +29,7 @@ globals:
saveAndContinue: Guardar y continuar
remove: Eliminar
reset: Restaurar
refresh: Actualizar
close: Cerrar
cancel: Cancelar
clone: Clonar

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

@ -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

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

@ -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

113
src/pages/Ticket/Card/TicketSplit.vue Normal file
View File

@ -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>

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

@ -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"
>