95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<q-btn
|
||
|
|
v-if="cost_price_pro_volume"
|
||
|
|
color="positive"
|
||
|
|
icon-right="add"
|
||
|
|
label="Abgabe hinzufügen"
|
||
|
|
size="xs"
|
||
|
|
>
|
||
|
|
<q-menu anchor="center middle" self="center middle">
|
||
|
|
<div class="row justify-around q-pa-sm">
|
||
|
|
<q-input
|
||
|
|
v-model.number="newVolume.volume"
|
||
|
|
filled
|
||
|
|
dense
|
||
|
|
label="Liter"
|
||
|
|
type="number"
|
||
|
|
min='0'
|
||
|
|
step='0.01'
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="row justify-between q-pa-sm">
|
||
|
|
<q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
|
||
|
|
<q-btn
|
||
|
|
v-close-popup
|
||
|
|
label="Speichern"
|
||
|
|
color="primary"
|
||
|
|
@click="addVolume(rows)"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</q-menu>
|
||
|
|
</q-btn>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang='ts'>
|
||
|
|
import { DrinkPriceVolume } from '../../../store';
|
||
|
|
import { ref } from 'vue';
|
||
|
|
import {CompositionAPIEmit} from 'vue-typed-emit';
|
||
|
|
import {SetupContext} from 'vue';
|
||
|
|
|
||
|
|
interface Events {
|
||
|
|
addVolume: DrinkPriceVolume
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
|
||
|
|
emit: CompositionAPIEmit<Events>
|
||
|
|
}
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'NewVolume',
|
||
|
|
props: {
|
||
|
|
cost_price_pro_volume: {
|
||
|
|
type: undefined,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emits: ["addVolume"],
|
||
|
|
setup(_: any, {emit}: ExtendedSetupContext) {
|
||
|
|
const emptyVolume: DrinkPriceVolume = {
|
||
|
|
id: -1,
|
||
|
|
_volume: 0,
|
||
|
|
volume: null,
|
||
|
|
min_prices: [
|
||
|
|
{ percentage: 100, price: null },
|
||
|
|
{ percentage: 250, price: null },
|
||
|
|
{ percentage: 300, price: null },
|
||
|
|
],
|
||
|
|
prices: [],
|
||
|
|
ingredients: [],
|
||
|
|
};
|
||
|
|
const newVolume = ref<DrinkPriceVolume>(emptyVolume);
|
||
|
|
|
||
|
|
function cancelAddVolume() {
|
||
|
|
setTimeout(() => {
|
||
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||
|
|
// @ts-ignore
|
||
|
|
newVolume.value = emptyVolume;
|
||
|
|
}, 200);
|
||
|
|
}
|
||
|
|
function addVolume() {
|
||
|
|
emit("addVolume", <DrinkPriceVolume>newVolume.value)
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
addVolume,
|
||
|
|
cancelAddVolume,
|
||
|
|
newVolume,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|