[pricelist][styling] style up receipts

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

@@ -0,0 +1,43 @@
+<template>
+  <q-carousel
+    v-model="volume"
+    transition-prev="slide-right"
+    transition-next="slide-left"
+    animated
+    swipeable
+    control-color="primary"
+    navigation
+    arrows
+  >
+    <q-carousel-slide v-for="volume in volumes" :key="volume.id" :name="volume.id">
+      <build-manual-volume-part :volume="volume" />
+    </q-carousel-slide>
+  </q-carousel>
+</template>
+<script lang="ts">
+import { defineComponent, PropType, ref, computed } from 'vue';
+import { DrinkPriceVolume, usePricelistStore } from '../../store';
+import BuildManualVolumePart from './BuildManualVolumePart.vue';
+export default defineComponent({
+  name: 'BuildManualVolume',
+  components: { BuildManualVolumePart },
+  props: {
+    volumes: {
+      type: Array as PropType<Array<DrinkPriceVolume>>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const store = usePricelistStore();
+    const volume = ref(props.volumes[0].id);
+    const options = computed(() => {
+      let ret: Array<{ label: number; value: number }> = [];
+      props.volumes.forEach((volume: DrinkPriceVolume) => {
+        ret.push({ label: volume.id, value: volume.id });
+      });
+      return ret;
+    });
+    return { volume, options };
+  },
+});
+</script>

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

@@ -0,0 +1,48 @@
+<template>
+  <q-card-section>
+    <div class="text-h6">Zutaten</div>
+    <div v-for="(ingredient, index) in volume.ingredients" :key="ingredient.id">
+      <div class="full-width row q-gutter-sm q-py-sm">
+        <div class="col">
+          {{
+            name(ingredient.drink_ingredient?.ingredient_id) || ingredient.extra_ingredient?.name
+          }}
+        </div>
+        <div class="col">
+          {{
+            ingredient.drink_ingredient?.volume
+              ? `${ingredient.drink_ingredient?.volume * 100} cl`
+              : ''
+          }}
+        </div>
+      </div>
+      <q-separator v-if="index < volume.ingredients.length - 1" />
+    </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 volume.prices" :key="price.id">{{ price.price.toFixed(2) }}€</div>
+    </div>
+  </q-card-section>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { DrinkPriceVolume, usePricelistStore } from '../../store';
+export default defineComponent({
+  name: 'BuildManualVolumePart',
+  props: {
+    volume: {
+      type: Object as PropType<DrinkPriceVolume>,
+      required: true,
+    },
+  },
+  setup() {
+    const store = usePricelistStore();
+    function name(id: number) {
+      return store.drinks.find((a) => a.id === id)?.name;
+    }
+    return { name };
+  },
+});
+</script>

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

@@ -24,8 +24,8 @@ export default defineComponent({
     },
   },
   emits: {
-    deleteStep: (index: number) => true,
+    deleteStep: (index: number) => index,
-    addStep: (val: string) => true,
+    addStep: (val: string) => val,
   },
   setup(_, { emit }) {
     const newStep = ref('');

src/plugins/pricelist/components/Pricelist.vue

@@ -78,7 +78,7 @@
 <script lang="ts">
 import { defineComponent, onBeforeMount, computed, ref } from 'vue';
 import { usePricelistStore } from '../store';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 
 export default defineComponent({
   name: 'Pricelist',

src/plugins/pricelist/pages/Receipts.vue

@@ -1,8 +1,8 @@
 <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-card v-for="drink in drinks" :key="drink.id" style="max-width: 400px; width: 400px">
       <q-img
-        style="max-width: 256px"
+        style="max-height: 256px"
         loading="lazy"
         :src="drink.uuid ? `/api/pricelist/picture/${drink.uuid}?size=256` : 'no-image.svg'"
         placeholder-src="no-image.svg"
@@ -11,27 +11,7 @@
           {{ drink.name }}
         </div>
       </q-img>
-      <q-card-section>
+      <build-manual-volume :volumes="drink.volumes" />
-        <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
-          }}
-          {{
-            ingredient.drink_ingredient?.volume
-              ? `${ingredient.drink_ingredient?.volume * 100} cl`
-              : ''
-          }}
-        </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>
         <build-manual :steps="drink.receipt" :editable="false" />
@@ -44,24 +24,22 @@
 import { computed, defineComponent, onBeforeMount } from 'vue';
 import { usePricelistStore } from 'src/plugins/pricelist/store';
 import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
+import BuildManualVolume from '../components/BuildManual/BuildManualVolume.vue';
 export default defineComponent({
   name: 'Reciepts',
-  components: { BuildManual },
+  components: { BuildManual, BuildManualVolume },
   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 };
+    return { drinks };
   },
 });
 </script>