[pricelist] save and load pictures

This commit is contained in:
Tim Gröger 2021-03-22 23:18:22 +01:00
parent e0046aa7d2
commit 827fb1aadd
2 changed files with 73 additions and 1 deletions

View File

@ -59,6 +59,25 @@
@click="deleteDrink(drinks_props.row)" @click="deleteDrink(drinks_props.row)"
/> />
</q-td> </q-td>
<q-td key="picture" :props="drinks_props" style="width: 128px">
<q-img
:src="`http://localhost/api/pricelist/drinks/${drinks_props.row.id}/picture?size=128`"
/>
<q-popup-edit
v-slot="scope"
v-model="drinkPic"
buttons
label-set="Speichern"
label-cancel="Abbrechen"
@update:modelValue="savePicture(drinks_props.row)"
>
<q-file filled v-model="scope.value">
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</q-popup-edit>
</q-td>
<q-td key="name" :props="drinks_props"> <q-td key="name" :props="drinks_props">
{{ drinks_props.row.name }} {{ drinks_props.row.name }}
<q-popup-edit <q-popup-edit
@ -259,12 +278,20 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, onBeforeMount, ComputedRef, computed, ref } from 'vue'; import {
defineComponent,
onBeforeMount,
ComputedRef,
computed,
ref,
getCurrentInstance,
} from 'vue';
import DrinkPriceVolumesTable from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.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 { Drink, usePricelistStore } from 'src/plugins/pricelist/store';
import MinPriceSetting from 'src/plugins/pricelist/components/MinPriceSetting.vue'; import MinPriceSetting from 'src/plugins/pricelist/components/MinPriceSetting.vue';
import NewDrink from 'src/plugins/pricelist/components/CalculationTable/NewDrink.vue'; import NewDrink from 'src/plugins/pricelist/components/CalculationTable/NewDrink.vue';
import { Notify } from 'quasar';
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;
@ -277,6 +304,7 @@ export default defineComponent({
setup() { setup() {
const mainStore = useMainStore(); const mainStore = useMainStore();
const store = usePricelistStore(); const store = usePricelistStore();
const root = getCurrentInstance()?.proxy;
onBeforeMount(() => { onBeforeMount(() => {
store.getPriceCalcColumn(user); store.getPriceCalcColumn(user);
@ -285,6 +313,10 @@ export default defineComponent({
const user = mainStore.currentUser.userid; const user = mainStore.currentUser.userid;
const columns = [ const columns = [
{
name: 'picture',
label: 'Bild',
},
{ {
name: 'name', name: 'name',
label: 'Getränkename', label: 'Getränkename',
@ -401,6 +433,35 @@ export default defineComponent({
const showNewDrink = ref(false); const showNewDrink = ref(false);
const drinkPic = ref<File>();
function onPictureRejected() {
Notify.create({
group: false,
type: 'negative',
message: 'Datei zu groß oder keine gültige Bilddatei.',
timeout: 10000,
progress: true,
actions: [{ icon: 'mdi-close', color: 'white' }],
});
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)
.then(() => {
root?.$forceUpdate();
})
.catch((response: Response) => {
if (response && response.status == 400) {
onPictureRejected();
}
});
}
return { return {
drinks: computed(() => store.drinks), drinks: computed(() => store.drinks),
pagination, pagination,
@ -412,6 +473,8 @@ export default defineComponent({
updateDrink, updateDrink,
deleteDrink, deleteDrink,
showNewDrink, showNewDrink,
drinkPic,
savePicture,
console, console,
}; };
}, },

View File

@ -300,6 +300,15 @@ export const usePricelistStore = defineStore({
}); });
}); });
}, },
async upload_drink_picture(drink: Drink, file: File) {
const formData = new FormData();
formData.append('file', file);
await api.post(`pricelist/drinks/${drink.id}/picture`, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
},
}, },
}); });