hecha funcionalida de modificar grupos

Front/src/paginas/AdminGrupos.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
-    import type { GrupoDto } from "../types";
+    import type { GrupoDto, PermisoDto } from "../types";
     import { urlG } from "../stores/urlStore";
+    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
+    import ModalEditarGrupo from "../Componentes/ModalEditarGrupo.svelte";
+    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
 
     const token: string = sessionStorage.getItem("token") || "";
 
@@ -10,6 +13,7 @@
     let modaldat: string = $state("");
     onMount(() => {
         ObtenerGrupos();
+        obtenerPermisos();
     });
     async function ObtenerGrupos() {
         try {
@@ -28,10 +32,76 @@
             modaldat = "Fallo Al intentar hacer la request";
         }
     }
+    let selgru: GrupoDto = $state({
+        gruposIncluidos: [],
+        idgrupo: 0,
+        nombre: "",
+        permisos: [],
+    });
+
+    let showModal: boolean = $state(false);
+    function setModalEditar(data: GrupoDto) {
+        selgru = data;
+        showModal = true;
+    }
+
+    async function submitedit(a: GrupoDto) {
+        let b = a;
+        try {
+            let req = await fetch($urlG + "/api/grupo", {
+                method: "PATCH",
+                headers: {
+                    Auth: token,
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(b),
+            });
+            const resp = await req.json();
+            modaldat = resp.message;
+            if (req.ok) {
+                ObtenerGrupos();
+            }
+        } catch {
+            modaldat = "Fallo al hacer la request";
+        }
+    }
+
+    let permisos: PermisoDto[] = $state([]);
+    async function obtenerPermisos() {
+        try {
+            let a = await fetch($urlG + "/api/permisos/todos", {
+                method: "GET",
+                headers: {
+                    Auth: token,
+                },
+            });
+            if (!a.ok) {
+                modaldat = "Fallo al obtener los permisos";
+                return;
+            }
+            permisos = await a.json();
+        } catch {
+            modaldat = "Fallo Al intentar hacer la request";
+        }
+    }
 </script>
 
+{#if modaldat != ""}
+    <ModalEstatico payload={modaldat} />
+{/if}
+
+{#if showModal}
+    <ModalEditarGrupo
+        bind:data={selgru}
+        {permisos}
+        {grupos}
+        onClose={() => (showModal = false)}
+        onSubmit={submitedit}
+    />
+{/if}
 <NavBarAutocompletable />
-<div class="container-fluid">
+<div class="container-fluid mt-2">
+    <BarraHorizontalConTexto text="Gestionar Grupos" />
     {#if grupos.length == 0}
         <div class="text-center">
             <div class="spinner-border" role="status">
@@ -92,7 +162,11 @@
                             </div>
                             <hr />
                             <div class="d-flex justify-content-between">
-                                <button class="btn btn-primary">Editar</button>
+                                <button
+                                    class="btn btn-primary"
+                                    onclick={() => setModalEditar(grupo)}
+                                    >Editar</button
+                                >
                             </div>
                         </div>
                     </div>