Show table tooltips
This commit is contained in:
@ -304,26 +304,20 @@
|
|||||||
valida: reservation => reservation.valid ? '<span class="ui green text">Si</span>' : '<span class="ui red text">No</span>',
|
valida: reservation => reservation.valid ? '<span class="ui green text">Si</span>' : '<span class="ui red text">No</span>',
|
||||||
operador: reservation => reservation.broker?.name ?? '',
|
operador: reservation => reservation.broker?.name ?? '',
|
||||||
};
|
};
|
||||||
|
const tooltipVariation = 'very wide multiline'
|
||||||
|
const tooltips = this.draw().tooltip()
|
||||||
return this.reservations.map(reservation => {
|
return this.reservations.map(reservation => {
|
||||||
//const date = new Date(Date.parse(reservation.date) + 24 * 60 * 60 * 1000)
|
|
||||||
const data = {}
|
const data = {}
|
||||||
Object.entries(columnValues).forEach(([key, value]) => {
|
Object.entries(columnValues).forEach(([key, value]) => {
|
||||||
if (key in this.draw().tooltip()) {
|
if (key in tooltips) {
|
||||||
data[key] = `data-content="${this.draw().tooltip()[key](reservation)}" data-variation="very wide">${value(reservation)}`
|
const processor = tooltips[key]
|
||||||
|
const content = processor(reservation)//.replaceAll(' ', ' ')
|
||||||
|
data[key] = `data-html="${content}" data-variation="${tooltipVariation}">${value(reservation)}`
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
data[key] = value(reservation)
|
data[key] = value(reservation)
|
||||||
})
|
})
|
||||||
return data
|
return data
|
||||||
/*return {
|
|
||||||
id: reservation.id,
|
|
||||||
unidades: reservation.summary,
|
|
||||||
cliente: `data-content="${this.draw().tooltip().buyer(reservation)}">${reservation.buyer.nombreCompleto}`,
|
|
||||||
fecha: this.formatters.date.format(date),
|
|
||||||
oferta: `data-content="${this.draw().tooltip().payment(reservation)}">${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() {
|
draw() {
|
||||||
@ -341,7 +335,7 @@
|
|||||||
const id = column.id
|
const id = column.id
|
||||||
this.columnNames.forEach(name => {
|
this.columnNames.forEach(name => {
|
||||||
let td = `<td>${column[name]}</td>`
|
let td = `<td>${column[name]}</td>`
|
||||||
if (['oferta', 'cliente', 'valida'].includes(name)) {
|
if (column[name].includes('data-content') || column[name].includes('data-html')) {
|
||||||
td = `<td ${column[name]}</td>`
|
td = `<td ${column[name]}</td>`
|
||||||
}
|
}
|
||||||
contents.push(td)
|
contents.push(td)
|
||||||
@ -355,7 +349,7 @@
|
|||||||
})
|
})
|
||||||
this.show()
|
this.show()
|
||||||
|
|
||||||
$(this.component).find('[data-content]').popup()
|
$(this.component).find('[data-content],[data-html]').popup()
|
||||||
|
|
||||||
this.watch()
|
this.watch()
|
||||||
},
|
},
|
||||||
@ -376,28 +370,40 @@
|
|||||||
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 output = []
|
||||||
|
const table = ['<table>']
|
||||||
reservation.units.forEach(unit => {
|
reservation.units.forEach(unit => {
|
||||||
const type = unit.unit.proyecto_tipo_unidad.tipo_unidad.descripcion
|
const type = unit.unit.proyecto_tipo_unidad.tipo_unidad.descripcion
|
||||||
output.push(`${type.charAt(0).toUpperCase() + type.slice(1)} ${unit.unit.descripcion}: ${formatter.format(unit.value)} UF`)
|
table.push(`<tr><td>${type.charAt(0).toUpperCase() + type.slice(1)} ${unit.unit.descripcion}:</td><td align='right'>${formatter.format(unit.value)} UF</td></tr>`)
|
||||||
})
|
})
|
||||||
if (reservation.broker !== null) {
|
if (reservation.broker !== null) {
|
||||||
output.push('-----')
|
table.push('<tr><td>-----</td></tr>')
|
||||||
let commission = reservation.broker.commission
|
let commission = reservation.broker.commission
|
||||||
output.push(`Broker: ${reservation.broker.name} (${commission})`)
|
table.push(`<tr><td>Broker:</td><td align='right'>${reservation.broker.name}</td><td align='right'>(${commission})</td></tr>`)
|
||||||
}
|
}
|
||||||
if (reservation.promotions.length > 0) {
|
if (reservation.promotions.length > 0) {
|
||||||
output.push('-----')
|
table.push('<tr><td>-----</td></tr>')
|
||||||
reservation.promotions.forEach(promotion => {
|
reservation.promotions.forEach(promotion => {
|
||||||
output.push(`${promotion.name}: ${formatter.format(promotion.value)} UF`)
|
let value = 0
|
||||||
|
switch (promotion.type) {
|
||||||
|
case {{ \Incoviba\Model\Venta\Promotion\Type::FIXED }}:
|
||||||
|
value = `${formatter.format(promotion.amount)} UF`
|
||||||
|
break;
|
||||||
|
case {{ \Incoviba\Model\Venta\Promotion\Type::VARIABLE }}:
|
||||||
|
value = `${formatter.format(promotion.amount * 100)} %`
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
table.push(`<tr><td>${promotion.description}:</td><td align='right'>${value}</td></tr>`)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
return output.join("\n")
|
table.push('</table>')
|
||||||
|
output.push(table.join(''))
|
||||||
|
return output.join("<br />")
|
||||||
},
|
},
|
||||||
cliente: reservation => {
|
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 [
|
return [
|
||||||
`RUT: ${formatter.format(reservation.buyer.rut)}-${reservation.buyer.digito}`
|
`RUT: ${formatter.format(reservation.buyer.rut)}-${reservation.buyer.digito}`
|
||||||
].join("\n")
|
].join("<br />")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -518,27 +524,43 @@
|
|||||||
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 output = []
|
||||||
|
const table = [
|
||||||
|
'<table>',
|
||||||
|
'<thead>',
|
||||||
|
'<tr>',
|
||||||
|
'<th></th>',
|
||||||
|
'<th>Base Oferta</th>',
|
||||||
|
'<th>Precio</th>',
|
||||||
|
'</thead>'
|
||||||
|
]
|
||||||
reservation.units.forEach(unit => {
|
reservation.units.forEach(unit => {
|
||||||
let type = unit.unit.proyecto_tipo_unidad.tipo_unidad.descripcion
|
let type = unit.unit.proyecto_tipo_unidad.tipo_unidad.descripcion
|
||||||
type = type.charAt(0).toUpperCase() + type.slice(1)
|
type = type.charAt(0).toUpperCase() + type.slice(1)
|
||||||
const base = unit.base ?? (unit.value ?? 0);
|
const base = unit.base ?? (unit.value ?? 0);
|
||||||
const price = unit.unit.current_precio?.valor ?? 0
|
const price = unit.unit.current_precio?.valor ?? 0
|
||||||
const diff = (base - price) / price * 100
|
const diff = (base - price) / price * 100
|
||||||
output.push(`${type} ${unit.unit.descripcion}: ${formatter.format(base)} UF - ${formatter.format(price)} UF (${formatter.format(diff)} %)`)
|
table.push(`<tr><td>${type} ${unit.unit.descripcion}:</td><td align='right'> ${formatter.format(base)} UF</td><td align='right'>${formatter.format(price)} UF</td><td align='right'>(${formatter.format(diff)} %)</td></tr>`)
|
||||||
})
|
})
|
||||||
|
if (reservation.broker !== null) {
|
||||||
|
table.push('<tr><td>-----</td></tr>')
|
||||||
|
let commission = reservation.broker.commission
|
||||||
|
table.push(`<tr><td>Broker:</td><td align='right'>${reservation.broker.name}</td><td align='right'>(${commission})</td></tr>`)
|
||||||
|
}
|
||||||
reservation.promotions.forEach(promotion => {
|
reservation.promotions.forEach(promotion => {
|
||||||
let value = 0
|
let value = 0
|
||||||
switch (promotion.type) {
|
switch (promotion.type) {
|
||||||
case {{ \Incoviba\Model\Venta\Promotion\Type::FIXED }}:
|
case {{ \Incoviba\Model\Venta\Promotion\Type::FIXED }}:
|
||||||
value = `${formatter.format(promotion.value)} UF`
|
value = `${formatter.format(promotion.amount)} UF`
|
||||||
break;
|
break;
|
||||||
case {{ \Incoviba\Model\Venta\Promotion\Type::VARIABLE }}:
|
case {{ \Incoviba\Model\Venta\Promotion\Type::VARIABLE }}:
|
||||||
value = `${formatter.format(promotion.value * 100)} %`
|
value = `${formatter.format(promotion.amount * 100)} %`
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
output.push(`${promotion.description}: ${value}`)
|
table.push(`<tr><td>${promotion.description}:</td><td align='right'>${value}</td></tr>`)
|
||||||
})
|
})
|
||||||
return output.join("\n")
|
table.push('</table>')
|
||||||
|
output.push(table.join(''))
|
||||||
|
return output.join("<br />")
|
||||||
}
|
}
|
||||||
draw['tooltip'] = () => {
|
draw['tooltip'] = () => {
|
||||||
return tooltip
|
return tooltip
|
||||||
|
|||||||
Reference in New Issue
Block a user