Show table tooltips

This commit is contained in:
Juan Pablo Vial
2025-10-17 19:25:54 -03:00
parent b75c4b7efc
commit e4100e7f21

View File

@ -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(' ', '&nbsp;')
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