Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
7
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

[Vue3][pinia] Make pricelist compile with vue3, needs more work!

This commit is contained in:
Ferdinand Thiessen 2021-03-19 16:33:27 +01:00
parent 26148f8827
commit 51fcc6f9be
8 changed files with 148 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

@ -26,6 +26,5 @@
},
"vetur.format.defaultFormatter.ts": "prettier-tslint",
"typescript.format.enable": false,
"prettier.packageManager": "yarn",
"prettier.configPath": "./package.json"
}

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "flaschengeist-frontend",
"version": "0.0.1",
"version": "0.1.0-alpha.1",
"description": "Dynamischen Managementsystem für Studentenclubs",
"productName": "Flaschengeist",
"author": "Tim Gröger <tim@groeger-clan.de>",

63
src/plugins/pricelist/store/altStore.ts → src/plugins/pricelist/altStore.ts
View File

@ -1,7 +1,7 @@
import { reactive, computed, ComputedRef, WritableComputedRef } from '@vue/composition-api';
import { axios } from 'src/boot/axios';
import { reactive, computed, WritableComputedRef } from 'vue';
import { api } from 'src/boot/axios';
import { AxiosResponse } from 'axios';
/*
const state = reactive<{
drinks: Drink[];
tags: FG.Tag[];
@ -121,15 +121,15 @@ class Drink {
this.tags = tags;
this.type = type;
this.volumes = [];
/*volumes.forEach(volume => {
this.volumes.push(new DrinkPriceVolume(volume, this));
});*/
//volumes.forEach(volume => {
// this.volumes.push(new DrinkPriceVolume(volume, this));
//});
}
}
const actions = {
getDrinks() {
axios
api
.get('pricelist/drinks')
.then((response: AxiosResponse<FG.Drink[]>) => {
state.drinks = [];
@ -146,7 +146,7 @@ const actions = {
.catch((err) => console.warn(err));
},
setPrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
axios
api
.post(`pricelist/volumes/${volume.id}/prices`, price)
.then((response: AxiosResponse<FG.DrinkPrice>) => {
volume.prices.push(response.data);
@ -162,7 +162,7 @@ const actions = {
});
},
deletePrice(price: FG.DrinkPrice, volume: FG.DrinkPriceVolume) {
axios
api
.delete(`pricelist/prices/${price.id}`)
.then(() => {
const index = volume.prices.findIndex((a) => a.id == price.id);
@ -173,7 +173,7 @@ const actions = {
.catch((err) => console.warn(err));
},
updatePrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
axios
api
.put(`pricelist/prices/${price.id}`, price)
.then((response: AxiosResponse<FG.DrinkPrice>) => {
const index = volume.prices.findIndex((a) => a.id === price.id);
@ -185,7 +185,7 @@ const actions = {
},
setVolume(volume: DrinkPriceVolume, drink: Drink) {
console.log(volume);
axios
api
.post(`pricelist/drinks/${drink.id}/volumes`, {
...volume,
volume: volume.volume,
@ -196,7 +196,7 @@ const actions = {
.catch((err) => console.warn(err));
},
updateVolume(volume: DrinkPriceVolume, drink: Drink) {
axios
api
.put(`pricelist/volumes/${volume.id}`, {
...volume,
volume: volume.volume?.value,
@ -204,7 +204,7 @@ const actions = {
.catch((err) => console.warn(err));
},
deleteVolume(volume: FG.DrinkPriceVolume, drink: FG.Drink) {
axios
api
.delete(`pricelist/volumes/${volume.id}`)
.then(() => {
const index = drink.volumes.findIndex((a) => a.id === volume.id);
@ -215,7 +215,7 @@ const actions = {
.catch((err) => console.warn(err));
},
getExtraIngredients() {
axios
api
.get('pricelist/ingredients/extraIngredients')
.then((response: AxiosResponse<FG.ExtraIngredient[]>) => {
state.extraIngredients = response.data;
@ -223,7 +223,7 @@ const actions = {
.catch((err) => console.log(err));
},
setIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
axios
api
.post(`pricelist/volumes/${volume.id}/ingredients`, ingredient)
.then((response: AxiosResponse<FG.Ingredient>) => {
volume.ingredients.push(response.data);
@ -231,18 +231,18 @@ const actions = {
.catch((err) => console.warn(err));
},
updateIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
axios
api
.put(`pricelist/ingredients/${ingredient.id}`, ingredient)
.then((response: AxiosResponse<FG.Ingredient>) => {
/*const index = volume.ingredients.findIndex(a => a.id === response.data.id);
if (index > -1) {
volume.ingredients[index] = response.data;
}*/
//const index = volume.ingredients.findIndex(a => a.id === response.data.id);
//if (index > -1) {
// volume.ingredients[index] = response.data;
//}
})
.catch((err) => console.warn(err));
},
deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
axios
api
.delete(`pricelist/ingredients/${ingredient.id}`)
.then(() => {
const index = volume.ingredients.findIndex((a) => a.id === ingredient.id);
@ -253,7 +253,7 @@ const actions = {
.catch((err) => console.warn(err));
},
getDrinkTypes() {
axios
api
.get('pricelist/drink-types')
.then((response: AxiosResponse<FG.DrinkType[]>) => {
state.drinkTypes = response.data;
@ -261,7 +261,7 @@ const actions = {
.catch((err) => console.warn(err));
},
setDrink(drink: FG.Drink) {
axios
api
.post('pricelist/drinks', drink)
.then((response: AxiosResponse<FG.Drink>) => {
state.drinks.push(new Drink(response.data));
@ -273,7 +273,7 @@ const actions = {
.catch((err) => console.warn(err));
},
updateDrink(drink: Drink) {
axios
api
.put(`pricelist/drinks/${drink.id}`, {
...drink,
cost_price_pro_volume: drink.cost_price_pro_volume?.value,
@ -281,7 +281,7 @@ const actions = {
.catch((err) => console.warn(err));
},
deleteDrink(drink: Drink) {
axios
api
.delete(`pricelist/drinks/${drink.id}`)
.then(() => {
const index = state.drinks.findIndex((a) => a.id === drink.id);
@ -292,15 +292,15 @@ const actions = {
.catch((err) => console.warn(err));
},
setExtraIngredient(ingredient: FG.ExtraIngredient) {
axios
.post(`pricelist/ingredients/extraIngredients`, ingredient)
api
.post('pricelist/ingredients/extraIngredients', ingredient)
.then((response: AxiosResponse<FG.ExtraIngredient>) => {
state.extraIngredients.push(response.data);
})
.catch((err) => console.warn(err));
},
updateExtraIngredient(ingredient: FG.ExtraIngredient) {
axios
api
.put(`pricelist/ingredients/extraIngredients/${ingredient.id}`, ingredient)
.then((response: AxiosResponse<FG.ExtraIngredient>) => {
const index = state.extraIngredients.findIndex((a) => a.id === ingredient.id);
@ -313,7 +313,7 @@ const actions = {
.catch((err) => console.warn(err));
},
deleteExtraIngredient(ingredient: FG.ExtraIngredient) {
axios
api
.delete(`pricelist/ingredients/extraIngredients/${ingredient.id}`)
.then(() => {
const index = state.extraIngredients.findIndex((a) => a.id === ingredient.id);
@ -324,7 +324,7 @@ const actions = {
.catch((err) => console.warn(err));
},
getPriceCalcColumn(userid: string) {
axios
api
.get(`pricelist/users/${userid}/pricecalc_columns`)
.then(({ data }: AxiosResponse<Array<string>>) => {
if (data.length > 0) {
@ -334,7 +334,7 @@ const actions = {
.catch((err) => console.log(err));
},
updatePriceCalcColumn(userid: string, data: Array<string>) {
axios
api
.put(`pricelist/users/${userid}/pricecalc_columns`, data)
.then(() => {
state.pricecalc_columns = data;
@ -390,3 +390,4 @@ export default {
actions,
getters,
};
*/

125
src/plugins/pricelist/components/CalculationTable.vue
View File

@ -1,5 +1,6 @@
<template>
<q-table
v-model:pagination="pagination"
title="Kalkulationstabelle"
:columns="columns"
:data="drinks"
@ -7,10 +8,9 @@
:dense="$q.screen.lt.md"
row-key="id"
virtual-scroll
:pagination.sync="pagination"
:rows-per-page-options="[0]"
>
<template v-slot:header="props">
<template #header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -18,7 +18,7 @@
</q-th>
</q-tr>
</template>
<template v-slot:top-right>
<template #top-right>
<div class="row justify-end q-gutter-sm">
<q-btn label="neues Getränk" color="positive" icon-right="add">
<q-menu anchor="center middle" self="center middle">
@ -26,57 +26,57 @@
<div class="q-table__title q-pa-sm">Neues Getränk</div>
<div class="row">
<q-input
v-model="newDrink.name"
class="col-sm-4 col-xs-6 q-pa-sm"
filled
label="Getränkname"
v-model="newDrink.name"
/>
<q-input
v-model="newDrink.article_id"
class="col-sm-4 col-xs-6 q-pa-sm"
filled
label="Artikelnummer"
v-model="newDrink.article_id"
/>
<q-select
v-model="newDrink.type"
class="col-sm-4 col-xs-6 q-pa-sm"
filled
label="Kategorie"
:options="drinkTypes"
option-label="name"
v-model="newDrink.type"
/>
<q-input
v-model.number="newDrink.volume"
class="col-sm-4 col-xs-6 q-pa-sm"
filled
label="Inhalt in L/Gebinde"
type="number"
v-model.number="newDrink.volume"
/>
<q-input
v-model.number="newDrink.package_size"
class="col-sm-4 col-xs-6 q-pa-sm"
filled
label="Gebindegröße"
type="number"
v-model.number="newDrink.package_size"
/>
<q-input
v-model.number="newDrink.cost_price_package_netto"
class="col-sm-4 col-xs-6 q-pa-sm"
filled
label="Preis Netto/Gebinde"
type="number"
v-model.number="newDrink.cost_price_package_netto"
/>
<q-input
v-model="cost_price_pro_volume"
class="col-sm-4 col-xs-6 q-pa-sm"
filled
label="Preis mit 19%/Liter"
v-model="cost_price_pro_volume"
:disable="calc_price_pro_volume"
/>
</div>
<div class="row justify-between">
<q-btn label="Abbrechen" v-close-popup @click="cancelAddDrink" />
<q-btn label="Speichern" v-close-popup color="primary" @click="addDrink" />
<q-btn v-close-popup label="Abbrechen" @click="cancelAddDrink" />
<q-btn v-close-popup label="Speichern" color="primary" @click="addDrink" />
</div>
</div>
</q-menu>
@ -96,17 +96,17 @@
/>
</div>
</template>
<template v-slot:body="drinks_props">
<template #body="drinks_props">
<q-tr :props="drinks_props">
<q-td auto-width>
<q-btn
v-if="drinks_props.row.volumes.length === 0"
size="xs"
color="negative"
round
dense
icon="mdi-delete"
class="q-mx-sm"
v-if="drinks_props.row.volumes.length === 0"
@click="deleteDrink(drinks_props.row)"
/>
</q-td>
@ -279,7 +279,7 @@
row-key="id"
flat
>
<template v-slot:header="props">
<template #header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -288,43 +288,43 @@
</q-tr>
</template>
<template v-slot:body="props">
<template #body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="!drinks_props.row.cost_price_pro_volume.value"
size="sm"
color="accent"
round
dense
@click="props.expand = !props.expand"
:icon="props.expand ? 'mdi-chevron-up' : 'mdi-chevron-down'"
v-if="!drinks_props.row.cost_price_pro_volume.value"
@click="props.expand = !props.expand"
/>
<q-btn
v-if="props.row.ingredients.length === 0 && props.row.prices.length === 0"
size="xs"
color="negative"
round
dense
icon="mdi-delete"
class="q-mx-sm"
v-if="props.row.ingredients.length === 0 && props.row.prices.length === 0"
@click="deleteVolume(props.row, drinks_props.row)"
/>
</q-td>
<q-td key="volume" :props="props">
{{ parseFloat(props.row.volume.value).toFixed(3) }}L
<q-popup-edit
v-if="drinks_props.row.cost_price_pro_volume"
v-model="props.row.volume.value"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
v-model="props.row.volume.value"
v-if="drinks_props.row.cost_price_pro_volume"
@save="updateVolume(props.row, drinks_props.row)"
>
<q-input
v-model.number="props.row.volume.value"
dense
filled
v-model.number="props.row.volume.value"
type="number"
suffix="L"
/>
@ -359,64 +359,64 @@
</q-td>
</q-tr>
</template>
<template v-slot:bottom>
<template #bottom>
<div class="full-width row justify-end">
<q-btn
v-if="drinks_props.row.cost_price_pro_volume"
color="positive"
icon-right="add"
label="Abgabe hinzufügen"
size="xs"
v-if="drinks_props.row.cost_price_pro_volume"
>
<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"
v-model.number="newVolume.volume"
/>
</div>
<div class="row justify-between q-pa-sm">
<q-btn label="Abbrechen" @click="cancelAddVolume" v-close-popup />
<q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
<q-btn
v-close-popup
label="Speichern"
color="primary"
@click="addVolume(drinks_props.row)"
v-close-popup
/>
</div>
</q-menu>
</q-btn>
</div>
</template>
<template v-slot:no-data>
<template #no-data>
<div class="full-width row justify-end">
<q-btn
v-if="drinks_props.row.cost_price_pro_volume"
color="positive"
icon-right="add"
label="Abgabe hinzufügen"
size="xs"
v-if="drinks_props.row.cost_price_pro_volume"
>
<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"
v-model.number="newVolume.volume"
/>
</div>
<div class="row justify-between q-pa-sm">
<q-btn label="Abbrechen" @click="cancelAddVolume" v-close-popup />
<q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
<q-btn
v-close-popup
label="Speichern"
color="primary"
@click="addVolume(drinks_props.row)"
v-close-popup
/>
</div>
</q-menu>
@ -427,7 +427,7 @@
</q-td>
</q-tr>
</template>
<template v-slot:body-cell-volumes="volumes">
<template #body-cell-volumes="volumes">
<q-table
:columns="column_calc"
:data="volumes.value"
@ -436,7 +436,7 @@
row-key="id"
flat
>
<template v-slot:header="props">
<template #header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -445,29 +445,29 @@
</q-tr>
</template>
<template v-slot:body="props">
<template #body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="volumes.row.cost_price_pro_volume == null"
size="sm"
color="accent"
round
dense
:icon="props.expand ? 'mdi-chevron-up' : 'mdi-chevron-down'"
@click="
props.expand = !props.expand;
console.log(volumes);
"
:icon="props.expand ? 'mdi-chevron-up' : 'mdi-chevron-down'"
v-if="volumes.row.cost_price_pro_volume == null"
/>
<q-btn
v-if="props.row.ingredients.length === 0 && props.row.prices.length === 0"
size="xs"
color="negative"
round
dense
icon="mdi-delete"
class="q-mx-sm"
v-if="props.row.ingredients.length === 0 && props.row.prices.length === 0"
@click="deleteVolume(props.row, volumes.row)"
/>
</q-td>
@ -475,17 +475,17 @@
{{ parseFloat(props.row.volume.value).toFixed(3) }}L
<!--{{ props.row.volume }}-->
<q-popup-edit
v-if="volumes.row.cost_price_pro_volume"
v-model="props.row.volume.value"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
v-model="props.row.volume.value"
v-if="volumes.row.cost_price_pro_volume"
@save="updateVolume(props.row, volumes.row)"
>
<q-input
v-model.number="props.row.volume.value"
dense
filled
v-model.number="props.row.volume.value"
type="number"
suffix="L"
/>
@ -521,18 +521,19 @@
</q-td>
</q-tr>
</template>
<template v-slot:bottom>
<template #bottom>
<div class="full-width row justify-end">
<q-btn
v-if="volumes.row.cost_price_pro_volume"
color="positive"
icon-right="add"
label="Abgabe hinzufügen"
size="xs"
v-if="volumes.row.cost_price_pro_volume"
>
<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"
@ -540,34 +541,34 @@
min="0"
step="0.01"
suffix="L"
v-model.number="newVolume.volume"
/>
</div>
<div class="row justify-between q-pa-sm">
<q-btn label="Abbrechen" @click="cancelAddVolume" v-close-popup />
<q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
<q-btn
v-close-popup
label="Speichern"
color="primary"
@click="addVolume(volumes.row)"
v-close-popup
/>
</div>
</q-menu>
</q-btn>
</div>
</template>
<template v-slot:no-data>
<template #no-data>
<div class="full-width row justify-end">
<q-btn
v-if="volumes.row.cost_price_pro_volume"
color="positive"
icon-right="add"
label="Abgabe hinzufügen"
size="xs"
v-if="volumes.row.cost_price_pro_volume"
>
<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"
@ -575,16 +576,15 @@
min="0"
step="0.01"
suffix="L"
v-model.number="newVolume.volume"
/>
</div>
<div class="row justify-between q-pa-sm">
<q-btn label="Abbrechen" @click="cancelAddVolume" v-close-popup />
<q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
<q-btn
v-close-popup
label="Speichern"
color="primary"
@click="addVolume(volumes.row)"
v-close-popup
/>
</div>
</q-menu>
@ -597,13 +597,12 @@
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, ref, computed, ComputedRef } from '@vue/composition-api';
import store, { DrinkPriceVolume, Drink } from '../store/altStore';
import { defineComponent, onBeforeMount, ref, ComputedRef, computed } from 'vue';
import PriceTable from 'src/plugins/pricelist/components/CalculationTable/PriceTable.vue';
import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
import { StateInterface } from 'src/store';
import { StateInterface, useMainStore } from 'src/store';
import { Store } from 'vuex';
import { UserStateInterface } from 'src/plugins/user/store/user';
function sort(a: string | number, b: string | number) {
if (a > b) return 1;
if (b > a) return -1;
@ -612,12 +611,15 @@ function sort(a: string | number, b: string | number) {
export default defineComponent({
name: 'CalculationTable',
components: { PriceTable, Ingredients },
setup(_, { root }) {
setup() {
const mainStore = useMainStore();
onBeforeMount(() => {
store.actions.getPriceCalcColumn(user);
//store.actions.getPriceCalcColumn(user);
});
const userstore = <Store<StateInterface>>root.$store;
const user = <string>userstore.state.user.currentUser?.userid;
const user = mainStore.currentUser.userid;
const columns = [
{
name: 'name',
@ -713,6 +715,7 @@ export default defineComponent({
field: 'public',
},
];
/*
const visibleColumn = computed({
get: () => store.state.pricecalc_columns,
set: (val) => {
@ -733,7 +736,7 @@ export default defineComponent({
};
const newVolume = ref<DrinkPriceVolume>(emptyVolume);
function addVolume(drink: Drink) {
store.actions.setVolume(<DrinkPriceVolume>newVolume.value, drink);
store.actions.setVolume(>newVolume.value, drink);
cancelAddVolume();
}
function cancelAddVolume() {
@ -828,7 +831,7 @@ export default defineComponent({
updateDrink,
deleteDrink,
console,
};
};*/
},
});
</script>

45
src/plugins/pricelist/components/CalculationTable/Ingredients.vue
View File

@ -6,18 +6,19 @@
class="full-width row justify-evenly q-py-xs"
>
<div class="full-width row justify-evenly">
<div class="col" v-if="ingredient.drink_ingredient">
<div v-if="ingredient.drink_ingredient" class="col">
<div class="full-width row justify-evenly q-py-xs">
<div class="col">
{{ get_drink_ingredient_name(ingredient.drink_ingredient.drink_ingredient_id) }}
<q-popup-edit
v-model="ingredient.drink_ingredient.drink_ingredient_id"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
v-model="ingredient.drink_ingredient.drink_ingredient_id"
@save="updateIngredient(ingredient, volume)"
>
<q-select
v-model="ingredient.drink_ingredient.drink_ingredient_id"
class="col q-px-sm"
label="Getränk"
filled
@ -25,7 +26,6 @@
:options="drinks"
option-label="name"
option-value="id"
v-model="ingredient.drink_ingredient.drink_ingredient_id"
emit-value
map-options
/>
@ -34,20 +34,20 @@
<div class="col">
{{ ingredient.drink_ingredient.volume.toFixed(3) }}L
<q-popup-edit
v-model="ingredient.drink_ingredient.volume"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
v-model="ingredient.drink_ingredient.volume"
@save="updateIngredient(ingredient, volume)"
>
<q-input
v-model.number="ingredient.drink_ingredient.volume"
class="col q-px-sm"
label="Volume"
type="number"
filled
dense
suffix="L"
v-model.number="ingredient.drink_ingredient.volume"
step="0.01"
min="0"
/>
@ -70,9 +70,9 @@
@save="updateIngredient(ingredient, volume)"
>
<q-select
v-model="ingredient.extra_ingredient"
filled
dense
v-model="ingredient.extra_ingredient"
:options="extra_ingredients"
option-label="name"
/>
@ -96,16 +96,18 @@
<div class="full-width row justify-around q-gutter-sm q-pa-sm">
<div class="col">
<q-select
v-model="newIngredient"
filled
dense
label="Zutat"
:options="[...drinks, ...extra_ingredients]"
option-label="name"
v-model="newIngredient"
/>
</div>
<div class="col">
<q-input
v-if="newIngredient && newIngredient.volume"
v-model.number="newIngredientVolume"
filled
dense
label="Volume"
@ -113,8 +115,6 @@
steps="0.01"
min="0"
suffix="L"
v-model.number="newIngredientVolume"
v-if="newIngredient && newIngredient.volume"
/>
<q-input
v-else-if="newIngredient && newIngredient.price"
@ -130,12 +130,12 @@
</div>
</div>
<div class="full-width row jusitfy-between q-gutter-sm q-pa-sm">
<q-btn label="Abbrechen" @click="cancelAddIngredient" v-close-popup />
<q-btn v-close-popup label="Abbrechen" @click="cancelAddIngredient" />
<q-btn
v-close-popup
label="Speichern"
color="positive"
@click="addIngredient(volume)"
v-close-popup
/>
</div>
</q-menu>
@ -145,21 +145,24 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
import store, { DrinkPriceVolume } from '../../store/altStore';
import { computed, defineComponent, PropType, ref } from 'vue';
import { usePricelistStore } from '../../store';
export default defineComponent({
name: 'Ingredients',
props: {
ingredients: {
type: Array as () => Array<FG.Ingredient>,
type: Array as PropType<FG.Ingredient[]>,
required: true,
},
volume: {
type: Object as () => DrinkPriceVolume,
type: Object /*as PropType<DrinkPriceVolume>*/,
required: true,
},
},
setup() {
const store = usePricelistStore();
/*
const emptyIngredient: FG.Ingredient = {
id: -1,
drink_ingredient: undefined,
@ -181,12 +184,12 @@ export default defineComponent({
},
volume
);
} else if (newIngredient) {
} else if (newIngredient.value) {
store.actions.setIngredient(
{
id: -1,
drink_ingredient: undefined,
extra_ingredient: <FG.ExtraIngredient>newIngredient.value,
extra_ingredient: >newIngredient.value,
},
volume
);
@ -205,14 +208,14 @@ export default defineComponent({
store.actions.deleteIngredient(ingredient, volume);
}
const drinks = computed(() =>
store.state.drinks.filter((drink) => {
store.drinks.filter((drink) => {
return drink.cost_price_pro_volume.value;
})
);
const extra_ingredients = computed(() => store.state.extraIngredients);
const extra_ingredients = computed(() => store.extraIngredients);
function get_drink_ingredient_name(id: number) {
return store.state.drinks.find((a) => a.id === id)?.name;
return store.drinks.find((a) => a.id === id)?.name;
}
return {
@ -225,7 +228,7 @@ export default defineComponent({
updateIngredient,
deleteIngredient,
get_drink_ingredient_name,
};
};*/
},
});
</script>

28
src/plugins/pricelist/components/CalculationTable/PriceTable.vue
View File

@ -1,5 +1,6 @@
<template>
<q-table
v-model:pagination="pagination"
style="max-height: 130px"
dense
hide-header
@ -8,10 +9,9 @@
:visible-columns="visibleColumns"
flat
virtual-scroll
:pagination.sync="pagination"
:rows-per-page-options="[0]"
>
<template v-slot:body="prices_props">
<template #body="prices_props">
<q-tr :props="prices_props">
<q-td key="price" :props="prices_props">
{{ prices_props.row.price.toFixed(2) }}€
@ -67,7 +67,7 @@
</q-td>
</q-tr>
</template>
<template v-slot:bottom>
<template #bottom>
<div class="full-width row justify-end">
<q-btn size="xs" icon-right="add" color="positive" label="Preis hinzufügen">
<q-menu anchor="center middle" self="center middle">
@ -94,14 +94,14 @@
<q-toggle v-model="newPrice.public" dense class="q-px-sm" label="Öffentlich" />
</div>
<div class="row justify-between q-pa-sm">
<q-btn label="Abbrechen" @click="cancelAddPrice" v-close-popup />
<q-btn label="Speichern" color="primary" @click="addPrice(row)" v-close-popup />
<q-btn v-close-popup label="Abbrechen" @click="cancelAddPrice" />
<q-btn v-close-popup label="Speichern" color="primary" @click="addPrice(row)" />
</div>
</q-menu>
</q-btn>
</div>
</template>
<template v-slot:no-data class="justify-end">
<template #no-data class="justify-end">
<div class="full-width row justify-end">
<q-btn size="xs" icon-right="add" color="positive" label="Preis hinzufügen">
<q-menu anchor="center middle" self="center middle">
@ -128,8 +128,8 @@
<q-toggle v-model="newPrice.public" dense class="q-px-sm" label="Öffentlich" />
</div>
<div class="row justify-between q-pa-sm">
<q-btn label="Abbrechen" @click="cancelAddPrice" v-close-popup />
<q-btn label="Speichern" color="primary" @click="addPrice(row)" v-close-popup />
<q-btn v-close-popup label="Abbrechen" @click="cancelAddPrice" />
<q-btn v-close-popup label="Speichern" color="primary" @click="addPrice(row)" />
</div>
</q-menu>
</q-btn>
@ -139,8 +139,9 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
import store, { DrinkPriceVolume } from '../../store/altStore';
import { defineComponent, ref } from 'vue';
import { usePricelistStore } from '../../store';
export default defineComponent({
name: 'PriceTable',
props: {
@ -153,7 +154,7 @@ export default defineComponent({
required: true,
},
row: {
type: Object as () => DrinkPriceVolume,
type: Object /*as PropType<DrinkPriceVolume>*/,
required: true,
},
visibleColumns: {
@ -162,6 +163,8 @@ export default defineComponent({
},
},
setup(props) {
const store = usePricelistStore();
const emptyPrice = {
id: -1,
price: 0,
@ -169,6 +172,7 @@ export default defineComponent({
public: true,
};
const newPrice = ref(emptyPrice);
/*
function addPrice(volume: DrinkPriceVolume) {
store.actions.setPrice({ ...newPrice.value }, volume);
cancelAddPrice();
@ -199,7 +203,7 @@ export default defineComponent({
deletePrice,
pagination,
console,
};
};*/
},
});
</script>

20
src/plugins/pricelist/components/ExtraIngredients.vue
View File

@ -6,12 +6,12 @@
<div class="text-h6">Editere Extrazutaten {{ actualExtraIngredient.name }}</div>
</q-card-section>
<q-card-section>
<q-input dense label="Name" filled v-model="actualExtraIngredient.name" />
<q-input v-model="actualExtraIngredient.name" dense label="Name" filled />
<q-input
v-model.number="actualExtraIngredient.price"
dense
label="Preis"
filled
v-model.number="actualExtraIngredient.price"
type="number"
min="0"
step="0.1"
@ -27,19 +27,19 @@
<q-page padding>
<q-table title="Getränkearten" :data="rows" :row-key="(row) => row.id" :columns="columns">
<template v-slot:top-right>
<template #top-right>
<q-input
v-model="newExtraIngredient.name"
class="q-px-sm"
dense
v-model="newExtraIngredient.name"
placeholder="Neue Zutatenbezeichnung"
label="Neue Zutatenbezeichnung"
filled
/>
<q-input
v-model.number="newExtraIngredient.price"
class="q-px-sm"
dense
v-model.number="newExtraIngredient.price"
placeholder="Preis"
label="Preis"
filled
@ -50,7 +50,7 @@
/>
<q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addExtraIngredient" />
</template>
<template v-slot:body-cell-actions="props">
<template #body-cell-actions="props">
<q-td :props="props" align="right" :auto-width="true">
<q-btn round flat icon="mdi-pencil" @click="editType(props.row)" />
<q-btn round flat icon="mdi-delete" @click="deleteType(props.row)" />
@ -62,12 +62,12 @@
</template>
<script lang="ts">
import { computed, defineComponent, onBeforeMount, ref } from '@vue/composition-api';
import store from '../store/altStore';
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
name: 'DrinkTypes',
setup(_, { root }) {
setup() {
/*
const emptyExtraIngredient: FG.ExtraIngredient = {
name: '',
price: 0,
@ -138,7 +138,7 @@ export default defineComponent({
actualExtraIngredient,
discardChanges,
saveChanges,
};
};*/
},
});
</script>

2
yarn.lock
View File

@ -1148,7 +1148,7 @@
"@quasar/quasar-app-extension-qcalendar@file:deps/quasar-ui-qcalendar/app-extension":
version "4.0.0-alpha.1"
dependencies:
"@quasar/quasar-ui-qcalendar" "link:../../../../../.cache/yarn/v6/npm-@quasar-quasar-app-extension-qcalendar-4.0.0-alpha.1-f7cd77ac-407f-4b66-b4e0-b371d5331fa7-1616165544608/node_modules/@quasar/ui"
"@quasar/quasar-ui-qcalendar" "link:../../../../../.cache/yarn/v6/npm-@quasar-quasar-app-extension-qcalendar-4.0.0-alpha.1-192d79cc-4593-44cf-a564-bed08599d4bf-1616167953691/node_modules/@quasar/ui"
"@quasar/quasar-ui-qcalendar@link:deps/quasar-ui-qcalendar/ui":
version "0.0.0"