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
|
||||
Reference in New Issue
Block a user