TandoorRecipes/cookbook/templates/forms/edit_internal_recipe.html

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

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

{% block extra_head %}
    <script src="{% static 'tabulator/tabulator.min.js' %}"></script>
    <link rel="stylesheet" href="{% tabulator_theme_url request %}"/>

{% endblock %}

{% block content %}

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

    <form action="." method="post" enctype="multipart/form-data" id="id_form">
        {% csrf_token %}

        {% for field in form %}
            <div class="fieldWrapper">
                {{ field|as_crispy_field }}
            </div>
            {% if field.name == 'name' %}
                <label>{% trans 'Ingredients' %}</label>
                <div id="ingredients-table"></div>
                <br>
                <div class="table-controls" style="text-align: center">
                    <button class="btn btn-success" id="new_empty" type="button" style="min-width: 20vw"><i
                            class="fas fa-plus-circle"></i></button>

                    <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
                            data-placement="right" data-html="true" data-trigger="focus"
                            data-content="{% trans 'Use <b>Ctrl</b>+<b>Space</b> to insert new Ingredient!<br/>You can also save the recipe using <b>Ctrl</b>+<b>Shift</b>+<b>S</b>.' %}">
                        <i class="fas fa-question"></i>
                    </button>
                    <br/>
                    <br/>
                </div>
            {% endif %}
        {% endfor %}

        <hr>
        <button class="btn btn-success" type="submit"><i class="fas fa-save"></i> {% trans 'Save' %}</button>
        <a href="{% delete_url form.instance|get_class form.instance.pk %}"
           class="btn btn-danger"><i class="fas fa-trash-alt"></i> {% trans 'Delete' %}</a>
        {% if view_url %}
            <a href="{{ view_url }}" class="btn btn-info"><i class="far fa-eye"></i> {% trans 'View' %}</a>
        {% endif %}
        {% if form.instance.storage %}
            <a href="{% url 'delete_recipe_source' form.instance.pk %}" class="btn btn-warning"><i
                    class="fas fa-exclamation-triangle"></i> {% trans 'Delete original file' %}</a>
        {% endif %}
    </form>

    <script>

        $(function () {
            $('[data-toggle="popover"]').popover()
        });

        $('.popover-dismiss').popover({
            trigger: 'focus'
        });

        let select2UnitEditor = function (cell, onRendered, success, cancel, editorParams) {
            return select2Editor(cell, onRendered, success, cancel, editorParams, '{% url 'dal_unit' %}')
        };

        let select2IngredientEditor = function (cell, onRendered, success, cancel, editorParams) {
            return select2Editor(cell, onRendered, success, cancel, editorParams, '{% url 'dal_ingredient' %}')
        };

        let select2Editor = function (cell, onRendered, success, cancel, editorParams, url) {

            let editor = document.createElement("select");
            editor.setAttribute("class", "form-control");
            editor.setAttribute("style", "height: 100%; color: #00ff00");

            onRendered(function () {
                let select_2 = $(editor);

                select_2.select2({
                    tags: true,
                    ajax: {
                        url: url,
                        dataType: 'json'
                    }
                });

                select_2.select2('open');

                select_2.on('select2:select', function (e) {
                    success(e.params.data.text);
                });

                select_2.on('select2:close', function (e) {
                    if (e.target.textContent === "") {
                        cancel();
                    }
                });
            });

            //add editor to cell
            return editor;
        };

        //converts multiselct in recipe edit to searchable multiselect
        //shitty solution that needs to be redone at some point
        $(document).ready(function () {
            $('#id_keywords').select2();

            let ingredients = {{ ingredients|safe }}

                ingredients.forEach(function (cur, i) {
                    cur.delete = false
                });

            let data = ingredients;

            let table = new Tabulator("#ingredients-table", {
                index: "id",
                layout: "fitColumns",
                reactiveData: true,
                data: data,
                movableRows: true,
                headerSort: false,
                columns: [
                    {
                        title: "<i class='fas fa-sort'></i>",
                        rowHandle: true,
                        formatter: "handle",
                        headerSort: false,
                        frozen: true,
                        width: 36,
                        minWidth: 36
                    },
                    {
                        title: "{% trans 'Ingredient' %}",
                        field: "ingredient__name",
                        validator: "required",
                        editor: select2IngredientEditor
                    },
                    {title: "{% trans 'Amount' %}", field: "amount", validator: "required", editor: "input"},
                    {
                        title: "{% trans 'Unit' %}",
                        field: "unit__name",
                        validator: "required",
                        editor: select2UnitEditor
                    },
                    {
                        formatter: function (cell, formatterParams) {
                            return "<span style='color:red'><i class=\"fas fa-trash-alt\"></i></span>"
                        },
                        align: "center",
                        title: "{% trans 'Delete' %}",
                        headerSort: false,
                        cellClick: function (e, cell) {
                            if (confirm('{% trans 'Are you sure that you want to delete this ingredient?' %}'))
                                cell.getRow().delete();
                        }
                    },
                    {title: "id", field: "id", visible: false}
                ],
                cellClick: function (e, cell) {
                    if (cell._cell.column.definition.editor === "input") {
                        input = cell.getElement().childNodes[0];
                        input.focus();
                        input.select();
                    }
                },
            });

            // save ingredient data before submitting form
            $('#id_form').submit(function () {
                $('#id_ingredients').val(JSON.stringify(table.getData()));
                return true;
            });

            // load initial value
            $('#id_ingredients').val(JSON.stringify(data))

            function addIngredientRow() {
                data.push({
                    ingredient__name: "{% trans 'Ingredient' %}",
                    amount: "100",
                    unit__name: "g",
                    id: Math.floor(Math.random() * 10000000),
                    delete: false,
                });
            }

            document.onkeyup = function (e) {
                if (e.shiftKey && e.ctrlKey && (e.which === 83 || e.keyCode === 83)) {
                    $('#id_form').submit()
                } else if (e.ctrlKey && (e.which === 83 || e.keyCode === 32)) {
                    addIngredientRow();
                }
            };

            document.getElementById("new_empty").addEventListener("click", addIngredientRow);
        });

    </script>
{% endblock %}