falta poner los fetch
This commit is contained in:
@@ -32,6 +32,7 @@
|
|||||||
import MisPropiedadesEnVenta from "./paginas/MisPropiedadesEnVenta.svelte";
|
import MisPropiedadesEnVenta from "./paginas/MisPropiedadesEnVenta.svelte";
|
||||||
import AdminGrupos from "./paginas/AdminGrupos.svelte";
|
import AdminGrupos from "./paginas/AdminGrupos.svelte";
|
||||||
import OtroG from "./paginas/grupos/OtroG.svelte";
|
import OtroG from "./paginas/grupos/OtroG.svelte";
|
||||||
|
import GestionPemisos from "./paginas/GestionPemisos.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Router>
|
<Router>
|
||||||
@@ -129,6 +130,11 @@
|
|||||||
<ProteRoute componente={BuscarVentas} />
|
<ProteRoute componente={BuscarVentas} />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
|
<!-- Creacion Permisos -->
|
||||||
|
<Route path="/accion/17">
|
||||||
|
<ProteRoute componente={GestionPemisos} />
|
||||||
|
</Route>
|
||||||
|
|
||||||
<!-- Gestion Grupos -->
|
<!-- Gestion Grupos -->
|
||||||
<Route path="/accion/18">
|
<Route path="/accion/18">
|
||||||
<ProteRoute componente={AdminGrupos} />
|
<ProteRoute componente={AdminGrupos} />
|
||||||
|
|||||||
85
Front/src/Componentes/ModalEditarPermiso.svelte
Normal file
85
Front/src/Componentes/ModalEditarPermiso.svelte
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import type { PermisoDto } from "../types";
|
||||||
|
|
||||||
|
let {
|
||||||
|
permiso = $bindable(),
|
||||||
|
onClose,
|
||||||
|
onSubmit,
|
||||||
|
modalTitle = "Modificar Permiso",
|
||||||
|
}: {
|
||||||
|
permiso: PermisoDto;
|
||||||
|
onClose: (a: string) => void;
|
||||||
|
onSubmit: (arg0: PermisoDto) => void;
|
||||||
|
modalTitle: string;
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
const maxChars = $state(25);
|
||||||
|
let remaining: number = $state(25);
|
||||||
|
const ogdesc: string = permiso.descripcion;
|
||||||
|
|
||||||
|
function saveChanges() {
|
||||||
|
onSubmit(permiso);
|
||||||
|
onClose(ogdesc);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateRemaining(event: Event) {
|
||||||
|
const inputValue = (event.target as HTMLInputElement).value;
|
||||||
|
permiso.descripcion = inputValue;
|
||||||
|
remaining = maxChars - inputValue.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
remaining = maxChars - permiso.descripcion.length;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="modal show fade d-block"
|
||||||
|
tabindex="-1"
|
||||||
|
aria-labelledby="textModalLabel"
|
||||||
|
style="background-color: rgba(0, 0, 0, 0.3);"
|
||||||
|
>
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="textModalLabel">{modalTitle}</h5>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-close"
|
||||||
|
aria-label="Close"
|
||||||
|
onclick={() => onClose(ogdesc)}
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="textInput" class="form-label">Descripcion</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="textInput"
|
||||||
|
value={permiso.descripcion}
|
||||||
|
maxlength={maxChars}
|
||||||
|
oninput={updateRemaining}
|
||||||
|
/>
|
||||||
|
<small class="form-text text-muted">
|
||||||
|
{remaining} caracteres restantes de {maxChars}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-secondary"
|
||||||
|
onclick={() => onClose(ogdesc)}>Cerrar</button
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-primary"
|
||||||
|
onclick={saveChanges}>Guardar</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
148
Front/src/paginas/GestionPemisos.svelte
Normal file
148
Front/src/paginas/GestionPemisos.svelte
Normal file
@@ -0,0 +1,148 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
|
||||||
|
import type { GrupoDto, PermisoDto } from "../types";
|
||||||
|
import { urlG } from "../stores/urlStore";
|
||||||
|
import ModalEstatico from "../Componentes/ModalEstatico.svelte";
|
||||||
|
import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
|
||||||
|
import BotonEsquina from "../Componentes/BotonEsquina.svelte";
|
||||||
|
import ModalEditarPermiso from "../Componentes/ModalEditarPermiso.svelte";
|
||||||
|
import Login from "./login.svelte";
|
||||||
|
|
||||||
|
const token: string = sessionStorage.getItem("token") || "";
|
||||||
|
|
||||||
|
let permisos: PermisoDto[] = $state([]);
|
||||||
|
let selpermiso: PermisoDto = $state({ descripcion: "", id: 0 });
|
||||||
|
let modaldat: string = $state("");
|
||||||
|
let showmodaladd = $state(false);
|
||||||
|
let showmodaledit = $state(false);
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
obtenerPermisos();
|
||||||
|
});
|
||||||
|
|
||||||
|
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) {
|
||||||
|
obtenerPermisos;
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
modaldat = "Fallo al hacer la request";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function NuevoPermiso(a: PermisoDto): void {
|
||||||
|
throw new Error("Function not implemented.WIP");
|
||||||
|
}
|
||||||
|
|
||||||
|
function PatchPermiso(): void {
|
||||||
|
throw new Error("Function not implemented.WIP");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if modaldat != ""}
|
||||||
|
<ModalEstatico payload={modaldat} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<NavBarAutocompletable />
|
||||||
|
<div class="container-fluid mt-2">
|
||||||
|
<BarraHorizontalConTexto text="Gestionar Permisos" />
|
||||||
|
|
||||||
|
{#if permisos.length == 0}
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="spinner-border" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="position-relative z-1">
|
||||||
|
<BotonEsquina handleclick={() => (showmodaladd = true)} />
|
||||||
|
</div>
|
||||||
|
{#if showmodaladd}
|
||||||
|
<ModalEditarPermiso
|
||||||
|
onClose={() => (showmodaladd = false)}
|
||||||
|
permiso={{ descripcion: "", id: 0 }}
|
||||||
|
onSubmit={NuevoPermiso}
|
||||||
|
modalTitle="Nuevo Permiso"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
{#if showmodaledit}
|
||||||
|
<div class="position-relative z-2">
|
||||||
|
<ModalEditarPermiso
|
||||||
|
onClose={(a: string) => {
|
||||||
|
showmodaledit = false;
|
||||||
|
selpermiso.descripcion = a;
|
||||||
|
}}
|
||||||
|
bind:permiso={selpermiso}
|
||||||
|
onSubmit={PatchPermiso}
|
||||||
|
modalTitle="Modificar Permiso"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="card mb-3">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">ID</th>
|
||||||
|
<th scope="col">Descripción</th>
|
||||||
|
<th scope="col">Accioness</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each permisos as permiso}
|
||||||
|
<tr>
|
||||||
|
<td>{permiso.id}</td>
|
||||||
|
<td>{permiso.descripcion}</td>
|
||||||
|
<td>
|
||||||
|
<div
|
||||||
|
class="d-flex justify-content-between"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="btn btn-warning btn-sm"
|
||||||
|
onclick={() => {
|
||||||
|
showmodaledit = true;
|
||||||
|
selpermiso = permiso;
|
||||||
|
}}>Editar</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user