refactor: replace livewire search with alpine component

Livewire has too many issues that are never fixed. Examples include:

- Trying to initialize the component before validating the arguments are even correct, which causes error 500s when a user enters letters into a numeric field
- Not being able to handle clicking tickboxes quicker than responses are returned.
- Requires unsafe inline JS enabled for the CSP.

This is a proof of concept of how one might use alpine, alpine morph and blade fragments to replace livewire.

Author: Roardom

app/Http/Controllers/Staff/ApplicationController.php

@@ -28,6 +28,7 @@
 use Illuminate\Support\Facades\Mail;
 use Ramsey\Uuid\Uuid;
 use Exception;
+use Illuminate\Http\Request;
 
 /**
  * @see \Tests\Todo\Feature\Http\Controllers\Staff\ApplicationControllerTest
@@ -37,9 +38,22 @@ class ApplicationController extends Controller
     /**
      * Display All Applications.
      */
-    public function index(): \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+    public function index(Request $request): \Illuminate\Contracts\View\Factory|\Illuminate\View\View|string
     {
-        return view('Staff.application.index');
+        return view('Staff.application.index', [
+            'applications' => Application::query()
+                ->withoutGlobalScopes()
+                ->with([
+                    'user.group',
+                    'moderated.group',
+                    'imageProofs',
+                    'urlProofs'
+                ])
+                ->when($request->filled('email'), fn ($query) => $query->where('email', 'LIKE', '%'.$request->email.'%'))
+                ->when($request->filled('status'), fn ($query) => $query->where('status', '=', $request->status))
+                ->orderBy($request->sortField ?? 'created_at', $request->sortDirection ?? 'desc')
+                ->paginate($request->integer('perPage', 25)),
+        ])->fragmentIf($request->hasHeader('UNIT3D-Request'), 'application-search');
     }
 
     /**
@@ -52,6 +66,21 @@ public function show(int $id): \Illuminate\Contracts\View\Factory|\Illuminate\Vi
         ]);
     }
 
+    /**
+     * Delete an application.
+     */
+    public function destroy(Request $request, int $id): void
+    {
+        abort_unless($request->user()->group->is_modo, 403);
+
+        $application = Application::withoutGlobalScopes()->findOrFail($id);
+        $application->urlProofs()->delete();
+        $application->imageProofs()->delete();
+        $application->delete();
+
+        $this->dispatch('success', type: 'success', message: 'Application has successfully been deleted!');
+    }
+
     /**
      * Approve A Application.
      *

app/Http/Livewire/ApplicationSearch.php

@@ -5,6 +5,7 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@alpinejs/morph": "^3.15.0",
     "ajv": "^8.17.1",
     "alpinejs": "^3.14.8",
     "axios": "^1.7.9",

bun.lockb

@@ -37,6 +37,9 @@ import.meta.glob(['/public/img/pipes/**', '/resources/sass/vendor/webfonts/font-
 
 // Livewire + AlpineJS
 import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm.js';
+import morph from '@alpinejs/morph';
+
+Alpine.plugin(morph);
 
 // Custom AlpineJS Components
 import './components/alpine/chatbox';
@@ -47,6 +50,7 @@ import './components/alpine/dislikeButton';
 import './components/alpine/likeButton';
 import './components/alpine/livewireDialog';
 import './components/alpine/posterRow';
+import './components/alpine/searchPanel';
 import './components/alpine/smallBookmarkButton';
 import './components/alpine/tabs';
 import './components/alpine/toggle';

package.json

@@ -0,0 +1,101 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('searchPanel', (defaultSortField = null, defaultSortDirection = 'desc') => ({
+        sortField: defaultSortField,
+        sortDirection: defaultSortDirection,
+        page: 1,
+        init() {
+            this.$root.querySelectorAll('.data-table th:has([data-sort-by])').forEach((th) => {
+                Alpine.bind(th, {
+                    'x-data'() {
+                        return {
+                            column: th.dataset.sortBy,
+                        };
+                    },
+                    'x-on:click'() {
+                        if (this.sortField === this.column && this.sortDirection === 'asc') {
+                            this.sortDirection = 'desc';
+                        } else {
+                            this.sortDirection = 'asc';
+                        }
+
+                        this.sortField = this.column;
+
+                        this.updatePanel();
+                    },
+                    'x-bind:role'() {
+                        return 'columnheader button';
+                    },
+                });
+            });
+            Alpine.bind(this.$root.querySelector('.panel__actions'), {
+                'x-on:input'(event) {
+                    this.updatePanel();
+                },
+            });
+            this.$root
+                .querySelectorAll('.pagination__link, .pagination__previous, .pagination__next')
+                .forEach((link) => {
+                    Alpine.bind(link, {
+                        'x-on:click.prevent'() {
+                            this.page = new URL(this.$el.href).searchParams.get('page');
+
+                            this.updatePanel();
+                        },
+                    });
+                });
+        },
+        getFilters() {
+            let form = this.$root.querySelector('.panel__actions');
+            const formData = new FormData(form);
+            const filters = new URLSearchParams(formData);
+
+            form.querySelectorAll('[name]').forEach((el) => {
+                let defaultValue = null;
+
+                switch (true) {
+                    case el instanceof HTMLInputElement:
+                    case el instanceof HTMLTextAreaElement:
+                        defaultValue = el.defaultValue;
+                        break;
+                    case el instanceof HTMLSelectElement:
+                        defaultValue = Array.from(el.options).find(
+                            (option) => option.defaultSelected,
+                        )?.value;
+                        break;
+                }
+
+                if (filters.get(el.name) === (defaultValue ?? '')) {
+                    filters.delete(el.name);
+                }
+            });
+
+            return filters;
+        },
+        updatePanel() {
+            let params = this.getFilters();
+
+            if (this.sortField !== null && this.sortField !== defaultSortField) {
+                params.append('sortField', this.sortField);
+            }
+
+            if (this.sortField !== null && this.sortDirection !== defaultSortDirection) {
+                params.append('sortDirection', this.sortDirection);
+            }
+
+            if (this.page !== 1) {
+                params.append('page', this.page);
+            }
+
+            const newUrl = `${window.location.protocol}//${window.location.host}${window.location.pathname}?${params}`;
+            window.history.pushState({ path: newUrl }, '', newUrl);
+
+            axios
+                .get(newUrl, {
+                    headers: {
+                        'UNIT3D-Request': true,
+                    },
+                })
+                .then((newHtml) => Alpine.morph(this.$root, newHtml.data));
+        },
+    }));
+});