15.0 dev new select

resources/js/controllers/select2_controller.js

@@ -0,0 +1,88 @@
+import TomSelect from 'tom-select';
+import ApplicationController from './application_controller';
+
+export default class extends ApplicationController {
+    static get targets() {
+        return ['select'];
+    }
+
+    connect() {
+        if (document.documentElement.hasAttribute('data-turbo-preview')) {
+            return;
+        }
+
+        this.choices = this.initTomSelect();
+    }
+
+    initTomSelect() {
+        const select = this.element.querySelector('select');
+        const plugins = ['change_listener'];
+
+        if (select.hasAttribute('multiple')) {
+            plugins.push('remove_button', 'clear_button');
+        }
+
+        const options = {
+            create: this.data.get('allow-add') === 'true',
+            allowEmptyOption: true,
+            placeholder: select.getAttribute('placeholder') === 'false' ? '' : select.getAttribute('placeholder'),
+            plugins,
+            maxItems: select.getAttribute('maximumSelectionLength') || (select.hasAttribute('multiple') ? null : 1),
+            render: {
+                option_create: (data, escape) => `<div class="create">${this.data.get('message-add')} <strong>${escape(data.input)}</strong>&hellip;</div>`,
+                no_results: () => `<div class="no-results">${this.data.get('message-notfound')}</div>`
+            },
+            onDelete: () => !!this.data.get('allow-empty'),
+            onItemAdd() {
+                this.setTextboxValue('');
+                this.refreshOptions(false);
+            }
+        };
+
+        if (this.data.get('query')) {
+            Object.assign(options, {
+                preload: 'focus',
+                maxOptions: this.data.get('chunk'),
+                valueField: 'value',
+                labelField: 'label',
+                searchField: [],
+                sortField: [{ field: '$order' }, { field: '$score' }],
+                load: (query, callback) => this.search(query, callback)
+            });
+        } else {
+            options.preload = true;
+        }
+
+        return new TomSelect(select, options);
+    }
+
+    /**
+     *
+     */
+    disconnect() {
+        this.choices?.destroy();
+    }
+
+    /**
+     *
+     * @param search
+     * @param callback
+     */
+    search(search, callback) {
+        const display = this.data.get('display');
+        const key = this.data.get('key');
+        const query = this.data.get('query');
+
+        axios.post(this.data.get('route'), {
+            display,
+            key,
+            query,
+            search,
+        })
+            .then((response) => {
+                this.choices.clearOptions();
+                callback(response.data);
+            });
+    }
+
+}

resources/views/fields/select2.blade.php

@@ -0,0 +1,35 @@
+@component($typeForm, get_defined_vars())
+    <div data-controller="select2"
+         data-select2-placeholder="{{$attributes['placeholder'] ?? ''}}"
+         data-select2-allow-empty="{{ $allowEmpty }}"
+         data-select2-id="{{$id}}"
+         data-select2-route="{{ route('platform.systems.select2') }}"
+         data-select2-display="{{ $display }}"
+         data-select2-key="{{ $key }}"
+         data-select2-query="{{ $query }}"
+         data-select2-message-notfound="{{ __('No results found') }}"
+         data-select2-message-add="{{ __('Add') }}"
+         data-select2-allow-add="{{ var_export($allowAdd, true) }}"
+    >
+        <select id="{{$id}}" data-relation-target="select" {{ $attributes }}>
+
+            @foreach($options as $key => $option)
+                <option value="{{$key}}"
+                        @isset($value)
+                            @if (is_array($value) && in_array($key, $value)) selected
+                            @elseif (isset($value[$key]) && $value[$key] == $option) selected
+                            @elseif ($key == $value) selected
+                            @endif
+                        @endisset
+                >{{$option}}</option>
+            @endforeach
+
+            @if($query)
+                    @foreach($value as $key => $option)
+                        <option selected value="{{ $key }}">{{$option}}</option>
+                    @endforeach
+            @endif
+
+        </select>
+    </div>
+@endcomponent

routes/dashboard.php

@@ -7,6 +7,7 @@
 use Orchid\Platform\Http\Controllers\AttachmentController;
 use Orchid\Platform\Http\Controllers\IndexController;
 use Orchid\Platform\Http\Controllers\RelationController;
+use Orchid\Platform\Http\Controllers\Select2Controller;
 use Orchid\Platform\Http\Controllers\SortableController;
 use Orchid\Platform\Http\Screens\NotificationScreen;
 use Orchid\Platform\Http\Screens\SearchScreen;
@@ -49,6 +50,9 @@
     Route::post('relation', [RelationController::class, 'view'])
         ->name('systems.relation');
 
+    Route::post('select2', [Select2Controller::class, 'view'])
+        ->name('systems.select2');
+
     Route::post('sorting', [SortableController::class, 'saveSortOrder'])
         ->name('systems.sorting');
 });

src/Platform/Http/Controllers/Select2Controller.php

@@ -0,0 +1,39 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Orchid\Platform\Http\Controllers;
+
+use Orchid\Platform\Http\Requests\Select2Request;
+use Orchid\Support\Select2LazyQuery;
+
+class Select2Controller extends Controller
+{
+
+    public function view(Select2Request $request)
+    {
+        $display = $request->get('display');
+        $search = $request->get('search');
+        $key = $request->get('key');
+
+        $query = Select2LazyQuery::execute($request->get('query'), $search);
+
+        return response()->json($query->get()->map(function ($item) use ($display, $key) {
+            $resultKey = $item->$key;
+
+            $resultLabel = $item->$display;
+
+            if ($resultKey instanceof \UnitEnum) {
+                $resultKey = $resultKey->value;
+            }
+            if ($resultLabel instanceof \UnitEnum) {
+                $resultLabel = $resultLabel->value;
+            }
+
+            return [
+                'value' => $resultKey,
+                'label' => $resultLabel,
+            ];
+        }));
+    }
+}