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>