ingredient checking

vue/src/apps/RecipeView/RecipeView.vue

@@ -85,7 +85,8 @@
                   <!-- 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>
+                      <Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"
+                                  @checked-state-changed="updateIngredientCheckedState"></Ingredient>
                     </template>
                   </template>
                   <!-- eslint-enable vue/no-v-for-template-key-on-child -->
@@ -126,7 +127,7 @@
     <!--TODO timers -->
     <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
       <Step :recipe="recipe" :step="s" :servings="servings" :index="index" :start_time="start_time"
-      @update-start-time="updateStartTime"></Step>
+            @update-start-time="updateStartTime" @checked-state-changed="updateIngredientCheckedState"></Step>
     </div>
 
   </div>
@@ -185,13 +186,15 @@ export default {
   methods: {
     loadRecipe: function (recipe_id) {
       apiLoadRecipe(recipe_id).then(recipe => {
-        this.recipe = recipe
-        this.loading = false
 
         let total_time = 0
-        for (let step of this.recipe.steps) {
+        for (let step of recipe.steps) {
           this.ingredient_count += step.ingredients.length
 
+          for (let ingredient of step.ingredients) {
+             this.$set(ingredient, 'checked', false)
+          }
+
           step.time_offset = total_time
           total_time += step.time
         }
@@ -200,11 +203,23 @@ export default {
         if (total_time > 0) {
           this.start_time = moment().format('yyyy-MM-DDTHH:mm')
         }
+
+        this.recipe = recipe
+        this.loading = false
       })
     },
     updateStartTime: function (e) {
       this.start_time = e
-    }
+    },
+    updateIngredientCheckedState: function (e) {
+      for (let step of this.recipe.steps) {
+        for (let ingredient of step.ingredients) {
+          if (ingredient.id === e.id) {
+            this.$set(ingredient, 'checked', !ingredient.checked)
+          }
+        }
+      }
+    },
   }
 }
 

vue/src/components/Ingredient.vue

@@ -1,7 +1,8 @@
 <template>
-    <tr>
+    <tr @click="$emit('checked-state-changed', ingredient)">
       <td>
-        <input type="checkbox">
+        <i class="far fa-check-circle text-success" v-if="ingredient.checked"></i>
+        <i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i>
       </td>
       <td>
         <span v-if="ingredient.amount !== 0">{{ calculateAmount(ingredient.amount) }}</span>
@@ -39,6 +40,11 @@ export default {
       default: 1,
     }
   },
+  data() {
+    return {
+      checked: false
+    }
+  },
   methods: {
     calculateAmount: function (x) {
       return calculateAmount(x, this.servings)

vue/src/components/Step.vue

@@ -34,7 +34,7 @@
             <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>
+                <Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id" @checked-state-changed="$emit('checked-state-changed', i)"></Ingredient>
               </template>
               <!-- eslint-enable vue/no-v-for-template-key-on-child -->
             </table>