skrd/zenithar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Creando modal propio

Browse Source
This commit is contained in:
Daniel Cortés
2025-01-26 03:25:54 -03:00
parent 6a1458304a
commit 85ae2d033e
4 changed files with 81 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/Livewire/Cajas/Index.php
View File

@@ -10,6 +10,7 @@ use Illuminate\Pagination\LengthAwarePaginator;
use Illuminate\Support\Facades\Session; use Illuminate\Support\Facades\Session;
use Illuminate\Validation\ValidationException; use Illuminate\Validation\ValidationException;
use Livewire\Attributes\Computed; use Livewire\Attributes\Computed;
use Livewire\Attributes\On;
use Livewire\Component; use Livewire\Component;
use Livewire\WithPagination; use Livewire\WithPagination;
use Log; use Log;
@@ -21,8 +22,6 @@ class Index extends Component
public $searchFecha = null; public $searchFecha = null;
public $modal = false;
public $fecha = null; public $fecha = null;
public $caja = null; public $caja = null;
@@ -36,7 +35,6 @@ class Index extends Component
public function createTurno(): void public function createTurno(): void
{ {
$this->modal = true;
$this->fecha = now()->format('Y-m-d'); $this->fecha = now()->format('Y-m-d');
$this->caja = 1; $this->caja = 1;
@@ -45,6 +43,8 @@ class Index extends Component
} else { } else {
$this->turno = 1; $this->turno = 1;
} }
$this->dispatch('show-modal', "turno");
} }
public function storeTurno(): void public function storeTurno(): void
@@ -87,14 +87,16 @@ class Index extends Component
$this->redirectRoute('cajas.edit', $turno, navigate: true); $this->redirectRoute('cajas.edit', $turno, navigate: true);
} }
#[On('close-modal-turno')]
public function closeTurnoModal(): void public function closeTurnoModal(): void
{ {
$this->modal = false; Log::info("Cerrando modal");
$this->fecha = null; $this->fecha = null;
$this->caja = null; $this->caja = null;
$this->turno = null; $this->turno = null;
$this->clearValidation(); $this->clearValidation();
$this->dispatch('hide-modal', 'turno');
} }
public function confirmDelete($id): void public function confirmDelete($id): void

2
resources/views/components/layouts/app.blade.php
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="corporate"> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="emerald">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">

37
resources/views/components/my-modal.blade.php Normal file
View File

@@ -0,0 +1,37 @@
<div x-data="{}"
x-init="$refs.dialog.addEventListener('close', () => $dispatch('close-modal-{{$name}}'))"
x-on:show-modal.window="
console.log($event)
if($event.detail[0] === '{{$name}}') {
$refs.dialog.showModal();
}
"
x-on:hide-modal.window="
if($event.detail[0] === '{{$name}}') {
$refs.dialog.close();
}
"
>
<dialog class="modal" x-ref="dialog" wire:ignore>
<div class="modal-box">
<form method="dialog">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
✕
</button>
</form>
@if(isset($title))
<h3 class="text-lg font-bold">{{$title}}</h3>
@endif
{{$slot}}
@if(isset($footer))
<div class="modal-action">
{{$footer}}
</div>
@endif
</div>
</dialog>
</div>

45
resources/views/livewire/cajas/index.blade.php
View File

@@ -1,6 +1,5 @@
@use(Illuminate\Support\Number) @use(Illuminate\Support\Number)
<div> <div>
<div class="flex flex-col sm:flex-row gap-2 justify-between items-baseline mb-4"> <div class="flex flex-col sm:flex-row gap-2 justify-between items-baseline mb-4">
<x-title>Cajas</x-title> <x-title>Cajas</x-title>
<button class="btn" wire:click="createTurno"> <button class="btn" wire:click="createTurno">
@@ -49,15 +48,45 @@
</table> </table>
</div> </div>
<x-modal title="Registrar Caja" wire center blur> <x-my-modal name="turno" title="Registrar Caja">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<x-date label="Fecha" wire:model="fecha" format="DD-MM-YYYY"/> <label class="form-control">
<x-input type="number" label="Caja" wire:model="caja"/> <div class="label">
<x-input type="number" label="Turno" wire:model="turno"/> <span class="label-text">Fecha</span>
</div>
<input type="date" class="input input-bordered" wire:model="fecha"/>
@error('fecha')
<p class="text-sm text-error">{{ $message }}</p>
@enderror
</label>
<label class="form-control">
<div class="label">
<span class="label-text">Caja</span>
</div>
<input type="number" class="input input-bordered" wire:model="caja"/>
@error('caja')
<p class="text-sm text-error">{{ $message }}</p>
@enderror
</label>
<label class="form-control">
<div class="label">
<span class="label-text">Turno</span>
</div>
<input type="number" class="input input-bordered" wire:model="turno"/>
@error('turno')
<p class="text-sm text-error">{{ $message }}</p>
@enderror
</label>
</div> </div>
<x-slot:footer> <x-slot:footer>
<x-button color="secondary" icon="arrow-left" wire:click="closeTurnoModal">Volver</x-button> <button class="btn" wire:click="closeTurnoModal">
<x-button icon="plus" wire:click="storeTurno">Registrar Caja</x-button> <x-icons.arrow-left/>
Volver
</button>
<button class="btn btn-primary" wire:click="storeTurno">
<x-icons.device-floppy/>
Registrar Caja
</button>
</x-slot:footer> </x-slot:footer>
</x-modal> </x-my-modal>
</div> </div>