552 lines
17 KiB
Svelte
552 lines
17 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import NavBarAutocompletable from '../Componentes/NavBarAutocompletable.svelte';
|
|
import { urlG } from '../stores/urlStore';
|
|
import ModalEstatico from '../Componentes/ModalEstatico.svelte';
|
|
|
|
let contrato = $state({
|
|
id: 0,
|
|
cantgarantemin: 0,
|
|
dniinquilino: 0n,
|
|
dnipropietario: 0n,
|
|
iddivisa: 0,
|
|
idpropiedad: 0,
|
|
mesesDurationContrato: 0,
|
|
mesesHastaAumento: 0,
|
|
monto: 0,
|
|
tieneopcionventa: false,
|
|
archivoContrato: null,
|
|
divisaOpcionVenta: 0,
|
|
montoOpcionVenta: 0,
|
|
garantes: []
|
|
});
|
|
|
|
let modaldata = $state("");
|
|
|
|
let token = sessionStorage.getItem("token");
|
|
let busquedaDivisa = $state('');
|
|
let busquedaDivisaOpVenta = $state('');
|
|
|
|
let busquedaPropiedad = $state('');
|
|
let busquedaInquilino = $state('');
|
|
let busquedaPropietario = $state('');
|
|
|
|
let divisas = $state([]);
|
|
let propiedades = $state([]);
|
|
let inquilinos = $state([]);
|
|
let propietarios = $state([]);
|
|
|
|
$effect(() => {
|
|
const currentLength = contrato.garantes.length;
|
|
if (contrato.cantgarantemin > currentLength) {
|
|
// Agregar garantes faltantes
|
|
for (let i = currentLength; i < contrato.cantgarantemin; i++) {
|
|
contrato.garantes = [...contrato.garantes, {
|
|
dni: '',
|
|
nombre: '',
|
|
apellido: '',
|
|
domicilio: '',
|
|
celular: '',
|
|
domicilioLaboral: ''
|
|
}];
|
|
}
|
|
} else if (contrato.cantgarantemin < currentLength) {
|
|
// Remover garantes excedentes
|
|
contrato.garantes = contrato.garantes.slice(0, contrato.cantgarantemin);
|
|
}
|
|
});
|
|
|
|
onMount(async () => {
|
|
obtenerDatos();
|
|
});
|
|
|
|
async function obtenerDatos(){
|
|
try{
|
|
const req = await fetch($urlG + "/api/admin/contrato/data", {
|
|
method: "GET",
|
|
headers: {
|
|
"Auth": token || "",
|
|
}
|
|
});
|
|
const data = await req.json();
|
|
if (req.ok){
|
|
({ divisas, propiedades, inquilinos, propietarios } = data);
|
|
return;
|
|
}
|
|
modaldata = data.message;
|
|
}catch{
|
|
modaldata = "Fallo la request";
|
|
}
|
|
}
|
|
|
|
function handleFileChange(event) {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
contrato.archivoContrato = file;
|
|
}
|
|
}
|
|
|
|
let divisasFiltradas = $derived(
|
|
divisas.filter(d =>
|
|
!busquedaDivisa ||
|
|
d.signo?.toLowerCase().includes(busquedaDivisa.toLowerCase()) ||
|
|
d.id.toString().includes(busquedaDivisa)
|
|
)
|
|
);
|
|
|
|
let divisasFiltradasOpVenta = $derived(
|
|
divisas.filter(d =>
|
|
!busquedaDivisaOpVenta ||
|
|
d.signo?.toLowerCase().includes(busquedaDivisaOpVenta.toLowerCase()) ||
|
|
d.id.toString().includes(busquedaDivisaOpVenta)
|
|
)
|
|
);
|
|
|
|
let propiedadesFiltradas = $derived(
|
|
propiedades.filter(p =>
|
|
!busquedaPropiedad ||
|
|
p.ubicacion?.toLowerCase().includes(busquedaPropiedad.toLowerCase()) ||
|
|
p.id.toString().includes(busquedaPropiedad)
|
|
)
|
|
);
|
|
|
|
let inquilinosFiltrados = $derived(
|
|
inquilinos.filter(i =>
|
|
!busquedaInquilino ||
|
|
i.nombre?.toLowerCase().includes(busquedaInquilino.toLowerCase()) ||
|
|
i.dni.toString().includes(busquedaInquilino)
|
|
)
|
|
);
|
|
|
|
let propietariosFiltrados = $derived(
|
|
propietarios.filter(p =>
|
|
!busquedaPropietario ||
|
|
p.nombre?.toLowerCase().includes(busquedaPropietario.toLowerCase()) ||
|
|
p.dni.toString().includes(busquedaPropietario)
|
|
)
|
|
);
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
const formData = new FormData();
|
|
|
|
formData.append('cantgarantemin', contrato.cantgarantemin.toString());
|
|
formData.append('dniinquilino', contrato.dniinquilino.toString());
|
|
formData.append('dnipropietario', contrato.dnipropietario.toString());
|
|
formData.append('iddivisa', contrato.iddivisa.toString());
|
|
formData.append('idpropiedad', contrato.idpropiedad.toString());
|
|
formData.append('mesesDurationContrato', contrato.mesesDurationContrato.toString());
|
|
formData.append('mesesHastaAumento', contrato.mesesHastaAumento.toString());
|
|
formData.append('monto', contrato.monto.toString());
|
|
formData.append('tieneopcionventa', contrato.tieneopcionventa.toString());
|
|
|
|
contrato.garantes.forEach((garante, index) => {
|
|
formData.append(`garantes[${index}].dni`, garante.dni);
|
|
formData.append(`garantes[${index}].nombre`, garante.nombre);
|
|
formData.append(`garantes[${index}].apellido`, garante.apellido);
|
|
formData.append(`garantes[${index}].domicilio`, garante.domicilio);
|
|
formData.append(`garantes[${index}].celular`, garante.celular);
|
|
formData.append(`garantes[${index}].domicilioLaboral`, garante.domicilioLaboral);
|
|
});
|
|
|
|
if (contrato.tieneopcionventa) {
|
|
formData.append('divisaOpcionVenta', contrato.divisaOpcionVenta.toString());
|
|
formData.append('montoOpcionVenta', contrato.montoOpcionVenta.toString());
|
|
}
|
|
|
|
// Agregar el archivo si existe
|
|
if (contrato.archivoContrato) {
|
|
formData.append('archivoContrato', contrato.archivoContrato);
|
|
}
|
|
|
|
try {
|
|
const response = await fetch($urlG + '/api/admin/contrato/carga', {
|
|
method: 'POST',
|
|
headers: {
|
|
"Auth": token || "",
|
|
},
|
|
body: formData
|
|
});
|
|
const data = await response.json();
|
|
if (response.ok) {
|
|
contrato = {
|
|
id: 0,
|
|
cantgarantemin: 0,
|
|
dniinquilino: 0n,
|
|
dnipropietario: 0n,
|
|
iddivisa: 0,
|
|
idpropiedad: 0,
|
|
mesesDurationContrato: 0,
|
|
mesesHastaAumento: 0,
|
|
monto: 0,
|
|
tieneopcionventa: false,
|
|
archivoContrato: null,
|
|
divisaOpcionVenta: 0,
|
|
montoOpcionVenta: 0,
|
|
garantes: []
|
|
};
|
|
}
|
|
|
|
modaldata = data.message;
|
|
} catch (error) {
|
|
modaldata = "Fallo al hacer la request";
|
|
}
|
|
}
|
|
|
|
async function actualizarPropiedades(dnipropietario){
|
|
try{
|
|
const req = await fetch($urlG + "/api/admin/contrato/propieades?dnipropietario="+ dnipropietario, {
|
|
method: "GET",
|
|
headers:{
|
|
"Auth": token || "",
|
|
}
|
|
});
|
|
|
|
const data = await req.json();
|
|
if (req.ok){
|
|
propiedades = data;
|
|
return;
|
|
}
|
|
modaldata = data.message;
|
|
}catch{
|
|
modaldata = "Fallo al hacer la request";
|
|
}
|
|
}
|
|
|
|
function actualizarGarante(index, campo, valor) {
|
|
contrato.garantes[index] = { ...contrato.garantes[index], [campo]: valor };
|
|
}
|
|
</script>
|
|
|
|
<NavBarAutocompletable/>
|
|
{#if modaldata}
|
|
<ModalEstatico payload={modaldata} close={()=>!!(modaldata = "")}/>
|
|
{/if}
|
|
|
|
<div class="container mt-4">
|
|
<h2>Alta de Contrato</h2>
|
|
<form onsubmit={handleSubmit}>
|
|
|
|
<div class="row mb-3">
|
|
<label for="dniinquilino" class="col-sm-3 col-form-label">Inquilino</label>
|
|
<div class="col-sm-9">
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Buscar inquilino (DNI o nombre)..."
|
|
bind:value={busquedaInquilino}
|
|
/>
|
|
<select
|
|
class="form-select"
|
|
id="dniinquilino"
|
|
bind:value={contrato.dniinquilino}
|
|
required
|
|
>
|
|
<option value="">Seleccionar Inquilino...</option>
|
|
{#each inquilinosFiltrados as inq}
|
|
<option value={inq.dni}>{inq.nombre} | {inq.dni}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="dnipropietario" class="col-sm-3 col-form-label">Propietario</label>
|
|
<div class="col-sm-9">
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Buscar propietario (DNI o nombre)..."
|
|
bind:value={busquedaPropietario}
|
|
/>
|
|
<select
|
|
class="form-select"
|
|
id="dnipropietario"
|
|
bind:value={contrato.dnipropietario}
|
|
required
|
|
onchange={()=>actualizarPropiedades(contrato.dnipropietario)}
|
|
>
|
|
<option value="">Seleccionar Propietario...</option>
|
|
{#each propietariosFiltrados as prop}
|
|
<option value={prop.dni}>{prop.nombre} | {prop.dni}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="monto" class="col-sm-3 col-form-label">Monto del Contrato</label>
|
|
<div class="col-sm-9">
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
min="1"
|
|
class="form-control"
|
|
id="monto"
|
|
bind:value={contrato.monto}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="mesesDurationContrato" class="col-sm-3 col-form-label">Duración (meses)</label>
|
|
<div class="col-sm-9">
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
class="form-control"
|
|
id="mesesDurationContrato"
|
|
bind:value={contrato.mesesDurationContrato}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="mesesHastaAumento" class="col-sm-3 col-form-label">Meses hasta Aumento</label>
|
|
<div class="col-sm-9">
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
class="form-control"
|
|
id="mesesHastaAumento"
|
|
bind:value={contrato.mesesHastaAumento}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="cantgarantemin" class="col-sm-3 col-form-label">Cantidad Garantes Mínimos</label>
|
|
<div class="col-sm-9">
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max="100"
|
|
class="form-control"
|
|
id="cantgarantemin"
|
|
bind:value={contrato.cantgarantemin}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{#if contrato.cantgarantemin > 0}
|
|
<div class="row mb-3">
|
|
<div class="col-12">
|
|
<h5>Garantes</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>DNI</th>
|
|
<th>Nombre</th>
|
|
<th>Apellido</th>
|
|
<th>Domicilio</th>
|
|
<th>Celular</th>
|
|
<th>Domicilio Laboral</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each contrato.garantes as garante, i}
|
|
<tr>
|
|
<td>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="DNI"
|
|
min="0"
|
|
max="99999999"
|
|
bind:value={garante.dni}
|
|
oninput={(e) => actualizarGarante(i, 'dni', e.target.value)}
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
minlength="1"
|
|
placeholder="Nombre"
|
|
bind:value={garante.nombre}
|
|
oninput={(e) => actualizarGarante(i, 'nombre', e.target.value)}
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Apellido"
|
|
bind:value={garante.apellido}
|
|
oninput={(e) => actualizarGarante(i, 'apellido', e.target.value)}
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Domicilio"
|
|
bind:value={garante.domicilio}
|
|
oninput={(e) => actualizarGarante(i, 'domicilio', e.target.value)}
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Celular"
|
|
bind:value={garante.celular}
|
|
oninput={(e) => actualizarGarante(i, 'celular', e.target.value)}
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Domicilio Laboral"
|
|
bind:value={garante.domicilioLaboral}
|
|
oninput={(e) => actualizarGarante(i, 'domicilioLaboral', e.target.value)}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="row mb-3">
|
|
<label for="archivoContrato" class="col-sm-3 col-form-label">Archivo del Contrato</label>
|
|
<div class="col-sm-9">
|
|
<input
|
|
type="file"
|
|
class="form-control"
|
|
id="archivoContrato"
|
|
accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
|
|
onchange={handleFileChange}
|
|
/>
|
|
{#if contrato.archivoContrato}
|
|
<small class="text-muted">Archivo seleccionado: {contrato.archivoContrato.name}</small>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="iddivisa" class="col-sm-3 col-form-label">Divisa</label>
|
|
<div class="col-sm-9">
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Buscar divisa..."
|
|
bind:value={busquedaDivisa}
|
|
/>
|
|
<select
|
|
class="form-select"
|
|
id="iddivisa"
|
|
bind:value={contrato.iddivisa}
|
|
required
|
|
>
|
|
<option value="">Seleccionar Divisa...</option>
|
|
{#each divisasFiltradas as divisa}
|
|
<option value={divisa.id}>{divisa.signo}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="idpropiedad" class="col-sm-3 col-form-label">Propiedad</label>
|
|
<div class="col-sm-9">
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Buscar propiedad (ID o dirección)..."
|
|
bind:value={busquedaPropiedad}
|
|
/>
|
|
<select
|
|
class="form-select"
|
|
id="idpropiedad"
|
|
bind:value={contrato.idpropiedad}
|
|
required
|
|
>
|
|
<option value="">Seleccionar Propiedad...</option>
|
|
{#each propiedadesFiltradas as propiedad}
|
|
<option value={propiedad.id}>{propiedad.id} - {propiedad.ubicacion}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-sm-9 offset-sm-3">
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
bind:checked={contrato.tieneopcionventa}
|
|
id="tieneopcionventa"
|
|
/>
|
|
<label class="form-check-label" for="tieneopcionventa">
|
|
Tiene Opción de Venta
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{#if contrato.tieneopcionventa}
|
|
<div class="row mb-3">
|
|
<label for="divisaOpcionVenta" class="col-sm-3 col-form-label">Divisa Opción Venta</label>
|
|
<div class="col-sm-9">
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Buscar divisa..."
|
|
bind:value={busquedaDivisaOpVenta}
|
|
/>
|
|
<select
|
|
class="form-select"
|
|
id="divisaOpcionVenta"
|
|
bind:value={contrato.divisaOpcionVenta}
|
|
required
|
|
>
|
|
<option value="">Seleccionar Divisa...</option>
|
|
{#each divisasFiltradasOpVenta as divisa}
|
|
<option value={divisa.id}>{divisa.signo}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="montoOpcionVenta" class="col-sm-3 col-form-label">Monto Opción Venta</label>
|
|
<div class="col-sm-9">
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
class="form-control"
|
|
id="montoOpcionVenta"
|
|
bind:value={contrato.montoOpcionVenta}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-sm-9 offset-sm-3">
|
|
<button type="submit" class="btn btn-primary">Guardar Contrato</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|