salix-front/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue

146 lines
4.4 KiB
Vue

<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import TicketBasicData from './TicketBasicData.vue';
import TicketBasicDataForm from './TicketBasicDataForm.vue';
import { useVnConfirm } from 'composables/useVnConfirm';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
import { useArrayData } from 'src/composables/useArrayData';
const { notify } = useNotify();
const router = useRouter();
const { t } = useI18n();
const stepperRef = ref(null);
const { openConfirmationModal } = useVnConfirm();
const step = ref(1);
const haveNegatives = ref(true);
const ticket = computed(() => useArrayData('Ticket').store?.data);
const isFormInvalid = () => {
return (
!ticket.value.clientFk ||
!ticket.value.addressFk ||
!ticket.value.agencyModeFk ||
!ticket.value.companyFk ||
!ticket.value.shipped ||
!ticket.value.landed ||
!ticket.value.zoneFk
);
};
const getPriceDifference = async () => {
const params = {
landed: ticket.value.landed,
addressId: ticket.value.addressFk,
agencyModeId: ticket.value.agencyModeFk,
zoneId: ticket.value.zoneFk,
warehouseId: ticket.value.warehouseFk,
shipped: ticket.value.shipped,
};
const { data } = await axios.post(
`tickets/${ticket.value.id}/priceDifference`,
params
);
ticket.value.sale = data;
};
const submit = async () => {
if (!ticket.value.option) return notify(t('basicData.chooseAnOption'), 'negative');
const params = {
clientFk: ticket.value.clientFk,
nickname: ticket.value.nickname,
agencyModeFk: ticket.value.agencyModeFk,
addressFk: ticket.value.addressFk,
zoneFk: ticket.value.zoneFk,
warehouseFk: ticket.value.warehouseFk,
companyFk: ticket.value.companyFk,
shipped: ticket.value.shipped,
landed: ticket.value.landed,
isDeleted: ticket.value.isDeleted,
option: ticket.value.option,
isWithoutNegatives: ticket.value.withoutNegatives,
withWarningAccept: ticket.value.withWarningAccept,
keepPrice: false,
};
const { data } = await axios.post(
`tickets/${ticket.value.id}/componentUpdate`,
params
);
if (!data) return;
const ticketToMove = data.id;
notify(t('basicData.unroutedTicket'), 'positive');
router.push({ name: 'TicketSummary', params: { id: ticketToMove } });
};
const submitWithNegatives = async () => {
ticket.value.withWarningAccept = true;
submit();
};
const onNextStep = async () => {
if (step.value === 1) {
if (isFormInvalid())
return notify(t('basicData.someFieldsAreInvalid'), 'negative');
await getPriceDifference();
stepperRef.value.next();
} else if (step.value === 2) {
if (haveNegatives.value && !ticket.value.withoutNegatives)
openConfirmationModal(
t('basicData.negativesConfirmTitle'),
t('basicData.negativesConfirmMessage'),
submitWithNegatives
);
else submit();
}
};
</script>
<template>
<QStepper
v-if="ticket"
v-model="step"
ref="stepperRef"
color="primary"
animated
keep-alive
style="margin: auto"
:style="{
'max-width': step > 1 ? 'none' : '800px',
}"
>
<QStep :name="1" :title="t('globals.pageTitles.basicData')" :done="step > 1">
<TicketBasicDataForm v-model="ticket" />
</QStep>
<QStep :name="2" :title="t('basicData.priceDifference')">
<TicketBasicData v-model="ticket" v-model:have-negatives="haveNegatives" />
</QStep>
<template #navigation>
<QStepperNavigation class="flex justify-between">
<QBtn
flat
color="primary"
@click="stepperRef.previous()"
:label="t('basicData.back')"
class="q-ml-sm"
:class="{ invisible: step === 1 }"
/>
<QBtn
@click="onNextStep()"
color="primary"
:label="step === 2 ? t('basicData.finalize') : t('basicData.next')"
/>
</QStepperNavigation>
</template>
</QStepper>
</template>