54 lines
2.3 KiB
Svelte
54 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import type { UpdateCliente } from "../types";
|
|
|
|
|
|
let {onCancel, onConfirm, datos}: {onCancel:()=>void, onConfirm:(a:UpdateCliente)=>void, datos:UpdateCliente} = $props();
|
|
|
|
let cli:UpdateCliente|any = $state({});
|
|
onMount(()=>{
|
|
cli.nombre = datos.nombre;
|
|
cli.dni = datos.dni;
|
|
cli.apellido = datos.apellido;
|
|
cli.domicilio = datos.domicilio;
|
|
cli.celular = datos.celular;
|
|
})
|
|
|
|
function handleConfirm(e: Event) {
|
|
e.preventDefault();
|
|
onConfirm(cli);
|
|
onCancel();
|
|
}
|
|
</script>
|
|
|
|
<div class="modal fade show d-block" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Modificar Datos Cliente</h5>
|
|
<button type="button" class="btn-close" aria-label="Close" onclick={onCancel}></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="nombre" class="form-label">Nombre</label>
|
|
<input type="text" id="nombre" class="form-control" bind:value={cli.nombre} required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="apellido" class="form-label">Apellido</label>
|
|
<input type="text" id="apellido" class="form-control" bind:value={cli.apellido} required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="domicilio" class="form-label">Domicilio</label>
|
|
<input type="text" id="domicilio" class="form-control" bind:value={cli.domicilio} required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="celular" class="form-label">Celular</label>
|
|
<input type="tel" id="celular" class="form-control" bind:value={cli.celular} required />
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" onclick={(e)=>handleConfirm(e)}>Guardar</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |