Unidades disponibles y nombre de proyecto

This commit is contained in:
Juan Pablo Vial
2025-08-28 12:11:33 -04:00
parent ae4487e391
commit 52cc463ff1
2 changed files with 102 additions and 77 deletions

View File

@ -101,7 +101,7 @@
</div> </div>
</div> </div>
@include('ventas.reservations.add_modal') @include('ventas.reservations.modal.add')
@endsection @endsection
@push('page_styles') @push('page_styles')
@ -160,20 +160,24 @@
this.title_component.innerHTML = event.currentTarget.innerHTML this.title_component.innerHTML = event.currentTarget.innerHTML
} }
watch() { watch() {
this.component.querySelectorAll('.item.link').forEach(item => { this.component.querySelectorAll('.item.link').forEach(item => {
item.addEventListener('click', this.select.bind(this)) item.addEventListener('click', this.select.bind(this))
}) })
} }
show() { show() {
this.component.style.display = this.display.projects this.component.style.display = this.display.projects
this.title_component.style.display = 'none' this.title_component.style.display = 'none'
} }
hide() { hide() {
this.component.style.display = 'none' this.component.style.display = 'none'
this.title_component.style.display = this.display.project this.title_component.style.display = this.display.project
} }
} }
class Controls { class Controls {
display = { display = {
up: '', up: '',
@ -208,10 +212,12 @@
value.addEventListener('click', this.action[name].bind(this)) value.addEventListener('click', this.action[name].bind(this))
}) })
} }
hide() { hide() {
this.buttons.up.style.display = this.display.up this.buttons.up.style.display = this.display.up
this.buttons.reset.style.display = this.display.reset this.buttons.reset.style.display = this.display.reset
} }
show() { show() {
this.buttons.up.style.display = 'none' this.buttons.up.style.display = 'none'
this.buttons.reset.style.display = 'none' this.buttons.reset.style.display = 'none'
@ -235,6 +241,7 @@
} }
} }
} }
class Reservations { class Reservations {
display = { display = {
reservations: '', reservations: '',
@ -256,13 +263,12 @@
this.formatters = formatters this.formatters = formatters
this.set().columnNames() this.set.columnNames()
this.hide() this.hide()
} }
set() { set = {
return {
reservations: reservations => { reservations: reservations => {
this.reservations = reservations this.reservations = reservations
return this return this
@ -283,7 +289,7 @@
return this return this
} }
} }
}
columnsData() { columnsData() {
return this.reservations.map(reservation => { return this.reservations.map(reservation => {
const date = new Date(Date.parse(reservation.fecha) + 24 * 60 * 60 * 1000) const date = new Date(Date.parse(reservation.fecha) + 24 * 60 * 60 * 1000)
@ -298,7 +304,12 @@
} }
}) })
} }
draw() { draw() {
if (this.reservations.length === 0) {
this.empty()
return
}
const tbody = this.component.querySelector('tbody') const tbody = this.component.querySelector('tbody')
tbody.innerHTML = '' tbody.innerHTML = ''
this.columnsData().forEach(column => { this.columnsData().forEach(column => {
@ -317,6 +328,7 @@
}) })
this.show() this.show()
} }
drawActions(id) { drawActions(id) {
return ` return `
<td class="right aligned"> <td class="right aligned">
@ -328,6 +340,7 @@
</button> </button>
</td>` </td>`
} }
empty() { empty() {
const tbody = this.component.querySelector('tbody') const tbody = this.component.querySelector('tbody')
tbody.innerHTML = '' tbody.innerHTML = ''
@ -342,21 +355,25 @@
show() { show() {
this.component.style.display = this.display.reservations this.component.style.display = this.display.reservations
} }
hide() { hide() {
this.component.style.display = 'none' this.component.style.display = 'none'
} }
} }
class ActiveReservations extends Reservations { class ActiveReservations extends Reservations {
constructor({component_id, formatters = {date, ufs}}) { constructor({component_id, formatters = {date, ufs}}) {
super({component_id, formatters}) super({component_id, formatters})
} }
columnsData() { columnsData() {
const data = super.columnsData(); const data = super.columnsData();
return data.map(row => { return data.map(row => {
delete(row['valida']) delete (row['valida'])
return row return row
}) })
} }
drawActions(id) { drawActions(id) {
return ` return `
<td class="right aligned"> <td class="right aligned">
@ -369,11 +386,13 @@
</td>` </td>`
} }
} }
class PendingReservations extends Reservations { class PendingReservations extends Reservations {
constructor({component_id, formatters = {date, ufs}}) { constructor({component_id, formatters = {date, ufs}}) {
super({component_id, formatters}) super({component_id, formatters})
} }
} }
class RejectedReservations extends Reservations { class RejectedReservations extends Reservations {
constructor({component_id, formatters = {date, ufs}}) { constructor({component_id, formatters = {date, ufs}}) {
super({component_id, formatters}) super({component_id, formatters})
@ -392,6 +411,7 @@
return '' return ''
} }
} }
const reservations = { const reservations = {
components: { components: {
projects: null, projects: null,
@ -415,42 +435,20 @@
send: (project_id, url_segment, component) => { send: (project_id, url_segment, component) => {
const url = `/api/ventas/reservations/project/${project_id}/${url_segment}` const url = `/api/ventas/reservations/project/${project_id}/${url_segment}`
return APIClient.fetch(url).then(response => response.json()).then(json => { return APIClient.fetch(url).then(response => response.json()).then(json => {
if (json.reservations.length === 0) { if (json.reservations.length > 0) {
component.empty() component.set.reservations(json.reservations)
return
} }
component.set().reservations(json.reservations).draw() component.draw()
}) })
}, },
active: project_id => { active: project_id => {
return reservations.get.send(project_id, 'active', reservations.components.reservations.active) return reservations.get.send(project_id, 'active', reservations.components.reservations.active)
/*const url = `/ventas/reservations/project/${project_id}/active`
return APIClient.fetch(url).then(json => {
if (json.reservations.length === 0) {
return
}
this.components.reservations.active.set().reservations(json.reservations).draw()
})*/
}, },
pending: project_id => { pending: project_id => {
return reservations.get.send(project_id, 'pending', reservations.components.reservations.pending) return reservations.get.send(project_id, 'pending', reservations.components.reservations.pending)
/*const url = `/ventas/reservations/project/${project_id}/pending`
return APIClient.fetch(url).then(json => {
if (json.reservations.length === 0) {
return
}
this.components.reservations.pending.set().reservations(json.reservations).draw()
})*/
}, },
rejected: project_id => { rejected: project_id => {
return reservations.get.send(project_id, 'rejected', reservations.components.reservations.rejected) return reservations.get.send(project_id, 'rejected', reservations.components.reservations.rejected)
/*const url = `/ventas/reservations/project/${project_id}/rejected`
return APIClient.fetch(url).then(json => {
if (json.reservations.length === 0) {
return
}
this.components.reservations.rejected.set().reservations(json.reservations).draw()
})*/
}, },
reservations: project_id => { reservations: project_id => {
reservations.loading.show() reservations.loading.show()
@ -510,6 +508,7 @@
results: () => { results: () => {
reservations.components.projects.hide() reservations.components.projects.hide()
reservations.components.results.style.display = reservations.display.results reservations.components.results.style.display = reservations.display.results
Object.values(reservations.components.reservations).forEach(reservations => reservations.draw())
} }
}, },
setup(configuration) { setup(configuration) {
@ -518,11 +517,23 @@
ufs: new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2}) ufs: new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
} }
this.components.loader = document.getElementById(configuration.ids.loader) 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.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.controls = new Controls({component_id: configuration.ids.controls})
this.components.reservations.active = new ActiveReservations({component_id: configuration.ids.active, formatters}) this.components.reservations.active = new ActiveReservations({
this.components.reservations.pending = new PendingReservations({component_id: configuration.ids.pending, formatters}) component_id: configuration.ids.active,
this.components.reservations.rejected = new RejectedReservations({component_id: configuration.ids.rejected, formatters}) 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.display.loader = this.components.loader.style.display
this.loading.hide() this.loading.hide()
@ -532,7 +543,7 @@
this.display.results = this.components.results.style.display this.display.results = this.components.results.style.display
this.show.projects() this.show.projects()
this.components.modals.add = new AddReservationModal() this.components.modals.add = new AddReservationModal(configuration.ids.projects)
} }
} }
$(document).ready(() => { $(document).ready(() => {

View File

@ -128,7 +128,7 @@
</button> </button>
</div> </div>
<div id="add_promotions"></div> <div id="add_promotions"></div>
<h4 class="ui dividing header">Unidades</h4> <h4 class="ui dividing header">Unidades <span id="add_project_name"></span></h4>
<div class="fields" id="add_unit_buttons"></div> <div class="fields" id="add_unit_buttons"></div>
<div id="add_units"></div> <div id="add_units"></div>
</form> </form>
@ -365,6 +365,8 @@
broker: '', broker: '',
promotion_button: '', promotion_button: '',
promotions: '', promotions: '',
projects: '',
project_name: '',
unit_buttons: '', unit_buttons: '',
units: '' units: ''
} }
@ -381,6 +383,8 @@
$broker: null, $broker: null,
promotion_button: null, promotion_button: null,
promotions: null, promotions: null,
projects: null,
project_name: null,
unit_buttons: null, unit_buttons: null,
units: null, units: null,
$loader: null $loader: null
@ -403,7 +407,7 @@
terraza: 'tree', terraza: 'tree',
} }
} }
constructor() { constructor(projects_id) {
this.ids = { this.ids = {
modal: 'add_reservation_modal', modal: 'add_reservation_modal',
form: 'add_reservation_form', form: 'add_reservation_form',
@ -416,6 +420,8 @@
broker: 'add_broker', broker: 'add_broker',
promotion_button: 'add_promotion', promotion_button: 'add_promotion',
promotions: 'add_promotions', promotions: 'add_promotions',
projects: projects_id,
project_name: 'add_project_name',
unit_buttons: 'add_unit_buttons', unit_buttons: 'add_unit_buttons',
units: 'add_units', units: 'add_units',
loader: 'add_rut_loader' loader: 'add_rut_loader'
@ -425,6 +431,7 @@
load(project_id) { load(project_id) {
this.reset() this.reset()
this.data.current_project = project_id 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.components.form.querySelector('input[name="add_project_id"]').value = project_id
this.get.brokers(project_id) this.get.brokers(project_id)
@ -572,26 +579,31 @@
resolve(this.data.units[project_id]) resolve(this.data.units[project_id])
}) })
} }
const uri = `/api/proyecto/${project_id}/unidades` const uri = `/api/proyecto/${project_id}/unidades/disponibles`
return APIClient.fetch(uri).then(response => response.json()).then(json => { return APIClient.fetch(uri).then(response => response.json()).then(json => {
if (json.total === 0) { if (json.unidades.length === 0) {
this.data.units[project_id] = {} this.data.units[project_id] = {}
return this.data.units[project_id] return this.data.units[project_id]
} }
if (!(project_id in this.data.units)) { if (!(project_id in this.data.units)) {
this.data.units[project_id] = {} this.data.units[project_id] = {}
} }
Object.entries(json.unidades).forEach(([type, units]) => { json.unidades.forEach(unit => {
const type = unit.proyecto_tipo_unidad.tipo_unidad.descripcion
if (!(type in this.data.units[project_id])) { if (!(type in this.data.units[project_id])) {
this.data.units[project_id][type] = [] this.data.units[project_id][type] = []
} }
units.forEach(unit => {
this.data.units[project_id][type].push({ this.data.units[project_id][type].push({
text: unit.descripcion, text: unit.descripcion,
name: unit.descripcion, name: unit.descripcion,
value: unit.id 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] return this.data.units[project_id]
}) })
@ -692,6 +704,8 @@
this.components.$region = $(`#${this.ids.region}`) this.components.$region = $(`#${this.ids.region}`)
this.components.$broker = $(`#${this.ids.broker}`) this.components.$broker = $(`#${this.ids.broker}`)
this.components.promotions = new AddModalPromotions() 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.units = new AddModalUnits()
this.components.$modal.modal({ this.components.$modal.modal({