AlquilaFacil/Front/src/paginas/BuscarVentas.svelte

<script lang="ts">
    import { onMount } from "svelte";
    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
    import type { PropiedadDto, PropiedadVentaDto } from "../types";
    import { urlG } from "../stores/urlStore";
    import BotonVolverArriba from "../Componentes/BotonVolverArriba.svelte";
    import { fade } from "svelte/transition";
    import ModalConfirm from "../Componentes/ModalConfirm.svelte";
    import PaginacionStepper from "../Componentes/PaginacionStepper.svelte";

    let token = sessionStorage.getItem("token")||"";

    let propiedades:PropiedadVentaDto[]|null = $state(null);
    let pag:number = $state(1);
    let cantpag:number = $state(0);
    let message:string = "Esto le enviará una notificacion al propietario";
    let show:boolean = $state(false);


    let showButton:boolean = $state(false);
    let modaldata:string = $state("");


    onMount(()=>{
        obtenerpropiedades();

        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    });

    const handleScroll = () => {
        showButton = window.scrollY > 100;
    };

    async function obtenerpropiedades() {
        try {
            const r = await fetch($urlG+"/api/propiedades/Venta?pag="+pag, {
                method:"GET",
                headers: {
                    "Auth": token
                }
            });
            let data = await r.json();
            if(r.ok){
                propiedades = data.propiedades;
                cantpag = data.cantpaginas;
                return;
            }
            modaldata = data.message;
        } catch {
            modaldata = "Fallo al hacer la request";
        }
    }

    let selp: PropiedadVentaDto|any = $state();
    function Consultar(p:PropiedadVentaDto) {
        selp = p;
        show = true;
    }

    async function handleConfirm() {
        const remitente = localStorage.getItem("email");
        const accion = "Consulta Compra";
        let mensaje = "el usuario con email: "+remitente+" quiere comprar la propiedad situada en: "+selp.ubicacion;
        const propiedad = selp.id;
        try { 
            const responce = await fetch($urlG+"/api/notificar/ConsultaCompra", {
                method: "POST",
                headers: {
                "Auth": token,
                "Content-Type": "application/json"
                },
                body : JSON.stringify({remitente, accion, mensaje, propiedad})
            });
            let data = await responce.json();
            modaldata = data.message;

        } catch {
            modaldata = "Fallo al hacer la request";
        }

        show=!show;
    }

    async function queryPag(a:number) {
        pag= a;
        obtenerpropiedades();
    }
</script>

<NavBarAutocompletable/>

<div class="container-fluid mt-2">
    <BarraHorizontalConTexto text="Venta Propiedades"/>
    <div class="row">
        {#if propiedades == null}
        <div class="position-absolute start-50 top-50">
            <div class="spinner-border" role="status">
            </div>
            Cargando...
        </div>
        {:else if propiedades.length <= 0}
            <div class="card">
                <div class="card-body">
                    No hay Propiedades a la Venta.
                </div>
            </div>
        {:else}
            {#each propiedades as p}
                <div class="col-12 col-md-6 mb-3">
                    <ModalConfirm {show} {message} title="Consulta" onConfirm={handleConfirm} onCancel={()=>show=false}/>
                    <div class="card text-center border shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">{p.tipo}</h5>
                        </div>
                        <div class="card-body">
                            <div class="card-img-top mb-3">
                                <i class="bi bi-building" style="font-size: 3rem;"></i>
                            </div>
                            <h6 class="card-title">{p.ubicacion}</h6>
                            <p class="card-text">
                                <strong>Habitaciones:</strong> {p.canthabitaciones}<br>
                                <strong>Piso:</strong> {p.piso || "N/A"}<br>
                                <strong>Letra:</strong> {p.letra || "N/A"}<br>
                                <strong>Servicios:</strong> {p.servicios || "Sin servicios especificados"}<br>
                                <strong>Monto:</strong>
                                {p.divisa} {p.monto}<br>
                            </p>
                            <button class="btn btn-primary" onclick={()=>Consultar(p)}>Consultar Compra</button>
                        </div>
                        <div class="card-footer text-muted">
                            ID Propiedad: {p.id}
                        </div>
                    </div>
                </div>
            {/each}
            <div class="d-flex justify-content-center">
                <PaginacionStepper currentPag={pag} {cantpag} {queryPag}/>
            </div>
        {/if}
    </div>
</div>
{#if showButton }
<div transition:fade={{duration:100}}>
    <BotonVolverArriba/>
</div>
{/if}