[REF] account: reconciliation widget: create new lines 'form view'

Clean up the code and make label/fields width cohesive

4 files changed, 35 insertions, 36 deletions

diff --git a/addons/account/static/src/js/account_reconciliation_widgets.js b/addons/account/static/src/js/account_reconciliation_widgets.js
index e5a822b0735..9efc7194fee 100644
--- a/addons/account/static/src/js/account_reconciliation_widgets.js
+++ b/addons/account/static/src/js/account_reconciliation_widgets.js
@@ -485,7 +485,7 @@ var abstractReconciliationLine = Widget.extend({
         for (var key in create_form_fields)
             if (create_form_fields.hasOwnProperty(key))
                 create_form_fields_arr.push(create_form_fields[key]);
-        create_form_fields_arr.sort(function(a, b){ return b.index - a.index });
+        create_form_fields_arr.sort(function(a, b){ return a.index - b.index });
 
         // field_manager
         var dataset = new data.DataSet(this, "account.account", self.context);
@@ -538,7 +538,7 @@ var abstractReconciliationLine = Widget.extend({
         // Returns a function that serves as a xhr response handler
         var hideGroupResponseClosureFactory = function(field_widget, $container, obj_key){
             return function(has_group){
-                if (has_group) $container.show();
+                if (has_group) $container[0].style.removeProperty('display');
                 else {
                     field_widget.destroy();
                     $container.remove();
@@ -565,8 +565,8 @@ var abstractReconciliationLine = Widget.extend({
 
             // append to DOM
             var $field_container = $(QWeb.render("form_create_field", {id: field_data.id, label: field_data.label}));
-            field.appendTo($field_container.find("td"));
-            self.$(".create_form").prepend($field_container);
+            field.appendTo($field_container.find(".o_td_field"));
+            self.$(".create_group_" + (i%2 === 0 ? "left" : "right")).append($field_container);
 
             // Change field value on keypress instead of blur
             if (field_data.field_properties.type !== "many2one") {
@@ -576,6 +576,7 @@ var abstractReconciliationLine = Widget.extend({
             }
 
             // Hide the field if group not OK
+            // TODO: avoid this RPC that could break fields order if the only field with a group wasn't the last one.
             if (field_data.group !== undefined) {
                 var target = $field_container;
                 target.hide();
diff --git a/addons/account/static/src/less/account_reconciliation.less b/addons/account/static/src/less/account_reconciliation.less
index 2f9d8132a5a..0562086a406 100644
--- a/addons/account/static/src/less/account_reconciliation.less
+++ b/addons/account/static/src/less/account_reconciliation.less
@@ -546,17 +546,26 @@
                 }
             }
 
-            .oe_form > table, .o_form > table {
+            .o_form > table {
                 width: 49%;
-                height: 26px;
                 margin: 0;
+                vertical-align: top;
 
-                &:nth-child(2n+1) { float: left; clear: left; }
-                &:nth-child(2n) { float: right; clear: right; }
+                &.create_group_left { float: left; }
+                &.create_group_right { float: right; }
 
-                th {
-                    font-weight: bold;
+                td {
+                    width: 99%;
+                    padding-left: 8px;
+
+                    .oe_m2o_cm_button {
+                        line-height: 22px;
+                    }
+                }
+
+                td.o_td_label {
                     line-height: 26px;
+                    font-weight: bold;
                     padding-right: 8px;
                     min-width: 100px;
                     border-right: 1px solid #ddd;
@@ -564,29 +573,18 @@
                     width: 1%;
                 }
 
-                td {
-                    width: 99%;
-                    padding-left: 8px;
-                }
-
                 input, select {
                     width: 100%;
                 }
 
-                &.add_line_container {
-                    width: 98%;
-                    float: none;
-                    clear: both;
-                    margin: auto;
-
-                    td {
-                        text-align: center;
-                    }
+            }
 
-                    .add_line {
-                        line-height: 26px;
-                    }
-                }
+            .add_line_container {
+                clear: both;
+                line-height: 26px;
+                text-align: center;
+                margin: 0;
+                padding-top: 7px;
             }
         }
     }
diff --git a/addons/account/static/src/xml/account_reconciliation.xml b/addons/account/static/src/xml/account_reconciliation.xml
index be243bb226a..a661c5c00cb 100644
--- a/addons/account/static/src/xml/account_reconciliation.xml
+++ b/addons/account/static/src/xml/account_reconciliation.xml
@@ -83,9 +83,9 @@
                             </div>
                         </div>
                         <div class="oe_form o_form create_form">
-                            <!-- here come some form_create_field -->
-                            <table class="create_field add_line_container"><tr><td><a href="javascript:void(0)" class="add_line"><i class="fa fa-plus-circle"></i> New Operation</a></td></tr></table>
-                            <div class='clearer'></div>
+                            <table class="o_group o_inner_group o_group_col_6 create_group_left"><!-- here come some form_create_field --></table>
+                            <table class="o_group o_inner_group o_group_col_6 create_group_right"><!-- here come some form_create_field --></table>
+                            <p class="add_line_container"><a href="javascript:void(0)" class="add_line"><i class="fa fa-plus-circle"></i> New Operation</a></p>
                         </div>
                     </div>
                 </td>
@@ -113,10 +113,10 @@
     </t>
 
     <t t-name="form_create_field">
-        <table t-att-class='"create_field o_group o_inner_group o_group_col_6 create_"+id'><tr>
-            <th><t t-esc="label"/></th>
-            <td class="create_account_container" t-att-class='"create_"+id+"_container"'></td>
-        </tr></table>
+        <tr t-att-class='"create_" + id'>
+            <td class="o_td_label"><t t-esc="label"/></td>
+            <td t-att-class='"o_td_field create_" + id + "_container"'></td>
+        </tr>
     </t>
 
     <t t-name="filter_no_match">
diff --git a/addons/account_analytic_plans/static/src/js/account_bank_reconciliation.js b/addons/account_analytic_plans/static/src/js/account_bank_reconciliation.js
index 7db1ba055b0..ef340800e47 100644
--- a/addons/account_analytic_plans/static/src/js/account_bank_reconciliation.js
+++ b/addons/account_analytic_plans/static/src/js/account_bank_reconciliation.js
@@ -13,7 +13,7 @@ widgets.bankStatementReconciliation.include({
         delete this.create_form_fields.analytic_account_id;
         this.create_form_fields["analytic_plan"] = {
             id: "analytic_plan",
-            index: 4,
+            index: 25,
             corresponding_property: "analytics_id",
             label: _t("Analytic Distribution"),
             required: false,