src/flaschengeist.d.ts

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

src/plugins/pricelist/components/CalculationTable.vue

@@ -154,7 +154,7 @@
               v-model="scope.value"
               :options="drinkTypes"
               option-label="name"
-              option-value='id'
+              option-value="id"
               filled
               dense
               autofocus
@@ -296,8 +296,12 @@
           />
         </q-td>
         <q-td key="receipt" :props="drinks_props">
-          {{drinks_props.row.receipt}}
-          <q-popup-edit
+          <build-manual
+            :steps="drinks_props.row.receipt"
+            @deleteStep="deleteStep($event, drinks_props.row)"
+            @addStep="addStep($event, drinks_props.row)"
+          />
+          <!--<q-popup-edit
             v-slot="scope"
             v-model="drinks_props.row.receipt"
             buttons
@@ -312,7 +316,7 @@
               counter
               @keyup.enter.stop
             />
-          </q-popup-edit>
+          </q-popup-edit>-->
         </q-td>
       </q-tr>
     </template>
@@ -326,6 +330,7 @@ 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 BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
 import { Notify } from 'quasar';
 
 function sort(a: string | number, b: string | number) {
@@ -336,15 +341,15 @@ function sort(a: string | number, b: string | number) {
 
 export default defineComponent({
   name: 'CalculationTable',
-  components: { MinPriceSetting, DrinkPriceVolumesTable, NewDrink },
+  components: { BuildManual, MinPriceSetting, DrinkPriceVolumesTable, NewDrink },
   setup() {
     const mainStore = useMainStore();
     const store = usePricelistStore();
 
     onBeforeMount(() => {
-      void store.getDrinkTypes()
-      void store.getExtraIngredients()
-      void store.get_min_prices()
+      void store.getDrinkTypes();
+      void store.getExtraIngredients();
+      void store.get_min_prices();
       store.getPriceCalcColumn(user);
     });
 
@@ -506,6 +511,18 @@ export default defineComponent({
       void store.delete_drink_picture(drink);
     }
 
+    function addStep(event: string, drink: Drink) {
+      console.log(event, drink.receipt);
+      drink.receipt?.push(event);
+      updateDrink(drink);
+    }
+
+    function deleteStep(event: number, drink: Drink) {
+      console.log(event, drink.receipt);
+      drink.receipt?.splice(event, 1);
+      updateDrink(drink);
+    }
+
     return {
       drinks: computed(() => store.drinks),
       pagination,
@@ -520,6 +537,8 @@ export default defineComponent({
       drinkPic,
       savePicture,
       deletePicture,
+      addStep,
+      deleteStep,
       console,
     };
   },

src/plugins/pricelist/components/CalculationTable/BuildManual.vue

@@ -0,0 +1,44 @@
+<template>
+  <div v-for="(step, index) in steps" :key="index">
+    {{ step }}
+    <q-btn v-if="editable" icon="mdi-delete" @click="deleteStep(index)" />
+  </div>
+  <div v-if="editable" class="row q-gutter-sm">
+    <q-input v-model="newStep" />
+    <q-btn label="Schritt hinzufügen" @click="addStep" />
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, ref } from 'vue';
+export default defineComponent({
+  name: 'BuildManual',
+  props: {
+    steps: {
+      type: Array as PropType<Array<string>>,
+      required: true,
+    },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: {
+    deleteStep: (index: number) => true,
+    addStep: (val: string) => true,
+  },
+  setup(_, { emit }) {
+    const newStep = ref('');
+    function deleteStep(index: number) {
+      emit('deleteStep', index);
+    }
+    function addStep() {
+      emit('addStep', newStep.value);
+      newStep.value = '';
+    }
+    return { newStep, addStep, deleteStep };
+  },
+});
+</script>
+
+<style scoped></style>

src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue

@@ -1,10 +1,5 @@
 <template>
-  <q-btn
-    color="positive"
-    icon-right="add"
-    label="Abgabe hinzufügen"
-    size="xs"
-  >
+  <q-btn color="positive" icon-right="add" label="Abgabe hinzufügen" size="xs">
     <q-menu anchor="center middle" self="center middle">
       <div class="row justify-around q-pa-sm">
         <q-input

src/plugins/pricelist/components/CalculationTable/NewDrink.vue

@@ -32,8 +32,8 @@
         filled
         label="Inhalt in L/Gebinde"
         type="number"
-        step='0.01'
-        min='0'
+        step="0.01"
+        min="0"
       />
       <q-input
         v-model.number="newDrink.package_size"
@@ -48,8 +48,8 @@
         filled
         label="Preis Netto/Gebinde"
         type="number"
-        step='0.01'
-        min='0'
+        step="0.01"
+        min="0"
       />
       <q-input
         v-model.number="cost_per_volume"
@@ -57,9 +57,9 @@
         filled
         label="Preis mit 19%/Liter"
         :disable="calc_price_pro_volume"
-        type='number'
-        step='0.01'
-        min='0'
+        type="number"
+        step="0.01"
+        min="0"
       />
       <div class="row justify-between">
         <q-btn v-close-popup label="Abbrechen" type="reset" />

src/plugins/pricelist/pages/Receipts.vue

@@ -15,10 +15,13 @@
         <div class="text-h6">Zutaten</div>
         <div v-for="ingredient in drink.volumes[0].ingredients" :key="ingredient.id">
           {{
-            name(ingredient.drink_ingredient?.ingredient_id) ||
-            ingredient.extra_ingredient?.name
+            name(ingredient.drink_ingredient?.ingredient_id) || ingredient.extra_ingredient?.name
+          }}
+          {{
+            ingredient.drink_ingredient?.volume
+              ? `${ingredient.drink_ingredient?.volume * 100} cl`
+              : ''
           }}
-          {{ ingredient.drink_ingredient?.volume ? `${ingredient.drink_ingredient?.volume * 100} cl` : '' }}
         </div>
       </q-card-section>
       <q-card-section>
@@ -31,7 +34,7 @@
       </q-card-section>
       <q-card-section>
         <div class="text-h6">Anleitung</div>
-        {{drink.receipt}}
+        <build-manual :steps="drink.receipt" :editable="false" />
       </q-card-section>
     </q-card>
   </div>
@@ -40,8 +43,10 @@
 <script lang="ts">
 import { computed, defineComponent, onBeforeMount } from 'vue';
 import { usePricelistStore } from 'src/plugins/pricelist/store';
+import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
 export default defineComponent({
   name: 'Reciepts',
+  components: { BuildManual },
   setup() {
     const store = usePricelistStore();
     onBeforeMount(() => {

src/plugins/pricelist/store.ts

@@ -83,7 +83,7 @@ class Drink {
     this.type = type;
     this.volumes = [];
     this.uuid = uuid;
-    this.receipt = receipt;
+    this.receipt = receipt || [];
   }
 }