1095 lines
46 KiB
PHP
1095 lines
46 KiB
PHP
@extends('layout.base')
|
|
|
|
@section('page_title')
|
|
Cierres - Reservas
|
|
@endsection
|
|
|
|
@section('page_content')
|
|
<div class="ui container">
|
|
<h2 class="ui header">Cierres - Reservas</h2>
|
|
|
|
<div class="ui compact segment" id="projects">
|
|
<div class="ui header">Proyectos</div>
|
|
@if (count($projects) == 0)
|
|
<div class="ui message">
|
|
No hay proyectos en venta.
|
|
</div>
|
|
@else
|
|
<div class="ui link list">
|
|
@foreach ($projects as $project)
|
|
<div class="item link" data-id="{{ $project->id }}">
|
|
{{ $project->descripcion }}
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="ui two column grid">
|
|
<div class="column">
|
|
<h3 class="ui header" id="project"></h3>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui active inline loader" id="loader"></div>
|
|
</div>
|
|
</div>
|
|
<div id="results">
|
|
<div class="ui right aligned top attached basic segment" id="controls">
|
|
<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>
|
|
<button class="ui green icon button" id="add_button">
|
|
<i class="plus icon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="ui top attached tabular menu" id="tabs">
|
|
<div class="yellow active item link" data-tab="pending">Pendientes</div>
|
|
<div class="green item link" data-tab="active">Activas</div>
|
|
<div class="red item link" data-tab="rejected">Rechazadas</div>
|
|
</div>
|
|
<div class="ui bottom attached tab fitted segment active" data-tab="pending">
|
|
<table class="ui yellow striped table" id="pending_reservations">
|
|
<thead>
|
|
<tr>
|
|
<th>Unidades</th>
|
|
<th>Cliente</th>
|
|
<th>Fecha</th>
|
|
<th>Oferta</th>
|
|
<th>¿Valida?</th>
|
|
<th>Operador</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="ui bottom attached tab fitted segment" data-tab="active">
|
|
<table class="ui green striped table" id="active_reservations">
|
|
<thead>
|
|
<tr>
|
|
<th>Unidades</th>
|
|
<th>Cliente</th>
|
|
<th>Fecha</th>
|
|
<th>Oferta</th>
|
|
<th>Operador</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="ui bottom attached tab fitted segment" data-tab="rejected">
|
|
<table class="ui red striped table" id="rejected_reservations">
|
|
<thead>
|
|
<tr>
|
|
<th>Unidades</th>
|
|
<th>Cliente</th>
|
|
<th>Fecha</th>
|
|
<th>Oferta</th>
|
|
<th>Estado</th>
|
|
<th>Operador</th>
|
|
<th>Comentarios</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@include('layout.body.scripts.rut')
|
|
@include('ventas.reservations.modal.common.scripts.promotions')
|
|
@include('ventas.reservations.modal.common.scripts.units')
|
|
@include('ventas.reservations.modal.common.scripts.payments')
|
|
@include('ventas.reservations.modal.common.scripts.modal')
|
|
|
|
@include('ventas.reservations.modal.add')
|
|
@include('ventas.reservations.modal.edit')
|
|
@include('ventas.reservations.modal.comment')
|
|
@endsection
|
|
|
|
@push('page_styles')
|
|
<style>
|
|
.item.link {
|
|
cursor: pointer !important;
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('page_scripts')
|
|
<script>
|
|
class Projects {
|
|
display = {
|
|
projects: '',
|
|
project: ''
|
|
}
|
|
component_id = ''
|
|
component = null
|
|
current_project = null
|
|
title_id = ''
|
|
title_component = null
|
|
|
|
constructor({component_id, title_id}) {
|
|
this.component_id = component_id
|
|
this.component = document.getElementById(this.component_id)
|
|
this.display.projects = this.component.style.display
|
|
this.title_id = title_id
|
|
this.title_component = document.getElementById(this.title_id)
|
|
this.display.project = this.title_component.style.display
|
|
|
|
this.show()
|
|
this.watch()
|
|
}
|
|
|
|
select(event) {
|
|
event.preventDefault()
|
|
|
|
const project_id = event.currentTarget.dataset.id
|
|
reservations.show.results()
|
|
reservations.update.url(project_id)
|
|
|
|
if (project_id === this.current_project) {
|
|
this.hide()
|
|
this.title_component.innerHTML = event.currentTarget.innerHTML
|
|
|
|
reservations.action.reservations()
|
|
|
|
return
|
|
}
|
|
this.current_project = project_id
|
|
|
|
reservations.get.reservations(project_id)
|
|
reservations.components.modals.add.load(project_id)
|
|
reservations.components.modals.edit.load(project_id)
|
|
this.hide()
|
|
|
|
this.title_component.innerHTML = event.currentTarget.innerHTML
|
|
}
|
|
|
|
watch() {
|
|
this.component.querySelectorAll('.item.link').forEach(item => {
|
|
item.addEventListener('click', this.select.bind(this))
|
|
})
|
|
}
|
|
|
|
load(project_id) {
|
|
this.component.querySelector(`.item.link[data-id="${project_id}"]`).click()
|
|
}
|
|
|
|
show() {
|
|
this.component.style.display = this.display.projects
|
|
this.title_component.style.display = 'none'
|
|
}
|
|
|
|
hide() {
|
|
this.component.style.display = 'none'
|
|
this.title_component.style.display = this.display.project
|
|
}
|
|
}
|
|
|
|
class Controls {
|
|
display = {
|
|
up: '',
|
|
reset: '',
|
|
}
|
|
component_id = ''
|
|
component = null
|
|
|
|
buttons = {
|
|
up: null,
|
|
reset: null,
|
|
add: null
|
|
}
|
|
|
|
constructor({component_id}) {
|
|
this.component_id = component_id
|
|
this.component = document.getElementById(this.component_id)
|
|
const buttons = this.component.querySelectorAll('button')
|
|
this.buttons.up = buttons[0]
|
|
this.buttons.reset = buttons[1]
|
|
this.buttons.add = buttons[2]
|
|
this.display.up = buttons[0].style.display
|
|
this.display.reset = buttons[1].style.display
|
|
|
|
this.watch()
|
|
this.hide()
|
|
}
|
|
|
|
watch() {
|
|
Object.entries(this.buttons).forEach(([key, value]) => {
|
|
const name = key.replace('_button', '')
|
|
value.addEventListener('click', this.action[name].bind(this))
|
|
})
|
|
}
|
|
|
|
hide() {
|
|
this.buttons.up.style.display = this.display.up
|
|
this.buttons.reset.style.display = this.display.reset
|
|
}
|
|
|
|
show() {
|
|
this.buttons.up.style.display = 'none'
|
|
this.buttons.reset.style.display = 'none'
|
|
}
|
|
|
|
action = {
|
|
reset: event => {
|
|
event.preventDefault()
|
|
reservations.action.reset(event)
|
|
return false
|
|
},
|
|
up: event => {
|
|
event.preventDefault()
|
|
reservations.action.up(event)
|
|
return false
|
|
},
|
|
add: event => {
|
|
event.preventDefault()
|
|
reservations.action.add(event)
|
|
return false
|
|
}
|
|
}
|
|
}
|
|
|
|
class Reservations {
|
|
display = {
|
|
reservations: '',
|
|
}
|
|
component_id = ''
|
|
component = null
|
|
formatters = {
|
|
date: null,
|
|
ufs: null
|
|
}
|
|
columnNames = []
|
|
reservations = []
|
|
|
|
constructor({component_id, formatters = {date, ufs}}) {
|
|
this.component_id = component_id
|
|
this.component = document.getElementById(this.component_id)
|
|
this.display.reservations = this.component.style.display
|
|
|
|
this.formatters = formatters
|
|
|
|
this.set.columnNames()
|
|
|
|
this.hide()
|
|
}
|
|
|
|
set = {
|
|
reservations: reservations => {
|
|
this.reservations = reservations
|
|
return this
|
|
},
|
|
columnNames: () => {
|
|
const tds = this.component.querySelector('thead tr').querySelectorAll('th')
|
|
this.columnNames = []
|
|
tds.forEach(td => {
|
|
let name = td.innerHTML.toLowerCase()
|
|
if (name === '') {
|
|
return
|
|
}
|
|
if (name.includes('?')) {
|
|
name = name.replaceAll(/[¿?]/g, '')
|
|
}
|
|
this.columnNames.push(name)
|
|
})
|
|
return this
|
|
}
|
|
}
|
|
|
|
get columnsData() {
|
|
const columnValues = {
|
|
id: reservation => reservation.id,
|
|
unidades: reservation => reservation.summary,
|
|
cliente: reservation => reservation.buyer.nombreCompleto,
|
|
fecha: reservation => this.formatters.date.format(new Date(Date.parse(reservation.date) + 24 * 60 * 60 * 1000)),
|
|
oferta: reservation => `${this.formatters.ufs.format(reservation.offer)} UF`,
|
|
valida: reservation => reservation.valid ? '<span class="ui green text">Si</span>' : '<span class="ui red text">No</span>',
|
|
operador: reservation => reservation.broker?.name ?? '',
|
|
}
|
|
const tooltipVariation = 'very wide multiline'
|
|
const tooltips = this.draw().tooltip()
|
|
return this.reservations.map(reservation => {
|
|
const data = {}
|
|
Object.entries(columnValues).forEach(([key, value]) => {
|
|
if (key in tooltips) {
|
|
const processor = tooltips[key]
|
|
const content = processor(reservation)//.replaceAll(' ', ' ')
|
|
data[key] = `data-html="${content}" data-variation="${tooltipVariation}">${value(reservation)}`
|
|
return
|
|
}
|
|
data[key] = value(reservation)
|
|
})
|
|
return data
|
|
})
|
|
}
|
|
|
|
draw() {
|
|
return {
|
|
tbody: () => {
|
|
if (this.reservations.length === 0) {
|
|
this.empty()
|
|
return
|
|
}
|
|
const tbody = this.component.querySelector('tbody')
|
|
tbody.innerHTML = ''
|
|
this.columnsData.forEach(column => {
|
|
const tr = document.createElement('tr')
|
|
const contents = []
|
|
const id = column.id
|
|
this.columnNames.forEach(name => {
|
|
let td = `<td>${column[name]}</td>`
|
|
if (column[name].includes('data-content') || column[name].includes('data-html')) {
|
|
td = `<td ${column[name]}</td>`
|
|
}
|
|
contents.push(td)
|
|
})
|
|
const actions = this.draw().actions(id)
|
|
if (actions !== '') {
|
|
contents.push(actions)
|
|
}
|
|
tr.innerHTML = contents.join("\n")
|
|
tbody.appendChild(tr)
|
|
})
|
|
this.show()
|
|
|
|
$(this.component).find('[data-content],[data-html]').popup()
|
|
|
|
this.watch()
|
|
},
|
|
actions: id => {
|
|
return [
|
|
'<td class="right aligned">',
|
|
this.draw().actionButtons().edit(id),
|
|
this.draw().actionButtons().approve(id),
|
|
this.draw().actionButtons().reject(id),
|
|
'</td>'
|
|
].join("\n")
|
|
},
|
|
actionButtons: () => {
|
|
return {
|
|
edit: id => {
|
|
return [
|
|
`<button class="ui blue mini icon button edit" data-id="${id}" title="Editar">`,
|
|
'<i class="edit icon"></i>',
|
|
'</button>'
|
|
].join("\n")
|
|
},
|
|
approve: id => {
|
|
return [
|
|
`<button class="ui green mini icon button approve" data-id="${id}" title="Aprobar">`,
|
|
'<i class="check icon"></i>',
|
|
'</button>'
|
|
].join("\n")
|
|
},
|
|
reject: id => {
|
|
return [
|
|
`<button class="ui red mini icon button reject" data-id="${id}" title="Rechazar">`,
|
|
'<i class="trash icon"></i>',
|
|
'</button>'
|
|
].join("\n")
|
|
}
|
|
}
|
|
},
|
|
tooltip: () => {
|
|
return {
|
|
oferta: reservation => {
|
|
const formatter = new Intl.NumberFormat('es-CL', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
})
|
|
|
|
const output = []
|
|
const table = ['<table>']
|
|
reservation.units.forEach(unit => {
|
|
const type = unit.unit.proyecto_tipo_unidad.tipo_unidad.descripcion
|
|
table.push(`<tr><td>${type.charAt(0).toUpperCase() + type.slice(1)} ${unit.unit.descripcion}:</td><td align='right'>${formatter.format(unit.value)} UF</td></tr>`)
|
|
})
|
|
if (reservation.broker !== null) {
|
|
table.push('<tr><td>-----</td></tr>')
|
|
let commission = reservation.broker.commission
|
|
table.push(`<tr><td>Broker:</td><td align='right'>${reservation.broker.name}</td><td align='right'>(${commission})</td></tr>`)
|
|
}
|
|
if (reservation.promotions.length > 0) {
|
|
table.push('<tr><td>-----</td></tr>')
|
|
reservation.promotions.forEach(promotion => {
|
|
let value = 0
|
|
switch (promotion.type) {
|
|
case {{ \Incoviba\Model\Venta\Promotion\Type::FIXED }}:
|
|
value = `${formatter.format(promotion.amount)} UF`
|
|
break
|
|
case {{ \Incoviba\Model\Venta\Promotion\Type::VARIABLE }}:
|
|
value = `${formatter.format(promotion.amount * 100)} %`
|
|
break
|
|
}
|
|
table.push(`<tr><td>${promotion.description}:</td><td align='right'>${value}</td></tr>`)
|
|
})
|
|
}
|
|
table.push('</table>')
|
|
output.push(table.join(''))
|
|
return output.join("<br />")
|
|
},
|
|
cliente: reservation => {
|
|
const formatter = new Intl.NumberFormat('es-CL', {
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0
|
|
})
|
|
return [
|
|
`RUT: ${formatter.format(reservation.buyer.rut)}-${reservation.buyer.digito}`
|
|
].join("<br />")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
watch() {
|
|
if (Object.keys(this.actions).length === 0) {
|
|
return
|
|
}
|
|
const actionNames = Object.keys(this.actions)
|
|
const tbody = this.component.querySelector('tbody')
|
|
const trs = tbody.querySelectorAll('tr')
|
|
trs.forEach(tr => {
|
|
actionNames.forEach(actionName => {
|
|
const button = tr.querySelector(`button.${actionName}`)
|
|
if (!button) {
|
|
return
|
|
}
|
|
button.addEventListener('click', this.actions[actionName].bind(this))
|
|
})
|
|
})
|
|
}
|
|
|
|
empty() {
|
|
const tbody = this.component.querySelector('tbody')
|
|
tbody.innerHTML = ''
|
|
const col_span = this.columnNames.length + 1
|
|
const tr = document.createElement('tr')
|
|
tr.innerHTML = `<td colspan="${col_span}">No hay cierres</td>`
|
|
tbody.appendChild(tr)
|
|
|
|
this.show()
|
|
}
|
|
|
|
show() {
|
|
this.component.style.display = this.display.reservations
|
|
}
|
|
|
|
hide() {
|
|
this.component.style.display = 'none'
|
|
}
|
|
|
|
find(id) {
|
|
return this.reservations.find(reservation => reservation.id === parseInt(id))
|
|
}
|
|
|
|
send = {
|
|
get(url) {
|
|
return APIClient.fetch(url).then(response => response.json()).then(json => {
|
|
if (json.success) {
|
|
window.location.reload()
|
|
}
|
|
})
|
|
},
|
|
post(url, body) {
|
|
const method = 'post'
|
|
return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
|
|
if (json.success) {
|
|
window.location.reload()
|
|
}
|
|
})
|
|
},
|
|
}
|
|
actions = {}
|
|
}
|
|
|
|
class ActiveReservations extends Reservations {
|
|
constructor({component_id, formatters = {date, ufs}}) {
|
|
super({component_id, formatters})
|
|
}
|
|
|
|
get columnsData() {
|
|
const data = super.columnsData
|
|
return data.map(row => {
|
|
delete (row['valida'])
|
|
return row
|
|
})
|
|
}
|
|
|
|
draw() {
|
|
const draw = super.draw()
|
|
const actionButtons = draw.actionButtons()
|
|
draw.actionButtons = () => {
|
|
actionButtons['promise'] = id => {
|
|
return [
|
|
`<button class="ui green mini icon button promise" data-id="${id}" title="Promesar">`,
|
|
'<i class="right chevron icon"></i>',
|
|
'</button>'
|
|
].join("\n")
|
|
}
|
|
actionButtons['remove'] = id => {
|
|
return [
|
|
`<button class="ui red mini icon button remove" data-id="${id}" title="Abandonar">`,
|
|
'<i class="trash icon"></i>',
|
|
'</button>'
|
|
].join("\n")
|
|
}
|
|
return actionButtons
|
|
}
|
|
draw.actions = (id) => {
|
|
return [
|
|
'<td class="right aligned">',
|
|
this.draw().actionButtons().edit(id),
|
|
this.draw().actionButtons().promise(id),
|
|
this.draw().actionButtons().remove(id),
|
|
'</td>'
|
|
].join("\n")
|
|
}
|
|
return draw
|
|
}
|
|
|
|
actions = {
|
|
edit: event => {
|
|
event.preventDefault()
|
|
const id = event.currentTarget.dataset.id
|
|
reservations.components.modals.edit.show({type: 'active', reservation_id: id})
|
|
return false
|
|
},
|
|
promise: event => {
|
|
event.preventDefault()
|
|
const reservationId = event.currentTarget.dataset.id
|
|
const reservation = this.find(reservationId)
|
|
|
|
// Create a form to submit the data via POST
|
|
const form = document.createElement('form')
|
|
form.method = 'POST'
|
|
form.action = '{{ $urls->base }}/ventas/add'
|
|
|
|
// Add CSRF token
|
|
const csrfToken = Math.random().toString(36).substring(2)
|
|
const csrfInput = document.createElement('input')
|
|
csrfInput.type = 'hidden'
|
|
csrfInput.name = '_token'
|
|
csrfInput.value = csrfToken
|
|
form.appendChild(csrfInput)
|
|
|
|
// Add reservation data
|
|
const addInput = (name, value) => {
|
|
if (value) {
|
|
const input = document.createElement('input')
|
|
input.type = 'hidden'
|
|
input.name = name
|
|
input.value = value
|
|
form.appendChild(input)
|
|
}
|
|
}
|
|
|
|
addInput('from_reservation', 'true')
|
|
addInput('reservation_id', reservationId)
|
|
|
|
if (reservation.cliente) {
|
|
addInput('cliente_nombre', reservation.cliente.nombre)
|
|
addInput('cliente_rut', reservation.cliente.rut)
|
|
addInput('cliente_email', reservation.cliente.email)
|
|
addInput('cliente_telefono', reservation.cliente.telefono)
|
|
}
|
|
|
|
if (reservation.propiedad) {
|
|
addInput('proyecto_id', reservation.propiedad.proyecto_id)
|
|
// Add other property-related parameters as needed
|
|
}
|
|
|
|
if (reservation.oferta) {
|
|
addInput('valor', reservation.oferta.valor)
|
|
// Add other offer-related parameters as needed
|
|
}
|
|
|
|
// Submit the form
|
|
document.body.appendChild(form)
|
|
form.submit()
|
|
return false
|
|
},
|
|
remove: event => {
|
|
event.preventDefault()
|
|
const reservation_id = event.currentTarget.dataset.id
|
|
const url = `{{ $urls->api }}/ventas/reservation/${reservation_id}/remove`
|
|
const method = 'delete'
|
|
const action = 'Cancelar'
|
|
const reservation_data = this.find(reservation_id)
|
|
reservations.components.modals.comment.show({reservation_id, action, url, method, reservation_data})
|
|
return false
|
|
}
|
|
}
|
|
}
|
|
|
|
class PendingReservations extends Reservations {
|
|
constructor({component_id, formatters = {date, ufs}}) {
|
|
super({component_id, formatters})
|
|
}
|
|
|
|
draw() {
|
|
const draw = super.draw()
|
|
const tooltip = draw.tooltip()
|
|
tooltip['valida'] = reservation => {
|
|
const formatter = new Intl.NumberFormat('es-CL', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
})
|
|
|
|
const output = []
|
|
const table = [
|
|
'<table>',
|
|
'<thead>',
|
|
'<tr>',
|
|
'<th></th>',
|
|
'<th>Base Oferta</th>',
|
|
'<th>Precio</th>',
|
|
'</thead>'
|
|
]
|
|
const rowAlters = [
|
|
'',
|
|
" align='right'",
|
|
" align='right'",
|
|
" align='right'"
|
|
]
|
|
reservation.units.forEach(unit => {
|
|
let type = unit.unit.proyecto_tipo_unidad.tipo_unidad.descripcion
|
|
type = type.charAt(0).toUpperCase() + type.slice(1)
|
|
const base = unit.base ?? (unit.value ?? 0)
|
|
const price = unit.unit.current_precio?.valor ?? 0
|
|
const diff = (base - price) / price * 100
|
|
const rowsData = [
|
|
[
|
|
`${type} ${unit.unit.descripcion}`,
|
|
`${formatter.format(base)} UF`,
|
|
`${formatter.format(price)} UF`,
|
|
`(${formatter.format(diff)} %)`
|
|
]
|
|
]
|
|
const rowContent = []
|
|
rowsData.forEach(row => {
|
|
const content = []
|
|
row.forEach((cell, idx) => {
|
|
content.push(`<td${rowAlters[idx]}>${cell}</td>`)
|
|
})
|
|
rowContent.push(`<tr>${content.join('')}</tr>`)
|
|
})
|
|
table.push(rowContent.join(''))
|
|
})
|
|
if (reservation.broker !== null) {
|
|
table.push('<tr><td>-----</td></tr>')
|
|
let commission = reservation.broker.commission
|
|
table.push(`<tr><td>Broker:</td><td align='right'>${reservation.broker.name}</td><td align='right'>(${commission})</td></tr>`)
|
|
}
|
|
reservation.promotions.forEach(promotion => {
|
|
let value = 0
|
|
switch (promotion.type) {
|
|
case {{ \Incoviba\Model\Venta\Promotion\Type::FIXED }}:
|
|
value = `${formatter.format(promotion.amount)} UF`
|
|
break
|
|
case {{ \Incoviba\Model\Venta\Promotion\Type::VARIABLE }}:
|
|
value = `${formatter.format(promotion.amount * 100)} %`
|
|
break
|
|
}
|
|
table.push(`<tr><td>${promotion.description}:</td><td align='right'>${value}</td></tr>`)
|
|
})
|
|
table.push('</table>')
|
|
output.push(table.join(''))
|
|
return output.join("<br />")
|
|
}
|
|
draw['tooltip'] = () => {
|
|
return tooltip
|
|
}
|
|
return draw
|
|
}
|
|
|
|
actions = {
|
|
edit: event => {
|
|
event.preventDefault()
|
|
const id = event.currentTarget.dataset.id
|
|
reservations.components.modals.edit.show({type: 'pending', reservation_id: id})
|
|
return false
|
|
},
|
|
approve: event => {
|
|
event.preventDefault()
|
|
const id = event.currentTarget.dataset.id
|
|
const url = `{{ $urls->api }}/ventas/reservation/${id}/approve`
|
|
this.send.get(url)
|
|
return false
|
|
},
|
|
reject: event => {
|
|
event.preventDefault()
|
|
const reservation_id = event.currentTarget.dataset.id
|
|
const url = `{{ $urls->api }}/ventas/reservation/${reservation_id}/reject`
|
|
const method = 'delete'
|
|
const action = 'Rechazar'
|
|
const reservation_data = this.find(reservation_id)
|
|
reservations.components.modals.comment.show({reservation_id, action, url, method, reservation_data})
|
|
return false
|
|
}
|
|
}
|
|
}
|
|
|
|
class RejectedReservations extends Reservations {
|
|
constructor({component_id, formatters = {date, ufs}}) {
|
|
super({component_id, formatters})
|
|
}
|
|
|
|
get columnsData() {
|
|
const data = super.columnsData
|
|
return this.reservations.map((reservation, idx) => {
|
|
data[idx]['estado'] = this.mapState(reservation.current_state)
|
|
data[idx]['comentarios'] = reservation.comments ?? ''
|
|
return data[idx]
|
|
})
|
|
}
|
|
|
|
draw() {
|
|
const draw = super.draw()
|
|
draw.actions = (id) => {
|
|
return ''
|
|
}
|
|
return draw
|
|
}
|
|
|
|
watch() {
|
|
}
|
|
|
|
mapState(state) {
|
|
return {
|
|
'canceled': 'Cancelado',
|
|
'rejected': 'Rechazado'
|
|
}[state.toLowerCase()]
|
|
}
|
|
}
|
|
|
|
const reservations = {
|
|
components: {
|
|
projects: null,
|
|
loader: null,
|
|
results: null,
|
|
controls: null,
|
|
reservations: {
|
|
active: null,
|
|
pending: null,
|
|
rejected: null
|
|
},
|
|
modals: {
|
|
add: null,
|
|
comment: null,
|
|
}
|
|
},
|
|
display: {
|
|
loader: '',
|
|
results: '',
|
|
},
|
|
data: {
|
|
comunas: {},
|
|
brokers: {},
|
|
promotions: {},
|
|
units: {}
|
|
},
|
|
locks: {
|
|
comunas: null,
|
|
brokers: null,
|
|
promotions: null,
|
|
units: null
|
|
},
|
|
get: {
|
|
send: (project_id, url_segment, component) => {
|
|
const url = `/api/ventas/reservations/project/${project_id}/${url_segment}`
|
|
return APIClient.fetch(url).then(response => response.json()).then(json => {
|
|
if (json.reservations.length > 0) {
|
|
component.set.reservations(json.reservations)
|
|
}
|
|
component.draw().tbody()
|
|
})
|
|
},
|
|
active: project_id => {
|
|
return reservations.get.send(project_id, 'active', reservations.components.reservations.active)
|
|
},
|
|
pending: project_id => {
|
|
return reservations.get.send(project_id, 'pending', reservations.components.reservations.pending)
|
|
},
|
|
rejected: project_id => {
|
|
return reservations.get.send(project_id, 'rejected', reservations.components.reservations.rejected)
|
|
},
|
|
reservations: project_id => {
|
|
reservations.loading.show()
|
|
|
|
const promises = []
|
|
|
|
promises.push(reservations.get.active(project_id))
|
|
promises.push(reservations.get.pending(project_id))
|
|
promises.push(reservations.get.rejected(project_id))
|
|
|
|
return Promise.any(promises).then(() => {
|
|
reservations.loading.hide()
|
|
})
|
|
},
|
|
pathname: project_id => {
|
|
const current_url = new URL(window.location.href)
|
|
if (project_id === null) {
|
|
if (current_url.pathname.includes('project')) {
|
|
return current_url.pathname.replace(/\/project\/\d+/, '')
|
|
}
|
|
return current_url.pathname
|
|
}
|
|
if (current_url.pathname.includes('project')) {
|
|
return current_url.pathname.replace(/project\/\d+/, `project/${project_id}`)
|
|
}
|
|
return `${current_url.pathname}/project/${project_id}`
|
|
},
|
|
comunas: region_id => {
|
|
if (region_id in reservations.data.comunas) {
|
|
reservations.locks.comunas = null
|
|
return new Promise(resolve => {
|
|
resolve(reservations.data.comunas[region_id])
|
|
})
|
|
}
|
|
if (reservations.locks.comunas !== null) {
|
|
return reservations.locks.comunas
|
|
}
|
|
const uri = `/api/region/${region_id}/comunas`
|
|
reservations.locks.comunas = APIClient.fetch(uri).then(response => response.json()).then(json => {
|
|
if (json.comunas.length === 0) {
|
|
return
|
|
}
|
|
reservations.data.comunas[region_id] = json.comunas.map(comuna => {
|
|
return {
|
|
text: comuna.descripcion,
|
|
name: comuna.descripcion,
|
|
value: comuna.id
|
|
}
|
|
})
|
|
return reservations.data.comunas[region_id]
|
|
})
|
|
return reservations.locks.comunas
|
|
},
|
|
brokers: project_id => {
|
|
if (project_id in reservations.data.brokers) {
|
|
reservations.locks.brokers = null
|
|
return new Promise((resolve, reject) => {
|
|
resolve(reservations.data.brokers[project_id])
|
|
})
|
|
}
|
|
if (reservations.locks.brokers !== null) {
|
|
return reservations.locks.brokers
|
|
}
|
|
const uri = `/api/proyecto/${project_id}/brokers`
|
|
reservations.locks.brokers = APIClient.fetch(uri).then(response => response.json()).then(json => {
|
|
if (json.contracts.length === 0) {
|
|
return
|
|
}
|
|
const formatter = new Intl.NumberFormat('es-CL', { style: 'percent', minimumFractionDigits: 2 })
|
|
reservations.data.brokers[project_id] = json.contracts.map(contract => {
|
|
return {
|
|
id: contract.id,
|
|
broker_rut: contract.broker_rut,
|
|
commission: formatter.format(contract.commission),
|
|
name: '',
|
|
text: '',
|
|
value: contract.broker_rut
|
|
}
|
|
})
|
|
const promises = []
|
|
json.contracts.forEach(contract => {
|
|
promises.push(reservations.get.broker(contract.broker_rut))
|
|
})
|
|
|
|
return Promise.all(promises).then(data => {
|
|
data.forEach(broker => {
|
|
if (!('rut' in broker)) {
|
|
return
|
|
}
|
|
const idx = reservations.data.brokers[project_id].findIndex(contract => contract.broker_rut === broker.rut)
|
|
const text = reservations.data.brokers[project_id][idx].text = `${broker.name} - ${reservations.data.brokers[project_id][idx].commission}`
|
|
reservations.data.brokers[project_id][idx].name = text
|
|
reservations.data.brokers[project_id][idx].text = text
|
|
})
|
|
})
|
|
})
|
|
return reservations.locks.brokers
|
|
},
|
|
broker: (broker_rut) => {
|
|
const uri = `/api/proyectos/broker/${broker_rut}`
|
|
return APIClient.fetch(uri).then(response => response.json()).then(json => {
|
|
if (!('broker' in json)) {
|
|
return []
|
|
}
|
|
return json.broker
|
|
})
|
|
},
|
|
promotions: project_id => {
|
|
if (project_id in reservations.data.promotions) {
|
|
reservations.locks.promotions = null
|
|
return new Promise((resolve, reject) => {
|
|
resolve(this.data.promotions[project_id])
|
|
})
|
|
}
|
|
if (reservations.locks.promotions !== null) {
|
|
return reservations.locks.promotions
|
|
}
|
|
const uri = `/api/proyecto/${project_id}/promotions`
|
|
reservations.locks.promotions = APIClient.fetch(uri).then(response => response.json()).then(json => {
|
|
if (json.promotions.length === 0) {
|
|
return reservations.data.promotions[project_id] = []
|
|
}
|
|
return reservations.data.promotions[project_id] = json.promotions
|
|
})
|
|
return reservations.locks.promotions
|
|
},
|
|
units: project_id => {
|
|
if (project_id in reservations.data.units) {
|
|
reservations.locks.units = null
|
|
return new Promise((resolve, reject) => {
|
|
resolve(reservations.data.units[project_id])
|
|
})
|
|
}
|
|
if (reservations.locks.units !== null) {
|
|
return reservations.locks.units
|
|
}
|
|
const uri = `/api/proyecto/${project_id}/unidades/disponibles`
|
|
reservations.locks.units = APIClient.fetch(uri).then(response => response.json()).then(json => {
|
|
if (json.unidades.length === 0) {
|
|
reservations.data.units[project_id] = {}
|
|
return reservations.data.units[project_id]
|
|
}
|
|
if (!(project_id in reservations.data.units)) {
|
|
reservations.data.units[project_id] = {}
|
|
}
|
|
json.unidades.forEach(unit => {
|
|
const type = unit.proyecto_tipo_unidad.tipo_unidad.descripcion
|
|
if (!(type in reservations.data.units[project_id])) {
|
|
reservations.data.units[project_id][type] = []
|
|
}
|
|
reservations.data.units[project_id][type].push(unit)
|
|
})
|
|
|
|
return reservations.data.units[project_id]
|
|
})
|
|
return reservations.locks.units
|
|
},
|
|
},
|
|
loading: {
|
|
show: () => {
|
|
reservations.components.loader.style.display = reservations.display.loader
|
|
},
|
|
hide: () => {
|
|
reservations.components.loader.style.display = 'none'
|
|
}
|
|
},
|
|
update: {
|
|
url: project_id => {
|
|
window.history.pushState(null, '', reservations.get.pathname(project_id))
|
|
}
|
|
},
|
|
action: {
|
|
reset: event => {
|
|
event.preventDefault()
|
|
reservations.components.projects.current_project = null
|
|
Object.entries(reservations.components.reservations).forEach(([key, value]) => {
|
|
reservations.components.reservations[key].reservations = []
|
|
reservations.components.reservations[key].hide()
|
|
})
|
|
reservations.show.projects()
|
|
reservations.update.url(null)
|
|
return false
|
|
},
|
|
up: event => {
|
|
event.preventDefault()
|
|
Object.values(reservations.components.reservations).forEach(reservations => reservations.hide())
|
|
reservations.show.projects()
|
|
reservations.update.url(null)
|
|
return false
|
|
},
|
|
add: event => {
|
|
event.preventDefault()
|
|
reservations.components.modals.add.show()
|
|
return false
|
|
},
|
|
reservations: () => {
|
|
Object.values(reservations.components.reservations).forEach(reservations => {
|
|
reservations.draw()
|
|
})
|
|
}
|
|
},
|
|
show: {
|
|
projects: () => {
|
|
reservations.components.projects.show()
|
|
reservations.components.results.style.display = 'none'
|
|
},
|
|
results: () => {
|
|
reservations.components.projects.hide()
|
|
reservations.components.results.style.display = reservations.display.results
|
|
Object.values(reservations.components.reservations).forEach(reservations => reservations.draw())
|
|
}
|
|
},
|
|
setup(configuration) {
|
|
const formatters = {
|
|
date: new Intl.DateTimeFormat('es-CL', {year: 'numeric', month: 'long', day: 'numeric'}),
|
|
ufs: new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
|
|
}
|
|
this.components.loader = document.getElementById(configuration.ids.loader)
|
|
this.components.projects = new Projects({
|
|
component_id: configuration.ids.projects,
|
|
title_id: configuration.ids.project
|
|
})
|
|
this.components.controls = new Controls({component_id: configuration.ids.controls})
|
|
this.components.reservations.active = new ActiveReservations({
|
|
component_id: configuration.ids.active,
|
|
formatters
|
|
})
|
|
this.components.reservations.pending = new PendingReservations({
|
|
component_id: configuration.ids.pending,
|
|
formatters
|
|
})
|
|
this.components.reservations.rejected = new RejectedReservations({
|
|
component_id: configuration.ids.rejected,
|
|
formatters
|
|
})
|
|
|
|
this.display.loader = this.components.loader.style.display
|
|
this.loading.hide()
|
|
|
|
$(`#${configuration.ids.tabs} .item`).tab()
|
|
this.components.results = document.getElementById(configuration.ids.results)
|
|
this.display.results = this.components.results.style.display
|
|
this.show.projects()
|
|
|
|
this.components.modals.add = new AddReservationModal(configuration.ids.projects)
|
|
this.components.modals.edit = new EditReservationModal(configuration.ids.projects)
|
|
this.components.modals.comment = new CommentModal()
|
|
|
|
const project_id = {{ $project_id ?? 'null' }};
|
|
if (project_id !== null) {
|
|
reservations.components.projects.load(project_id)
|
|
}
|
|
}
|
|
}
|
|
|
|
$(document).ready(() => {
|
|
reservations.setup({
|
|
ids: {
|
|
projects: 'projects',
|
|
project: 'project',
|
|
results: 'results',
|
|
loader: 'loader',
|
|
controls: 'controls',
|
|
tabs: 'tabs',
|
|
active: 'active_reservations',
|
|
pending: 'pending_reservations',
|
|
rejected: 'rejected_reservations',
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
@endpush
|