introduce reorder action

resources/js/controllers/reorder_controller.js

@@ -0,0 +1,45 @@
+import ApplicationController from "./application_controller"
+import Sortable from 'sortablejs';
+
+export default class extends ApplicationController {
+
+    static values = {
+        handleSelector: String,
+        sortableSelector: String
+    }
+
+    connect() {
+        this.initSortable();
+    }
+
+    initSortable() {
+        new Sortable(this.element.closest(this.sortableSelectorValue), {
+            animation: 150,
+            handle: this.handleSelectorValue,
+            dragClass: "reorder-drag",
+            onEnd: (event) => {
+                this.reorderElement(event.item, event.newIndex - event.oldIndex);
+            },
+        });
+    }
+
+    reorderElement(item, offset) {
+        const handle = item.querySelector(this.handleSelectorValue);
+
+        if (handle === null) {
+            return;
+        }
+
+        axios
+            .post(handle.dataset.action, {
+                key: handle.dataset.key,
+                offset: offset,
+            })
+            .then(
+                () => this.alert(handle.dataset.successMessage, '', 'success')
+            )
+            .catch(
+                () => this.alert(handle.dataset.failureMessage, '', 'error')
+            );
+    }
+}

resources/views/partials/layouts/reorderHandle.blade.php

@@ -0,0 +1,27 @@
+<td class="text-{{$align}} @if(!$width) text-truncate @endif"
+    data-column="{{ $slug }}" colspan="{{ $colspan }}"
+    @empty(!$width)style="min-width:{{ is_numeric($width) ? $width . 'px' : $width }};"@endempty
+>
+    <div class="reorder-handle"
+          data-controller="reorder"
+          data-reorder-sortable-selector-value="tbody"
+          data-reorder-handle-selector-value=".reorder-handle"
+          data-key="{{ $value }}"
+          data-action="{{ $action }}"
+          data-success-message="{{ $success }}"
+          data-failure-message="{{ $failure }}"
+    >
+        <x-orchid-icon :path="$icon" />
+    </div>
+</td>
+
+@pushonce('stylesheets')
+    <style>
+        .reorder-drag {
+            opacity: 0;
+        }
+        .reorder-handle {
+            cursor: move;
+        }
+    </style>
+@endpushonce

src/Screen/ReorderHandle.php

@@ -0,0 +1,71 @@
+<?php
+
+namespace Orchid\Screen;
+
+use Illuminate\Contracts\View\Factory;
+use Illuminate\Contracts\View\View;
+use InvalidArgumentException;
+
+class ReorderHandle extends TD
+{
+    protected string $action = '';
+
+    protected string $icon = 'menu';
+
+    protected string $failureMessage;
+
+    protected string $successMessage;
+
+    public function buildTd($repository, ?object $loop = null): Factory|View
+    {
+        $value = $this->render ? $this->handler($repository, $loop) : $repository->getContent($this->name);
+
+        return view('platform::partials.layouts.reorderHandle', [
+            'action'  => $this->action,
+            'align'   => $this->align,
+            'colspan' => $this->colspan,
+            'failure' => $this->failureMessage ?? __('Item move failed'),
+            'icon'    => $this->icon,
+            'slug'    => $this->sluggable(),
+            'success' => $this->successMessage ?? __('Item successfully moved'),
+            'value'   => $value,
+            'width'   => $this->width,
+        ]);
+    }
+
+    public function action(string $url): static
+    {
+        if (! filter_var($url, FILTER_VALIDATE_URL)) {
+            throw new InvalidArgumentException('Argument #1 ($url) must be a URL');
+        }
+
+        $this->action = $url;
+
+        return $this;
+    }
+
+    public function icon(string $name): static
+    {
+        $this->icon = $name;
+
+        return $this;
+    }
+
+    public function messages(string $success, string $failure): static
+    {
+        $this->failureMessage = $failure;
+        $this->successMessage = $success;
+
+        return $this;
+    }
+
+    public function method(string $name, array $parameters = []): static
+    {
+        $url = request()->header('ORCHID-ASYNC-REFERER', url()->current());
+        $query = http_build_query($parameters);
+
+        $this->action = rtrim("{$url}/{$name}?{$query}", '/?');
+
+        return $this;
+    }
+}