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,13 +203,25 @@ 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)
           }
         }
       }
+    },
+  }
+}
 
 </script>
 

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>

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"}
+{"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.28f50ed664b7081f0b31.hot-update.js","publicPath":"http://localhost:8080/recipe_view.28f50ed664b7081f0b31.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.28f50ed664b7081f0b31.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Ingredient.vue\n  4:41  error  Unexpected mutation of \"ingredient\" prop  vue/no-mutating-props\n\n✖ 1 problem (1 error, 0 warnings)\n"}