ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[pricelist][vue3] now it works

This commit is contained in:
Tim Gröger 2021-03-21 22:07:12 +01:00
parent 36bbc2dbf1
commit cd937f111c
8 changed files with 230 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,11 @@
</template>
<template #top-right>
<div class="row justify-end q-gutter-sm">
<q-btn label="Aufpreise">
<q-menu anchor="center middle" self="center middle">
<min-price-setting />
</q-menu>
</q-btn>
<q-btn label="neues Getränk" color="positive" icon-right="add">
<q-menu anchor="center middle" self="center middle">
<div class="q-pa-sm">
@ -113,44 +118,62 @@
<q-td key="name" :props="drinks_props">
{{ drinks_props.row.name }}
<q-popup-edit
v-slot="scope"
v-model="drinks_props.row.name"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateDrink(drinks_props.row)"
@update:modelValue="updateDrink(drinks_props.row)"
>
<q-input v-model="drinks_props.row.name" filled dense autofocus clearable />
<q-input
v-model="scope.value"
filled
dense
autofocus
clearable
@keyup.enter="scope.set"
/>
</q-popup-edit>
</q-td>
<q-td key="drink_type" :props="drinks_props">
{{ drinks_props.row.type.name }}
<q-popup-edit
v-slot="scope"
v-model="drinks_props.row.type"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateDrink(drinks_props.row)"
@update:modelValue="updateDrink(drinks_props.row)"
>
<q-select
v-model="drinks_props.row.type"
v-model="scope.value"
:options="drinkTypes"
option-label="name"
filled
dense
autofocus
@keyup.enter="scope.set"
/>
</q-popup-edit>
</q-td>
<q-td key="article_id" :props="drinks_props">
{{ drinks_props.row.article_id || 'o.A.' }}
<q-popup-edit
v-slot="scope"
v-model="drinks_props.row.article_id"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateDrink(drinks_props.row)"
@update:modelValue="updateDrink(drinks_props.row)"
>
<q-input v-model="drinks_props.row.article_id" filled dense autofocus clearable />
<q-input
v-model="scope.value"
filled
dense
autofocus
clearable
@keyup.enter="scope.set"
/>
</q-popup-edit>
</q-td>
<q-td key="volume_package" :props="drinks_props">
@ -161,14 +184,15 @@
volume.ingredients.some((ingredient) => ingredient.drink_ingredient)
)
"
v-slot="scope"
v-model.number="drinks_props.row.volume"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateDrink(drinks_props.row)"
@update:modelValue="updateDrink(drinks_props.row)"
>
<q-input
v-model.number="drinks_props.row.volume"
v-model.number="scope.value"
filled
dense
autofocus
@ -177,6 +201,7 @@
step="0.01"
min="0"
suffix="L"
@keyup.enter="scope.set"
/>
</q-popup-edit>
</q-td>
@ -188,26 +213,28 @@
volume.ingredients.some((ingredient) => ingredient.drink_ingredient)
)
"
v-slot="scope"
v-model="drinks_props.row.package_size"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateDrink(drinks_props.row)"
@update:modelValue="updateDrink(drinks_props.row)"
>
<q-input
v-model.number="drinks_props.row.package_size"
v-model.number="scope.value"
filled
dense
autofocus
type="number"
min="0"
@keyup.enter="scope.set"
/>
</q-popup-edit>
</q-td>
<q-td key="cost_price_package_netto" :props="drinks_props">
{{
drinks_props.row.cost_price_package_netto
? `${drinks_props.row.cost_price_package_netto}€`
? `${drinks_props.row.cost_price_package_netto.toFixed(2)}€`
: 'o.A.'
}}
<q-popup-edit
@ -216,14 +243,15 @@
volume.ingredients.some((ingredient) => ingredient.drink_ingredient)
)
"
v-slot="scope"
v-model="drinks_props.row.cost_price_package_netto"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateDrink(drinks_props.row)"
@update:modelValue="updateDrink(drinks_props.row)"
>
<q-input
v-model.number="drinks_props.row.cost_price_package_netto"
v-model.number="scope.value"
filled
dense
autofocus
@ -231,7 +259,7 @@
step="0.01"
min="0"
suffix="€"
@change="console.log(drinks_props.row)"
@keyup.enter="scope.set"
/>
</q-popup-edit>
</q-td>
@ -252,14 +280,15 @@
volume.ingredients.some((ingredient) => ingredient.drink_ingredient)
)
"
v-slot="scope"
v-model="drinks_props.row.cost_price_pro_volume"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateDrink(drinks_props.row)"
@update:modelValue="updateDrink(drinks_props.row)"
>
<q-input
v-model.number="drinks_props.row.cost_price_pro_volume"
v-model.number="scope.value"
filled
dense
autofocus
@ -267,11 +296,18 @@
min="0"
step="0.1"
suffix="€"
@keyup.enter="scope.set"
/>
</q-popup-edit>
</q-td>
<q-td key="volumes" :props="drinks_props">
<drink-price-volumes-table :rows='drinks_props.row.volumes' :visible-columns='visibleColumn' :columns='column_calc' :drink='drinks_props.row' @updateDrink="updateDrink(drinks_props.row)"/>
<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>
@ -281,9 +317,9 @@
<script lang="ts">
import { defineComponent, onBeforeMount, ref, ComputedRef, computed } from 'vue';
import DrinkPriceVolumesTable from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue';
import { useMainStore } from 'src/store';
import { useMainStore } from 'src/store';
import { Drink, usePricelistStore } from 'src/plugins/pricelist/store';
import MinPriceSetting from 'src/plugins/pricelist/components/MinPriceSetting.vue';
function sort(a: string | number, b: string | number) {
if (a > b) return 1;
@ -292,7 +328,7 @@ function sort(a: string | number, b: string | number) {
}
export default defineComponent({
name: 'CalculationTable',
components: {DrinkPriceVolumesTable},
components: { MinPriceSetting, DrinkPriceVolumesTable },
setup() {
const mainStore = useMainStore();
const store = usePricelistStore();
@ -449,14 +485,14 @@ export default defineComponent({
const drinkTypes = computed(() => store.drinkTypes);
function addDrink() {
store.setDrink(newDrink.value);
void store.setDrink(newDrink.value);
cancelAddDrink();
}
function cancelAddDrink() {
setTimeout(() => (newDrink.value = emptyDrink), 200);
}
function updateDrink(drink: Drink) {
store.updateDrink(drink);
void store.updateDrink(drink);
}
function deleteDrink(drink: Drink) {
store.deleteDrink(drink);

2
src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue
View File

@ -34,7 +34,7 @@ export default defineComponent({
name: 'NewVolume',
props: {
pricePerVolume: {
type: Number,
type: undefined,
required: true,
},
},

4
src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue
View File

@ -89,7 +89,7 @@
<template #bottom>
<div class="full-width row justify-end">
<new-volume
:cost_price_pro_volume="drink.cost_price_pro_volume"
:price-per-volume="drink.cost_price_pro_volume"
@addVolume="addVolume($event, drink)"
/>
</div>
@ -97,7 +97,7 @@
<template #no-data>
<div class="full-width row justify-end">
<new-volume
:cost_price_pro_volume="drink.cost_price_pro_volume"
:price-per-volume="drink.cost_price_pro_volume"
@addVolume="addVolume($event, drink)"
/>
</div>

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

@ -16,14 +16,15 @@
<q-td key="price" :props="prices_props">
{{ prices_props.row.price.toFixed(2) }}€
<q-popup-edit
v-slot="scope"
v-model="prices_props.row.price"
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateDrink"
@update:modelValue="updateDrink"
>
<q-input
v-model.number="prices_props.row.price"
v-model.number="scope.value"
type="number"
label="Preis"
dense
@ -32,19 +33,28 @@
min="0"
step="0.1"
suffix="€"
@keyup.enter="scope.set"
/> </q-popup-edit
></q-td>
<q-td key="description" :props="prices_props">
{{ prices_props.row.description }}
<q-popup-edit
v-slot="scope"
v-model="prices_props.row.description"
buttons
label="Beschreibung"
label-cancel="Abbrechen"
label-set="Speichern"
@save="updateDrink"
@update:modelValue="updateDrink"
>
<q-input v-model="prices_props.row.description" dense autofocus filled clearable />
<q-input
v-model="scope.value"
dense
autofocus
filled
clearable
@keyup.enter="scope.set"
/>
</q-popup-edit>
</q-td>
<q-td key="public" :props="prices_props">

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

@ -75,7 +75,6 @@ export default defineComponent({
id: -1,
};
const newExtraIngredient = ref<FG.ExtraIngredient>(emptyExtraIngredient);
/*const newDrinkTypeName = ref<string>('');*/
const edittype = ref(false);
const actualExtraIngredient = ref(emptyExtraIngredient);
@ -105,7 +104,8 @@ export default defineComponent({
async function addExtraIngredient() {
await store.setExtraIngredient((<ComputedRef>newExtraIngredient).value);
newExtraIngredient.value = emptyExtraIngredient;
newExtraIngredient.value = Object.assign({}, emptyExtraIngredient);
discardChanges();
}
function editType(extraIngredient: FG.ExtraIngredient) {
@ -120,7 +120,8 @@ export default defineComponent({
function discardChanges() {
actualExtraIngredient.value = emptyExtraIngredient;
newExtraIngredient.value = emptyExtraIngredient;
newExtraIngredient.value.name = '';
newExtraIngredient.value.price = 0;
edittype.value = false;
}

55
src/plugins/pricelist/components/MinPriceSetting.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<q-list>
<div v-for="(min_price, index) in min_prices" :key="index">
<q-item>
<q-item-section>{{ min_price }}%</q-item-section>
<q-btn
round
icon="mdi-delete"
size="sm"
color="negative"
@click="delete_min_price(min_price)"
/>
</q-item>
<q-separator />
</div>
</q-list>
<q-input v-model.number="new_min_price" class="q-pa-sm" type="number" suffix="%" filled dense />
<q-btn class="full-width" label="speichern" @click="save_min_prices"></q-btn>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { usePricelistStore } from 'src/plugins/pricelist/store';
export default defineComponent({
name: 'MinPriceSetting',
setup() {
const store = usePricelistStore();
const min_prices = computed(() => store.min_prices);
const new_min_price = ref<number>();
function save_min_prices() {
const index = min_prices.value.findIndex((a) => a === new_min_price.value);
if (index < 0) {
min_prices.value.push(<number>new_min_price.value);
void store.set_min_prices();
new_min_price.value = undefined;
}
}
function delete_min_price(min_price: number) {
const index = min_prices.value.findIndex((a) => a === min_price);
if (index > -1) {
min_prices.value.splice(index, 1);
void store.set_min_prices();
}
}
return {
min_prices,
new_min_price,
save_min_prices,
delete_min_price,
};
},
});
</script>
<style scoped></style>

4
src/plugins/pricelist/pages/Settings.vue
View File

@ -55,7 +55,6 @@ import { usePricelistStore } from 'src/plugins/pricelist/store';
export default defineComponent({
name: 'Settings',
//components: { DrinkTypes, ExtraIngredients, CalculationTable },
components: { ExtraIngredients, DrinkTypes, CalculationTable },
setup() {
interface Tab {
@ -71,7 +70,8 @@ export default defineComponent({
})
.catch((err) => console.log(err));
void store.getDrinkTypes();
store.getDrinks();
void store.getDrinks();
void store.get_min_prices();
});
const drawer = ref<boolean>(false);

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

@ -1,7 +1,7 @@
import { api } from 'src/boot/axios';
import { defineStore } from 'pinia';
import { AxiosResponse } from 'axios';
import { computed, WritableComputedRef } from 'vue';
import { computed, ComputedRef, WritableComputedRef } from 'vue';
interface MinPrice extends Omit<FG.MinPrices, 'price'> {
price?: WritableComputedRef<number>;
@ -18,28 +18,12 @@ interface Drink extends Omit<Omit<FG.Drink, 'cost_price_pro_volume'>, 'volumes'>
}
class DrinkPriceVolume implements DrinkPriceVolume {
constructor(
{ id, volume, /*min_prices,*/ prices, ingredients }: FG.DrinkPriceVolume,
drink: Drink
) {
constructor({ id, volume, prices, ingredients }: FG.DrinkPriceVolume) {
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.min_prices = [];
this.volume = computed<number>({
get: () => {
if (this.ingredients.some((ingredient) => !!ingredient.drink_ingredient)) {
@ -71,8 +55,7 @@ class Drink {
cost_price_package_netto,
tags,
type,
}: /*volumes,*/
FG.Drink) {
}: FG.Drink) {
this.id = id;
this.article_id = article_id;
this.package_size = package_size;
@ -97,13 +80,13 @@ class Drink {
this.tags = tags;
this.type = type;
this.volumes = [];
//volumes.forEach(volume => {
// this.volumes.push(new DrinkPriceVolume(volume, this));
//});
}
}
function create_min_prices(drink: Drink, volume: DrinkPriceVolume, percentage: number) {
if (drink.name == 'Elbhang Rot') {
console.log(drink.name, drink.cost_price_pro_volume, volume.volume, drink, volume);
}
if (drink.cost_price_pro_volume?.value) {
if (volume.ingredients.every((ingredient) => !!ingredient.drink_ingredient)) {
return computed<number>(() => {
@ -126,6 +109,7 @@ function create_min_prices(drink: Drink, volume: DrinkPriceVolume, percentage: n
} else {
return computed<number>(() => {
let retVal = 0;
let extraIngredientPrice = 0;
volume.ingredients.forEach((ingredient) => {
if (ingredient.drink_ingredient) {
const _drink = usePricelistStore().drinks.find(
@ -135,11 +119,10 @@ function create_min_prices(drink: Drink, volume: DrinkPriceVolume, percentage: n
ingredient.drink_ingredient.volume * (_drink?.cost_price_pro_volume?.value || 0);
}
if (ingredient.extra_ingredient) {
retVal += ingredient.extra_ingredient.price;
extraIngredientPrice += ingredient.extra_ingredient.price;
}
});
console.log(volume);
return (retVal * percentage) / 100;
return (retVal * percentage) / 100 + extraIngredientPrice;
});
}
}
@ -152,6 +135,7 @@ export const usePricelistStore = defineStore({
drinks: [] as Array<Drink>,
extraIngredients: [] as Array<FG.ExtraIngredient>,
pricecalc_columns: [] as Array<string>,
min_prices: [] as Array<number>,
}),
actions: {
@ -208,23 +192,18 @@ export const usePricelistStore = defineStore({
this.extraIngredients.splice(index, 1);
}
},
getDrinks() {
api
.get('pricelist/drinks')
.then((response: AxiosResponse<FG.Drink[]>) => {
this.drinks = [];
response.data.forEach((drink) => {
this.drinks.push(new Drink(drink));
});
this.drinks.forEach((drink) => {
const _drink = response.data.find((a) => a.id === drink.id);
_drink?.volumes.forEach((volume) => {
drink.volumes.push(new DrinkPriceVolume(volume, drink));
});
});
console.log(this.drinks);
})
.catch((err) => console.warn(err));
async getDrinks() {
const { data } = await api.get<Array<FG.Drink>>('pricelist/drinks');
this.drinks = [];
data.forEach((drink) => {
const _drink = new Drink(drink);
drink.volumes.forEach((volume) => {
const _volume = new DrinkPriceVolume(volume);
_drink.volumes.push(_volume);
});
this.drinks.push(_drink);
});
this.create_min_prices();
},
sortPrices(volume: DrinkPriceVolume) {
volume.prices.sort((a, b) => {
@ -266,35 +245,28 @@ export const usePricelistStore = defineStore({
})
.catch((err) => console.warn(err));
},
setDrink(drink: FG.Drink) {
api
.post('pricelist/drinks', drink)
.then((response: AxiosResponse<FG.Drink>) => {
this.drinks.push(new Drink(response.data));
const drink = this.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));
async setDrink(drink: FG.Drink) {
const { data } = await api.post<FG.Drink>('pricelist/drinks', drink);
const _drink = new Drink(data);
data.volumes.forEach((volume) => {
const _volume = new DrinkPriceVolume(volume);
_drink.volumes.push(_volume);
});
this.drinks.push(_drink);
this.create_min_prices();
},
updateDrink(drink: Drink) {
api
.put(`pricelist/drinks/${drink.id}`, {
...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));
async updateDrink(drink: Drink) {
const { data } = await api.put<FG.Drink>(`pricelist/drinks/${drink.id}`, drink);
const index = this.drinks.findIndex((a) => a.id === data.id);
if (index > -1) {
const _drink = new Drink(data);
data.volumes.forEach((volume) => {
const _volume = new DrinkPriceVolume(volume);
_drink.volumes.push(_volume);
});
this.drinks[index] = _drink;
}
this.create_min_prices();
},
deleteDrink(drink: Drink) {
api
@ -325,6 +297,56 @@ export const usePricelistStore = defineStore({
})
.catch((err) => console.log(err));
},
async get_min_prices() {
const { data } = await api.get<Array<number>>('pricelist/settings/min_prices');
this.min_prices = data;
},
async set_min_prices() {
await api.post<Array<number>>('pricelist/settings/min_prices', this.min_prices);
this.create_min_prices();
},
create_min_prices() {
this.drinks.forEach((drink) => {
drink.volumes.forEach((volume) => {
if (drink.name == 'Elbhang Rot2') {
console.log(drink.name, drink.cost_price_pro_volume, volume, drink);
}
volume.min_prices = [];
this.min_prices.forEach((min_price) => {
let computedMinPrice: ComputedRef;
if (drink.cost_price_pro_volume) {
computedMinPrice = computed<number>(
() =>
(<number>(<unknown>drink.cost_price_pro_volume) *
<number>(<unknown>volume.volume) *
min_price) /
100
);
} else {
computedMinPrice = computed<number>(() => {
let retVal = 0;
let extraIngredientPrice = 0;
volume.ingredients.forEach((ingredient) => {
if (ingredient.drink_ingredient) {
const _drink = usePricelistStore().drinks.find(
(a) => a.id === ingredient.drink_ingredient?.drink_ingredient_id
);
retVal +=
ingredient.drink_ingredient.volume *
<number>(<unknown>_drink?.cost_price_pro_volume);
}
if (ingredient.extra_ingredient) {
extraIngredientPrice += ingredient.extra_ingredient.price;
}
});
return (retVal * min_price) / 100 + extraIngredientPrice;
});
}
volume.min_prices.push({ percentage: min_price, price: computedMinPrice });
});
});
});
},
},
});