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

[pricelist][break] some cleanup code. update not work

This commit is contained in:
Tim Gröger 2021-03-20 14:59:55 +01:00
parent c3e3a272dc
commit 73a5de021d
9 changed files with 383 additions and 691 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -36,7 +36,8 @@
"eslint-plugin-vue": "^7.7.0",
"eslint-webpack-plugin": "^2.5.2",
"prettier": "^2.2.1",
"typescript": "^4.2.3"
"typescript": "^4.2.3",
"vue-typed-emit": "^1.1.0"
},
"browserslist": [
"last 10 Chrome versions",

393
src/plugins/pricelist/altStore.ts
View File

@ -1,393 +0,0 @@
import { reactive, computed, WritableComputedRef } from 'vue';
import { api } from 'src/boot/axios';
import { AxiosResponse } from 'axios';
/*
const state = reactive<{
drinks: Drink[];
tags: FG.Tag[];
drinkTypes: FG.DrinkType[];
extraIngredients: FG.ExtraIngredient[];
pricecalc_columns: Array<string>;
}>({
drinks: [],
tags: [],
drinkTypes: [],
extraIngredients: [],
pricecalc_columns: [
'name',
'drink_type',
'volume_package',
'cost_price_package_netto',
'package_size',
'cost_price_pro_volume',
'volumes',
'volume',
'min_prices',
'prices',
'price',
'description',
'public',
],
});
interface MinPrice extends Omit<FG.MinPrices, 'price'> {
price: WritableComputedRef<number> | null;
}
interface DrinkPriceVolume extends Omit<Omit<FG.DrinkPriceVolume, 'volume'>, 'min_prices'> {
_volume: number;
volume: WritableComputedRef<number> | null;
min_prices: MinPrice[];
}
interface Drink extends Omit<Omit<FG.Drink, 'cost_price_pro_volume'>, 'volumes'> {
volumes: DrinkPriceVolume[];
cost_price_pro_volume: WritableComputedRef<number | undefined>;
_cost_price_pro_volume?: number;
}
class DrinkPriceVolume {
constructor({ id, volume, min_prices, prices, ingredients }: FG.DrinkPriceVolume, drink: Drink) {
this.id = id;
this._volume = volume;
this.prices = prices;
this.ingredients = ingredients;
this.min_prices = [
{
percentage: 100,
price: create_min_prices(drink, this, 100),
},
{
percentage: 250,
price: create_min_prices(drink, this, 250),
},
{
percentage: 300,
price: create_min_prices(drink, this, 300),
},
];
this.volume = computed<number>({
get: () => {
if (this.ingredients.some((ingredient) => !!ingredient.drink_ingredient)) {
let retVal = 0;
this.ingredients.forEach((ingredient) => {
if (ingredient.drink_ingredient?.volume) {
retVal += ingredient.drink_ingredient.volume;
}
});
this._volume = retVal;
return retVal;
} else {
return this._volume;
}
},
set: (val) => (this._volume = val),
});
}
}
class Drink {
constructor({
id,
article_id,
package_size,
name,
volume,
cost_price_pro_volume,
cost_price_package_netto,
tags,
type,
volumes,
}: FG.Drink) {
this.id = id;
this.article_id = article_id;
this.package_size = package_size;
this.name = name;
this.volume = volume;
this.cost_price_package_netto = cost_price_package_netto;
this._cost_price_pro_volume = cost_price_pro_volume;
this.cost_price_pro_volume = computed({
get: () => {
if (!!this.volume && !!this.package_size && !!this.cost_price_package_netto) {
const retVal =
((this.cost_price_package_netto || 0) /
((this.volume || 0) * (this.package_size || 0))) *
1.19;
this._cost_price_pro_volume = Math.round(retVal * 1000) / 1000;
}
return this._cost_price_pro_volume;
},
set: (val) => (this._cost_price_pro_volume = val),
});
this.tags = tags;
this.type = type;
this.volumes = [];
//volumes.forEach(volume => {
// this.volumes.push(new DrinkPriceVolume(volume, this));
//});
}
}
const actions = {
getDrinks() {
api
.get('pricelist/drinks')
.then((response: AxiosResponse<FG.Drink[]>) => {
state.drinks = [];
response.data.forEach((drink) => {
state.drinks.push(new Drink(drink));
});
state.drinks.forEach((drink) => {
const _drink = response.data.find((a) => a.id === drink.id);
_drink?.volumes.forEach((volume) => {
drink.volumes.push(new DrinkPriceVolume(volume, drink));
});
});
})
.catch((err) => console.warn(err));
},
setPrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
api
.post(`pricelist/volumes/${volume.id}/prices`, price)
.then((response: AxiosResponse<FG.DrinkPrice>) => {
volume.prices.push(response.data);
this.sortPrices(volume);
})
.catch((err) => console.warn(err));
},
sortPrices(volume: DrinkPriceVolume) {
volume.prices.sort((a, b) => {
if (a.price > b.price) return 1;
if (b.price > a.price) return -1;
return 0;
});
},
deletePrice(price: FG.DrinkPrice, volume: FG.DrinkPriceVolume) {
api
.delete(`pricelist/prices/${price.id}`)
.then(() => {
const index = volume.prices.findIndex((a) => a.id == price.id);
if (index > -1) {
volume.prices.splice(index, 1);
}
})
.catch((err) => console.warn(err));
},
updatePrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
api
.put(`pricelist/prices/${price.id}`, price)
.then((response: AxiosResponse<FG.DrinkPrice>) => {
const index = volume.prices.findIndex((a) => a.id === price.id);
if (index > -1) {
this.sortPrices(volume);
}
})
.catch((err) => console.log(err));
},
setVolume(volume: DrinkPriceVolume, drink: Drink) {
console.log(volume);
api
.post(`pricelist/drinks/${drink.id}/volumes`, {
...volume,
volume: volume.volume,
})
.then((response: AxiosResponse<FG.DrinkPriceVolume>) => {
drink.volumes.push(new DrinkPriceVolume(response.data, drink));
})
.catch((err) => console.warn(err));
},
updateVolume(volume: DrinkPriceVolume, drink: Drink) {
api
.put(`pricelist/volumes/${volume.id}`, {
...volume,
volume: volume.volume?.value,
})
.catch((err) => console.warn(err));
},
deleteVolume(volume: FG.DrinkPriceVolume, drink: FG.Drink) {
api
.delete(`pricelist/volumes/${volume.id}`)
.then(() => {
const index = drink.volumes.findIndex((a) => a.id === volume.id);
if (index > -1) {
drink.volumes.splice(index, 1);
}
})
.catch((err) => console.warn(err));
},
getExtraIngredients() {
api
.get('pricelist/ingredients/extraIngredients')
.then((response: AxiosResponse<FG.ExtraIngredient[]>) => {
state.extraIngredients = response.data;
})
.catch((err) => console.log(err));
},
setIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
api
.post(`pricelist/volumes/${volume.id}/ingredients`, ingredient)
.then((response: AxiosResponse<FG.Ingredient>) => {
volume.ingredients.push(response.data);
})
.catch((err) => console.warn(err));
},
updateIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
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;
//}
})
.catch((err) => console.warn(err));
},
deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
api
.delete(`pricelist/ingredients/${ingredient.id}`)
.then(() => {
const index = volume.ingredients.findIndex((a) => a.id === ingredient.id);
if (index > -1) {
volume.ingredients.splice(index, 1);
}
})
.catch((err) => console.warn(err));
},
getDrinkTypes() {
api
.get('pricelist/drink-types')
.then((response: AxiosResponse<FG.DrinkType[]>) => {
state.drinkTypes = response.data;
})
.catch((err) => console.warn(err));
},
setDrink(drink: FG.Drink) {
api
.post('pricelist/drinks', drink)
.then((response: AxiosResponse<FG.Drink>) => {
state.drinks.push(new Drink(response.data));
const drink = state.drinks.find((a) => a.id === response.data.id);
response.data.volumes.forEach((volume) => {
drink?.volumes.push(new DrinkPriceVolume(volume, drink));
});
})
.catch((err) => console.warn(err));
},
updateDrink(drink: Drink) {
api
.put(`pricelist/drinks/${drink.id}`, {
...drink,
cost_price_pro_volume: drink.cost_price_pro_volume?.value,
})
.catch((err) => console.warn(err));
},
deleteDrink(drink: Drink) {
api
.delete(`pricelist/drinks/${drink.id}`)
.then(() => {
const index = state.drinks.findIndex((a) => a.id === drink.id);
if (index > -1) {
state.drinks.splice(index, 1);
}
})
.catch((err) => console.warn(err));
},
setExtraIngredient(ingredient: FG.ExtraIngredient) {
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) {
api
.put(`pricelist/ingredients/extraIngredients/${ingredient.id}`, ingredient)
.then((response: AxiosResponse<FG.ExtraIngredient>) => {
const index = state.extraIngredients.findIndex((a) => a.id === ingredient.id);
if (index > -1) {
state.extraIngredients[index] = response.data;
} else {
state.extraIngredients.push(response.data);
}
})
.catch((err) => console.warn(err));
},
deleteExtraIngredient(ingredient: FG.ExtraIngredient) {
api
.delete(`pricelist/ingredients/extraIngredients/${ingredient.id}`)
.then(() => {
const index = state.extraIngredients.findIndex((a) => a.id === ingredient.id);
if (index > -1) {
state.extraIngredients.splice(index, 1);
}
})
.catch((err) => console.warn(err));
},
getPriceCalcColumn(userid: string) {
api
.get(`pricelist/users/${userid}/pricecalc_columns`)
.then(({ data }: AxiosResponse<Array<string>>) => {
if (data.length > 0) {
state.pricecalc_columns = data;
}
})
.catch((err) => console.log(err));
},
updatePriceCalcColumn(userid: string, data: Array<string>) {
api
.put(`pricelist/users/${userid}/pricecalc_columns`, data)
.then(() => {
state.pricecalc_columns = data;
})
.catch((err) => console.log(err));
},
};
const getters = {};
function create_min_prices(drink: Drink, volume: DrinkPriceVolume, percentage: number) {
if (drink.cost_price_pro_volume?.value) {
if (volume.ingredients.every((ingredient) => !!ingredient.drink_ingredient)) {
return computed<number>(() => {
let retVal = (drink.cost_price_pro_volume?.value || 0) * (volume.volume?.value || 0);
volume.ingredients.forEach((ingredient) => {
if (ingredient.extra_ingredient) {
retVal += ingredient.extra_ingredient.price;
}
});
retVal = (retVal * percentage) / 100;
return retVal;
});
} else {
return computed<number>(
() =>
((drink.cost_price_pro_volume?.value || 0) * (volume.volume?.value || 0) * percentage) /
100
);
}
} else {
return computed<number>(() => {
let retVal = 0;
volume.ingredients.forEach((ingredient) => {
if (ingredient.drink_ingredient) {
const _drink = state.drinks.find(
(a) => a.id === ingredient.drink_ingredient?.drink_ingredient_id
);
retVal += ingredient.drink_ingredient.volume * (_drink?.cost_price_pro_volume.value || 0);
}
if (ingredient.extra_ingredient) {
retVal += ingredient.extra_ingredient.price;
}
});
console.log(volume);
return (retVal * percentage) / 100;
});
}
}
export { create_min_prices, DrinkPriceVolume, MinPrice, Drink };
export default {
state,
actions,
getters,
};
*/

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

@ -271,159 +271,7 @@
</q-popup-edit>
</q-td>
<q-td key="volumes" :props="drinks_props">
<q-table
:columns="column_calc"
:rows="drinks_props.row.volumes"
dense
:visible-columns="visibleColumn"
row-key="id"
flat
>
<template #header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th v-for="col in props.cols" :key="col.name" :props="props">
{{ col.label }}
</q-th>
</q-tr>
</template>
<template #body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="!drinks_props.row.cost_price_pro_volume"
size="sm"
color="accent"
round
dense
:icon="props.expand ? 'mdi-chevron-up' : 'mdi-chevron-down'"
@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"
@click="deleteVolume(props.row, drinks_props.row)"
/>
</q-td>
<q-td key="volume" :props="props">
{{ parseFloat(props.row.volume).toFixed(3) }}L
<q-popup-edit
v-if="drinks_props.row.cost_price_pro_volume"
v-model="props.row.volume"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateVolume(props.row, drinks_props.row)"
>
<q-input
v-model.number="props.row.volume"
dense
filled
type="number"
suffix="L"
/>
</q-popup-edit>
</q-td>
<q-td key="min_prices" :props="props">
<div
v-for="(min_price, index) in props.row.min_prices"
:key="`min_prices` + index"
class="row justify-between"
>
<div class="col">
<q-badge color="primary">{{ min_price.percentage }}%</q-badge>
</div>
<div class="col" style="text-align: end">
{{ min_price.price.toFixed(3) }}€
</div>
</div>
</q-td>
<q-td key="prices" :props="props">
<price-table
:columns="column_prices"
:rows="props.row.prices"
:row="props.row"
:visible-columns="visibleColumn"
/>
</q-td>
</q-tr>
<q-tr v-show="props.expand" :props="props">
<q-td colspan="100%">
<ingredients :ingredients="props.row.ingredients" :volume="props.row" />
</q-td>
</q-tr>
</template>
<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"
>
<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"
/>
</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(drinks_props.row)"
/>
</div>
</q-menu>
</q-btn>
</div>
</template>
<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"
>
<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"
/>
</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(drinks_props.row)"
/>
</div>
</q-menu>
</q-btn>
</div>
</template>
</q-table>
<drink-price-volumes-table :rows='drinks_props.row.volumes' :visible-columns='visibleColumn' :columns='column_calc' :drink='drinks_props.row' @updateDrink="updateDrink(drinks_props.row)"/>
</q-td>
</q-tr>
</template>
@ -432,10 +280,9 @@
<script lang="ts">
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 DrinkPriceVolumesTable from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue';
import { useMainStore } from 'src/store';
import { Drink, DrinkPriceVolume, usePricelistStore } from 'src/plugins/pricelist/store';
import { Drink, usePricelistStore } from 'src/plugins/pricelist/store';
function sort(a: string | number, b: string | number) {
@ -445,7 +292,7 @@ function sort(a: string | number, b: string | number) {
}
export default defineComponent({
name: 'CalculationTable',
components: { PriceTable, Ingredients },
components: {DrinkPriceVolumesTable},
setup() {
const mainStore = useMainStore();
const store = usePricelistStore();
@ -556,37 +403,6 @@ export default defineComponent({
store.updatePriceCalcColumn(user, val);
},
});
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 addVolume(drink: Drink) {
store.setVolume(<DrinkPriceVolume>newVolume.value, drink);
cancelAddVolume();
}
function cancelAddVolume() {
setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
newVolume.value = emptyVolume;
}, 200);
}
function updateVolume(volume: DrinkPriceVolume, drink: Drink) {
console.log(volume);
store.updateVolume(volume, drink);
}
function deleteVolume(volume: FG.DrinkPriceVolume, drink: FG.Drink) {
store.deleteVolume(volume, drink);
}
// eslint-disable-next-line vue/return-in-computed-property
const pagination = computed(() => {
@ -653,11 +469,6 @@ export default defineComponent({
column_calc,
column_prices,
visibleColumn,
addVolume,
cancelAddVolume,
newVolume,
updateVolume,
deleteVolume,
newDrink,
cost_price_pro_volume,
calc_price_pro_volume,

94
src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue Normal file
View File

@ -0,0 +1,94 @@
<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>

202
src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue Normal file
View File

@ -0,0 +1,202 @@
<template>
<q-table
:columns="columns"
:rows="rows"
dense
:visible-columns="visibleColumns"
row-key="id"
flat
>
<template #header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th v-for="col in props.cols" :key="col.name" :props="props">
{{ col.label }}
</q-th>
</q-tr>
</template>
<template #body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="!drink.cost_price_pro_volume"
size="sm"
color="accent"
round
dense
:icon="props.expand ? 'mdi-chevron-up' : 'mdi-chevron-down'"
@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"
@click="deleteVolume(props.row, drink)"
/>
</q-td>
<q-td key="volume" :props="props">
{{ parseFloat(props.row.volume).toFixed(3) }}L
<q-popup-edit
v-if="rows.cost_price_pro_volume"
v-model="props.row.volume"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateVolume(props.row, drink)"
>
<q-input
v-model.number="props.row.volume"
dense
filled
type="number"
suffix="L"
/>
</q-popup-edit>
</q-td>
<q-td key="min_prices" :props="props">
<div
v-for="(min_price, index) in props.row.min_prices"
:key="`min_prices` + index"
class="row justify-between"
>
<div class="col">
<q-badge color="primary">{{ min_price.percentage }}%</q-badge>
</div>
<div class="col" style="text-align: end">
{{ min_price.price ? min_price.price.toFixed(3) : Number(0).toFixed(2) }}€
</div>
</div>
</q-td>
<q-td key="prices" :props="props">
<price-table
:columns="column_prices"
:rows="props.row.prices"
:row="props.row"
:visible-columns="visibleColumns"
@updateDrink="updateDrink"
/>
</q-td>
</q-tr>
<q-tr v-show="props.expand" :props="props">
<q-td colspan="100%">
<ingredients :ingredients="props.row.ingredients" :volume="props.row" @updateDrink="updateDrink"/>
</q-td>
</q-tr>
</template>
<template #bottom>
<div class="full-width row justify-end">
<new-volume :cost_price_pro_volume="drink.cost_price_pro_volume" @addVolume="addVolume($event, drink)" />
</div>
</template>
<template #no-data>
<div class="full-width row justify-end">
<new-volume :cost_price_pro_volume="drink.cost_price_pro_volume" @addVolume="addVolume($event, drink)" />
</div>
</template>
</q-table>
</template>
<script lang='ts'>
import { Drink, DrinkPriceVolume, usePricelistStore } from '../../store';
import PriceTable from 'src/plugins/pricelist/components/CalculationTable/PriceTable.vue';
import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
import NewVolume from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue';
import {CompositionAPIEmit} from 'vue-typed-emit';
import {SetupContext} from 'vue'
interface Events {
updateDrink: undefined
}
interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
emit: CompositionAPIEmit<Events>
}
const columns = [
{
name: 'volume',
label: 'Abgabe in l',
field: 'volume',
},
{
name: 'min_prices',
label: 'Minimal Preise',
field: 'min_prices',
},
{
name: 'prices',
label: 'Preise',
field: 'prices',
},
]
export default {
props: {
visibleColumns: {
type: Array,
default: columns
},
columns: {
type: Array,
default: columns
},
rows: {
type: [] as Array<DrinkPriceVolume>,
required: true,
},
drink: {
type: Object as () => Drink,
required: true
}
},
name: 'DrinkPriceVolumsTable',
components: { PriceTable, Ingredients, NewVolume },
setup(_: any, {emit}: ExtendedSetupContext) {
const store = usePricelistStore()
function addVolume(volume: DrinkPriceVolume, drink: Drink) {
drink.volumes.push(volume)
updateDrink()
}
function updateDrink() {
emit("updateDrink")
}
function deleteVolume(volume: FG.DrinkPriceVolume, drink: FG.Drink) {
store.deleteVolume(volume, drink);
}
const column_prices = [
{
name: 'price',
label: 'Preis',
field: 'price',
format: (val: number) => `${val.toFixed(2)}€`,
},
{
name: 'description',
label: 'Beschreibung',
field: 'description',
},
{
name: 'public',
label: 'Öffentlich',
field: 'public',
},
];
return {addVolume,
updateDrink,
deleteVolume, column_prices}
}
};
</script>
<style scoped>
</style>

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

@ -15,7 +15,7 @@
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateIngredient(ingredient, volume)"
@save="updateDrink"
>
<q-select
v-model="ingredient.drink_ingredient.drink_ingredient_id"
@ -38,7 +38,7 @@
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateIngredient(ingredient, volume)"
@save="updateDrink"
>
<q-input
v-model.number="ingredient.drink_ingredient.volume"
@ -67,7 +67,7 @@
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateIngredient(ingredient, volume)"
@save="updateDrink"
>
<q-select
v-model="ingredient.extra_ingredient"
@ -112,7 +112,7 @@
dense
label="Volume"
type="number"
steps="0.01"
step="0.01"
min="0"
suffix="L"
/>
@ -123,8 +123,10 @@
label="Preis"
disable
min="0"
steps="0.1"
:value="newIngredient.price.toFixed(3)"
step="0.1"
fill-mask="0"
mask="#.##"
v-model='newIngredient.price'
suffix="€"
/>
</div>
@ -148,6 +150,17 @@
import { computed, defineComponent, PropType, ref } from 'vue';
import { DrinkPriceVolume, usePricelistStore } from '../../store';
import {CompositionAPIEmit} from 'vue-typed-emit';
import {SetupContext} from 'vue';
interface Events {
updateDrink: undefined
}
interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
emit: CompositionAPIEmit<Events>
}
export default defineComponent({
name: 'Ingredients',
props: {
@ -160,7 +173,8 @@ export default defineComponent({
required: true,
},
},
setup() {
emits: ["updateDrink"],
setup(_:any, {emit}: ExtendedSetupContext) {
const store = usePricelistStore();
const emptyIngredient: FG.Ingredient = {
@ -171,8 +185,9 @@ export default defineComponent({
const newIngredient = ref<FG.Drink | FG.ExtraIngredient>();
const newIngredientVolume = ref<number>(0);
function addIngredient(volume: DrinkPriceVolume) {
let ingredient : FG.Ingredient
if ((<FG.Drink>newIngredient.value)?.volume && newIngredient.value) {
store.setIngredient(
volume.ingredients.push(
{
id: -1,
drink_ingredient: {
@ -182,34 +197,35 @@ export default defineComponent({
},
extra_ingredient: undefined,
},
volume
);
} else if (newIngredient.value) {
store.setIngredient(
volume.ingredients.push(
{
id: -1,
drink_ingredient: undefined,
extra_ingredient: <FG.ExtraIngredient>newIngredient.value,
},
volume
);
}
updateDrink()
cancelAddIngredient();
}
function updateDrink() {
console.log("updateDrink from Ingredients")
emit("updateDrink")
}
function cancelAddIngredient() {
setTimeout(() => {
(newIngredient.value = undefined), (newIngredientVolume.value = 0);
}, 200);
}
function updateIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
store.updateIngredient(ingredient, volume);
}
function deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
store.deleteIngredient(ingredient, volume);
}
const drinks = computed(() =>
store.drinks.filter((drink) => {
return drink.cost_price_pro_volume.value;
console.log("computed drinks", drink.name, drink.cost_price_pro_volume)
return drink.cost_price_pro_volume;
})
);
const extra_ingredients = computed(() => store.extraIngredients);
@ -225,7 +241,7 @@ export default defineComponent({
newIngredient,
newIngredientVolume,
cancelAddIngredient,
updateIngredient,
updateDrink,
deleteIngredient,
get_drink_ingredient_name,
};

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

@ -5,7 +5,7 @@
dense
hide-header
:columns="columns"
:data="data"
:rows="rows"
:visible-columns="visibleColumns"
flat
virtual-scroll
@ -20,7 +20,7 @@
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updatePrice(prices_props.row, row)"
@save="updateDrink"
>
<q-input
v-model.number="prices_props.row.price"
@ -42,7 +42,7 @@
label="Beschreibung"
label-cancel="Abbrechen"
label-set="Speichern"
@save="updatePrice(prices_props.row, row)"
@save="updateDrink"
>
<q-input v-model="prices_props.row.description" dense autofocus filled clearable />
</q-popup-edit>
@ -51,7 +51,7 @@
<q-toggle
v-model="prices_props.row.public"
dense
@input="updatePrice(prices_props.row, row)"
@update:modelValue="updateDrink"
/>
</q-td>
@ -140,7 +140,18 @@
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { usePricelistStore } from '../../store';
import { DrinkPriceVolume, usePricelistStore } from '../../store';
import {CompositionAPIEmit} from 'vue-typed-emit';
import {SetupContext} from 'vue';
interface Events {
updateDrink: undefined
}
interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
emit: CompositionAPIEmit<Events>
}
export default defineComponent({
name: 'PriceTable',
@ -149,7 +160,7 @@ export default defineComponent({
type: Array,
required: true,
},
data: {
rows: {
type: Array,
required: true,
},
@ -162,48 +173,48 @@ export default defineComponent({
required: true,
},
},
setup(props) {
emits: ["updateDrink"],
setup(props, {emit}: ExtendedSetupContext) {
const store = usePricelistStore();
const emptyPrice = {
const emptyPrice: FG.DrinkPrice = {
id: -1,
price: 0,
description: '',
public: true,
};
const newPrice = ref(emptyPrice);
/*
function addPrice(volume: DrinkPriceVolume) {
store.actions.setPrice({ ...newPrice.value }, volume);
volume.prices.push(newPrice.value)
updateDrink()
cancelAddPrice();
}
function updateDrink() {
emit("updateDrink")
}
function cancelAddPrice() {
setTimeout(() => {
newPrice.value = emptyPrice;
}, 200);
}
function updatePrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
console.log(price);
store.actions.updatePrice(price, volume);
}
function deletePrice(price: FG.DrinkPrice, volume: FG.DrinkPriceVolume) {
console.log(price, volume);
store.actions.deletePrice(price, volume);
store.deletePrice(price, volume);
}
const pagination = ref({
rowsPerPage: props.row.prices.length,
rowsPerPage: (<DrinkPriceVolume>props.row).prices.length,
});
return {
newPrice,
addPrice,
cancelAddPrice,
updatePrice,
updateDrink,
deletePrice,
pagination,
console,
};*/
};
},
});
</script>

76
src/plugins/pricelist/store.ts
View File

@ -205,13 +205,6 @@ export const usePricelistStore = defineStore({
this.extraIngredients.splice(index, 1);
}
},
/*async getDrinks(force = false) {
if (force || this.drinks.length == 0) {
const { data } = await api.get<Array<FG.Drink>>('/pricelist/drinks');
this.drinks = data;
}
return this.drinks;
},*/
getDrinks() {
api
.get('pricelist/drinks')
@ -230,15 +223,6 @@ export const usePricelistStore = defineStore({
})
.catch((err) => console.warn(err));
},
setPrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
api
.post(`pricelist/volumes/${volume.id}/prices`, price)
.then((response: AxiosResponse<FG.DrinkPrice>) => {
volume.prices.push(response.data);
this.sortPrices(volume);
})
.catch((err) => console.warn(err));
},
sortPrices(volume: DrinkPriceVolume) {
volume.prices.sort((a, b) => {
if (a.price > b.price) return 1;
@ -257,37 +241,6 @@ export const usePricelistStore = defineStore({
})
.catch((err) => console.warn(err));
},
updatePrice(price: FG.DrinkPrice, volume: DrinkPriceVolume) {
api
.put(`pricelist/prices/${price.id}`, price)
.then((response: AxiosResponse<FG.DrinkPrice>) => {
const index = volume.prices.findIndex((a) => a.id === price.id);
if (index > -1) {
this.sortPrices(volume);
}
})
.catch((err) => console.log(err));
},
setVolume(volume: DrinkPriceVolume, drink: Drink) {
console.log(volume);
api
.post(`pricelist/drinks/${drink.id}/volumes`, {
...volume,
volume: volume.volume,
})
.then((response: AxiosResponse<FG.DrinkPriceVolume>) => {
drink.volumes.push(new DrinkPriceVolume(response.data, drink));
})
.catch((err) => console.warn(err));
},
updateVolume(volume: DrinkPriceVolume, drink: Drink) {
api
.put(`pricelist/volumes/${volume.id}`, {
...volume,
volume: volume.volume?.value,
})
.catch((err) => console.warn(err));
},
deleteVolume(volume: FG.DrinkPriceVolume, drink: FG.Drink) {
api
.delete(`pricelist/volumes/${volume.id}`)
@ -299,25 +252,6 @@ export const usePricelistStore = defineStore({
})
.catch((err) => console.warn(err));
},
setIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
api
.post(`pricelist/volumes/${volume.id}/ingredients`, ingredient)
.then((response: AxiosResponse<FG.Ingredient>) => {
volume.ingredients.push(response.data);
})
.catch((err) => console.warn(err));
},
updateIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
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;
//}
})
.catch((err) => console.warn(err));
},
deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
api
.delete(`pricelist/ingredients/${ingredient.id}`)
@ -347,6 +281,16 @@ export const usePricelistStore = defineStore({
...drink,
cost_price_pro_volume: drink.cost_price_pro_volume?.value,
})
.then(({ data }: AxiosResponse<FG.Drink>) => {
const index = this.drinks.findIndex((a) => a.id === data.id);
if (index > -1) {
this.drinks[index] = new Drink(data);
const drink = this.drinks.find((a) => a.id === data.id);
data.volumes.forEach((volume) => {
drink?.volumes.push(new DrinkPriceVolume(volume, drink));
});
}
})
.catch((err) => console.warn(err));
},
deleteDrink(drink: Drink) {

14
yarn.lock
View File

@ -1148,11 +1148,12 @@
"@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-192d79cc-4593-44cf-a564-bed08599d4bf-1616167953691/node_modules/@quasar/ui"
"@quasar/quasar-ui-qcalendar" "^4.0.0-alpha.1"
"@quasar/quasar-ui-qcalendar@link:deps/quasar-ui-qcalendar/ui":
version "0.0.0"
uid ""
"@quasar/quasar-ui-qcalendar@^4.0.0-alpha.1":
version "3.3.5"
resolved "https://registry.yarnpkg.com/@quasar/quasar-ui-qcalendar/-/quasar-ui-qcalendar-3.3.5.tgz#4fed965045a98fb5da6294acf1d1285dc9af8dc6"
integrity sha512-quNHMyPhxrATJ1pTpTYesLBc44C8vcbguk7ysjN68EKvEP3mn0HrSez28QeMKJqqUp3BZ8qD+TLEFVSmxhtRFA==
"@quasar/ssr-helpers@1.0.0":
version "1.0.0"
@ -10132,6 +10133,11 @@ vue-style-loader@4.1.2:
hash-sum "^1.0.2"
loader-utils "^1.0.2"
vue-typed-emit@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/vue-typed-emit/-/vue-typed-emit-1.1.0.tgz#32bc2519dc87d068d2657c8f14fedafabc7e535d"
integrity sha512-dfR6m9yJydUk3jHpdbwGuF3CvzL+jLO/L2douk00MJDEMLXcY5Ald/cozV8JRgQ/0hJR85m76G0Lyr04DTGl0g==
vue@3.0.6:
version "3.0.6"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.6.tgz#2c16ed4bb66f16d6c6f6eaa3b7d5835a76598049"