ajout du sortable

assets/controllers/sortable_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus";
+
+import Sortable from 'sortablejs'
+
+export default class extends Controller {
+    connect() {
+        this.sortable = new Sortable(this.element, {
+            animation: 150,
+            handle: 'tr',
+            onEnd: this.end.bind(this),
+        });
+    }
+
+    end(event) {
+        let order = [];
+        this.element.querySelectorAll('tr').forEach((row, index) => {
+            order.push({
+                id: row.dataset.id,
+                position: index + 1
+            });
+        });
+
+        fetch(this.data.get('url'), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest'
+            },
+            body: JSON.stringify({order: order})
+        }).then(Response => {
+            if(Response.ok) {
+                this.sortable.sort(order.map(item =>item.id))
+            }
+        });
+    }
+}

package.json

@@ -13,6 +13,7 @@
         "regenerator-runtime": "^0.13.9",
         "sass": "^1.83.1",
         "sass-loader": "^16.0.1",
+        "sortablejs": "^1.15.6",
         "webpack": "^5.74.0",
         "webpack-cli": "^5.1.0",
         "webpack-notifier": "^1.15.0"

src/Controller/IndexController.php

@@ -33,4 +33,13 @@ class IndexController extends AbstractController
             'form' => $form
         ]);
     }
+
+    #[Route('/update-order', name: 'update_order', methods: ['POST'])]
+    public function updateOrder(Request $request): Response
+    {
+        $order = json_decode($request->getContent(), true)['order'];
+        dump($order);
+
+        return new Response('Order updated', Response::HTTP_OK);
+    }
 }

templates/index/index.html.twig

@@ -15,11 +15,11 @@
             <th>Genre</th>
         </tr>
     </thead>
-    <tbody>
+    <tbody data-controller="sortable" data-sortable-url="{{ path('update_order') }}">
         {% for film in films %}
-        <tr>
+        <tr data-id="{{ film.id }}">
             <td>
-            <a href="{{ path('app_index', {'id': film.id} ) }}"><i class="fa fa-edit"></i></a>
+                <a href="{{ path('app_index', {'id': film.id} ) }}"><i class="fa fa-edit"></i></a>
             </td>
             <td>{{ film.name }}</td>
             <td>{{ film.realisateur }}</td>

yarn.lock

@@ -2785,6 +2785,11 @@ shellwords@^0.1.1:
   resolved "http://nexus.intra.cnaf/repository/npm-public/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+sortablejs@^1.15.6:
+  version "1.15.6"
+  resolved "http://nexus.intra.cnaf/repository/npm-public/sortablejs/-/sortablejs-1.15.6.tgz#ff93699493f5b8ab8d828f933227b4988df1d393"
+  integrity sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "http://nexus.intra.cnaf/repository/npm-public/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"