Common components
This commit is contained in:
Juan Pablo Vial
@ -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
|
||||
Reference in New Issue
Block a user