thiktak / laravel-bootstrap-component-select2
Laravel Bootstrap Blade components for Select2 & Bootstrap 5.
Requires
- apalfrey/select2-bootstrap-5-theme: ^1.1.1
- bastinald/laravel-bootstrap-components: ^2.0.15
- laravel/framework: ^8.0
This package is auto-updated.
Last update: 2024-10-29 06:12:45 UTC
README
Based on the components of https://github.com/bastinald/laravel-bootstrap-components
Installation
Run composer to install the package
composer require thiktak/laravel-bootstrap-component-select2
Include css
Include on your resources/scss/app.scss the line:
@import 'vendor/thiktak/laravel-bootstrap-component-select2/resources/scss/select2';
Include Javascript
Include on your resources/js/app.js the line:
require('../../vendor/thiktak/laravel-bootstrap-component-select2/resources/js/select2');
Run NPM
npm run dev
Use the component on your blades
<x-bs::select2 :label="__('User')" :options="['1' => 'Admin']" what="User" wire:model.defer="user_id" />
This bs::select2 component use the bs:select of https://github.com/bastinald/laravel-bootstrap-components. You can use all the options of this component.
Here, the important part is the what="Model"
, with Model = App\Models\User or User
Configure your models
- Implement the trait
Select2Searchable
- Fill the protected variable $search2Fields with list of columns to be added in the where closure
- Implement the
__toString()
model method if you want to have a beautiful output
use Thiktak\LaravelBootstrapComponentSelect2\Models\Search2Proxies\Select2Searchable; class User extends Model { use Select2Searchable; // Will use magic search protected $search2Fields = ['name', 'title']; // [...] }
You can redefine the methods search2
and search2_export
if required.
You can also create a proxy and build you own query. The Select2Proxy implement automatically the Select2Searchable
trait.
The proxy should be on App\Models\Search2Proxies
folder.
namespace App\Models\Search2Proxies; use Thiktak\LaravelBootstrapComponentSelect2\Models\Search2Proxies\Select2Proxy; class UserProxy extends Select2Proxy { /* * protected $search2Fields = ['name', 'title']; */ /** * METHOD getModel *---------------- * Define your own model * Used by magic method select2, if not overwritten */ public function getModel() { return new \App\Models\User; } /** * Method Select2 *---------------- * Will return a query object based on the keyword searched * ... or the ID provided */ public function select2($id, $term) { return $this->getModel() ->query() // Search by ID ->when($id, function($q) use($id) { // no return $q->find($id); // OR $q->where($this->getModel()->getPrimaryKey(), $id) }) ->when(!$id, function($q) use($term) { return $q ->where('name', 'like', '%' . $term . '%') ->orderBy('name'); }); } /** * Method Export_select2 * Will export array data based on Select2 format id/text */ public function export_select2(User $user) { // id => '1' // text => 'Admin (user@example.net)' return [ 'id' => $user->id, 'text' => sprintf('%s (%s)', $user->name, $user->email), ]; } // [...] }
Test the API
You can test the data exported to the select by opening directly /api/select2/search?what=User&q=a
If needed, you can use {{ route('api.select2.search') }}
Parameters
what
= the model to be used (i.e.: User or App\Models\User)q
= search keyword
Output:
- results: [{id: 1, text: "label"}]
- error: { code: 200, message: null }
Use the error code to know what happens.
TODO
- Use Proxy for Model (App\Models\Search2Proxies<ModelName>Proxy)
Changelogs
- Added select2/autoload values (fetch data via API in order to keep label synchronization)
- Added possibility to fetch by ID or by term
- Added Proxy model