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>

            <template v-for="step, index in recipe.steps">
                <div class="row">
                    <div class="col-md-12">
                        <h3>Step [[index + 1]]</h3>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <template v-for="ingredient, index in step.ingredients">
                            <div class="card">
                                <div class="card-body" style="padding: 12px">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <input class="form-control" v-model="ingredient.amount">
                                        </div>
                                        <div class="col-md-3">
                                            <multiselect v-tabindex
                                                         ref="unit"
                                                         v-model="ingredient.unit"
                                                         :options="units"
                                                         :close-on-select="true"
                                                         :clear-on-select="true"
                                                         :allow-empty="true"
                                                         :preserve-search="true"
                                                         placeholder="{% trans 'Select one' %}"
                                                         tag-placeholder="{% trans 'Select' %}"
                                                         label="name"
                                                         :id="'unit_' + index"
                                                         track-by="id"
                                                         :multiple="false"
                                                         :loading="units_loading"
                                                         @search-change="searchUnits">
                                            </multiselect>

                                        </div>
                                        <div class="col-md-3">
                                            <multiselect v-tabindex
                                                         ref="food"
                                                         v-model="ingredient.food"
                                                         :options="foods"
                                                         :close-on-select="true"
                                                         :clear-on-select="true"
                                                         :allow-empty="true"
                                                         :preserve-search="true"
                                                         placeholder="{% trans 'Select one' %}"
                                                         tag-placeholder="{% trans 'Select' %}"
                                                         label="name"
                                                         :id="'food_' + index"
                                                         track-by="id"
                                                         :multiple="false"
                                                         :loading="foods_loading"
                                                         @search-change="searchFoods">
                                            </multiselect>
                                        </div>
                                        <div class="col-md-3">
                                            <input class="form-control" v-model="ingredient.note">
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <textarea class="form-control" rows="8" v-model="step.instruction"
                                  :id="'id_instruction_' + step.id"></textarea>
                    </div>
                </div>
                <br/>
            </template>

            <button type="button" @click="updateRecipe()" class="btn">Save</button>
            <button type="button" @click="addStep()" class="btn">Add Step</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,
                foods: [],
                foods_loading: false,
                units: [],
                units_loading: false,
            },
            directives: {
                tabindex: {
                    inserted(el) {
                        el.setAttribute('tabindex', 0);
                    }
                }
            },
            mounted: function () {
                this.loadRecipe()
                this.searchUnits('')
                this.searchFoods('')
                this.searchKeywords('')
            },
            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)
                    })
                },
                addStep: function () { //TODO see if default can be generated from options request
                    this.recipe.steps.push(
                        {'instruction': '', ingredients: []}
                    )
                },
                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)
                    })
                },
                searchUnits: function (query) {
                    this.units_loading = true
                    this.$http.get("{% url 'api:unit-list' %}" + '?query=' + query + '&limit=10').then((response) => {
                        this.units = response.data;
                        //TODO add back code to include custom created ingredients
                        this.units_loading = false
                    }).catch((err) => {
                        console.log(err)
                    })
                },
                searchFoods: function (query) {
                    this.foods_loading = true
                    this.$http.get("{% url 'api:food-list' %}" + '?query=' + query + '&limit=10').then((response) => {
                        this.foods = response.data
                        //TODO add back code to include custom created ingredients

                        this.foods_loading = false
                    }).catch((err) => {
                        console.log(err)
                    })
                },
            }
        });
    </script>


{% endblock %}