Files
AlquilaFacil/Front/src/Componentes/FormAltaDefecto.svelte

95 lines
2.4 KiB
Svelte

<script lang="ts">
import { onMount } from "svelte";
import type { AltaDefectoDto } from "../types";
let { idcontrato, onConfirm
} : {
idcontrato: number, onConfirm:(data: AltaDefectoDto)=>void} = $props();
let formData: AltaDefectoDto = $state({
descripcion:"",
costo:0,
idcontrato:idcontrato,
iddivisa:0,
pagainquilino:0
});
async function handle(e:Event){
e.preventDefault();
onConfirm(formData);
}
let n:number = $state(0);
$effect(()=> {n = formData.descripcion.length});
</script>
<div class="container">
<form>
<div class="mb-3">
<label for="descripcion" class="form-label">Descripción</label>
<input
type="text"
id="descripcion"
class="form-control"
bind:value={formData.descripcion}
placeholder="Ingrese la descripción"
required
maxlength="100"
/>
<small class="form-text text-muted">
{n}/100
</small>
</div>
<div class="mb-3 input-group">
<span class="input-group-text">$</span>
<input
type="number"
id="costo"
class="form-control"
bind:value={formData.costo}
placeholder="Ingrese el costo"
step="0.01"
required
/>
</div>
<div class="mb-3">
<div class="form-check">
<input
type="radio"
id="danioUso"
class="form-check-input"
bind:group={formData.pagainquilino}
value="1"
required
/>
<label for="danioUso" class="form-check-label">Daño por uso</label>
</div>
<div class="form-check">
<input
type="radio"
id="danioEstructural"
class="form-check-input"
bind:group={formData.pagainquilino}
value="0"
/>
<label for="danioEstructural" class="form-check-label">Daño Estructural</label>
</div>
</div>
<div class="mb-3">
<label for="iddivisa" class="form-label">Divisa</label>
<select
id="iddivisa"
class="form-select"
bind:value={formData.iddivisa}
required
>
<option value="0">ARS</option>
<option value="1">USD</option>
</select>
</div>
<button type="submit" class="btn btn-primary" onclick={(e)=> handle(e)}>Subir</button>
</form>
</div>