60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="row justify-around q-pa-sm">
|
||
|
|
<q-input
|
||
|
|
v-model.number="newPrice.price"
|
||
|
|
dense
|
||
|
|
filled
|
||
|
|
class="q-px-sm"
|
||
|
|
type="number"
|
||
|
|
label="Preis"
|
||
|
|
suffix="€"
|
||
|
|
min="0"
|
||
|
|
step="0.1"
|
||
|
|
/>
|
||
|
|
<q-input
|
||
|
|
v-model="newPrice.description"
|
||
|
|
dense
|
||
|
|
filled
|
||
|
|
class="q-px-sm"
|
||
|
|
label="Beschreibung"
|
||
|
|
clearable
|
||
|
|
/>
|
||
|
|
<q-toggle v-model="newPrice.public" dense class="q-px-sm" label="Öffentlich" />
|
||
|
|
</div>
|
||
|
|
<div class="row justify-between q-pa-sm">
|
||
|
|
<q-btn v-close-popup label="Abbrechen" @click="cancelAddPrice" />
|
||
|
|
<q-btn v-close-popup label="Speichern" color="primary" @click="addPrice(row)" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, ref } from 'vue';
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'NewPrice',
|
||
|
|
emits: {
|
||
|
|
save: (val: FG.DrinkPrice) => val,
|
||
|
|
},
|
||
|
|
setup(_, { emit }) {
|
||
|
|
const emptyPrice: FG.DrinkPrice = {
|
||
|
|
id: -1,
|
||
|
|
price: 0,
|
||
|
|
description: '',
|
||
|
|
public: true,
|
||
|
|
};
|
||
|
|
const newPrice = ref(emptyPrice);
|
||
|
|
function addPrice() {
|
||
|
|
emit('save', newPrice.value);
|
||
|
|
cancelAddPrice();
|
||
|
|
}
|
||
|
|
function cancelAddPrice() {
|
||
|
|
setTimeout(() => {
|
||
|
|
newPrice.value = emptyPrice;
|
||
|
|
}, 200);
|
||
|
|
}
|
||
|
|
return { newPrice, addPrice, cancelAddPrice };
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|