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

108 lines
4.5 KiB
Svelte

<script lang="ts">
import type { GaranteDto, MensajeDto } from "../types";
let {men, garantes , onCancel, onConfirm, onClose
} : {
men: MensajeDto,
garantes: GaranteDto[],
onCancel:()=>void,
onClose:()=>void,
onConfirm:(file:File, idcontrato:string)=>void } = $props();
let file:File | null = $state(null);
let confirmaGarantes: boolean = $state(false);
let clickeado: boolean = $state(false);
function handleFile(e:Event):void {
const input = e.target as HTMLInputElement;
if (input.files && input.files.length > 0 ) {
file = input.files[0];
}
}
function submit() {
if (file == null) return;
clickeado = true;
onConfirm(file, men.mensaje.split(" ").reverse()[0]);
onClose();
}
</script>
<div class="modal show d-block" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" style="background-color: rgba(0,0,0,0.5);">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticModalLabel">Lista de Garantes y subir Contrato</h5>
<button type="button" class="btn-close" aria-label="Close" onclick={onClose}></button>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>DNI</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Domicilio</th>
<th>Celular</th>
<th>Domicilio Laboral</th>
</tr>
</thead>
<tbody>
{#each garantes as garante, index}
<tr>
<td>{index + 1}</td>
<td>{garante.dni}</td>
<td>{garante.nombre}</td>
<td>{garante.apellido}</td>
<td>{garante.domicilio}</td>
<td>{garante.celular}</td>
<td>{garante.domiciliolaboral}</td>
</tr>
{/each}
</tbody>
</table>
<div class="d-flex flex-column align-items-center mt-3">
<div class="form-check">
<input
id="checkestabien"
type="checkbox"
class="form-check-input"
bind:checked={confirmaGarantes}
disabled={confirmaGarantes}
>
<label for="checkestabien" class="form-check-label ms-2">
¿Están bien estos datos?
</label>
</div>
</div>
{#if confirmaGarantes}
<hr>
<div class="d-flex flex-column align-items-center mt-3">
<div class="mb-3">
<label for="formFile" class="form-label">Suba contrato en pdf</label>
<input class="form-control" type="file" id="formFile"
onchange={handleFile}>
</div>
</div>
{/if}
</div>
</div>
<div class="modal-footer d-flex justify-content-between">
<button class="btn btn-primary" disabled={!(confirmaGarantes && file != null && clickeado == false)} onclick={submit} >
{#if clickeado == false}
Subir
{:else}
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
{/if}
</button>
<button type="button" class="btn btn-danger" onclick={onCancel}>Cancelar Contrato</button>
</div>
</div>
</div>
</div>