From 1870b49d3190572cc5317c49fdad3fa0081edb81 Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Fri, 26 Aug 2022 09:16:31 +0000
Subject: [PATCH] [REF] *: manage columns record by record in list

Several modules need to display records data in a list table in a way
suitable to possibly different record types. Here we refactor the list
renderer to allows to specify columns (and their colspans) record by
record.

Part-of: odoo/odoo#97984
---
 addons/hr_skills/static/src/fields/resume_one2many.xml | 2 +-
 addons/web/static/src/views/list/list_renderer.js      | 4 ++++
 addons/web/static/src/views/list/list_renderer.xml     | 4 ++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/addons/hr_skills/static/src/fields/resume_one2many.xml b/addons/hr_skills/static/src/fields/resume_one2many.xml
index 64365ebda78..41f04f457ed 100644
--- a/addons/hr_skills/static/src/fields/resume_one2many.xml
+++ b/addons/hr_skills/static/src/fields/resume_one2many.xml
@@ -23,7 +23,7 @@
     </t>
 
     <t t-name="hr_skills.ResumeListRenderer.RecordRow" owl="1" t-inherit-mode="primary" t-inherit="web.ListRenderer.RecordRow">
-        <xpath expr="//t[@t-foreach='state.columns']" position="replace">
+        <xpath expr="//t[@t-foreach='getColumns(record)']" position="replace">
             <t t-set="data" t-value="record.data"/>
             <td class="o_resume_timeline_cell position-relative pe-lg-2">
                 <div class="rounded-circle bg-info position-relative"/>
diff --git a/addons/web/static/src/views/list/list_renderer.js b/addons/web/static/src/views/list/list_renderer.js
index 093ebe72d66..3f84325a616 100644
--- a/addons/web/static/src/views/list/list_renderer.js
+++ b/addons/web/static/src/views/list/list_renderer.js
@@ -587,6 +587,10 @@ export class ListRenderer extends Component {
         return classNames.join(" ");
     }
 
+    getColumns(record) {
+        return this.state.columns;
+    }
+
     /**
      * Returns the classnames to apply to the row representing the given record.
      * @param {Record} record
diff --git a/addons/web/static/src/views/list/list_renderer.xml b/addons/web/static/src/views/list/list_renderer.xml
index d3c69cf502d..f7fcec16f11 100644
--- a/addons/web/static/src/views/list/list_renderer.xml
+++ b/addons/web/static/src/views/list/list_renderer.xml
@@ -189,9 +189,9 @@
             <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)" t-if="hasSelectors" class="o_list_record_selector" t-on-click.stop="() => this.toggleRecordSelection(record)" tabindex="-1">
                 <CheckBox disabled="!!props.list.editedRecord or props.list.model.useSampleModel" value="record.selected" onChange.bind="() => this.toggleRecordSelection(record)" />
             </td>
-            <t t-foreach="state.columns" t-as="column" t-key="column.id">
+            <t t-foreach="getColumns(record)" t-as="column" t-key="column.id">
                 <t t-if="column.type === 'field'">
-                    <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)" class="o_data_cell" t-att-name="column.name" t-att-class="getCellClass(column, record)" t-att-data-tooltip="getCellTitle(column, record)" data-tooltip-delay="1000" t-on-click="(ev) => this.onCellClicked(record, column, ev)" tabindex="-1">
+                    <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)" class="o_data_cell" t-att-name="column.name" t-att-colspan="column.colspan"  t-att-class="getCellClass(column, record)" t-att-data-tooltip="getCellTitle(column, record)" data-tooltip-delay="1000" t-on-click="(ev) => this.onCellClicked(record, column, ev)" tabindex="-1">
                         <t t-if="!evalModifier(column.modifiers.invisible, record)">
                             <t t-if="canUseFormatter(column, record)" t-esc="getFormattedValue(column, record)"/>
                             <Field t-else="" name="column.name" record="record" type="column.widget" class="getFieldClass(column)" fieldInfo="props.archInfo.fieldNodes[column.name]" setDirty="(isDirty) => this.setDirty(isDirty)"/>