{% extends 'data_entry.html.twig' %} {% block title %}Vocab - Functional context | ArCOA{% endblock %} {% block rightpanel %} <div class="container" style="max-width: 50vw" data-controller="vocabs"> <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? --> {% 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 %} <div class="notification is-success is-hidden mt-5" data-controller="notification" data-notification-target="notif" id="ajax-saved"> <button class="delete" data-action="click->notification#close"></button> Term saved successfully </div> <div class="notification is-success is-hidden mt-5" data-controller="notification" data-notification-target="notif" id="ajax-deleted"> <button class="delete" data-action="click->notification#close"></button> Term deleted successfully </div> <div class="notification is-danger is-light is-hidden mt-5" data-controller="notification" data-notification-target="notif" id="ajax-error"> <button class="delete" data-action="click->notification#close"></button> The term could not be deleted because it's related to existing records </div> {% for message in app.flashes('notice') %} <div class="notification is-success mt-5" data-controller="notification" data-notification-target="notif"> <button class="delete" data-action="click->notification#close"></button> {{ message }} </div> {% endfor %} <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-vocabs-target="row" data-id="{{ term.id }}"> <td> <input class="input" type="text" value="{{ term.term }}" disabled data-id="{{ term.id }}" data-vocabs-target="input" /> </td> {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %} <td> <div class="buttons"> <button class="button is-primary is-hidden" data-vocabs-target="save" data-action="click->vocabs#save" data-url="{{ path('app_vocab_func_context_upd') }}" data-id="{{ term.id }}"> Save <span class="icon ml-2"> <i class="fa fa-save"></i> </span> </button> <button class="button is-hidden" data-id="{{ term.id }}" data-vocabs-target="cancel" data-action="click->vocabs#cancel"> Cancel <span class="icon ml-2"> <i class="fa fa-times"></i> </span> </button> <button class="button is-link" data-vocabs-target="edit" data-id="{{ term.id }}" data-action="click->vocabs#edit"> Edit <span class="icon ml-2"> <i class="fa fa-edit"></i> </span> </button> <button class="button is-danger" data-id="{{ term.id }}" data-action="click->vocabs#delete" data-url="{{ path('app_vocab_func_context_del') }}"> Delete <span class="icon ml-2"> <i class="fa fa-trash"></i> </span> </button> </div> </td> {% endif %} </tr> {% endfor %} </table> </div> <div class="modal" data-vocabs-target="modal"> <div class="modal-background"></div> <div class="modal-card"> <header class="modal-card-head"> <span class="icon is-large has-text-warning"> <i class="fa fa-warning fa-2x"></i> </span> <p class="modal-card-title has-text-danger pl-2"><strong>Delete term?</strong></p> <button class="delete" aria-label="close"></button> </header> <section class="modal-card-body"> <p class="is-size-5">This term will be permanently deleted. Proceed?</p> </section> <footer class="modal-card-foot"> <div class="buttons is-right"> <button class="button is-link" data-action="click->vocabs#delete">Confirm</button> <button class="button is-light" id="cancel">Cancel</button> </div> </footer> </div> </div> </div> {% endblock %}