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", "vetur.format.defaultFormatter.ts": "prettier-tslint",
"typescript.format.enable": false, "typescript.format.enable": false,
"prettier.packageManager": "yarn",
"prettier.configPath": "./package.json" "prettier.configPath": "./package.json"
} }

2
package.json
View File

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

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

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

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

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

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

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

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

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

2
yarn.lock
View File

@ -1148,7 +1148,7 @@
"@quasar/quasar-app-extension-qcalendar@file:deps/quasar-ui-qcalendar/app-extension": "@quasar/quasar-app-extension-qcalendar@file:deps/quasar-ui-qcalendar/app-extension":
version "4.0.0-alpha.1" version "4.0.0-alpha.1"
dependencies: 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": "@quasar/quasar-ui-qcalendar@link:deps/quasar-ui-qcalendar/ui":
version "0.0.0" version "0.0.0"