138 lines
3.5 KiB
Vue
138 lines
3.5 KiB
Vue
<script setup>
|
|
import axios from 'axios';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { computed, ref } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { toCurrency } from 'src/filters';
|
|
|
|
const $props = defineProps({
|
|
newPrice: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
sale: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
componentId: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['save', 'cancel', 'update:componentId']);
|
|
|
|
const route = useRoute();
|
|
const mana = ref(null);
|
|
const usesMana = ref([]);
|
|
|
|
const { t } = useI18n();
|
|
const QPopupProxyRef = ref(null);
|
|
|
|
const componentId = computed({
|
|
get: () => $props.componentId,
|
|
set: (val) => emit('update:componentId', val),
|
|
});
|
|
|
|
const save = (sale = $props.sale) => {
|
|
emit('save', sale);
|
|
QPopupProxyRef.value.hide();
|
|
};
|
|
|
|
const cancel = () => {
|
|
emit('cancel');
|
|
QPopupProxyRef.value.hide();
|
|
};
|
|
|
|
const getMana = async () => {
|
|
const { data } = await axios.get(`Tickets/${route.params.id}/getDepartmentMana`);
|
|
mana.value = data;
|
|
await getUsesMana();
|
|
};
|
|
|
|
const getUsesMana = async () => {
|
|
const { data } = await axios.get('Sales/getComponents');
|
|
usesMana.value = data;
|
|
};
|
|
|
|
const hasMana = computed(() => typeof mana.value === 'number');
|
|
|
|
defineExpose({ save });
|
|
</script>
|
|
|
|
<template>
|
|
<QPopupProxy
|
|
ref="QPopupProxyRef"
|
|
@before-show="getMana"
|
|
data-cy="ticketEditManaProxy"
|
|
>
|
|
<div class="container">
|
|
<div class="header">Mana: {{ toCurrency(mana) }}</div>
|
|
|
|
<QSpinner v-if="!usesMana.length" color="primary" />
|
|
|
|
<div class="q-pa-md" v-else>
|
|
<slot :popup="QPopupProxyRef" />
|
|
|
|
<div v-if="usesMana.length" class="column q-gutter-y-sm q-mt-sm">
|
|
<QRadio
|
|
v-for="(item, index) in usesMana"
|
|
:key="index"
|
|
v-model="componentId"
|
|
:val="item.id"
|
|
:label="item.name"
|
|
dense
|
|
:dark="true"
|
|
class="q-mb-sm"
|
|
:data-cy="`componentOption-${item.id}`"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="newPrice" class="column items-center q-mt-lg">
|
|
<span class="text-primary">{{ t('New price') }}</span>
|
|
<span class="text-subtitle1">{{ toCurrency(newPrice) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<QBtn
|
|
color="primary"
|
|
class="no-border-radius"
|
|
style="width: 50%"
|
|
@click="cancel()"
|
|
>
|
|
{{ t('globals.cancel') }}
|
|
</QBtn>
|
|
<QBtn
|
|
color="primary"
|
|
class="no-border-radius"
|
|
style="width: 50%"
|
|
@click="save()"
|
|
data-cy="saveManaBtn"
|
|
>
|
|
{{ 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>
|