feature/cierres (#30)
Reservas agregar y aprobar Co-authored-by: Juan Pablo Vial <jpvialb@incoviba.cl> Reviewed-on: #30
This commit is contained in:
664
app/resources/views/ventas/reservations.blade.php
Normal file
664
app/resources/views/ventas/reservations.blade.php
Normal file
@ -0,0 +1,664 @@
|
||||
@extends('layout.base')
|
||||
|
||||
@section('page_title')
|
||||
Cierres - Reservas
|
||||
@endsection
|
||||
|
||||
@section('page_content')
|
||||
<div class="ui container">
|
||||
<h2 class="ui header">Cierres - Reservas</h2>
|
||||
|
||||
<div class="ui compact segment" id="projects">
|
||||
<div class="ui header">Proyectos</div>
|
||||
@if (count($projects) == 0)
|
||||
<div class="ui message">
|
||||
No hay proyectos en venta.
|
||||
</div>
|
||||
@else
|
||||
<div class="ui link list">
|
||||
@foreach ($projects as $project)
|
||||
<div class="item link" data-id="{{ $project->id }}">
|
||||
{{ $project->descripcion }}
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="ui two column grid">
|
||||
<div class="column">
|
||||
<h3 class="ui header" id="project"></h3>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ui active inline loader" id="loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="results">
|
||||
<div class="ui right aligned top attached basic segment" id="controls">
|
||||
<div class="ui tiny icon buttons">
|
||||
<button class="ui button" id="up_button">
|
||||
<i class="up arrow icon"></i>
|
||||
</button>
|
||||
<button class="ui button" id="refresh_button">
|
||||
<i class="refresh icon"></i>
|
||||
</button>
|
||||
<button class="ui green icon button" id="add_button">
|
||||
<i class="plus icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui top attached tabular menu" id="tabs">
|
||||
<div class="yellow active item" data-tab="pending">Pendientes</div>
|
||||
<div class="green item" data-tab="active">Activas</div>
|
||||
<div class="red item" data-tab="rejected">Rechazadas</div>
|
||||
</div>
|
||||
<div class="ui bottom attached tab fitted segment active" data-tab="pending">
|
||||
<table class="ui yellow striped table" id="pending_reservations">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Unidades</th>
|
||||
<th>Cliente</th>
|
||||
<th>Fecha</th>
|
||||
<th>Oferta</th>
|
||||
<th>¿Valida?</th>
|
||||
<th>Operador</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ui bottom attached tab fitted segment" data-tab="active">
|
||||
<table class="ui green striped table" id="active_reservations">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Unidades</th>
|
||||
<th>Cliente</th>
|
||||
<th>Fecha</th>
|
||||
<th>Oferta</th>
|
||||
<th>Operador</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ui bottom attached tab fitted segment" data-tab="rejected">
|
||||
<table class="ui red striped table" id="rejected_reservations">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Unidades</th>
|
||||
<th>Cliente</th>
|
||||
<th>Fecha</th>
|
||||
<th>Oferta</th>
|
||||
<th>Estado</th>
|
||||
<th>Operador</th>
|
||||
<th>Comentarios</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('ventas.reservations.modal.add')
|
||||
@endsection
|
||||
|
||||
@push('page_styles')
|
||||
<style>
|
||||
.item.link {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class Projects {
|
||||
display = {
|
||||
projects: '',
|
||||
project: ''
|
||||
}
|
||||
component_id = ''
|
||||
component = null
|
||||
current_project = null;
|
||||
title_id = ''
|
||||
title_component = null
|
||||
|
||||
constructor({component_id, title_id}) {
|
||||
this.component_id = component_id
|
||||
this.component = document.getElementById(this.component_id)
|
||||
this.display.projects = this.component.style.display
|
||||
this.title_id = title_id
|
||||
this.title_component = document.getElementById(this.title_id)
|
||||
this.display.project = this.title_component.style.display
|
||||
|
||||
this.show()
|
||||
this.watch()
|
||||
}
|
||||
|
||||
select(event) {
|
||||
event.preventDefault()
|
||||
|
||||
const project_id = event.currentTarget.dataset.id
|
||||
reservations.show.results()
|
||||
reservations.update.url(project_id)
|
||||
|
||||
if (project_id === this.current_project) {
|
||||
this.hide()
|
||||
this.title_component.innerHTML = event.currentTarget.innerHTML
|
||||
|
||||
reservations.action.reservations()
|
||||
|
||||
return
|
||||
}
|
||||
this.current_project = project_id
|
||||
|
||||
reservations.get.reservations(project_id)
|
||||
reservations.components.modals.add.load(project_id)
|
||||
this.hide()
|
||||
|
||||
this.title_component.innerHTML = event.currentTarget.innerHTML
|
||||
}
|
||||
|
||||
watch() {
|
||||
this.component.querySelectorAll('.item.link').forEach(item => {
|
||||
item.addEventListener('click', this.select.bind(this))
|
||||
})
|
||||
}
|
||||
|
||||
load(project_id) {
|
||||
this.component.querySelector(`.item.link[data-id="${project_id}"]`).click()
|
||||
}
|
||||
|
||||
show() {
|
||||
this.component.style.display = this.display.projects
|
||||
this.title_component.style.display = 'none'
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.component.style.display = 'none'
|
||||
this.title_component.style.display = this.display.project
|
||||
}
|
||||
}
|
||||
|
||||
class Controls {
|
||||
display = {
|
||||
up: '',
|
||||
reset: '',
|
||||
}
|
||||
component_id = ''
|
||||
component = null
|
||||
|
||||
buttons = {
|
||||
up: null,
|
||||
reset: null,
|
||||
add: null
|
||||
}
|
||||
|
||||
constructor({component_id}) {
|
||||
this.component_id = component_id
|
||||
this.component = document.getElementById(this.component_id)
|
||||
const buttons = this.component.querySelectorAll('button')
|
||||
this.buttons.up = buttons[0]
|
||||
this.buttons.reset = buttons[1]
|
||||
this.buttons.add = buttons[2]
|
||||
this.display.up = buttons[0].style.display
|
||||
this.display.reset = buttons[1].style.display
|
||||
|
||||
this.watch()
|
||||
this.hide()
|
||||
}
|
||||
|
||||
watch() {
|
||||
Object.entries(this.buttons).forEach(([key, value]) => {
|
||||
const name = key.replace('_button', '')
|
||||
value.addEventListener('click', this.action[name].bind(this))
|
||||
})
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.buttons.up.style.display = this.display.up
|
||||
this.buttons.reset.style.display = this.display.reset
|
||||
}
|
||||
|
||||
show() {
|
||||
this.buttons.up.style.display = 'none'
|
||||
this.buttons.reset.style.display = 'none'
|
||||
}
|
||||
|
||||
action = {
|
||||
reset: event => {
|
||||
event.preventDefault()
|
||||
reservations.action.reset(event)
|
||||
return false
|
||||
},
|
||||
up: event => {
|
||||
event.preventDefault()
|
||||
reservations.action.up(event)
|
||||
return false
|
||||
},
|
||||
add: event => {
|
||||
event.preventDefault()
|
||||
reservations.action.add(event)
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Reservations {
|
||||
display = {
|
||||
reservations: '',
|
||||
}
|
||||
component_id = ''
|
||||
component = null
|
||||
formatters = {
|
||||
date: null,
|
||||
ufs: null
|
||||
}
|
||||
columnNames = []
|
||||
reservations = []
|
||||
|
||||
constructor({component_id, formatters = {date, ufs}}) {
|
||||
this.component_id = component_id
|
||||
this.component = document.getElementById(this.component_id)
|
||||
this.display.reservations = this.component.style.display
|
||||
|
||||
this.formatters = formatters
|
||||
|
||||
this.set.columnNames()
|
||||
|
||||
this.hide()
|
||||
}
|
||||
|
||||
set = {
|
||||
reservations: reservations => {
|
||||
this.reservations = reservations
|
||||
return this
|
||||
},
|
||||
columnNames: () => {
|
||||
const tds = this.component.querySelector('thead tr').querySelectorAll('th')
|
||||
this.columnNames = []
|
||||
tds.forEach(td => {
|
||||
let name = td.innerHTML.toLowerCase()
|
||||
if (name === '') {
|
||||
return
|
||||
}
|
||||
if (name.includes('?')) {
|
||||
name = name.replaceAll(/[¿?]/g, '')
|
||||
}
|
||||
this.columnNames.push(name)
|
||||
})
|
||||
return this
|
||||
}
|
||||
}
|
||||
columnsData() {
|
||||
return this.reservations.map(reservation => {
|
||||
const date = new Date(Date.parse(reservation.date) + 24 * 60 * 60 * 1000)
|
||||
return {
|
||||
id: reservation.id,
|
||||
unidades: reservation.summary,
|
||||
cliente: reservation.buyer.nombreCompleto,
|
||||
fecha: this.formatters.date.format(date),
|
||||
oferta: `${this.formatters.ufs.format(reservation.offer)} UF`,
|
||||
valida: reservation.valid ? '<span class="ui green text">Si</span>' : '<span class="ui red text">No</span>',
|
||||
operador: reservation.broker?.name ?? '',
|
||||
}
|
||||
})
|
||||
}
|
||||
draw() {
|
||||
if (this.reservations.length === 0) {
|
||||
this.empty()
|
||||
return
|
||||
}
|
||||
const tbody = this.component.querySelector('tbody')
|
||||
tbody.innerHTML = ''
|
||||
this.columnsData().forEach(column => {
|
||||
const tr = document.createElement('tr')
|
||||
const contents = []
|
||||
const id = column.id
|
||||
this.columnNames.forEach(name => {
|
||||
contents.push(`<td>${column[name]}</td>`)
|
||||
})
|
||||
const actions = this.drawActions(id)
|
||||
if (actions !== '') {
|
||||
contents.push(actions)
|
||||
}
|
||||
tr.innerHTML = contents.join("\n")
|
||||
tbody.appendChild(tr)
|
||||
})
|
||||
this.show()
|
||||
|
||||
this.watch()
|
||||
}
|
||||
drawActions(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>`
|
||||
}
|
||||
watch() {
|
||||
if (Object.keys(this.actions).length === 0) {
|
||||
return
|
||||
}
|
||||
const actionNames = Object.keys(this.actions)
|
||||
const tbody = this.component.querySelector('tbody')
|
||||
const trs = tbody.querySelectorAll('tr')
|
||||
trs.forEach(tr => {
|
||||
actionNames.forEach(actionName => {
|
||||
const button = tr.querySelector(`button.${actionName}`)
|
||||
if (!button) {
|
||||
return
|
||||
}
|
||||
button.addEventListener('click', this.actions[actionName].bind(this))
|
||||
})
|
||||
})
|
||||
}
|
||||
empty() {
|
||||
const tbody = this.component.querySelector('tbody')
|
||||
tbody.innerHTML = ''
|
||||
const col_span = this.columnNames.length + 1
|
||||
const tr = document.createElement('tr')
|
||||
tr.innerHTML = `<td colspan="${col_span}">No hay cierres</td>`
|
||||
tbody.appendChild(tr)
|
||||
|
||||
this.show()
|
||||
}
|
||||
show() {
|
||||
this.component.style.display = this.display.reservations
|
||||
}
|
||||
hide() {
|
||||
this.component.style.display = 'none'
|
||||
}
|
||||
send = {
|
||||
get(url) {
|
||||
return APIClient.fetch(url).then(response => response.json()).then(json => {
|
||||
if (json.success) {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
},
|
||||
post(url, body) {
|
||||
const method = 'post'
|
||||
return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
|
||||
if (json.success) {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
},
|
||||
delete(url) {
|
||||
const method = 'delete'
|
||||
return APIClient.fetch(url, {method}).then(response => response.json()).then(json => {
|
||||
if (json.success) {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
actions = {}
|
||||
}
|
||||
|
||||
class ActiveReservations extends Reservations {
|
||||
constructor({component_id, formatters = {date, ufs}}) {
|
||||
super({component_id, formatters})
|
||||
}
|
||||
|
||||
columnsData() {
|
||||
const data = super.columnsData();
|
||||
return data.map(row => {
|
||||
delete (row['valida'])
|
||||
return row
|
||||
})
|
||||
}
|
||||
drawActions(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>`
|
||||
}
|
||||
actions = {
|
||||
edit: event => {
|
||||
event.preventDefault()
|
||||
const id = event.currentTarget.dataset.id
|
||||
reservations.components.modals.edit.load(id)
|
||||
return false
|
||||
},
|
||||
remove: event => {
|
||||
event.preventDefault()
|
||||
const id = event.currentTarget.dataset.id
|
||||
const url = `{{ $urls->api }}/ventas/reservation/${id}/remove`
|
||||
this.send.delete(url)
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class PendingReservations extends Reservations {
|
||||
constructor({component_id, formatters = {date, ufs}}) {
|
||||
super({component_id, formatters})
|
||||
}
|
||||
|
||||
actions = {
|
||||
approve: event => {
|
||||
event.preventDefault()
|
||||
const id = event.currentTarget.dataset.id
|
||||
const url = `{{ $urls->api }}/ventas/reservation/${id}/approve`
|
||||
this.send.get(url)
|
||||
return false
|
||||
},
|
||||
reject: event => {
|
||||
event.preventDefault()
|
||||
const id = event.currentTarget.dataset.id
|
||||
const url = `{{ $urls->api }}/ventas/reservation/${id}/reject`
|
||||
this.send.get(url)
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class RejectedReservations extends Reservations {
|
||||
constructor({component_id, formatters = {date, ufs}}) {
|
||||
super({component_id, formatters})
|
||||
}
|
||||
|
||||
columnsData() {
|
||||
const data = super.columnsData()
|
||||
return this.reservations.map((reservation, idx) => {
|
||||
data[idx]['estado'] = reservation.state.charAt(0).toUpperCase() + reservation.state.slice(1)
|
||||
data[idx]['comentarios'] = reservation.comments?.join('<br />\n') ?? ''
|
||||
return data[idx]
|
||||
})
|
||||
}
|
||||
drawActions(id) {
|
||||
return ''
|
||||
}
|
||||
watch() {}
|
||||
}
|
||||
|
||||
const reservations = {
|
||||
components: {
|
||||
projects: null,
|
||||
loader: null,
|
||||
results: null,
|
||||
controls: null,
|
||||
reservations: {
|
||||
active: null,
|
||||
pending: null,
|
||||
rejected: null
|
||||
},
|
||||
modals: {
|
||||
add: null
|
||||
}
|
||||
},
|
||||
display: {
|
||||
loader: '',
|
||||
results: '',
|
||||
},
|
||||
get: {
|
||||
send: (project_id, url_segment, component) => {
|
||||
const url = `/api/ventas/reservations/project/${project_id}/${url_segment}`
|
||||
return APIClient.fetch(url).then(response => response.json()).then(json => {
|
||||
if (json.reservations.length > 0) {
|
||||
component.set.reservations(json.reservations)
|
||||
}
|
||||
component.draw()
|
||||
})
|
||||
},
|
||||
active: project_id => {
|
||||
return reservations.get.send(project_id, 'active', reservations.components.reservations.active)
|
||||
},
|
||||
pending: project_id => {
|
||||
return reservations.get.send(project_id, 'pending', reservations.components.reservations.pending)
|
||||
},
|
||||
rejected: project_id => {
|
||||
return reservations.get.send(project_id, 'rejected', reservations.components.reservations.rejected)
|
||||
},
|
||||
reservations: project_id => {
|
||||
reservations.loading.show()
|
||||
|
||||
const promises = []
|
||||
|
||||
promises.push(reservations.get.active(project_id))
|
||||
promises.push(reservations.get.pending(project_id))
|
||||
promises.push(reservations.get.rejected(project_id))
|
||||
|
||||
return Promise.any(promises).then(() => {
|
||||
reservations.loading.hide()
|
||||
})
|
||||
},
|
||||
pathname: project_id => {
|
||||
const current_url = new URL(window.location.href)
|
||||
if (project_id === null) {
|
||||
if (current_url.pathname.includes('project')) {
|
||||
return current_url.pathname.replace(/\/project\/\d+/, '')
|
||||
}
|
||||
return current_url.pathname
|
||||
}
|
||||
if (current_url.pathname.includes('project')) {
|
||||
return current_url.pathname.replace(/project\/\d+/, `project/${project_id}`)
|
||||
}
|
||||
return `${current_url.pathname}/project/${project_id}`
|
||||
}
|
||||
},
|
||||
loading: {
|
||||
show: () => {
|
||||
reservations.components.loader.style.display = reservations.display.loader
|
||||
},
|
||||
hide: () => {
|
||||
reservations.components.loader.style.display = 'none'
|
||||
}
|
||||
},
|
||||
update: {
|
||||
url: project_id => {
|
||||
window.history.pushState(null, '', reservations.get.pathname(project_id))
|
||||
}
|
||||
},
|
||||
action: {
|
||||
reset: event => {
|
||||
event.preventDefault()
|
||||
reservations.components.projects.current_project = null
|
||||
Object.entries(reservations.components.reservations).forEach(([key, value]) => {
|
||||
reservations.components.reservations[key].reservations = []
|
||||
reservations.components.reservations[key].hide()
|
||||
})
|
||||
reservations.show.projects()
|
||||
reservations.update.url(null)
|
||||
return false
|
||||
},
|
||||
up: event => {
|
||||
event.preventDefault()
|
||||
Object.values(reservations.components.reservations).forEach(reservations => reservations.hide())
|
||||
reservations.show.projects()
|
||||
reservations.update.url(null)
|
||||
return false
|
||||
},
|
||||
add: event => {
|
||||
event.preventDefault()
|
||||
reservations.components.modals.add.show()
|
||||
return false
|
||||
},
|
||||
reservations: () => {
|
||||
Object.values(reservations.components.reservations).forEach(reservations => {
|
||||
reservations.draw()
|
||||
})
|
||||
}
|
||||
},
|
||||
show: {
|
||||
projects: () => {
|
||||
reservations.components.projects.show()
|
||||
reservations.components.results.style.display = 'none'
|
||||
},
|
||||
results: () => {
|
||||
reservations.components.projects.hide()
|
||||
reservations.components.results.style.display = reservations.display.results
|
||||
Object.values(reservations.components.reservations).forEach(reservations => reservations.draw())
|
||||
}
|
||||
},
|
||||
setup(configuration) {
|
||||
const formatters = {
|
||||
date: new Intl.DateTimeFormat('es-CL', {year: 'numeric', month: 'long', day: 'numeric'}),
|
||||
ufs: new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
|
||||
}
|
||||
this.components.loader = document.getElementById(configuration.ids.loader)
|
||||
this.components.projects = new Projects({
|
||||
component_id: configuration.ids.projects,
|
||||
title_id: configuration.ids.project
|
||||
})
|
||||
this.components.controls = new Controls({component_id: configuration.ids.controls})
|
||||
this.components.reservations.active = new ActiveReservations({
|
||||
component_id: configuration.ids.active,
|
||||
formatters
|
||||
})
|
||||
this.components.reservations.pending = new PendingReservations({
|
||||
component_id: configuration.ids.pending,
|
||||
formatters
|
||||
})
|
||||
this.components.reservations.rejected = new RejectedReservations({
|
||||
component_id: configuration.ids.rejected,
|
||||
formatters
|
||||
})
|
||||
|
||||
this.display.loader = this.components.loader.style.display
|
||||
this.loading.hide()
|
||||
|
||||
$(`#${configuration.ids.tabs} .item`).tab()
|
||||
this.components.results = document.getElementById(configuration.ids.results)
|
||||
this.display.results = this.components.results.style.display
|
||||
this.show.projects()
|
||||
|
||||
this.components.modals.add = new AddReservationModal(configuration.ids.projects)
|
||||
|
||||
const project_id = {{ $project_id ?? 'null' }};
|
||||
if (project_id !== null) {
|
||||
reservations.components.projects.load(project_id)
|
||||
}
|
||||
}
|
||||
}
|
||||
$(document).ready(() => {
|
||||
reservations.setup({
|
||||
ids: {
|
||||
projects: 'projects',
|
||||
project: 'project',
|
||||
results: 'results',
|
||||
loader: 'loader',
|
||||
controls: 'controls',
|
||||
tabs: 'tabs',
|
||||
active: 'active_reservations',
|
||||
pending: 'pending_reservations',
|
||||
rejected: 'rejected_reservations',
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
758
app/resources/views/ventas/reservations/modal/add.blade.php
Normal file
758
app/resources/views/ventas/reservations/modal/add.blade.php
Normal file
@ -0,0 +1,758 @@
|
||||
<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>
|
||||
</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="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
|
||||
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="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="number" name="add_units_value[]" placeholder="Valor" />',
|
||||
'<div class="ui basic label">UF</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: '',
|
||||
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,
|
||||
$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) {
|
||||
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',
|
||||
projects: projects_id,
|
||||
project_name: 'add_project_name',
|
||||
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.project_name.textContent = this.components.projects.querySelector(`.item[data-id="${project_id}"]`).textContent
|
||||
this.components.form.querySelector('input[name="add_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/reservation/add'
|
||||
const form = document.getElementById(this.ids.form)
|
||||
const body = new FormData(form)
|
||||
const date = this.components.$date.calendar('get date')
|
||||
body.set('add_date', [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'))
|
||||
body.set('add_buyer_rut', Rut.clean(this.components.rut.querySelector('input').value))
|
||||
body.set('add_buyer_digit', this.components.digit.textContent)
|
||||
body.set('add_buyer_address_comuna_id', this.components.$comuna.dropdown('get value'))
|
||||
body.set('add_broker_rut', Rut.clean(this.components.$broker.dropdown('get value')))
|
||||
body.set('add_buyer_email', form.querySelector("input[name='add_buyer_email_name']").value + '@' + form.querySelector("input[name='add_buyer_email_domain']").value)
|
||||
const birthdate = this.components.$birthdate.calendar('get date')
|
||||
body.set('add_buyer_birthdate', [birthdate.getFullYear(), birthdate.getMonth() + 1, birthdate.getDate()].join('-'))
|
||||
|
||||
body.delete('comuna')
|
||||
body.delete('region')
|
||||
body.delete('broker')
|
||||
body.delete('add_broker')
|
||||
body.delete('birthdate')
|
||||
body.delete('add_buyer_email_name')
|
||||
body.delete('add_buyer_email_domain')
|
||||
|
||||
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/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({
|
||||
text: unit.descripcion,
|
||||
name: unit.descripcion,
|
||||
value: unit.id
|
||||
})
|
||||
})
|
||||
Object.entries(this.data.units[project_id]).forEach(([type, units]) => {
|
||||
units.sort((a, b) => {
|
||||
return parseInt(a.text) - parseInt(b.text)
|
||||
})
|
||||
this.data.units[project_id][type] = units
|
||||
})
|
||||
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="add_buyer_name"]').value = user.nombres || ''
|
||||
form.querySelector('input[name="add_buyer_last_name"]').value = user.apellidoPaterno || ''
|
||||
form.querySelector('input[name="add_buyer_last_name2"]').value = user.apellidoMaterno || ''
|
||||
form.querySelector('input[name="add_buyer_address_street"]').value = user.datos?.direccion?.calle || ''
|
||||
form.querySelector('input[name="add_buyer_address_number"]').value = user.datos?.direccion?.numero || ''
|
||||
form.querySelector('input[name="add_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="add_buyer_phone"]').value = user.datos?.telefono || ''
|
||||
const email_parts = user.datos?.email?.split('@') || []
|
||||
form.querySelector('input[name="add_buyer_email_name"]').value = email_parts[0] || ''
|
||||
form.querySelector('input[name="add_buyer_email_domain"]').value = email_parts[1] || ''
|
||||
if (user.datos !== null && 'estadoCivil' in user.datos) {
|
||||
form.querySelector('input[name="add_buyer_marital_status"]').value = user.datos?.estadoCivil.charAt(0).toUpperCase() + user.datos?.estadoCivil.slice(1)
|
||||
} else {
|
||||
form.querySelector('input[name="add_buyer_marital_status"]').value = ''
|
||||
}
|
||||
if (user.datos !== null &&'ocupacion' in user.datos) {
|
||||
form.querySelector('input[name="add_buyer_profession"]').value = user.datos?.ocupacion.charAt(0).toUpperCase() + user.datos?.ocupacion.slice(1).toLowerCase()
|
||||
} else {
|
||||
form.querySelector('input[name="add_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.promotions = new AddModalPromotions()
|
||||
this.components.projects = document.getElementById(this.ids.projects)
|
||||
this.components.project_name = document.getElementById(this.ids.project_name)
|
||||
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['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