From 92ce339ec05d2b40a8644c1bf2b58358e193f12b Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Mon, 10 Jul 2023 12:42:16 +0000
Subject: [PATCH] [FIX] mrp: BOM control_panel layout

This commit fixes the layout of the BOM control panel.

task-3419079
Part of task-3326263

closes odoo/odoo#132025

X-original-commit: c0fac4b7b8b66315a553337956999d8eb602ac13
Signed-off-by: William Henrotin (whe) <whe@odoo.com>
---
 .../mrp_bom_overview_control_panel.xml        | 62 ++++++++++---------
 .../mrp_bom_overview_display_filter.js        |  4 --
 .../mrp_bom_overview_display_filter.xml       |  4 +-
 3 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/addons/mrp/static/src/components/bom_overview_control_panel/mrp_bom_overview_control_panel.xml b/addons/mrp/static/src/components/bom_overview_control_panel/mrp_bom_overview_control_panel.xml
index fa3049730bd..705b5e1bdaa 100644
--- a/addons/mrp/static/src/components/bom_overview_control_panel/mrp_bom_overview_control_panel.xml
+++ b/addons/mrp/static/src/components/bom_overview_control_panel/mrp_bom_overview_control_panel.xml
@@ -3,50 +3,57 @@
 
     <t t-name="mrp.BomOverviewControlPanel">
         <ControlPanel display="controlPanelDisplay">
+            <t t-set-slot="control-panel-create-button">
+                <button t-on-click="() => this.props.print()" type="button" class="btn btn-primary">Print</button>
+            </t>
             <t t-set-slot="control-panel-always-buttons">
                 <div class="o_cp_buttons">
-                    <div class="o_list_buttons o_mrp_bom_report_buttons">
-                        <button t-on-click="() => this.props.print()" type="button" class="btn btn-primary">Print</button>
+                    <div class="o_list_buttons o_mrp_bom_report_buttons d-xl-flex gap-xl-1">
                         <t t-if="props.showVariants">
-                            <button t-on-click="() => this.props.print(true)" type="button" class="btn btn-primary ms-1">Print All Variants</button>
+                            <button t-on-click="() => this.props.print(true)" type="button" class="btn btn-secondary text-nowrap">Print All Variants</button>
                         </t>
-                        <button t-on-click="clickUnfold" type="button" class="btn btn-primary ms-1">Unfold</button>
+                        <button t-on-click="clickUnfold" type="button" class="btn btn-secondary">Unfold</button>
                     </div>
                 </div>
             </t>
 
             <t t-set-slot="layout-actions">
-            <div class="d-flex flex-column gap-1">
-                <form class="d-flex w-100 gap-2">
-                        <label class="visually-hidden" for="bom_quantity">Quantity</label>
-                        <div class="input-group col-xl-4">
-                            <div class="input-group-text">Quantity</div>
-                            <input id="bom_quantity" type="number" step="any" t-on-change="ev => this.updateQuantity(ev)" t-on-keypress="ev => this.onKeyPress(ev)" t-att-value="props.bomQuantity" min="1" class="o_input form-control text-end"/>
-                            <div t-if="props.showOptions.uom" t-esc="props.uomName" class="input-group-text">Quantity</div>
-                        </div>
-                    <t t-if="props.showVariants" >
-                        <div class="input-group-text">Variant:</div>
-                        <div class="col-xl-10 col-lg-9 col-sm-8">
-                            <Many2XAutocomplete
-                                value="props.data.name"
-                                getDomain.bind="getDomain"
-                                resModel="'product.product'"
-                                fieldString="props.data.name"
-                                activeActions="{}"
-                                update.bind="(ev) => this.props.changeVariant(ev[0]?.id)"
-                            />
+            <div class="d-flex gap-1 w-100">
+                <form class="d-flex flex-grow-1 gap-3 flex-column flex-md-row">
+                    <label class="visually-hidden" for="bom_quantity">Quantity</label>
+                    <div t-attf-class="input-group align-items-center">
+                        <div class="col-4 col-md-auto pe-2 fw-bold">Quantity</div>
+                        <input id="bom_quantity" type="number" step="any" t-on-change="ev => this.updateQuantity(ev)" t-on-keypress="ev => this.onKeyPress(ev)" t-att-value="props.bomQuantity" min="1" class="o_input form-control rounded-0"/>
+                        <div t-if="props.showOptions.uom" t-out="props.uomName" class="d-flex align-items-center text-muted small lh-sm">Quantity</div>
+                    </div>
+                    <t t-if="props.showVariants">
+                        <div class="input-group align-items-center">
+                            <div class="col-4 col-md-auto pe-2 fw-bold">Variant</div>
+                            <div class="col">
+                                <Many2XAutocomplete
+                                    value="props.data.name"
+                                    getDomain.bind="getDomain"
+                                    resModel="'product.product'"
+                                    fieldString="props.data.name"
+                                    activeActions="{}"
+                                    update.bind="(ev) => this.props.changeVariant(ev[0]?.id)"
+                                />
+                            </div>
                         </div>
                     </t>
                 </form>
-                <div class="d-flex w-100 gap-1">
+                </div>
+            </t>
+            <t t-set-slot="control-panel-navigation-additional">
+                <div class="d-flex gap-1 w-100 w-sm-auto">
                     <div class="col d-flex gap-1">
                         <t t-if="props.warehouses.length > 1">
-                            <Dropdown class="'btn-group'" togglerClass="'btn btn-secondary'">
+                            <Dropdown class="'btn-group flex-grow-1 flex-md-grow-0'" togglerClass="'btn btn-secondary'" showCaret="true">
                                 <t t-set-slot="toggler">
-                                    <span class="fa fa-home"/> Warehouse: <span t-esc="props.currentWarehouse.name"/>
+                                    <span class="fa fa-home"/> Warehouse
                                 </t>
                                 <t t-foreach="props.warehouses" t-as="wh" t-key="wh.id">
-                                    <DropdownItem onSelected="() => this.props.changeWarehouse(wh.id)" t-esc="wh.name"/>
+                                    <DropdownItem onSelected="() => this.props.changeWarehouse(wh.id)" t-esc="wh.name" class="{selected : wh.name === props.currentWarehouse.name }"/>
                                 </t>
                             </Dropdown>
                         </t>
@@ -55,7 +62,6 @@
                             changeDisplay.bind="props.changeDisplay"/>
                     </div>
                 </div>
-                </div>
             </t>
         </ControlPanel>
     </t>
diff --git a/addons/mrp/static/src/components/bom_overview_display_filter/mrp_bom_overview_display_filter.js b/addons/mrp/static/src/components/bom_overview_display_filter/mrp_bom_overview_display_filter.js
index 807632cac54..95a11399cf8 100644
--- a/addons/mrp/static/src/components/bom_overview_display_filter/mrp_bom_overview_display_filter.js
+++ b/addons/mrp/static/src/components/bom_overview_display_filter/mrp_bom_overview_display_filter.js
@@ -19,10 +19,6 @@ export class BomOverviewDisplayFilter extends Component {
     get displayableOptions() {
         return Object.keys(this.displayOptions);
     }
-
-    get currentDisplayedNames() {
-        return this.displayableOptions.filter(key => this.props.showOptions[key]).map(key => this.displayOptions[key]).join(", ");
-    }
 }
 
 BomOverviewDisplayFilter.template = "mrp.BomOverviewDisplayFilter";
diff --git a/addons/mrp/static/src/components/bom_overview_display_filter/mrp_bom_overview_display_filter.xml b/addons/mrp/static/src/components/bom_overview_display_filter/mrp_bom_overview_display_filter.xml
index cda318d72c8..dc0405cf12b 100644
--- a/addons/mrp/static/src/components/bom_overview_display_filter/mrp_bom_overview_display_filter.xml
+++ b/addons/mrp/static/src/components/bom_overview_display_filter/mrp_bom_overview_display_filter.xml
@@ -2,10 +2,10 @@
 <templates xml:space="preserve">
 
     <t t-name="mrp.BomOverviewDisplayFilter">
-        <Dropdown class="'btn-group'" togglerClass="'btn btn-secondary'">
+        <Dropdown class="'btn-group flex-grow-1 flex-md-grow-0'" togglerClass="'btn btn-secondary'" showCaret="true">
             <t t-set-slot="toggler">
                 <span class="fa fa-filter"/>
-                Display: <span class="text-wrap" t-esc="currentDisplayedNames"/>
+                Display
             </t>
             <t t-foreach="displayableOptions" t-as="optionKey" t-key="optionKey">
                 <DropdownItem parentClosingMode="'none'" class="{ o_menu_item: true, selected: props.showOptions[optionKey] }" onSelected="() => this.props.changeDisplay(optionKey)" t-esc="displayOptions[optionKey]"/>