v2 ing soft #89
@@ -32,6 +32,7 @@
|
||||
import MisPropiedadesEnVenta from "./paginas/MisPropiedadesEnVenta.svelte";
|
||||
import AdminGrupos from "./paginas/AdminGrupos.svelte";
|
||||
import OtroG from "./paginas/grupos/OtroG.svelte";
|
||||
import GestionPemisos from "./paginas/GestionPemisos.svelte";
|
||||
</script>
|
||||
|
||||
<Router>
|
||||
@@ -129,6 +130,11 @@
|
||||
<ProteRoute componente={BuscarVentas} />
|
||||
</Route>
|
||||
|
||||
<!-- Creacion Permisos -->
|
||||
<Route path="/accion/17">
|
||||
<ProteRoute componente={GestionPemisos} />
|
||||
</Route>
|
||||
|
||||
<!-- Gestion Grupos -->
|
||||
<Route path="/accion/18">
|
||||
<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