Ejecute el siguiente comando artisan para crear un nuevo componente Livewire con lo necesario para un data table:
php artisan make:crud-view-table NombreComponente --model=ModeloSimilar al comando para crear componentes de livewire solo que requiere especificar el nombre del modelo.
{info.fa-lightbulb-o} Ejemplo
php artisan make:crud-view-table ListadoUsuarios --model=User
Se han creado dos nuevos archivos en el proyecto:
app/Http/Livewire/ListadoUsuarios.php
resources/views/livewire/listado-usuarios.blade.php
Si desea crear componentes dentro de subcarpetas, puede utilizar las siguiente sintaxis:
php artisan make:crud-view-table Usuarios/ListadoUsuariosPara tener acceso a la vista crea una neva ruta en el archivo web
use App\Http\Livewire\ListadoUsuarios;
Route::get('usuarios', ListadoUsuarios::class)->name('usuarios');Spatie permission nos permite asociar a nuestros usuarios roles y permisos. Para permitir realizar acciones de crud a los usuarios, se requiere especificar en el componente de livewire como un permiso que se aplicara a todas las acciones,
/**
* Indica permiso para acciones de crud
*/
public $permission = 'administrar.roles';si es necesario mas de un permiso
/**
* Indica permisos para acciones de crud
*/
public $permission = 'administrar.roles|administrar.permisos';o pemisos especificos para cada acción.
/**
* Indica permisos para acciones de crud
*/
public $permissionCreate = 'administrar.roles';
public $permissionDelete = 'administrar.roles';
public $permissionUpdate = 'administrar.roles';Para usar los permisos crea un nuevo metodo en el modelo User.php que valide si el usuario cuenta con el permiso asignado atraves de un rol
public function getPermissionSession($permission){
$roles = $this->roles;
foreach($roles as $role){
if($role->hasPermissionTo($permission)){
return true;
}
}
return false;
}{info} El uso del Trait no interviene con la estructura estándar de las validaciones en Livewire
protected $rules = [ 'formulario.name' => 'required|min:6', 'formulario.email' => 'required|email', ];
Para activar el modal de editar y eliminar podrás hace uso del componente <x-acciones-crud> o <x-acciones-crud-dropdown> en cualquier lugar de la vista del componete de livewire.
<x-acciones-crud id="{{$id}}"/>
<x-acciones-crud-dropdown id="{{$id}}"/>Ejemplo utilizando trait de llistado
/**
* Indica las columnas del listado
* @var array
*/
public function getColumns(): array
{
return [
Column::name('Permisos')->content(fn ($giro) =>
view('components.acciones-crud.acciones-crud', [
'id' => $giro->id,
])
)
];
}{info} En caso de que se requiera especificar de otra manera en la vista recuerda agregar
wire:click="edit($id)"ywire:click="delete($id)"para seguir haciendo uso de las funcionalidades del trait.
Para crear el formulario los campos deberán de ser especificados en el componente de livewire a manera de arreglo dentro de la función publica getFormularioAttributes().
/**
* Indica los campos del formulario
* @var array
*/
public function getFormularioAttributes(): array
{
return [
];
}
Todos los campos cuentan con las misma estructura:
name = Nombre del input.
required = Indica si el input es requerido (true o false).
label = Texto que se mostrara en la etiqueta.
type = Tipo de input (text, textarea, select, date, datetime-local, switch, vertical-checkbox, horizontal-checkbox, vertical-radio, horizontal-radio)
middleware = Indica el permiso o rol para mostrar el campo en el formulario Opcional.
style = Indica el numero de columnas que tomara el input por defecto tomara todas las columnas Opcional.
placeholder = Indica el texto provisional para los inputs de tipo text y text-area Opcional.
value = Indica el valor provisional para los inputs de tipo date y datetime-local Opcional.
a excepción de los inputs con opciones multiples a los cuales se les debera especificar
options = Indica las opciones disponibles puede ser un arreglo o colección,
optionsValue = Indica el campo del arreglo o colección que sera utilizado como valor del input Opcional por default id
labelOptions = Indica el campo del arreglo o colección que sera utilizado como valor del label Opcional por default name
styleOptions = Indica el numero de columnas que tomara cada opción Opcional por default mt-2 mx-2 col-span-4 lg:col-span-4
'text' => [
'name' => 'formulario.name',
'label'=>'Permiso',
'type'=>'text',
'placeholder'=>'permiso',
'middleware' => 'Empresa',
'style' => 'col-span-6 lg:col-span-6 p-2',
], 'textarea' => [
'name' => 'formulario.name',
'label'=>'Permiso',
'type'=>'textarea',
'placeholder'=>'permiso',
'middleware' => 'Empresa',
'style' => 'col-span-6 lg:col-span-6 p-2',
], 'select' => [
'name' => 'roles',
'required' => false,
'label'=>'Roles',
'type'=>'select',
'options' => Role::all()->pluck('name','id'),
'selected-options' => Role::all()->pluck('name','id'),
'middleware' => 'Desarrollador',
'style' => 'col-span-6 lg:col-span-6 p-2',
],
'date' => [
'name' => 'formulario.name',
'label'=>'Permiso',
'type'=>'date',
'value'=>'10/02/2022',
'middleware' => 'Desarrollador',
'style' => 'col-span-6 lg:col-span-6 p-2'
],
'datetime-local' => [
'name' => 'formulario.name',
'label'=>'Permiso',
'type'=>'datetime-local',
'value'=>'10/02/2022',
'middleware' => 'Desarrollador',
'style' => 'col-span-6 lg:col-span-6 p-2'
],
'switch' => [
'name' => 'formulario.name',
'label'=>'switch',
'type'=>'switch',
'middleware' => 'Desarrollador',
'style' => 'col-span-6 lg:col-span-6 p-2'
],
'roles-check-vertical' => [
'name' => 'roles',
'label'=>'Roles',
'type'=>'vertical-checkbox',
'optionsValue' => 'name', //opcional por default name y id
'optionsLabel' => 'id',
'options' => Role::all(),
'middleware' => 'Desarrollador',
'style' => 'col-span-6 lg:col-span-6 p-2'
],
'roles-check-horizontal' => [
'name' => 'roles',
'label'=>'Roles',
'type'=>'horizontal-checkbox',
'optionsValue' => 'name', //opcional por default name y id
'optionsLabel' => 'id',
'options' => Role::all(),
'styleOptions' => 'mt-2 mx-2 col-span-2 lg:col-span-2',
'middleware' => 'Desarrollador',
'style' => 'col-span-6 lg:col-span-6 p-2'
],
'roles-radio-vertical' => [
'name' => 'roles',
'label'=>'Roles',
'type'=>'vertical-radio',
'optionsValue' => 'name', //opcional por default name y id
'optionsLabel' => 'id',
'options' => Role::all(),
'middleware' => 'Desarrollador',
'style' => 'col-span-6 lg:col-span-6 p-2'
],
'roles-radio-horizontal' => [
'name' => 'roleds',
'label'=>'Roles',
'type'=>'horizontal-radio',
'optionsValue' => 'name', //opcional por default name y id
'optionsLabel' => 'id',
'options' => Role::all(),
'styleOptions' => 'mt-2 mx-2 col-span-2 lg:col-span-2',
'middleware' => 'Desarrollador',
'style' => 'col-span-6 lg:col-span-6 p-2'
],
{info}Si incluye mas de un componente de crud en una vista es necesario declarar una variable publica con el id del modal para que Livewire pueda acceder a ellos
/**
* @var int Indica id de modal crud y modal delete
*/
public $modalCrudName = 'modal-crud-giros';
public $modalDeleteName = 'modal-delete-giros';{info} Para especificar las columnas, filtros, y busqueda consulte la documentacion de Data table