Draft admin + crude JS for notices

templates/admin/index.html.twig

@@ -0,0 +1,34 @@
+
+{% extends 'data_entry.html.twig' %}
+
+{% block title %}Admin | ArCOA{% endblock %}
+
+{% block rightpanel %}
+<div class="container" style="max-width: 50vw">
+    <h1 class="is-size-1 mt-0 has-text-centered">Administration</h1>
+
+    <div class="container mt-4">
+       <h2 class="has-text-centered is-size-3 mb-5">Manage users</h2>
+       <table class="table is-striped is-hoverable is-fullwidth">
+            <tr><th></th><th>User name</th><th>Role</th><th>First name</th><th>Last name</th><th>Email</th><th>Actions</th></tr>
+            {% for user in users %}
+            <tr {% if user.id == app.user.id %}class="is-selected"{% endif %} data-user-id="{{ user.id }}">
+                <td>{{ loop.index }}</td>
+                <td>{{ user.username }}</td>
+                <td>
+                    {% for role in user.roles %}
+                        {% if role != 'ROLE_USER' %}
+                            {{ role|replace({"ROLE_": ""})|lower() }}
+                        {% endif %}
+                    {% endfor %}
+                </td>
+                <td>{{ user.firstname }}</td>
+                <td>{{ user.lastname }}</td>
+                <td>{{ user.email }}</td>
+                <td>Actions</td></tr>
+            {% endfor %}
+       </table> 
+    </div>
+</div>
+
+{% endblock %}

templates/profile/index.html.twig

@@ -21,7 +21,7 @@
                             <span class="icon is-small">
                                 <i class="fa fa-envelope"></i>
                             </span>
-                            {{ app.user.email }}
+                            {{ app.user.email ?? 'no email' }}
                         </p>
                     </div>
                 </div>

templates/vocab_func_context/index.html.twig

@@ -9,13 +9,14 @@
 
     <div class="container mt-6">
         <!-- For AJAX calls... TODO: not working from controller? -->
-        <article class="message is-success is-hidden" id="ajax-success">
-            <div class="message-body"></div>
-        </article>
+        <div class="notification is-success is-hidden" id="ajax-success">
+            <button class="delete"></button>
+          </div>
         {% for message in app.flashes('notice') %}
-            <article class="message is-success">
-                <div class="message-body">{{ message }}</div>
-            </article>
+            <div class="notification is-success" id="server-success">
+                <button class="delete"></button>
+                {{ message }}
+            </div>
         {% endfor %}
         <form method="post" action="{{ path('app_vocab_func_context_add') }}">
             <label class="label">Add new term</label>
@@ -66,6 +67,13 @@
 </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;
@@ -84,8 +92,11 @@
             const notice = document.querySelector('#ajax-success');
 
             if (res.status === 200) {
-                notice.firstElementChild.innerHTML = 'Term deleted successfully';
+                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();
             }