recipes/cookbook/templates/shopping_list.html

{% extends "base.html" %}
{% load django_tables2 %}
{% load crispy_forms_tags %}
{% load static %}
{% load i18n %}

{% 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 %}