From 65088da2f5d0f70e3ad3ee844e06f4933ea7ad06 Mon Sep 17 00:00:00 2001
From: Juan Pablo Vial <jpvialb@incoviba.cl>
Date: Wed, 23 Apr 2025 16:49:52 -0400
Subject: [PATCH] Promociones en misma tabla para tipo

---
 .../brokers/contracts/show/tipo.blade.php     | 221 +++++++++++-------
 1 file changed, 143 insertions(+), 78 deletions(-)

diff --git a/app/resources/views/proyectos/brokers/contracts/show/tipo.blade.php b/app/resources/views/proyectos/brokers/contracts/show/tipo.blade.php
index 481c4e5..f94b9f9 100644
--- a/app/resources/views/proyectos/brokers/contracts/show/tipo.blade.php
+++ b/app/resources/views/proyectos/brokers/contracts/show/tipo.blade.php
@@ -6,7 +6,7 @@
         <th class="right aligned" style="text-decoration: overline">Precio Base</th>
         <th class="right aligned" style="text-decoration: overline">Comisión</th>
         <th class="right aligned" style="text-decoration: overline">Precio Operador</th>
-        <th class="right aligned" style="text-decoration: overline">Promociones</th>
+        <th class="center aligned" style="text-decoration: overline" id="tipo_promociones">Promociones</th>
     </tr>
     </thead>
     <tbody></tbody>
@@ -16,7 +16,12 @@
     <script>
         class TipoTable extends TableHandler {
             ids = {
-                tipos: 'tipos'
+                tipos: 'tipos',
+                promotions: 'tipo_promociones'
+            }
+            promotions = {
+                names: new Set(),
+                values: []
             }
             constructor(commission) {
                 super(commission)
@@ -28,6 +33,8 @@
                 const groups = Object.groupBy(units, unit => {
                     return unit.proyecto_tipo_unidad.tipo_unidad.descripcion
                 })
+                this.promotions.names = new Set()
+                this.promotions.values = []
                 Object.entries(groups).forEach(([tipo, unidades]) => {
                     const prices = this.prices(unidades)
                     const base_tooltip = [
@@ -46,88 +53,146 @@
                         `Desv: ${formatters.ufs.format(Stat.standardDeviation(prices.map(p => p.broker)))}`
                     ].join("\n").replaceAll(' ', '&nbsp;')
 
-                    let promotions = {}
-                    prices.map(price => price.promotions).forEach(promotionArray => {
-                        promotionArray.forEach(p => {
-                            if (!Object.hasOwn(promotions, p.name)) {
-                                promotions[p.name] = {
-                                    name: p.name,
-                                    type: p.type,
-                                    amount: [],
-                                    final: []
-                                }
-                            }
-                            promotions[p.name].amount.push(p.amount)
-                            promotions[p.name].final.push(p.final)
-                        })
-                    })
-                    promotions = Object.values(promotions)
-                    let subTable = false
-                    if (promotions.length > 0) {
-                        promotions = promotions.map(p => {
-                            return {
-                                name: p.name,
-                                type: p.type,
-                                amount: {
-                                    min: Math.min(...p.amount),
-                                    max: Math.max(...p.amount),
-                                    desv: Stat.standardDeviation(p.amount),
-                                    mean: Stat.mean(p.amount)
-                                },
-                                final: {
-                                    min: Math.min(...p.final),
-                                    max: Math.max(...p.final),
-                                    desv: Stat.standardDeviation(p.final),
-                                    mean: Stat.mean(p.final)
-                                }
-                            }
-                        })
-                        subTable = document.createElement('table')
-                        subTable.className = 'ui table'
-                        const subTHead = document.createElement('thead')
-                        promotions.forEach(p => {
-                            subTHead.insertAdjacentHTML('beforeend', [
-                                '<tr>',
-                                '<th class="center aligned">Nombre</th>',
-                                '<th class="center aligned">Forma</th>',
-                                '<th class="right aligned">Precio Final</th>',
-                                '</tr>'
-                            ].join("\n"))
-                        })
-                        const subTbody = document.createElement('tbody')
-                        promotions.forEach(p => {
-                            const amount_tooltip = [
-                                `Min: ${p.type === 1 ? 'UF ' + formatters.ufs.format(p.amount.min) : formatters.percent.format(p.amount.min)}`,
-                                `Max: ${p.type === 1 ? 'UF ' + formatters.ufs.format(p.amount.max) : formatters.percent.format(p.amount.max)}`,
-                                `Desv: ${p.type === 1 ? 'UF ' + formatters.ufs.format(p.amount.desv) : formatters.percent.format(p.amount.desv)}`
-                            ].join("\n").replaceAll(' ', '&nbsp;')
-                            const final_tooltip = [
-                                `Min: UF ${formatters.ufs.format(p.final.min)}`,
-                                `Max: UF ${formatters.ufs.format(p.final.max)}`,
-                                `Desv: UF ${formatters.ufs.format(p.final.desv)}`
-                            ].join("\n").replaceAll(' ', '&nbsp;')
-                            subTbody.insertAdjacentHTML('beforeend', [
-                                '<tr>',
-                                `<td class="center aligned">${p.name}</td>`,
-                                `<td class="right aligned"><span data-tooltip="${amount_tooltip}" data-position="right center" data-variation="wide multiline">${p.type === 1 ? formatters.ufs.format(p.amount.mean) : formatters.percent.format(p.amount.mean)}</td>`,
-                                `<td class="right aligned"><span data-tooltip="${final_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(p.final.mean)}</td></td>`,
-                                '</tr>'
-                            ].join("\n"))
-                        })
-                        subTable.appendChild(subTHead).appendChild(subTbody)
-                    }
+                    const promotions = this.process().prices(prices)
+                    this.process().promotions().names(promotions)
+                    this.process().promotions().values({promotions, formatters})
 
                     tbody.innerHTML += [
                         `<tr>`,
-                        `<td>${tipo.charAt(0).toUpperCase() + tipo.slice(1)}</td>`,
-                        `<td class="center aligned">${unidades.length}</td>`,
-                        `<td class="right aligned"><span data-tooltip="${base_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(Stat.mean(prices.map(p => p.base)))}</span></td>`,
-                        `<td class="right aligned"><span data-tooltip="${commission_tooltip}" data-position="right center" data-variation="wide multiline">${formatters.percent.format(Stat.mean(prices.map(p => p.commission)))}</span></td>`,
-                        `<td class="right aligned"><span data-tooltip="${broker_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(Stat.mean(prices.map(p => p.broker)))}</span></td>`,
-                        `<td class="right aligned">${subTable ? subTable.outerHTML : `UF ${formatters.ufs.format(Stat.mean(prices.map(p => p.broker)))}`}</td>`,
+                            `<td>${tipo.charAt(0).toUpperCase() + tipo.slice(1)}</td>`,
+                            `<td class="center aligned">${unidades.length}</td>`,
+                            `<td class="right aligned"><span data-tooltip="${base_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(Stat.mean(prices.map(p => p.base)))}</span></td>`,
+                            `<td class="right aligned"><span data-tooltip="${commission_tooltip}" data-position="right center" data-variation="wide multiline">${formatters.percent.format(Stat.mean(prices.map(p => p.commission)))}</span></td>`,
+                            `<td class="right aligned"><span data-tooltip="${broker_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(Stat.mean(prices.map(p => p.broker)))}</span></td>`,
+                            `<td class="right aligned promotions"></td>`,
                         `</tr>`
                     ].join("\n")
                 })
+                this.build().promotions(table, tbody)
+            }
+            process() {
+                return {
+                    prices: prices => {
+                        let promotions = {}
+                        prices.map(price => price.promotions).forEach(promotionArray => {
+                            promotionArray.forEach(p => {
+                                if (!Object.hasOwn(promotions, p.name)) {
+                                    promotions[p.name] = {
+                                        name: p.name,
+                                        type: p.type,
+                                        amount: [],
+                                        final: []
+                                    }
+                                }
+                                promotions[p.name].amount.push(p.amount)
+                                promotions[p.name].final.push(p.final)
+                            })
+                        })
+                        return promotions
+                    },
+                    promotions: () => {
+                        return {
+                            names: promotions => {
+                                Object.keys(promotions).forEach(name => {
+                                    this.add().promotion().name(name)
+                                })
+                            },
+                            values: ({promotions, formatters}) => {
+                                const temp = Object.values(promotions)
+                                if (temp.length > 0) {
+                                    const data = temp.map(p => {
+                                        return {
+                                            name: p.name,
+                                            type: p.type,
+                                            amount: {
+                                                min: Math.min(...p.amount),
+                                                max: Math.max(...p.amount),
+                                                desv: Stat.standardDeviation(p.amount),
+                                                mean: Stat.mean(p.amount)
+                                            },
+                                            final: {
+                                                min: Math.min(...p.final),
+                                                max: Math.max(...p.final),
+                                                desv: Stat.standardDeviation(p.final),
+                                                mean: Stat.mean(p.final)
+                                            }
+                                        }
+                                    })
+                                    this.add().promotion().values({promotions: data, formatters})
+                                    return
+                                }
+                                this.promotions.values.push([])
+                            }
+                        }
+                    }
+                }
+            }
+            add() {
+                return {
+                    promotion: () => {
+                        return {
+                            name: name => {
+                                this.promotions.names.add(name)
+                            },
+                            values: ({promotions, formatters}) => {
+                                this.promotions.values.push(promotions.map(promotion => {
+                                    const amount_tooltip = [
+                                        `Min: ${promotion.type === 1 ? 'UF ' + formatters.ufs.format(promotion.amount.min) : formatters.percent.format(promotion.amount.min)}`,
+                                        `Max: ${promotion.type === 1 ? 'UF ' + formatters.ufs.format(promotion.amount.max) : formatters.percent.format(promotion.amount.max)}`,
+                                        `Desv: ${promotion.type === 1 ? 'UF ' + formatters.ufs.format(promotion.amount.desv) : formatters.percent.format(promotion.amount.desv)}`
+                                    ].join("\n").replaceAll(' ', '&nbsp;')
+                                    const final_tooltip = [
+                                        `Min: UF ${formatters.ufs.format(promotion.final.min)}`,
+                                        `Max: UF ${formatters.ufs.format(promotion.final.max)}`,
+                                        `Desv: UF ${formatters.ufs.format(promotion.final.desv)}`
+                                    ].join("\n").replaceAll(' ', '&nbsp;')
+                                    return {
+                                        name: promotion.name,
+                                        value: [
+                                            `<td class="right aligned"><span data-tooltip="${amount_tooltip}" data-position="right center" data-variation="wide multiline">${promotion.type === 1 ? formatters.ufs.format(promotion.amount.mean) : formatters.percent.format(promotion.amount.mean)}</td>`,
+                                            `<td class="right aligned"><span data-tooltip="${final_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(promotion.final.mean)}</td></td>`,
+                                        ].join("\n")
+                                    }
+                                }))
+                            }
+                        }
+                    }
+                }
+            }
+            build() {
+                return {
+                    promotions: (table, tbody) => {
+                        if (this.promotions.names.size > 0) {
+                            const title = document.getElementById(this.ids.promotions)
+                            title.innerHTML = this.promotions.names.size > 0 ? Array.from(this.promotions.names)[0] : ''
+                            title.setAttribute('colspan', '2')
+                            if (this.promotions.names.size > 1) {
+                                const thead = table.querySelector('thead')
+                                Array.from(this.promotions.names).slice(1).forEach(name => {
+                                    thead.insertAdjacentHTML('beforeend', `<th class="right aligned" style="text-decoration: overline" colspan="2">${name}</th>`)
+                                })
+                            }
+                            const trs = tbody.querySelectorAll('tr')
+                            this.promotions.values.forEach((row, i) => {
+                                const tr = trs[i]
+                                const td = tr.querySelector('td.promotions')
+                                if (row.length === 0) {
+                                    td.setAttribute('colspan', 2 * this.promotions.names.size)
+                                    return
+                                }
+                                td.remove()
+                                this.promotions.names.forEach(name => {
+                                    const index = row.findIndex(r => r.name === name)
+                                    if (index === -1) {
+                                        tr.insertAdjacentHTML('beforeend', '<td colspan="2"></td>')
+                                        return
+                                    }
+                                    tr.insertAdjacentHTML('beforeend', row[index].value)
+                                })
+                            })
+                        }
+                    }
+                }
             }
         }
     </script>