bueno ahora se pueden modificar los clientes

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>