refactored ingredient components

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: {

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>

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: {