amig@s programadores.
Les comento, tengo una aplicación, un proyecto en laravel 8. Le instale Jeststream que me permite manejar el tema de la autenticación. Luego instale livewire, para incluir reactividad... y desarrolle un CRUD de la tabla users. y funciono perfecto.
Luego instale el framework AdminLTE 3.... por la parte grafica y los elementos que ofrece. Se que esta diseñado sobre la base de Bootstrap 3.
Pero al intentar unir AdminLTE con livewire, no se activa la reactividad....
Alguna sugerencia o conocimiento previo. Si se pueden integrar en un solo proyecto todas estas tecnologías????
El punto es que cuando uso el componente y el menu de jestream, (el que se instala por defecto me funciona bien.
Aqui una imagen
Pero si le agrego el @extends('adminlte::page') del AdminLTE no hay reactividad
No abre el modal para crear un registro nuevo, no abre el modal para edicion y no elimina. Si por obligo a que se abra el modal colocando en true la variable public $isOpen = true; obtengo este resultado:
Cualquier sugerencia u observacion se la agradezco.
@extends('adminlte::page')
@section('title', 'Dashboard')
@section('content_header')
<h1>Home compania</h1>
@stop
@livewireStyles
@section('content')
@livewire('compania')
@stop
@section('css')
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
@stop
@section('js')
<script> console.log('Home_compania!'); </script>
@stop
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Company;
use Livewire\WithPagination;
class Compania extends Component
{
use WithPagination;
public $title;
public $company_id;
public $isOpen = true;
public function render()
{
return view('livewire.compania', [
'companies' => Company::orderBy('id', 'desc')->paginate(5)
]);
}
public function create()
{
$this->resetInputFields();
$this->openModal();
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function openModal()
{
$this->isOpen = true;
// Clean errors if were visible before
$this->resetErrorBag();
$this->resetValidation();
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function closeModal()
{
$this->isOpen = false;
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
private function resetInputFields(){
$this->title = '';
$this->company_id = '';
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function store()
{
$this->validate([
'title' => 'required|unique:companies,title,'.$this->company_id,
]);
$data = array(
'title' => $this->title
);
$company = Company::updateOrCreate(['id' => $this->company_id],$data);
session()->flash('message', $this->company_id ? 'Company updated successfully.' : 'Company created successfully.');
$this->closeModal();
$this->resetInputFields();
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function edit($id)
{
$company = Company::findOrFail($id);
$this->company_id = $id;
$this->title = $company->title;
$this->openModal();
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function delete($id)
{
$this->company_id = $id;
Company::find($id)->delete();
session()->flash('message', 'Company deleted successfully.');
}
}
<div>
{{-- Be like water. --}}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@if (session()->has('message'))
<div id="alert" class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-green-500">
<span class="inline-block align-middle mr-8">
{{ session('message') }}
</span>
<button
class="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
onclick="document.getElementById('alert').remove();">
<span>×</span>
</button>
</div>
@endif
</div>
<button wire:click="create()"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-10">CREAR NUEVA COMPANIA</button>
@if (count($companies) > 0)
<div class="py-10">
<div class="inline-block min-w-full shadow rounded-lg overflow-hidden">
<table class="min-w-full leading-normal">
<thead>
<tr>
<th
class="px-5 py-3 border-b-2 border-black bg-black text-left text-xs font-semibold text-white uppercase tracking-wider">
{{ __('Title') }}
</th>
<th
class="px-5 py-3 border-b-2 border-black bg-black text-left text-xs font-semibold text-white uppercase tracking-wider">
</th>
</tr>
</thead>
<tbody>
@foreach ($companies as $company)
<tr>
<td class="px-5 py-5 bg-white text-sm @if (!$loop->last) border-gray-200 border-b @endif">
{{ Str::limit($company->title, 25) }}
</td>
<td class="px-5 py-5 bg-white text-sm @if (!$loop->last) border-gray-200 border-b @endif text-right">
<div class="inline-block whitespace-no-wrap">
<button wire:click="edit({{ $company->id }})"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
<button wire:click="$emit('triggerDelete',{{ $company->id }})"
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $companies->links('pagination', ['is_livewire' => true]) }}
</div>
</div>
@endif
@if ($isOpen)
<x-customised-modal>
<x-slot name="content">
<form>
<div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label for="titleInput"
class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
<input type="text"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="titleInput" placeholder="Enter Title" wire:model="title">
@error('title') <span class="text-red-500">{{ $message }}</span>@enderror
</div>
</div>
</div>
<div class="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<span class="flex w-full sm:ml-3 sm:w-auto">
<button wire:click.prevent="store()" type="button"
class="inline-flex bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Save</button>
</span>
<span class="mt-3 flex w-full sm:mt-0 sm:w-auto">
<button wire:click="closeModal()" type="button"
class="inline-flex bg-white hover:bg-gray-200 border border-gray-300 text-gray-500 font-bold py-2 px-4 rounded">Cancel</button>
</span>
</div>
</form>
</x-slot>
</x-customised-modal>
@endif
@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.css">
@endpush
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
@this.on('triggerDelete', companyId => {
Swal.fire({
title: 'Are You Sure?',
text: 'Company record will be deleted!',
type: "warning",
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#3085d6',
confirmButtonText: 'Delete!'
}).then((result) => {
if (result.value) {
@this.call('delete', companyId)
} else {
console.log("Canceled");
}
});
});
})
</script>
@endpush
</div>