Files
oficial/app/resources/views/ventas/precios/list.blade.php
2025-05-15 16:04:35 -04:00

698 lines
30 KiB
PHP

@extends('layout.base')
@section('page_title')
Precios - Listado
@endsection
@section('page_content')
<div class="ui container">
<h2 class="ui header">Listado de Precios</h2>
<div id="list">
<h4 class="ui dividing header">
<div class="ui two column grid">
<div id="list_title" class="column"></div>
<div class="right aligned column">
<div class="ui tiny icon buttons">
<button class="ui button" id="up_button">
<i class="up arrow icon"></i>
</button>
<button class="ui button" id="refresh_button">
<i class="refresh icon"></i>
</button>
</div>
<button class="ui tiny green icon button" id="add_button">
<i class="plus icon"></i>
</button>
</div>
</div>
</h4>
<div class="ui link selection list" id="proyectos"></div>
<table class="ui table" id="list_data"></table>
</div>
</div>
<div class="ui modal" id="list_modal">
<div class="header">
Actualizar <span id="modal_title"></span>
<button class="ui right floated icon button"><i class="close icon"></i></button>
</div>
<div class="content">
<div class="ui form">
<input type="hidden" name="type" value="" />
<input type="hidden" name="id" value="" />
<div class="inline field">
<label for="fecha">Fecha</label>
<div class="ui calendar" id="fecha">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="Fecha" />
</div>
</div>
</div>
<div class="inline field">
<label for="valor">Valor</label>
<div class="ui right labeled input">
<input type="text" id="valor" name="valor" />
<div class="ui basic label">UF</div>
</div>
</div>
<button class="ui button" id="send">
Actualizar
</button>
</div>
</div>
</div>
@endsection
@push('page_styles')
<style>
.show-unidades, .linea {
cursor: pointer;
}
</style>
@endpush
@push('page_scripts')
<script>
class Unidad {
id
nombre
fecha
precio
superficie
tipo
linea
constructor({id, nombre, fecha, precio, superficie, tipo, linea}) {
this.id = id
this.nombre = nombre
this.fecha = fecha
this.precio = precio
this.superficie = superficie
this.tipo = tipo
this.linea = linea
}
get unitario() {
return this.precio / this.superficie
}
draw(formatter) {
const date = new Date(this.fecha)
const dateFormatter = new Intl.DateTimeFormat('es-CL')
return $('<tr></tr>').addClass('unidad').attr('data-linea', this.linea).append(
$('<td></td>').html(this.nombre)
).append(
$('<td></td>')
).append(
$('<td></td>').html(dateFormatter.format(date))
).append(
$('<td></td>').html(formatter.format(this.precio) + ' UF')
).append(
$('<td></td>').html(formatter.format(this.unitario) + ' UF/m²')
).append(
$('<td></td>').append(
$('<button></button>').addClass('ui tiny green icon button add_unidad')
.attr('data-id', this.id)
.attr('data-tipo', this.tipo)
.attr('data-unidad', this.nombre).append(
$('<i></i>').addClass('plus icon')
).click(precios.actions().add().unidad)
)
)
}
}
class Linea {
id
nombre
orientacion
superficie
unidades
constructor({id, nombre, orientacion, superficie}) {
this.id = id
this.nombre = nombre
this.orientacion = orientacion
this.superficie = superficie
this.unidades = []
}
get precio() {
let sum = 0
this.unidades.forEach(unidad => {
sum += unidad.precio
})
return sum / this.unidades.length
}
get unitario() {
return this.precio / this.superficie
}
add(data) {
if (this.id !== data.unidad.subtipo) {
return
}
let unidad = this.unidades.find(unidad => unidad.id === data.unidad.id)
if (typeof unidad !== 'undefined') {
return
}
const tipo = data.unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
unidad = new Unidad({
id: data.unidad.id,
nombre: data.unidad.descripcion,
fecha: data.estado_precio.fecha,
precio: data.valor,
superficie: this.superficie,
tipo: tipo.charAt(0).toUpperCase() + tipo.slice(1),
linea: this.id
})
this.unidades.push(unidad)
}
draw(formatter) {
const row1 = $('<tr></tr>').attr('data-id', this.id).attr('data-status', 'closed').append(
$('<td></td>').addClass('linea').append($('<strong></strong>').html(this.nombre)).append(
$('<i></i>').addClass('right caret icon')
)
).append(
$('<td></td>').addClass('linea').append($('<strong></strong>').html(this.orientacion))
).append(
$('<td></td>').addClass('linea')
).append(
$('<td></td>').addClass('linea').append($('<strong></strong>').html(formatter.format(this.precio) + ' UF'))
).append(
$('<td></td>').addClass('linea').append($('<strong></strong>').html(formatter.format(this.unitario) + ' UF/m²'))
).append(
$('<td></td>').append(
$('<button></button>').addClass('ui tiny green icon button add_linea').attr('data-id', this.id).append(
$('<i></i>').addClass('plus icon')
).click(precios.actions().add().linea)
)
)
const output = [
row1
]
this.unidades.forEach(unidad => {
output.push(unidad.draw(formatter))
})
return output
}
}
class Tipologia {
id
tipo
nombre
descripcion
lineas
superficie
constructor({id, tipo, nombre, descripcion, superficie}) {
this.id = id
this.tipo = tipo
this.nombre = nombre
this.descripcion = descripcion
this.superficie = superficie
this.lineas = []
}
get count() {
return this.lineas.reduce((sum, linea) => {
return sum + linea.unidades.length
}, 0)
}
get precio() {
let sum = 0
this.lineas.forEach(linea => {
sum += linea.precio
})
return sum / this.lineas.length
}
get unitario() {
return this.precio / this.superficie
}
add(data) {
if (this.id !== data.unidad.proyecto_tipo_unidad.id) {
return
}
let linea = this.lineas.find(linea => linea.id === data.unidad.subtipo)
if (this.lineas.length === 0 || typeof linea === 'undefined') {
linea = new Linea({
id: data.unidad.subtipo,
nombre: 'Linea ' + data.unidad.subtipo,
orientacion: data.unidad.orientacion,
superficie: data.unidad.proyecto_tipo_unidad.vendible
})
this.lineas.push(linea)
}
linea.add(data)
}
draw(formatter) {
const output = []
const row1 = $('<tr></tr>').attr('data-status', 'closed').attr('data-id', this.id)
row1.append(
$('<td></td>').addClass('show-unidades').html(this.tipo).append(
$('<i></i>').addClass('right caret icon')
)
).append(
$('<td></td>').addClass('show-unidades').html(this.nombre)
).append(
$('<td></td>').addClass('show-unidades').html(this.descripcion)
).append(
$('<td></td>').addClass('show-unidades').html(this.lineas.map(linea => linea.id).sort((a, b) => parseInt(a) - parseInt(b)).join(' - '))
).append(
$('<td></td>').addClass('show-unidades').html(formatter.format(this.superficie) + ' m²')
).append(
$('<td></td>').addClass('show-unidades').html(this.count)
).append(
$('<td></td>').addClass('show-unidades').html(formatter.format(this.precio) + ' UF')
).append(
$('<td></td>').addClass('show-unidades').html(formatter.format(this.unitario) + ' UF/m²')
).append(
$('<td></td>').append(
$('<button></button>').addClass('ui tiny green icon button add_tipologia').attr('data-id', this.id).attr('data-tipologia', this.nombre).append(
$('<i></i>').addClass('plus icon')
).click(precios.actions().add().tipologia)
)
)
const row2 = $('<tr></tr>').addClass('unidades').attr('data-tipo', this.id)
const tbody = $('<tbody></tbody>')
this.lineas.forEach(linea => {
linea.draw(formatter).forEach(row => {
tbody.append(row)
})
})
const table = $('<table></table>').addClass('ui striped table')
table.append(
$('<thead></thead>').append(
$('<tr></tr>').append(
$('<th></th>').html('Unidad')
).append(
$('<th></th>').html('Orientación')
).append(
$('<th></th>').html('Desde')
).append(
$('<th></th>').html('Precio')
).append(
$('<th></th>').html('UF/m²')
).append(
$('<th></th>')
)
)
).append(tbody)
row2.append(
$('<td></td>')
).append(
$('<td></td>').attr('colspan', 8).append(table)
)
output.push(row1)
output.push(row2)
return output
}
}
const precios = {
ids: {
list: '',
proyectos: '',
buttons: {
add: '',
up: '',
refresh: ''
}
},
data: {
id: 0,
proyecto: '',
proyectos: JSON.parse('{!! json_encode($proyectos) !!}'),
precios: []
},
table: null,
loading: {
precios: false
},
get: function() {
return {
proyectos: () => {
this.data.proyectos = []
this.data.id = 0
this.data.proyecto = ''
$(this.ids.buttons.add).hide()
return fetchAPI('{{$urls->api}}/proyectos').then(response => {
if (response.ok) {
return response.json()
}
}).then(data => {
if (data.total > 0) {
data.proyectos.forEach(proyecto => {
this.data.proyectos.push({
id: proyecto.id,
descripcion: proyecto.descripcion
})
})
this.draw().proyectos()
}
})
},
precios: proyecto_id => {
this.data.precios = []
return fetchAPI('{{$urls->api}}/ventas/precios',
{method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({proyecto_id})}
).then(response => {
$('.item.proyecto').css('cursor', 'default')
this.loading.precios = false
if (response.ok) {
return response.json()
}
}).then(data => {
if (data.total > 0) {
this.data.id = data.precios[0].unidad.proyecto_tipo_unidad.proyecto.id
this.data.proyecto = data.precios[0].unidad.proyecto_tipo_unidad.proyecto.descripcion
data.precios.forEach(precio => {
this.add().precio(precio)
})
this.draw().precios()
}
})
}
}
},
add: function() {
return {
precio: data => {
let tipologia = this.data.precios.find(tipologia => tipologia.id === data.unidad.proyecto_tipo_unidad.id)
if (this.data.precios.length === 0 || typeof tipologia === 'undefined') {
const tipo = data.unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
tipologia = new Tipologia({
id: data.unidad.proyecto_tipo_unidad.id,
tipo: tipo.charAt(0).toUpperCase() + tipo.slice(1),
nombre: data.unidad.proyecto_tipo_unidad.nombre,
descripcion: data.unidad.proyecto_tipo_unidad.abreviacion,
superficie: data.unidad.proyecto_tipo_unidad.vendible
})
this.data.precios.push(tipologia)
}
tipologia.add(data)
}
}
},
draw: function() {
return {
proyectos: () => {
const parent = $(this.ids.list)
const header = parent.find('#list_title')
const list = parent.find('.list')
const table = parent.find('table.table')
$(this.ids.buttons.add).hide()
$(this.ids.buttons.add).attr('data-id', '')
$(this.ids.buttons.add).attr('data-proyecto', '')
header.html('Proyectos')
table.hide()
list.html('')
this.data.proyectos.forEach(proyecto => {
list.append(
$('<div></div>').addClass('item proyecto').attr('data-proyecto', proyecto.id).html(proyecto.descripcion).css('cursor', 'pointer')
)
})
list.show()
$('.item.proyecto').click(event => {
if (this.loading.precios) {
return false
}
const element = $(event.currentTarget)
$('.item.proyecto').css('cursor', 'wait')
this.loading.precios = true
const proyecto_id = element.data('proyecto')
this.get().precios(proyecto_id)
})
},
precios: () => {
const parent = $(this.ids.list)
const header = parent.find('#list_title')
const list = parent.find('.list')
const table = parent.find('table.table')
$(this.ids.buttons.add).attr('data-id', this.data.id)
$(this.ids.buttons.add).attr('data-proyecto', this.data.proyecto)
$(this.ids.buttons.add).show()
header.html('Precios de ' + this.data.proyecto)
list.hide()
table.html('')
table.append(this.draw().header())
const tbody = $('<tbody></tbody>')
const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
this.data.precios.forEach(tipologia => {
tipologia.draw(formatter).forEach(row => {
tbody.append(row)
})
})
table.append(tbody)
table.show()
$('.show-unidades').click(this.actions().toggle().tipologia)
$('.unidades').hide()
$('.linea').click(this.actions().toggle().linea)
$('.unidad').hide()
},
header: () => {
return $('<thead></thead>').append(
$('<tr></tr>').append(
$('<th></th>').html('Tipo')
).append(
$('<th></th>').html('Nombre')
).append(
$('<th></th>').html('Tipología')
).append(
$('<th></th>').html('Líneas')
).append(
$('<th></th>').html('m² Vendibles')
).append(
$('<th></th>').html('#')
).append(
$('<th></th>').html('Precio Promedio')
).append(
$('<th></th>').html('UF/m²')
).append(
$('<th></th>')
)
)
}
}
},
actions: function() {
return {
toggle: () => {
return {
tipologia: event => {
const th = $(event.currentTarget)
const row = th.parent()
const id = row.data('id')
const status = row.attr('data-status')
const unidades = $(".unidades[data-tipo='" + id + "']")
if (status === 'closed') {
unidades.show()
row.attr('data-status', 'open')
row.find('.caret.icon').removeClass('right').addClass('down')
return
}
unidades.find('.linea').parent().attr('data-status', 'closed')
unidades.find('.linea').find('.caret.icon').removeClass('down').addClass('right')
unidades.find('.unidad').hide()
unidades.hide()
row.attr('data-status', 'closed')
row.find('.caret.icon').removeClass('down').addClass('right')
},
linea: event => {
const th = $(event.currentTarget)
const row = th.parent()
const id = row.data('id')
const status = row.attr('data-status')
const unidades = $(".unidad[data-linea='" + id + "']")
if (status === 'closed') {
unidades.show()
row.attr('data-status', 'open')
row.find('.caret.icon').removeClass('right').addClass('down')
return
}
unidades.hide()
row.attr('data-status', 'closed')
row.find('.caret.icon').removeClass('down').addClass('right')
}
}
},
up: event => {
this.draw().proyectos()
},
refresh: event => {
const list = $(this.ids.proyectos)
if (list.is(':hidden')) {
this.get().precios(this.data.id)
} else {
this.draw().proyectos()
}
},
add: () => {
return {
list: event => {
const button = $(event.currentTarget)
const id = button.data('id')
const proyecto = button.data('proyecto')
list_modal.data.title = 'Precios del Proyecto ' + proyecto
list_modal.data.type = 'proyecto'
list_modal.data.id = id
list_modal.actions().open()
},
tipologia: event => {
const button = $(event.currentTarget)
const id = button.data('id')
const tipologia = button.data('tipologia')
list_modal.data.title = 'Precios de Tipología ' + tipologia
list_modal.data.type = 'tipologia'
list_modal.data.id = id
list_modal.actions().open()
},
linea: event => {
const button = $(event.currentTarget)
const id = button.data('id')
list_modal.data.title = 'Precios de la Línea ' + id
list_modal.data.type = 'linea'
list_modal.data.id = id
list_modal.actions().open()
},
unidad: event => {
const button = $(event.currentTarget)
const id = button.data('id')
const tipo = button.data('tipo')
const unidad = button.data('unidad')
list_modal.data.title = 'Precio de ' + tipo + ' ' + unidad
list_modal.data.type = 'unidad'
list_modal.data.id = id
list_modal.actions().open()
}
}
},
}
},
setup: function({list, proyectos, buttons_up, buttons_refresh, buttons_add}) {
this.ids.list = list
this.ids.proyectos = proyectos
this.ids.buttons.up = buttons_up
this.ids.buttons.refresh = buttons_refresh
this.ids.buttons.add = buttons_add
$(this.ids.buttons.up).click(this.actions().up)
$(this.ids.buttons.refresh).click(this.actions().refresh)
$(this.ids.buttons.add).click(this.actions().add().list)
this.draw().proyectos()
}
}
const list_modal = {
ids: {
modal: '',
title: '',
fields: {
type: '',
id: '',
calendar: '',
valor: ''
},
button: ''
},
data: {
title: '',
type: '',
id: 0
},
actions: function() {
return {
reset: () => {
this.data.title = ''
this.data.type = ''
this.data.id = 0
$(this.ids.fields.calendar).calendar('refresh')
$(this.ids.fields.valor).val('')
},
open: event => {
this.draw()
$(this.ids.modal).modal('show')
},
close: event => {
$(this.ids.modal).modal('hide')
this.actions().reset()
},
send: event => {
const data = {
type: $(this.ids.fields.type).val(),
id: $(this.ids.fields.id).val(),
fecha: $(this.ids.fields.calendar).calendar('get date'),
valor: $(this.ids.fields.valor).val()
}
return fetchAPI('{{$urls->api}}/precios/update',
{method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)}
).then(response => {
if (response.ok) {
return response.json()
}
}).then(data => {
precios.get().precios(precios.data.proyecto)
})
}
}
},
draw: function() {
$(this.ids.title).html(this.data.title)
$(this.ids.modal).find("input[name='type']").val(this.data.type)
$(this.ids.modal).find("input[name='id']").val(this.data.id)
},
setup: function({modal, title, fields_type, fields_id, fields_calendar, fields_valor, button}) {
this.ids.modal = modal
this.ids.title = title
this.ids.fields.type = fields_type
this.ids.fields.id = fields_id
this.ids.fields.calendar = fields_calendar
this.ids.fields.valor = fields_valor
this.ids.button = button
$(this.ids.modal).modal('hide')
$(this.ids.modal).find('.icon.button').find('.close.icon').parent().click(this.actions().close)
$(this.ids.fields.calendar).calendar({
type: 'date'
})
$(this.ids.button).click(this.actions().send)
}
}
$(document).ready(() => {
precios.setup({
list: '#list',
proyectos: '#proyectos',
buttons_up: '#up_button',
buttons_refresh: '#refresh_button',
buttons_add: '#add_button'
})
list_modal.setup({
modal: '#list_modal',
title: '#modal_title',
fields_type: "input[name='type']",
fields_id: "input[name='id']",
fields_calendar: '#fecha',
fields_valor: '#valor',
button: '#send'
})
})
</script>
@endpush