drag & drop sortable tables

[wsdnathan]

Possible to get something similar to this working for Orchid?
https://github.com/optimistdigital/nova-sortable

[wsdnathan]

@tabuna any chance you could point me in the right direction for drag/drop sort order? Is this possible with Layout::table or TD::make? Alternatively I was thinking I could create a new popup in the Screen with a new custom Field/Layout of some type.

[tabuna]

Hi @wsdnathan. I would create my layer for this.
This way, it would be easier to control than taking into account an already existing class.

[wsdnathan]

What do you mean by a layer? Do you mean a Layout and do you think that would be the easiest way? I tried to create a custom "sortable grid" type of Field based on the Upload Field. How do I create a replacement for data-controller="upload" and all the data-upload attributes? I'm trying to figure out where the JS binds this with the "value" array of Attachments. I don't have a very good understanding how the upload.blade.php component is tied in with the Field.

[wsdnathan]

I found the JS for the component at https://github.com/orchidsoftware/platform/blob/master/resources/js/controllers/upload_controller.js

How would I create my own Field's JS and then get it to compile or be included into the admin? Also where is the routing for this configured "/systems/files/post/${attach.id}"?

After looking at the Accordion Layout and blade example it seems much more straightforward but I'm unsure how to include additional JS. Any ideas on the best approach to create a Sortable Grid either by a Field or a Layout would be appreciated. All I want to do basically is have a collection of models which is displayed as a drag & drop grid, and then serialize the order to be used in a save method.

[Ulyev-ad]

It would be great to have this functionality right away. Right now, the only way seems to be adding component. It's inconvenient.

[wsdnathan]

I was able to get it halfway working by using the Orchid Upload field as an example (allows multiple attachments with drag & drop). I gave up on it a month ago to work on other things. I just started looking into the Orchid view layer setup again and I'm slowly making sense of it after I found this documentation: https://orchid.software/en/docs/javascript/ - there's a learning curve here but not as tedious as Laravel Nova Vue.js components for example.

[cryptodev4]

What do you think about this package, https://github.com/asantibanez/laravel-blade-sortable, do you think that this package could be in Orchid platform?

[czernika]

If you need this component right now you may create your own layout. For example

1. Register JS Controller as per docs. I will use SortableJS library as it is already Orchid dependency

// resources/js/admin/sortable_controller.js
import Sortable from 'sortablejs'

export default class extends window.Controller {
    connect() {
        Sortable.create(this.element.querySelector('.sortable-body'), {
            handle: '.handle',
            animation: 200,
            sort: true,
            onEnd: (evt) => {
                if (evt.oldIndex === evt.newIndex) {
                    return
                }

                // this route needs to be registered
                window.axios.post(`orchid-sortable/on-end/${evt.item.dataset.id}`, {
                        // pass any data you need. I found useful to get only old/new index or difference between them 
                        old: evt.oldIndex,
                        new: evt.newIndex,
                    })
                    .then(() => {
                        this.alert('Hooray', 'Updated', 'success')
                    })
                    .catch(() => {
                        this.alert('Congratulations!', 'You\'ve broke something', 'danger')
                    })
            },
        })
    }
}

I'm registering onEnd callback passing old and new index to Laravel route handler via POST request plus an ID of a row stored as HTML data-id attribute

// resources/js/admin/index.js

import SortableTableController from './sortable_controller'

application.register('sortable-table', SortableTableController)

2. Register it as Vite input and Orchid panel asset dependency

// vite.config.js

// Add
input: [
    // ... other app assets,
    'resources/js/admin/index.js', // <-- add this into Laravel Vite plugin input
],

// config/platform.php

'vite' => [
    'resources/js/admin/index.js',
],

3. Add new route to process data after row was sorted

// routes/web.php

Route::prefix(config('platform.prefix'))
    ->group(function () {
        Route::post('orchid-sortable/on-end/{id}', function (int $id, Request $request) {
            dd(
                $request->input() // ['old' => 0, 'new' => 4] -> meaning element moved from first position (index 0) to 5th
            );
        });
    });

3. Create new abstract Layout which will extend base Table

// app/Orchid/Layouts/SortableTable.php

namespace App\Orchid\Layouts;

use Orchid\Screen\Layouts\Table;

abstract class SortableTable extends Table
{
    /**
     * @var string
     */
    protected $template = 'admin.layouts.sortable'; // points to view

    /**
     * @return array
     */
    abstract protected function columns(): iterable;
}

4. Extend desired Layout with new SortableTable layout (for example, UserListLayout)

// app/Orchid/Layouts/User/UserListLayout.php

namespace App\Orchid\Layouts\User;

use App\Orchid\Layouts\SortableTable;

class UserListLayout extends SortableTable
{
    // ... logic within stands the same
}

5. And content for the resource file which is mentioned in $template of SortableTable (/resources/views/admin/layouts/sortable.blade.php in this example)

<div data-controller="sortable-table">
	@empty(!$title)
        <fieldset>
                <div class="col p-0 px-3">
                    <legend class="text-black mt-2 mx-2">
                        {{ $title }}
                    </legend>
                </div>
        </fieldset>
    @endempty

    <div class="bg-white rounded shadow-sm mb-3"
        data-controller="table"
        data-table-slug="{{$slug}}"
    >

        <div class="table-responsive">
            <table @class([
                        'table',
                        'table-compact'  => $compact,
                        'table-striped'  => $striped,
                        'table-bordered' => $bordered,
                        'table-hover'    => $hoverable,
                ])>

                @if($showHeader)
                    <thead>
                        <tr>
                            <th></th>
                            @foreach($columns as $column)
                                {!! $column->buildTh() !!}
                            @endforeach
                        </tr>
                    </thead>
                @endif

                <tbody class="sortable-body">

                @foreach($rows as $source)
                    <tr data-id="{{ $source->id }}">
                        <td style="width: 50px; cursor: pointer;">
                            <div class="handle" >
                                <x-orchid-icon path="bs.arrows-move" class="block" />
                            </div>
                        </td>
                        @foreach($columns as $column)
                            {!! $column->buildTd($source, $loop->parent) !!}
                        @endforeach
                    </tr>
                @endforeach

                @if($total->isNotEmpty())
                    <tr>
                        @foreach($total as $column)
                            {!! $column->buildTd($repository, $loop) !!}
                        @endforeach
                    </tr>
                @endif

                </tbody>
            </table>
        </div>

        @if($rows->isEmpty())
            <div class="d-md-flex align-items-center px-md-0 px-2 pt-4 pb-5 w-100 text-md-start text-center">

                @isset($iconNotFound)
                    <div class="col-auto mx-md-4 mb-3 mb-md-0">
                        <x-orchid-icon :path="$iconNotFound" class="block h1"/>
                    </div>
                @endisset

                <div>
                    <h3 class="fw-light">
                        {!!  $textNotFound !!}
                    </h3>

                    {!! $subNotFound !!}
                </div>
            </div>
        @else

            <footer class="pb-3 w-100 v-md-center px-4 d-flex flex-wrap">
                <div class="col-auto me-auto">
                    @if(isset($columns) && \Orchid\Screen\TD::isShowVisibleColumns($columns))
                        <div class="btn-group dropup d-inline-block">
                            <button type="button"
                                    class="btn btn-sm btn-link dropdown-toggle p-0 m-0"
                                    data-bs-toggle="dropdown"
                                    aria-haspopup="true"
                                    data-bs-boundary="viewport"
                                    aria-expanded="false">
                                {{ __('Configure columns') }}
                            </button>
                            <div class="dropdown-menu dropdown-column-menu dropdown-scrollable">
                                @foreach($columns as $column)
                                    {!! $column->buildItemMenu() !!}
                                @endforeach
                            </div>
                        </div>
                    @endif

                    @if($rows instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator)
                        <small class="text-muted d-block">
                            {{ __('Displayed records: :from-:to of :total',[
                                'from' => ($rows->currentPage() -1 ) * $rows->perPage() + 1,
                                'to' => ($rows->currentPage() -1 ) * $rows->perPage() + count($rows->items()),
                                'total' => $rows->total(),
                            ]) }}
                        </small>
                    @endif
                </div>
                <div class="col-auto overflow-auto flex-shrink-1 mt-3 mt-sm-0">
                    @if($rows instanceof \Illuminate\Contracts\Pagination\CursorPaginator)
                        {!!
                            $rows->appends(request()
                                ->except(['page','_token']))
                                ->links('platform::partials.pagination')
                        !!}
                    @elseif($rows instanceof \Illuminate\Contracts\Pagination\Paginator)
                        {!!
                            $rows->appends(request()
                                ->except(['page','_token']))
                                ->onEachSide($onEachSide ?? 3)
                                ->links('platform::partials.pagination')
                        !!}
                    @endif
                </div>
            </footer>
        @endif
    </div>

</div>

What I've done is actually create controller wrapper and just copy-paste default Orchid view within with some minor changes

<div data-controller="sortable-table">
    <!-- Content of Orchid table view -->
</div>

1. I've added empty th element to not mess up with table heading order
2. Add new column with sortable element within. .handle class defined in JS controller - if you not specified it whole row will be sortable as it mentioned here

<td style="width: 50px; cursor: pointer;">
    <div class="handle">
        <x-orchid-icon path="bs.arrows-move" class="block" />
    </div>
</td>

3. I've also added data-id attribute to get information about model id <tr data-id="{{ $source->id }}">
4. Plus added .sortable-body class to a tbody element just in case (and it was registered in JSController as Sortable element - but it could be just tbody as there is only one table. However you can create multiple tables and it may lead to an unexpected results which I didn't checked to be honest)

Sorry for the GIF quality

Now route may accept id, old and new index. You may typecast an id within route as a model off course

Note 1: You may pass also a model class, table name or something to identify which Model is actually should be updated if you need more than one sortable table - change JS controller and view, pass new data with request. Keep in mind that update position logic is up to you within provided route - I recommend to create an Observer for updated event and update all other models' position based on changes were made

Note 2: Imagine you have 15 rows. You need to swap position 15 and 16. For now you cannot unless you pass some kind of dynamic value to list pagination. Plus you need to change default sorting off course to your custom sorting column

public function query(): iterable
{
    return [
        'users' => User::with('roles')
            ->filters(UserFiltersLayout::class)
            ->defaultSort('sorting_order_column', 'desc')
            ->paginate($request->query('per_page')), // or something like this, add ?per_page=16 to URL
    ];
}

P.S I personally don't like this solution - it is just temporary if you need this type of sorting right now and it still not present in Orchid - it is a lot of copy from original table, it's not universal as component should be. There is a lot of work to do to make it "register and enjoy". Plus I don't like implementation - I think it would be better to create some SortableColumnAction for Orchid Table and pass it in array of columns like

public function columns(): array
{
    return [
        Sortable::make()
            ->width(50)
            ->icon('bs.arrows-move')
    ];
}

but I didn't go this way to check how to make it this way