[pricelist] add Cocktailbuilder

This commit is contained in:
Tim Gröger 2021-03-28 19:53:04 +02:00
parent 8eecb70df0
commit 24aec1a98c
7 changed files with 156 additions and 15 deletions

View File

@ -82,6 +82,8 @@
:ingredients="props.row.ingredients" :ingredients="props.row.ingredients"
:volume="props.row" :volume="props.row"
@updateDrink="updateDrink" @updateDrink="updateDrink"
@addIngredient="addIngredient"
@deleteIngredient="deleteIngredient"
/> />
</q-td> </q-td>
</q-tr> </q-tr>
@ -185,7 +187,15 @@ export default defineComponent({
}, },
]; ];
return { addVolume, updateDrink, deleteVolume, column_prices }; function addIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
volume.ingredients.push(ingredient);
updateDrink();
}
function deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
store.deleteIngredient(ingredient, volume);
}
return { addVolume, updateDrink, deleteVolume, column_prices, addIngredient, deleteIngredient };
}, },
}); });
</script> </script>

View File

@ -162,20 +162,22 @@ export default defineComponent({
required: true, required: true,
}, },
}, },
emits: { updateDrink: () => true }, emits: {
updateDrink: () => true,
addIngredient: (val: FG.Ingredient, volume: DrinkPriceVolume) =>
(val.drink_ingredient || val.extra_ingredient) && volume,
deleteIngredient: (ingredient: FG.Ingredient, volume: DrinkPriceVolume) =>
(ingredient.drink_ingredient || ingredient.extra_ingredient) && volume,
},
setup(_, { emit }) { setup(_, { emit }) {
const store = usePricelistStore(); const store = usePricelistStore();
/*const emptyIngredient: FG.Ingredient = {
id: -1,
drink_ingredient: undefined,
extra_ingredient: undefined,
};*/
const newIngredient = ref<FG.Drink | FG.ExtraIngredient>(); const newIngredient = ref<FG.Drink | FG.ExtraIngredient>();
const newIngredientVolume = ref<number>(0); const newIngredientVolume = ref<number>(0);
function addIngredient(volume: DrinkPriceVolume) { function addIngredient(volume: DrinkPriceVolume) {
let _ingredient: FG.Ingredient;
if ((<FG.Drink>newIngredient.value)?.volume && newIngredient.value) { if ((<FG.Drink>newIngredient.value)?.volume && newIngredient.value) {
volume.ingredients.push({ _ingredient = {
id: -1, id: -1,
drink_ingredient: { drink_ingredient: {
id: -1, id: -1,
@ -183,15 +185,15 @@ export default defineComponent({
volume: newIngredientVolume.value, volume: newIngredientVolume.value,
}, },
extra_ingredient: undefined, extra_ingredient: undefined,
}); };
} else if (newIngredient.value) { } else {
volume.ingredients.push({ _ingredient = {
id: -1, id: -1,
drink_ingredient: undefined, drink_ingredient: undefined,
extra_ingredient: <FG.ExtraIngredient>newIngredient.value, extra_ingredient: <FG.ExtraIngredient>newIngredient.value,
}); };
} }
updateDrink(); emit('addIngredient', _ingredient, volume);
cancelAddIngredient(); cancelAddIngredient();
} }
function updateDrink() { function updateDrink() {
@ -204,7 +206,7 @@ export default defineComponent({
}, 200); }, 200);
} }
function deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) { function deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
store.deleteIngredient(ingredient, volume); emit('deleteIngredient', ingredient, volume);
} }
const drinks = computed(() => const drinks = computed(() =>
store.drinks.filter((drink) => { store.drinks.filter((drink) => {

View File

@ -99,7 +99,7 @@ export default defineComponent({
default: false, default: false,
}, },
}, },
setup(props) { setup() {
let user: string | null; let user: string | null;
onBeforeMount(() => { onBeforeMount(() => {
if (user) { if (user) {

View File

@ -0,0 +1,93 @@
<template>
<q-card>
<q-card-section>
<div class="q-table__title">Cocktailbuilder</div>
</q-card-section>
<q-card-section>
<ingredients
class="q-pa-sm"
:volume="volume"
:ingredients="volume.ingredients"
@addIngredient="addIngredient"
@deleteIngredient="deleteIngredient"
/>
</q-card-section>
<q-card-section>
<div class="q-table__title">Du solltest mindest sowiel verlangen oder bezahlen:</div>
<div class="full-width row q-gutter-sm justify-around">
<div v-for="min_price in volume.min_prices" :key="min_price.percentage">
<div>
<q-badge class="text-h6" color="primary"> {{ min_price.percentage }}% </q-badge>
</div>
<div>{{ min_price.price.toFixed(2) }}</div>
</div>
</div>
</q-card-section>
</q-card>
</template>
<script lang="ts">
import { computed, defineComponent, onBeforeMount, ref } from 'vue';
import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
import { DrinkPriceVolume, usePricelistStore } from 'src/plugins/pricelist/store';
export default defineComponent({
name: 'CocktailBuilder',
components: { Ingredients },
setup() {
onBeforeMount(() => {
void store.get_min_prices().finally(() => {
store.min_prices.forEach((min_price) => {
(<DrinkPriceVolume>volume.value).min_prices.push({
percentage: min_price,
price: computed<number>(() => {
let retVal = 0;
let extraIngredientPrice = 0;
volume.value.ingredients.forEach((ingredient) => {
if (ingredient.drink_ingredient) {
const _drink = store.drinks.find(
(a) => a.id === ingredient.drink_ingredient?.drink_ingredient_id
);
retVal +=
ingredient.drink_ingredient.volume *
<number>(<unknown>_drink?.cost_price_pro_volume);
}
if (ingredient.extra_ingredient) {
extraIngredientPrice += ingredient.extra_ingredient.price;
}
});
return (retVal * min_price) / 100 + extraIngredientPrice;
}),
});
});
});
void store.getDrinks();
void store.getDrinkTypes();
void store.getExtraIngredients();
});
const store = usePricelistStore();
const emptyVolume: DrinkPriceVolume = {
id: -1,
_volume: 0,
min_prices: [],
prices: [],
ingredients: [],
};
const volume = ref(emptyVolume);
function addIngredient(ingredient: FG.Ingredient) {
volume.value.ingredients.push(ingredient);
}
function deleteIngredient(ingredient: FG.Ingredient) {
const index = volume.value.ingredients.findIndex((a) => a.id === ingredient.id);
if (index > -1) {
volume.value.ingredients.splice(index, 1);
}
}
return { volume, addIngredient, deleteIngredient };
},
});
</script>
<style scoped></style>

View File

@ -0,0 +1,12 @@
<template>
<h1>Hier kommen Rezepte hin.</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Reciepts',
});
</script>
<style scoped></style>

View File

@ -22,6 +22,28 @@ export const innerRoutes: FG_Plugin.MenuRoute[] = [
component: () => import('../pages/PricelistP.vue'), component: () => import('../pages/PricelistP.vue'),
}, },
}, },
{
title: 'Rezepte',
shortcut: false,
icon: '',
permissions: ['user'],
route: {
path: 'reciepts',
name: 'reciepts',
component: () => import('../pages/Reciepts.vue')
}
},
{
title: 'Cocktailbuilder',
shortcut: false,
icon: 'mdi-glass-cocktail',
permissions: ['user'],
route: {
path: 'cocktail-builder',
name: 'cocktail-builder',
component: () => import('../pages/CocktailBuilder.vue')
}
},
{ {
title: 'Einstellungen', title: 'Einstellungen',
icon: 'mdi-coffee-to-go', icon: 'mdi-coffee-to-go',

View File

@ -322,4 +322,6 @@ export const usePricelistStore = defineStore({
}, },
}); });
export { DrinkPriceVolume, MinPrice, Drink }; export { DrinkPriceVolume, MinPrice, Drink };