[FIX] website: fix number of column option broken layout

Normally, the number of column option adjusts the width of each column
after changing their number so that they always fit in one row. In
previous versions, the sequence of the code was correct thanks to
jQuery's deferreds executing their then callbacks synchronously if the
promise was already resolved. However, native Promise objects always
put their then callbacks in the microtask queue, and this was resulting
in the column width classes being recalculated before their number had
actually changed.

This commit fixes that by calculating the width of the columns based on
how many columns there will be after addition/removal. It also
introduces a new field on the option that is used to update the UI so
that it displays the correct number.

closes odoo/odoo#44849

X-original-commit: 58804d6ea375629b07748bc442eaccc401c56d1b
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website/static/src/js/editor/snippets.options.js

@@ -1041,7 +1041,7 @@ options.registry.layout_column = options.Class.extend({
      */
     _computeWidgetState: function (methodName, params) {
         if (methodName === 'selectCount') {
-            return '' + this.$target.children().length;
+            return '' + (this.colsLength || this.$target.children().length);
         }
         return this._super(...arguments);
     },
@@ -1059,6 +1059,7 @@ options.registry.layout_column = options.Class.extend({
 
         this.trigger_up('request_history_undo_record', {$target: this.$target});
 
+        var colsLength = this.$target.children().length + count;
         if (count > 0) {
             var $lastColumn = this.$target.children().last();
             for (var i = 0; i < count; i++) {
@@ -1071,17 +1072,18 @@ options.registry.layout_column = options.Class.extend({
             });
         }
 
-        this._resizeColumns();
+        this._resizeColumns(colsLength);
         this.trigger_up('cover_update');
     },
     /**
      * Resizes the columns so that they are kept on one row.
      *
      * @private
+     * @param {number} [colsLength] (default to the actual number of columns)
      */
-    _resizeColumns: function () {
+    _resizeColumns: function (colsLength) {
         var $columns = this.$target.children();
-        var colsLength = $columns.length;
+        colsLength = colsLength || $columns.length;
         var colSize = Math.floor(12 / colsLength) || 1;
         var colOffset = Math.floor((12 - colSize * colsLength) / 2);
         var colClass = 'col-lg-' + colSize;
@@ -1093,6 +1095,9 @@ options.registry.layout_column = options.Class.extend({
         if (colOffset) {
             $columns.first().addClass('offset-lg-' + colOffset);
         }
+        // TODO: remove in master. This is used to keep the UI in sync, but
+        // won't be needed once option methods are properly asynchronous.
+        this.colsLength = colsLength;
     },
 });