Work with new Image Controller

src/api.d.ts

@@ -7,7 +7,7 @@ declare namespace FG {
     volume?: number;
     cost_per_volume?: number;
     cost_per_package?: number;
-    uuid: string;
+    has_image: boolean;
     receipt?: Array<string>;
     tags?: Array<Tag>;
     type?: DrinkType;

src/components/CalculationTable.vue

@@ -38,7 +38,7 @@
     <template #item="props">
       <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
         <q-card>
-          <q-img v-if="showPic" style="max-height: 256px" :src="image(props.row.uuid)">
+          <q-img v-if="showPic" style="max-height: 256px" :src="image(props.row.id)">
             <div
               v-if="!public && !nodetails && editable"
               class="absolute-top-right justify-end"
@@ -496,7 +496,7 @@ export default defineComponent({
       tags: [],
       type: undefined,
       volumes: [],
-      uuid: '',
+      has_image: false,
     };
 
     function newDrink() {
@@ -555,9 +555,9 @@ export default defineComponent({
       return false;
     }
 
-    function image(uuid: string | undefined) {
-      if (uuid) {
-        return `${api.defaults.baseURL || ''}/pricelist/picture/${uuid}?size=256`;
+    function image(id: number | undefined) {
+      if (id) {
+        return `${api.defaults.baseURL || ''}/pricelist/drinks/${id}/picture?thumbnail`;
       }
       return 'no-image.svg';
     }

src/components/DrinkModify.vue

@@ -174,7 +174,6 @@ export default defineComponent({
   setup(props, { emit }) {
     onBeforeMount(() => {
       //edit_drink.value = <Drink>JSON.parse(JSON.stringify(props.drink));
-      edit_drink.value = clone(props.drink);
       edit_volumes.value = clone(props.drink.volumes);
     });
 
@@ -188,7 +187,7 @@ export default defineComponent({
       ingredients: [],
     });
 
-    const edit_drink = ref<Drink>();
+    const edit_drink = ref<Drink>(clone(props.drink));
     const edit_volumes = ref<Array<DrinkPriceVolume>>([]);
     function save() {
       (<Drink>edit_drink.value).volumes = edit_volumes.value;
@@ -250,7 +249,7 @@ export default defineComponent({
       imgsrc.value = undefined;
       drinkPic.value = undefined;
       if (edit_drink.value) {
-        edit_drink.value.uuid = '';
+        edit_drink.value.has_image = false;
       }
     }
 
@@ -267,14 +266,15 @@ export default defineComponent({
     }
 
     const image = computed(() => {
+      console.log(imgsrc.value, deletePic.value, edit_drink.value)
       if (deletePic.value) {
         return 'no-image.svg';
       }
       if (imgsrc.value) {
         return <string>imgsrc.value;
       }
-      if (edit_drink.value?.uuid) {
-        return `${api.defaults.baseURL || ''}/pricelist/picture/${edit_drink.value.uuid}?size=256`;
+      if (edit_drink.value?.has_image) {
+        return `${api.defaults.baseURL || ''}/pricelist/drinks/${edit_drink.value.id}/picture?thumbnail`;
       }
       return 'no-image.svg';
     });

src/pages/Receipts.vue

@@ -21,7 +21,7 @@
           <q-img
             style="max-height: 256px"
             loading="lazy"
-            :src="image(props.row.uuid)"
+            :src="image(props.row.id)"
             placeholder-src="no-image.svg"
           >
             <div class="absolute-bottom-right justify-end">
@@ -166,9 +166,9 @@ export default defineComponent({
 
     const search = ref<Search>({ value: '', key: '', label: '' });
     const search_keys = computed(() => columns_drinks.filter((column) => column.filterable));
-    function image(uuid: string | undefined) {
-      if (uuid) {
-        return `${api.defaults.baseURL || ''}/pricelist/picture/${uuid}?size=256`;
+    function image(id: number) {
+      if (id) {
+        return `${api.defaults.baseURL || ''}/pricelist/drinks/${id}/picture?thumbnail`;
       }
       return 'no-image.svg';
     }

src/store.ts

@@ -46,7 +46,7 @@ class Drink {
     cost_per_package,
     tags,
     type,
-    uuid,
+    has_image,
     receipt,
   }: FG.Drink) {
     this.id = id;
@@ -60,7 +60,7 @@ class Drink {
     this.tags = tags;
     this.type = type;
     this.volumes = [];
-    this.uuid = uuid;
+    this.has_image = has_image;
     this.receipt = receipt || [];
   }
 }
@@ -304,12 +304,12 @@ export const usePricelistStore = defineStore({
       });
       const _drink = this.drinks.find((a) => a.id === drink.id);
       if (_drink) {
-        _drink.uuid = data.uuid;
+        _drink.has_image = data.has_image;
       }
     },
     async delete_drink_picture(drink: Drink) {
       await api.delete(`pricelist/drinks/${drink.id}/picture`);
-      drink.uuid = '';
+      drink.has_image = false;
     },
     async getTags() {
       const { data } = await api.get<Array<FG.Tag>>('/pricelist/tags');