first parts of shopping rework

cookbook/templates/shopping_list.html

@@ -7,11 +7,124 @@
 {% block title %}{% trans "Shopping List" %}{% endblock %}
 
 {% block extra_head %}
+    {% include 'include/vue_base.html' %}
 
+    <link rel="stylesheet" href="{% static 'css/vue-multiselect-bs4.min.css' %}">
+    <script src="{% static 'js/vue-multiselect.min.js' %}"></script>
+
+    <script src="{% static 'js/Sortable.min.js' %}"></script>
+    <script src="{% static 'js/vuedraggable.umd.min.js' %}"></script>
 {% endblock %}
 
 {% block content %}
 
+    <div class="row">
+        <div class="col col-9">
+            <h2>{% trans 'Shopping List' %}</h2>
+        </div>
+        <div class="col col-3">
+            <b-form-checkbox switch size="lg" v-model="edit_mode">{% trans 'Edit' %}</b-form-checkbox>
+        </div>
+    </div>
 
 
+    <div v-if="edit_mode">
+        <div class="row">
+            <div class="col col-6">
+                <input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes"
+                       placeholder="{% trans 'Search Recipe' %}">
+
+                <ul class="list-group" style="margin-top: 8px">
+                    <li class="list-group-item" v-for="x in recipes">[[x.name]]</li>
+                </ul>
+            </div>
+
+        </div>
+    </div>
+    <div v-else>
+        Non Edit
+    </div>
+
+
+
+{% endblock %}
+{% block script %}
+    <script type="application/javascript">
+        let csrftoken = Cookies.get('csrftoken');
+        Vue.http.headers.common['X-CSRFToken'] = csrftoken;
+
+        Vue.component('vue-multiselect', window.VueMultiselect.default)
+
+        let app = new Vue({
+            components: {
+                Multiselect: window.VueMultiselect.default
+            },
+            delimiters: ['[[', ']]'],
+            el: '#id_base_container',
+            data: {
+                edit_mode: true,
+                recipe_query: '',
+                recipes: [],
+            },
+            directives: {
+                tabindex: {
+                    inserted(el) {
+                        el.setAttribute('tabindex', 0);
+                    }
+                }
+            },
+            /*
+           watch: {
+               recipe: {
+                   deep: true,
+                   handler() {
+                       this.recipe_changed = this.recipe_changed !== undefined;
+                   }
+               }
+           },
+
+           created() {
+               window.addEventListener('beforeunload', this.warnPageLeave)
+           },
+           */
+            mounted: function () {
+
+            },
+            methods: {
+                /*
+                warnPageLeave: function (event) {
+                    if (this.recipe_changed) {
+                        event.returnValue = ''
+                        return ''
+                    }
+                },
+                 */
+                getRecipes: function () {
+                    let url = "{% url 'api:recipe-list' %}?limit=5"
+                    if (this.recipe_query !== '') {
+                        url += '&query=' + this.recipe_query;
+                    }
+
+                    this.$http.get(url).then((response) => {
+                        this.recipes = response.data;
+                    }).catch((err) => {
+                        console.log("getRecipes error: ", err);
+                        this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
+                    })
+                },
+                searchKeywords: function (query) {
+                    this.keywords_loading = true
+                    this.$http.get("{% url 'api:keyword-list' %}" + '?query=' + query + '&limit=10').then((response) => {
+                        this.keywords = response.data;
+                        this.keywords_loading = false
+                    }).catch((err) => {
+                        console.log(err)
+                        this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
+                    })
+                },
+
+            }
+        });
+    </script>
+
 {% endblock %}