bueno ahora se pueden modificar los clientes

Front/src/Componentes/ModalModificarPropietarios.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import type { UpdateCliente } from "../types";
+
+
+    let {onCancel, onConfirm, datos}: {onCancel:()=>void, onConfirm:(a:UpdateCliente)=>void, datos:UpdateCliente} = $props();
+
+    let cli:UpdateCliente|any = $state({});
+    onMount(()=>{
+        cli.nombre = datos.nombre;
+        cli.dni = datos.dni;
+        cli.apellido = datos.apellido;
+        cli.domicilio = datos.domicilio;
+        cli.celular = datos.celular;
+    })
+    
+    function handleConfirm(e: Event) {
+        e.preventDefault();
+        onConfirm(cli);
+        onCancel();
+    }
+</script>
+
+<div class="modal fade show d-block" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Modificar Datos Cliente</h5>
+                <button type="button" class="btn-close" aria-label="Close" onclick={onCancel}></button>
+            </div>
+            <div class="modal-body">
+                <form>
+                    <div class="mb-3">
+                        <label for="nombre" class="form-label">Nombre</label>
+                        <input type="text" id="nombre" class="form-control" bind:value={cli.nombre} required />
+                    </div>
+                    <div class="mb-3">
+                        <label for="apellido" class="form-label">Apellido</label>
+                        <input type="text" id="apellido" class="form-control" bind:value={cli.apellido} required />
+                    </div>
+                    <div class="mb-3">
+                        <label for="domicilio" class="form-label">Domicilio</label>
+                        <input type="text" id="domicilio" class="form-control" bind:value={cli.domicilio} required />
+                    </div>
+                    <div class="mb-3">
+                        <label for="celular" class="form-label">Celular</label>
+                        <input type="tel" id="celular" class="form-control" bind:value={cli.celular} required />
+                    </div>
+                    <button type="submit" class="btn btn-primary" onclick={(e)=>handleConfirm(e)}>Guardar</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>

Front/src/paginas/AdminUsuarios.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
-    import type { Cliente, Grupo } from "../types";
+    import type { Cliente, Grupo, UpdateCliente } 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";
+    import ModalModificarPropietarios from "../Componentes/ModalModificarPropietarios.svelte";
+    import { CardLink } from "@sveltestrap/sveltestrap";
 
     let Clientes: Cliente[] = $state([]);
     let Grupos:any[] = $state([]);
@@ -16,7 +18,10 @@
     let grupo:string = $state("");
     let SelCliente: Cliente = $state(null);
 
-    onMount(async () => {
+    onMount(() => {
+        cargaUsuarios();
+    });
+    async function cargaUsuarios(){
         try{
             const response = await fetch($urlG+"/api/admin/clientes", {
                 method: "GET",
@@ -34,8 +39,7 @@
             modaldata = "fallo al intentar obtener la lista de clientes";
         }
 
-    });
-
+    }
     async function cargaGrupos(cli: Cliente){
         try {
             const response = await fetch($urlG+"/api/admin/clientes/grupo?Dni="+cli.dni, {
@@ -140,6 +144,59 @@
             modaldata = "Falla la conexion al servidor";
         }
     }
+
+    let showModificarCliente:boolean = $state(false);
+    let datoscli:UpdateCliente = $state({dni:0, apellido:"", celular:"", domicilio:"", nombre:""});
+
+    async function abrirModalModificarCliente(e: Event, cli: Cliente) {
+        e.stopPropagation();
+        try {
+            const r = await fetch($urlG+"/api/admin/cliente?dni="+cli.dni, {
+                method: "GET",
+                headers: {
+                    "Auth": token||"",
+                }
+            });
+            let data = await r.json();
+            if (r.ok){
+                datoscli = data;
+                datoscli.dni = cli.dni;
+                showModificarCliente = true;
+                return;
+            }
+            modaldata = data.message;
+        } catch {
+            modaldata = "Falla la conexion al servidor";
+        }
+    }
+
+    async function patchCliente(a:UpdateCliente) {
+        if (a.apellido =="" || a.celular=="" || a.domicilio=="" || a.nombre==""){
+            modaldata = "Hay campos vacios";
+            return;
+        }
+        let dto ={
+            apellido: a.apellido,
+            celular: a.celular,
+            domicilio: a.domicilio,
+            nombre: a.nombre,
+        }
+        try{
+            const r = await fetch($urlG+"/api/admin/cliente?dni="+a.dni, {
+                method: "PATCH",
+                headers: {
+                    "Auth": token||"",
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(dto),
+            });
+            let data = await r.json();
+            modaldata = data.message;
+            if (r.ok) cargaUsuarios();
+        }catch{
+            modaldata = "Falla la conexion al servidor";
+        }
+    }
 </script>
 
 <NavBarAutocompletable/>
@@ -148,13 +205,18 @@
 <ModalEstatico payload={modaldata} close={()=> !!(modaldata = "")}/>
 {/if}
 
+{#if showModificarCliente}
+<ModalModificarPropietarios datos={datoscli} onCancel={()=>!!(showModificarCliente = false)}
+    onConfirm={patchCliente}/>
+{/if}
+
 <div class="content-fluid align-items-start">
     <div class="row">
-        <div class="col" style="padding-right: 2px;">
+        <div class="col ms-2">
             <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">
+                <table class="table table-responsive table-striped table-hover table-bordered">
                     <thead>
                         <tr>
                             <th>Dni</th>
@@ -171,14 +233,17 @@
                             <td>{cli.email}</td>
                             <td>
                                 {#if cli.habilitado}
-                                <button class="btn btn-outline-warning" onclick={(e) => bajaCliente(e, cli)}>
+                                <button class="btn btn-warning" onclick={(e) => bajaCliente(e, cli)}>
                                     Baja
                                 </button>
                                 {:else}
-                                <button class="btn btn-outline-success" onclick={(e) => bajaCliente(e, cli)}>
+                                <button class="btn btn-success" onclick={(e) => bajaCliente(e, cli)}>
                                     Alta
                                 </button>
                                 {/if}
+                                <button class="btn btn-secondary" onclick={(e)=>abrirModalModificarCliente(e, cli)}>
+                                    Modificar
+                                </button>
                             </td>
                         </tr>
                         {/each}
@@ -186,7 +251,7 @@
                 </table>
             </div>
         </div>
-        <div class="col"style="padding-left: 2px;">
+        <div class="col me-2 ps-0">
             <BarraHorizontalConTexto text="Grupos del Cliente Seleccionado"/>
             <table class="table table-striped table-responsive table-sm table-bordered">
                 <thead>
@@ -208,11 +273,11 @@
                     {/each}
                     {:else if SelCliente != null}
                     <tr>
-                        <td colspan="2">Este Cliente no tiene Grupos</td>
+                        <td colspan="3">Este Cliente no tiene Grupos</td>
                     </tr>
                     {:else}
                     <tr>
-                        <td colspan="2">Seleccione un cliente para ver sus grupos</td>
+                        <td colspan="3">Seleccione un cliente para ver sus grupos</td>
                     </tr>
                     {/if}
                 </tbody>

Front/src/types.d.ts

@@ -179,4 +179,12 @@ export type LogDetalleDto = {
   columna:string, 
   valorAnterior:string, 
   valorNuevo:string
+}
+
+export type UpdateCliente = {
+  dni:number,
+  nombre:string,
+  apellido:string,
+  domicilio:string,
+  celular:string,
 }