From cced5ab357d3fb712dd7aa0f753021518663f1a2 Mon Sep 17 00:00:00 2001
From: AH-Yussef <alhy@odoo.com>
Date: Tue, 28 Nov 2023 12:50:36 +0200
Subject: [PATCH] [FIX] l10n_gcc_invoice: adjust messy invoice report layout
 saudi arabia

Steps to reproduce
- install the following modules:
        - Accounting
        - Studio
        - Saudi Arabia - Accounting (l10n_sa)
- Go to Settings > Users & Companies > Companies and create a New Company (named `SA Company` for example) with Saudi Arabia as the country in the address
- Switch to the new `SA Company`
- Go to Settings > Accounting
- Choose Saudi Arabia package as the Fiscal Localization package
- Go to Accounting and click on the studio icon (the one left of the user profile avatar)
- Click on reports
- Clear the filters
- Click on Invoices
- Click on the Company tagline box
- In the select box shown, choose `elif: o._get_name_invoice_report() == '|10n_gccarabic_english_invoice'`
- U can notice how the template is not rendered correctly

Invistigation:
- the major issue was the flex-direction: column; in https://github.com/odoo/enterprise/blob/e892bc8f022ed3962de06a61c1be181c89cdc831/web_studio/static/src/client_action/report_editor/report_iframe.scss#L170C1-L187C2 that caused the table header to be viewed as blocks
- Some xml tags / classes needed to be refined to enhance the layout

opw-3544938

closes odoo/odoo#148821

X-original-commit: db9498ccf8a6d5c51e691cbab04fc134ae310da9
Related: odoo/enterprise#54029
Signed-off-by: Nicolas Lempereur (nle) <nle@odoo.com>
Signed-off-by: Ali Hassan Youssef (alhy) <alhy@odoo.com>
---
 .../l10n_gcc_invoice/views/report_invoice.xml | 61 +++++++++----------
 1 file changed, 30 insertions(+), 31 deletions(-)

diff --git a/addons/l10n_gcc_invoice/views/report_invoice.xml b/addons/l10n_gcc_invoice/views/report_invoice.xml
index 5e5fddbc2f0..48bee87ea65 100644
--- a/addons/l10n_gcc_invoice/views/report_invoice.xml
+++ b/addons/l10n_gcc_invoice/views/report_invoice.xml
@@ -122,8 +122,8 @@
                     </div>
                     <div class="row" t-if="o.partner_id.ref" name="customer_code">
                         <div class="col-2 offset-6">
-                            <strong style="white-space:nowrap">:
-                                Customer Code
+                            <strong style="white-space:nowrap">
+                                Customer Code:
                             </strong>
                         </div>
                         <div class="col-2">
@@ -135,7 +135,7 @@
                             </strong>
                         </div>
                     </div>
-                    <div class="col-auto mw-100 mb-2" t-if="o.ref" name="reference">
+                    <div class="row" t-if="o.ref" name="reference">
                         <div class="col-2 offset-6">
                             <strong style="white-space:nowrap">Reference:
                             </strong>
@@ -481,19 +481,18 @@
                     </div>
                 </div>
 
-                <p t-if="o.move_type in ('out_invoice', 'in_refund') and o.payment_reference" name="payment_communication">
-                    <div class="row">
-                        <div class="col-2 offset-6 text-nowrap">
-                            <strong>Payment Reference:</strong>
-                        </div>
-                        <div class="col-2 text-nowrap">
-                            <span class="fw-bold" t-field="o.payment_reference"/>
-                        </div>
-                        <div class="col-2 text-end">
-                            <strong>:رقم إشارة الدفعة</strong>
-                        </div>
+                <p name="payment_communication" t-if="0"></p>
+                <div class="row" t-if="o.move_type in ('out_invoice', 'in_refund') and o.payment_reference" name="payment_communication">
+                    <div class="col-2 offset-6">
+                        <strong>Payment Reference:</strong>
                     </div>
-                </p>
+                    <div class="col-2">
+                        <span class="fw-bold" t-field="o.payment_reference"/>
+                    </div>
+                    <div class="col-2 text-end">
+                        <strong style="white-space:nowrap">:رقم إشارة الدفعة</strong>
+                    </div>
+                </div>
 
                 <p t-if="o.invoice_payment_term_id" name="payment_term">
                     <div class="row">
@@ -526,23 +525,23 @@
                         </div>
                     </div>
                 </p>
-                <p t-if="o.invoice_incoterm_id" name="incoterm">
-                    <div class="row">
-                        <div class="col-2 offset-6">
-                            <strong>Incoterm:</strong>
-                        </div>
-                        <div class="col-2 text-nowrap">
-                            <span t-out="o.invoice_incoterm_id.code"/>
-                            -
-                            <span t-out="o.invoice_incoterm_id.name"/>
-                            -
-                            <span t-if="o.incoterm_location" t-out="o.incoterm_location"/>
-                        </div>
-                        <div class="col-2 text-end">
-                            <strong>:شرط تجاري</strong>
-                        </div>
+                
+                <p name="incoterm" t-if="0"></p>
+                <div class="row" t-if="o.invoice_incoterm_id" name="incoterm">
+                    <div class="col-2 offset-6">
+                        <strong>Incoterm:</strong>
                     </div>
-                </p>
+                    <div class="col-2 text-nowrap">
+                        <span t-out="o.invoice_incoterm_id.code"/>
+                        -
+                        <span t-out="o.invoice_incoterm_id.name"/>
+                        -
+                        <span t-if="o.incoterm_location" t-out="o.incoterm_location"/>
+                    </div>
+                    <div class="col-2 text-end">
+                        <strong>:شرط تجاري</strong>
+                    </div>
+                </div>
             </div>
         </t>
     </template>