implementado hasta el ultimo paso antes de hacer la tercera notificacion

Front/src/Componentes/PublicacionPropiedad.svelte

@@ -2,15 +2,19 @@
   import type { PropiedadDto } from "../types";
   import ModalConfirm from "./ModalConfirm.svelte";
   import {urlG} from "../stores/urlStore";
+    import ModalEstatico from "./ModalEstatico.svelte";
   
   let { prop }: { prop: PropiedadDto } = $props();
 
   let show: boolean = $state(false);
   let token = sessionStorage.getItem("token");
   let remitente = localStorage.getItem("email");
+  const accion = "Nuevo Alquiler";
+  let modaldata = $state("");
+  let mensaje = `Alquiler: ${prop.ubicacion} a ${remitente}`;
 
   const message: string = "Queres consultar con el propietario por el alquiler? (esto le envia una notificacion y email al propietario)";
-  const accion = "Consulta Nuevo Alquiler";
+  
 
   function Consultar() {
     show = true;
@@ -19,14 +23,18 @@
   async function onConfirm() {
     const propiedad = prop.id;
     try { 
-      const responce = await fetch($urlG+"/api/notificaciones", {
+      const responce = await fetch($urlG+"/api/notificaciones/consultaAlquiler", {
         method: "POST",
         headers: {
-          "Auth": String(token)
+          "Auth": String(token),
+          "Content-Type": "application/json"
         },
-        body : JSON.stringify({remitente, accion, propiedad})
+        body : JSON.stringify({remitente, accion, mensaje, propiedad})
       });
+      if (responce.ok){
+        let data = await responce.json();
 
+      }
     } catch {
 
     }
@@ -40,6 +48,11 @@
 
 </script>
 
+{#if modaldata}
+  <ModalEstatico payload={modaldata} close={()=>!!(modaldata = "")} />
+{/if}
+
+
 <ModalConfirm {show} {message} title="Consulta" {onConfirm} {onCancel}/>
 <div class="card text-center border shadow-sm">
   <div class="card-header bg-primary text-white">

Front/src/paginas/Notificaciones.svelte

@@ -3,26 +3,113 @@
     import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
     import type { MensajeDto } from "../types";
     import ModalEstatico from "../Componentes/ModalEstatico.svelte";
+    import { urlG } from "../stores/urlStore";
+    import ModalConfirm from "../Componentes/ModalConfirm.svelte";
+    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
+    import { text } from "@sveltejs/kit";
 
     const token = sessionStorage.getItem("token");
     let mensajes: MensajeDto[] = $state([]);
     let showspinner:boolean =$state(false);
     let mostrarleidos: boolean = $state(false);
     let modaldata:string =$state("");
+    let Selmens: MensajeDto;
+    
+    let show:boolean = $state(false);
+    let title:string = $state("");
+    let message:string = $state("");
 
     onMount(async () => {
-        showspinner = true;
         SinLeer();
     })
     
     async function SinLeer() {
         mostrarleidos = false;
+        showspinner = true;
+        try{
+            const responce = await fetch($urlG+"/api/notificaciones?leido="+mostrarleidos, {
+                method: "GET",
+                headers: {
+                    "Auth": String(token)
+                }
+            });
+            if (responce.ok) {
+                let data = await responce.json();
+                mensajes = data;
+                showspinner = false;
+                return;
+            }
+            let errordata = await responce.json();
+            modaldata = errordata.message;
+        } catch{
+            modaldata = "no se pudo obtener notificaciones";
+        }
 
     }
 
     async function Leidos() {
         mostrarleidos = true;
+        showspinner = true;
+        try {
+            const responce = await fetch($urlG+"/api/notificaciones?leido="+true, {
+                method: "GET",
+                headers: {
+                    "Auth": String(token)
+                }
+            });
+            if (responce.ok) {
+                let data = await responce.json();
+                mensajes = data;
+                showspinner = false;
+                return;
+            }
+            let errordata = await responce.json();
+            modaldata = errordata.message;
+        } catch {
+            modaldata = "no se pudo obtener notificaciones";
+        }
     }
+
+    function setModalConfirm(men:MensajeDto){
+        Selmens = men;
+        message = "${}"
+        show = true;
+
+    }
+
+    async function marcarleido( fecha: Date, email: string, men:MensajeDto ) {
+        show = true;
+
+        try {
+            const responce = await fetch($urlG+"/api/notificaciones", {
+                method: "PUT",
+                headers: {
+                    "Auth": String(token),
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({fecha, email}),
+            });
+            if (responce.ok) {
+                let data = await responce.json();
+                modaldata = data.message;
+                mensajes = mensajes.filter(m => m !== men);
+                return;
+            }
+            let dataerror = await responce.json();
+            modaldata = dataerror.message;
+        } catch {
+            modaldata = "no se pudo marcar como leido";
+        }
+    }
+
+
+    function abrirModal(mensaje: MensajeDto) {
+        Selmens = mensaje;
+        title = "Confirmar proceso de alquiler";
+        message ="Aceptar este proceso eliminará la propiedad del menú de búsqueda. Se informará al inquilino que debe pasar los datos de sus garantías. ¿Desea continuar?";
+        show = true;
+    }
+
 </script>
 
 <NavBarAutocompletable/>
@@ -31,8 +118,17 @@
     <ModalEstatico payload={modaldata} close={()=>!!(modaldata = "")} />
 {/if}
 
+<ModalConfirm
+    {show}
+    {title}
+    {message}
+    onCancel={() => (show = false)}
+    onConfirm={()=>1+1}
+/>
 <div class="container">
     <br>
+    <BarraHorizontalConTexto text="Notificaciones"/>
+    <br>
 
     <div class="btn-group">
         <button class="btn btn-primary" class:active={mostrarleidos==false} onclick={SinLeer} >Sin Leer</button>
@@ -47,7 +143,7 @@
 
         </div>
         {:else}
-        <table class="table table-responsive table-striped table-hover">
+        <table class="table container-fluid table-responsive table-striped table-hover">
             <thead>
                 <tr>
                     <th>Remitente</th>
@@ -55,19 +151,41 @@
                     <th>Mensaje</th>
                     <th>Fecha</th>
                     <th>Propiedad</th>
+                    {#if mostrarleidos == false}
+                    <th></th>
+                    {/if}
                 </tr>
             </thead>
             
             <tbody>
-                {#each mensajes as men }
+                {#if mensajes.length <= 0}
                 <tr>
-                    <td>men.remitente</td>
-                    <td>men.accion</td>
-                    <td>men.mensaje</td>
-                    <td>men.fecha</td>
-                    <td>men.propiedad</td>
+                    <td colspan={mostrarleidos == false ? 6 : 5}>
+                        <p>No hay Mensajes para leer</p>
+                    </td>
+                </tr>
+                {:else}                
+                {#each mensajes as men}
+                <tr>
+                    <td>{men.remitente}</td>
+                    <td>{men.accion}</td>
+                    <td>{men.mensaje}</td>
+                    <td>{men.fecha}</td>
+                    <td>{men.propiedad}</td>
+
+                    {#if mostrarleidos == false}
+                    <td>
+                        <button
+                        class="btn btn-outline-primary btn-sm"
+                        onclick={() => abrirModal(men)}
+                    >
+                        Expandir
+                        </button>                    
+                    </td>
+                {/if}
                 </tr>
                 {/each}                
+                {/if}
             </tbody>
         </table>
         {/if}