[CI] Add woodpecker-ci

drink_ingredients has name and cost_per_volume

.eslintrc.js

@@ -17,11 +17,11 @@ module.exports = {
     project: resolve(__dirname, './tsconfig.json'),
     tsconfigRootDir: __dirname,
     ecmaVersion: 2019, // Allows for the parsing of modern ECMAScript features
-    sourceType: 'module' // Allows for the use of imports
+    sourceType: 'module', // Allows for the use of imports
   },
 
   env: {
-    browser: true
+    browser: true,
   },
 
   // Rules order is important, please avoid shuffling them
@@ -44,7 +44,7 @@ module.exports = {
 
     // https://github.com/prettier/eslint-config-prettier#installation
     // usage with Prettier, provided by 'eslint-config-prettier'.
-    'prettier', //'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
   ],
 
   plugins: [
@@ -54,10 +54,6 @@ module.exports = {
     // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
     // required to lint *.vue files
     'vue',
-
-    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
-    // Prettier has not been included as plugin to avoid performance impact
-    // add it as an extension for your IDE
   ],
 
   // add your custom rules here
@@ -65,11 +61,12 @@ module.exports = {
     'prefer-promise-reject-errors': 'off',
 
     // TypeScript
-    quotes: ['warn', 'single', { avoidEscape: true }],
+    quotes: ['error', 'single', { avoidEscape: true }],
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'vue/multi-word-component-names': 'off',
 
     // allow debugger during development only
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  }
-}
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+};

.gitignore

@@ -2,4 +2,5 @@ node_modules
 yarn-error.log
 # No need for sharing this
 yarn.lock
+.idea
 

.npmignore

@@ -0,0 +1 @@
+.woodpecker/

.woodpecker/.deploy.yml

@@ -0,0 +1,14 @@
+pipeline:
+  deploy:
+    when:
+      event: tag
+      tag: v*
+    image: node:lts-alpine
+    commands:
+      - echo "//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN" > .npmrc
+      - yarn publish --non-interactive
+    secrets: [ node_auth_token ]
+
+depends_on:
+  - lint
+

.woodpecker/.lint.yml

@@ -0,0 +1,9 @@
+pipeline:
+  lint:
+    when:
+      branch: [main, develop]
+    image: node:lts-alpine
+    commands:
+      - yarn install
+      - yarn lint
+

README.md

@@ -1,4 +1,5 @@
 # Flaschengeist `pricelist` fontend-plugin
+![status-badge](https://ci.os-sc.org/api/badges/Flaschengeist/flaschengeist-pricelist/status.svg)
 
 This package provides the [Flaschengeist](https://flaschengeist.dev/Flaschengeist/flaschengeist) frontend for the pricelist plugin (build and manage drinks, show pricelist and calculate prices).
 

package.json

@@ -1,6 +1,6 @@
 {
   "license": "MIT",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.5",
   "name": "@flaschengeist/pricelist",
   "author": "Tim Gröger <flaschengeist@wu5.de>",
   "homepage": "https://flaschengeist.dev/Flaschengeist",
@@ -15,34 +15,34 @@
   "main": "src/index.ts",
   "types": "src/api.d.ts",
   "scripts": {
-    "format": "prettier --config ./package.json  --write '{,!(node_modules)/**/}*.ts'",
+    "format": "prettier --config ./package.json  --write '{,!(node_modules)/**/}*.{ts,vue,js}'",
     "lint": "eslint --ext .js,.ts,.vue ./src"
   },
   "dependencies": {
-    "vuedraggable": "^4.0.1"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@flaschengeist/types": "^1.0.0-alpha.1",
-    "@quasar/app": "^3.0.0-beta.26",
-    "@typescript-eslint/eslint-plugin": "^4.24.0",
-    "@typescript-eslint/parser": "^4.24.0",
-    "axios": "^0.21.1",
-    "eslint": "^7.26.0",
+    "@flaschengeist/types": "^1.0.0-alpha.10",
+    "@quasar/app": "^3.2.4",
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
+    "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-vue": "^7.9.0",
-    "pinia": "^2.0.0-alpha.18",
-    "prettier": "^2.3.0",
-    "quasar": "^2.0.0-beta.18",
-    "typescript": "^4.2.4"
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.1.1",
+    "pinia": "^2.0.6",
+    "prettier": "^2.5.1",
+    "quasar": "^2.3.3",
+    "typescript": "^4.5.2"
   },
   "peerDependencies": {
-    "@flaschengeist/api": "^1.0.0-alpha.1",
-    "@flaschengeist/users": "^1.0.0-alpha.1"
+    "@flaschengeist/api": "^1.0.0-alpha.7",
+    "@flaschengeist/users": "^1.0.0-alpha.3"
   },
   "prettier": {
     "singleQuote": true,
     "semi": true,
-    "printWidth": 120,
+    "printWidth": 100,
     "arrowParens": "always"
   }
 }

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;
@@ -17,15 +17,19 @@ declare namespace FG {
     id: number;
     volume: number;
     ingredient_id: number;
+    cost_per_volume: number;
+    name: string;
   }
   interface DrinkPrice {
     id: number;
     price: number;
+    volume?: DrinkPriceVolume;
     public: boolean;
     description?: string;
   }
   interface DrinkPriceVolume {
     id: number;
+    drink?: Drink;
     volume: number;
     min_prices: Array<MinPrices>;
     prices: Array<DrinkPrice>;

src/components/BuildManual/BuildManualVolumePart.vue

@@ -5,7 +5,8 @@
       <div v-if="ingredient.drink_ingredient">
         <div class="full-width row q-gutter-sm q-py-sm">
           <div class="col">
-            {{ name(ingredient.drink_ingredient?.ingredient_id) }}
+            <!--{{ name(ingredient.drink_ingredient?.ingredient_id) }}-->
+            {{ ingredient.drink_ingredient?.name }}
           </div>
           <div class="col">
             {{

src/components/CalculationTable.vue

@@ -5,15 +5,20 @@
     :columns="columns"
     :rows="drinks"
     dense
-    :filter="search"
-    :filter-method="filter"
+    row-key="id"
     grid
-    :rows-per-page-options="[0]"
+    :loading="loading"
+    :filter="search"
+    @request="onRequest"
   >
+    <!--
+    :filter-method="filter"
+  -->
     <template #top-right>
       <div class="row justify-end q-gutter-sm">
         <search-input v-model="search" :keys="search_keys" />
         <slot></slot>
+        <q-toggle v-model="showPic" icon="mdi-camera-burst" />
         <q-btn v-if="!public && !nodetails" label="Aufpreise">
           <q-menu anchor="center middle" self="center middle">
             <min-price-setting />
@@ -33,7 +38,62 @@
     <template #item="props">
       <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
         <q-card>
-          <q-img style="max-height: 256px" :src="image(props.row.uuid)">
+          <q-img
+            v-if="showPic && props.row.has_image"
+            style="max-height: 256px"
+            :src="image(props.row.id)"
+            fit="contain"
+          >
+            <div
+              v-if="!public && !nodetails && editable"
+              class="absolute-top-right justify-end"
+              style="background-color: transparent"
+            >
+              <q-btn
+                round
+                icon="mdi-pencil"
+                style="background-color: rgba(0, 0, 0, 0.5)"
+                @click="editDrink = props.row"
+              />
+            </div>
+            <div class="absolute-bottom-right justify-end">
+              <div class="text-subtitle1 text-right">
+                {{ props.row.name }}
+              </div>
+              <div class="text-caption text-right">
+                {{ props.row.type.name }}
+              </div>
+            </div>
+            <template #error>
+              <q-img class="bg-white" style="max-height: 256px" src="no-image.svg" />
+              <div
+                v-if="!public && !nodetails && editable"
+                class="absolute-top-right justify-end"
+                style="background-color: transparent"
+              >
+                <q-btn
+                  round
+                  icon="mdi-pencil"
+                  style="background-color: rgba(0, 0, 0, 0.5)"
+                  @click="editDrink = props.row"
+                />
+              </div>
+              <div class="absolute-bottom-right justify-end">
+                <div class="text-subtitle1 text-right">
+                  {{ props.row.name }}
+                </div>
+                <div class="text-caption text-right">
+                  {{ props.row.type.name }}
+                </div>
+              </div>
+            </template>
+          </q-img>
+          <q-img
+            v-if="showPic && !props.row.has_image"
+            class="bg-white"
+            style="max-height: 256px"
+            src="no-image.svg"
+          >
             <div
               v-if="!public && !nodetails && editable"
               class="absolute-top-right justify-end"
@@ -55,6 +115,19 @@
               </div>
             </div>
           </q-img>
+          <q-card-section v-if="!showPic">
+            <div class="row">
+              <div class="col">
+                <div class="text-h4 text-center">
+                  {{ props.row.name }}
+                </div>
+                <div class="text-caption text-center">
+                  {{ props.row.type.name }}
+                </div>
+              </div>
+              <q-btn rounded icon="mdi-pencil" @click="editDrink = props.row" />
+            </div>
+          </q-card-section>
           <q-card-section>
             <q-badge
               v-for="tag in props.row.tags"
@@ -150,8 +223,8 @@ import { filter, Search } from '../utils/filter';
 import SearchInput from './SearchInput.vue';
 import DrinkModify from './DrinkModify.vue';
 import { DeleteObjects } from '../utils/utils';
+import { setNewImage, getNewImage } from '../utils/image';
 import { PERMISSIONS } from '../permissions';
-import { sort } from '../utils/sort';
 import { Notify } from 'quasar';
 
 export default defineComponent({
@@ -180,7 +253,11 @@ export default defineComponent({
     const store = usePricelistStore();
 
     onBeforeMount(() => {
-      void store.getDrinks();
+      //void store.getDrinks();
+      void onRequest({
+        pagination: pagination.value,
+        filter: undefined,
+      });
     });
 
     const columns = [
@@ -192,8 +269,6 @@ export default defineComponent({
         name: 'name',
         label: 'Name',
         field: 'name',
-        sortable: true,
-        sort,
         filterable: true,
         public: true,
       },
@@ -203,8 +278,6 @@ export default defineComponent({
         label: 'Kategorie',
         field: 'type',
         format: (val: FG.DrinkType) => `${val.name}`,
-        sortable: true,
-        sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
         filterable: true,
         public: true,
       },
@@ -230,7 +303,6 @@ export default defineComponent({
         label: 'Artikelnummer',
         field: 'article_id',
         sortable: true,
-        sort,
         filterable: true,
         public: false,
       },
@@ -239,7 +311,6 @@ export default defineComponent({
         label: 'Inhalt in l des Gebinde',
         field: 'volume',
         sortable: true,
-        sort,
         public: false,
       },
       {
@@ -247,7 +318,6 @@ export default defineComponent({
         label: 'Gebindegröße',
         field: 'package_size',
         sortable: true,
-        sort,
         public: false,
       },
       {
@@ -256,7 +326,6 @@ export default defineComponent({
         field: 'cost_per_package',
         format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
         sortable: true,
-        sort,
         public: false,
       },
       {
@@ -265,7 +334,6 @@ export default defineComponent({
         field: 'cost_per_volume',
         format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
         sortable: true,
-        sort: (a: ComputedRef, b: ComputedRef) => sort(a.value, b.value),
       },
       {
         name: 'volumes',
@@ -297,7 +365,7 @@ export default defineComponent({
           });
           return retVal;
         },
-        filterable: true,
+        filterable: false,
         sortable: false,
         public: false,
       },
@@ -347,9 +415,47 @@ export default defineComponent({
     const pagination = ref({
       sortBy: 'name',
       descending: false,
-      rowsPerPage: store.drinks.length,
+      page: 1,
+      rowsPerPage: 10,
+      rowsNumber: 10,
     });
 
+    interface PaginationInterface {
+      sortBy: string;
+      descending: boolean;
+      page: number;
+      rowsPerPage: number;
+      rowsNumber: number;
+    }
+
+    const loading = ref(false);
+
+    async function onRequest(props: { pagination: PaginationInterface; filter?: Search }) {
+      const { page, rowsPerPage, sortBy, descending } = props.pagination;
+      loading.value = true;
+      console.log('search_keys', search_keys);
+      const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
+      const startRow = (page - 1) * rowsPerPage;
+      try {
+        const result = await store.getDrinks({
+          offset: startRow,
+          limit: fetchCount,
+          descending,
+          search_name: props.filter?.value,
+          search_key: props.filter?.key,
+        });
+        pagination.value.page = page;
+        pagination.value.rowsPerPage = rowsPerPage;
+        pagination.value.sortBy = sortBy;
+        pagination.value.descending = descending;
+        console.log('result', result.count);
+        if (result.count) pagination.value.rowsNumber = result.count;
+      } catch (error) {
+        console.warn(error);
+      }
+      loading.value = false;
+    }
+
     const drinkTypes = computed(() => store.drinkTypes);
 
     function updateDrink(drink: Drink) {
@@ -361,6 +467,7 @@ export default defineComponent({
         store.deleteDrink(editDrink.value);
       }
       editDrink.value = undefined;
+      void onRequest({ pagination: pagination.value, filter: search.value });
     }
 
     const showNewDrink = ref(false);
@@ -412,7 +519,7 @@ export default defineComponent({
       tags: [],
       type: undefined,
       volumes: [],
-      uuid: '',
+      has_image: false,
     };
 
     function newDrink() {
@@ -437,6 +544,9 @@ export default defineComponent({
       for (const volume of toDeleteObjects.volumes) {
         await store.deleteVolume(volume, drink);
       }
+      if (deletePic) {
+        await deletePicture();
+      }
       if (drink.id > 0) {
         await store.updateDrink(drink);
       } else {
@@ -445,14 +555,15 @@ export default defineComponent({
           editDrink.value.id = _drink.id;
         }
       }
-      if (deletePic) {
-        await deletePicture();
-      }
-      if (drinkPic instanceof File) {
+      if (drinkPic instanceof File && drinkPic.name) {
         await savePicture(drinkPic);
+        if (drink.id > 0) {
+          setNewImage(drink.id);
+        }
       }
       editDrink.value = undefined;
       notLoading.value = true;
+      void onRequest({ pagination: pagination.value, filter: search.value });
     }
 
     function get_volumes(drink_id: number) {
@@ -461,22 +572,21 @@ export default defineComponent({
 
     const notLoading = ref(true);
 
-    const imageloading = ref<Array<{ id: number; loading: boolean }>>([]);
-    function getImageLoading(id: number) {
-      const loading = imageloading.value.find((a) => a.id === id);
-      if (loading) {
-        return loading.loading;
+    function image(id: number | undefined) {
+      if (id) {
+        const _newImage = getNewImage(id);
+        if (_newImage) {
+          return `${
+            api.defaults.baseURL || ''
+          }/pricelist/drinks/${id}/picture?thumbnail?t=${_newImage.lastModified.toString()}`;
         }
-      return false;
-    }
-
-    function image(uuid: string | undefined) {
-      if (uuid) {
-        return `${api.defaults.baseURL||''}/pricelist/picture/${uuid}?size=256`;
+        return `${api.defaults.baseURL || ''}/pricelist/drinks/${id}/picture?thumbnail`;
       }
       return 'no-image.svg';
     }
 
+    const showPic = ref(true);
+
     return {
       drinks: computed(() => store.drinks),
       pagination,
@@ -498,11 +608,13 @@ export default defineComponent({
       editing_drink,
       get_volumes,
       notLoading,
-      getImageLoading,
       newDrink,
       hasPermission,
       PERMISSIONS,
       image,
+      loading,
+      onRequest,
+      showPic,
     };
   },
 });

src/components/CalculationTable/DrinkPriceVolumes.vue

@@ -42,7 +42,7 @@
         </div>
       </div>
       <div class="q-pa-sm">
-        <div v-for="(price, index) in volume.prices" :key="price.id">
+        <div v-for="(price, index) in filterPublic(volume.prices)" :key="price.id">
           <div class="fit row justify-around q-py-sm">
             <div
               v-if="!editable || !hasPermission(PERMISSIONS.EDIT_PRICE)"
@@ -93,7 +93,7 @@
               </q-btn>
             </div>
           </div>
-          <q-separator v-if="index < volume.prices.length - 1" />
+          <q-separator v-if="index < filterPublic(volume.prices).length - 1" />
         </div>
         <div
           v-if="!public && !nodetails && isUnderMinPrice"
@@ -294,6 +294,13 @@ export default defineComponent({
       emit('update:modelValue', volumes.value);
     }
 
+    function filterPublic(prices: Array<FG.DrinkPrice>) {
+      if (props.public) {
+        return prices.filter((price) => price.public);
+      }
+      return prices;
+    }
+
     const isUnderMinPrice = computed(() => {
       if (volumes.value) {
         const this_volume = volumes.value.find((a) => a.id === volume.value);
@@ -328,6 +335,7 @@ export default defineComponent({
       isUnderMinPrice,
       hasPermission,
       PERMISSIONS,
+      filterPublic,
     };
   },
 });

src/components/CalculationTable/Ingredients.vue

@@ -9,7 +9,8 @@
         <div v-if="ingredient.drink_ingredient" class="col">
           <div class="full-width row justify-evenly q-py-xs">
             <div class="col">
-              {{ get_drink_ingredient_name(ingredient.drink_ingredient.ingredient_id) }}
+              <!--{{ get_drink_ingredient_name(ingredient.drink_ingredient.ingredient_id) }}-->
+              {{ ingredient.drink_ingredient.name }}
               <q-popup-edit
                 v-if="editable"
                 v-slot="scope"
@@ -25,6 +26,8 @@
                   label="Getränk"
                   filled
                   dense
+                  use-input
+                  @filter="filter_drinks"
                   :options="drinks"
                   option-label="name"
                   option-value="id"
@@ -78,6 +81,8 @@
               v-model="ingredient.extra_ingredient"
               filled
               dense
+              use-input
+              @filter="filter_extra_ingredients"
               :options="extra_ingredients"
               option-label="name"
             />
@@ -107,8 +112,10 @@
                 v-model="newIngredient"
                 filled
                 dense
+                use-input
                 label="Zutat"
                 :options="[...drinks, ...extra_ingredients]"
+                @filter="filter"
                 option-label="name"
               />
             </div>
@@ -155,7 +162,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, onBeforeMount, unref } from 'vue';
-import { usePricelistStore } from '../../store';
+import { usePricelistStore, Drink } from '../../store';
 import { clone } from '../../utils/utils';
 
 export default defineComponent({
@@ -196,6 +203,8 @@ export default defineComponent({
             id: -1,
             ingredient_id: newIngredient.value.id,
             volume: newIngredientVolume.value,
+            cost_per_volume: <number>(<FG.Drink>newIngredient.value).cost_per_volume,
+            name: newIngredient.value.name,
           },
           extra_ingredient: undefined,
         };
@@ -234,13 +243,44 @@ export default defineComponent({
       emit('update:modelValue', unref(edit_ingredients));
       update();
     }
-    const drinks = computed(() =>
-      store.drinks.filter((drink) => {
-        console.log('computed drinks', drink.name, drink.cost_per_volume);
-        return drink.cost_per_volume;
-      })
-    );
-    const extra_ingredients = computed(() => store.extraIngredients);
+    const drinks = ref<Array<Drink>>([]);
+    const _extra_ingredients = computed(() => store.extraIngredients);
+    const extra_ingredients = ref(_extra_ingredients.value);
+
+    async function filter_drinks(val: string, update: (a: () => void) => void) {
+      let result = <Array<Drink>>[];
+      if (val === '') {
+        result = await store.getDrinks_no_store({ limit: 5, ingredient: true });
+      } else {
+        result = await store.getDrinks_no_store({
+          limit: 5,
+          search_name: val,
+          search_key: 'name',
+          ingredient: true,
+        });
+      }
+      update(() => {
+        drinks.value = result;
+      });
+    }
+    function filter_extra_ingredients(val: string, update: (a: () => void) => void) {
+      if (val === '') {
+        update(() => {
+          extra_ingredients.value = _extra_ingredients.value;
+        });
+      } else {
+        update(() => {
+          extra_ingredients.value = _extra_ingredients.value.filter((ingredient) => {
+            return ingredient.name.toLowerCase().includes(val.toLowerCase());
+          });
+        });
+      }
+    }
+
+    async function filter(val: string, update: () => void) {
+      await filter_drinks(val, update);
+      filter_extra_ingredients(val, update);
+    }
 
     function get_drink_ingredient_name(id: number) {
       return store.drinks.find((a) => a.id === id)?.name;
@@ -263,6 +303,9 @@ export default defineComponent({
       deleteIngredient,
       get_drink_ingredient_name,
       edit_ingredients,
+      filter,
+      filter_drinks,
+      filter_extra_ingredients,
     };
   },
 });

src/components/DrinkModify.vue

@@ -24,28 +24,30 @@
       </div>
     </q-card-section>
     <q-card-section>
-      <q-img :src="image" style="max-height: 256px" fit="contain" />
       <div class="full-width row">
         <div class="col-10 q-pa-sm">
           <q-file
             v-model="drinkPic"
             filled
-            clearable
+            :clearable="drinkPic.name != ''"
             dense
+            accept=".jpg, .jpeg, .png, image/*"
             @update:model-value="imagePreview"
-            @clear="imgsrc = undefined"
+            @clear="clear"
           >
-            <template #prepend>
-              <q-icon name="mdi-image" />
+            <template #file>
+              <q-img :src="image" style="max-height: 256px" fit="contain" />
             </template>
           </q-file>
         </div>
-        <div class="col-2 q-pa-sm text-right">
+        <div class="column justify-center">
+          <div class="col-2 q-pa-sm">
             <q-btn round icon="mdi-delete" color="negative" size="sm" @click="delete_pic">
               <q-tooltip> Bild entfernen </q-tooltip>
             </q-btn>
           </div>
         </div>
+      </div>
     </q-card-section>
     <q-card-section>
       <q-select
@@ -138,13 +140,15 @@
     </q-card-section>
     <q-card-actions class="justify-around">
       <q-btn label="Abbrechen" @click="cancel" />
-      <q-btn v-if="can_delete" label="Löschen" color="negative" @click="delete_drink" />
+      <!--<q-btn v-if="can_delete" label="Löschen" color="negative" @click="delete_drink" />-->
+      <q-btn label="Löschen" color="negative" @click="delete_drink" />
       <q-btn label="Speichern" color="primary" @click="save" />
     </q-card-actions>
   </q-card>
 </template>
 <script lang="ts">
 import { clone, calc_min_prices, DeleteObjects, calc_cost_per_volume } from '../utils/utils';
+import { getNewImage } from '../utils/image';
 import { defineComponent, PropType, ref, onBeforeMount, computed } from 'vue';
 import DrinkPriceVolumes from './CalculationTable/DrinkPriceVolumes.vue';
 import BuildManual from '../components/CalculationTable/BuildManual.vue';
@@ -174,7 +178,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,10 +191,12 @@ 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;
+      edit_drink.value.cost_per_volume = calc_cost_per_volume(edit_drink.value);
+      edit_drink.value._cost_per_volume = edit_drink.value.cost_per_volume;
       emit('save', <Drink>edit_drink.value, toDeleteObjects.value, drinkPic.value, deletePic.value);
     }
 
@@ -238,7 +243,7 @@ export default defineComponent({
       edit_drink.value?.receipt?.splice(event, 1);
     }
 
-    const drinkPic = ref();
+    const drinkPic = ref<File>(new File([], '', {}));
     const imgsrc = ref();
 
     const deletePic = ref(false);
@@ -246,9 +251,9 @@ export default defineComponent({
     function delete_pic() {
       deletePic.value = true;
       imgsrc.value = undefined;
-      drinkPic.value = undefined;
+      drinkPic.value = new File([], '', {});
       if (edit_drink.value) {
-        edit_drink.value.uuid = '';
+        edit_drink.value.has_image = false;
       }
     }
 
@@ -265,14 +270,23 @@ export default defineComponent({
     }
 
     const image = computed(() => {
-      if (deletePic.value) {
-        return 'no-image.svg';
-      }
+      console.log(imgsrc.value, deletePic.value, edit_drink.value);
       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 (deletePic.value && !imgsrc.value) {
+        return 'no-image.svg';
+      }
+      if (edit_drink.value?.has_image) {
+        const _image = getNewImage(edit_drink.value?.id);
+        if (_image) {
+          return `${api.defaults.baseURL || ''}/pricelist/drinks/${
+            edit_drink.value.id
+          }/picture?thumbnail?t=${_image.lastModified.toString()}`;
+        }
+        return `${api.defaults.baseURL || ''}/pricelist/drinks/${
+          edit_drink.value.id
+        }/picture?thumbnail`;
       }
       return 'no-image.svg';
     });
@@ -321,6 +335,11 @@ export default defineComponent({
       edit_volumes.value?.some((a) => a.ingredients.length > 0)
     );
 
+    function clear(val: File) {
+      drinkPic.value = new File([], '', {});
+      imgsrc.value = undefined;
+    }
+
     return {
       edit_drink,
       save,
@@ -347,6 +366,7 @@ export default defineComponent({
       hasIngredients,
       hasPermission,
       PERMISSIONS,
+      clear,
     };
   },
 });

src/components/Pricelist.vue

@@ -5,11 +5,13 @@
     :rows="drinks"
     :visible-columns="visibleColumns"
     :filter="search"
-    :filter-method="filter"
     dense
-    :pagination="pagination"
+    v-model:pagination="pagination"
     :fullscreen="fullscreen"
+    @request="onRequest"
   >
+    <!--
+    :filter-method="filter"-->
     <template #top-right>
       <div class="row justify-end q-gutter-sm">
         <search-input v-model="search" :keys="options" />
@@ -27,7 +29,7 @@
           options-cover
         />
         <q-btn round icon="mdi-backburger">
-          <q-tooltip anchor='top middle' self='bottom middle'> Reihenfolge ändern </q-tooltip>
+          <q-tooltip anchor="top middle" self="bottom middle"> Reihenfolge ändern </q-tooltip>
           <q-menu anchor="bottom middle" self="top middle">
             <drag v-model="order" class="q-list" ghost-class="ghost" group="people" item-key="id">
               <template #item="{ element }">
@@ -80,7 +82,7 @@ import SearchInput from '../components/SearchInput.vue';
 import { usePricelistStore, Order } from '../store';
 import { useMainStore } from '@flaschengeist/api';
 import { Search, filter } from '../utils/filter';
-import drag from 'vuedraggable';
+import draggableComponent from 'vuedraggable';
 
 interface Row {
   name: string;
@@ -94,7 +96,7 @@ interface Row {
 
 export default defineComponent({
   name: 'Pricelist',
-  components: { SearchInput, drag: <ComponentPublicInstance>drag },
+  components: { SearchInput, drag: draggableComponent },
   props: {
     public: {
       type: Boolean,
@@ -109,11 +111,11 @@ export default defineComponent({
       if (!props.public) {
         user.value = useMainStore().currentUser.userid;
         void store.getPriceListColumnOrder(user.value);
-        void store.getDrinks();
         void store.getPriceCalcColumn(user.value);
       } else {
         user.value = '';
       }
+      void onRequest({ pagination: pagination.value });
     });
 
     const _order = ref<Array<Order>>([
@@ -170,7 +172,9 @@ export default defineComponent({
       {
         name: 'name',
         label: 'Name',
-        field: 'name',
+        //field: 'name',
+        field: 'volume',
+        format: (val: FG.DrinkPriceVolume) => <string>val.drink?.name,
         sortable: true,
         filterable: true,
         align: 'left',
@@ -178,21 +182,23 @@ export default defineComponent({
       {
         name: 'type',
         label: 'Kategorie',
-        field: 'type',
+        //field: 'type',
+        field: 'volume',
         sortable: true,
         filterable: true,
-        format: (val: FG.DrinkType) => val.name,
+        format: (val: FG.DrinkPriceVolume) => <string>val.drink?.type?.name,
       },
       {
         name: 'tags',
         label: 'Tags',
-        field: 'tags',
+        //field: 'tags',
+        field: 'volume',
         filterable: true,
 
-        format: (val: Array<FG.Tag>) => {
+        format: (val: FG.DrinkPriceVolume) => {
           let retVal = '';
-          val.forEach((tag, index) => {
-            if (index >= val.length - 1 && index > 0) {
+          val.drink?.tags?.forEach((tag, index) => {
+            if (index >= (<Array<FG.Tag>>val.drink?.tags).length - 1 && index > 0) {
               retVal += ', ';
             }
             retVal += tag.name;
@@ -203,10 +209,11 @@ export default defineComponent({
       {
         name: 'volume',
         label: 'Inhalt',
+        //field: 'volume',
         field: 'volume',
         filterable: true,
         sortable: true,
-        format: (val: number) => `${val.toFixed(3)}L`,
+        format: (val: FG.DrinkPriceVolume) => `${val.volume.toFixed(3)}L`,
       },
       {
         name: 'price',
@@ -297,9 +304,48 @@ export default defineComponent({
       label: '',
     });
 
+    interface PaginationInterface {
+      sortBy: string;
+      descending: boolean;
+      page: number;
+      rowsPerPage: number;
+      rowsNumber: number;
+    }
+    async function onRequest(props: { pagination: PaginationInterface; filter?: Search }) {
+      const { page, rowsPerPage, sortBy, descending } = props.pagination;
+      loading.value = true;
+      //console.log('search_keys', search_keys);
+      const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
+      const startRow = (page - 1) * rowsPerPage;
+      console.log('descending', descending);
+      try {
+        const result = await store.getPricelist({
+          offset: startRow,
+          limit: fetchCount,
+          descending: descending ? true : undefined,
+          search_name: props.filter?.value,
+          search_key: props.filter?.key,
+          sortBy: sortBy,
+        });
+        pagination.value.page = page;
+        pagination.value.rowsPerPage = rowsPerPage;
+        pagination.value.sortBy = sortBy;
+        pagination.value.descending = descending;
+        console.log('result', result);
+        if (result) pagination.value.rowsNumber = result;
+      } catch (error) {
+        console.warn(error);
+      }
+      loading.value = false;
+    }
+
+    const loading = ref(false);
     const pagination = ref({
       sortBy: 'name',
       rowsPerPage: 10,
+      rowsNumber: 10,
+      descending: false,
+      page: 1,
     });
 
     const fullscreen = ref(false);
@@ -314,6 +360,8 @@ export default defineComponent({
       filter,
       pagination,
       fullscreen,
+      loading,
+      onRequest,
     };
   },
 });

src/index.ts

@@ -1,13 +1,12 @@
 import { innerRoutes, outerRoutes } from './routes';
-import { FG_Plugin } from '@flaschengeist/typings';
+import { FG_Plugin } from '@flaschengeist/types';
 
 const plugin: FG_Plugin.Plugin = {
   id: 'pricelist',
   name: 'Pricelist',
   innerRoutes,
   outerRoutes,
-  requiredModules: [],
-  requiredBackendModules: ['pricelist'],
+  requiredModules: [['pricelist']],
   version: '0.0.1',
   widgets: [],
 };

src/pages/CocktailBuilder.vue

@@ -39,7 +39,7 @@ export default defineComponent({
       void store.get_min_prices().finally(() => {
         volume.value.min_prices = calc_min_prices(volume.value, undefined, store.min_prices);
       });
-      void store.getDrinks();
+      void store.getDrinks({ limit: 10 });
       void store.getDrinkTypes();
       void store.getExtraIngredients();
     });

src/pages/InnerPricelist.vue

@@ -25,7 +25,7 @@ export default defineComponent({
     const mainStore = useMainStore();
 
     onBeforeMount(() => {
-      void store.getDrinks();
+      void store.getDrinks({ limit: 10 });
       void store.getPriceListView(mainStore.currentUser.userid);
     });
 

src/pages/Receipts.vue

@@ -1,14 +1,17 @@
 <template>
   <q-table
+    v-model:pagination="pagination"
     grid
     title="Rezepte"
     :rows="drinks"
     row-key="id"
     hide-header
-    :filter="search"
-    :filter-method="filter"
+    @request="onRequest"
     :columns="options"
+    :filter="search"
   >
+    <!--:filter="search"
+      :filter-method="filter"-->
     <template #top-right>
       <search-input v-model="search" :keys="search_keys" />
     </template>
@@ -18,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">
@@ -68,12 +71,16 @@ export default defineComponent({
   setup() {
     const store = usePricelistStore();
     onBeforeMount(() => {
-      void store.getDrinks();
+      void onRequest({
+        pagination: pagination.value,
       });
-    const drinks = computed(() =>
-      store.drinks.filter((drink) => {
-        return drink.volumes.some((volume) => volume.ingredients.length > 0);
-      })
+    });
+    const drinks = computed(
+      () =>
+        //store.drinks.filter((drink) => {
+        //  return drink.volumes.some((volume) => volume.ingredients.length > 0);
+        //})
+        store.drinks
     );
 
     const columns_drinks = [
@@ -81,6 +88,7 @@ export default defineComponent({
         name: 'picture',
         label: 'Bild',
         align: 'center',
+        filterable: false,
       },
       {
         name: 'name',
@@ -120,6 +128,7 @@ export default defineComponent({
         label: 'Preise',
         field: 'volumes',
         align: 'center',
+        filterable: false,
       },
     ];
     const columns_volumes = [
@@ -155,12 +164,53 @@ 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';
     }
+    const loading = ref(false);
+    const pagination = ref({
+      sortBy: 'name',
+      descending: false,
+      page: 1,
+      rowsPerPage: 10,
+      rowsNumber: 10,
+    });
+
+    async function onRequest(props: { pagination: PaginationInterface; filter?: Search }) {
+      const { page, rowsPerPage, sortBy, descending } = props.pagination;
+      loading.value = true;
+      console.log('search_keys', search_keys);
+      const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
+      const startRow = (page - 1) * rowsPerPage;
+      try {
+        const result = await store.getDrinks({
+          offset: startRow,
+          limit: fetchCount,
+          descending,
+          search_name: props.filter?.value,
+          search_key: props.filter?.key,
+          receipt: true,
+        });
+        pagination.value.page = page;
+        pagination.value.rowsPerPage = rowsPerPage;
+        pagination.value.sortBy = sortBy;
+        pagination.value.descending = descending;
+        if (result.count) pagination.value.rowsNumber = result.count;
+      } catch (error) {
+        //..
+      }
+      loading.value = false;
+    }
+    interface PaginationInterface {
+      sortBy: string;
+      descending: boolean;
+      page: number;
+      rowsPerPage: number;
+      rowsNumber: number;
+    }
     return {
       drinks,
       options: [...columns_drinks, ...columns_volumes, ...columns_prices],
@@ -168,6 +218,9 @@ export default defineComponent({
       filter,
       search_keys,
       image,
+      onRequest,
+      loading,
+      pagination,
     };
   },
 });

src/pages/Settings.vue

@@ -77,7 +77,7 @@ export default defineComponent({
         .catch((err) => console.log(err));
       void store.getTags();
       void store.getDrinkTypes();
-      void store.getDrinks();
+      void store.getDrinks({ limit: 10 });
       void store.get_min_prices();
     });
 

src/store.ts

@@ -1,6 +1,7 @@
 import { api } from '@flaschengeist/api';
 import { defineStore } from 'pinia';
 import { calc_volume, calc_cost_per_volume, calc_all_min_prices } from './utils/utils';
+import Ingredient = FG.Ingredient;
 
 interface DrinkPriceVolume extends Omit<FG.DrinkPriceVolume, 'volume'> {
   _volume: number;
@@ -13,16 +14,6 @@ interface Drink extends Omit<Omit<FG.Drink, 'cost_per_volume'>, 'volumes'> {
   _cost_per_volume?: number;
 }
 
-interface Pricelist {
-  name: string;
-  type: FG.DrinkType;
-  tags: Array<FG.Tag>;
-  volume: number;
-  price: number;
-  public: boolean;
-  description: string;
-}
-
 class DrinkPriceVolume implements DrinkPriceVolume {
   constructor({ id, volume, prices, ingredients }: FG.DrinkPriceVolume) {
     this.id = id;
@@ -45,7 +36,7 @@ class Drink {
     cost_per_package,
     tags,
     type,
-    uuid,
+    has_image,
     receipt,
   }: FG.Drink) {
     this.id = id;
@@ -59,7 +50,7 @@ class Drink {
     this.tags = tags;
     this.type = type;
     this.volumes = [];
-    this.uuid = uuid;
+    this.has_image = has_image;
     this.receipt = receipt || [];
   }
 }
@@ -75,6 +66,7 @@ export const usePricelistStore = defineStore({
   state: () => ({
     drinkTypes: [] as Array<FG.DrinkType>,
     drinks: [] as Array<Drink>,
+    pricelist: [] as Array<FG.DrinkPrice>,
     extraIngredients: [] as Array<FG.ExtraIngredient>,
     min_prices: [] as Array<number>,
     tags: [] as Array<FG.Tag>,
@@ -106,11 +98,16 @@ export const usePricelistStore = defineStore({
       if (itm.length > 0) itm[0].name = drinkType.name;
     },
     async getExtraIngredients() {
-      const { data } = await api.get<Array<FG.ExtraIngredient>>('pricelist/ingredients/extraIngredients');
+      const { data } = await api.get<Array<FG.ExtraIngredient>>(
+        'pricelist/ingredients/extraIngredients'
+      );
       this.extraIngredients = data;
     },
     async setExtraIngredient(ingredient: FG.ExtraIngredient) {
-      const { data } = await api.post<FG.ExtraIngredient>('pricelist/ingredients/extraIngredients', ingredient);
+      const { data } = await api.post<FG.ExtraIngredient>(
+        'pricelist/ingredients/extraIngredients',
+        ingredient
+      );
       this.extraIngredients.push(data);
     },
     async updateExtraIngredient(ingredient: FG.ExtraIngredient) {
@@ -132,10 +129,24 @@ export const usePricelistStore = defineStore({
         this.extraIngredients.splice(index, 1);
       }
     },
-    async getDrinks() {
-      const { data } = await api.get<Array<FG.Drink>>('pricelist/drinks');
+    async getDrinks(filter: {
+      limit?: number;
+      offset?: number;
+      descending?: boolean;
+      search_name?: string;
+      search_key?: string;
+      receipt?: boolean;
+    }) {
+      if (!filter) filter = { limit: 10 };
+      console.log('filter_api', filter);
+      const { data } = await api.get<{ drinks: Array<FG.Drink>; count: number }>(
+        'pricelist/drinks',
+        {
+          params: filter,
+        }
+      );
       this.drinks = [];
-      data.forEach((drink) => {
+      data.drinks.forEach((drink) => {
         const _drink = new Drink(drink);
         drink.volumes.forEach((volume) => {
           const _volume = new DrinkPriceVolume(volume);
@@ -144,6 +155,7 @@ export const usePricelistStore = defineStore({
         this.drinks.push(_drink);
       });
       calc_all_min_prices(this.drinks, this.min_prices);
+      return data;
     },
     sortPrices(volume: DrinkPriceVolume) {
       volume.prices.sort((a, b) => {
@@ -152,6 +164,54 @@ export const usePricelistStore = defineStore({
         return 0;
       });
     },
+    async getDrinks_no_store(filter: {
+      limit?: number;
+      offset?: number;
+      descending?: boolean;
+      search_name?: string;
+      search_key?: string;
+      ingredient?: boolean;
+    }) {
+      if (!filter) filter = { limit: 10 };
+      console.log('filter_api', filter);
+      const { data } = await api.get<{ drinks: Array<FG.Drink>; count: number }>(
+        'pricelist/drinks',
+        {
+          params: filter,
+        }
+      );
+      const drinks: Array<Drink> = [];
+      data.drinks.forEach((drink) => {
+        const _drink = new Drink(drink);
+        drink.volumes.forEach((volume) => {
+          const _volume = new DrinkPriceVolume(volume);
+          _drink.volumes.push(_volume);
+        });
+        drinks.push(_drink);
+      });
+      calc_all_min_prices(drinks, this.min_prices);
+      return drinks;
+    },
+    async getPricelist(filter: {
+      limit?: number;
+      offset?: number;
+      descending?: boolean;
+      search_name?: string;
+      search_key?: string;
+      sortBy?: string;
+    }) {
+      const { data } = await api.get<{ pricelist: Array<FG.DrinkPrice>; count: number }>(
+        'pricelist/list',
+        {
+          params: filter,
+        }
+      );
+      this.pricelist = [];
+      console.log(data);
+      this.pricelist = data.pricelist;
+      console.log(this.pricelist);
+      return data.count;
+    },
     async deletePrice(price: FG.DrinkPrice) {
       await api.delete(`pricelist/prices/${price.id}`);
     },
@@ -191,6 +251,23 @@ export const usePricelistStore = defineStore({
         });
         this.drinks[index] = _drink;
       }
+      if (!!drink.cost_per_volume) {
+        this.drinks.forEach((_drink: Drink) => {
+          _drink.volumes.forEach((_volume: DrinkPriceVolume) => {
+            _volume.ingredients.forEach((_ingredient: Ingredient) => {
+              if (
+                _ingredient.drink_ingredient &&
+                _ingredient.drink_ingredient.ingredient_id === drink.id
+              ) {
+                if (drink.cost_per_volume != null) {
+                  _ingredient.drink_ingredient.cost_per_volume = drink.cost_per_volume;
+                }
+                _ingredient.drink_ingredient.name = drink.name;
+              }
+            });
+          });
+        });
+      }
       calc_all_min_prices(this.drinks, this.min_prices);
     },
     deleteDrink(drink: Drink) {
@@ -222,12 +299,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');
@@ -268,7 +345,9 @@ export const usePricelistStore = defineStore({
       this.pricelist_view = data;
     },
     async getPriceListColumnOrder(userid: string) {
-      const { data } = await api.get<Array<Order>>(`pricelist/users/${userid}/pricecalc_columns_order`);
+      const { data } = await api.get<Array<Order>>(
+        `pricelist/users/${userid}/pricecalc_columns_order`
+      );
       this.pricelist_columns_order = data;
     },
     async updatePriceListColumnOrder(userid: string, data: Array<Order>) {
@@ -276,27 +355,7 @@ export const usePricelistStore = defineStore({
       this.pricelist_columns_order = data;
     },
   },
-  getters: {
-    pricelist() {
-      const retVal: Array<Pricelist> = [];
-      this.drinks.forEach((drink) => {
-        drink.volumes.forEach((volume) => {
-          volume.prices.forEach((price) => {
-            retVal.push({
-              name: drink.name,
-              type: <FG.DrinkType>drink.type,
-              tags: <Array<FG.Tag>>drink.tags,
-              volume: <number>volume.volume,
-              price: price.price,
-              public: price.public,
-              description: <string>price.description,
-            });
-          });
-        });
-      });
-      return retVal;
-    },
-  },
+  getters: {},
 });
 
 export { DrinkPriceVolume, Drink, Order };

src/utils/filter.ts

@@ -1,6 +1,11 @@
 import { Drink } from '../store';
 
-function filter(rows: Array<Drink>, terms: Search, cols: Array<Col>, cellValue: { (col: Col, row: Drink): string }) {
+function filter(
+  rows: Array<Drink>,
+  terms: Search,
+  cols: Array<Col>,
+  cellValue: { (col: Col, row: Drink): string }
+) {
   if (terms.value) {
     return rows.filter((row) => {
       if (!terms.key || terms.key === '') {

src/utils/image.ts

@@ -0,0 +1,20 @@
+import { ref } from 'vue';
+
+const newImage = ref<Array<{ id: number; lastModified: Date }>>([]);
+
+export function getNewImage(id: number) {
+  const image = newImage.value.find((a) => a.id === id);
+  if (image) {
+    return image;
+  }
+  return null;
+}
+
+export function setNewImage(id: number) {
+  const image = newImage.value.find((a) => a.id === id);
+  if (image) {
+    image.lastModified = new Date();
+  } else {
+    newImage.value.push({ id, lastModified: new Date() });
+  }
+}

src/utils/utils.ts

@@ -17,7 +17,8 @@ function calc_volume(volume: DrinkPriceVolume) {
 function calc_cost_per_volume(drink: Drink) {
   let retVal = drink._cost_per_volume;
   if (!!drink.volume && !!drink.package_size && !!drink.cost_per_package) {
-    retVal = ((drink.cost_per_package || 0) / ((drink.volume || 0) * (drink.package_size || 0))) * 1.19;
+    retVal =
+      ((drink.cost_per_package || 0) / ((drink.volume || 0) * (drink.package_size || 0))) * 1.19;
   }
 
   return retVal ? Math.round(retVal * 1000) / 1000 : retVal;
@@ -36,8 +37,9 @@ function helper(volume: DrinkPriceVolume, min_price: number) {
   let extraIngredientPrice = 0;
   volume.ingredients.forEach((ingredient) => {
     if (ingredient.drink_ingredient) {
-      const _drink = usePricelistStore().drinks.find((a) => a.id === ingredient.drink_ingredient?.ingredient_id);
-      retVal += ingredient.drink_ingredient.volume * <number>(<unknown>_drink?.cost_per_volume);
+      //const _drink = usePricelistStore().drinks.find((a) => a.id === ingredient.drink_ingredient?.ingredient_id);
+      //retVal += ingredient.drink_ingredient.volume * <number>(<unknown>_drink?.cost_per_volume);
+      retVal += ingredient.drink_ingredient.volume * ingredient.drink_ingredient.cost_per_volume;
     }
     if (ingredient.extra_ingredient) {
       extraIngredientPrice += ingredient.extra_ingredient.price;
@@ -46,7 +48,11 @@ function helper(volume: DrinkPriceVolume, min_price: number) {
   return (retVal * min_price) / 100 + extraIngredientPrice;
 }
 
-function calc_min_prices(volume: DrinkPriceVolume, cost_per_volume: number | undefined, min_prices: Array<number>) {
+function calc_min_prices(
+  volume: DrinkPriceVolume,
+  cost_per_volume: number | undefined,
+  min_prices: Array<number>
+) {
   const retVal: Array<FG.MinPrices> = [];
   volume.min_prices = [];
   if (min_prices) {