Añadido soporte para crear grupos nuevos
This commit is contained in:
20
Front/public/plus.svg
Normal file
20
Front/public/plus.svg
Normal file
@@ -0,0 +1,20 @@
|
||||
<!--
|
||||
category: Math
|
||||
tags: [add, create, new, "+"]
|
||||
version: "1.0"
|
||||
unicode: "eb0b"
|
||||
-->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M12 5l0 14" />
|
||||
<path d="M5 12l14 0" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 345 B |
41
Front/src/Componentes/BotonEsquina.svelte
Normal file
41
Front/src/Componentes/BotonEsquina.svelte
Normal file
@@ -0,0 +1,41 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let isHovered = $state(false);
|
||||
|
||||
let { handleclick } = $props();
|
||||
|
||||
function handleMouseEnter() {
|
||||
isHovered = true;
|
||||
}
|
||||
|
||||
function handleMouseLeave() {
|
||||
isHovered = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="position-fixed bottom-0 end-0 m-3 p-3 bg-secondary rounded-circle transition-element border"
|
||||
class:rotated={isHovered}
|
||||
class:active={isHovered}
|
||||
style="width: 5rem; height: 5rem;"
|
||||
onmouseenter={handleMouseEnter}
|
||||
onmouseleave={handleMouseLeave}
|
||||
onclick={handleclick}
|
||||
>
|
||||
<img
|
||||
src="/plus.svg"
|
||||
alt="añadir"
|
||||
style="width: 2.5rem; height: 2.5rem; filter: invert(1);"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.transition-element {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.rotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
133
Front/src/Componentes/ModalAñadirGrupo.svelte
Normal file
133
Front/src/Componentes/ModalAñadirGrupo.svelte
Normal file
@@ -0,0 +1,133 @@
|
||||
<script lang="ts">
|
||||
import type { GrupoDto, PermisoDto } from "../types";
|
||||
let {
|
||||
onClose,
|
||||
grupos,
|
||||
permisos,
|
||||
onSubmit,
|
||||
}: {
|
||||
onClose: () => void;
|
||||
grupos: GrupoDto[];
|
||||
permisos: PermisoDto[];
|
||||
onSubmit: (a: GrupoDto) => void;
|
||||
} = $props();
|
||||
|
||||
let data: GrupoDto = $state({
|
||||
gruposIncluidos: [],
|
||||
idgrupo: 0,
|
||||
nombre: "",
|
||||
permisos: [],
|
||||
});
|
||||
const handleSubmit = (e: Event) => {
|
||||
e.preventDefault();
|
||||
data.gruposIncluidos = grupos
|
||||
.filter(
|
||||
(grupo) =>
|
||||
(
|
||||
document.getElementById(
|
||||
`grupo-${grupo.idgrupo}`,
|
||||
) as HTMLInputElement
|
||||
)?.checked,
|
||||
)
|
||||
.map((grupo) => grupo.nombre);
|
||||
data.permisos = permisos.filter(
|
||||
(permiso) =>
|
||||
(
|
||||
document.getElementById(
|
||||
`permiso-${permiso.id}`,
|
||||
) as HTMLInputElement
|
||||
)?.checked,
|
||||
);
|
||||
onSubmit(data);
|
||||
onClose();
|
||||
};
|
||||
|
||||
let nombreGrupo = "";
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="modal show d-block"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
style="background: rgba(0, 0, 0, 0.5)"
|
||||
aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Añadir Grupo</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
aria-label="Close"
|
||||
onclick={onClose}
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="nombre-grupo" class="form-label"
|
||||
>Nombre del Grupo:</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="nombre-grupo"
|
||||
bind:value={data.nombre}
|
||||
placeholder="Ingrese el nombre del grupo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<h6>Incluir en 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>Asignar 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 Grupo</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -6,11 +6,15 @@
|
||||
import ModalEstatico from "../Componentes/ModalEstatico.svelte";
|
||||
import ModalEditarGrupo from "../Componentes/ModalEditarGrupo.svelte";
|
||||
import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
|
||||
import BotonEsquina from "../Componentes/BotonEsquina.svelte";
|
||||
import ModalAadirGrupo from "../Componentes/ModalAñadirGrupo.svelte";
|
||||
|
||||
const token: string = sessionStorage.getItem("token") || "";
|
||||
|
||||
let grupos: GrupoDto[] = $state([]);
|
||||
let modaldat: string = $state("");
|
||||
let showmodaladd = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
ObtenerGrupos();
|
||||
obtenerPermisos();
|
||||
@@ -84,6 +88,27 @@
|
||||
modaldat = "Fallo Al intentar hacer la request";
|
||||
}
|
||||
}
|
||||
|
||||
async function submitGrupo(a: GrupoDto) {
|
||||
let b = a;
|
||||
try {
|
||||
let req = await fetch($urlG + "/api/grupo", {
|
||||
method: "POST",
|
||||
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";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if modaldat != ""}
|
||||
@@ -102,6 +127,7 @@
|
||||
<NavBarAutocompletable />
|
||||
<div class="container-fluid mt-2">
|
||||
<BarraHorizontalConTexto text="Gestionar Grupos" />
|
||||
|
||||
{#if grupos.length == 0}
|
||||
<div class="text-center">
|
||||
<div class="spinner-border" role="status">
|
||||
@@ -109,6 +135,15 @@
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<BotonEsquina handleclick={() => (showmodaladd = true)} />
|
||||
{#if showmodaladd}
|
||||
<ModalAadirGrupo
|
||||
onClose={() => (showmodaladd = false)}
|
||||
{grupos}
|
||||
{permisos}
|
||||
onSubmit={submitGrupo}
|
||||
/>
|
||||
{/if}
|
||||
{#each grupos as grupo}
|
||||
<div class="accordion mt-2">
|
||||
<div class="accordion-item">
|
||||
|
||||
Reference in New Issue
Block a user