[FIX] lunch: make it work on mobile

This module didn't worked on mobile: user cannot select the products or
see their cart.

This commit reworks the LunchKanbanWidget template and introduces a
dedicated template for mobile. This template introduces a button at the
bottom of the screen to toggle the "cart" widget on mobile (hiding it by
default).

It tries to make the best use of the existing Bootstrap classes allowing
to have a more responsive layout and reducing the custom CSS required by
this module (both in desktop and in mobile).

This commit adds a decent JS tests-suite (mobile & desktop) to this
module as the existing one left substential parts of the UI untested
(opening wizard when clicking on a kanban record, cart's lines content,
clear cart button, widget structure and content based on the state...).
Those tests are also less based on DOM nodes order/tag names and use
instead dedicated classnames.

It also modifies the LunchKanbanRecord click handling to had a dedicated
event handler instead of overriding the default _onGlobalClick() and
make it more testable.

Finally this commit also remove unused code.

Task ID: 1945032

closes #31428

Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>

addons/lunch/static/src/js/lunch_kanban_controller.js

@@ -18,11 +18,9 @@ var LunchKanbanController = KanbanController.extend({
         add_product: '_onAddProduct',
         change_location: '_onLocationChanged',
         change_user: '_onUserChanged',
-        edit_order: '_onEditOrder',
         open_wizard: '_onOpenWizard',
         order_now: '_onOrderNow',
         remove_product: '_onRemoveProduct',
-        save_order: '_onSaveOrder',
         unlink_order: '_onUnlinkOrder',
     }),
 
@@ -69,7 +67,23 @@ var LunchKanbanController = KanbanController.extend({
             },
         }).then(function (data) {
             self.widgetData = data;
-            self.model._updateLocation(data.user_location[0]);
+            return self.model._updateLocation(data.user_location[0]);
+        });
+    },
+    /**
+     * Renders and appends the lunch banner widget.
+     *
+     * @private
+     */
+    _renderLunchKanbanWidget: function () {
+        var self = this;
+        if (this.widget) {
+            this.widget.destroy();
+        }
+        this.widgetData.wallet = parseFloat(this.widgetData.wallet).toFixed(2);
+        this.widget = new LunchKanbanWidget(this, _.extend(this.widgetData, {edit: this.editMode}));
+        return this.widget.appendTo(document.createDocumentFragment()).then(function () {
+            self.$('.o_lunch_kanban').prepend(self.widget.$el);
         });
     },
     _showPaymentDialog: function (title) {
@@ -91,19 +105,8 @@ var LunchKanbanController = KanbanController.extend({
      * @private
      */
     _update: function () {
-        var self = this;
-
-        var def = this._fetchWidgetData().then(function () {
-            if (self.widget) {
-                self.widget.destroy();
-            }
-            self.widgetData.wallet = parseFloat(self.widgetData.wallet).toFixed(2);
-            self.widget = new LunchKanbanWidget(self, _.extend(self.widgetData, {edit: self.editMode}));
-            return self.widget.appendTo(document.createDocumentFragment()).then(function () {
-                self.$('.o_lunch_kanban').prepend(self.widget.$el);
-            });
-        });
-        return $.when(def, this._super.apply(self, arguments));
+        var def = this._fetchWidgetData().then(this._renderLunchKanbanWidget.bind(this));
+        return $.when(def, this._super.apply(this, arguments));
     },
     /**
      * Override to add the location domain (coming from the lunchKanbanWidget)
@@ -134,12 +137,6 @@ var LunchKanbanController = KanbanController.extend({
             self.reload();
         });
     },
-    _onEditOrder: function (ev) {
-        ev.stopPropagation();
-
-        this.editMode = true;
-        this.reload();
-    },
     _onLocationChanged: function (ev) {
         var self = this;
 
@@ -208,12 +205,6 @@ var LunchKanbanController = KanbanController.extend({
             self.reload();
         });
     },
-    _onSaveOrder: function (ev) {
-        ev.stopPropagation();
-
-        this.editMode = false;
-        this.reload();
-    },
     _onUserChanged: function (ev) {
         ev.stopPropagation();
 

addons/lunch/static/src/js/lunch_kanban_mobile.js

@@ -0,0 +1,74 @@
+odoo.define('lunch.LunchKanbanMobile', function (require) {
+"use strict";
+
+var config = require('web.config');
+var LunchKanbanWidget = require('lunch.LunchKanbanWidget');
+var LunchKanbanController = require('lunch.LunchKanbanController');
+
+if (!config.device.isMobile) {
+    return;
+}
+
+LunchKanbanWidget.include({
+    template: "LunchKanbanWidgetMobile",
+
+    /**
+     * Override to set the toggle state allowing initially open it.
+     *
+     * @override
+     */
+    init: function (parent, params) {
+        this._super.apply(this, arguments);
+        this.keepOpen = params.keepOpen || undefined;
+    },
+});
+
+LunchKanbanController.include({
+    /**
+     * @override
+     */
+    init: function () {
+        this._super.apply(this, arguments);
+        this.openWidget = false;
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Override to add the widget's toggle state to its data.
+     *
+     * @override
+     * @private
+     */
+    _renderLunchKanbanWidget: function () {
+        this.widgetData.keepOpen = this.openWidget;
+        this.openWidget = false;
+        return this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     * @private
+     */
+    _onAddProduct: function () {
+        this.openWidget = true;
+        this._super.apply(this, arguments);
+    },
+
+    /**
+     * @override
+     * @private
+     */
+    _onRemoveProduct: function () {
+        this.openWidget = true;
+        this._super.apply(this, arguments);
+    },
+});
+
+});

addons/lunch/static/src/js/lunch_kanban_record.js

@@ -1,22 +1,36 @@
 odoo.define('lunch.LunchKanbanRecord', function (require) {
-"use strict";
+    "use strict";
 
-/**
- * This file defines the KanbanRecord for the Lunch Kanban view.
- */
+    /**
+     * This file defines the KanbanRecord for the Lunch Kanban view.
+     */
 
-var KanbanRecord = require('web.KanbanRecord');
+    var KanbanRecord = require('web.KanbanRecord');
 
-var LunchKanbanRecord = KanbanRecord.extend({
-    _onGlobalClick: function (ev) {
-        ev.preventDefault();
-        // ignore clicks on oe_kanban_action elements
-        if (!$(ev.target).hasClass('oe_kanban_action')) {
-            this.trigger_up('open_wizard', {productId: this.recordData.product_id});
-        }
-    },
-});
+    var LunchKanbanRecord = KanbanRecord.extend({
+        events: _.extend({}, KanbanRecord.prototype.events, {
+            'click': '_onSelectRecord',
+        }),
 
-return LunchKanbanRecord;
+        //--------------------------------------------------------------------------
+        // Handlers
+        //--------------------------------------------------------------------------
 
-});
+        /**
+         * Open the add product wizard
+         *
+         * @private
+         * @param {MouseEvent} ev Click event
+         */
+        _onSelectRecord: function (ev) {
+            ev.preventDefault();
+            // ignore clicks on oe_kanban_action elements
+            if (!$(ev.target).hasClass('oe_kanban_action')) {
+                this.trigger_up('open_wizard', {productId: this.recordData.product_id});
+            }
+        },
+    });
+
+    return LunchKanbanRecord;
+
+    });

addons/lunch/static/src/js/lunch_kanban_view.js

@@ -5,19 +5,12 @@ var LunchKanbanController = require('lunch.LunchKanbanController');
 var LunchKanbanModel = require('lunch.LunchKanbanModel');
 var LunchKanbanRenderer = require('lunch.LunchKanbanRenderer');
 
-var config = require('web.config');
 var core = require('web.core');
 var KanbanView = require('web.KanbanView');
 var view_registry = require('web.view_registry');
 
 var _lt = core._lt;
 
-if (config.device.isMobile) {
-    // use the classical KanbanView in mobile
-    view_registry.add('lunch_kanban', KanbanView);
-    return;
-}
-
 var LunchKanbanView = KanbanView.extend({
     config: _.extend({}, KanbanView.prototype.config, {
         Controller: LunchKanbanController,

addons/lunch/static/src/js/lunch_kanban_widget.js

@@ -23,11 +23,9 @@ var LunchKanbanWidget = Widget.extend({
         field_changed: '_onFieldChanged',
     },
     events: {
-        'click .o_add_money': '_onAddMoney',
         'click .o_add_product': '_onAddProduct',
         'click .o_lunch_widget_order_button': '_onOrderNow',
         'click .o_remove_product': '_onRemoveProduct',
-        'click .o_lunch_widget_save': '_onSaveOrder',
         'click .o_lunch_widget_unlink': '_onUnlinkOrder',
         'click .o_lunch_open_wizard': '_onLunchOpenWizard',
     },
@@ -124,11 +122,6 @@ var LunchKanbanWidget = Widget.extend({
     // Handlers
     //--------------------------------------------------------------------------
 
-    _onAddMoney: function (ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.trigger_up('add_money', {});
-    },
     _onAddProduct: function (ev) {
         ev.preventDefault();
         ev.stopPropagation();
@@ -163,12 +156,6 @@ var LunchKanbanWidget = Widget.extend({
 
         this.trigger_up('remove_product', {lineId: $(ev.currentTarget).data('id')});
     },
-    _onSaveOrder: function (ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        this.trigger_up('save_order', {});
-    },
     _onUnlinkOrder: function (ev) {
         ev.preventDefault();
         ev.stopPropagation();

addons/lunch/static/src/js/lunch_payment_dialog.js

@@ -1,19 +1,15 @@
 odoo.define('lunch.LunchPaymentDialog', function (require) {
 "use strict";
 
-var core = require('web.core');
 var Dialog = require('web.Dialog');
 
-var qweb = core.qweb;
-
 var LunchPaymentDialog = Dialog.extend({
     template: 'lunch.LunchPaymentDialog',
 
     init: function (parent, options) {
-        var self = this;
         this._super.apply(this, arguments);
 
-        options = (options || {});
+        options = options || {};
 
         this.message = options.message || '';
     },

addons/lunch/static/src/scss/lunch_kanban.scss

@@ -6,6 +6,8 @@
     height: 100%;
     .o_lunch_kanban_banner {
         flex: 0 0 auto;
+        border-bottom: 1px solid #CED4DA;
+        background-color: white;
     }
     .o_kanban_view {
         flex: 1 1 100%;
@@ -19,52 +21,47 @@
     }
 
     .o_lunch_widget {
-        display: flex;
-        border-bottom: 1px solid #CED4DA;
-        background-color: white;
         min-height: 90px;
         max-height: 33vh;
         overflow-y: auto;
 
-        .o_lunch_widget_info {
-            padding: 5px 12px;
-            margin: 4px 8px;
-            width: 300px;
-            flex: 1 1 auto;
-            overflow-y: auto;
-
-            .o_lunch_ordered {
-                color: white;
-                background-color: #F0D970;
-                padding: 1px 3px;
-                border-radius: .25em;
-            }
-
-            .o_lunch_confirmed {
-                color: white;
-                background-color: #00BA4E;
-                padding: 1px 3px;
-                border-radius: .25em;
+        .o_lunch_widget_info.card {
+            &, .card-title, .card-body {
+                color: $o-main-text-color;
+                background-color: inherit !important;
             }
 
-            .o_lunch_widget_title {
+            .card-title {
                 font-weight: bold;
-                font-size: initial;
+                margin-bottom: 0;
             }
 
-            .o_lunch_widget_order_button {
-                display: block;
-                width: 100%;
-                margin-bottom: 4px;
-                margin-top: 12px;
+            .card-body {
+                padding: 0.5rem 1rem;
             }
 
-            .o_lunch_open_wizard {
-                cursor: pointer;
-                &:hover {
-                    font-weight: bolder;
+            .btn-link {
+                padding: 0;
+                &.o_lunch_open_wizard {
+                    color: $o-main-text-color;
+                    font-weight: normal;
                 }
             }
         }
     }
 }
+
+@include media-breakpoint-down(sm) {
+    .o_lunch_kanban {
+        details summary {
+            // Hide the caret. For details see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
+            list-style-type: none;
+            &::-webkit-details-marker {
+                display: none
+            }
+        }
+        .o_lunch_widget {
+            max-height: 100%
+        }
+    }
+}