[pricelist] save and load pictures

src/plugins/pricelist/components/CalculationTable.vue

@@ -59,6 +59,25 @@
             @click="deleteDrink(drinks_props.row)"
           />
         </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">
           {{ drinks_props.row.name }}
           <q-popup-edit
@@ -259,12 +278,20 @@
 </template>
 
 <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 { useMainStore } from 'src/store';
 import { Drink, usePricelistStore } from 'src/plugins/pricelist/store';
 import MinPriceSetting from 'src/plugins/pricelist/components/MinPriceSetting.vue';
 import NewDrink from 'src/plugins/pricelist/components/CalculationTable/NewDrink.vue';
+import { Notify } from 'quasar';
 
 function sort(a: string | number, b: string | number) {
   if (a > b) return 1;
@@ -277,6 +304,7 @@ export default defineComponent({
   setup() {
     const mainStore = useMainStore();
     const store = usePricelistStore();
+    const root = getCurrentInstance()?.proxy;
 
     onBeforeMount(() => {
       store.getPriceCalcColumn(user);
@@ -285,6 +313,10 @@ export default defineComponent({
     const user = mainStore.currentUser.userid;
 
     const columns = [
+      {
+        name: 'picture',
+        label: 'Bild',
+      },
       {
         name: 'name',
         label: 'Getränkename',
@@ -401,6 +433,35 @@ export default defineComponent({
 
     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 {
       drinks: computed(() => store.drinks),
       pagination,
@@ -412,6 +473,8 @@ export default defineComponent({
       updateDrink,
       deleteDrink,
       showNewDrink,
+      drinkPic,
+      savePicture,
       console,
     };
   },

src/plugins/pricelist/store.ts

@@ -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',
+        },
+      });
+    },
   },
 });