hecha funcionalida de modificar grupos

Front/src/Componentes/ModalEditarGrupo.svelte

@@ -1,21 +1,33 @@
 <script lang="ts">
-    import { onMount } from "svelte";
-    import type { GrupoDto } from "../types";
-
+    import type { GrupoDto, PermisoDto } from "../types";
     let {
         onClose,
         data = $bindable(),
+        grupos,
+        permisos,
         onSubmit,
     }: {
         onClose: () => void;
         data: GrupoDto;
+        grupos: GrupoDto[];
+        permisos: PermisoDto[];
         onSubmit: (a: GrupoDto) => void;
     } = $props();
 
-    onMount(() => {});
     const handleSubmit = (e: Event) => {
         e.preventDefault();
+        data.gruposIncluidos = grupos
+            .filter(
+                (grupo) =>
+                    document.getElementById(`grupo-${grupo.idgrupo}`)?.checked,
+            )
+            .map((grupo) => grupo.nombre);
+        data.permisos = permisos.filter(
+            (permiso) =>
+                document.getElementById(`permiso-${permiso.id}`)?.checked,
+        );
         onSubmit(data);
+        onClose();
     };
 </script>
 
@@ -23,6 +35,7 @@
     class="modal show d-block"
     tabindex="-1"
     role="dialog"
+    style="background: rgba(0, 0, 0, 0.5)"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true"
 >
@@ -39,7 +52,57 @@
                     onclick={onClose}
                 ></button>
             </div>
-            <div class="modal-body"></div>
+            <div class="modal-body">
+                <div class="mb-3">
+                    <h6>Grupos:</h6>
+                    {#each grupos as grupo}
+                        <div class="form-check">
+                            <input
+                                type="checkbox"
+                                class="form-check-input"
+                                id={`grupo-${grupo.idgrupo}`}
+                                checked={data.gruposIncluidos?.includes(
+                                    grupo.nombre,
+                                )}
+                            />
+                            <label
+                                class="form-check-label"
+                                for={`grupo-${grupo.idgrupo}`}
+                            >
+                                {grupo.nombre}
+                            </label>
+                        </div>
+                    {/each}
+                </div>
+
+                <div>
+                    <h6>Permisos:</h6>
+                    {#each permisos as permiso}
+                        <div class="form-check">
+                            <input
+                                type="checkbox"
+                                class="form-check-input"
+                                id={`permiso-${permiso.id}`}
+                                checked={data.permisos?.some(
+                                    (p) => p.id === permiso.id,
+                                )}
+                            />
+
+                            <label
+                                class="form-check-label"
+                                for={`permiso-${permiso.id}`}
+                            >
+                                {permiso.descripcion}
+                            </label>
+                        </div>
+                    {/each}
+                </div>
+            </div>
+            <div class="modal-footer d-flex justify-content-center">
+                <button class="btn btn-primary w-100" onclick={handleSubmit}
+                    >Guardar</button
+                >
+            </div>
         </div>
     </div>
 </div>

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>