feature/cierres (#25)
Varios cambios Co-authored-by: Juan Pablo Vial <jpvialb@incoviba.cl> Reviewed-on: #25
This commit is contained in:
489
app/resources/views/proyectos/brokers/contracts/show.blade.php
Normal file
489
app/resources/views/proyectos/brokers/contracts/show.blade.php
Normal file
@ -0,0 +1,489 @@
|
||||
@extends('proyectos.brokers.base')
|
||||
|
||||
@section('brokers_title')
|
||||
{{ $contract->broker->name }} - {{ $contract->project->descripcion }}
|
||||
@endsection
|
||||
|
||||
@section('brokers_header')
|
||||
{{ $contract->broker->name }} - {{ $contract->project->descripcion }}
|
||||
@endsection
|
||||
|
||||
@include('layout.body.scripts.stats')
|
||||
|
||||
@prepend('page_scripts')
|
||||
<script>
|
||||
class TableHandler {
|
||||
commission
|
||||
constructor(commission) {
|
||||
this.commission = commission
|
||||
}
|
||||
draw() {}
|
||||
prices(units) {
|
||||
return units.map(unit => {
|
||||
let price = unit.valor ?? (unit.precio?.valor ?? 0)
|
||||
const broker = price / (1 - this.commission)
|
||||
const promotions = unit.promotions?.map(promotion => {
|
||||
if (promotion.type === 1) {
|
||||
return {
|
||||
name: promotion.description,
|
||||
type: promotion.type,
|
||||
amount: promotion.amount,
|
||||
final: broker + promotion.amount
|
||||
}
|
||||
}
|
||||
return {
|
||||
name: promotion.description,
|
||||
type: promotion.type,
|
||||
amount: promotion.amount,
|
||||
final: broker / (1 - promotion.amount)
|
||||
}
|
||||
}) ?? []
|
||||
return {
|
||||
id: unit.id,
|
||||
base: price,
|
||||
commission: this.commission,
|
||||
broker,
|
||||
promotions
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
class GroupedTableHandler extends TableHandler {
|
||||
promotions = {
|
||||
names: new Set(),
|
||||
values: []
|
||||
}
|
||||
process() {
|
||||
return {
|
||||
prices: prices => {
|
||||
let promotions = {}
|
||||
prices.map(price => price.promotions).forEach(promotionArray => {
|
||||
promotionArray.forEach(p => {
|
||||
if (!Object.hasOwn(promotions, p.name)) {
|
||||
promotions[p.name] = {
|
||||
name: p.name,
|
||||
type: p.type,
|
||||
amount: [],
|
||||
final: []
|
||||
}
|
||||
}
|
||||
promotions[p.name].amount.push(p.amount)
|
||||
promotions[p.name].final.push(p.final)
|
||||
})
|
||||
})
|
||||
return promotions
|
||||
},
|
||||
promotions: () => {
|
||||
return {
|
||||
names: promotions => {
|
||||
Object.keys(promotions).forEach(name => {
|
||||
this.add().promotion().name(name)
|
||||
})
|
||||
},
|
||||
values: ({promotions, formatters}) => {
|
||||
const temp = Object.values(promotions)
|
||||
if (temp.length > 0) {
|
||||
const data = temp.map(p => {
|
||||
return {
|
||||
name: p.name,
|
||||
type: p.type,
|
||||
amount: {
|
||||
min: Math.min(...p.amount),
|
||||
max: Math.max(...p.amount),
|
||||
desv: Stat.standardDeviation(p.amount),
|
||||
mean: Stat.mean(p.amount)
|
||||
},
|
||||
final: {
|
||||
min: Math.min(...p.final),
|
||||
max: Math.max(...p.final),
|
||||
desv: Stat.standardDeviation(p.final),
|
||||
mean: Stat.mean(p.final)
|
||||
}
|
||||
}
|
||||
})
|
||||
this.add().promotion().values({promotions: data, formatters})
|
||||
return
|
||||
}
|
||||
this.promotions.values.push([])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
add() {
|
||||
return {
|
||||
promotion: () => {
|
||||
return {
|
||||
name: name => {
|
||||
this.promotions.names.add(name)
|
||||
},
|
||||
values: ({promotions, formatters}) => {
|
||||
this.promotions.values.push(promotions.map(promotion => {
|
||||
const amount_tooltip = [
|
||||
`Min: ${promotion.type === 1 ? 'UF ' + formatters.ufs.format(promotion.amount.min) : formatters.percent.format(promotion.amount.min)}`,
|
||||
`Max: ${promotion.type === 1 ? 'UF ' + formatters.ufs.format(promotion.amount.max) : formatters.percent.format(promotion.amount.max)}`,
|
||||
`Desv: ${promotion.type === 1 ? 'UF ' + formatters.ufs.format(promotion.amount.desv) : formatters.percent.format(promotion.amount.desv)}`
|
||||
].join("\n").replaceAll(' ', ' ')
|
||||
const final_tooltip = [
|
||||
`Min: UF ${formatters.ufs.format(promotion.final.min)}`,
|
||||
`Max: UF ${formatters.ufs.format(promotion.final.max)}`,
|
||||
`Desv: UF ${formatters.ufs.format(promotion.final.desv)}`
|
||||
].join("\n").replaceAll(' ', ' ')
|
||||
return {
|
||||
name: promotion.name,
|
||||
value: [
|
||||
`<td class="right aligned"><span data-tooltip="${amount_tooltip}" data-position="right center" data-variation="wide multiline">${promotion.type === 1 ? formatters.ufs.format(promotion.amount.mean) : formatters.percent.format(promotion.amount.mean)}</td>`,
|
||||
`<td class="right aligned"><span data-tooltip="${final_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(promotion.final.mean)}</td></td>`,
|
||||
].join("\n")
|
||||
}
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
build() {
|
||||
return {
|
||||
promotions: (table, tbody) => {
|
||||
if (this.promotions.names.size > 0) {
|
||||
const title = document.getElementById(this.ids.promotions)
|
||||
title.innerHTML = this.promotions.names.size > 0 ? Array.from(this.promotions.names)[0] : ''
|
||||
title.setAttribute('colspan', '2')
|
||||
if (this.promotions.names.size > 1) {
|
||||
const thead = table.querySelector('thead')
|
||||
Array.from(this.promotions.names).slice(1).forEach(name => {
|
||||
thead.insertAdjacentHTML('beforeend', `<th class="right aligned" style="text-decoration: overline" colspan="2">${name}</th>`)
|
||||
})
|
||||
}
|
||||
const trs = tbody.querySelectorAll('tr')
|
||||
this.promotions.values.forEach((row, i) => {
|
||||
const tr = trs[i]
|
||||
const td = tr.querySelector('td.promotions')
|
||||
if (row.length === 0) {
|
||||
td.setAttribute('colspan', 2 * this.promotions.names.size)
|
||||
return
|
||||
}
|
||||
td.remove()
|
||||
this.promotions.names.forEach(name => {
|
||||
const index = row.findIndex(r => r.name === name)
|
||||
if (index === -1) {
|
||||
tr.insertAdjacentHTML('beforeend', '<td colspan="2"></td>')
|
||||
return
|
||||
}
|
||||
tr.insertAdjacentHTML('beforeend', row[index].value)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endprepend
|
||||
|
||||
@section('brokers_content')
|
||||
<div class="ui statistic">
|
||||
<div class="value">{{ $format->percent($contract->commission ?? 0, 2, true) }}</div>
|
||||
<div class="label">
|
||||
Comisión desde {{ $contract->current()?->date?->format('d/m/Y') }}
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="ui card">
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
Promociones Aplicadas
|
||||
</div>
|
||||
<div class="description">
|
||||
@if (count($contract->promotions()) === 0)
|
||||
- Ninguna
|
||||
@else
|
||||
<div class="ui list">
|
||||
@foreach ($contract->promotions() as $promotion)
|
||||
<div class="item">
|
||||
{{ $promotion->description }} {{ $format->percent($promotion->amount, 2, true) }} {{ ucwords($promotion->type->name()) }}
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui very basic segment">
|
||||
<div class="ui active inline loader" id="loader"></div>
|
||||
<div class="ui indicating progress" id="load_progress">
|
||||
<div class="bar">
|
||||
<div class="progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="results">
|
||||
<div class="ui top attached tabular menu">
|
||||
<a class="item active" data-tab="tipos">Tipos</a>
|
||||
<a class="item" data-tab="lineas">Líneas</a>
|
||||
<a class="item" data-tab="unidades">Unidades</a>
|
||||
</div>
|
||||
<div class="ui top attached indicating progress" id="values_progress">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<div class="ui bottom attached tab basic fitted segment active" data-tab="tipos">
|
||||
@include('proyectos.brokers.contracts.show.tipo')
|
||||
</div>
|
||||
<div class="ui bottom attached tab basic fitted segment" data-tab="lineas">
|
||||
@include('proyectos.brokers.contracts.show.linea')
|
||||
</div>
|
||||
<div class="ui bottom attached tab basic fitted segment" data-tab="unidades">
|
||||
@include('proyectos.brokers.contracts.show.unidades')
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@include('layout.body.scripts.datatables')
|
||||
@include('layout.body.scripts.datatables.searchbuilder')
|
||||
@include('layout.body.scripts.datatables.buttons')
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
const units = {
|
||||
ids: {
|
||||
units: '',
|
||||
loader: '',
|
||||
progress: '',
|
||||
load_progress: ''
|
||||
},
|
||||
data: {
|
||||
project_id: {{ $contract->project->id }},
|
||||
commission: {{ $contract->commission }},
|
||||
units: []
|
||||
},
|
||||
formatters: {
|
||||
ufs: new Intl.NumberFormat('es-CL', { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 }),
|
||||
percent: new Intl.NumberFormat('es-CL', { style: 'percent', minimumFractionDigits: 2 })
|
||||
},
|
||||
handlers: {
|
||||
tipo: null,
|
||||
linea: null,
|
||||
unit: null
|
||||
},
|
||||
get() {
|
||||
return {
|
||||
units: () => {
|
||||
const url = `{{ $urls->api }}/proyecto/${units.data.project_id}/unidades`
|
||||
return APIClient.fetch(url).then(response => response.json()).then(json => {
|
||||
if (json.unidades.length === 0) {
|
||||
console.error(json.errors)
|
||||
return
|
||||
}
|
||||
units.data.units = []
|
||||
Object.entries(json.unidades).forEach(([tipo, unidades]) => {
|
||||
units.data.units = [...units.data.units, ...unidades]
|
||||
})
|
||||
})
|
||||
},
|
||||
promotions: progress_bar => {
|
||||
const chunkSize = 100
|
||||
const chunks = []
|
||||
for (let i = 0; i < units.data.units.length; i += chunkSize) {
|
||||
chunks.push(units.data.units.slice(i, i + chunkSize).map(u => u.id))
|
||||
}
|
||||
const promises = []
|
||||
const url = `{{ $urls->api }}/proyectos/broker/{{ $contract->broker->rut }}/contract/{{ $contract->id }}/promotions`
|
||||
const method = 'post'
|
||||
chunks.forEach(chunk => {
|
||||
const body = new FormData()
|
||||
chunk.forEach(id => body.append('unidad_ids[]', id))
|
||||
promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
|
||||
progress_bar.progress('increment', json.input.unidad_ids.length)
|
||||
if (json.unidades.length === 0) {
|
||||
return
|
||||
}
|
||||
json.unidades.forEach(unidad => {
|
||||
const idx = units.data.units.findIndex(u => u.id === parseInt(unidad.id))
|
||||
units.data.units[idx].promotions = unidad.promotions
|
||||
})
|
||||
}))
|
||||
})
|
||||
return Promise.all(promises)
|
||||
},
|
||||
prices: progress_bar => {
|
||||
/*const unsold = [...units.data.units.filter(unit => !unit.sold), ...units.data.units.filter(unit => unit.sold && unit.proyecto_tipo_unidad.tipo_unidad.descripcion !== 'departamento')]
|
||||
const current_total = progress_bar.progress('get total')
|
||||
progress_bar.progress('set total', current_total + unsold.length)*/
|
||||
|
||||
const chunkSize = 100
|
||||
const chunks = []
|
||||
for (let i = 0; i < units.data.units.length; i += chunkSize) {
|
||||
chunks.push(units.data.units.slice(i, i + chunkSize).map(u => u.id))
|
||||
}
|
||||
const promises = []
|
||||
const url = `{{ $urls->api }}/proyecto/{{ $contract->project->id }}/unidades/precios`
|
||||
const method = 'post'
|
||||
chunks.forEach(chunk => {
|
||||
const body = new FormData()
|
||||
chunk.forEach(id => body.append('unidad_ids[]', id))
|
||||
promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
|
||||
progress_bar.progress('increment', json.input.unidad_ids.length)
|
||||
if (json.precios.length === 0) {
|
||||
return
|
||||
}
|
||||
json.precios.forEach(unidad => {
|
||||
const idx = units.data.units.findIndex(u => u.id === parseInt(unidad.id))
|
||||
units.data.units[idx].precio = unidad.precio
|
||||
})
|
||||
}))
|
||||
})
|
||||
return Promise.all(promises)
|
||||
},
|
||||
values: progress_bar => {
|
||||
const sold = units.data.units.filter(unit => unit.sold && unit.proyecto_tipo_unidad.tipo_unidad.descripcion === 'departamento')
|
||||
progress_bar.progress('set total', sold.length)
|
||||
|
||||
const chunkSize = 10
|
||||
const chunks = []
|
||||
for (let i = 0; i < sold.length; i += chunkSize) {
|
||||
chunks.push(sold.slice(i, i + chunkSize).map(u => u.id))
|
||||
}
|
||||
const promises = []
|
||||
const url = `{{ $urls->api }}/ventas/by/unidades`
|
||||
const method = 'post'
|
||||
chunks.forEach(chunk => {
|
||||
const body = new FormData()
|
||||
chunk.forEach(id => body.append('unidad_ids[]', id))
|
||||
promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
|
||||
progress_bar.progress('increment', json.input.unidad_ids.length)
|
||||
if (json.ventas.length === 0) {
|
||||
return
|
||||
}
|
||||
json.ventas.forEach(({unidad_id, venta}) => {
|
||||
const unidades = venta.propiedad.unidades
|
||||
const otras_unidades = unidades.filter(unit => unit.id !== parseInt(unidad_id) && unit.proyecto_tipo_unidad.tipo_unidad.descripcion !== 'departamento')
|
||||
const departamentos = unidades.filter(unit => unit.proyecto_tipo_unidad.tipo_unidad.descripcion === 'departamento' && unit.id !== parseInt(unidad_id))
|
||||
const precios = otras_unidades.map(unit => {
|
||||
const idx = units.data.units.findIndex(u => u.id === unit.id)
|
||||
return units.data.units[idx].precio?.valor ?? 0
|
||||
}).reduce((sum, precio) => sum + precio, 0)
|
||||
if (departamentos.length === 0) {
|
||||
const idx = units.data.units.findIndex(unit => unit.id === parseInt(unidad_id))
|
||||
units.data.units[idx].valor = venta.valor - precios
|
||||
units.data.units[idx].venta = venta
|
||||
return
|
||||
}
|
||||
const sum_precios = departamentos.map(departamento => {
|
||||
const idx = units.data.units.findIndex(unit => unit.id === departamento.id)
|
||||
return units.data.units[idx].precio
|
||||
}).reduce((sum, precio) => sum + precio, 0)
|
||||
departamentos.forEach(departamento => {
|
||||
const idx = units.data.units.findIndex(unit => unit.id === departamento.id)
|
||||
const saldo = venta.valor - precios
|
||||
units.data.units[idx].valor = saldo / sum_precios * departamento.precio
|
||||
units.data.units[idx].venta = venta
|
||||
})
|
||||
})
|
||||
}))
|
||||
})
|
||||
return Promise.all(promises)
|
||||
},
|
||||
sold: progress_bar => {
|
||||
const chunkSize = 100
|
||||
const chunks = []
|
||||
for (let i = 0; i < units.data.units.length; i += chunkSize) {
|
||||
chunks.push(units.data.units.slice(i, i + chunkSize).map(u => u.id))
|
||||
}
|
||||
const promises = []
|
||||
const url = `{{ $urls->api }}/proyecto/{{ $contract->project->id }}/unidades/estados`
|
||||
const method = 'post'
|
||||
chunks.forEach(chunk => {
|
||||
const body = new FormData()
|
||||
chunk.forEach(id => body.append('unidad_ids[]', id))
|
||||
promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
|
||||
progress_bar.progress('increment', json.input.unidad_ids.length)
|
||||
if (json.estados.length === 0) {
|
||||
return
|
||||
}
|
||||
json.estados.forEach(unidad => {
|
||||
const idx = units.data.units.findIndex(u => u.id === parseInt(unidad.id))
|
||||
units.data.units[idx].sold = unidad.sold
|
||||
})
|
||||
}))
|
||||
})
|
||||
return Promise.all(promises)
|
||||
},
|
||||
}
|
||||
},
|
||||
draw() {
|
||||
return {
|
||||
units: () => {
|
||||
units.handlers.units.draw({units: units.data.units, formatters: units.formatters})
|
||||
},
|
||||
tipos: () => {
|
||||
units.handlers.tipo.draw({units: units.data.units, formatters: units.formatters})
|
||||
},
|
||||
lineas: () => {
|
||||
units.handlers.lineas.draw({units: units.data.units, formatters: units.formatters})
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(ids) {
|
||||
units.ids = ids
|
||||
|
||||
units.handlers.tipo = new TipoTable(units.data.commission)
|
||||
units.handlers.lineas = new LineasTable(units.data.commission)
|
||||
units.handlers.units = new UnitsTable(units.data.commission)
|
||||
|
||||
$(`#${units.ids.results}`).find('.tabular.menu .item').tab({
|
||||
onVisible: function(tabPath) {
|
||||
if (tabPath !== 'unidades') {
|
||||
return
|
||||
}
|
||||
$(this.querySelector('table')).DataTable().columns.adjust().draw()
|
||||
this.querySelector('table').style.width = ''
|
||||
}
|
||||
})
|
||||
document.getElementById(units.ids.results).style.visibility = 'hidden'
|
||||
document.getElementById(units.ids.progress).style.visibility = 'hidden'
|
||||
document.getElementById(units.ids.load_progress).style.visibility = 'hidden'
|
||||
|
||||
const loader = $(`#${units.ids.loader}`)
|
||||
|
||||
units.get().units().then(() => {
|
||||
document.getElementById(units.ids.load_progress).style.visibility = 'visible'
|
||||
|
||||
const units_length = units.data.units.length
|
||||
const progress_bar = $(`#${units.ids.load_progress}`)
|
||||
progress_bar.progress({ total: units_length * 3 })
|
||||
|
||||
loader.hide()
|
||||
|
||||
units.get().promotions(progress_bar).then(() => {
|
||||
units.get().sold(progress_bar).then(() => {
|
||||
units.get().prices(progress_bar).then(() => {
|
||||
document.getElementById(units.ids.results).style.visibility = 'visible'
|
||||
|
||||
loader.parent().remove()
|
||||
|
||||
units.draw().units()
|
||||
units.draw().tipos()
|
||||
units.draw().lineas()
|
||||
|
||||
document.getElementById(units.ids.progress).style.visibility = 'visible'
|
||||
const progress_bar = $(`#${units.ids.progress}`)
|
||||
progress_bar.progress()
|
||||
|
||||
units.get().values(progress_bar).then(() => {
|
||||
document.getElementById(units.ids.progress).remove()
|
||||
|
||||
units.draw().units()
|
||||
units.draw().tipos()
|
||||
units.draw().lineas()
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
$(document).ready(function () {
|
||||
units.setup({results: 'results', loader: 'loader', progress: 'values_progress', load_progress: 'load_progress'})
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
@ -0,0 +1,91 @@
|
||||
<table class="ui table" id="lineas">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tipo</th>
|
||||
<th class="center aligned">Línea</th>
|
||||
<th class="center aligned">Orientación</th>
|
||||
<th class="center aligned">Cantidad</th>
|
||||
<th class="right aligned" style="text-decoration: overline">Precio Base</th>
|
||||
<th class="right aligned" style="text-decoration: overline">Comisión</th>
|
||||
<th class="right aligned" style="text-decoration: overline">Precio Operador</th>
|
||||
<th class="center aligned" style="text-decoration: overline" id="linea_promociones">Promociones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class LineasTable extends GroupedTableHandler {
|
||||
ids = {
|
||||
lineas: 'lineas',
|
||||
promotions: 'linea_promociones'
|
||||
}
|
||||
constructor(commission) {
|
||||
super(commission)
|
||||
}
|
||||
draw({units, formatters}) {
|
||||
const table = document.getElementById(this.ids.lineas)
|
||||
const tbody = table.querySelector('tbody')
|
||||
tbody.innerHTML = ''
|
||||
const lineas = Object.groupBy(units, unit => {
|
||||
return [unit.proyecto_tipo_unidad.tipo_unidad.descripcion, unit.proyecto_tipo_unidad.nombre, unit.orientacion]
|
||||
})
|
||||
this.promotions.names = new Set()
|
||||
this.promotions.values = []
|
||||
Object.entries(lineas).sort(([linea1, unidades1], [linea2, unidades2]) => {
|
||||
const split1 = linea1.split(',')
|
||||
const split2 = linea2.split(',')
|
||||
const ct = unidades1[0].proyecto_tipo_unidad.tipo_unidad.orden - unidades2[0].proyecto_tipo_unidad.tipo_unidad.orden
|
||||
if (ct === 0) {
|
||||
const cl = split1[1].localeCompare(split2[1])
|
||||
if (cl === 0) {
|
||||
return split1[2].localeCompare(split2[2])
|
||||
}
|
||||
return cl
|
||||
}
|
||||
return ct
|
||||
}).forEach(([linea, unidades]) => {
|
||||
const parts = linea.split(',')
|
||||
const tipo = parts[0]
|
||||
const orientacion = parts[2]
|
||||
const prices = this.prices(unidades)
|
||||
|
||||
const base_tooltip = [
|
||||
`Min: UF ${formatters.ufs.format(Math.min(...prices.map(p => p.base)))}`,
|
||||
`Max: UF ${formatters.ufs.format(Math.max(...prices.map(p => p.base)))}`,
|
||||
`Desv: UF ${formatters.ufs.format(Stat.standardDeviation(prices.map(p => p.base)))}`
|
||||
].join("\n").replaceAll(' ', ' ')
|
||||
const commission_tooltip = [
|
||||
`Min: ${formatters.percent.format(Math.min(...prices.map(p => p.commission)))}`,
|
||||
`Max: ${formatters.percent.format(Math.max(...prices.map(p => p.commission)))}`,
|
||||
`Desv: ${formatters.percent.format(Stat.standardDeviation(prices.map(p => p.commission)))}`
|
||||
].join("\n").replaceAll(' ', ' ')
|
||||
const broker_tooltip = [
|
||||
`Min: ${formatters.ufs.format(Math.min(...prices.map(p => p.broker)))}`,
|
||||
`Max: ${formatters.ufs.format(Math.max(...prices.map(p => p.broker)))}`,
|
||||
`Desv: ${formatters.ufs.format(Stat.standardDeviation(prices.map(p => p.broker)))}`
|
||||
].join("\n").replaceAll(' ', ' ')
|
||||
|
||||
const promotions = this.process().prices(prices)
|
||||
this.process().promotions().names(promotions)
|
||||
this.process().promotions().values({promotions, formatters})
|
||||
|
||||
tbody.innerHTML += [
|
||||
`<tr>`,
|
||||
`<td>${tipo.charAt(0).toUpperCase() + tipo.slice(1)}</td>`,
|
||||
`<td class="center aligned"><span data-tooltip="${unidades[0].proyecto_tipo_unidad.tipologia}" data-position="right center">${parts[1]}</span></td>`,
|
||||
`<td class="center aligned">${orientacion}</td>`,
|
||||
`<td class="center aligned">${unidades.length}</td>`,
|
||||
`<td class="right aligned"><span data-tooltip="${base_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(Stat.mean(prices.map(p => p.base)))}</span></td>`,
|
||||
`<td class="right aligned"><span data-tooltip="${commission_tooltip}" data-position="right center" data-variation="wide multiline">${formatters.percent.format(Stat.mean(prices.map(p => p.commission)))}</span></td>`,
|
||||
`<td class="right aligned"><span data-tooltip="${broker_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(Stat.mean(prices.map(p => p.broker)))}</span></td>`,
|
||||
`<td class="right aligned promotions"></td>`,
|
||||
`</tr>`
|
||||
].join("\n")
|
||||
})
|
||||
this.build().promotions(table, tbody)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@ -0,0 +1,71 @@
|
||||
<table class="ui table" id="tipos">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tipo</th>
|
||||
<th class="center aligned">Cantidad</th>
|
||||
<th class="right aligned" style="text-decoration: overline">Precio Base</th>
|
||||
<th class="right aligned" style="text-decoration: overline">Comisión</th>
|
||||
<th class="right aligned" style="text-decoration: overline">Precio Operador</th>
|
||||
<th class="center aligned" style="text-decoration: overline" id="tipo_promociones">Promociones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class TipoTable extends GroupedTableHandler {
|
||||
ids = {
|
||||
tipos: 'tipos',
|
||||
promotions: 'tipo_promociones'
|
||||
}
|
||||
constructor(commission) {
|
||||
super(commission)
|
||||
}
|
||||
draw({units, formatters}) {
|
||||
const table = document.getElementById(this.ids.tipos)
|
||||
const tbody = table.querySelector('tbody')
|
||||
tbody.innerHTML = ''
|
||||
const groups = Object.groupBy(units, unit => {
|
||||
return unit.proyecto_tipo_unidad.tipo_unidad.descripcion
|
||||
})
|
||||
this.promotions.names = new Set()
|
||||
this.promotions.values = []
|
||||
Object.entries(groups).forEach(([tipo, unidades]) => {
|
||||
const prices = this.prices(unidades)
|
||||
const base_tooltip = [
|
||||
`Min: UF ${formatters.ufs.format(Math.min(...prices.map(p => p.base)))}`,
|
||||
`Max: UF ${formatters.ufs.format(Math.max(...prices.map(p => p.base)))}`,
|
||||
`Desv: UF ${formatters.ufs.format(Stat.standardDeviation(prices.map(p => p.base)))}`
|
||||
].join("\n").replaceAll(' ', ' ')
|
||||
const commission_tooltip = [
|
||||
`Min: ${formatters.percent.format(Math.min(...prices.map(p => p.commission)))}`,
|
||||
`Max: ${formatters.percent.format(Math.max(...prices.map(p => p.commission)))}`,
|
||||
`Desv: ${formatters.percent.format(Stat.standardDeviation(prices.map(p => p.commission)))}`
|
||||
].join("\n").replaceAll(' ', ' ')
|
||||
const broker_tooltip = [
|
||||
`Min: ${formatters.ufs.format(Math.min(...prices.map(p => p.broker)))}`,
|
||||
`Max: ${formatters.ufs.format(Math.max(...prices.map(p => p.broker)))}`,
|
||||
`Desv: ${formatters.ufs.format(Stat.standardDeviation(prices.map(p => p.broker)))}`
|
||||
].join("\n").replaceAll(' ', ' ')
|
||||
|
||||
const promotions = this.process().prices(prices)
|
||||
this.process().promotions().names(promotions)
|
||||
this.process().promotions().values({promotions, formatters})
|
||||
|
||||
tbody.innerHTML += [
|
||||
`<tr>`,
|
||||
`<td>${tipo.charAt(0).toUpperCase() + tipo.slice(1)}</td>`,
|
||||
`<td class="center aligned">${unidades.length}</td>`,
|
||||
`<td class="right aligned"><span data-tooltip="${base_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(Stat.mean(prices.map(p => p.base)))}</span></td>`,
|
||||
`<td class="right aligned"><span data-tooltip="${commission_tooltip}" data-position="right center" data-variation="wide multiline">${formatters.percent.format(Stat.mean(prices.map(p => p.commission)))}</span></td>`,
|
||||
`<td class="right aligned"><span data-tooltip="${broker_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(Stat.mean(prices.map(p => p.broker)))}</span></td>`,
|
||||
`<td class="right aligned promotions"></td>`,
|
||||
`</tr>`
|
||||
].join("\n")
|
||||
})
|
||||
this.build().promotions(table, tbody)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@ -0,0 +1,254 @@
|
||||
<table class="ui table" id="unidades">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Estado</th>
|
||||
<th>Tipo</th>
|
||||
<th>Tipo Order</th>
|
||||
<th class="right aligned">Unidad</th>
|
||||
<th>Unidad Orden</th>
|
||||
<th>Tipología</th>
|
||||
<th>Piso</th>
|
||||
<th>Orientación</th>
|
||||
<th>m² Interior</th>
|
||||
<th>m² Terraza</th>
|
||||
<th>m² Vendibles</th>
|
||||
<th>m² Total</th>
|
||||
<th class="right aligned">Precio Base</th>
|
||||
<th class="right aligned">Comisión</th>
|
||||
<th class="right aligned">Precio Operador</th>
|
||||
<th class="right aligned">UF/m²</th>
|
||||
<th class="center aligned" id="unit_promotions">Promociones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class UnitsTable extends TableHandler {
|
||||
ids = {
|
||||
units: 'unidades',
|
||||
}
|
||||
columns = [
|
||||
'estado',
|
||||
'tipo',
|
||||
'tipo_order',
|
||||
'unidad',
|
||||
'unidad_order',
|
||||
'tipologia',
|
||||
'piso',
|
||||
'orientacion',
|
||||
'metros_interior',
|
||||
'metros_terraza',
|
||||
'metros',
|
||||
'metros_total',
|
||||
'precio_base',
|
||||
'commission',
|
||||
'precio_operador',
|
||||
'UF/m²',
|
||||
'promociones',
|
||||
]
|
||||
set = {
|
||||
table: false,
|
||||
titles: false
|
||||
}
|
||||
table
|
||||
constructor(commission) {
|
||||
super(commission)
|
||||
}
|
||||
setup() {
|
||||
return {
|
||||
titles: promotions_names => {
|
||||
if (this.set.titles || promotions_names.size === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const nameArray = Array.from(promotions_names)
|
||||
|
||||
this.columns.pop()
|
||||
this.columns.push(`${nameArray[0].toLowerCase().replaceAll(' ', '_')}.amount`)
|
||||
this.columns.push(`${nameArray[0].toLowerCase().replaceAll(' ', '_')}.final`)
|
||||
|
||||
const table = document.getElementById(this.ids.units)
|
||||
const thead = table.querySelector('thead')
|
||||
const tr = thead.querySelector('tr')
|
||||
const th = tr.querySelector('th#unit_promotions')
|
||||
th.innerHTML = `${nameArray[0]}<br />Porcentaje`
|
||||
tr.insertAdjacentHTML('beforeend', `<th class="right aligned">${nameArray[0]}<br />Precio Final</th>`)
|
||||
|
||||
if (promotions_names.size > 1) {
|
||||
nameArray.slice(1).forEach(name => {
|
||||
this.columns.push(`${name.toLowerCase().replaceAll(' ', '_')}.amount`)
|
||||
this.columns.push(`${name.toLowerCase().replaceAll(' ', '_')}.final`)
|
||||
|
||||
tr.insertAdjacentHTML('beforeend', `<th class="right aligned">${name}<br />Porcentaje</th>`)
|
||||
tr.insertAdjacentHTML('beforeend', `<th class="right aligned">${name}<br />Precio Final</th>`)
|
||||
})
|
||||
}
|
||||
this.set.titles = true
|
||||
},
|
||||
table: () => {
|
||||
if (typeof this.table !== 'undefined' || this.set.table) {
|
||||
return
|
||||
}
|
||||
|
||||
const dto = structuredClone(datatables_defaults)
|
||||
dto.pageLength = 100
|
||||
dto.columnDefs = [
|
||||
{
|
||||
target: ['tipo_order', 'unidad_order', 'tipologia', 'piso', 'orientacion', 'metros'].map(column => this.columns.indexOf(column)),
|
||||
visible: false
|
||||
},
|
||||
{
|
||||
target: ['tipo'].map(column => this.columns.indexOf(column)),
|
||||
orderData: ['tipo_order'].map(column => this.columns.indexOf(column)),
|
||||
},
|
||||
{
|
||||
target: ['unidad'].map(column => this.columns.indexOf(column)),
|
||||
orderData: ['unidad_order'].map(column => this.columns.indexOf(column)),
|
||||
},
|
||||
{
|
||||
target: ['unidad', 'precio_base', 'commission', 'precio_operador', 'UF/m²', 'porcentaje', 'precio_final']
|
||||
.map(column => this.columns.indexOf(column)),
|
||||
className: 'dt-right right aligned'
|
||||
}
|
||||
]
|
||||
dto.order = ['tipo_order', 'unidad_order'].map(column => [this.columns.indexOf(column), 'asc'])
|
||||
dto.language.searchBuilder = searchBuilder
|
||||
const exportColumns = ['tipo', 'unidad', 'tipologia', 'piso', 'orientacion', 'metros_interior', 'metros_terraza', 'metros', 'metros_total', 'precio_operador', 'promociones']
|
||||
if (typeof this.columns['promotions'] === 'undefined') {
|
||||
exportColumns.pop()
|
||||
this.columns.slice(this.columns.indexOf('UF/m²')+1).forEach(name => {
|
||||
exportColumns.push(name)
|
||||
})
|
||||
}
|
||||
dto.layout = {
|
||||
top1Start: {
|
||||
searchBuilder: {
|
||||
columns: this.columns.filter(column => !['tipo_order', 'unidad_order'].includes(column))
|
||||
.map(column => this.columns.indexOf(column)),
|
||||
}
|
||||
},
|
||||
top1End: {
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excelHtml5',
|
||||
className: 'green',
|
||||
text: 'Exportar a Excel <i class="file excel icon"></i>',
|
||||
title: 'Lista de Precios - {{ $contract->broker->name }} - {{ $contract->project->descripcion }} - {{ (new DateTime())->format('Y-m-d') }}',
|
||||
download: 'open',
|
||||
exportOptions: {
|
||||
columns: exportColumns
|
||||
.map(column => this.columns.indexOf(column)),
|
||||
rows: (idx, data, node) => {
|
||||
return data[this.columns.indexOf('estado')] === 'Libre'
|
||||
},
|
||||
format: {
|
||||
body: (data, row, columnIdx, node) => {
|
||||
if (typeof data === 'string' && data.includes('<span')) {
|
||||
return data.replace(/<span.*>(.*)<\/span>/, '$1')
|
||||
}
|
||||
if (typeof data === 'string' && data.includes('UF ')) {
|
||||
return data.replace('UF ', '').replaceAll('.', '').replaceAll(',', '.')
|
||||
}
|
||||
const formatColumns = ['metros', 'metros_interior', 'metros_terraza', 'metros_total']
|
||||
if (this.set.titles) {
|
||||
this.columns.filter(column => column.includes('.amount') || column.includes('.final')).forEach(name => {
|
||||
formatColumns.push(name)
|
||||
})
|
||||
}
|
||||
if (formatColumns.map(column => this.columns.indexOf(column)).includes(columnIdx)) {
|
||||
return data.replaceAll('.', '').replaceAll(',', '.')
|
||||
}
|
||||
return data
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
this.table = $(`#${this.ids.units}`).DataTable(dto)
|
||||
|
||||
this.set.table = true
|
||||
}
|
||||
}
|
||||
}
|
||||
draw({units, formatters}) {
|
||||
const prices = this.prices(units)
|
||||
|
||||
const promotions_names = new Set()
|
||||
const tableData = []
|
||||
units.forEach(unidad => {
|
||||
const tipo = unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
|
||||
const price = prices.find(p => p.id === unidad.id)
|
||||
|
||||
let promotions = []
|
||||
price.promotions.forEach(p => {
|
||||
if (Object.hasOwn(promotions, p.name)) {
|
||||
return
|
||||
}
|
||||
promotions[p.name] = {
|
||||
name: p.name,
|
||||
type: p.type,
|
||||
amount: p.type === 1 ? 'UF ' + formatters.ufs.format(p.amount) : formatters.percent.format(p.amount),
|
||||
final: `UF ${formatters.ufs.format(p.final)}`
|
||||
}
|
||||
})
|
||||
|
||||
Object.keys(promotions).forEach(name => {
|
||||
promotions_names.add(name)
|
||||
})
|
||||
const temp = Object.values(promotions)
|
||||
|
||||
const data = [
|
||||
unidad.sold ? `<span class="ui yellow text">Vendida</span>` : 'Libre',
|
||||
tipo.charAt(0).toUpperCase() + tipo.slice(1),
|
||||
unidad.proyecto_tipo_unidad.tipo_unidad.orden,
|
||||
unidad.sold && unidad.venta ? `<a href="{{ $urls->base }}/venta/${unidad.venta?.id }" data-tooltip="Valor Promesa: UF ${formatters.ufs.format(unidad.venta?.valor ?? 0)}" data-position="left center">${unidad.descripcion}</a>` : unidad.descripcion,
|
||||
unidad.descripcion.padStart(4, '0'),
|
||||
unidad.proyecto_tipo_unidad.tipologia,
|
||||
unidad.piso,
|
||||
unidad.orientacion,
|
||||
formatters.ufs.format(unidad.proyecto_tipo_unidad.util) ?? 0,
|
||||
formatters.ufs.format(unidad.proyecto_tipo_unidad.terraza) ?? 0,
|
||||
formatters.ufs.format(unidad.proyecto_tipo_unidad.vendible) ?? 0,
|
||||
formatters.ufs.format(unidad.proyecto_tipo_unidad.superficie) ?? 0,
|
||||
'UF ' + formatters.ufs.format(price.base ?? 0),
|
||||
formatters.percent.format(price.commission ?? 0),
|
||||
'UF ' + formatters.ufs.format(price.broker ?? 0),
|
||||
formatters.ufs.format(price.broker / unidad.proyecto_tipo_unidad.vendible),
|
||||
''
|
||||
]
|
||||
|
||||
if (temp.length > 0) {
|
||||
data.pop()
|
||||
temp.forEach((p, i) => {
|
||||
data.push(p.amount)
|
||||
data.push(p.final)
|
||||
})
|
||||
} else {
|
||||
if (promotions_names.size > 0) {
|
||||
Array.from(promotions_names).forEach(name => {
|
||||
data.push('')
|
||||
data.push('')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
tableData.push(data)
|
||||
})
|
||||
|
||||
this.setup().titles(promotions_names)
|
||||
this.setup().table()
|
||||
|
||||
const table = this.table
|
||||
table.clear()
|
||||
|
||||
table.rows.add(tableData)
|
||||
table.draw()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user