Avansamos mucho con el administracion propiedades
This commit is contained in:
@@ -0,0 +1,241 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
|
||||
import type { Cliente, Grupo } 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";
|
||||
|
||||
let Clientes: Cliente[] = $state([]);
|
||||
let Grupos:any[] = $state([]);
|
||||
let modaldata = $state();
|
||||
let token = sessionStorage.getItem("token");
|
||||
let showAddmenu: boolean = $state(false);
|
||||
|
||||
let grupo:string = $state("");
|
||||
let SelCliente: Cliente = $state(null);
|
||||
|
||||
onMount(async () => {
|
||||
try{
|
||||
const response = await fetch($urlG+"/api/admin/clientes", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Auth": String(token),
|
||||
}
|
||||
})
|
||||
if (response.ok) {
|
||||
let data: Cliente[] = await response.json();
|
||||
Clientes = data;
|
||||
return;
|
||||
}
|
||||
modaldata = "fallo al asignar la lista de clientes";
|
||||
} catch {
|
||||
modaldata = "fallo al intentar obtener la lista de clientes";
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
async function cargaGrupos(cli: Cliente){
|
||||
try {
|
||||
const response = await fetch($urlG+"/api/admin/clientes/grupo?Dni="+cli.dni, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Auth": String(token),
|
||||
},
|
||||
});
|
||||
if (response.ok){
|
||||
let data = await response.json();
|
||||
Grupos = data;
|
||||
showAddmenu = true;
|
||||
SelCliente = cli;
|
||||
return;
|
||||
}
|
||||
|
||||
modaldata = await response.json();
|
||||
} catch {
|
||||
modaldata = "no se pudo obtener la lista de grupos";
|
||||
}
|
||||
}
|
||||
|
||||
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){
|
||||
let data = await response.json();
|
||||
modaldata = data.message;
|
||||
cli.habilitado = !cli.habilitado;
|
||||
}
|
||||
} catch {
|
||||
modaldata = "";
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
async function añadirGrupo(e:Event, cli: Cliente, grupo:string){
|
||||
e.preventDefault();
|
||||
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',
|
||||
},
|
||||
body: JSON.stringify({email, grupo})
|
||||
});
|
||||
|
||||
if (response.ok){
|
||||
let data = await response.json();
|
||||
modaldata = data.message;
|
||||
cargaGrupos(cli);
|
||||
return;
|
||||
}
|
||||
let data = await response.json();
|
||||
modaldata = data.message;
|
||||
} catch {
|
||||
modaldata = "Falla la conexion al servidor";
|
||||
}
|
||||
}
|
||||
async function BajaGrupo(e:Event, cli: Cliente, grupo:string){
|
||||
e.preventDefault();
|
||||
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;
|
||||
}
|
||||
try {
|
||||
const response = await fetch($urlG+"/api/admin/cliente/rmGrupo", {
|
||||
method: "PATCH",
|
||||
headers: {
|
||||
"Auth": String(token),
|
||||
'Content-Type' : 'application/json',
|
||||
},
|
||||
body: JSON.stringify({email, grupo})
|
||||
});
|
||||
|
||||
if (response.ok){
|
||||
let data = await response.json();
|
||||
modaldata = data.message;
|
||||
cargaGrupos(cli);
|
||||
return;
|
||||
}
|
||||
let data = await response.json();
|
||||
modaldata = data.message;
|
||||
} catch {
|
||||
modaldata = "Falla la conexion al servidor";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<NavBarAutocompletable/>
|
||||
|
||||
{#if modaldata}
|
||||
<ModalEstatico payload={modaldata} close={()=> !!(modaldata = "")}/>
|
||||
{/if}
|
||||
|
||||
<div class="content-fluid align-items-start">
|
||||
<div class="row">
|
||||
<div class="col" style="padding-right: 2px;">
|
||||
<BarraHorizontalConTexto text="Clientes"/>
|
||||
|
||||
<div style="height:70vh; overflow-y: auto; max-width: 100%">
|
||||
<table class="table table-responsive table-sm table-striped table-hover table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Dni</th>
|
||||
<th>Nombre/Apellido</th>
|
||||
<th>Email</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</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-outline-warning" onclick={(e) => bajaCliente(e, cli)}>
|
||||
Baja
|
||||
</button>
|
||||
{:else}
|
||||
<button class="btn btn-outline-success" onclick={(e) => bajaCliente(e, cli)}>
|
||||
Alta
|
||||
</button>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"style="padding-left: 2px;">
|
||||
<BarraHorizontalConTexto text="Grupos del Cliente Seleccionado"/>
|
||||
<table class="table table-striped table-responsive table-sm table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Descripcion</th>
|
||||
<th></th>
|
||||
</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}
|
||||
{:else if SelCliente != null}
|
||||
<tr>
|
||||
<td colspan="2">Este Cliente no tiene Grupos</td>
|
||||
</tr>
|
||||
{:else}
|
||||
<tr>
|
||||
<td colspan="2">Seleccione un cliente para ver sus grupos</td>
|
||||
</tr>
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{#if showAddmenu}
|
||||
<div in:fade>
|
||||
<BarraHorizontalConTexto text="Añadir Grupos al Usuario"/>
|
||||
<form class="card card-body" onsubmit={(e) => añadirGrupo(e,SelCliente, grupo)}>
|
||||
<div class="mb-3">
|
||||
<label for="userRole" class="form-label">Seleccionar Grupo</label>
|
||||
<select id="userRole" class="form-select" bind:value={grupo}>
|
||||
<option value="Propietario">Propietario</option>
|
||||
<option value="Inquilino">Inquilino</option>
|
||||
<option value="Admin">Admin</option>
|
||||
<option value="Informes">Informes</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Añadir</button>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user