From 9f51b9fd16df35396f729db97728fed45afb69ed Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Wed, 13 Jan 2021 18:42:59 +0100
Subject: [PATCH] refactored ingredient components

---
 vue/src/apps/RecipeView/RecipeView.vue        | 10 ++----
 .../{Ingredient.vue => IngredientRow.vue}     |  4 +--
 vue/src/components/Ingredients.vue            | 31 +++++++++++++++++++
 vue/src/components/Step.vue                   | 12 ++-----
 vue/webpack-stats.json                        |  2 +-
 5 files changed, 40 insertions(+), 19 deletions(-)
 rename vue/src/components/{Ingredient.vue => IngredientRow.vue} (94%)
 create mode 100644 vue/src/components/Ingredients.vue

diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index e72b3005a..381a624e8 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -81,15 +81,11 @@
             <br/>
             <div class="row">
               <div class="col-md-12">
-                <table class="table table-sm">
                   <!-- eslint-disable vue/no-v-for-template-key-on-child -->
                   <template v-for="s in recipe.steps">
-                    <template v-for="i in s.ingredients">
-                      <Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></Ingredient>
-                    </template>
+                      <Ingredients :step="s" :servings="servings" :key="s.id"></Ingredients>
                   </template>
                   <!-- eslint-enable vue/no-v-for-template-key-on-child -->
-                </table>
               </div>
             </div>
           </div>
@@ -143,7 +139,7 @@ import {apiLoadRecipe} from "@/utils/api";
 import Step from "@/components/Step";
 import RecipeContextMenu from "@/components/RecipeContextMenu";
 import {GettextMixin, ToastMixin} from "@/utils/utils";
-import Ingredient from "@/components/Ingredient";
+import Ingredients from "@/components/Ingredients";
 
 import PdfViewer from "@/components/PdfViewer";
 import ImageViewer from "@/components/ImageViewer";
@@ -164,7 +160,7 @@ export default {
   components: {
     PdfViewer,
     ImageViewer,
-    Ingredient,
+    Ingredients,
     Step,
     RecipeContextMenu,
     Nutrition,
diff --git a/vue/src/components/Ingredient.vue b/vue/src/components/IngredientRow.vue
similarity index 94%
rename from vue/src/components/Ingredient.vue
rename to vue/src/components/IngredientRow.vue
index cdafcbf5f..a7b2239ad 100644
--- a/vue/src/components/Ingredient.vue
+++ b/vue/src/components/IngredientRow.vue
@@ -3,7 +3,7 @@
       <td>
         <input type="checkbox">
       </td>
-      <td>
+      <td style="text-align: right">
         <span v-if="ingredient.amount !== 0">{{ calculateAmount(ingredient.amount) }}</span>
       </td>
       <td>
@@ -31,7 +31,7 @@
 import {calculateAmount} from "@/utils/utils";
 
 export default {
-  name: 'Ingredient',
+  name: 'IngredientRow',
   props: {
     ingredient: Object,
     servings: {
diff --git a/vue/src/components/Ingredients.vue b/vue/src/components/Ingredients.vue
new file mode 100644
index 000000000..d9bfe1e9d
--- /dev/null
+++ b/vue/src/components/Ingredients.vue
@@ -0,0 +1,31 @@
+<template>
+
+  <table class="table table-sm">
+    <!-- eslint-disable vue/no-v-for-template-key-on-child -->
+    <template v-for="i in step.ingredients">
+      <IngredientRow v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></IngredientRow>
+    </template>
+    <!-- eslint-enable vue/no-v-for-template-key-on-child -->
+  </table>
+
+
+</template>
+
+<script>
+
+import IngredientRow from "@/components/IngredientRow";
+
+export default {
+  name: 'Ingredient',
+  components: {
+    IngredientRow,
+  },
+  props: {
+    step: Object,
+    servings: {
+      type: Number,
+      default: 1,
+    }
+  },
+}
+</script>
diff --git a/vue/src/components/Step.vue b/vue/src/components/Step.vue
index 66b5bc7b2..23382edc5 100644
--- a/vue/src/components/Step.vue
+++ b/vue/src/components/Step.vue
@@ -31,13 +31,7 @@
       <b-collapse id="collapse-1" v-model="details_visible">
         <div class="row">
           <div class="col col-md-4" v-if="step.ingredients.length > 0 && recipe.steps.length > 1">
-            <table class="table table-sm">
-              <!-- eslint-disable vue/no-v-for-template-key-on-child -->
-              <template v-for="i in step.ingredients">
-                <Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></Ingredient>
-              </template>
-              <!-- eslint-enable vue/no-v-for-template-key-on-child -->
-            </table>
+            <Ingredients :step="step" :servings="servings"></Ingredients>
           </div>
           <div class="col" :class="{ 'col-md-8':  recipe.steps.length > 1, 'col-md-12':  recipe.steps.length <= 1,}">
             <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
@@ -114,12 +108,12 @@
 
 import {calculateAmount} from "@/utils/utils";
 
-import Ingredient from "@/components/Ingredient";
 import {GettextMixin} from "@/utils/utils";
 
 import CompileComponent from "@/components/CompileComponent";
 import Vue from "vue";
 import moment from "moment";
+import Ingredients from "@/components/Ingredients";
 
 Vue.prototype.moment = moment
 
@@ -129,7 +123,7 @@ export default {
     GettextMixin,
   ],
   components: {
-    Ingredient,
+    Ingredients,
     CompileComponent,
   },
   props: {
diff --git a/vue/webpack-stats.json b/vue/webpack-stats.json
index 40ac4d359..1df9b2067 100644
--- a/vue/webpack-stats.json
+++ b/vue/webpack-stats.json
@@ -1 +1 @@
-{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.fab07d3cd83db7e32016.hot-update.js","publicPath":"http://localhost:8080/recipe_view.fab07d3cd83db7e32016.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.fab07d3cd83db7e32016.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Step.vue\n  79:9  error  '.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead  vue/no-deprecated-v-bind-sync\n\n✖ 1 problem (1 error, 0 warnings)\n  1 error and 0 warnings potentially fixable with the `--fix` option.\n"}
\ No newline at end of file
+{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.e0742691919ff3fcce04.hot-update.js","publicPath":"http://localhost:8080/recipe_view.e0742691919ff3fcce04.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.e0742691919ff3fcce04.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):\n(Emitted value instead of an instance of Error) \n\n  Errors compiling template:\n\n  text \"Test\" outside root element will be ignored.\n\n  7  |    </template>\n  8  |    <!-- eslint-enable vue/no-v-for-template-key-on-child -->\n  9  |  </table>\n     |          \n  10 |  Test\n     |  ^^^^\n  11 |  \n     |  \n"}
\ No newline at end of file