375 lines
17 KiB
PHP
375 lines
17 KiB
PHP
@extends('layout.base')
|
|
|
|
@section('page_content')
|
|
<div class="ui container">
|
|
<h1>Búsqueda</h1>
|
|
|
|
<form id="search_form" class="ui form" action="{{$urls->base}}/search" method="post">
|
|
<div class="field">
|
|
<div class="ui fluid input" data-tooltip="Para buscar frases se deben encerrar entre comillas. ej, 'portal la viña' o "portal la viña"" data-position="top right">
|
|
<input type="text" name="query" />
|
|
</div>
|
|
</div>
|
|
<div class="ui search selection dropdown" id="tipo">
|
|
<input type="hidden" name="tipo" />
|
|
<i class="dropdown icon"></i>
|
|
<div class="default text">Tipo</div>
|
|
<div class="menu">
|
|
<div class="item" data-value="*" data-selected="true">Cualquiera</div>
|
|
@foreach (['departamento', 'estacionamiento', 'bodega', 'propietario', 'precio_venta', 'proyecto', 'pago', 'unidad'] as $value)
|
|
<div class="item" data-value="{{$value}}">{{ucwords(str_replace('_', ' ', $value))}}</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<button class="ui button" type="submit">Buscar</button>
|
|
</form>
|
|
<div id="results"></div>
|
|
</div>
|
|
@endsection
|
|
|
|
@include('layout.head.styles.datatables')
|
|
@include('layout.body.scripts.datatables')
|
|
|
|
@push('page_scripts')
|
|
<script>
|
|
class Row
|
|
{
|
|
proyecto
|
|
unidad
|
|
venta
|
|
|
|
constructor({proyecto, unidad}) {
|
|
this.proyecto = proyecto
|
|
this.unidad = unidad
|
|
}
|
|
draw() {
|
|
const tipo = this.unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
|
|
let unidad = tipo.charAt(0).toUpperCase() + tipo.slice(1) + ' ' + this.unidad.descripcion
|
|
if (typeof this.venta !== 'undefined') {
|
|
unidad = this.venta.propiedad.tipologia
|
|
}
|
|
let precio = 0
|
|
let propietario = ''
|
|
let fecha = ''
|
|
let fecha_entrega = ''
|
|
if (typeof this.venta !== 'undefined') {
|
|
const dateFormatter = new Intl.DateTimeFormat('es-CL', {dateStyle: 'medium'})
|
|
unidad = $('<a></a>').attr('href', '{{$urls->base}}/venta/' + this.venta.id).html(unidad)
|
|
if (!this.venta.current_estado.tipo_estado_venta.activa) {
|
|
unidad.html(unidad.html() + ' (I)')
|
|
}
|
|
unidad.html(unidad.html() + ' <i class="angle right icon"></i>')
|
|
propietario = $('<a></a>')
|
|
.attr('href','{{$urls->base}}/search/"' + encodeURIComponent(this.venta.propietario.nombre_completo) + '"/propietario')
|
|
.html(this.venta.propietario.nombre_completo)
|
|
fecha = dateFormatter.format(new Date(this.venta.fecha))
|
|
if (typeof this.venta.entrega !== 'undefined') {
|
|
fecha_entrega = dateFormatter.format(new Date(this.venta.entrega.fecha))
|
|
}
|
|
precio = this.venta.valor
|
|
} else {
|
|
unidad += '<i class="ban icon"></i>'
|
|
precio = this.unidad.current_precio.valor
|
|
}
|
|
|
|
const numberFormat = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
|
|
const superficie = numberFormat.format(Math.round(this.unidad.proyecto_tipo_unidad.superficie * 100) / 100)
|
|
|
|
return $('<tr></tr>').append(
|
|
$('<td></td>').append(
|
|
$('<a></a>').attr('href', '{{$urls->base}}/proyecto/' + this.proyecto.id).html(this.proyecto.descripcion)
|
|
)
|
|
).append(
|
|
$('<td></td>').append(unidad)
|
|
).append(
|
|
$('<td></td>').append(this.unidad.descripcion.padStart(4, '0'))
|
|
).append(
|
|
$('<td></td>').append(propietario)
|
|
).append(
|
|
$('<td></td>').addClass('right aligned').html(superficie + ' m²')
|
|
).append(
|
|
$('<td></td>').addClass('right aligned').html(numberFormat.format(precio))
|
|
).append(
|
|
$('<td></td>').html(fecha)
|
|
).append(
|
|
$('<td></td>').html(fecha_entrega)
|
|
)
|
|
}
|
|
}
|
|
const results = {
|
|
id: '',
|
|
data: [],
|
|
table: null,
|
|
queues: {
|
|
unidades: [],
|
|
ventas: []
|
|
},
|
|
get: function() {
|
|
return {
|
|
results: () => {
|
|
if ($("[name='query']").val().length < 1) {
|
|
return
|
|
}
|
|
this.draw().loading()
|
|
const data = new FormData(document.getElementById('search_form'))
|
|
const uri = '{{$urls->api}}/search'
|
|
this.data = []
|
|
return fetchAPI(uri, {method: 'post', body: data}).then(response => {
|
|
if (!response) {
|
|
return
|
|
}
|
|
return response.json()
|
|
}).catch(error => {
|
|
this.draw().clear()
|
|
this.draw().error(error)
|
|
}).then(data => {
|
|
this.draw().clear()
|
|
if (typeof data.results === 'undefined' || data.results.length === 0) {
|
|
this.draw().empty()
|
|
return
|
|
}
|
|
const progress = this.draw().progress(data.results.length)
|
|
const promises = []
|
|
this.queues.ventas = data.results.filter(row => row.tipo === 'venta').map(row => row.id)
|
|
this.queues.unidades = data.results.filter(row => row.tipo !== 'venta').map(row => row.id)
|
|
promises.push(this.get().ventas().then(arrays => {
|
|
arrays.forEach(json => {
|
|
if (json.ventas.length === 0) {
|
|
console.debug(json)
|
|
return
|
|
}
|
|
json.ventas.forEach(venta => {
|
|
progress.progress('increment')
|
|
const r = new Row({unidad: venta.propiedad.unidades[0], proyecto: venta.proyecto})
|
|
r.venta = venta
|
|
this.data.push(r)
|
|
})
|
|
})
|
|
}))
|
|
promises.push(this.get().unidades().then(arrays => {
|
|
arrays.forEach(json => {
|
|
if (json.unidades.length === 0) {
|
|
return
|
|
}
|
|
json.unidades.forEach(unidad => {
|
|
progress.progress('increment')
|
|
this.data.push(new Row({unidad: unidad, proyecto: unidad.proyecto_tipo_unidad.proyecto}))
|
|
})
|
|
})
|
|
}))
|
|
Promise.all(promises).then(() => {
|
|
this.sort()
|
|
this.draw().clear()
|
|
this.draw().table()
|
|
})
|
|
})
|
|
},
|
|
unidades: () => {
|
|
const url = '{{$urls->api}}/search/ventas/unidades'
|
|
const chunks = []
|
|
for (let i = 0; i < this.queues.unidades.length; i += 100) {
|
|
chunks.push(this.queues.unidades.slice(i, i + 100))
|
|
}
|
|
const promises = []
|
|
chunks.forEach(ids => {
|
|
const body = new FormData()
|
|
body.set('unidades', ids)
|
|
promises.push(fetchAPI(url, {method: 'post', body}).then(response => {
|
|
if (!response) {
|
|
return
|
|
}
|
|
return response.json()
|
|
}))
|
|
})
|
|
return Promise.all(promises)
|
|
},
|
|
ventas: () => {
|
|
const url = '{{$urls->api}}/search/ventas'
|
|
const chunks = []
|
|
for (let i = 0; i < this.queues.ventas.length; i += 100) {
|
|
chunks.push(this.queues.ventas.slice(i, i + 100))
|
|
}
|
|
const promises = []
|
|
chunks.forEach(ids => {
|
|
const body = new FormData()
|
|
body.set('ventas', ids)
|
|
promises.push(fetchAPI(url, {method: 'post', body}).then(response => {
|
|
if (!response) {
|
|
return
|
|
}
|
|
return response.json()
|
|
}))
|
|
})
|
|
return Promise.all(promises)
|
|
}
|
|
}
|
|
},
|
|
sort: function() {
|
|
this.data.sort((a, b) => {
|
|
const p = a.proyecto.descripcion.localeCompare(b.proyecto.descripcion)
|
|
if (p === 0) {
|
|
const t = a.unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
|
|
.localeCompare(b.unidad.proyecto_tipo_unidad.tipo_unidad.descripcion)
|
|
if (t === 0) {
|
|
return a.unidad.descripcion.localeCompare(b.unidad.descripcion)
|
|
}
|
|
return t
|
|
}
|
|
return p
|
|
})
|
|
},
|
|
draw: function() {
|
|
return {
|
|
clear: () => {
|
|
$(this.id).html('')
|
|
},
|
|
separator: () => {
|
|
this.draw().clear()
|
|
$(this.id).append(
|
|
$('<div></div>').addClass('ui horizontal divider').html('Resultados')
|
|
)
|
|
},
|
|
loading: () => {
|
|
this.draw().separator()
|
|
$(this.id).append(
|
|
$('<div></div>').addClass('ui active centered inline loader')
|
|
)
|
|
},
|
|
table: () => {
|
|
const parent = $(this.id)
|
|
this.draw().separator()
|
|
|
|
if (this.table !== null) {
|
|
this.table.clear()
|
|
.draw()
|
|
.destroy()
|
|
this.table = null
|
|
}
|
|
|
|
const table = $('<table></table>').addClass('ui table')
|
|
const thead = this.draw().head()
|
|
const tbody = $('<tbody></tbody>')
|
|
|
|
this.data.forEach(row => {
|
|
tbody.append(row.draw())
|
|
})
|
|
table.append(thead).append(tbody)
|
|
parent.append(table)
|
|
|
|
this.table = new DataTable(table, {
|
|
pageLength: 25,
|
|
order: [
|
|
[0, 'asc'],
|
|
[2, 'asc']
|
|
],
|
|
columnDefs: [
|
|
{
|
|
target: 2,
|
|
visible: false,
|
|
searchable: false
|
|
},
|
|
{
|
|
target: 1,
|
|
orderData: [2]
|
|
}
|
|
]
|
|
})
|
|
},
|
|
head: () => {
|
|
return $('<thead></thead>').append(
|
|
$('<tr></tr>').append(
|
|
$('<th></th>').html('Proyecto')
|
|
).append(
|
|
$('<th></th>').html('Unidad')
|
|
).append(
|
|
$('<th></th>').html('Unidad [Sort]')
|
|
).append(
|
|
$('<th></th>').html('Propietario')
|
|
).append(
|
|
$('<th></th>').html('Superficie')
|
|
).append(
|
|
$('<th></th>').html('Valor')
|
|
).append(
|
|
$('<th></th>').html('Fecha Venta')
|
|
).append(
|
|
$('<th></th>').html('Fecha Entrega')
|
|
)
|
|
)
|
|
},
|
|
empty: () => {
|
|
this.draw().separator()
|
|
$(this.id).append(
|
|
$('<div></div>').addClass('ui icon info message').append(
|
|
$('<i></i>').addClass('meh outline icon')
|
|
).append(
|
|
$('<div></div>').addClass('content').html('No se han encontrado resultados.')
|
|
)
|
|
)
|
|
},
|
|
error: error => {
|
|
this.draw().separator()
|
|
$(this.id).append(
|
|
$('<div></div>').addClass('ui icon error message').append(
|
|
$('<i></i>').addClass('exclamation triangle icon')
|
|
).append(
|
|
$('<div></div>').addClass('content').html(error)
|
|
)
|
|
)
|
|
},
|
|
progress: cantidad => {
|
|
this.draw().separator()
|
|
const progress = $('<div></div>').addClass('ui active progress').append(
|
|
$('<div></div>').addClass('bar').append(
|
|
$('<div></div>').addClass('centered progress')
|
|
)
|
|
).append(
|
|
$('<div></div>').addClass('label').html('Cargando datos')
|
|
)
|
|
progress.progress({
|
|
total: cantidad,
|
|
label: 'ratio',
|
|
text: {
|
|
ratio: '{value} de {total} ({percent}%)'
|
|
}
|
|
})
|
|
$(this.id).append(progress)
|
|
return progress
|
|
}
|
|
}
|
|
},
|
|
set: function() {
|
|
return {
|
|
query: value => {
|
|
$("[name='query']").val(value)
|
|
this.get().results()
|
|
}
|
|
}
|
|
},
|
|
setup: function(id) {
|
|
this.id = id
|
|
this.get().results()
|
|
|
|
$('#tipo').dropdown().dropdown('set selected', '*')
|
|
@if (trim($post) !== '')
|
|
this.set().query('{!! $post !!}')
|
|
@elseif (trim($query) !== '')
|
|
this.set().query('{!! $query !!}')
|
|
@endif
|
|
@if (trim($tipo) !== '')
|
|
$('#tipo').dropdown('set selected', '{{$tipo}}')
|
|
@endif
|
|
|
|
$('#search_form').submit(event => {
|
|
event.preventDefault()
|
|
this.get().results()
|
|
return false
|
|
})
|
|
$("[name='query']").focus()
|
|
}
|
|
}
|
|
$(document).ready(() => {
|
|
results.setup('#results')
|
|
})
|
|
</script>
|
|
@endpush
|