fede/AlquilaFacil
Public Access
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

refactor de admin usuarios

Browse Source
This commit is contained in:
fedpo
2025-04-21 16:33:11 -03:00
parent 4e5e0a4f6f
commit 524a315dc1
1 changed files with 149 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
Front/src/paginas/AdminUsuarios.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte"; import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
import type { Cliente, Grupo, UpdateCliente } from "../types"; import type { Cliente, Grupo, GrupoDto, UpdateCliente } from "../types";
import {urlG} from "../stores/urlStore"; import { urlG } from "../stores/urlStore";
import ModalEstatico from "../Componentes/ModalEstatico.svelte"; import ModalEstatico from "../Componentes/ModalEstatico.svelte";
import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte"; import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
import { fade, fly } from "svelte/transition"; import { fade, fly } from "svelte/transition";
@@ -10,12 +10,12 @@
import { CardLink } from "@sveltestrap/sveltestrap"; import { CardLink } from "@sveltestrap/sveltestrap";
let Clientes: Cliente[] = $state([]); let Clientes: Cliente[] = $state([]);
let Grupos:any[] = $state([]); let Grupos: any[] = $state([]);
let modaldata = $state(); let modaldata = $state();
let token = sessionStorage.getItem("token"); let token = sessionStorage.getItem("token");
let showAddmenu: boolean = $state(false); let showAddmenu: boolean = $state(false);
let grupo:string = $state(""); let grupo: string = $state("");
let SelCliente: Cliente = $state(null); let SelCliente: Cliente = $state(null);
let gruposopt: GrupoDto[] = $state([]); let gruposopt: GrupoDto[] = $state([]);
@@ -61,15 +61,18 @@
modaldata = "fallo al intentar obtener la lista de clientes"; modaldata = "fallo al intentar obtener la lista de clientes";
} }
} }
async function cargaGrupos(cli: Cliente){ async function cargaGrupos(cli: Cliente) {
try { try {
const response = await fetch($urlG+"/api/admin/clientes/grupo?Dni="+cli.dni, { const response = await fetch(
method: "GET", $urlG + "/api/admin/clientes/grupo?Dni=" + cli.dni,
headers: { {
"Auth": String(token), method: "GET",
headers: {
Auth: String(token),
},
}, },
}); );
if (response.ok){ if (response.ok) {
let data = await response.json(); let data = await response.json();
Grupos = data; Grupos = data;
showAddmenu = true; showAddmenu = true;
@@ -83,45 +86,49 @@
} }
} }
async function bajaCliente(event:Event, cli:Cliente) { async function bajaCliente(event: Event, cli: Cliente) {
//WIP añadir una flag para que muestre que no se pudo dar se alta/baja //WIP añadir una flag para que muestre que no se pudo dar se alta/baja
event.stopPropagation(); event.stopPropagation();
try { try {
const response = await fetch($urlG+"/api/admin/cliente?Dni="+cli.dni, { const response = await fetch(
method: "DELETE", $urlG + "/api/admin/cliente?Dni=" + cli.dni,
headers: { {
"Auth": String(token), method: "DELETE",
} headers: {
}); Auth: String(token),
if(response.ok){ },
},
);
if (response.ok) {
let data = await response.json(); let data = await response.json();
modaldata = data.message; modaldata = data.message;
cli.habilitado = !cli.habilitado; cli.habilitado = !cli.habilitado;
} }
} catch { } catch {
modaldata = ""; modaldata = "";
} }
} }
async function añadirGrupo(e:Event, cli: Cliente, grupo:string){ async function añadirGrupo(e: Event, cli: Cliente, grupo: string) {
e.preventDefault(); e.preventDefault();
if (cli.dni == 0 || cli.email == "" || grupo == ""){ if (cli.dni == 0 || cli.email == "" || grupo == "") {
modaldata = "No se selecciono un cliente o Grupo"; modaldata = "No se selecciono un cliente o Grupo";
return; return;
} }
const email = cli.email; const email = cli.email;
try { try {
const response = await fetch($urlG+"/api/admin/cliente/addGrupo", { const response = await fetch(
method: "PATCH", $urlG + "/api/admin/cliente/addGrupo",
headers: { {
"Auth": String(token), method: "PATCH",
'Content-Type' : 'application/json', headers: {
Auth: String(token),
"Content-Type": "application/json",
},
body: JSON.stringify({ email, grupo }),
}, },
body: JSON.stringify({email, grupo}) );
});
if (response.ok){ if (response.ok) {
let data = await response.json(); let data = await response.json();
modaldata = data.message; modaldata = data.message;
cargaGrupos(cli); cargaGrupos(cli);
@@ -133,27 +140,32 @@
modaldata = "Falla la conexion al servidor"; modaldata = "Falla la conexion al servidor";
} }
} }
async function BajaGrupo(e:Event, cli: Cliente, grupo:string){ async function BajaGrupo(e: Event, cli: Cliente, grupo: string) {
e.preventDefault(); e.preventDefault();
if (cli.dni == 0 || cli.email == "" || grupo == ""){ if (cli.dni == 0 || cli.email == "" || grupo == "") {
modaldata = "No se selecciono un cliente o Grupo"; modaldata = "No se selecciono un cliente o Grupo";
return; return;
} }
const email = cli.email; const email = cli.email;
if (grupo === "Propietario"){ if (grupo === "Propietario") {
if (confirm("Sos propietario si te desactivas de ese rol tus propiedades se van a dar de baja, Estas seguro?") == false) return; if (
confirm(
"Sos propietario si te desactivas de ese rol tus propiedades se van a dar de baja, Estas seguro?",
) == false
)
return;
} }
try { try {
const response = await fetch($urlG+"/api/admin/cliente/rmGrupo", { const response = await fetch($urlG + "/api/admin/cliente/rmGrupo", {
method: "PATCH", method: "PATCH",
headers: { headers: {
"Auth": String(token), Auth: String(token),
'Content-Type' : 'application/json', "Content-Type": "application/json",
}, },
body: JSON.stringify({email, grupo}) body: JSON.stringify({ email, grupo }),
}); });
if (response.ok){ if (response.ok) {
let data = await response.json(); let data = await response.json();
modaldata = data.message; modaldata = data.message;
cargaGrupos(cli); cargaGrupos(cli);
@@ -166,20 +178,26 @@
} }
} }
let showModificarCliente:boolean = $state(false); let showModificarCliente: boolean = $state(false);
let datoscli:UpdateCliente = $state({dni:0, apellido:"", celular:"", domicilio:"", nombre:""}); let datoscli: UpdateCliente = $state({
dni: 0,
apellido: "",
celular: "",
domicilio: "",
nombre: "",
});
async function abrirModalModificarCliente(e: Event, cli: Cliente) { async function abrirModalModificarCliente(e: Event, cli: Cliente) {
e.stopPropagation(); e.stopPropagation();
try { try {
const r = await fetch($urlG+"/api/admin/cliente?dni="+cli.dni, { const r = await fetch($urlG + "/api/admin/cliente?dni=" + cli.dni, {
method: "GET", method: "GET",
headers: { headers: {
"Auth": token||"", Auth: token || "",
} },
}); });
let data = await r.json(); let data = await r.json();
if (r.ok){ if (r.ok) {
datoscli = data; datoscli = data;
datoscli.dni = cli.dni; datoscli.dni = cli.dni;
showModificarCliente = true; showModificarCliente = true;
@@ -191,53 +209,63 @@
} }
} }
async function patchCliente(a:UpdateCliente) { async function patchCliente(a: UpdateCliente) {
if (a.apellido =="" || a.celular=="" || a.domicilio=="" || a.nombre==""){ if (
a.apellido == "" ||
a.celular == "" ||
a.domicilio == "" ||
a.nombre == ""
) {
modaldata = "Hay campos vacios"; modaldata = "Hay campos vacios";
return; return;
} }
let dto ={ let dto = {
apellido: a.apellido, apellido: a.apellido,
celular: a.celular, celular: a.celular,
domicilio: a.domicilio, domicilio: a.domicilio,
nombre: a.nombre, nombre: a.nombre,
} };
try{ try {
const r = await fetch($urlG+"/api/admin/cliente?dni="+a.dni, { const r = await fetch($urlG + "/api/admin/cliente?dni=" + a.dni, {
method: "PATCH", method: "PATCH",
headers: { headers: {
"Auth": token||"", Auth: token || "",
"Content-Type": "application/json" "Content-Type": "application/json",
}, },
body: JSON.stringify(dto), body: JSON.stringify(dto),
}); });
let data = await r.json(); let data = await r.json();
modaldata = data.message; modaldata = data.message;
if (r.ok) cargaUsuarios(); if (r.ok) cargaUsuarios();
}catch{ } catch {
modaldata = "Falla la conexion al servidor"; modaldata = "Falla la conexion al servidor";
} }
} }
</script> </script>
<NavBarAutocompletable/> <NavBarAutocompletable />
{#if modaldata} {#if modaldata}
<ModalEstatico payload={modaldata} close={()=> !!(modaldata = "")}/> <ModalEstatico payload={modaldata} close={() => !!(modaldata = "")} />
{/if} {/if}
{#if showModificarCliente} {#if showModificarCliente}
<ModalModificarPropietarios datos={datoscli} onCancel={()=>!!(showModificarCliente = false)} <ModalModificarPropietarios
onConfirm={patchCliente}/> datos={datoscli}
onCancel={() => !!(showModificarCliente = false)}
onConfirm={patchCliente}
/>
{/if} {/if}
<div class="content-fluid align-items-start"> <div class="content-fluid align-items-start">
<div class="row"> <div class="row">
<div class="col ms-2"> <div class="col ms-2">
<BarraHorizontalConTexto text="Clientes"/> <BarraHorizontalConTexto text="Clientes" />
<div style="height:70vh; overflow-y: auto; max-width: 100%"> <div style="height:70vh; overflow-y: auto; max-width: 100%">
<table class="table table-responsive table-striped table-hover table-bordered"> <table
class="table table-responsive table-striped table-hover table-bordered"
>
<thead> <thead>
<tr> <tr>
<th>Dni</th> <th>Dni</th>
@@ -248,33 +276,45 @@
</thead> </thead>
<tbody> <tbody>
{#each Clientes as cli} {#each Clientes as cli}
<tr onclick={() => cargaGrupos(cli)} in:fade> <tr onclick={() => cargaGrupos(cli)} in:fade>
<td>{cli.dni}</td> <td>{cli.dni}</td>
<td>{cli.nombre}</td> <td>{cli.nombre}</td>
<td>{cli.email}</td> <td>{cli.email}</td>
<td> <td>
{#if cli.habilitado} {#if cli.habilitado}
<button class="btn btn-warning" onclick={(e) => bajaCliente(e, cli)}> <button
Baja class="btn btn-warning"
</button> onclick={(e) => bajaCliente(e, cli)}
{:else} >
<button class="btn btn-success" onclick={(e) => bajaCliente(e, cli)}> Baja
Alta </button>
</button> {:else}
{/if} <button
<button class="btn btn-secondary" onclick={(e)=>abrirModalModificarCliente(e, cli)}> class="btn btn-success"
Modificar onclick={(e) => bajaCliente(e, cli)}
</button> >
</td> Alta
</tr> </button>
{/if}
<button
class="btn btn-secondary"
onclick={(e) =>
abrirModalModificarCliente(e, cli)}
>
Modificar
</button>
</td>
</tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div class="col me-2 ps-0"> <div class="col me-2 ps-0">
<BarraHorizontalConTexto text="Grupos del Cliente Seleccionado"/> <BarraHorizontalConTexto text="Grupos del Cliente Seleccionado" />
<table class="table table-striped table-responsive table-sm table-bordered"> <table
class="table table-striped table-responsive table-sm table-bordered"
>
<thead> <thead>
<tr> <tr>
<th>Id</th> <th>Id</th>
@@ -283,23 +323,34 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#if Grupos.length>0} {#if Grupos.length > 0}
{#each Grupos as g}
{#each Grupos as g} <tr in:fade>
<tr in:fade> <td>{g.id}</td>
<td>{g.id}</td> <td>{g.descripcion}</td>
<td>{g.descripcion}</td> <td
<td><button class="btn btn-outline-danger" onclick={(e)=>BajaGrupo(e, SelCliente, g.descripcion)}>Baja</button></td> ><button
</tr> class="btn btn-outline-danger"
{/each} onclick={(e) =>
BajaGrupo(
e,
SelCliente,
g.descripcion,
)}>Baja</button
></td
>
</tr>
{/each}
{:else if SelCliente != null} {:else if SelCliente != null}
<tr> <tr>
<td colspan="3">Este Cliente no tiene Grupos</td> <td colspan="3">Este Cliente no tiene Grupos</td>
</tr> </tr>
{:else} {:else}
<tr> <tr>
<td colspan="3">Seleccione un cliente para ver sus grupos</td> <td colspan="3"
</tr> >Seleccione un cliente para ver sus grupos</td
>
</tr>
{/if} {/if}
</tbody> </tbody>
</table> </table>
@@ -334,4 +385,3 @@
</div> </div>
</div> </div>
</div> </div>