arcoa/templates/vocab_func_context/index.html.twig

{% extends 'data_entry.html.twig' %}

{% block title %}Vocab - Functional context | ArCOA{% endblock %}

{% block rightpanel %}
<div class="container" style="max-width: 50vw">
    <h1 class="is-size-1 mt-0 has-text-centered">Vocabulary</h1>
    <h2 class="is-size-3 mt-4 has-text-centered">Functional context</h2>

    <div class="container mt-6">
        <!-- For AJAX calls... TODO: not working from controller? -->
        <div class="notification is-success is-hidden" id="ajax-success">
            <button class="delete"></button>
          </div>
        {% for message in app.flashes('notice') %}
            <div class="notification is-success" id="server-success">
                <button class="delete"></button>
                {{ message }}
            </div>
        {% endfor %}
        {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}
        <form method="post" action="{{ path('app_vocab_func_context_add') }}">
            <label class="label">Add new term</label>
            <div class="field has-addons">
                <div class="control">
                    <input class="input" name="_term" type="text" placeholder="Add new term">
                </div>
                <div class="control">
                    <button type="submit" class="button is-link">
                        Add
                        <span class="icon ml-3">
                            <i class="fa fa-plus"></i>
                        </span>
                    </button>
                </div>
            </div>
        </form>
        {% endif %}

        <h3 class="mt-6 mb-5 is-size-5"><strong>Terms in vocabulary</strong></h3>
        <table class="table is-fullwidth" id="terms">
            <tr><th>Term</th>{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}<th>Actions</th>{% endif %}</tr>
        {% for term in terms %}
            <tr data-row-id="{{ term.id }}">
                <td>
                    <input class="input" type="text" value="{{ term.term }}" disabled data-term-id="{{ term.id }}" />
                </td>
                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}
                <td>
                    <div class="buttons">
                        <button class="button is-primary is-hidden" data-id-save="{{ term.id }}">
                            Save
                            <span class="icon ml-2">
                                <i class="fa fa-save"></i>
                            </span>
                        </button>
                        <button class="button is-link" data-id-edit="{{ term.id }}">
                            Edit
                            <span class="icon ml-2">
                                <i class="fa fa-pencil"></i>
                            </span>
                        </button>
                        <button class="button is-danger" data-id-delete="{{ term.id }}">
                            Delete
                            <span class="icon ml-2">
                                <i class="fa fa-trash"></i>
                            </span>
                        </button>
                    </div>
                </td>
                {% endif %}
            </tr>
        {% endfor %}
        </table>

    </div>
</div>
<script type="text/javascript" defer>
    const terms = document.querySelector('#terms');
    const serverNotice = document.querySelector('#server-success');

    if (serverNotice) {
        serverNotice.querySelector('.delete').addEventListener('click', () => {
            serverNotice.remove();
        });
    }

    terms.addEventListener('click', async (event) => {
        const clicked = event.target;

        if (clicked.classList.contains('is-danger')) {
            const termId = clicked.getAttribute('data-id-delete');

            const data = new FormData;
            data.append("_id", termId);

            const res = await fetch("{{ path('app_vocab_func_context_del') }}", {
                method: "POST",
                body: data,
            });

            const notice = document.querySelector('#ajax-success');

            if (res.status === 200) {
                notice.innerHTML += 'Term deleted successfully';
                notice.classList.remove('is-hidden');
                notice.querySelector('.delete').addEventListener('click', () => {
                    notice.classList.add('is-hidden');
                });
                const row = document.querySelector(`tr[data-row-id="${termId}"]`);
                row.remove();
            }
        }

        if (clicked.classList.contains('is-link')) {
            const termId = clicked.getAttribute('data-id-edit');
            const saveBtn = document.querySelector(`button[data-id-save="${termId}"]`);
            const input = document.querySelector(`input[data-term-id="${termId}"]`);
            input.disabled = input.disabled ? false : true;
            saveBtn.classList.toggle('is-hidden');

            const data = new FormData;
            data.append("_id", termId);
            saveBtn.addEventListener('click', async () => {
                data.append("_new_term", input.value);
                const res = await fetch("{{ path('app_vocab_func_context_upd') }}", {
                    method: "POST",
                    body: data,
                });

                const notice = document.querySelector('#ajax-success');

                if (res.status === 200) {
                    notice.innerHTML += 'Term updated successfully';
                    notice.classList.remove('is-hidden');
                    notice.querySelector('.delete').addEventListener('click', () => {
                        notice.classList.add('is-hidden');
                    });
                }
            });
        }
    });
</script>
{% endblock %}