[IMP] product_matrix: adapt reports to studio report editor

Includes several modifications to better work with the new editor:
- add placeholders on t-field/t-out nodes
- add several div.oe_structure containers in key places for easier user
  edition
- add branching options for several t-if directives without a t-else to
  display for users (e.g. displaying the payment QR code if the value is
  set vs. when the value is not set). These branching options are set to a
  default value (the t-if node) which is what users see by default in the
  report editor; the t-else node is a version they can manually toggle if
  they wish)
- avoiding 'naked' t nodes as child of table/thead/tbody/tr elements, as
  these break the table layout in chomium-based engines (that we know of);
  instead, try to have foreach loops on tr or td nodes directly, or hoist
  t-set directives above the table node
- replace several div or p (block) nodes by span or other inline nodes
  to make it easier for users to insert content in their vicinity

X-original-commit: 744701993ece3099ce4768b35d3c0effff7d46a7
Part-of: odoo/odoo#129492
This commit is contained in:
Damien Bouvy
2023-07-25 00:54:53 +02:00
parent 48efc85e16
commit 97bc0f75e0
@@ -2,33 +2,37 @@
<odoo>
<template id="matrix">
<t t-foreach="order.get_report_matrixes()" t-as="grid">
<table class="o_view_grid o_product_variant_grid table table-sm table-striped table-bordered">
<thead>
<tr>
<th t-foreach="grid['header']" t-as="column_header" class="o_grid_title_header text-center">
<span t-esc="column_header['name']"/>
<t t-call="product_matrix.extra_price">
<t t-set="price" t-value="column_header.get('price', False)"/>
</t>
</th>
</tr>
</thead>
<tbody>
<tr t-foreach="grid['matrix']" t-as="row">
<t t-foreach="row" t-as="cell">
<td t-if="cell.get('name', False)" class="text-start">
<strong t-esc="cell['name']"/>
<t t-call="product_matrix.extra_price">
<t t-set="price" t-value="cell.get('price', False)"/>
</t>
</td>
<td t-else="" class="text-end">
<span t-esc="cell.get('qty', 0)" class="o_grid_cell_container"/>
</td>
</t>
</tr>
</tbody>
</table>
<div t-if="False" contenteditable="false" class="bg-light border-1 rounded h-100 d-flex flex-column align-items-center justify-content-center p-4 opacity-75 text-muted text-center">
<!-- this block is here for demo purposes, when editing the report via studio -->
<strong>Product matrix block</strong>
<div>The matrix of product variants of this order will be displayed here, if there are any.</div>
<small>Switch to the "else" condition of this block to view or edit the table.</small>
</div>
<table t-else="" class="o_view_grid o_product_variant_grid table table-sm table-striped table-bordered">
<thead>
<tr>
<th t-foreach="grid['header']" t-as="column_header" class="o_grid_title_header text-center">
<span t-esc="column_header['name']">Column name</span>
<t t-call="product_matrix.extra_price">
<t t-set="price" t-value="column_header.get('price', False)"/>
</t>
</th>
</tr>
</thead>
<tbody>
<tr t-foreach="grid['matrix']" t-as="row">
<td t-foreach="row" t-as="cell" t-if="cell.get('name', False)" class="text-start">
<strong t-esc="cell['name']">Cell name</strong>
<t t-call="product_matrix.extra_price">
<t t-set="price" t-value="cell.get('price', False)"/>
</t>
</td>
<td t-else="" class="text-end">
<span t-esc="cell.get('qty', 0)" class="o_grid_cell_container"/>
</td>
</tr>
</tbody>
</table>
</t>
</template>
@@ -44,7 +48,7 @@
accurate to display it.
-->
<span class="variant_price_extra" style="white-space: nowrap;">
<t t-out="price"/>
<t t-out="price">Variant price</t>
</span>
</span>
</template>