Common components

This commit is contained in:
Juan Pablo Vial
2025-11-12 10:16:19 -03:00
parent c254ac11fe
commit 4760b08673
11 changed files with 1161 additions and 822 deletions

View File

@ -101,6 +101,12 @@
</div>
</div>
@include('layout.body.scripts.rut')
@include('ventas.reservations.modal.common.scripts.promotions')
@include('ventas.reservations.modal.common.scripts.units')
@include('ventas.reservations.modal.common.scripts.payments')
@include('ventas.reservations.modal.common.scripts.modal')
@include('ventas.reservations.modal.add')
@include('ventas.reservations.modal.edit')
@include('ventas.reservations.modal.comment')
@ -295,6 +301,7 @@
return this
}
}
get columnsData() {
const columnValues = {
id: reservation => reservation.id,
@ -321,6 +328,7 @@
return data
})
}
draw() {
return {
tbody: () => {
@ -355,20 +363,46 @@
this.watch()
},
actions: 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>`
return [
'<td class="right aligned">',
this.draw().actionButtons().edit(id),
this.draw().actionButtons().approve(id),
this.draw().actionButtons().reject(id),
'</td>'
].join("\n")
},
actionButtons: () => {
return {
edit: id => {
return [
`<button class="ui blue mini icon button edit" data-id="${id}" title="Editar">`,
'<i class="edit icon"></i>',
'</button>'
].join("\n")
},
approve: id => {
return [
`<button class="ui green mini icon button approve" data-id="${id}" title="Aprobar">`,
'<i class="check icon"></i>',
'</button>'
].join("\n")
},
reject: id => {
return [
`<button class="ui red mini icon button reject" data-id="${id}" title="Rechazar">`,
'<i class="trash icon"></i>',
'</button>'
].join("\n")
}
}
},
tooltip: () => {
return {
oferta: reservation => {
const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
const formatter = new Intl.NumberFormat('es-CL', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
})
const output = []
const table = ['<table>']
@ -401,7 +435,10 @@
return output.join("<br />")
},
cliente: reservation => {
const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 0, maximumFractionDigits: 0})
const formatter = new Intl.NumberFormat('es-CL', {
minimumFractionDigits: 0,
maximumFractionDigits: 0
})
return [
`RUT: ${formatter.format(reservation.buyer.rut)}-${reservation.buyer.digito}`
].join("<br />")
@ -410,6 +447,7 @@
}
}
}
watch() {
if (Object.keys(this.actions).length === 0) {
return
@ -427,6 +465,7 @@
})
})
}
empty() {
const tbody = this.component.querySelector('tbody')
tbody.innerHTML = ''
@ -437,15 +476,19 @@
this.show()
}
show() {
this.component.style.display = this.display.reservations
}
hide() {
this.component.style.display = 'none'
}
find(id) {
return this.reservations.find(reservation => reservation.id === parseInt(id))
}
send = {
get(url) {
return APIClient.fetch(url).then(response => response.json()).then(json => {
@ -474,30 +517,49 @@
get columnsData() {
const data = super.columnsData;
return data.map(row => {
delete(row['valida'])
delete (row['valida'])
return row
})
}
draw() {
const draw = super.draw()
const actionButtons = draw.actionButtons()
draw.actionButtons = () => {
actionButtons['promise'] = id => {
return [
`<button class="ui green mini icon button promise" data-id="${id}" title="Promesar">`,
'<i class="right chevron icon"></i>',
'</button>'
].join("\n")
}
actionButtons['remove'] = id => {
return [
`<button class="ui red mini icon button remove" data-id="${id}" title="Abandonar">`,
'<i class="trash icon"></i>',
'</button>'
].join("\n")
}
return actionButtons
}
draw.actions = (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>`
return [
'<td class="right aligned">',
this.draw().actionButtons().edit(id),
this.draw().actionButtons().promise(id),
this.draw().actionButtons().remove(id),
'</td>'
].join("\n")
}
return draw
}
actions = {
edit: event => {
event.preventDefault()
const id = event.currentTarget.dataset.id
reservations.components.modals.edit.load(id)
const project_id = {{ $project_id ?? 'null' }};
reservations.components.modals.edit.load({project_id, type: 'active', reservation_id: id})
return false
},
remove: event => {
@ -522,7 +584,10 @@
const draw = super.draw()
const tooltip = draw.tooltip()
tooltip['valida'] = reservation => {
const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
const formatter = new Intl.NumberFormat('es-CL', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
})
const output = []
const table = [
@ -590,7 +655,15 @@
}
return draw
}
actions = {
edit: event => {
event.preventDefault()
const id = event.currentTarget.dataset.id
const project_id = {{ $project_id ?? 'null' }};
reservations.components.modals.edit.load({project_id, type: 'pending', reservation_id: id})
return false
},
approve: event => {
event.preventDefault()
const id = event.currentTarget.dataset.id
@ -624,6 +697,7 @@
return data[idx]
})
}
draw() {
const draw = super.draw()
draw.actions = (id) => {
@ -631,7 +705,9 @@
}
return draw
}
watch() {}
watch() {
}
mapState(state) {
return {
@ -794,7 +870,7 @@
this.show.projects()
this.components.modals.add = new AddReservationModal(configuration.ids.projects)
this.components.modals.edit = new EditReservationModal()
this.components.modals.edit = new EditReservationModal(configuration.ids.projects)
this.components.modals.comment = new CommentModal()
const project_id = {{ $project_id ?? 'null' }};