Common components
This commit is contained in:
@ -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' }};
|
||||
|
||||
Reference in New Issue
Block a user