src/flaschengeist.d.ts

@@ -83,6 +83,7 @@ declare namespace FG {
     type?: DrinkType;
     volumes: Array<DrinkPriceVolume>;
     uuid: string;
+    receipt?: string;
   }
   interface DrinkIngredient {
     id: number;

src/plugins/pricelist/components/CalculationTable.vue

@@ -294,6 +294,25 @@
             @updateDrink="updateDrink(drinks_props.row)"
           />
         </q-td>
+        <q-td key="receipt" :props="drinks_props">
+          {{drinks_props.row.receipt}}
+          <q-popup-edit
+            v-slot="scope"
+            v-model="drinks_props.row.receipt"
+            buttons
+            label-cancel="Abbrechen"
+            label-set="Speichern"
+            @update:modelValue="updateDrink(drinks_props.row)"
+          >
+            <q-input
+              type="textarea"
+              v-model="scope.value"
+              autofocus
+              counter
+              @keyup.enter.stop
+            />
+          </q-popup-edit>
+        </q-td>
       </q-tr>
     </template>
   </q-table>
@@ -389,6 +408,11 @@ export default defineComponent({
         label: 'Preiskalkulation',
         field: 'volumes',
       },
+      {
+        name: 'receipt',
+        label: 'Bauanleitung',
+        field: 'receipt',
+      },
     ];
     const column_calc = [
       {

src/plugins/pricelist/pages/Receipts.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="q-pa-sm full-width full-height row q-gutter-sm">
+    <q-card v-for="drink in drinks" :key="drink.id" style="max-width: 256px; width: 256px">
+      <q-img
+        style="max-width: 256px"
+        loading="lazy"
+        :src="drink.uuid ? `/api/pricelist/picture/${drink.uuid}?size=256` : 'no-image.svg'"
+        placeholder-src="no-image.svg"
+      >
+        <div class="absolute-bottom-right text-subtitle2">
+          {{ drink.name }}
+        </div>
+      </q-img>
+      <q-card-section>
+        <div class="text-h6">Zutaten</div>
+        <div v-for="ingredient in drink.volumes[0].ingredients" :key="ingredient.id">
+          {{
+            name(ingredient.drink_ingredient?.drink_ingredient_id) ||
+            ingredient.extra_ingredient?.name
+          }}
+          {{ ingredient.drink_ingredient?.volume }}
+        </div>
+      </q-card-section>
+      <q-card-section>
+        <div class="text-h6">Preise</div>
+        <div class="full-width row q-gutter-sm">
+          <div v-for="price in drink.volumes[0].prices" :key="price.id">
+            {{ price.price.toFixed(2) }}€
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-section>
+        <div class="text-h6">Anleitung</div>
+        {{drink.receipt}}
+        </q-card-section>
+    </q-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onBeforeMount } from 'vue';
+import { usePricelistStore } from 'src/plugins/pricelist/store';
+export default defineComponent({
+  name: 'Reciepts',
+  setup() {
+    const store = usePricelistStore();
+    onBeforeMount(() => {
+      void store.getDrinks();
+    });
+    function name(id: number) {
+      return store.drinks.find((a) => a.id === id)?.name;
+    }
+    const drinks = computed(() =>
+      store.drinks.filter((drink) => {
+        return drink.volumes.some((volume) => volume.ingredients.length > 0);
+      })
+    );
+    return { drinks, name };
+  },
+});
+</script>
+
+<style scoped></style>

src/plugins/pricelist/pages/Reciepts.vue

@@ -1,66 +0,0 @@
-<template>
-  <div class='q-pa-sm full-width full-height row q-gutter-sm'>
-    <q-card style='max-width: 256px; width: 256px' v-for='drink in drinks' :key='drink.id'>
-      <q-img
-        style='max-width: 256px;'
-        loading="lazy"
-        :src="
-              drink.uuid
-                ? `/api/pricelist/picture/${drink.uuid}?size=256`
-                : 'no-image.svg'
-            "
-        placeholder-src="no-image.svg"
-      >
-        <div class="absolute-bottom-right text-subtitle2">
-          {{ drink.name }}
-        </div>
-      </q-img>
-      <q-card-section>
-        <div class='text-h6'>
-          Zutaten
-        </div>
-        <div v-for='ingredient in drink.volumes[0].ingredients' :key='ingredient.id'>
-          {{ name(ingredient.drink_ingredient?.drink_ingredient_id) || ingredient.extra_ingredient?.name}} {{ ingredient.drink_ingredient?.volume }}
-        </div>
-      </q-card-section>
-      <q-card-section>
-        <div class='text-h6'>
-          Preise
-        </div>
-        <div class='full-width row q-gutter-sm'>
-          <div v-for='price in drink.volumes[0].prices' :key="price.id">
-            {{price.price.toFixed(2)}}€
-          </div>
-        </div>
-      </q-card-section>
-      <q-card-section>
-        <div class='text-h6'>
-          Anleitung
-        </div>
-      </q-card-section>
-    </q-card>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, onBeforeMount } from 'vue';
-import { usePricelistStore } from 'src/plugins/pricelist/store';
-export default defineComponent({
-  name: 'Reciepts',
-  setup() {
-    const store = usePricelistStore();
-    onBeforeMount(() => {
-      void store.getDrinks()
-    })
-    function name(id) {
-      return store.drinks.find(a => a.id === id)?.name
-    }
-    const drinks = computed(() => store.drinks.filter(drink => {
-      return drink.volumes.some(volume => volume.ingredients.length > 0)
-    }))
-    return {drinks, name}
-  }
-});
-</script>
-
-<style scoped></style>

src/plugins/pricelist/routes/index.ts

@@ -25,13 +25,13 @@ export const innerRoutes: FG_Plugin.MenuRoute[] = [
       {
         title: 'Rezepte',
         shortcut: false,
-        icon: '',
+        icon: 'mdi-receipt',
         permissions: ['user'],
         route: {
           path: 'reciepts',
           name: 'reciepts',
-          component: () => import('../pages/Reciepts.vue')
-        }
+          component: () => import('../pages/Receipts.vue'),
+        },
       },
       {
         title: 'Cocktailbuilder',
@@ -41,8 +41,8 @@ export const innerRoutes: FG_Plugin.MenuRoute[] = [
         route: {
           path: 'cocktail-builder',
           name: 'cocktail-builder',
-          component: () => import('../pages/CocktailBuilder.vue')
-        }
+          component: () => import('../pages/CocktailBuilder.vue'),
+        },
       },
       {
         title: 'Einstellungen',
@@ -67,7 +67,7 @@ export const outerRoutes: FG_Plugin.MenuRoute[] = [
     route: {
       path: 'pricelist',
       name: 'outter-pricelist',
-      component: () => import('../pages/OuterPricelist.vue')
-    }
-  }
-]
+      component: () => import('../pages/OuterPricelist.vue'),
+    },
+  },
+];

src/plugins/pricelist/store.ts

@@ -58,6 +58,7 @@ class Drink {
     tags,
     type,
     uuid,
+    receipt,
   }: FG.Drink) {
     this.id = id;
     this.article_id = article_id;
@@ -84,6 +85,7 @@ class Drink {
     this.type = type;
     this.volumes = [];
     this.uuid = uuid;
+    this.receipt = receipt;
   }
 }
 
@@ -322,6 +324,4 @@ export const usePricelistStore = defineStore({
   },
 });
 
-
-
 export { DrinkPriceVolume, MinPrice, Drink };