avansando

Front/src/App.svelte

@@ -18,6 +18,9 @@
   import AdminPropiedades from "./paginas/AdminPropiedades.svelte";
   import Notificaciones from "./paginas/Notificaciones.svelte";
     import ControlAlquileresInquilino from "./paginas/ControlAlquileresInquilino.svelte";
+    import ControlAlquileresPropietario from "./paginas/ControlAlquileresPropietario.svelte";
+    import ContratosPropietario from "./paginas/ContratosPropietario.svelte";
+    import ContratoInquilino from "./paginas/ContratoInquilino.svelte";
 </script>
 
 <Router>
@@ -80,6 +83,11 @@
   <Route path="/accion/11">
     <ProteRoute componente={ControlAlquileresInquilino}/>
   </Route>
+  
+  <!-- Pantalla Control Alquileres Propietario -->
+  <Route path="/accion/12">
+    <ProteRoute componente={ControlAlquileresPropietario}/>
+  </Route>
 
   <!--Paginas info Grupo-->
   <Route path="/grupo/Inquilino">
@@ -100,6 +108,15 @@
     <ProteRoute componente={Notificaciones}/>
   </Route>
   
+  <!--Contratos Propietarios-->
+  <Route path="/propietario/contratos">
+    <ProteRoute componente={ContratosPropietario}/>
+  </Route>
+
+  <!--Contratos Inquilino-->
+  <Route path="/inquilino/contratos">
+    <ProteRoute componente={ContratoInquilino}/>
+  </Route>
 	
 </Router>
 

Front/src/paginas/ContratoInquilino.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
+
+
+</script>
+
+<NavBarAutocompletable/>

Front/src/paginas/ControlAlquileresInquilino.svelte

@@ -3,21 +3,46 @@
     import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
     import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
     import ModalEstatico from "../Componentes/ModalEstatico.svelte";
+    import {urlG} from "../stores/urlStore";
+    import type { ContratoDto } from "../types";
+    import BotonVolverArriba from "../Componentes/BotonVolverArriba.svelte";
+    import { fade } from "svelte/transition";
+    import { navigate } from "svelte-routing";
 
-    let token: string = sessionStorage.getItem("token") || "";
+    let token: string = sessionStorage.getItem("token")|| "";
 
-    let alquileres = $state([]);
+    let alquileres: ContratoDto[] = $state([]);
     let modaldata:string = $state("");
+    let showButton:boolean = $state(false);
 
     onMount(()=>{
-
+        recuperarContratos();
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
     });
 
+    const handleScroll = () => {
+        showButton = window.scrollY > 100;
+    };
     async function recuperarContratos() {
         try{
+            const responce = await fetch($urlG+"/api/contratos/inquilino", {
+                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";
         }
     }
 
@@ -33,15 +58,35 @@
     <BarraHorizontalConTexto text="Control Alquileres" />
 
     <div class="row g-3">
-        {#each alquileres as i}
-            
-        <div class="col-md-6"><!--a-->
-            <div class="card">
+        {#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">
-                    <p>a</p>
+                    <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}
+                    </p>
+                    <div class="d-flex justify-content-center">
+                        <button class="btn btn-primary" onclick={()=>navigate("/inquilino/contratos?id="+alquiler.id)}>
+                            Ver
+                        </button>
+                    </div>
+                </div>
+                <div class="card-footer text-center">
+                    <strong>Estado:</strong> {alquiler.estado}
                 </div>
             </div>
         </div>
         {/each}
     </div>
-</div>
+</div>
+{#if showButton }
+<div transition:fade={{duration:100}}>
+    <BotonVolverArriba/>
+</div>
+{/if}

Front/src/paginas/ControlAlquileresPropietario.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
+    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
+    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
+    import {urlG} from "../stores/urlStore";
+    import type { ContratoDto } from "../types";
+    import BotonVolverArriba from "../Componentes/BotonVolverArriba.svelte";
+    import { fade } from "svelte/transition";
+    import { navigate } from "svelte-routing";
+
+    let token: string = sessionStorage.getItem("token")|| "";
+
+    let alquileres: ContratoDto[] = $state([]);
+    let modaldata:string = $state("");
+    let showButton:boolean = $state(false);
+
+    onMount(()=>{
+        recuperarContratos();
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
+    });
+
+    const handleScroll = () => {
+        showButton = window.scrollY > 100;
+    };
+    async function recuperarContratos() {
+        try{
+            const responce = await fetch($urlG+"/api/contratos/propietario", {
+                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">
+    <BarraHorizontalConTexto text="Control Alquileres" />
+
+    <div class="row g-3">
+        {#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}
+                    </p>
+                    <div class="d-flex justify-content-center">
+                        <button class="btn btn-primary" onclick={()=>navigate("/propietario/contratos?id="+alquiler.id)}>
+                            Ver
+                        </button>
+                    </div>
+                </div>
+                <div class="card-footer text-center">
+                    <strong>Estado:</strong> {alquiler.estado}
+                </div>
+            </div>
+        </div>
+        {/each}
+    </div>
+</div>
+{#if showButton }
+<div transition:fade={{duration:100}}>
+    <BotonVolverArriba/>
+</div>
+{/if}

Front/src/types.d.ts

@@ -76,3 +76,13 @@ export type GaranteDto = {
   Celular: string;
   Domiciliolaboral: string;
 };
+
+export type ContratoDto ={
+  id: number,
+  ubicacion:string,
+  tipoPropiedad:string,
+  fechainicio:Date,
+  inquilino:string,
+  propietario:string,
+  estado:string,
+}