361 lines
15 KiB
PHP
361 lines
15 KiB
PHP
@extends('layout.base')
|
|
|
|
|
|
@section('page_title')
|
|
Cierres - Listado
|
|
@endsection
|
|
|
|
@section('page_content')
|
|
<div class="ui container">
|
|
<h2 class="ui header">Listado de Cierres</h2>
|
|
<table class="ui striped table" id="cierres">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="5">Proyecto</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('page_styles')
|
|
<style>
|
|
.proyecto, .estado-cierres {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('page_scripts')
|
|
<script type="text/javascript">
|
|
class Cierre {
|
|
id
|
|
proyecto_id
|
|
estado = {
|
|
id: 0,
|
|
descripcion: '',
|
|
titulo: ''
|
|
}
|
|
departamento
|
|
tipologia
|
|
vendible
|
|
fecha
|
|
valor
|
|
|
|
unitario() {
|
|
return this.valor / this.vendible
|
|
}
|
|
|
|
draw(formatter) {
|
|
const date = new Date(this.fecha)
|
|
const dateFormatter = new Intl.DateTimeFormat('es-CL')
|
|
const estado = this.estado.titulo.charAt(0).toUpperCase() + this.estado.titulo.slice(1)
|
|
return $('<tr></tr>').addClass('cierre ' + this.estado.descripcion).attr('data-proyecto', this.proyecto_id).attr('data-estado', this.estado.id).append(
|
|
$('<td></td>')
|
|
).append(
|
|
$('<td></td>').append(
|
|
$('<a></a>').attr('href', '{{$urls->base}}/ventas/cierre/' + this.id).html(this.departamento + ' (' + this.tipologia + ')')
|
|
)
|
|
).append(
|
|
$('<td></td>').html(dateFormatter.format(date))
|
|
).append(
|
|
$('<td></td>').html(formatter.format(this.valor) + ' UF (' + formatter.format(this.unitario()) + ' UF/m²)')
|
|
).append(
|
|
$('<td></td>').html(estado)
|
|
)
|
|
}
|
|
}
|
|
class Estado {
|
|
id
|
|
proyecto_id
|
|
title
|
|
descripcion
|
|
cierres = []
|
|
total = 0
|
|
|
|
proporcion() {
|
|
return this.cierres.length / this.total * 100
|
|
}
|
|
add(data) {
|
|
let cierre = this.cierres.find(cierre => cierre.id === data.id)
|
|
if (typeof cierre !== 'undefined') {
|
|
return
|
|
}
|
|
cierre = new Cierre()
|
|
cierre.id = data.id
|
|
cierre.proyecto_id = this.proyecto_id
|
|
cierre.departamento = ''
|
|
cierre.tipologia = ''
|
|
cierre.vendible = 0
|
|
const departamento = data.unidades.filter(unidad => unidad.proyecto_tipo_unidad.tipo_unidad.descripcion === 'departamento')[0]
|
|
if (typeof departamento !== 'undefined') {
|
|
cierre.departamento = departamento.descripcion
|
|
cierre.tipologia = departamento.proyecto_tipo_unidad.abreviacion
|
|
cierre.vendible = departamento.proyecto_tipo_unidad.vendible
|
|
}
|
|
cierre.fecha = data.date_time
|
|
cierre.valor = data.precio
|
|
cierre.estado.id = this.id
|
|
cierre.estado.descripcion = this.descripcion
|
|
cierre.estado.titulo = data.estado_cierre.tipo_estado_cierre.descripcion
|
|
this.cierres.push(cierre)
|
|
}
|
|
draw(tbody, formatter) {
|
|
tbody.append(
|
|
$('<tr></tr>').addClass('estado-cierres ' + this.descripcion).attr('data-proyecto', this.proyecto_id).attr('data-estado', this.id).attr('data-status', 'closed').append(
|
|
$('<th></th>')
|
|
).append(
|
|
$('<th></th>').attr('colspan', 4).html(this.title).append(
|
|
$('<i></i>').addClass('right caret icon')
|
|
).append(' [' + this.cierres.length + '] ' + formatter.format(this.proporcion()) + '%')
|
|
)
|
|
)
|
|
tbody.append(
|
|
$('<tr></tr>').addClass('cierre').attr('data-proyecto', this.proyecto_id).attr('data-estado', this.id).append(
|
|
$('<th></th>')
|
|
).append(
|
|
$('<th></th>').html('Departamento')
|
|
).append(
|
|
$('<th></th>').html('Fecha')
|
|
).append(
|
|
$('<th></th>').html('Valor')
|
|
).append(
|
|
$('<th></th>').html('Estado')
|
|
)
|
|
)
|
|
this.cierres.forEach(cierre => {
|
|
tbody.append(cierre.draw(formatter))
|
|
})
|
|
}
|
|
}
|
|
class Proyecto {
|
|
id
|
|
descripcion
|
|
total = 0
|
|
estados
|
|
|
|
constructor({id, descripcion}) {
|
|
this.id = id
|
|
this.descripcion = descripcion
|
|
this.estados = {
|
|
aprobado: new Estado(),
|
|
promesado: new Estado(),
|
|
rechazado: new Estado()
|
|
}
|
|
this.estados.aprobado.id = 1
|
|
this.estados.aprobado.proyecto_id = this.id
|
|
this.estados.aprobado.title = 'Aprobado'
|
|
this.estados.aprobado.descripcion = 'warning'
|
|
|
|
this.estados.promesado.id = 2
|
|
this.estados.promesado.proyecto_id = this.id
|
|
this.estados.promesado.title = 'Promesado'
|
|
this.estados.promesado.descripcion = 'positive'
|
|
|
|
this.estados.rechazado.id = 3
|
|
this.estados.rechazado.proyecto_id = this.id
|
|
this.estados.rechazado.title = 'Abandonado/Rechazado'
|
|
this.estados.rechazado.descripcion = 'error'
|
|
}
|
|
|
|
add(data) {
|
|
if (data.proyecto.id !== this.id) {
|
|
return
|
|
}
|
|
this.total ++
|
|
if (['revisado', 'aprobado'].includes(data.estado_cierre.tipo_estado_cierre.descripcion)) {
|
|
return this.estados.aprobado.add(data)
|
|
}
|
|
if (['vendido', 'promesado'].includes(data.estado_cierre.tipo_estado_cierre.descripcion)) {
|
|
return this.estados.promesado.add(data)
|
|
}
|
|
this.estados.rechazado.add(data)
|
|
}
|
|
draw(tbody, formatter) {
|
|
tbody.append(
|
|
$('<tr></tr>').append(
|
|
$('<td></td>').addClass('proyecto').attr('data-proyecto', this.id).attr('data-status', 'closed').attr('colspan', 5).html(this.descripcion).append(
|
|
$('<i></i>').addClass('right caret icon')
|
|
).append(' [' + this.total + ']')
|
|
)
|
|
)
|
|
Object.keys(this.estados).forEach(key => {
|
|
this.estados[key].total = this.total
|
|
this.estados[key].draw(tbody, formatter)
|
|
})
|
|
}
|
|
}
|
|
const cierres = {
|
|
ids: {
|
|
table: '',
|
|
},
|
|
data: {
|
|
proyectos: []
|
|
},
|
|
get: function() {
|
|
return {
|
|
proyectos: () => {
|
|
this.data.proyectos = []
|
|
|
|
this.draw().loading()
|
|
|
|
return fetch('{{$urls->api}}/proyectos').then(response => {
|
|
if (response.ok) {
|
|
return response.json()
|
|
}
|
|
}).then(data => {
|
|
const promises = []
|
|
if (data.total > 0) {
|
|
data.proyectos.forEach(proyecto => {
|
|
promises.push(this.get().cierres(proyecto.id))
|
|
})
|
|
return promises
|
|
}
|
|
}).then(promises => {
|
|
Promise.all(promises).then(() => {
|
|
this.data.proyectos.sort((a, b) => {
|
|
return a.descripcion.localeCompare(b.descripcion)
|
|
})
|
|
this.draw().proyectos()
|
|
})
|
|
})
|
|
},
|
|
cierres: proyecto_id => {
|
|
return fetch('{{$urls->api}}/ventas/cierres',
|
|
{method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({proyecto_id})}).then(response => {
|
|
if (response.ok) {
|
|
return response.json()
|
|
}
|
|
}).then(data => {
|
|
if (data.total > 0) {
|
|
data.cierres.forEach(cierre => {
|
|
this.add().cierre(cierre)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
}
|
|
},
|
|
add: function() {
|
|
return {
|
|
cierre: data => {
|
|
let proyecto = this.data.proyectos.find(proyecto => proyecto.id === data.proyecto.id)
|
|
if (this.data.proyectos.length === 0 || typeof proyecto === 'undefined') {
|
|
proyecto = new Proyecto({
|
|
id: data.proyecto.id,
|
|
descripcion: data.proyecto.descripcion
|
|
})
|
|
this.data.proyectos.push(proyecto)
|
|
}
|
|
proyecto.add(data)
|
|
}
|
|
}
|
|
},
|
|
draw: function() {
|
|
return {
|
|
proyectos: () => {
|
|
const parent = $(this.ids.table)
|
|
const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
|
|
const tbody = parent.find('tbody')
|
|
|
|
tbody.html('')
|
|
this.data.proyectos.forEach(proyecto => {
|
|
proyecto.draw(tbody, formatter)
|
|
})
|
|
tbody.find('.estado-cierres, .cierre').hide()
|
|
tbody.find('.proyecto').click(this.actions().proyectos().toggle)
|
|
tbody.find('.estado-cierres').click(this.actions().estados().toggle)
|
|
},
|
|
loading: () => {
|
|
const parent = $(this.ids.table)
|
|
const tbody = parent.find('tbody')
|
|
tbody.append(
|
|
$('<tr></tr>').append(
|
|
$('<td></td>').attr('colspan', 5).append(
|
|
$('<div></div>').addClass('ui basic segment').append(
|
|
$('<div></div>').addClass('ui active dimmer').append(
|
|
$('<div></div>').addClass('ui loader')
|
|
)
|
|
).append(
|
|
$('<div></div>').addClass('ui fluid placeholder').append(
|
|
$('<div></div>').addClass('image')
|
|
)
|
|
)
|
|
)
|
|
)
|
|
)
|
|
}
|
|
}
|
|
},
|
|
actions: function() {
|
|
return {
|
|
proyectos: () => {
|
|
return {
|
|
open: event => {
|
|
const th = $(event.currentTarget)
|
|
const proyecto_id = th.data('proyecto')
|
|
th.find('.icon').removeClass('right').addClass('down')
|
|
$(".estado-cierres[data-proyecto='" + proyecto_id + "']").show()
|
|
th.attr('data-status', 'open')
|
|
},
|
|
close: event => {
|
|
const th = $(event.currentTarget)
|
|
const proyecto_id = th.data('proyecto')
|
|
th.find('.icon').removeClass('down').addClass('right')
|
|
$(".estado-cierres[data-proyecto='" + proyecto_id + "']").hide()
|
|
$(".cierre[data-proyecto='" + proyecto_id + "']").hide()
|
|
th.attr('data-status', 'closed')
|
|
},
|
|
toggle: event => {
|
|
const th = $(event.currentTarget)
|
|
const status = th.attr('data-status')
|
|
if (status === 'closed') {
|
|
return this.actions().proyectos().open(event)
|
|
}
|
|
return this.actions().proyectos().close(event)
|
|
}
|
|
}
|
|
},
|
|
estados: () => {
|
|
return {
|
|
open: event => {
|
|
const tr = $(event.currentTarget)
|
|
const proyecto_id = tr.data('proyecto')
|
|
const estado_id = tr.data('estado')
|
|
tr.find('.icon').removeClass('right').addClass('down')
|
|
$(".cierre[data-proyecto='" + proyecto_id + "'][data-estado='" + estado_id + "']").show()
|
|
tr.attr('data-status', 'open')
|
|
},
|
|
close: event => {
|
|
const tr = $(event.currentTarget)
|
|
const proyecto_id = tr.data('proyecto')
|
|
const estado_id = tr.data('estado')
|
|
tr.find('.icon').removeClass('down').addClass('right')
|
|
$(".cierre[data-proyecto='" + proyecto_id + "'][data-estado='" + estado_id + "']").hide()
|
|
tr.attr('data-status', 'closed')
|
|
},
|
|
toggle: event => {
|
|
const tr = $(event.currentTarget)
|
|
const status = tr.attr('data-status')
|
|
if (status === 'closed') {
|
|
return this.actions().estados().open(event)
|
|
}
|
|
return this.actions().estados().close(event)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
setup: function() {
|
|
this.get().proyectos()
|
|
}
|
|
}
|
|
|
|
$(document).ready(() => {
|
|
cierres.ids.table = '#cierres'
|
|
cierres.setup()
|
|
})
|
|
</script>
|
|
@endpush
|