Common components
This commit is contained in:
Juan Pablo Vial
@ -5,6 +5,6 @@
|
||||
@else
|
||||
<title>Incoviba</title>
|
||||
@endif
|
||||
<link rel="icon" href="{{$urls->images}}/Isotipo 16.png" />
|
||||
<link rel="icon" href="{{ $urls->images }}/Isotipo 16.png" />
|
||||
@include('layout.head.styles')
|
||||
</head>
|
||||
|
||||
@ -101,6 +101,12 @@
|
||||
</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')
|
||||
@ -295,6 +301,7 @@
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
get columnsData() {
|
||||
const columnValues = {
|
||||
id: reservation => reservation.id,
|
||||
@ -321,6 +328,7 @@
|
||||
return data
|
||||
})
|
||||
}
|
||||
|
||||
draw() {
|
||||
return {
|
||||
tbody: () => {
|
||||
@ -355,20 +363,46 @@
|
||||
this.watch()
|
||||
},
|
||||
actions: id => {
|
||||
return `
|
||||
<td class="right aligned">
|
||||
<button class="ui green mini icon button approve" data-id="${id}" title="Aprobar">
|
||||
<i class="check icon"></i>
|
||||
</button>
|
||||
<button class="ui red mini icon button reject" data-id="${id}" title="Rechazar">
|
||||
<i class="trash icon"></i>
|
||||
</button>
|
||||
</td>`
|
||||
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 formatter = new Intl.NumberFormat('es-CL', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
})
|
||||
|
||||
const output = []
|
||||
const table = ['<table>']
|
||||
@ -401,7 +435,10 @@
|
||||
return output.join("<br />")
|
||||
},
|
||||
cliente: reservation => {
|
||||
const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 0, maximumFractionDigits: 0})
|
||||
const formatter = new Intl.NumberFormat('es-CL', {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0
|
||||
})
|
||||
return [
|
||||
`RUT: ${formatter.format(reservation.buyer.rut)}-${reservation.buyer.digito}`
|
||||
].join("<br />")
|
||||
@ -410,6 +447,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch() {
|
||||
if (Object.keys(this.actions).length === 0) {
|
||||
return
|
||||
@ -427,6 +465,7 @@
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
empty() {
|
||||
const tbody = this.component.querySelector('tbody')
|
||||
tbody.innerHTML = ''
|
||||
@ -437,15 +476,19 @@
|
||||
|
||||
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 => {
|
||||
@ -474,30 +517,49 @@
|
||||
get columnsData() {
|
||||
const data = super.columnsData;
|
||||
return data.map(row => {
|
||||
delete(row['valida'])
|
||||
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">
|
||||
<button class="ui green mini icon button edit" data-id="${id}" title="Promesar">
|
||||
<i class="right chevron icon"></i>
|
||||
</button>
|
||||
<button class="ui red mini icon button remove" data-id="${id}" title="Abandonar">
|
||||
<i class="trash icon"></i>
|
||||
</button>
|
||||
</td>`
|
||||
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.load(id)
|
||||
const project_id = {{ $project_id ?? 'null' }};
|
||||
reservations.components.modals.edit.load({project_id, type: 'active', reservation_id: id})
|
||||
return false
|
||||
},
|
||||
remove: event => {
|
||||
@ -522,7 +584,10 @@
|
||||
const draw = super.draw()
|
||||
const tooltip = draw.tooltip()
|
||||
tooltip['valida'] = reservation => {
|
||||
const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
|
||||
const formatter = new Intl.NumberFormat('es-CL', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
})
|
||||
|
||||
const output = []
|
||||
const table = [
|
||||
@ -590,7 +655,15 @@
|
||||
}
|
||||
return draw
|
||||
}
|
||||
|
||||
actions = {
|
||||
edit: event => {
|
||||
event.preventDefault()
|
||||
const id = event.currentTarget.dataset.id
|
||||
const project_id = {{ $project_id ?? 'null' }};
|
||||
reservations.components.modals.edit.load({project_id, type: 'pending', reservation_id: id})
|
||||
return false
|
||||
},
|
||||
approve: event => {
|
||||
event.preventDefault()
|
||||
const id = event.currentTarget.dataset.id
|
||||
@ -624,6 +697,7 @@
|
||||
return data[idx]
|
||||
})
|
||||
}
|
||||
|
||||
draw() {
|
||||
const draw = super.draw()
|
||||
draw.actions = (id) => {
|
||||
@ -631,7 +705,9 @@
|
||||
}
|
||||
return draw
|
||||
}
|
||||
watch() {}
|
||||
|
||||
watch() {
|
||||
}
|
||||
|
||||
mapState(state) {
|
||||
return {
|
||||
@ -794,7 +870,7 @@
|
||||
this.show.projects()
|
||||
|
||||
this.components.modals.add = new AddReservationModal(configuration.ids.projects)
|
||||
this.components.modals.edit = new EditReservationModal()
|
||||
this.components.modals.edit = new EditReservationModal(configuration.ids.projects)
|
||||
this.components.modals.comment = new CommentModal()
|
||||
|
||||
const project_id = {{ $project_id ?? 'null' }};
|
||||
|
||||
@ -1,534 +1,87 @@
|
||||
<div class="ui modal" id="add_reservation_modal">
|
||||
<div class="header">
|
||||
Agregar Cierre
|
||||
</div>
|
||||
<div class="content">
|
||||
<form class="ui form" id="add_reservation_form">
|
||||
<input type="hidden" name="add_project_id" />
|
||||
<div class="three wide required field">
|
||||
<label>Fecha</label>
|
||||
<div class="ui calendar" id="add_date">
|
||||
<div class="ui icon input">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text" name="add_date" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="three wide required field">
|
||||
<label>RUT</label>
|
||||
<div class="ui right labeled input" id="add_rut">
|
||||
<input type="text" name="add_buyer_rut" placeholder="RUT" />
|
||||
<div class="ui basic label">-<span id="add_digit"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<div class="ui inline loader" id="add_rut_loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="three wide required field">
|
||||
<label>Nombre</label>
|
||||
<input type="text" name="add_buyer_name" placeholder="Nombre" />
|
||||
</div>
|
||||
<div class="six wide required field">
|
||||
<label>Apellidos</label>
|
||||
<input type="text" name="add_buyer_last_name" placeholder="Apellido Paterno" />
|
||||
</div>
|
||||
<div class="six wide field">
|
||||
<label></label>
|
||||
<input type="text" name="add_buyer_last_name2" placeholder="Apellido Materno" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="three wide field">
|
||||
<label>Dirección</label>
|
||||
<input type="text" name="add_buyer_address_street" placeholder="Calle" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<input type="text" name="add_buyer_address_number" placeholder="N°" />
|
||||
</div>
|
||||
<div class="three wide field">
|
||||
<label></label>
|
||||
<input type="text" name="add_buyer_address_extra" placeholder="Otros Detalles" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="three wide field">
|
||||
<label>Comuna</label>
|
||||
<div class="ui search selection dropdown" id="add_comuna">
|
||||
<input type="hidden" name="comuna" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Comuna</div>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seven wide field">
|
||||
<label>Región</label>
|
||||
<div class="ui search selection dropdown" id="add_region">
|
||||
<input type="hidden" name="region" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Región</div>
|
||||
<div class="menu">
|
||||
@foreach($regions as $region)
|
||||
<div class="item" data-value="{{$region->id}}">{{$region->numeral}} - {{$region->descripcion}}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label>Telefono</label>
|
||||
<input type="text" name="add_buyer_phone" placeholder="Telefono" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Correo</label>
|
||||
<div class="ui labeled input">
|
||||
<input type="text" name="add_buyer_email_name" placeholder="Correo" />
|
||||
<div class="ui basic label">@</div>
|
||||
<input type="text" name="add_buyer_email_domain" placeholder="Dominio" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label>Estado Civil</label>
|
||||
<input type="text" name="add_buyer_marital_status" placeholder="Estado Civil" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Profesión</label>
|
||||
<input type="text" name="add_buyer_profession" placeholder="Profesión" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Fecha de Nacimiento</label>
|
||||
<div class="ui calendar" id="add_birthdate">
|
||||
<div class="ui icon input">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text" name="birthdate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six wide field">
|
||||
<label>Operador *</label>
|
||||
<div class="ui clearable search selection dropdown" id="add_broker">
|
||||
<input type="hidden" name="add_broker" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Operador</div>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Agregar Promoción</label>
|
||||
<button type="button" class="ui icon button" id="add_promotion">
|
||||
<i class="plus icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="add_promotions"></div>
|
||||
<h4 class="ui dividing header">Unidades <span id="add_project_name"></span></h4>
|
||||
<div class="fields" id="add_unit_buttons"></div>
|
||||
<div id="add_units"></div>
|
||||
<h4 class="ui dividing header">Forma de Pago</h4>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="has_pie" id="add_has_pie" />
|
||||
<label>¿Tiene Pie?</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" id="add_pie">
|
||||
<label>Pie</label>
|
||||
<div class="ui right labeled input">
|
||||
<input type="text" name="pie" />
|
||||
<div class="ui basic label">UF</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" id="add_cuotas">
|
||||
<label>Cuotas</label>
|
||||
<input type="text" name="cuotas" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="has_credit" id="add_has_credit" />
|
||||
<label>¿Tiene Crédito?</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" id="add_credit">
|
||||
<label>Crédito</label>
|
||||
<div class="ui right labeled input">
|
||||
<input type="text" name="credit" />
|
||||
<div class="ui basic label">UF</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui cancel button">
|
||||
Cancelar
|
||||
</div>
|
||||
<div class="ui green ok button">
|
||||
Agregar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('layout.body.scripts.rut')
|
||||
@include('ventas.reservations.modal.common.modal', ['prefix' => 'add', 'modalTitle' => 'Agregar Cierre', 'okText' => 'Agregar'])
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class AddModalPromotions {
|
||||
ids = {
|
||||
button: '',
|
||||
elements: ''
|
||||
class AddModalPromotions extends ModalPromotions {
|
||||
constructor() {
|
||||
super('add')
|
||||
}
|
||||
data = {
|
||||
promotions: [],
|
||||
selected: []
|
||||
}
|
||||
class AddModalUnits extends ModalUnits {
|
||||
constructor() {
|
||||
super({prefix: 'add', parent: null});
|
||||
}
|
||||
components = {
|
||||
button: null,
|
||||
promotions: null,
|
||||
}
|
||||
display = {
|
||||
button: ''
|
||||
}
|
||||
class AddModalPayments extends ModalPayments {
|
||||
constructor() {
|
||||
super('add');
|
||||
}
|
||||
|
||||
constructor() {
|
||||
this.ids = {
|
||||
button: 'add_promotion',
|
||||
elements: 'add_promotions'
|
||||
}
|
||||
this.setup()
|
||||
}
|
||||
class AddReservationModal extends ReservationModal {
|
||||
constructor(projects_id) {
|
||||
super({projects_id, prefix: 'add', components: {
|
||||
promotions: new AddModalPromotions(),
|
||||
units: new AddModalUnits(),
|
||||
payments: new AddModalPayments()
|
||||
}});
|
||||
}
|
||||
|
||||
add() {
|
||||
const idx = Math.max(this.data.selected.length, 0, Math.max(...this.data.selected) + 1)
|
||||
this.data.selected.push(idx)
|
||||
this.draw.promotions()
|
||||
}
|
||||
reset() {
|
||||
this.data.selected = []
|
||||
this.draw.promotions()
|
||||
}
|
||||
remove(idx) {
|
||||
this.data.selected = this.data.selected.filter(promotion => promotion !== idx)
|
||||
this.draw.promotions()
|
||||
}
|
||||
draw = {
|
||||
promotion: idx => {
|
||||
const promotions = this.data.promotions.map(promotion => {
|
||||
return `<div class="item" data-value="${promotion.value}">${promotion.name}</div>`
|
||||
})
|
||||
return [
|
||||
`<div class="fields promotion" data-id="${idx}">`,
|
||||
'<div class="three wide field">',
|
||||
'<label>Promoción</label>',
|
||||
`<div class="ui search selection dropdown">`,
|
||||
'<input type="hidden" name="add_promotions[]" />',
|
||||
'<i class="dropdown icon"></i>',
|
||||
'<div class="default text">Promoción</div>',
|
||||
`<div class="menu">${promotions.join('')}</div>`,
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="two wide field">',
|
||||
'<label></label>',
|
||||
`<button class="ui red tiny icon button remove_promotion" type="button" data-id="${idx}"><i class="trash icon"></i></button>`,
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
},
|
||||
promotions: () => {
|
||||
if (this.data.promotions.length === 0) {
|
||||
this.components.button.parentElement.style.display = 'none'
|
||||
this.components.promotions.innerHTML = ''
|
||||
return
|
||||
}
|
||||
this.components.button.parentElement.style.display = this.display.button
|
||||
if (this.data.selected.length === 0) {
|
||||
return
|
||||
}
|
||||
this.components.promotions.innerHTML = this.data.selected.map(idx => {
|
||||
return this.draw.promotion(idx)
|
||||
}).join('')
|
||||
this.components.promotions.querySelectorAll('.dropdown').forEach(dropdown => {
|
||||
$(dropdown).dropdown()
|
||||
})
|
||||
this.components.promotions.querySelectorAll('.remove_promotion').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const idx = Number(button.dataset.id)
|
||||
this.remove(idx)
|
||||
})
|
||||
})
|
||||
const url = '/api/ventas/reservation/add'
|
||||
const form = document.getElementById(this.ids.form)
|
||||
const body = new FormData(form)
|
||||
const date = this.components.$date.calendar('get date')
|
||||
body.set(`${this.prefix}_date`, [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'))
|
||||
body.set(`${this.prefix}_buyer_rut`, Rut.clean(this.components.rut.querySelector('input').value))
|
||||
body.set(`${this.prefix}_buyer_digit`, this.components.digit.textContent)
|
||||
body.set(`${this.prefix}_buyer_address_comuna_id`, this.components.$comuna.dropdown('get value'))
|
||||
body.set(`${this.prefix}_broker_rut`, Rut.clean(this.components.$broker.dropdown('get value')))
|
||||
body.set(`${this.prefix}_buyer_email`, form.querySelector(`input[name='${this.prefix}_buyer_email_name']`).value + '@' + form.querySelector(`input[name='${this.prefix}_buyer_email_domain']`).value)
|
||||
const birthdate = this.components.$birthdate.calendar('get date')
|
||||
body.set(`${this.prefix}_buyer_birthdate`, [birthdate.getFullYear(), birthdate.getMonth() + 1, birthdate.getDate()].join('-'))
|
||||
|
||||
if (this.components.payments.components.pie.$checkbox.checkbox('is unchecked')) {
|
||||
body.delete(`${this.prefix}_pie`)
|
||||
body.delete(`${this.prefix}_cuotas`)
|
||||
}
|
||||
body.delete(`${this.prefix}_has_pie`)
|
||||
if (this.components.payments.components.credit.$checkbox.checkbox('is unchecked')) {
|
||||
body.delete(`${this.prefix}_credit`)
|
||||
}
|
||||
body.delete(`${this.prefix}_has_credit`)
|
||||
|
||||
body.delete('comuna')
|
||||
body.delete('region')
|
||||
body.delete('broker')
|
||||
body.delete(`${this.prefix}_broker`)
|
||||
body.delete('birthdate')
|
||||
body.delete(`${this.prefix}_buyer_email_name`)
|
||||
body.delete(`${this.prefix}_buyer_email_domain`)
|
||||
|
||||
const method = 'post'
|
||||
return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
|
||||
if (json.success) {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
setup() {
|
||||
this.components.button = document.getElementById(this.ids.button)
|
||||
this.components.promotions = document.getElementById(this.ids.elements)
|
||||
this.components.button.addEventListener('click', () => {
|
||||
super.setup()
|
||||
|
||||
this.components.$modal.modal({
|
||||
onApprove: () => {
|
||||
this.add()
|
||||
}
|
||||
})
|
||||
this.components.form.addEventListener('submit', event => {
|
||||
event.preventDefault()
|
||||
this.add()
|
||||
return false
|
||||
})
|
||||
this.display.button = this.components.button.parentElement.style.display
|
||||
this.draw.promotions()
|
||||
}
|
||||
}
|
||||
class AddModalUnits {
|
||||
parent = null
|
||||
ids = {
|
||||
buttons_holder: '',
|
||||
units: ''
|
||||
}
|
||||
data = {
|
||||
button_map: {},
|
||||
types: {},
|
||||
units: [],
|
||||
}
|
||||
components = {
|
||||
buttons_holder: null,
|
||||
units: null,
|
||||
}
|
||||
|
||||
constructor(parent) {
|
||||
this.parent = parent
|
||||
this.ids = {
|
||||
buttons_holder: 'add_unit_buttons',
|
||||
units: 'add_units'
|
||||
}
|
||||
this.data.button_map = {
|
||||
'departamento': 'building',
|
||||
'estacionamiento': 'car',
|
||||
'bodega': 'warehouse',
|
||||
'terraza': 'vector square'
|
||||
}
|
||||
this.setup()
|
||||
}
|
||||
get promotions() {
|
||||
return this.parent.data.promotions[this.parent.data.current_project]
|
||||
}
|
||||
draw = {
|
||||
button: type => {
|
||||
return [
|
||||
'<div class="field">',
|
||||
`<button class="ui icon button" type="button" data-type="${type}" title="${type.charAt(0).toUpperCase() + type.slice(1)}">`,
|
||||
'<i class="plus icon"></i>',
|
||||
`<i class="${this.data.button_map[type]} icon"></i>`,
|
||||
'</button>',
|
||||
'</div>'
|
||||
].join('')
|
||||
},
|
||||
buttons: () => {
|
||||
this.components.buttons_holder.innerHTML = Object.keys(this.data.types).map(type => {
|
||||
return this.draw.button(type)
|
||||
}).join('')
|
||||
this.components.buttons_holder.querySelectorAll('.button').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const type = button.dataset.type
|
||||
this.add(type)
|
||||
})
|
||||
})
|
||||
},
|
||||
units: () => {
|
||||
if (this.data.units.length === 0) {
|
||||
this.components.units.innerHTML = ''
|
||||
return
|
||||
}
|
||||
this.components.units.innerHTML = this.data.units.map(unit => {
|
||||
return this.draw.unit(unit)
|
||||
}).join('')
|
||||
this.components.units.querySelectorAll('.dropdown.add_units').forEach(dropdown => {
|
||||
$(dropdown).dropdown({
|
||||
onChange: (value, text, $selectedItem) => {
|
||||
const unitPromotions = this.promotions.filter(promotion => promotion.units.length > 0)
|
||||
const promotions = unitPromotions.filter(promotion => promotion.units.filter(unit => unit.id === parseInt(value)).length > 0)
|
||||
$selectedItem.parent().parent().parent().parent().find('.add_promotions_unit')
|
||||
.dropdown('change values', promotions.map(promotion => {
|
||||
return {
|
||||
value: promotion.id,
|
||||
name: promotion.description,
|
||||
text: promotion.description,
|
||||
}
|
||||
}))
|
||||
}
|
||||
})
|
||||
})
|
||||
this.components.units.querySelectorAll('.dropdown.add_promotions_unit').forEach(dropdown => {
|
||||
$(dropdown).dropdown()
|
||||
})
|
||||
this.components.units.querySelectorAll('.remove_unit').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const idx = Number(button.dataset.id)
|
||||
this.remove(idx)
|
||||
})
|
||||
})
|
||||
},
|
||||
unit: unit => {
|
||||
let promotions = ''
|
||||
if (unit.type === 'departamento') {
|
||||
if (this.promotions.filter(promotion => promotion.units.length > 0).length > 0) {
|
||||
promotions = [
|
||||
'<div class="three wide field">',
|
||||
'<label>Promociones</label>',
|
||||
'<div class="ui multiple search selection dropdown add_promotions_unit">',
|
||||
'<input type="hidden" name="add_units_promotions[]" />',
|
||||
'<i class="dropdown icon"></i>',
|
||||
'<div class="default text">Promociones</div>',
|
||||
'<div class="menu">',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
}
|
||||
}
|
||||
return [
|
||||
'<div class="fields">',
|
||||
'<div class="four wide field">',
|
||||
`<label>${unit.type.charAt(0).toUpperCase() + unit.type.slice(1)}</label>`,
|
||||
`<div class="ui search selection dropdown add_units">`,
|
||||
'<input type="hidden" name="add_units[]" />',
|
||||
'<i class="dropdown icon"></i>',
|
||||
`<div class="default text">${unit.type.charAt(0).toUpperCase() + unit.type.slice(1)}</div>`,
|
||||
'<div class="menu">',
|
||||
this.data.types[unit.type].map(unit => {
|
||||
return `<div class="item" data-value="${unit.value}">${unit.name}</div>`
|
||||
}).join(''),
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="three wide field">',
|
||||
'<label>Valor</label>',
|
||||
'<div class="ui right labeled input">',
|
||||
'<input type="text" name="add_units_value[]" placeholder="Valor" />',
|
||||
'<div class="ui basic label">UF</div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
promotions,
|
||||
'<div class="field">',
|
||||
'<label></label>',
|
||||
`<button class="ui red tiny icon button remove_unit" type="button" data-id="${unit.idx}"><i class="trash icon"></i></button>`,
|
||||
'</div>',
|
||||
'</div>',
|
||||
].join('')
|
||||
}
|
||||
}
|
||||
reset() {
|
||||
this.data.units = []
|
||||
this.draw.units()
|
||||
}
|
||||
add(type) {
|
||||
const idx = Math.max(this.data.units.length, 0, Math.max(...this.data.units.map(unit => unit.idx)) + 1)
|
||||
this.data.units.push({idx, type})
|
||||
this.draw.units()
|
||||
}
|
||||
remove(idx) {
|
||||
this.data.units = this.data.units.filter(unit => unit.idx !== idx)
|
||||
this.draw.units()
|
||||
}
|
||||
setup() {
|
||||
this.components.buttons_holder = document.getElementById(this.ids.buttons_holder)
|
||||
this.components.units = document.getElementById(this.ids.units)
|
||||
this.draw.buttons()
|
||||
}
|
||||
}
|
||||
class AddModalPayments {
|
||||
ids = {
|
||||
pie: {
|
||||
checkbox: 'add_has_pie',
|
||||
value: 'add_pie',
|
||||
installments: 'add_cuotas'
|
||||
},
|
||||
credit: {
|
||||
checkbox: 'add_has_credit',
|
||||
value: 'add_credit'
|
||||
}
|
||||
}
|
||||
components = {
|
||||
pie: {
|
||||
$checkbox: null,
|
||||
value: null,
|
||||
installments: null
|
||||
},
|
||||
credit: {
|
||||
$checkbox: null,
|
||||
value: null
|
||||
}
|
||||
}
|
||||
data = {
|
||||
pie: {
|
||||
value: '',
|
||||
installments: ''
|
||||
},
|
||||
credit: {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
constructor() {
|
||||
this.setup()
|
||||
}
|
||||
reset() {
|
||||
this.components.pie.$checkbox.prop('checked', false)
|
||||
this.components.pie.value.value = ''
|
||||
this.components.pie.installments.value = ''
|
||||
this.components.credit.$checkbox.prop('checked', false)
|
||||
this.components.credit.value.value = ''
|
||||
}
|
||||
show = {
|
||||
pie: () => {
|
||||
this.components.pie.value.style.display = this.data.pie.value
|
||||
this.components.pie.installments.style.display = this.data.pie.installments
|
||||
},
|
||||
credit: () => {
|
||||
this.components.credit.value.style.display = this.data.credit.value
|
||||
}
|
||||
}
|
||||
hide = {
|
||||
pie: () => {
|
||||
this.components.pie.value.style.display = 'none'
|
||||
this.components.pie.installments.style.display = 'none'
|
||||
},
|
||||
credit: () => {
|
||||
this.components.credit.value.style.display = 'none'
|
||||
},
|
||||
all: () => {
|
||||
this.hide.pie()
|
||||
this.hide.credit()
|
||||
}
|
||||
}
|
||||
setup() {
|
||||
this.components.pie.$checkbox = $(`#${this.ids.pie.checkbox}`)
|
||||
this.components.pie.value = document.getElementById(this.ids.pie.value)
|
||||
this.components.pie.installments = document.getElementById(this.ids.pie.installments)
|
||||
this.components.credit.$checkbox = $(`#${this.ids.credit.checkbox}`)
|
||||
this.components.credit.value = document.getElementById(this.ids.credit.value)
|
||||
|
||||
this.components.pie.$checkbox.checkbox()
|
||||
this.components.pie.$checkbox.change(changeEvent => {
|
||||
if (this.components.pie.$checkbox.is(':checked')) {
|
||||
this.show.pie()
|
||||
return
|
||||
}
|
||||
this.hide.pie()
|
||||
})
|
||||
this.components.credit.$checkbox.checkbox()
|
||||
this.components.credit.$checkbox.change(changeEvent => {
|
||||
if (this.components.credit.$checkbox.is(':checked')) {
|
||||
this.show.credit()
|
||||
return
|
||||
}
|
||||
this.hide.credit()
|
||||
})
|
||||
|
||||
this.data.pie.value = this.components.pie.value.style.display
|
||||
this.data.pie.installments = this.components.pie.installments.style.display
|
||||
this.data.credit.value = this.components.credit.value.style.display
|
||||
|
||||
this.hide.all()
|
||||
}
|
||||
}
|
||||
class AddReservationModal {
|
||||
/*class AddReservationModal {
|
||||
ids = {
|
||||
modal: '',
|
||||
form: '',
|
||||
@ -949,6 +502,6 @@
|
||||
this.components.$broker.dropdown()
|
||||
this.components.$loader = $(`#${this.ids.loader}`)
|
||||
}
|
||||
}
|
||||
}*/
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@ -0,0 +1,164 @@
|
||||
<form class="ui form" id="{{ $prefix }}_reservation_form">
|
||||
<input type="hidden" name="{{ $prefix }}_project_id" />
|
||||
<div class="three wide required field">
|
||||
<label>Fecha</label>
|
||||
<div class="ui calendar" id="{{ $prefix }}_date">
|
||||
<div class="ui icon input">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text" name="{{ $prefix }}_date" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="three wide required field">
|
||||
<label>RUT</label>
|
||||
<div class="ui right labeled input" id="{{ $prefix }}_rut">
|
||||
<input type="text" name="{{ $prefix }}_buyer_rut" placeholder="RUT" />
|
||||
<div class="ui basic label">-<span id="{{ $prefix }}_digit"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<div class="ui inline loader" id="{{ $prefix }}_rut_loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="three wide required field">
|
||||
<label>Nombre</label>
|
||||
<input type="text" name="{{ $prefix }}_buyer_name" placeholder="Nombre" />
|
||||
</div>
|
||||
<div class="six wide required field">
|
||||
<label>Apellidos</label>
|
||||
<input type="text" name="{{ $prefix }}_buyer_last_name" placeholder="Apellido Paterno" />
|
||||
</div>
|
||||
<div class="six wide field">
|
||||
<label></label>
|
||||
<input type="text" name="{{ $prefix }}_buyer_last_name2" placeholder="Apellido Materno" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="three wide field">
|
||||
<label>Dirección</label>
|
||||
<input type="text" name="{{ $prefix }}_buyer_address_street" placeholder="Calle" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<input type="text" name="{{ $prefix }}_buyer_address_number" placeholder="N°" />
|
||||
</div>
|
||||
<div class="three wide field">
|
||||
<label></label>
|
||||
<input type="text" name="{{ $prefix }}_buyer_address_extra" placeholder="Otros Detalles" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="three wide field">
|
||||
<label>Comuna</label>
|
||||
<div class="ui search selection dropdown" id="{{ $prefix }}_comuna">
|
||||
<input type="hidden" name="comuna" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Comuna</div>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seven wide field">
|
||||
<label>Región</label>
|
||||
<div class="ui search selection dropdown" id="{{ $prefix }}_region">
|
||||
<input type="hidden" name="region" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Región</div>
|
||||
<div class="menu">
|
||||
@foreach($regions as $region)
|
||||
<div class="item" data-value="{{$region->id}}">{{$region->numeral}} - {{$region->descripcion}}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label>Teléfono</label>
|
||||
<input type="text" name="{{ $prefix }}_buyer_phone" placeholder="Telefono" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Correo</label>
|
||||
<div class="ui labeled input">
|
||||
<input type="text" name="{{ $prefix }}_buyer_email_name" placeholder="Correo" />
|
||||
<div class="ui basic label">@</div>
|
||||
<input type="text" name="{{ $prefix }}_buyer_email_domain" placeholder="Dominio" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label>Estado Civil</label>
|
||||
<input type="text" name="{{ $prefix }}_buyer_marital_status" placeholder="Estado Civil" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Profesión</label>
|
||||
<input type="text" name="{{ $prefix }}_buyer_profession" placeholder="Profesión" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Fecha de Nacimiento</label>
|
||||
<div class="ui calendar" id="{{ $prefix }}_birthdate">
|
||||
<div class="ui icon input">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text" name="birthdate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six wide field">
|
||||
<label>Operador *</label>
|
||||
<div class="ui clearable search selection dropdown" id="{{ $prefix }}_broker">
|
||||
<input type="hidden" name="{{ $prefix }}_broker" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Operador</div>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Agregar Promoción</label>
|
||||
<button type="button" class="ui icon button" id="{{ $prefix }}_promotion">
|
||||
<i class="plus icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="{{ $prefix }}_promotions"></div>
|
||||
<h4 class="ui dividing header">Unidades <span id="{{ $prefix }}_project_name"></span></h4>
|
||||
<div class="fields" id="{{ $prefix }}_unit_buttons"></div>
|
||||
<div id="{{ $prefix }}_units"></div>
|
||||
<h4 class="ui dividing header">Forma de Pago</h4>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="has_pie" id="{{ $prefix }}_has_pie" />
|
||||
<label>¿Tiene Pie?</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" id="{{ $prefix }}_pie">
|
||||
<label>Pie</label>
|
||||
<div class="ui right labeled input">
|
||||
<input type="text" name="pie" />
|
||||
<div class="ui basic label">UF</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" id="{{ $prefix }}_cuotas">
|
||||
<label>Cuotas</label>
|
||||
<input type="text" name="cuotas" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="has_credit" id="{{ $prefix }}_has_credit" />
|
||||
<label>¿Tiene Crédito?</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" id="{{ $prefix }}_credit">
|
||||
<label>Crédito</label>
|
||||
<div class="ui right labeled input">
|
||||
<input type="text" name="credit" />
|
||||
<div class="ui basic label">UF</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -0,0 +1,16 @@
|
||||
<div class="ui modal" id="{{ $prefix }}_reservation_modal">
|
||||
<div class="header">
|
||||
{{ $modalTitle }}
|
||||
</div>
|
||||
<div class="content">
|
||||
@include('ventas.reservations.modal.common.form', ['prefix' => $prefix])
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui cancel button">
|
||||
Cancelar
|
||||
</div>
|
||||
<div class="ui green ok button">
|
||||
{{ $okText }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,380 @@
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class ReservationModal {
|
||||
prefix
|
||||
ids = {
|
||||
modal: '',
|
||||
form: '',
|
||||
date: '',
|
||||
rut: '',
|
||||
digit: '',
|
||||
birthdate: '',
|
||||
comuna: '',
|
||||
region: '',
|
||||
broker: '',
|
||||
promotion_button: '',
|
||||
promotions: '',
|
||||
projects: '',
|
||||
project_name: '',
|
||||
unit_buttons: '',
|
||||
units: ''
|
||||
}
|
||||
components = {
|
||||
$modal: null,
|
||||
form: null,
|
||||
$date: null,
|
||||
$rut: null,
|
||||
rut: null,
|
||||
digit: null,
|
||||
$birthdate: null,
|
||||
$comuna: null,
|
||||
$region: null,
|
||||
$broker: null,
|
||||
promotion_button: null,
|
||||
promotions: null,
|
||||
projects: null,
|
||||
project_name: null,
|
||||
unit_buttons: null,
|
||||
units: null,
|
||||
payments: null,
|
||||
$loader: null
|
||||
}
|
||||
data = {
|
||||
current_project: null,
|
||||
comunas: {},
|
||||
brokers: {},
|
||||
promotions: {},
|
||||
unit_buttons: [],
|
||||
units: {},
|
||||
added_units: {},
|
||||
current_user: null
|
||||
}
|
||||
maps = {
|
||||
unit_types: {
|
||||
departamento: 'building',
|
||||
estacionamiento: 'car',
|
||||
bodega: 'warehouse',
|
||||
terraza: 'tree',
|
||||
}
|
||||
}
|
||||
constructor({projects_id, prefix, components}) {
|
||||
this.prefix = prefix
|
||||
this.ids = {
|
||||
modal: `${this.prefix}_reservation_modal`,
|
||||
form: `${this.prefix}_reservation_form`,
|
||||
date: `${this.prefix}_date`,
|
||||
rut: `${this.prefix}_rut`,
|
||||
digit: `${this.prefix}_digit`,
|
||||
birthdate: `${this.prefix}_birthdate`,
|
||||
comuna: `${this.prefix}_comuna`,
|
||||
region: `${this.prefix}_region`,
|
||||
broker: `${this.prefix}_broker`,
|
||||
promotion_button: `${this.prefix}_promotion`,
|
||||
promotions: `${this.prefix}_promotions`,
|
||||
projects: projects_id,
|
||||
project_name: `${this.prefix}_project_name`,
|
||||
unit_buttons: `${this.prefix}_unit_buttons`,
|
||||
units: `${this.prefix}_units`,
|
||||
loader: `${this.prefix}_rut_loader`
|
||||
}
|
||||
Object.keys(components).forEach(key => {
|
||||
this.components[key] = components[key]
|
||||
})
|
||||
this.setup()
|
||||
}
|
||||
load(project_id) {
|
||||
this.reset()
|
||||
this.data.current_project = project_id
|
||||
this.components.project_name.textContent = this.components.projects.querySelector(`.item[data-id="${project_id}"]`).textContent
|
||||
this.components.form.querySelector(`input[name="${this.prefix}_project_id"]`).value = project_id
|
||||
|
||||
this.get.brokers(project_id)
|
||||
this.get.promotions(project_id).then(promotions => {
|
||||
this.components.promotions.data.promotions = promotions.map(promotion => {
|
||||
return {
|
||||
text: promotion.description,
|
||||
name: promotion.description,
|
||||
value: promotion.id
|
||||
}
|
||||
})
|
||||
this.components.promotions.draw.promotions()
|
||||
})
|
||||
this.get.units(project_id).then(unitTypes => {
|
||||
Object.entries(unitTypes).map(([type, units]) => {
|
||||
units = units.map(unit => {
|
||||
return {
|
||||
text: unit.descripcion,
|
||||
name: unit.descripcion,
|
||||
value: unit.id
|
||||
}
|
||||
})
|
||||
units.sort((a, b) => {
|
||||
return parseInt(a.text) - parseInt(b.text)
|
||||
})
|
||||
unitTypes[type] = units
|
||||
})
|
||||
this.components.units.data.types = unitTypes
|
||||
this.components.units.draw.buttons()
|
||||
})
|
||||
}
|
||||
reset() {
|
||||
this.components.form.reset()
|
||||
this.components.promotions.reset()
|
||||
this.components.units.reset()
|
||||
this.components.payments.reset()
|
||||
}
|
||||
get = {
|
||||
comunas: region_id => {
|
||||
if (region_id in this.data.comunas) {
|
||||
this.components.$comuna.dropdown('change values', this.data.comunas[region_id])
|
||||
if (this.data.current_user !== null && this.data.current_user?.direccion?.comuna !== null) {
|
||||
this.components.$comuna.dropdown('set selected', this.data.current_user.direccion.comuna.id)
|
||||
}
|
||||
return
|
||||
}
|
||||
const uri = `/api/region/${region_id}/comunas`
|
||||
return APIClient.fetch(uri).then(response => response.json()).then(json => {
|
||||
if (json.comunas.length === 0) {
|
||||
return
|
||||
}
|
||||
this.data.comunas[region_id] = json.comunas.map(comuna => {
|
||||
return {
|
||||
text: comuna.descripcion,
|
||||
name: comuna.descripcion,
|
||||
value: comuna.id
|
||||
}
|
||||
})
|
||||
this.components.$comuna.dropdown('change values', this.data.comunas[region_id])
|
||||
|
||||
if (this.data.current_user !== null && this.data.current_user?.direccion?.comuna !== null) {
|
||||
this.components.$comuna.dropdown('set selected', this.data.current_user.direccion.comuna.id)
|
||||
}
|
||||
})
|
||||
},
|
||||
brokers: project_id => {
|
||||
if (project_id in this.data.brokers) {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(this.data.brokers[project_id])
|
||||
})
|
||||
}
|
||||
const uri = `/api/proyecto/${project_id}/brokers`
|
||||
return 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 })
|
||||
this.data.brokers[project_id] = json.contracts.map(contract => {
|
||||
return {
|
||||
id: contract.id,
|
||||
broker_rut: contract.broker_rut,
|
||||
commission: formatter.format(contract.commission),
|
||||
name: '',
|
||||
text: '',
|
||||
}
|
||||
})
|
||||
const promises = []
|
||||
json.contracts.forEach(contract => {
|
||||
promises.push(this.get.broker(contract.broker_rut))
|
||||
})
|
||||
|
||||
return Promise.all(promises).then(data => {
|
||||
data.forEach(broker => {
|
||||
if (!('rut' in broker)) {
|
||||
return
|
||||
}
|
||||
const idx = this.data.brokers[project_id].findIndex(contract => contract.broker_rut === broker.rut)
|
||||
this.data.brokers[project_id][idx].name = this.data.brokers[project_id][idx].text = `${broker.name} - ${this.data.brokers[project_id][idx].commission}`
|
||||
})
|
||||
this.fill.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 this.data.promotions) {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(this.data.promotions[project_id])
|
||||
})
|
||||
}
|
||||
const uri = `/api/proyecto/${project_id}/promotions`
|
||||
return APIClient.fetch(uri).then(response => response.json()).then(json => {
|
||||
if (json.promotions.length === 0) {
|
||||
return this.data.promotions[project_id] = []
|
||||
}
|
||||
return this.data.promotions[project_id] = json.promotions
|
||||
})
|
||||
},
|
||||
units: project_id => {
|
||||
if (project_id in this.data.units) {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(this.data.units[project_id])
|
||||
})
|
||||
}
|
||||
const uri = `/api/proyecto/${project_id}/unidades/disponibles`
|
||||
return APIClient.fetch(uri).then(response => response.json()).then(json => {
|
||||
if (json.unidades.length === 0) {
|
||||
this.data.units[project_id] = {}
|
||||
return this.data.units[project_id]
|
||||
}
|
||||
if (!(project_id in this.data.units)) {
|
||||
this.data.units[project_id] = {}
|
||||
}
|
||||
json.unidades.forEach(unit => {
|
||||
const type = unit.proyecto_tipo_unidad.tipo_unidad.descripcion
|
||||
if (!(type in this.data.units[project_id])) {
|
||||
this.data.units[project_id][type] = []
|
||||
}
|
||||
this.data.units[project_id][type].push(unit)
|
||||
})
|
||||
|
||||
return this.data.units[project_id]
|
||||
})
|
||||
},
|
||||
user: rut => {
|
||||
if (this.data.current_user !== null && this.data.current_user?.rut === rut) {
|
||||
return this.data.current_user
|
||||
}
|
||||
this.loader.show()
|
||||
const uri = `/api/persona/${rut}`
|
||||
return APIClient.fetch(uri).then(response => response.json()).then(json => {
|
||||
this.loader.hide()
|
||||
if (!json.success) {
|
||||
return
|
||||
}
|
||||
this.data.current_user = json.persona
|
||||
return json.persona
|
||||
})
|
||||
}
|
||||
}
|
||||
fill = {
|
||||
user: user => {
|
||||
if (typeof user === 'undefined' || user === null) {
|
||||
return
|
||||
}
|
||||
const form = this.components.form
|
||||
form.querySelector(`input[name="${this.prefix}_buyer_name"]`).value = user.nombres || ''
|
||||
form.querySelector(`input[name="${this.prefix}_buyer_last_name"]`).value = user.apellidoPaterno || ''
|
||||
form.querySelector(`input[name="${this.prefix}_buyer_last_name2"]`).value = user.apellidoMaterno || ''
|
||||
form.querySelector(`input[name="${this.prefix}_buyer_address_street"]`).value = user.datos?.direccion?.calle || ''
|
||||
form.querySelector(`input[name="${this.prefix}_buyer_address_number"]`).value = user.datos?.direccion?.numero || ''
|
||||
form.querySelector(`input[name="${this.prefix}_buyer_address_extra"]`).value = user.datos?.direccion?.extra || ''
|
||||
if (parseInt(this.components.$region.dropdown('get value')) !== user.datos?.direccion?.comuna?.provincia?.region?.id) {
|
||||
this.components.$region.dropdown('set selected', user.datos?.direccion?.comuna?.provincia?.region?.id)
|
||||
} else {
|
||||
this.components.$comuna.dropdown('set selected', user.datos?.direccion?.comuna?.id)
|
||||
}
|
||||
form.querySelector(`input[name="${this.prefix}_buyer_phone"]`).value = user.datos?.telefono || ''
|
||||
const email_parts = user.datos?.email?.split('@') || []
|
||||
form.querySelector(`input[name="${this.prefix}_buyer_email_name"]`).value = email_parts[0] || ''
|
||||
form.querySelector(`input[name="${this.prefix}_buyer_email_domain"]`).value = email_parts[1] || ''
|
||||
if (user.datos !== null && 'estadoCivil' in user.datos) {
|
||||
form.querySelector(`input[name="${this.prefix}_buyer_marital_status"]`).value = user.datos?.estadoCivil.charAt(0).toUpperCase() + user.datos?.estadoCivil.slice(1)
|
||||
} else {
|
||||
form.querySelector(`input[name="${this.prefix}_buyer_marital_status"]`).value = ''
|
||||
}
|
||||
if (user.datos !== null &&'ocupacion' in user.datos) {
|
||||
form.querySelector(`input[name="${this.prefix}_buyer_profession"]`).value = user.datos?.ocupacion.charAt(0).toUpperCase() + user.datos?.ocupacion.slice(1).toLowerCase()
|
||||
} else {
|
||||
form.querySelector(`input[name="${this.prefix}_buyer_profession"]`).value = ''
|
||||
}
|
||||
if (user.datos !== null &&'fechaNacimiento' in user.datos) {
|
||||
this.components.$birthdate.calendar('set date', user.datos?.fechaNacimiento)
|
||||
}
|
||||
},
|
||||
brokers: () => {
|
||||
this.components.$broker.dropdown('change values', this.data.brokers[this.data.current_project])
|
||||
},
|
||||
units: () => {
|
||||
const buttons = []
|
||||
Object.entries(this.maps.unit_types).forEach(([type, map]) => {
|
||||
if (!(type in this.data.units[this.data.current_project])) {
|
||||
return
|
||||
}
|
||||
buttons.push(`<div class="field"><div class="ui icon button" data-type="${type}" title="${type.charAt(0).toUpperCase() + type.slice(1)}"><i class="plus icon"></i><i class="${map} icon"></i></div></div>`)
|
||||
})
|
||||
|
||||
this.components.unit_buttons.innerHTML = buttons.join('')
|
||||
this.components.unit_buttons.querySelectorAll('.ui.icon.button').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
this.units.add(button.dataset.type)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
watch = {
|
||||
region: (value, text, $choice) => {
|
||||
this.get.comunas(value)
|
||||
},
|
||||
}
|
||||
loader = {
|
||||
show: () => {
|
||||
this.components.$loader.show()
|
||||
},
|
||||
hide: () => {
|
||||
this.components.$loader.hide()
|
||||
}
|
||||
}
|
||||
show() {
|
||||
this.reset()
|
||||
this.components.$modal.modal('show')
|
||||
}
|
||||
setup() {
|
||||
this.components.$modal = $(`#${this.ids.modal}`)
|
||||
this.components.form = document.getElementById(this.ids.form)
|
||||
this.components.$date = $(`#${this.ids.date}`)
|
||||
this.components.rut = document.getElementById(this.ids.rut)
|
||||
this.components.digit = document.getElementById(this.ids.digit)
|
||||
this.components.$birthdate = $(`#${this.ids.birthdate}`)
|
||||
this.components.$comuna = $(`#${this.ids.comuna}`)
|
||||
this.components.$region = $(`#${this.ids.region}`)
|
||||
this.components.$broker = $(`#${this.ids.broker}`)
|
||||
this.components.projects = document.getElementById(this.ids.projects)
|
||||
this.components.project_name = document.getElementById(this.ids.project_name)
|
||||
this.components.units.parent = this
|
||||
|
||||
const cdo = structuredClone(calendar_date_options)
|
||||
cdo['initialDate'] = new Date()
|
||||
cdo['maxDate'] = new Date()
|
||||
this.components.$date.calendar(cdo)
|
||||
const rutInput = this.components.rut.querySelector('input')
|
||||
rutInput.addEventListener('input', event => {
|
||||
const value = event.currentTarget.value.replace(/\D/g, '')
|
||||
if (value.length <= 3) {
|
||||
return
|
||||
}
|
||||
this.components.digit.textContent = Rut.digitoVerificador(value)
|
||||
})
|
||||
rutInput.addEventListener('blur', event => {
|
||||
const value = event.currentTarget.value.replace(/\D/g, '')
|
||||
if (value.length <= 3) {
|
||||
return
|
||||
}
|
||||
event.currentTarget.value = Rut.format(value)
|
||||
this.get.user(value).then(user => {
|
||||
this.fill.user(user)
|
||||
})
|
||||
})
|
||||
const cdo2 = structuredClone(cdo)
|
||||
cdo2['initialDate'].setFullYear(cdo2['initialDate'].getFullYear() - 18)
|
||||
cdo2['maxDate'].setFullYear(cdo2['maxDate'].getFullYear() - 18)
|
||||
this.components.$birthdate.calendar(cdo2)
|
||||
this.components.$region.dropdown({
|
||||
fireOnInit: true,
|
||||
onChange: this.watch.region
|
||||
})
|
||||
this.components.$region.dropdown('set selected', 13)
|
||||
this.components.$comuna.dropdown()
|
||||
this.components.$broker.dropdown()
|
||||
this.components.$loader = $(`#${this.ids.loader}`)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@ -0,0 +1,112 @@
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class ModalPayments {
|
||||
prefix
|
||||
ids = {
|
||||
pie: {
|
||||
checkbox: '',
|
||||
value: '',
|
||||
installments: ''
|
||||
},
|
||||
credit: {
|
||||
checkbox: '',
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
components = {
|
||||
pie: {
|
||||
$checkbox: null,
|
||||
value: null,
|
||||
installments: null
|
||||
},
|
||||
credit: {
|
||||
$checkbox: null,
|
||||
value: null
|
||||
}
|
||||
}
|
||||
data = {
|
||||
pie: {
|
||||
value: '',
|
||||
installments: ''
|
||||
},
|
||||
credit: {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
constructor(prefix) {
|
||||
this.prefix = prefix
|
||||
this.ids = {
|
||||
pie: {
|
||||
checkbox: `${this.prefix}_has_pie`,
|
||||
value: `${this.prefix}_pie`,
|
||||
installments: `${this.prefix}_cuotas`
|
||||
},
|
||||
credit: {
|
||||
checkbox: `${this.prefix}_has_credit`,
|
||||
value: `${this.prefix}_credit`
|
||||
}
|
||||
}
|
||||
this.setup()
|
||||
}
|
||||
reset() {
|
||||
this.components.pie.$checkbox.prop('checked', false)
|
||||
this.components.pie.value.value = ''
|
||||
this.components.pie.installments.value = ''
|
||||
this.components.credit.$checkbox.prop('checked', false)
|
||||
this.components.credit.value.value = ''
|
||||
}
|
||||
show = {
|
||||
pie: () => {
|
||||
this.components.pie.value.style.display = this.data.pie.value
|
||||
this.components.pie.installments.style.display = this.data.pie.installments
|
||||
},
|
||||
credit: () => {
|
||||
this.components.credit.value.style.display = this.data.credit.value
|
||||
}
|
||||
}
|
||||
hide = {
|
||||
pie: () => {
|
||||
this.components.pie.value.style.display = 'none'
|
||||
this.components.pie.installments.style.display = 'none'
|
||||
},
|
||||
credit: () => {
|
||||
this.components.credit.value.style.display = 'none'
|
||||
},
|
||||
all: () => {
|
||||
this.hide.pie()
|
||||
this.hide.credit()
|
||||
}
|
||||
}
|
||||
setup() {
|
||||
this.components.pie.$checkbox = $(`#${this.ids.pie.checkbox}`)
|
||||
this.components.pie.value = document.getElementById(this.ids.pie.value)
|
||||
this.components.pie.installments = document.getElementById(this.ids.pie.installments)
|
||||
this.components.credit.$checkbox = $(`#${this.ids.credit.checkbox}`)
|
||||
this.components.credit.value = document.getElementById(this.ids.credit.value)
|
||||
|
||||
this.components.pie.$checkbox.checkbox()
|
||||
this.components.pie.$checkbox.change(changeEvent => {
|
||||
if (this.components.pie.$checkbox.is(':checked')) {
|
||||
this.show.pie()
|
||||
return
|
||||
}
|
||||
this.hide.pie()
|
||||
})
|
||||
this.components.credit.$checkbox.checkbox()
|
||||
this.components.credit.$checkbox.change(changeEvent => {
|
||||
if (this.components.credit.$checkbox.is(':checked')) {
|
||||
this.show.credit()
|
||||
return
|
||||
}
|
||||
this.hide.credit()
|
||||
})
|
||||
|
||||
this.data.pie.value = this.components.pie.value.style.display
|
||||
this.data.pie.installments = this.components.pie.installments.style.display
|
||||
this.data.credit.value = this.components.credit.value.style.display
|
||||
|
||||
this.hide.all()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@ -0,0 +1,100 @@
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class ModalPromotions {
|
||||
prefix
|
||||
ids = {
|
||||
button: '',
|
||||
elements: ''
|
||||
}
|
||||
data = {
|
||||
promotions: [],
|
||||
selected: []
|
||||
}
|
||||
components = {
|
||||
button: null,
|
||||
promotions: null,
|
||||
}
|
||||
display = {
|
||||
button: ''
|
||||
}
|
||||
|
||||
constructor(prefix) {
|
||||
this.prefix = prefix
|
||||
this.ids = {
|
||||
button: `${prefix}_promotion`,
|
||||
elements: `${prefix}_promotions`
|
||||
}
|
||||
this.setup()
|
||||
}
|
||||
add() {
|
||||
const idx = Math.max(this.data.selected.length, 0, Math.max(...this.data.selected) + 1)
|
||||
this.data.selected.push(idx)
|
||||
this.draw.promotions()
|
||||
}
|
||||
reset() {
|
||||
this.data.selected = []
|
||||
this.draw.promotions()
|
||||
}
|
||||
remove(idx) {
|
||||
this.data.selected = this.data.selected.filter(promotion => promotion !== idx)
|
||||
this.draw.promotions()
|
||||
}
|
||||
draw = {
|
||||
promotion: idx => {
|
||||
const promotions = this.data.promotions.map(promotion => {
|
||||
return `<div class="item" data-value="${promotion.value}">${promotion.name}</div>`
|
||||
})
|
||||
return [
|
||||
`<div class="fields promotion" data-id="${idx}">`,
|
||||
'<div class="three wide field">',
|
||||
'<label>Promoción</label>',
|
||||
`<div class="ui search selection dropdown">`,
|
||||
`<input type="hidden" name="${this.prefix}_promotions[]" />`,
|
||||
'<i class="dropdown icon"></i>',
|
||||
'<div class="default text">Promoción</div>',
|
||||
`<div class="menu">${promotions.join('')}</div>`,
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="two wide field">',
|
||||
'<label></label>',
|
||||
`<button class="ui red tiny icon button remove_${this.prefix}_promotion" type="button" data-id="${idx}"><i class="trash icon"></i></button>`,
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
},
|
||||
promotions: () => {
|
||||
if (this.data.promotions.length === 0) {
|
||||
this.components.button.parentElement.style.display = 'none'
|
||||
this.components.promotions.innerHTML = ''
|
||||
return
|
||||
}
|
||||
this.components.button.parentElement.style.display = this.display.button
|
||||
if (this.data.selected.length === 0) {
|
||||
return
|
||||
}
|
||||
this.components.promotions.innerHTML = this.data.selected.map(idx => {
|
||||
return this.draw.promotion(idx)
|
||||
}).join('')
|
||||
this.components.promotions.querySelectorAll('.dropdown').forEach(dropdown => {
|
||||
$(dropdown).dropdown()
|
||||
})
|
||||
this.components.promotions.querySelectorAll(`.remove_${this.prefix}_promotion`).forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const idx = Number(button.dataset.id)
|
||||
this.remove(idx)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
setup() {
|
||||
this.components.button = document.getElementById(this.ids.button)
|
||||
this.components.promotions = document.getElementById(this.ids.elements)
|
||||
this.components.button.addEventListener('click', () => {
|
||||
this.add()
|
||||
})
|
||||
this.display.button = this.components.button.parentElement.style.display
|
||||
this.draw.promotions()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@ -0,0 +1,167 @@
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class ModalUnits {
|
||||
prefix
|
||||
parent = null
|
||||
ids = {
|
||||
buttons_holder: '',
|
||||
units: ''
|
||||
}
|
||||
data = {
|
||||
button_map: {},
|
||||
types: {},
|
||||
units: [],
|
||||
}
|
||||
components = {
|
||||
buttons_holder: null,
|
||||
units: null,
|
||||
}
|
||||
|
||||
constructor({parent, prefix}) {
|
||||
this.prefix = prefix
|
||||
this.parent = parent
|
||||
this.ids = {
|
||||
buttons_holder: `${this.prefix}_unit_buttons`,
|
||||
units: `${this.prefix}_units`
|
||||
}
|
||||
this.data.button_map = {
|
||||
'departamento': 'building',
|
||||
'estacionamiento': 'car',
|
||||
'bodega': 'warehouse',
|
||||
'terraza': 'vector square'
|
||||
}
|
||||
this.setup()
|
||||
}
|
||||
get promotions() {
|
||||
return this.parent.data.promotions[this.parent.data.current_project]
|
||||
}
|
||||
draw = {
|
||||
button: type => {
|
||||
return [
|
||||
'<div class="field">',
|
||||
`<button class="ui icon button" type="button" data-type="${type}" title="${type.charAt(0).toUpperCase() + type.slice(1)}">`,
|
||||
'<i class="plus icon"></i>',
|
||||
`<i class="${this.data.button_map[type]} icon"></i>`,
|
||||
'</button>',
|
||||
'</div>'
|
||||
].join('')
|
||||
},
|
||||
buttons: () => {
|
||||
const keys = Object.keys(this.data.types)
|
||||
if (keys.length === 0) {
|
||||
return
|
||||
}
|
||||
this.components.buttons_holder.innerHTML = keys.map(type => {
|
||||
return this.draw.button(type)
|
||||
}).join('')
|
||||
this.components.buttons_holder.querySelectorAll('.button').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const type = button.dataset.type
|
||||
this.add(type)
|
||||
})
|
||||
})
|
||||
},
|
||||
units: () => {
|
||||
if (this.data.units.length === 0) {
|
||||
this.components.units.innerHTML = ''
|
||||
return
|
||||
}
|
||||
this.components.units.innerHTML = this.data.units.map(unit => {
|
||||
return this.draw.unit(unit)
|
||||
}).join('')
|
||||
this.components.units.querySelectorAll(`.dropdown.${this.prefix}_units`).forEach(dropdown => {
|
||||
$(dropdown).dropdown({
|
||||
onChange: (value, text, $selectedItem) => {
|
||||
const unitPromotions = this.promotions.filter(promotion => promotion.units.length > 0)
|
||||
const promotions = unitPromotions.filter(promotion => promotion.units.filter(unit => unit.id === parseInt(value)).length > 0)
|
||||
$selectedItem.parent().parent().parent().parent().find(`.${this.prefix}_promotions_unit`)
|
||||
.dropdown('change values', promotions.map(promotion => {
|
||||
return {
|
||||
value: promotion.id,
|
||||
name: promotion.description,
|
||||
text: promotion.description,
|
||||
}
|
||||
}))
|
||||
}
|
||||
})
|
||||
})
|
||||
this.components.units.querySelectorAll(`.dropdown.${this.prefix}_promotions_unit`).forEach(dropdown => {
|
||||
$(dropdown).dropdown()
|
||||
})
|
||||
this.components.units.querySelectorAll('.remove_unit').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const idx = Number(button.dataset.id)
|
||||
this.remove(idx)
|
||||
})
|
||||
})
|
||||
},
|
||||
unit: unit => {
|
||||
let promotions = ''
|
||||
if (unit.type === 'departamento') {
|
||||
if (this.promotions.filter(promotion => promotion.units.length > 0).length > 0) {
|
||||
promotions = [
|
||||
'<div class="three wide field">',
|
||||
'<label>Promociones</label>',
|
||||
`<div class="ui multiple search selection dropdown ${this.prefix}_promotions_unit">`,
|
||||
`<input type="hidden" name="${this.prefix}_units_promotions[]" />`,
|
||||
'<i class="dropdown icon"></i>',
|
||||
'<div class="default text">Promociones</div>',
|
||||
'<div class="menu">',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
}
|
||||
}
|
||||
return [
|
||||
'<div class="fields">',
|
||||
'<div class="four wide field">',
|
||||
`<label>${unit.type.charAt(0).toUpperCase() + unit.type.slice(1)}</label>`,
|
||||
`<div class="ui search selection dropdown ${this.prefix}_units">`,
|
||||
`<input type="hidden" name="${this.prefix}_units[]" />`,
|
||||
'<i class="dropdown icon"></i>',
|
||||
`<div class="default text">${unit.type.charAt(0).toUpperCase() + unit.type.slice(1)}</div>`,
|
||||
'<div class="menu">',
|
||||
this.data.types[unit.type].map(unit => {
|
||||
return `<div class="item" data-value="${unit.value}">${unit.name}</div>`
|
||||
}).join(''),
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="three wide field">',
|
||||
'<label>Valor</label>',
|
||||
'<div class="ui right labeled input">',
|
||||
`<input type="text" name="${this.prefix}_units_value[]" placeholder="Valor" />`,
|
||||
'<div class="ui basic label">UF</div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
promotions,
|
||||
'<div class="field">',
|
||||
'<label></label>',
|
||||
`<button class="ui red tiny icon button remove_unit" type="button" data-id="${unit.idx}"><i class="trash icon"></i></button>`,
|
||||
'</div>',
|
||||
'</div>',
|
||||
].join('')
|
||||
}
|
||||
}
|
||||
reset() {
|
||||
this.data.units = []
|
||||
this.draw.units()
|
||||
}
|
||||
add(type) {
|
||||
const idx = Math.max(this.data.units.length, 0, Math.max(...this.data.units.map(unit => unit.idx)) + 1)
|
||||
this.data.units.push({idx, type})
|
||||
this.draw.units()
|
||||
}
|
||||
remove(idx) {
|
||||
this.data.units = this.data.units.filter(unit => unit.idx !== idx)
|
||||
this.draw.units()
|
||||
}
|
||||
setup() {
|
||||
this.components.buttons_holder = document.getElementById(this.ids.buttons_holder)
|
||||
this.components.units = document.getElementById(this.ids.units)
|
||||
this.draw.buttons()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@ -1,289 +1,52 @@
|
||||
<!-- resources/views/ventas/reservations/modal/edit.blade.php -->
|
||||
<div class="ui modal" id="edit_reservation_modal">
|
||||
<div class="header">
|
||||
Editar Reserva
|
||||
</div>
|
||||
<div class="content">
|
||||
<form class="ui form" id="edit_reservation_form">
|
||||
<input type="hidden" name="reservation_id" />
|
||||
<input type="hidden" name="project_id" />
|
||||
|
||||
<div class="three wide required field">
|
||||
<label>Fecha</label>
|
||||
<div class="ui calendar" id="edit_date">
|
||||
<div class="ui icon input">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text" name="date" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fields">
|
||||
<div class="three wide required field">
|
||||
<label>RUT</label>
|
||||
<div class="ui right labeled input" id="edit_rut">
|
||||
<input type="text" name="buyer_rut" placeholder="RUT" readonly />
|
||||
<div class="ui basic label">-<span id="edit_digit"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<div class="ui inline loader" id="edit_rut_loader" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fields">
|
||||
<div class="three wide required field">
|
||||
<label>Nombre</label>
|
||||
<input type="text" name="buyer_name" placeholder="Nombre" />
|
||||
</div>
|
||||
<div class="six wide required field">
|
||||
<label>Apellidos</label>
|
||||
<input type="text" name="buyer_last_name" placeholder="Apellido Paterno" />
|
||||
</div>
|
||||
<div class="six wide field">
|
||||
<label></label>
|
||||
<input type="text" name="buyer_last_name2" placeholder="Apellido Materno" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui segment">
|
||||
<h4 class="ui header">Unidades</h4>
|
||||
<div id="edit_units_holder">
|
||||
<!-- Units will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui segment">
|
||||
<h4 class="ui header">Promociones</h4>
|
||||
<div id="edit_promotions_holder">
|
||||
<!-- Promotions will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui error message"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui cancel button">
|
||||
Cancelar
|
||||
</div>
|
||||
<button type="button" class="ui primary button" id="edit_reservation_submit">
|
||||
Guardar Cambios
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@include('ventas.reservations.modal.common.modal', ['prefix' => 'edit', 'modalTitle' => 'Editar Reserva', 'okText' => 'Guardar Cambios'])
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class EditReservationModal {
|
||||
class EditModalPromotions extends ModalPromotions {
|
||||
constructor() {
|
||||
this.ids = {
|
||||
modal: 'edit_reservation_modal',
|
||||
form: 'edit_reservation_form',
|
||||
date: 'edit_date',
|
||||
rut: 'edit_rut',
|
||||
digit: 'edit_digit',
|
||||
rutLoader: 'edit_rut_loader',
|
||||
unitsHolder: 'edit_units_holder',
|
||||
promotionsHolder: 'edit_promotions_holder',
|
||||
submitButton: 'edit_reservation_submit'
|
||||
};
|
||||
|
||||
this.components = {
|
||||
$modal: null,
|
||||
$form: null,
|
||||
$date: null,
|
||||
$submitButton: null
|
||||
};
|
||||
|
||||
this.data = {
|
||||
reservation: null,
|
||||
units: [],
|
||||
promotions: []
|
||||
};
|
||||
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.setupComponents();
|
||||
this.setupEvents();
|
||||
}
|
||||
|
||||
setupComponents() {
|
||||
this.components.$modal = $(`#${this.ids.modal}`);
|
||||
this.components.$form = $(`#${this.ids.form}`);
|
||||
this.components.$date = $(`#${this.ids.date}`);
|
||||
this.components.$submitButton = $(`#${this.ids.submitButton}`);
|
||||
|
||||
// Initialize date picker
|
||||
this.components.$date.calendar({
|
||||
type: 'date',
|
||||
formatter: {
|
||||
date: function(date, settings) {
|
||||
if (!date) return '';
|
||||
return date.toISOString().split('T')[0];
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupEvents() {
|
||||
this.components.$submitButton.on('click', () => this.updateReservation());
|
||||
}
|
||||
|
||||
load(reservationId) {
|
||||
this.components.$modal.modal('show');
|
||||
this.components.$modal.addClass('loading');
|
||||
|
||||
// Use APIClient to fetch the reservation data
|
||||
APIClient.fetch(`/api/reservation/${reservationId}`)
|
||||
.then(response => {
|
||||
if (!response) {
|
||||
throw new Error('No se pudo cargar la reserva');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.reservation) {
|
||||
this.populateForm(data.reservation);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading reservation:', error);
|
||||
this.showError('Error al cargar la reserva');
|
||||
})
|
||||
.finally(() => {
|
||||
this.components.$modal.removeClass('loading');
|
||||
});
|
||||
}
|
||||
|
||||
populateForm(reservation) {
|
||||
// Set basic info
|
||||
this.components.$form.find('[name="reservation_id"]').val(reservation.id);
|
||||
this.components.$form.find('[name="project_id"]').val(reservation.project_id);
|
||||
|
||||
// Set date
|
||||
if (reservation.date) {
|
||||
this.components.$date.calendar('set date', new Date(reservation.date));
|
||||
}
|
||||
|
||||
// Set buyer info
|
||||
if (reservation.buyer) {
|
||||
const buyer = reservation.buyer;
|
||||
this.components.$form.find('[name="buyer_rut"]').val(buyer.rut);
|
||||
this.components.$form.find('[name="buyer_name"]').val(buyer.nombre);
|
||||
this.components.$form.find('[name="buyer_last_name"]').val(buyer.apellido_paterno);
|
||||
this.components.$form.find('[name="buyer_last_name2"]').val(buyer.apellido_materno || '');
|
||||
// Set other buyer fields as needed
|
||||
}
|
||||
|
||||
// Load units
|
||||
this.loadUnits(reservation.units || []);
|
||||
|
||||
// Load promotions if any
|
||||
if (reservation.promotions && reservation.promotions.length > 0) {
|
||||
this.loadPromotions(reservation.promotions);
|
||||
}
|
||||
}
|
||||
|
||||
loadUnits(units) {
|
||||
this.data.units = units;
|
||||
const $holder = $(`#${this.ids.unitsHolder}`);
|
||||
$holder.empty();
|
||||
|
||||
// Render units
|
||||
units.forEach(unit => {
|
||||
const $unit = $(`
|
||||
<div class="field">
|
||||
<div class="ui label">
|
||||
${unit.tipo} - ${unit.numero}
|
||||
<div class="detail">${unit.precio_uf} UF</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
$holder.append($unit);
|
||||
});
|
||||
}
|
||||
|
||||
loadPromotions(promotions) {
|
||||
this.data.promotions = promotions;
|
||||
const $holder = $(`#${this.ids.promotionsHolder}`);
|
||||
$holder.empty();
|
||||
|
||||
// Render promotions
|
||||
promotions.forEach(promotion => {
|
||||
const $promo = $(`
|
||||
<div class="field">
|
||||
<div class="ui label">
|
||||
${promotion.nombre}
|
||||
<div class="detail">${promotion.descuento}%</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
$holder.append($promo);
|
||||
});
|
||||
}
|
||||
|
||||
updateReservation() {
|
||||
const formData = new FormData(this.components.$form[0]);
|
||||
const reservationId = formData.get('reservation_id');
|
||||
const data = Object.fromEntries(formData.entries());
|
||||
|
||||
this.components.$submitButton.addClass('loading');
|
||||
|
||||
// Use APIClient to update the reservation
|
||||
APIClient.fetch(`/api/reservation/${reservationId}/edit`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => {
|
||||
if (!response) {
|
||||
throw new Error('No se pudo actualizar la reserva');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
this.showSuccess('Reserva actualizada correctamente');
|
||||
this.components.$modal.modal('hide');
|
||||
|
||||
// Refresh the reservations list
|
||||
if (window.reservations && typeof window.reservations.refresh === 'function') {
|
||||
window.reservations.refresh();
|
||||
}
|
||||
} else {
|
||||
throw new Error(data.error || 'Error desconocido al actualizar la reserva');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error updating reservation:', error);
|
||||
this.showError(error.message || 'Error al actualizar la reserva');
|
||||
})
|
||||
.finally(() => {
|
||||
this.components.$submitButton.removeClass('loading');
|
||||
});
|
||||
}
|
||||
|
||||
showError(message) {
|
||||
// You can replace this with your preferred notification system
|
||||
alert('Error: ' + message);
|
||||
}
|
||||
|
||||
showSuccess(message) {
|
||||
// You can replace this with your preferred notification system
|
||||
alert(message);
|
||||
super('edit');
|
||||
}
|
||||
}
|
||||
class EditModalUnits extends ModalUnits {
|
||||
constructor(parent) {
|
||||
super({prefix: 'edit', parent})
|
||||
}
|
||||
}
|
||||
class EditModalPayments extends ModalPayments {
|
||||
constructor() {
|
||||
super('edit');
|
||||
}
|
||||
}
|
||||
class EditReservationModal extends ReservationModal {
|
||||
constructor(projects_id) {
|
||||
super({projects_id, prefix: 'edit', components: {
|
||||
promotions: new EditModalPromotions(),
|
||||
units: new EditModalUnits(),
|
||||
payments: new EditModalPayments()
|
||||
}});
|
||||
}
|
||||
|
||||
// Initialize the modal when the page loads
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.editReservationModal = new EditReservationModal();
|
||||
});
|
||||
load({project_id, type, reservation_id}) {
|
||||
super.load(project_id)
|
||||
|
||||
const reservation = reservations.components.reservations[type].reservations.find(r => r.id === parseInt(reservation_id))
|
||||
console.debug(this.components, reservation)
|
||||
}
|
||||
edit() {}
|
||||
setup() {
|
||||
super.setup()
|
||||
|
||||
this.components.$modal.modal({
|
||||
onApprove: () => {
|
||||
this.edit()
|
||||
}
|
||||
})
|
||||
this.components.form.addEventListener('submit', event => {
|
||||
event.preventDefault()
|
||||
this.edit()
|
||||
return false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@ -18,6 +18,14 @@ return [
|
||||
$urls['assets'],
|
||||
'images'
|
||||
]);
|
||||
$urls['scripts'] = implode('/', [
|
||||
$urls['assets'],
|
||||
'js'
|
||||
]);
|
||||
$urls['styles'] = implode('/', [
|
||||
$urls['assets'],
|
||||
'css'
|
||||
]);
|
||||
return (object) $urls;
|
||||
},
|
||||
'apiUrls' => function(ContainerInterface $container) {
|
||||
|
||||
Reference in New Issue
Block a user