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