734 lines
33 KiB
PHP
734 lines
33 KiB
PHP
<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="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="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="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="name" placeholder="Nombre" />
|
|
</div>
|
|
<div class="six wide required field">
|
|
<label>Apellidos</label>
|
|
<input type="text" name="last_name" placeholder="Apellido Paterno" />
|
|
</div>
|
|
<div class="six wide field">
|
|
<label></label>
|
|
<input type="text" name="last_name2" placeholder="Apellido Materno" />
|
|
</div>
|
|
</div>
|
|
<div class="fields">
|
|
<div class="three wide field">
|
|
<label>Dirección</label>
|
|
<input type="text" name="calle" placeholder="Calle" />
|
|
</div>
|
|
<div class="field">
|
|
<label></label>
|
|
<input type="text" name="numero" placeholder="N°" />
|
|
</div>
|
|
<div class="three wide field">
|
|
<label></label>
|
|
<input type="text" name="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="phone" placeholder="Telefono" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Correo</label>
|
|
<div class="ui labeled input">
|
|
<input type="text" name="email_name" placeholder="Correo" />
|
|
<div class="ui basic label">@</div>
|
|
<input type="text" name="email_domain" placeholder="Dominio" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fields">
|
|
<div class="field">
|
|
<label>Estado Civil</label>
|
|
<input type="text" name="civil_status" placeholder="Estado Civil" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Profesión</label>
|
|
<input type="text" name="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="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</h4>
|
|
<div class="fields" id="add_unit_buttons"></div>
|
|
<div id="add_units"></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')
|
|
|
|
@push('page_scripts')
|
|
<script>
|
|
class AddModalPromotions {
|
|
ids = {
|
|
button: '',
|
|
elements: ''
|
|
}
|
|
data = {
|
|
promotions: []
|
|
}
|
|
components = {
|
|
button: null,
|
|
promotions: null,
|
|
}
|
|
display = {
|
|
button: ''
|
|
}
|
|
|
|
constructor() {
|
|
this.ids = {
|
|
button: 'add_promotion',
|
|
elements: 'add_promotions'
|
|
}
|
|
this.setup()
|
|
}
|
|
add() {
|
|
const idx = Math.max(this.data.promotions.length, 0, Math.max(...this.data.promotions) + 1)
|
|
this.data.promotions.push(idx)
|
|
this.draw.promotions()
|
|
}
|
|
reset() {
|
|
this.data.promotions = []
|
|
this.draw.promotions()
|
|
}
|
|
remove(idx) {
|
|
this.data.promotions = this.data.promotions.filter(promotion => promotion !== idx)
|
|
this.draw.promotions()
|
|
}
|
|
draw = {
|
|
promotion: idx => {
|
|
const promotions = this.data.promotions.map(promotion => {
|
|
return `<div class="item" data-value="${promotion.id}">${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="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
|
|
this.components.promotions.innerHTML = this.data.promotions.map((promotion, 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)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
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()
|
|
}
|
|
}
|
|
class AddModalUnits {
|
|
ids = {
|
|
buttons_holder: '',
|
|
units: ''
|
|
}
|
|
data = {
|
|
button_map: {},
|
|
types: {},
|
|
units: [],
|
|
}
|
|
components = {
|
|
buttons_holder: null,
|
|
units: null,
|
|
}
|
|
|
|
constructor() {
|
|
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()
|
|
}
|
|
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 [
|
|
'<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">`,
|
|
'<input type="hidden" name="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="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('')
|
|
}).join('')
|
|
this.components.units.querySelectorAll('.dropdown').forEach(dropdown => {
|
|
$(dropdown).dropdown()
|
|
})
|
|
this.components.units.querySelectorAll('.remove_unit').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const idx = Number(button.dataset.id)
|
|
this.remove(idx)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
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 AddReservationModal {
|
|
ids = {
|
|
modal: '',
|
|
form: '',
|
|
date: '',
|
|
rut: '',
|
|
digit: '',
|
|
birthdate: '',
|
|
comuna: '',
|
|
region: '',
|
|
broker: '',
|
|
promotion_button: '',
|
|
promotions: '',
|
|
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,
|
|
unit_buttons: null,
|
|
units: 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() {
|
|
this.ids = {
|
|
modal: 'add_reservation_modal',
|
|
form: 'add_reservation_form',
|
|
date: 'add_date',
|
|
rut: 'add_rut',
|
|
digit: 'add_digit',
|
|
birthdate: 'add_birthdate',
|
|
comuna: 'add_comuna',
|
|
region: 'add_region',
|
|
broker: 'add_broker',
|
|
promotion_button: 'add_promotion',
|
|
promotions: 'add_promotions',
|
|
unit_buttons: 'add_unit_buttons',
|
|
units: 'add_units',
|
|
loader: 'add_rut_loader'
|
|
}
|
|
this.setup()
|
|
}
|
|
load(project_id) {
|
|
this.reset()
|
|
this.data.current_project = project_id
|
|
this.components.form.querySelector('input[name="project_id"]').value = project_id
|
|
|
|
this.get.brokers(project_id)
|
|
this.get.promotions(project_id).then(promotions => {
|
|
this.components.promotions.data.promotions = promotions
|
|
this.components.promotions.draw.promotions()
|
|
})
|
|
this.get.units(project_id).then(units => {
|
|
this.components.units.data.types = units
|
|
this.components.units.draw.buttons()
|
|
})
|
|
}
|
|
reset() {
|
|
this.components.form.reset()
|
|
this.components.promotions.reset()
|
|
this.components.units.reset()
|
|
}
|
|
add() {
|
|
const url = '/api/ventas/reservations/add'
|
|
const form = document.getElementById(this.ids.form)
|
|
const body = new FormData(form)
|
|
const date = this.components.$date.calendar('get date')
|
|
console.debug(date)
|
|
body.set('date', [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'))
|
|
body.set('comuna', this.components.$comuna.dropdown('get value'))
|
|
body.set('region', this.components.$region.dropdown('get value'))
|
|
body.set('broker_rut', this.components.$broker.dropdown('get value'))
|
|
/*body.set('promotions[]', '')
|
|
this.components.promotions.forEach(promotion => {
|
|
body.append('promotions[]', promotion.querySelector('promotion').value)
|
|
})*/
|
|
/*body.set('units[]', '')
|
|
this.components.units.forEach(unit => {
|
|
body.append('units[]', unit.querySelector('unit').value)
|
|
})*/
|
|
const method = 'post'
|
|
return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
|
|
if (json.success) {
|
|
window.location.reload()
|
|
}
|
|
})
|
|
}
|
|
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.map(promotion => {
|
|
return {
|
|
text: promotion.name,
|
|
name: promotion.name,
|
|
value: promotion.id
|
|
}
|
|
})
|
|
})
|
|
},
|
|
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`
|
|
return APIClient.fetch(uri).then(response => response.json()).then(json => {
|
|
if (json.total === 0) {
|
|
this.data.units[project_id] = {}
|
|
return this.data.units[project_id]
|
|
}
|
|
if (!(project_id in this.data.units)) {
|
|
this.data.units[project_id] = {}
|
|
}
|
|
Object.entries(json.unidades).forEach(([type, units]) => {
|
|
if (!(type in this.data.units[project_id])) {
|
|
this.data.units[project_id][type] = []
|
|
}
|
|
units.forEach(unit => {
|
|
this.data.units[project_id][type].push({
|
|
text: unit.descripcion,
|
|
name: unit.descripcion,
|
|
value: unit.id
|
|
})
|
|
})
|
|
})
|
|
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 => {
|
|
const form = this.components.form
|
|
form.querySelector('input[name="name"]').value = user.nombres || ''
|
|
form.querySelector('input[name="last_name"]').value = user.apellidoPaterno || ''
|
|
form.querySelector('input[name="last_name2"]').value = user.apellidoMaterno || ''
|
|
form.querySelector('input[name="calle"]').value = user.datos?.direccion?.calle || ''
|
|
form.querySelector('input[name="numero"]').value = user.datos?.direccion?.numero || ''
|
|
form.querySelector('input[name="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="phone"]').value = user.datos?.telefono
|
|
const email_parts = user.datos?.email.split('@')
|
|
form.querySelector('input[name="email_name"]').value = email_parts[0]
|
|
form.querySelector('input[name="email_domain"]').value = email_parts[1]
|
|
if ('estadoCivil' in user.datos) {
|
|
form.querySelector('input[name="civil_status"]').value = user.datos?.estadoCivil.charAt(0).toUpperCase() + user.datos?.estadoCivil.slice(1)
|
|
} else {
|
|
form.querySelector('input[name="civil_status"]').value = ''
|
|
}
|
|
if ('ocupacion' in user.datos) {
|
|
form.querySelector('input[name="profession"]').value = user.datos?.ocupacion
|
|
} else {
|
|
form.querySelector('input[name="profession"]').value = ''
|
|
}
|
|
if ('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.promotions = new AddModalPromotions()
|
|
this.components.units = new AddModalUnits()
|
|
|
|
this.components.$modal.modal({
|
|
onApprove: () => {
|
|
this.add()
|
|
}
|
|
})
|
|
this.components.form.addEventListener('submit', event => {
|
|
event.preventDefault()
|
|
this.add()
|
|
return false
|
|
})
|
|
const cdo = structuredClone(calendar_date_options)
|
|
cdo['startDate'] = 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['startDate'].setFullYear(cdo2['startDate'].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
|