[pricelist] add picture and visiblity for user pricelist

This commit is contained in:
Tim Gröger 2021-03-28 13:40:41 +02:00
parent f58e0c382c
commit 59d6023462
4 changed files with 84 additions and 30 deletions

View File

@ -60,13 +60,16 @@
/>
</q-td>
<q-td key="picture" :props="drinks_props" style="min-width: 256px">
<q-img
loading='lazy'
:src="drinks_props.row.uuid ? `/api/pricelist/picture/${drinks_props.row.uuid}?size=256`: 'no-image.svg'"
placeholder-src='no-image.svg'
loading="lazy"
:src="
drinks_props.row.uuid
? `/api/pricelist/picture/${drinks_props.row.uuid}?size=256`
: 'no-image.svg'
"
placeholder-src="no-image.svg"
>
<template v-slot:error>
<template #error>
<div class="absolute-full flex flex-center bg-negative text-white">
Cannot load image
</div>
@ -297,14 +300,7 @@
</template>
<script lang="ts">
import {
defineComponent,
onBeforeMount,
ComputedRef,
computed,
ref,
getCurrentInstance,
} from 'vue';
import { defineComponent, onBeforeMount, ComputedRef, computed, ref } from 'vue';
import DrinkPriceVolumesTable from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue';
import { useMainStore } from 'src/store';
import { Drink, usePricelistStore } from 'src/plugins/pricelist/store';
@ -317,13 +313,13 @@ function sort(a: string | number, b: string | number) {
if (b > a) return -1;
return 0;
}
export default defineComponent({
name: 'CalculationTable',
components: { MinPriceSetting, DrinkPriceVolumesTable, NewDrink },
setup() {
const mainStore = useMainStore();
const store = usePricelistStore();
const root = getCurrentInstance()?.proxy;
onBeforeMount(() => {
store.getPriceCalcColumn(user);
@ -446,6 +442,7 @@ export default defineComponent({
function updateDrink(drink: Drink) {
void store.updateDrink(drink);
}
function deleteDrink(drink: Drink) {
store.deleteDrink(drink);
}
@ -465,21 +462,20 @@ export default defineComponent({
});
drinkPic.value = undefined;
}
function savePicture(drink: Drink) {
console.log('hier bin ich!!!', drinkPic.value);
if (drinkPic.value && drinkPic.value instanceof File) {
store
.upload_drink_picture(drink, drinkPic.value)
.catch((response: Response) => {
store.upload_drink_picture(drink, drinkPic.value).catch((response: Response) => {
if (response && response.status == 400) {
onPictureRejected();
}
})
});
}
}
function deletePicture(drink: Drink) {
void store.delete_drink_picture(drink)
void store.delete_drink_picture(drink);
}
return {

View File

@ -83,7 +83,7 @@ export default defineComponent({
tags: [],
type: undefined,
volumes: [],
uuid: ''
uuid: '',
};
const calc_price_pro_volume = computed(

View File

@ -1,6 +1,27 @@
<template>
<div>
<q-table title="Getränke" :columns="columns_drinks" :rows="drinks" row-key="name">
<q-table
title="Getränke"
:columns="columns_drinks"
:rows="drinks"
row-key="name"
:visible-columns="visibleColumn"
>
<template #top-right>
<q-select
v-model="visibleColumn"
multiple
filled
dense
options-dense
display-value="Sichtbarkeit"
emit-value
map-options
:options="[...columns_drinks, ...columns_volumes, ...columns_prices]"
option-value="name"
options-cover
/>
</template>
<template #body-cell-volumes="props">
<q-td :props="props">
<q-table
@ -30,12 +51,32 @@
</q-table>
</q-td>
</template>
<template #body-cell-picture="drinks_props">
<q-td :props="drinks_props" style="min-width: 256px">
<q-img
loading="lazy"
:src="
drinks_props.row.uuid
? `/api/pricelist/picture/${drinks_props.row.uuid}?size=256`
: 'no-image.svg'
"
placeholder-src="no-image.svg"
>
<template #error>
<div class="absolute-full flex flex-center bg-negative text-white">
Cannot load image
</div>
</template>
</q-img>
</q-td>
</template>
</q-table>
</div>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, computed } from 'vue';
import { usePricelistStore } from '../store';
import { useMainStore } from 'src/store';
export default defineComponent({
name: 'Pricelist',
@ -51,6 +92,9 @@ export default defineComponent({
},
},
setup() {
onBeforeMount(() => {
store.getPriceCalcColumn(user);
});
const store = usePricelistStore();
onBeforeMount(() => {
@ -58,6 +102,10 @@ export default defineComponent({
});
const drinks = computed(() => store.drinks);
const columns_drinks = [
{
name: 'picture',
label: 'Bild',
},
{
name: 'name',
label: 'Getränk',
@ -103,7 +151,15 @@ export default defineComponent({
field: 'public',
},
];
return { columns_drinks, columns_volumes, columns_prices, drinks };
const visibleColumn = computed({
get: () => store.pricecalc_columns,
set: (val) => {
store.updatePriceCalcColumn(user, val);
},
});
const mainStore = useMainStore();
const user = mainStore.currentUser.userid;
return { columns_drinks, columns_volumes, columns_prices, drinks, visibleColumn };
},
});
</script>

View File

@ -6,11 +6,13 @@ import { computed, ComputedRef, WritableComputedRef } from 'vue';
interface MinPrice extends Omit<FG.MinPrices, 'price'> {
price?: WritableComputedRef<number>;
}
interface DrinkPriceVolume extends Omit<Omit<FG.DrinkPriceVolume, 'volume'>, 'min_prices'> {
_volume: number;
volume?: WritableComputedRef<number>;
min_prices: MinPrice[];
}
interface Drink extends Omit<Omit<FG.Drink, 'cost_price_pro_volume'>, 'volumes'> {
volumes: DrinkPriceVolume[];
cost_price_pro_volume: WritableComputedRef<number | undefined>;
@ -55,7 +57,7 @@ class Drink {
cost_price_package_netto,
tags,
type,
uuid
uuid,
}: FG.Drink) {
this.id = id;
this.article_id = article_id;
@ -162,7 +164,7 @@ export const usePricelistStore = defineStore({
this.drinks.push(_drink);
});
this.create_min_prices();
console.log(this.drinks)
console.log(this.drinks);
},
sortPrices(volume: DrinkPriceVolume) {
volume.prices.sort((a, b) => {
@ -311,11 +313,11 @@ export const usePricelistStore = defineStore({
'Content-Type': 'multipart/form-data',
},
});
drink.uuid = data.uuid
drink.uuid = data.uuid;
},
async delete_drink_picture(drink: Drink) {
await api.delete(`pricelist/drinks/${drink.id}/picture`);
drink.uuid = ''
drink.uuid = '';
},
},
});