Admin auditions page is now drag and drop sortable

app/Http/Controllers/Admin/AuditionController.php

@@ -6,13 +6,14 @@ use App\Http\Controllers\Controller;
 use App\Models\Audition;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
+use function response;
 
 class AuditionController extends Controller
 {
     public function index()
     {
         if(! Auth::user()->is_admin) abort(403);
-        $auditions = Audition::with(['event','entries'])->orderBy('score_order')->paginate(10);
+        $auditions = Audition::with(['event','entries'])->orderBy('score_order')->get();
         return view('admin.auditions.index', ['auditions' => $auditions] );
     }
 
@@ -27,4 +28,18 @@ class AuditionController extends Controller
         if(! Auth::user()->is_admin) abort(403);
         return view('admin.auditions.edit', ['audition' => $audition]);
     }
+
+    public function reorder(Request $request)
+    {
+
+        $order = $request->order;
+        foreach ($order as $index => $id) {
+            $audition = Audition::find($id);
+            #$audition->score_order = $index;
+            #return response()->json(['status' => $index]);
+            #$item->save();
+            $audition->update(['score_order' => $index]);
+        }
+        return response()->json(['status' => 'success']);
+    }
 }

resources/views/admin/auditions/index.blade.php

@@ -22,9 +22,10 @@
 
             </tr>
             </thead>
-            <x-table.body>
+            <div x-data="sortableList()" x-init="init">
+            <x-table.body id="sortable-list">
                 @foreach($auditions as $audition)
-                    <tr>
+                    <tr data-id="{{ $audition->id }}">
                         <x-table.td>{{ $audition->event->name }}</x-table.td>
                         <x-table.td>{{ $audition->name }}</x-table.td>
                         <x-table.td>{{ $audition->score_order }}</x-table.td>
@@ -35,11 +36,45 @@
                     </tr>
                 @endforeach
             </x-table.body>
+            </div>
         </x-table.table>
 
     </x-card.card>
     <div class="mt-3 mx-3">
-        {{ $auditions->links('vendor.pagination.simple-audition') }}
+{{--        {{ $auditions->links('vendor.pagination.simple-audition') }}--}}
     </div>
+
+    <script>
+        function sortableList() {
+            return {
+                init() {
+                    let el = document.getElementById('sortable-list');
+                    let sortable = Sortable.create(el, {
+                        onEnd: function (evt) {
+                            let order = Array.from(el.children).map((item, index) => item.getAttribute('data-id'));
+                            fetch('/admin/auditions/reorder', {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                },
+                                body: JSON.stringify({ order })
+                            }).then(response => response.json())
+                                .then(data => {
+                                    if (data.status === 'success') {
+                                        console.log('Order updated successfully');
+                                    }
+                                    else {
+                                        console.log(data.status);
+                                    }
+                                });
+                        }
+                    });
+                }
+            }
+        }
+    </script>
+
+
 </x-layout.app>
 {{--TODO add options to filter the page--}}

resources/views/components/layout/app.blade.php

@@ -14,6 +14,7 @@
     {{--    One level above the table needs x-data="data()"   --}}
     {{--    tbody needs x-ref="tbody"   --}}
     <script src="{{ asset('js/sort_table_by_column.js') }}"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
 </head>
 <body class="h-full">
 

routes/web.php

@@ -36,6 +36,7 @@ Route::middleware(['auth','verified',CheckIfAdmin::class])->prefix('admin/')->gr
         Route::post('/','store');
         Route::get('/{entry}/edit','edit');
         Route::patch('/{entry}','update');
+        Route::post('/reorder','reorder');
     });
 
     // Admin Entries Routes