avances añadido listado de clientes y sus grupos

Front/src/App.svelte

@@ -14,6 +14,7 @@
   import FrontPropietario from "./paginas/grupos/PropietarioG.svelte";
   import PublicarPropiedad from "./paginas/PublicarPropiedad.svelte";
   import BusquedaPropiedades from "./paginas/BusquedaPropiedades.svelte";
+    import ControlUsuarios from "./paginas/ControlUsuarios.svelte";
 </script>
 
 <Router>
@@ -61,6 +62,12 @@
     <ProteRoute componente={MisPropiedadesDeBaja}/>
   </Route>
 
+  <!-- Pantalla Control Usuarios -->
+  <Route path="/accion/9">
+    <ProteRoute componente={ControlUsuarios}/>
+  </Route>
+  
+
   <!--Paginas info Grupo-->
   <Route path="/grupo/Inquilino">
     <ProteRoute componente={FrontInquilino}/>

Front/src/Componentes/BarraHorizontalConTexto.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-    let prop = $props();
+    let {text} = $props();
 
 </script>
 
 
 <div class="row">
     <div class="col"><hr></div>
-    <div class="col-auto"><h5>{prop.text}</h5></div>
+    <div class="col-auto"><h5>{text}</h5></div>
     <div class="col"><hr></div>
 </div>

Front/src/Componentes/RowPropiedad.svelte

@@ -47,7 +47,6 @@
   <td>{servicios}</td>
   <td class="text-end">
     <button class="btn btn-outline-secondary" onclick={()=> setmod()}>Modificar</button>
-    <button class="btn btn-outline-secondary" >Ver Más</button>
     <button class="btn btn-outline-danger" onclick={() => BajaPropiedad()}>{btnbaja}</button>
   </td>
 </tr>

Front/src/paginas/ControlUsuarios.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
+    import type { Cliente, Grupo } from "../types";
+    import {urlG} from "../stores/urlStore";
+    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
+    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
+    import { fade, fly } from "svelte/transition";
+
+    let Clientes: Cliente[] = $state([]);
+    let Grupos:any[] = $state([]);
+    let modaldata = $state();
+    let token = sessionStorage.getItem("token");
+    let showAddmenu: boolean = $state(false)
+
+    onMount(async () => {
+        try{
+            const response = await fetch($urlG+"/api/admin/clientes", {
+                method: "GET",
+                headers: {
+                    "Auth": String(token),
+                }
+            })
+            if (response.ok) {
+                let data: Cliente[] = await response.json();
+                Clientes = data;
+                return;
+            }
+            modaldata = "fallo al asignar la lista de clientes";
+        } catch {
+            modaldata = "fallo al intentar obtener la lista de clientes";
+        }
+
+    });
+
+    async function cargaGrupos(dni: number){
+        try {
+            const response = await fetch($urlG+"/api/admin/clientes/grupo?Dni="+dni, {
+                method: "GET",
+                headers: {
+                    "Auth": String(token),
+                },
+            });
+            if (response.ok){
+                let data = await response.json();
+                Grupos = data;
+                showAddmenu = true;
+                return;
+            }
+
+            modaldata = await response.json();
+        } catch {
+            modaldata = "no se pudo obtener la lista de grupos";
+        }
+    }
+
+    async function bajaCliente(event:Event, Dni:number) {
+        //WIP añadir una flag para que muestre que no se pudo dar se alta/baja
+        event.stopPropagation();
+        try {
+            const response = await fetch($urlG+"/api/admin/cliente?Dni="+Dni, {
+                method: "DELETE",
+                headers: {
+                    "Auth": String(token),
+                }
+            });
+            if(response.ok){
+                let data = await response.json();
+                modaldata = data.message;
+            }
+        } catch {
+            modaldata = "";
+
+        }
+        
+    }
+</script>
+
+<NavBarAutocompletable/>
+
+{#if modaldata}
+<ModalEstatico payload={modaldata} close={()=> !!(modaldata = "")}/>
+{/if}
+
+<div class="content-fluid align-items-start">
+    <div class="row">
+        <div class="col" style="padding-right: 2px;">
+            <BarraHorizontalConTexto text="Clientes"/>
+            
+            <div style="height:70vh; overflow-y: auto; max-width: 100%">
+                <table class="table table-responsive table-sm table-striped table-hover table-bordered">
+                    <thead>
+                        <tr>
+                            <th>Dni</th>
+                            <th>Nombre/Apellido</th>
+                            <th>Email</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {#each Clientes as cli}
+                        <tr onclick={() => cargaGrupos(cli.dni)} in:fade>
+                            <td>{cli.dni}</td>
+                            <td>{cli.nombre}</td>
+                            <td>{cli.email}</td>
+                            <td>
+                                {#if cli.habilitado}
+                                <button class="btn btn-outline-warning" onclick={(e) => bajaCliente(e, cli.dni)}>
+                                    Baja
+                                </button>
+                                {:else}
+                                <button class="btn btn-outline-success">
+                                    Alta
+                                </button>
+                                {/if}
+                            </td>
+                        </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="col"style="padding-left: 2px;">
+            <BarraHorizontalConTexto text="Grupos del Cliente Seleccionado"/>
+            <table class="table table-striped table-responsive table-sm table-bordered">
+                <thead>
+                    <tr>
+                        <th>Id</th>
+                        <th>Descripcion</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {#each Grupos as g}
+                    <tr in:fade>
+                        <td>{g.id}</td>
+                        <td>{g.descripcion}</td>
+                        <td><button class="btn btn-outline-danger" onclick={()=>modaldata = "Hi babe"}>Baja</button></td>
+                    </tr>
+                    {/each}
+                </tbody>
+            </table>
+
+            {#if showAddmenu}
+            <div in:fade>
+
+                <BarraHorizontalConTexto text="Añadir Grupos al Usuario"/>
+                <form class="card card-body">
+                    <div class="mb-3">
+                        <label for="userRole" class="form-label">Seleccionar Grupo</label>
+                        <select id="userRole" class="form-select">
+                            <option value="1">Propietario</option>
+                            <option value="2">Inquilino</option>
+                            <option value="3">Admin</option>
+                            <option value="4">Informes</option>
+                        </select>
+                    </div>
+                    <button class="btn btn-primary" type="submit">Añadir</button>
+                </form>
+            </div>
+            {/if}
+        </div>
+    </div>
+</div>
+    

Front/src/paginas/MisPropiedades.svelte

@@ -5,6 +5,7 @@
   import RowPropiedad from "../Componentes/RowPropiedad.svelte";
   import type { PropiedadDto } from "../types";
   import { urlG } from "../stores/urlStore";
+    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
 
   let propiedades = writable<PropiedadDto[]>([]);
   let email = localStorage.getItem("email");
@@ -39,11 +40,9 @@
 </script>
 
 <NavBarAutocompletable/>
-<h1 class="text-center">
-  Propiedades de Alta
-</h1>
-<div class="container table-responsive border border-success">
-  <table class="table-responsive table table-striped">
+<BarraHorizontalConTexto text="Propiedades dadas de Alta"/>
+<div class="container table-responsive">
+  <table class="container-fluid table-responsive table table-striped table-bordered">
     <thead>
       <tr>
         <th>#</th>
@@ -53,12 +52,12 @@
         <th>Piso</th>
         <th>Tipo</th>
         <th>Servicios</th>
+        <th></th>
       </tr>
     </thead>
     <tbody>
     {#each $propiedades as propiedad}
     	<RowPropiedad id={propiedad.id} ubicacion={propiedad.ubicacion} letra={propiedad.letra} piso={propiedad.piso} tipo={propiedad.tipo} canthabitaciones={propiedad.canthabitaciones} servicios={propiedad.servicios} />
-    	
     {/each}
     </tbody>
   </table>

Front/src/paginas/MisPropiedadesDeBaja.svelte

@@ -5,6 +5,7 @@
   import RowPropiedad from "../Componentes/RowPropiedad.svelte";
   import type { PropiedadDto } from "../types";
   import { urlG } from "../stores/urlStore";
+    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
 
   let propiedades = writable<PropiedadDto[]>([]);
   let email = localStorage.getItem("email");
@@ -39,11 +40,10 @@
 </script>
 
 <NavBarAutocompletable/>
-<h1 class="text-center">
-  Propiedades de Baja
-</h1>
-<div class="container table-responsive border border-success">
-  <table class="table-responsive table table-striped">
+<BarraHorizontalConTexto text="Propiedades dadas de Baja"/>
+
+<div class="container table-responsive">
+  <table class="table-responsive table table-striped table-bordered">
     <thead>
       <tr>
         <th>#</th>
@@ -53,12 +53,12 @@
         <th>Piso</th>
         <th>Tipo</th>
         <th>Servicios</th>
+        <th></th>
       </tr>
     </thead>
     <tbody>
     {#each $propiedades as propiedad}
     	<RowPropiedad id={propiedad.id} ubicacion={propiedad.ubicacion} letra={propiedad.letra} piso={propiedad.piso} tipo={propiedad.tipo} canthabitaciones={propiedad.canthabitaciones} servicios={propiedad.servicios} btnbaja={"Alta"}/>
-    	
     {/each}
     </tbody>
   </table>

Front/src/types.d.ts

@@ -12,6 +12,13 @@ export type Permiso = {
     descripcion: string;
   };
 
+export type Cliente = {
+  dni: number,
+  nombre: string,
+  email: string,
+  habilitado: boolean
+}
+
 export type Grupo = {
     id: number;
     nombre: string;