feat: manual sorting of additional services

templates/admin/accommodation/_form.html.twig

@@ -233,15 +233,21 @@
 
 <hr class="my-8">
 
-<section id="additional-services">
+<section id="additional-services" {{ stimulus_controller('sortable', {
+    url: path('app_admin_accommodation_additionalservices_order', { id: accommodation.id })
+}) }}>
     <h2 class="text-xl font-bold">
         Optionale Zusatzleistungen
     </h2>
+    <p class="text-sm text-gray-500 mb-2">
+        Die Reihenfolge wird per Drag &amp; Drop festgelegt und gilt auch für das Buchungsformular.
+    </p>
     <div class="data-table-wrapper mb-4">
         <div class="data-table-wrapper__inner text-sm">
             <table class="data-table">
                 <thead>
                 <tr>
+                    <th class="w-8"></th>
                     <th>
                         Datums-Bereich
                     </th>
@@ -257,9 +263,12 @@
                     <th></th>
                 </tr>
                 </thead>
-                <tbody>
+                <tbody {{ stimulus_target('sortable', 'list') }}>
                 {% for service in additionalServices %}
-                    <tr>
+                    <tr {{ stimulus_target('sortable', 'item') }} data-sortable-id="{{ service.id }}">
+                        <td class="cursor-grab text-gray-400" {{ stimulus_target('sortable', 'handle') }}>
+                            {{ icon('draggable', 'w-4 h-4') }}
+                        </td>
                         <td>
                             {{ service.dateFrom | date('d.m.Y') }} - {{ service.dateTo | date('d.m.Y') }}
                         </td>
@@ -288,7 +297,7 @@
                     </tr>
                 {% else %}
                     <tr>
-                        <td colspan="5" class="text-center">
+                        <td colspan="6" class="text-center">
                             Keine Daten
                         </td>
                     </tr>
@@ -297,7 +306,8 @@
             </table>
         </div>
     </div>
-    <div class="flex justify-end">
+    <div class="flex items-center justify-between">
+        <span class="text-sm text-gray-500" {{ stimulus_target('sortable', 'status') }}></span>
         <a href="{{ path('app_admin_additionalservice_create', { 'id': accommodation.id }) }}" class="button button--primary button--small">
             neu
         </a>