Crazy JS + bibliography routes (incomplete)

src/Controller/BibliographyController.php

@@ -13,7 +13,7 @@ use Symfony\Component\Routing\Attribute\Route;
 
 class BibliographyController extends AbstractController
 {
-    #[Route('/bibliography/{id}', name: 'app_bibliography')]
+    #[Route('/bibliography/{id<\d+>}', name: 'app_bibliography')]
     public function index(Bibliography $bibliography, EntityManagerInterface $em): Response
     {
         return $this->render('bibliography/index.html.twig', [
@@ -21,5 +21,28 @@ class BibliographyController extends AbstractController
             'record' => $bibliography,
         ]);
     }
+
+    #[Route('/bibliography', name: 'app_bibliography_landing')]
+    public function landing(): Response
+    {
+        return $this->render('bibliography/landing.html.twig', [
+            'controller_name' => 'BibliographyController',
+        ]);
     }
     
+    #[Route('/bibliography/search', name: 'app_bibliography_search')]
+    public function search(): Response
+    {
+        return $this->render('bibliography/search.html.twig', [
+            'controller_name' => 'BibliographyController',
+        ]);
+    }
+    
+    #[Route('/bibliography/add', name: 'app_bibliography_add')]
+    public function add(): Response
+    {
+        return $this->render('bibliography/add.html.twig', [
+            'controller_name' => 'BibliographyController',
+        ]);
+    }
+}

src/Entity/Bibliography.php

@@ -36,10 +36,10 @@ class Bibliography
     #[ORM\Column(name: 'note_bib', type: Types::TEXT)]
     private ?string $notes = null;
 
-    #[ORM\Column(length: 100)]
+    #[ORM\Column(length: 100, name: 'editor')]
     private ?string $editor = null;
 
-    #[ORM\Column(length: 100)]
+    #[ORM\Column(length: 100, name: 'creator')]
     private ?string $creator = null;
 
     public function getId(): ?int
@@ -96,6 +96,18 @@ class Bibliography
         return $this;
     }
 
+    public function getCreator(): ?string
+    {
+        return $this->creator;
+    }
+
+    public function setCreator(string $creator): static
+    {
+        $this->creator = $creator;
+
+        return $this;
+    }
+
     public function getCitation(): ?string
     {
         return $this->citation;

templates/bibliography/index.html.twig

@@ -18,14 +18,15 @@
     </article>
     <div class="card p-5">
         {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}
-        <div class="columns is-desktop">
+        <div class="columns">
-                <div class="column is-three-quarters"></div>
+                <div class="column is-half"></div>
                 <div class="column has-text-right">
                     <button class="button is-link">
                         Edit
                         <span class="icon ml-2">
                             <i class="fa fa-edit"></i>
                         </span>
+                    </button>
                     <button class="button is-danger ml-2">
                         Delete
                         <span class="icon ml-2">

templates/bibliography/landing.html.twig

@@ -0,0 +1,34 @@
+{% extends 'data_entry.html.twig' %}
+
+{% block title %}Bibliography | ArCOA{% endblock %}
+
+{% block rightpanel %}
+<div class="container" style="max-width: 60vw">
+    <h1 class="is-size-1 mt-0 has-text-centered">Bibliography</h1>
+    <h2 class="is-size-3 mt-3 has-text-centered">Choose action</h2>
+
+    <div class="card p-5 mt-6 pt-6 pb-6">
+        <div class="columns">
+            <div class="column is-half has-text-centered">
+                <a href="{{ path('app_bibliography_search') }}" class="button is-large">
+                    Search
+                    <span class="icon ml-2">
+                        <i class="fa fa-search"></i>
+                    </span>
+                </a>
+            </div>
+            {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') or is_granted('ROLE_EDITOR') %}
+            <div class="column has-text-centered">
+                <a href="{{ path('app_bibliography_add') }}" class="button is-link is-large">
+                    Add new
+                    <span class="icon ml-2">
+                        <i class="fa fa-plus"></i>
+                    </span>
+                </a>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+<script type="text/javascript" defer></script>
+{% endblock %}

templates/vocab_func_context/index.html.twig

@@ -9,15 +9,6 @@
 
     <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>
@@ -37,6 +28,14 @@
         </form>
         {% endif %}
 
+        <div class="notification is-success is-hidden mt-5" id="ajax-success">
+          </div>
+        {% for message in app.flashes('notice') %}
+            <div class="notification is-success mt-5" id="server-success">
+                <button class="delete"></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>
@@ -102,7 +101,10 @@
             const notice = document.querySelector('#ajax-success');
 
             if (res.status === 200) {
-                notice.innerHTML += 'Term deleted successfully';
+                notice.innerHTML = `
+                    <button class="delete"></button>
+                    Term updated successfully
+                `;
                 notice.classList.remove('is-hidden');
                 notice.querySelector('.delete').addEventListener('click', () => {
                     notice.classList.add('is-hidden');
@@ -112,13 +114,31 @@
             }
         }
 
-        if (clicked.classList.contains('is-link')) {
+        if (clicked.getAttribute('data-id-edit')) {
             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');
 
+            clicked.classList.toggle('is-link');
+
+            if (!clicked.classList.contains('is-link')) {
+                clicked.innerHTML = `
+                    Cancel
+                    <span class="icon ml-2">
+                        <i class="fa fa-times"></i>
+                    </span>
+                `;
+            } else {
+                clicked.innerHTML = `
+                    Edit
+                    <span class="icon ml-2">
+                        <i class="fa fa-edit"></i>
+                    </span>
+                `;
+            }
+
             const data = new FormData;
             data.append("_id", termId);
             saveBtn.addEventListener('click', async () => {
@@ -131,7 +151,10 @@
                 const notice = document.querySelector('#ajax-success');
 
                 if (res.status === 200) {
-                    notice.innerHTML += 'Term updated successfully';
+                    notice.innerHTML = `
+                        <button class="delete"></button>
+                        Term updated successfully
+                    `;
                     notice.classList.remove('is-hidden');
                     notice.querySelector('.delete').addEventListener('click', () => {
                         notice.classList.add('is-hidden');