salix-front/src/pages/Ticket/Card/TicketEditMana.vue

151 lines
4.1 KiB
Vue

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { toCurrency } from 'src/filters';
import VnInput from 'src/components/common/VnInput.vue';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
const $props = defineProps({
id: {
type: Number,
required: true,
},
type: {
type: String,
default: 'price', // 'discount' or 'price
},
});
const { t } = useI18n();
const { notify } = useNotify();
const edit = ref({});
const usesMana = ref(null);
const inputLabel = computed(() => ($props.type === 'price' ? t('Price') : t('Discount')));
const getUsesMana = async () => {
const { data } = await axios.get('Sales/usesMana');
usesMana.value = data;
};
const getMana = async () => {
const { data } = await axios.get(`Tickets/${$props.id}/getSalesPersonMana`);
edit.value.mana = data;
await getUsesMana();
console.log('edit', edit.value);
// this.$.$applyAsync(() => {
// this.$.editDiscount.relocate();
// this.$.editPricePopover.relocate();
// });
};
const updatePrice = async () => {
try {
const sale = edit.value.sale;
const newPrice = edit.value.price;
if (newPrice != null && newPrice != sale.price) {
await axios.post(`Sales/${sale.id}/updatePrice`, { newPrice });
sale.price = newPrice;
edit.value = null;
notify('globals.dataSaved', 'positive');
// this.$http
// .post(query, { newPrice })
// .then((res) => {
// sale.price = res.data.price;
// this.edit = null;
// this.vnApp.showSuccess(this.$t('Data saved!'));
// })
// .finally(() => this.resetChanges());
}
await getMana();
} catch (err) {
console.error('Error updating price', err);
}
};
const getNewPrice = () => {
if (edit.value.sale) {
const sale = edit.value.sale;
let newDiscount = sale.discount;
let newPrice = edit.value.price || sale.price;
if (edit.value.discount != null) newDiscount = edit.value.discount;
if (edit.value.price != null) newPrice = edit.value.price;
const price = sale.quantity * newPrice;
const discount = (newDiscount * price) / 100;
return price - discount;
}
return 0;
};
onMounted(async () => {
await getMana();
});
</script>
<template>
<QPopupProxy>
<div class="container">
<QSpinner v-if="!edit.mana" color="orange" size="md" />
<div v-else>
<div class="header">Mana: {{ toCurrency(edit.mana) }}</div>
<div class="q-pa-md">
<VnInput
v-model.number="edit.price"
:label="inputLabel"
@change="updatePrice(row)"
/>
<div class="column items-center q-mt-lg">
<span class="text-primary">{{ t('New price') }}</span>
<span class="text-subtitle1">{{
toCurrency(getNewPrice())
}}</span>
</div>
</div>
</div>
<div class="row">
<QBtn color="primary" class="no-border-radius" dense style="width: 50%">
{{ t('globals.cancel') }}
</QBtn>
<QBtn color="primary" class="no-border-radius" dense style="width: 50%">
{{ t('globals.save') }}
</QBtn>
</div>
</div>
</QPopupProxy>
</template>
<style lang="scss" scoped>
.container {
background-color: $dark;
width: 230px;
}
.header {
height: 54px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: $primary;
font-size: 1.2rem;
font-weight: bold;
min-width: 230px;
}
</style>
<i18n>
es:
Price: Precio
Discount: Descuento
New price: Nuevo precio
</i18n>