From 527c30a6067e9e6ba924e204119b4798bd044357 Mon Sep 17 00:00:00 2001
From: gkakosouris <>
Date: Fri, 16 Sep 2022 18:12:57 +0300
Subject: [PATCH 1/2] introduce reorder action

---
 .../js/controllers/reorder_controller.js      | 45 ++++++++++
 .../views/actions/reorderHandle.blade.php     | 22 +++++
 src/Screen/Actions/ReorderHandle.php          | 83 +++++++++++++++++++
 3 files changed, 150 insertions(+)
 create mode 100644 resources/js/controllers/reorder_controller.js
 create mode 100644 resources/views/actions/reorderHandle.blade.php
 create mode 100644 src/Screen/Actions/ReorderHandle.php

diff --git a/resources/js/controllers/reorder_controller.js b/resources/js/controllers/reorder_controller.js
new file mode 100644
index 0000000000..77691b383e
--- /dev/null
+++ b/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')
+            );
+    }
+}
diff --git a/resources/views/actions/reorderHandle.blade.php b/resources/views/actions/reorderHandle.blade.php
new file mode 100644
index 0000000000..ade81066f0
--- /dev/null
+++ b/resources/views/actions/reorderHandle.blade.php
@@ -0,0 +1,22 @@
+<span {{ $attributes }}
+      data-key="{{ $key }}"
+      data-action="{{ $action }}"
+      data-controller="reorder"
+      data-reorder-sortable-selector-value="{{ $container }}"
+      data-reorder-handle-selector-value=".reorder-handle"
+      data-success-message="{{ $successMessage ?? __('Item successfully moved') }}"
+      data-failure-message="{{ $failureMessage ?? __('Item move failed') }}"
+>
+    <x-orchid-icon :path="$icon" />
+</span>
+
+@pushonce('stylesheets')
+    <style>
+        .reorder-drag {
+            opacity: 0;
+        }
+        .reorder-handle {
+            cursor: move;
+        }
+    </style>
+@endpushonce
diff --git a/src/Screen/Actions/ReorderHandle.php b/src/Screen/Actions/ReorderHandle.php
new file mode 100644
index 0000000000..47e74b238a
--- /dev/null
+++ b/src/Screen/Actions/ReorderHandle.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace Orchid\Screen\Actions;
+
+use Orchid\Screen\Action;
+
+/**
+ * @method ReorderHandle action(string $url)
+ * @method ReorderHandle container(string $selector)
+ * @method ReorderHandle icon(string $icon)
+ * @method ReorderHandle key(string $key)
+ * @method ReorderHandle successMessage(string $message)
+ * @method ReorderHandle failureMessage(string $message)
+ */
+class ReorderHandle extends Action
+{
+    /**
+     * View template show.
+     *
+     * @var string
+     */
+    protected $view = 'platform::actions.reorderHandle';
+
+    /**
+     * All attributes that are available to the field.
+     *
+     * @var array
+     */
+    protected $attributes = [
+        'action'         => null,
+        'method'         => null,
+        'icon'           => 'menu',
+        'container'      => 'tbody',
+        'successMessage' => null,
+        'failureMessage' => null,
+        'parameters'     => [],
+    ];
+
+    /**
+     * Required Attributes.
+     *
+     * @var array
+     */
+    protected $required = [
+        'key',
+    ];
+
+    public function __construct()
+    {
+        $this->addBeforeRender(function () {
+            $this->set('action', $this->getAction());
+            $this->set('class', $this->getClass());
+        });
+    }
+
+    public function method(string $name, array $parameters = []): static
+    {
+        return $this
+            ->set('method', $name)
+            ->set('parameters', $parameters);
+    }
+
+    protected function getAction()
+    {
+        $action = $this->get('action');
+
+        if ($action === null) {
+            $url = request()->header('ORCHID-ASYNC-REFERER', url()->current());
+            $query = http_build_query($this->get('parameters', []));
+            $action = rtrim("{$url}/{$this->get('method')}?{$query}", '/?');
+        }
+
+        return $action;
+    }
+
+    protected function getClass(): string
+    {
+        $classes = explode(' ', $this->get('class'));
+        $classes[] = 'reorder-handle';
+
+        return implode(' ', array_filter($classes));
+    }
+}

From 443e843a37a4dea2d0af57f62212d024f7ac6f6b Mon Sep 17 00:00:00 2001
From: gkakosouris <>
Date: Sat, 24 Sep 2022 11:00:27 +0300
Subject: [PATCH 2/2] convert reorder action to column

---
 .../views/actions/reorderHandle.blade.php     | 22 -----
 .../partials/layouts/reorderHandle.blade.php  | 27 ++++++
 src/Screen/Actions/ReorderHandle.php          | 83 -------------------
 src/Screen/ReorderHandle.php                  | 71 ++++++++++++++++
 4 files changed, 98 insertions(+), 105 deletions(-)
 delete mode 100644 resources/views/actions/reorderHandle.blade.php
 create mode 100644 resources/views/partials/layouts/reorderHandle.blade.php
 delete mode 100644 src/Screen/Actions/ReorderHandle.php
 create mode 100644 src/Screen/ReorderHandle.php

diff --git a/resources/views/actions/reorderHandle.blade.php b/resources/views/actions/reorderHandle.blade.php
deleted file mode 100644
index ade81066f0..0000000000
--- a/resources/views/actions/reorderHandle.blade.php
+++ /dev/null
@@ -1,22 +0,0 @@
-<span {{ $attributes }}
-      data-key="{{ $key }}"
-      data-action="{{ $action }}"
-      data-controller="reorder"
-      data-reorder-sortable-selector-value="{{ $container }}"
-      data-reorder-handle-selector-value=".reorder-handle"
-      data-success-message="{{ $successMessage ?? __('Item successfully moved') }}"
-      data-failure-message="{{ $failureMessage ?? __('Item move failed') }}"
->
-    <x-orchid-icon :path="$icon" />
-</span>
-
-@pushonce('stylesheets')
-    <style>
-        .reorder-drag {
-            opacity: 0;
-        }
-        .reorder-handle {
-            cursor: move;
-        }
-    </style>
-@endpushonce
diff --git a/resources/views/partials/layouts/reorderHandle.blade.php b/resources/views/partials/layouts/reorderHandle.blade.php
new file mode 100644
index 0000000000..9aad5e21f3
--- /dev/null
+++ b/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
diff --git a/src/Screen/Actions/ReorderHandle.php b/src/Screen/Actions/ReorderHandle.php
deleted file mode 100644
index 47e74b238a..0000000000
--- a/src/Screen/Actions/ReorderHandle.php
+++ /dev/null
@@ -1,83 +0,0 @@
-<?php
-
-namespace Orchid\Screen\Actions;
-
-use Orchid\Screen\Action;
-
-/**
- * @method ReorderHandle action(string $url)
- * @method ReorderHandle container(string $selector)
- * @method ReorderHandle icon(string $icon)
- * @method ReorderHandle key(string $key)
- * @method ReorderHandle successMessage(string $message)
- * @method ReorderHandle failureMessage(string $message)
- */
-class ReorderHandle extends Action
-{
-    /**
-     * View template show.
-     *
-     * @var string
-     */
-    protected $view = 'platform::actions.reorderHandle';
-
-    /**
-     * All attributes that are available to the field.
-     *
-     * @var array
-     */
-    protected $attributes = [
-        'action'         => null,
-        'method'         => null,
-        'icon'           => 'menu',
-        'container'      => 'tbody',
-        'successMessage' => null,
-        'failureMessage' => null,
-        'parameters'     => [],
-    ];
-
-    /**
-     * Required Attributes.
-     *
-     * @var array
-     */
-    protected $required = [
-        'key',
-    ];
-
-    public function __construct()
-    {
-        $this->addBeforeRender(function () {
-            $this->set('action', $this->getAction());
-            $this->set('class', $this->getClass());
-        });
-    }
-
-    public function method(string $name, array $parameters = []): static
-    {
-        return $this
-            ->set('method', $name)
-            ->set('parameters', $parameters);
-    }
-
-    protected function getAction()
-    {
-        $action = $this->get('action');
-
-        if ($action === null) {
-            $url = request()->header('ORCHID-ASYNC-REFERER', url()->current());
-            $query = http_build_query($this->get('parameters', []));
-            $action = rtrim("{$url}/{$this->get('method')}?{$query}", '/?');
-        }
-
-        return $action;
-    }
-
-    protected function getClass(): string
-    {
-        $classes = explode(' ', $this->get('class'));
-        $classes[] = 'reorder-handle';
-
-        return implode(' ', array_filter($classes));
-    }
-}
diff --git a/src/Screen/ReorderHandle.php b/src/Screen/ReorderHandle.php
new file mode 100644
index 0000000000..4847e3b959
--- /dev/null
+++ b/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;
+    }
+}