From 9044f9e1ff36bc623667bdb1b6ca20e715671f5b Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Thu, 7 Jan 2021 23:58:04 +0100
Subject: [PATCH] testing with vue mixings and components

---
 cookbook/static/vue/components/Toast.js | 12 ++++++++++++
 cookbook/templates/meal_plan.html       | 21 ++++++++++-----------
 2 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 cookbook/static/vue/components/Toast.js

diff --git a/cookbook/static/vue/components/Toast.js b/cookbook/static/vue/components/Toast.js
new file mode 100644
index 00000000..449ae652
--- /dev/null
+++ b/cookbook/static/vue/components/Toast.js
@@ -0,0 +1,12 @@
+let toast_mixin = Vue.mixin({
+    methods: {
+        makeToast: function (title, message, variant = null) {
+            this.$bvToast.toast(message, {
+                title: title,
+                variant: variant,
+                toaster: 'b-toaster-top-center',
+                solid: true
+            })
+        }
+    }
+})
\ No newline at end of file
diff --git a/cookbook/templates/meal_plan.html b/cookbook/templates/meal_plan.html
index 42a18f0f..925fc736 100644
--- a/cookbook/templates/meal_plan.html
+++ b/cookbook/templates/meal_plan.html
@@ -122,7 +122,8 @@
                         </div>
                         <draggable class="list-group" :list="recipes"
                                    :group="{ name: 'plan', pull: 'clone', put: false }" :clone="cloneRecipe">
-                            <div class="list-group-item d-flex align-items-center justify-content-between" v-for="(element, index) in recipes" :key="element.id">
+                            <div class="list-group-item d-flex align-items-center justify-content-between"
+                                 v-for="(element, index) in recipes" :key="element.id">
                                 <span>
                                     <i class="fas fa-arrows-alt"></i> [[element.name]]
                                 </span>
@@ -369,8 +370,11 @@
         </div>
 
     </div>
-    
+
     <script src="{% url 'javascript-catalog' %}"></script>
+
+    <script src="{% static 'vue/components/Toast.js' %}" type="application/javascript"></script>
+
     <script type="application/javascript">
         moment.locale('{{request.LANGUAGE_CODE}}');
 
@@ -380,6 +384,7 @@
         let app = new Vue({
             delimiters: ['[[', ']]'],
             el: '#app',
+            mixin: [toast_mixin],
             data: {
                 start_date: undefined,
                 start_offset: 0,
@@ -417,17 +422,11 @@
 
                 this.updatePlan();
                 this.getRecipes();
+
+                //this.makeToast('success', 'this actually works', 'success')
             },
             methods: {
-                makeToast: function (title, message, variant = null) {
-                    //TODO remove duplicate function in favor of central one
-                    this.$bvToast.toast(message, {
-                        title: title,
-                        variant: variant,
-                        toaster: 'b-toaster-top-center',
-                        solid: true
-                    })
-                },
+
                 updatePlan: function () {
                     this.dates = [];
                     for (var i = 0; i <= (this.number_of_days - 1); i++) {