recipes/cookbook/templates/forms/edit_internal_recipe.html

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

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

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

{% block content %}

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

    <form action="." method="post" enctype="multipart/form-data">
        {% 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">
                    <button class="btn" id="new_empty" type="button"><i class="fas fa-plus-circle"></i></button>
                </div>
            {% endif %}
        {% endfor %}

        <input type="hidden" id="ingredients_data_input" name="ingredients">
        <hr>
        <input type="submit" value="Submit" class="btn btn-success">
        <a href="{% url 'redirect_delete' form.instance|get_class|lower form.instance.pk %}"
           class="btn btn-danger">{% trans 'Delete' %}</a>
        {% if view_url %}
            <a href="{{ view_url }}" class="btn btn-info">{% trans 'View' %} <i class="far fa-eye"></i></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 selectText(node) {

            if (document.body.createTextRange) {
                const range = document.body.createTextRange();
                range.moveToElementText(node);
                range.select();
            } else if (window.getSelection) {
                const selection = window.getSelection();
                const range = document.createRange();
                range.selectNodeContents(node);
                selection.removeAllRanges();
                selection.addRange(range);
            } else {
                console.warn("Could not select text in node: Unsupported browser.");
            }
        }

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

            var ingredients = {{ ingredients|safe }}

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

            var data = ingredients

            var table = new Tabulator("#ingredients-table", {
                index: "id",
                layout: "fitColumns",
                reactiveData: true,
                data: data,
                movableRows: true,
                headerSort: false,
                columns: [
                    {
                        title: "{% trans 'Ingredient' %}",
                        field: "name",
                        validator: "required",
                        editor: "input"
                    },
                    {title: "{% trans 'Amount' %}", field: "amount", validator: "required", editor: "input"},
                    {title: "{% trans 'Unit' %}", field: "unit", validator: "required", editor: "input"},
                    {
                        title: "{% trans 'Delete' %}",
                        field: "delete",
                        align: "center",
                        editor: true,
                        formatter: "tickCross"
                    },
                    {title: "id", field: "id", visible: false}
                ],
                dataEdited: function (data) {
                    $('#ingredients_data_input').val(JSON.stringify(data))

                    data.forEach(function (cur, i) {
                        if (cur.delete) {
                            table.deleteRow(cur.id);
                        }
                    })
                },
                cellClick: function (e, cell) {
                    input = cell.getElement().childNodes[0]
                    input.focus()
                    input.select()
                },
            });

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

            document.getElementById("new_empty").addEventListener("click", function () {
                data.push({
                    name: "{% trans 'Ingredient' %}",
                    amount: "100",
                    unit: "g",
                    id: Math.floor(Math.random() * 10000000),
                    delete: false,
                });
            });
        });

    </script>
{% endblock %}