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

@@ -16,7 +16,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, PropType, ref, computed } from 'vue';
-import { DrinkPriceVolume, usePricelistStore } from '../../store';
+import { DrinkPriceVolume } from '../../store';
 import BuildManualVolumePart from './BuildManualVolumePart.vue';
 export default defineComponent({
   name: 'BuildManualVolume',
@@ -28,7 +28,6 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = usePricelistStore();
     const volume = ref(props.volumes[0].id);
     const options = computed(() => {
       let ret: Array<{ label: number; value: number }> = [];

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

@@ -1,28 +1,46 @@
 <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 v-for="ingredient in volume.ingredients" :key="ingredient.id">
+      <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) }}
+          </div>
+          <div class="col">
+            {{
+              ingredient.drink_ingredient?.volume
+                ? `${ingredient.drink_ingredient?.volume * 100} cl`
+                : ''
+            }}
+          </div>
         </div>
+        <q-separator />
+      </div>
+    </div>
+    <div v-for="ingredient in volume.ingredients" :key="ingredient.id">
+      <div v-if="ingredient.extra_ingredient">
+        <div class="full-width row q-gutter-sm q-py-sm">
+          <div class="col">
+            {{ ingredient.extra_ingredient?.name }}
+          </div>
+          <div class="col"></div>
+        </div>
+        <q-separator />
       </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 class="full-width row q-gutter-sm justify-around">
+      <div v-for="price in volume.prices" :key="price.id">
+        <div class="text-body1">{{ price.price.toFixed(2) }}€</div>
+        <q-badge v-if="price.public" class="text-caption"> öffentlich </q-badge>
+        <div class="text-caption text-weight-thin">
+          {{ price.description
+          }}
+        </div>
+      </div>
     </div>
   </q-card-section>
 </template>

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

@@ -1,10 +1,26 @@
 <template>
-  <div v-for="(step, index) in steps" :key="index">
-    {{ step }}
-    <q-btn v-if="editable" icon="mdi-delete" @click="deleteStep(index)" />
+  <div
+    v-for="(step, index) in steps"
+    :key="index"
+    class="full-width row q-gutter-sm justify-between q-py-sm"
+  >
+    <div class="row">
+      <div>{{ index + 1}}.</div>
+      <div class="q-pl-sm">
+        {{ step }}
+      </div>
+    </div>
+    <q-btn
+      v-if="editable"
+      round
+      color="negative"
+      size="sm"
+      icon="mdi-delete"
+      @click="deleteStep(index)"
+    />
   </div>
-  <div v-if="editable" class="row q-gutter-sm">
-    <q-input v-model="newStep" />
+  <div v-if="editable" class="full-width row q-gutter-sm justify-between">
+    <q-input v-model="newStep" filled label="Arbeitsschritt" />
     <q-btn label="Schritt hinzufügen" @click="addStep" />
   </div>
 </template>