93 lines
3.3 KiB
Svelte
93 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
|
|
import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
|
|
import type { ContratoDto } from "../types";
|
|
import ModalEstatico from "../Componentes/ModalEstatico.svelte";
|
|
import {urlG} from "../stores/urlStore";
|
|
import { navigate } from "svelte-routing";
|
|
|
|
let token: string = sessionStorage.getItem("token")|| "";
|
|
let alquileres:ContratoDto[]| null = $state(null);
|
|
let modaldata:string = $state("");
|
|
|
|
onMount(()=>{
|
|
obtenerContratosAdmin();
|
|
});
|
|
async function obtenerContratosAdmin() {
|
|
try{
|
|
const responce = await fetch($urlG+"/api/contratos/controlPagos", {
|
|
method: "GET",
|
|
headers: {
|
|
"Auth": String(token),
|
|
},
|
|
});
|
|
if (responce.ok){
|
|
let data = await responce.json();
|
|
alquileres = data;
|
|
return;
|
|
}
|
|
|
|
let data = await responce.json();
|
|
modaldata = data.message;
|
|
|
|
}catch{
|
|
modaldata = "fallo al intentar hacer la request";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<NavBarAutocompletable/>
|
|
|
|
{#if modaldata }
|
|
<ModalEstatico payload={modaldata} close={()=>!!(modaldata="")}/>
|
|
{/if}
|
|
|
|
<div class="container-fluid mt-2">
|
|
<BarraHorizontalConTexto text="Control de Pagos" />
|
|
<div class="text-center">
|
|
Lista de contratos que tienen canones atrasados
|
|
</div>
|
|
<hr>
|
|
<div class="row g-3">
|
|
{#if alquileres == null}
|
|
<div class="d-flex justify-content-center">
|
|
<div class="spinner-border" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
{#if alquileres.length == 0}
|
|
<h1 class=" d-flex justify-content-center">
|
|
No hay Alquileres que deban meses
|
|
</h1>
|
|
{/if}
|
|
{#each alquileres as alquiler}
|
|
<div class="col-md-6">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0 text-center">{alquiler.tipoPropiedad}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="card-subtitle mb-2 text-muted">{alquiler.ubicacion}</h6>
|
|
<p class="card-text">
|
|
<strong>Fecha de inicio:</strong> {new Date(alquiler.fechainicio).toLocaleDateString()}<br />
|
|
<strong>Inquilino:</strong> {alquiler.inquilino}<br />
|
|
<strong>Propietario:</strong> {alquiler.propietario}<br>
|
|
<strong>Id Contrato: </strong>{alquiler.id}
|
|
</p>
|
|
<div class="d-flex justify-content-center">
|
|
<button class="btn btn-primary" onclick={()=>navigate("/admin/contratos?id="+alquiler.id)}>
|
|
Ver
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer text-center">
|
|
<strong>Estado:</strong> {alquiler.estado}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</div> |