From f5117abcfba11963dbec20b09ff6550dca0020b9 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Mon, 21 Sep 2020 11:56:39 +0200
Subject: [PATCH] fixed shopping list multipliers and recipe names

---
 cookbook/serializer.py                |  3 +-
 cookbook/templates/shopping_list.html | 60 ++++++++++++++-------------
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index 2755d7941..e4e6643e3 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -195,10 +195,11 @@ class MealPlanSerializer(serializers.ModelSerializer):
 
 
 class ShoppingListRecipeSerializer(serializers.ModelSerializer):
+    recipe_name = serializers.ReadOnlyField(source='recipe.name')
 
     class Meta:
         model = ShoppingListRecipe
-        fields = ('id', 'recipe', 'multiplier')
+        fields = ('id', 'recipe', 'recipe_name', 'multiplier')
         read_only_fields = ('id',)
 
 
diff --git a/cookbook/templates/shopping_list.html b/cookbook/templates/shopping_list.html
index 6e006574d..4ad0e887d 100644
--- a/cookbook/templates/shopping_list.html
+++ b/cookbook/templates/shopping_list.html
@@ -44,8 +44,8 @@
 
                 <div class="col col-md-6">
                     <ul class="list-group" style="margin-top: 8px">
-                        <li class="list-group-item" v-for="x in shopping_list.recipes">[[x.recipe.name]] <input
-                                type="number" v-model="x.multiplier" @change="updateDisplay()">
+                        <li class="list-group-item" v-for="x in shopping_list.recipes">[[x.recipe_name]]
+                            <input type="number" v-model="x.multiplier">
                         </li>
                     </ul>
                 </div>
@@ -104,7 +104,7 @@
             <div class="row" style="margin-top: 8px">
                 <div class="col col-12">
                     <table class="table table-sm table-striped">
-                        <tr v-for="x in shopping_list.entries_display">
+                        <tr v-for="x in display_entries">
                             <td>[[x.amount]]</td>
                             <td>[[x.unit.name]]</td>
                             <td>[[x.food.name]]</td>
@@ -141,7 +141,7 @@
                 recipe_query: '',
                 recipes: [],
                 shopping_list: undefined,
-                multiplier_cache: {},
+                //multiplier_cache: {},
                 new_entry: {
                     unit: undefined,
                     amount: undefined,
@@ -159,6 +159,31 @@
                     }
                 }
             },
+            computed: {
+                multiplier_cache() {
+                    let cache = {}
+                    this.shopping_list.recipes.forEach((r) => {
+                        cache[r.id] = !(Number.isNaN(r.multiplier)) ? parseFloat(r.multiplier) : 1
+                    })
+                    return cache
+                },
+                display_entries() {
+                    let entries = []
+
+                    //TODO merge multiple ingredients of same unit
+
+                    this.shopping_list.entries.forEach(element => {
+                        let item = {}
+                        Object.assign(item, element);
+                        if (item.list_recipe !== null) {
+                            item.amount = item.amount * this.multiplier_cache[item.list_recipe]
+                        }
+                        entries.push(item)
+                    });
+
+                    return entries
+                },
+            },
             /*
            watch: {
                recipe: {
@@ -188,10 +213,10 @@
                         "created_by": 1
                     }
 
-                    this.updateDisplay()
                 }
 
             },
+
             methods: {
                 /*
                 warnPageLeave: function (event) {
@@ -214,7 +239,6 @@
 
                     this.$http.get("{% url 'api:shoppinglist-detail' shopping_list_id %}").then((response) => {
                         this.shopping_list = response.body
-                        this.updateDisplay()
                     }).catch((err) => {
                         console.log(err)
                         this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
@@ -270,7 +294,7 @@
                     }
 
                     this.$refs.new_entry_amount.focus();
-                    this.updateDisplay()
+
                 },
                 getRecipes: function () {
                     let url = "{% url 'api:recipe-list' %}?limit=5"
@@ -292,6 +316,7 @@
                         "created": true,
                         "id": Math.random() * 1000,
                         "recipe": recipe.id,
+                        "recipe_name": recipe.name,
                         "multiplier": 1
                     }
                     this.shopping_list.recipes.push(slr)
@@ -310,28 +335,7 @@
                             }
                         }
                     }
-                    this.updateDisplay()
-                },
-                updateMultiplierCache: function () {
-                    this.multiplier_cache = {}
-                    for (let r of this.shopping_list.recipes) {
-                        this.multiplier_cache[r.id] = r.multiplier
-                    }
-                },
-                updateDisplay: function () {
-                    this.updateMultiplierCache()
 
-                    //TODO merge multiple ingredients of same unit
-                    this.shopping_list.entries_display = []
-
-                    this.shopping_list.entries.forEach(function (element) {
-                        let item = {}
-                        Object.assign(item, element);
-                        if (item.list_recipe !== null) {
-                            item.amount = item.amount * app.multiplier_cache[item.list_recipe]
-                        }
-                        app.shopping_list.entries_display.push(item)
-                    });
                 },
                 searchKeywords: function (query) {
                     this.keywords_loading = true