recipes/cookbook/templates/forms/edit_internal_recipe.html

{% extends "base.html" %}
{% load i18n %}
{% load custom_tags %}
{% load theming_tags %}
{% load static %}

{% block title %}{% trans 'Edit Recipe' %}{% endblock %}

{% block extra_head %}

    {% include 'include/vue_base.html' %}

    <script src="{% static 'js/vue-multiselect.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/vue-multiselect.min.css' %}">

{% endblock %}

{% block content %}

    <h3>{% trans 'Edit Recipe' %}</h3>

    <div id="app">
        <template v-if="recipe">

            <div class="row">
                <div class="col-md-12">
                    <label for="id_name"> {% trans 'Name' %}</label>
                    <input class="form-control" id="id_name" v-model="recipe.name">

                </div>
            </div>
            <br/>

            <div class="row">
                <div class="col-md-6">
                    Image Edit Placeholder
                </div>
                <div class="col-md-6">
                    <label for="id_name"> {% trans 'Preperation Time' %}</label>
                    <input class="form-control" id="id_prep_time" v-model="recipe.working_time">

                    <label for="id_name"> {% trans 'Waiting Time' %}</label>
                    <input class="form-control" id="id_wait_time" v-model="recipe.waiting_time">

                    <label for="id_name"> {% trans 'Keywords' %}</label>
                    <multiselect
                            v-model="recipe.keywords"
                            :options="keywords"
                            :close-on-select="false"
                            :clear-on-select="true"
                            :hide-selected="true"
                            :preserve-search="true"
                            placeholder="{% trans 'Select one' %}"
                            label="name"
                            track-by="id"
                            id="id_keywords"
                            :multiple="true"
                            :loading="keywords_loading"
                            @search-change="searchKeywords">
                    </multiselect>
                </div>
            </div>

            <button type="button" @click="updateRecipe()">Save</button>
        </template>
    </div>

    <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: '#app',
            data: {
                recipe: undefined,
                keywords: [],
                keywords_loading: false,
            },
            directives: {
                tabindex: {
                    inserted(el) {
                        el.setAttribute('tabindex', 0);
                    }
                }
            },
            mounted: function () {
                this.loadRecipe()
            },
            methods: {
                loadRecipe: function () {
                    this.$http.get("{% url 'api:recipe-detail' recipe.pk %}").then((response) => {
                        this.recipe = response.data;
                        this.loading = false
                    }).catch((err) => {
                        this.error = err.data
                        this.loading = false
                        console.log(err)
                    })
                },
                updateRecipe: function () {
                    this.$http.put("{% url 'api:recipe-detail' recipe.pk %}", this.recipe).then((response) => {
                        console.log(response)
                    }).catch((err) => {
                        console.log(err)
                    })
                },
                searchKeywords: function (query) {
                    this.keywords_loading = true
                    this.$http.get("{% url 'api:keyword-list' %}" + '?query=' + query).then((response) => {
                        this.keywords = response.data;
                        this.keywords_loading = false
                    }).catch((err) => {
                        console.log(err)
                    })
                },
            }
        });
    </script>


{% endblock %}