Copy collection; Stimulus controller for vocabs (incomplete)

assets/controllers/vocabs_controller.js

@@ -0,0 +1,74 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = [
+        'row',
+        'term',
+        'input',
+        'save',
+        'edit',
+        'cancel',
+    ];
+
+    static values = {
+        saveUrl: String,
+    };
+
+    /**
+     * @todo Simpler way? 
+     */
+    edit(event) {
+        const id = event.currentTarget.getAttribute('data-vocabs-id-value');
+
+        this.saveTargets.forEach((btn, index) => {
+            if (btn.getAttribute('data-vocabs-id-value') === id) {
+                btn.classList.toggle('is-hidden');
+                this.inputTargets[index].disabled = false;
+                this.cancelTargets[index].classList.toggle('is-hidden');
+            }
+        });
+
+        event.currentTarget.classList.add('is-hidden');
+    }
+
+    async save(event) {
+        const id = event.currentTarget.getAttribute('data-vocabs-id-value');
+        let term = '';
+
+        for (let input of this.inputTargets) {
+            if (input.getAttribute('data-vocabs-id-value') === id) {
+                term = input.value;
+            }
+        }
+
+        let data = new FormData;
+        data.append("_id", id);
+        data.append("_new_term", term);
+
+        const res = await fetch(this.saveUrlValue, {
+            method: "POST",
+            body: data,
+        });
+
+        // TODO: show notification
+        if (res.status === 200) {
+            console.log('Saved...');
+        };
+    }
+
+    delete() {
+    }
+
+    cancel(event) {
+        const id = event.currentTarget.getAttribute('data-vocabs-id-value');
+
+        this.editTargets.forEach((btn, index) => {
+            if (btn.getAttribute('data-vocabs-id-value') === id) {
+                btn.classList.toggle('is-hidden');
+                this.inputTargets[index].disabled = true;
+                this.saveTargets[index].classList.toggle('is-hidden');
+                this.cancelTargets[index].classList.toggle('is-hidden');
+            }
+        });
+    }
+}

src/Controller/BibliographyController.php

@@ -12,6 +12,7 @@ use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 use Symfony\Component\Security\Core\Exception\AccessDeniedException;
+use DateTimeImmutable;
 
 class BibliographyController extends AbstractController
 {
@@ -92,7 +93,7 @@ class BibliographyController extends AbstractController
     }
 
     /**
-     * @todo Permissions! Return JSON with 403 when AJAX
+     * @todo Move clone logic to __clone() in Entity or Repository
      */
     #[Route('/bibliography/copy/{id<\d+>}', name: 'app_bibliography_copy')]
     public function copy(Bibliography $bibliography, EntityManagerInterface $em): Response
@@ -108,7 +109,6 @@ class BibliographyController extends AbstractController
         $user = $this->getUser();
         $editor = "{$user->getFirstname()} {$user->getLastName()}"; 
 
-        // TODO Move clone logic to __clone() in Entity or Repository
         $copy = clone $bibliography;
         $copy->setEditor($editor);
         $copy->setOwner($editor);
@@ -122,10 +122,13 @@ class BibliographyController extends AbstractController
             $repo->findAllByBibliography($bibliography->getId())
         );
         $copy->setCitation("{$bibliography->getCitation()} - Copy");
+        $copy->setModifiedAt(new DateTimeImmutable());
 
         $em->persist($copy);
         $em->flush();
 
+        $this->addFlash('notice', 'Record copied successfully');
+
         return $this->redirectToRoute('app_bibliography', ['id' => $copy->getId()]);
     }
 }

src/Controller/CollectionController.php

@@ -4,6 +4,7 @@ namespace App\Controller;
 
 use App\Entity\Collection;
 use App\Entity\Bibliography;
+use App\Entity\Collector;
 use App\Security\Voter\RecordVoter;
 use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
@@ -61,4 +62,45 @@ class CollectionController extends AbstractController
 
         return $this->redirectToRoute('app_collection_landing');
     }
+    /**
+     * @todo Move clone logic to __clone() in Entity or Repository
+     */
+    #[Route('/collection/copy/{id<\d+>}', name: 'app_collection_copy')]
+    public function copy(Collection $collection, EntityManagerInterface $em): Response
+    {
+        try {
+            $this->denyAccessUnlessGranted(RecordVoter::EDIT, $collection);
+        }
+        catch (AccessDeniedException) {
+            $this->addFlash('warning', 'You are not authorized to copy this record');
+            return $this->redirectToRoute('app_home');
+        }
+
+        $user = $this->getUser();
+        $editor = "{$user->getFirstname()} {$user->getLastName()}"; 
+
+        $copy = clone $collection;
+        $copy->setEditor($editor);
+        $copy->setOwner($editor);
+        $copy->setCreator($user->getUsername());
+        $repo = $em->getRepository(Bibliography::class);
+        $copy->setBibliographies(
+            $repo->findAllByCollection($collection->getId())
+        );
+        /*
+        $repo = $em->getRepository(Collector::class);
+        $copy->setCollectors(
+            $repo->findAllByBibliography($bibliography->getId())
+        );
+        */
+        $copy->setTitle("{$collection->getTitle()} - Copy");
+        $copy->setModifiedAt(new \DateTimeImmutable());
+
+        $em->persist($copy);
+        $em->flush();
+
+        $this->addFlash('notice', 'Record copied successfully');
+
+        return $this->redirectToRoute('app_collection', ['id' => $copy->getId()]);
+    }
 }

templates/bibliography/index.html.twig

@@ -7,6 +7,15 @@
     <h1 class="is-size-1 mt-0 has-text-centered">Bibliography</h1>
     <h2 class="is-size-3 mt-3 has-text-centered">{{ record.citation }}</h2>
 
+    {% for message in app.flashes('notice') %}
+        <div class=" mt-4 notification is-success"
+            data-controller="notification"
+            data-notification-target="notif">
+            <button class="delete" data-action="click->notification#close"></button>
+            {{ message }}
+        </div>
+    {% endfor %}
+
     <article class="message is-info mt-3">
         <div class="message-body">
             <p>

templates/bibliography/landing.html.twig

@@ -8,11 +8,14 @@
     <h2 class="is-size-3 mt-3 has-text-centered">Choose action</h2>
 
     {% for message in app.flashes('notice') %}
-        <div class=" mt-4 notification is-success">
-            <button class="delete"></button>
+        <div class=" mt-4 notification is-success"
+            data-controller="notification"
+            data-notification-target="notif">
+            <button class="delete" data-action="click->notification#close"></button>
             {{ message }}
         </div>
     {% endfor %}
+
     <div class="card p-5 mt-6 pt-6 pb-6">
         <div class="columns">
             <div class="column is-half has-text-centered">
@@ -100,12 +103,4 @@
         </div>
     </div>
 </div>
-<script type="text/javascript" defer>
-    const delBtns = document.querySelectorAll('.delete');
-    for (let btn of delBtns) {
-        btn.addEventListener('click', function () {
-            this.parentElement.classList.add('is-hidden');
-        })
-    }
-</script>
 {% endblock %}

templates/collection/index.html.twig

@@ -7,6 +7,15 @@
     <h1 class="is-size-1 mt-0 has-text-centered">Collection</h1>
     <h2 class="is-size-3 mt-3 has-text-centered">{{ record.title }}</h2>
 
+    {% for message in app.flashes('notice') %}
+        <div class=" mt-4 notification is-success"
+            data-controller="notification"
+            data-notification-target="notif">
+            <button class="delete" data-action="click->notification#close"></button>
+            {{ message }}
+        </div>
+    {% endfor %}
+
     <article class="message is-info mt-3">
         <div class="message-body">
             <p>
@@ -27,12 +36,13 @@
                         <i class="fa fa-edit"></i>
                     </span>
                 </button>
-                <button class="button is-link">
+                <a href="{{ path('app_collection_copy', {'id' : record.id}) }}"
+                    class="button is-link">
                     Copy
                     <span class="icon ml-2">
                         <i class="fa fa-copy"></i>
                     </span>
-                </button>
+                </a>
                 <a href="{{ path('app_collection_del', {'id' : record.id}) }}"
                     class="button is-danger"
                     data-delete-record-target="path" data-action="click->delete-record#show">

templates/collection/landing.html.twig

@@ -8,8 +8,10 @@
     <h2 class="is-size-3 mt-3 has-text-centered">Choose action</h2>
 
     {% for message in app.flashes('notice') %}
-        <div class=" mt-4 notification is-success">
-            <button class="delete"></button>
+       <div class=" mt-4 notification is-success"
+            data-controller="notification"
+            data-notification-target="notif">
+            <button class="delete" data-action="click->notification#close"></button>
             {{ message }}
         </div> 
     {% endfor %}
@@ -100,12 +102,4 @@
         </div>
     </div>
 </div>
-<script type="text/javascript" defer>
-    const delBtns = document.querySelectorAll('.delete');
-    for (let btn of delBtns) {
-        btn.addEventListener('click', function () {
-            this.parentElement.classList.add('is-hidden');
-        })
-    }
-</script>
 {% endblock %}

templates/collector/landing.html.twig

@@ -8,8 +8,10 @@
     <h2 class="is-size-3 mt-3 has-text-centered">Choose action</h2>
 
     {% for message in app.flashes('notice') %}
-        <div class=" mt-4 notification is-success">
-            <button class="delete"></button>
+       <div class=" mt-4 notification is-success"
+            data-controller="notification"
+            data-notification-target="notif">
+            <button class="delete" data-action="click->notification#close"></button>
             {{ message }}
         </div> 
     {% endfor %}
@@ -100,12 +102,4 @@
         </div>
     </div>
 </div>
-<script type="text/javascript" defer>
-    const delBtns = document.querySelectorAll('.delete');
-    for (let btn of delBtns) {
-        btn.addEventListener('click', function () {
-            this.parentElement.classList.add('is-hidden');
-        })
-    }
-</script>
 {% endblock %}

templates/login/index.html.twig

@@ -12,7 +12,8 @@
 
     <div class="card" style="max-width: 40vw; margin: 0 auto;">
         {% if error %}
-            <div class="notification is-danger is-light" data-controller="notification" data-notification-target="notif">
+            <div class="notification is-danger is-light" data-controller="notification"
+                data-notification-target="notif">
                 <button class="delete" data-action="click->notification#close"></button>
                 Wrong user name and/or password. Please retry
             </div>

templates/vocab_func_context/index.html.twig

@@ -28,38 +28,63 @@
         </form>
         {% endif %}
 
-        <div class="notification is-success is-hidden mt-5" id="ajax-success">
+        <div class="notification is-success is-hidden mt-5"
+            data-controller="notification"
+            data-notification-target=""="notif">
+            <button class="delete" data-action="click->notification#close"></button>
         </div>
         {% for message in app.flashes('notice') %}
-            <div class="notification is-success mt-5" id="server-success">
-                <button class="delete"></button>
+            <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">
+        <table class="table is-fullwidth" id="terms" data-controller="vocabs">
             <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 }}">
+            <tr data-vocabs-target="row"
+                data-vocabs-id-value="{{ term.id }}">
                 <td>
-                    <input class="input" type="text" value="{{ term.term }}" disabled data-term-id="{{ term.id }}" />
+                    <input class="input" type="text" value="{{ term.term }}" disabled
+                    data-vocabs-id-value="{{ 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-id-save="{{ term.id }}">
+                        <button class="button is-primary is-hidden"
+                            data-vocabs-target="save"
+                            data-action="click->vocabs#save"
+                            data-vocabs-saveUrl-value="{{ path('app_vocab_func_context_upd') }}"
+                            data-vocabs-id-value="{{ 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 }}">
+                        <button class="button is-hidden"
+                            data-vocabs-id-value="{{ 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-vocabs-id-value="{{ 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-delete="{{ term.id }}">
+                        <button class="button is-danger"
+                            data-vocabs-id-value="{{ term.id }}"
+                            data-action="click->vocabs#delete"
+                            data-vocabs-delUrl-value="{{ path('app_vocab_func_context_del') }}">
                             Delete
                             <span class="icon ml-2">
                                 <i class="fa fa-trash"></i>
@@ -74,94 +99,5 @@
 
     </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.getAttribute('data-id-delete')) {
-            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 = `
-                    <button class="delete"></button>
-                    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.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 () => {
-                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 = `
-                        <button class="delete"></button>
-                        Term updated successfully
-                    `;
-                    notice.classList.remove('is-hidden');
-                    notice.querySelector('.delete').addEventListener('click', () => {
-                        notice.classList.add('is-hidden');
-                    });
-                }
-            });
-        }
-    });
-</script>
+<script type="text/javascript" defer></script>
 {% endblock %}