[IMP] lunch: reintroduce lunch_alerts, change display of wizard

We want to be able to use alerts in order to display a message to the
users.
We want to have a minimal display in the wizard.
We want to link the toppings to the categories instead of the suppliers.

closes odoo/odoo#29301

3 files changed, 94 insertions, 85 deletions

diff --git a/addons/lunch/static/src/scss/lunch_kanban.scss b/addons/lunch/static/src/scss/lunch_kanban.scss
index 44bac01fa4b..eff03959d52 100644
--- a/addons/lunch/static/src/scss/lunch_kanban.scss
+++ b/addons/lunch/static/src/scss/lunch_kanban.scss
@@ -5,18 +5,17 @@
 
     .o_lunch_widget {
         display: flex;
-        overflow: auto;
         border-bottom: 1px solid #CED4DA;
         background-color: white;
         min-height: 90px;
-        max-height: 90px;
+        overflow-y: visible;
 
         .o_lunch_widget_info {
             padding: 5px 12px;
             margin: 4px 8px;
             width: 300px;
             flex: 1 1 auto;
-            overflow-y: auto;
+            overflow-y: visible;
 
             .o_lunch_ordered {
                 color: white;
diff --git a/addons/lunch/static/src/xml/lunch_kanban.xml b/addons/lunch/static/src/xml/lunch_kanban.xml
index 74a57f7cfec..61077e54e13 100644
--- a/addons/lunch/static/src/xml/lunch_kanban.xml
+++ b/addons/lunch/static/src/xml/lunch_kanban.xml
@@ -1,101 +1,108 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates>
-    <div class="o_lunch_widget" t-name="LunchKanbanWidget">
-        <div class="o_lunch_widget_info d-flex flex-row">
-            <div>
-                <img class="rounded-circle" t-attf-src="{{ widget.data.userimage }}"/>
-            </div>
-            <div class="w-50 ml-2 py-3">
+    <div t-name="LunchKanbanWidget">
+        <div class="o_lunch_widget">
+            <div class="o_lunch_widget_info d-flex flex-row">
                 <div>
-                    <t t-if="widget.data.is_manager">
-                        <select class="o_input">
-                            <t t-foreach="widget.data.users" t-as="user">
-                                <option t-attf-data-user-id="{{ user.id }}" t-attf-value="{{ user.name }}"><t t-esc="user.name"/></option>
-                            </t>
-                        </select>
-                    </t>
-                    <t t-else="">
-                        <t t-esc="widget.data.username"/>
-                    </t>
+                    <img class="rounded-circle" t-attf-src="{{ widget.data.userimage }}"/>
                 </div>
-                <div class="d-flex flex-row">
-                    <span class="flex-grow-1">
-                        <i class="fa fa-money"/>
-                        <t t-call="currency_field">
-                            <t t-set="value" t-value="widget.data.wallet"/>
-                            <t t-set="currency" t-value="widget.currency"/>
+                <div class="w-50 ml-2 py-3">
+                    <div>
+                        <t t-if="widget.data.is_manager">
+                            <select class="o_input">
+                                <t t-foreach="widget.data.users" t-as="user">
+                                    <option t-attf-data-user-id="{{ user.id }}" t-attf-value="{{ user.name }}"><t t-esc="user.name"/></option>
+                                </t>
+                            </select>
+                        </t>
+                        <t t-else="">
+                            <t t-esc="widget.data.username"/>
                         </t>
-                    </span>
-                    <span>
-                        <a class="o_add_money" href="#">Add money</a>
-                    </span>
-                </div>
-            </div>
-        </div>
-        <div class="o_lunch_widget_info">
-            <t t-if="widget.data.order">
-                <t t-if="widget.data.state == 'ordered'">
-                    <t t-set="state_class" t-value="'o_lunch_ordered'"/>
-                </t>
-                <t t-else="widget.data.state == 'confirmed'">
-                    <t t-set="state_class" t-value="'o_lunch_confirmed'"/>
-                </t>
-                <div class="d-flex flex-row">
-                    <div class="flex-grow-1">
-                        <span class="o_lunch_widget_title">Your order</span>
-                        <a href="#"><i t-if="widget.data.state != 'confirmed'" class="fa fa-trash o_lunch_widget_unlink"/></a>
-                        <a t-if="widget.data.state == 'ordered' &amp;&amp; !widget.data.edit" href="#" class="o_lunch_widget_edit">Edit</a>
-                        <a t-if="widget.data.state == 'ordered' &amp;&amp; widget.data.edit" href="#" class="o_lunch_widget_save">Save</a>
                     </div>
-                    <div t-if="widget.data.state != 'new'" t-esc="widget.data.state" t-attf-class="flex-grow-0 {{ state_class }}"/>
-                </div>
-                <div t-foreach="widget.data.lines" t-as="line">
                     <div class="d-flex flex-row">
-                        <div class="flex-grow-0">
-                            <a class="o_remove_product" t-if="widget.data.state == 'new' || widget.data.edit" t-attf-data-id="{{ line.id }}" href="#"><i class="fa fa-minus-circle"/></a>
-                            <span t-esc="line.quantity"/>
-                            <a class="o_add_product" t-if="widget.data.state == 'new' || widget.data.edit" t-attf-data-id="{{ line.id }}" href="#"><i class="fa fa-plus-circle"/></a>
-                        </div>
-                        <div class="flex-grow-1 pl-2">
-                            <span t-esc="line.product[0]"/>
-                        </div>
-                        <div class="flex-grow-0">
+                        <span class="flex-grow-1">
+                            <i class="fa fa-money"/>
                             <t t-call="currency_field">
-                                <t t-set="value" t-value="line.product[1]"/>
+                                <t t-set="value" t-value="widget.data.wallet"/>
                                 <t t-set="currency" t-value="widget.currency"/>
                             </t>
+                        </span>
+                        <span>
+                            <a class="o_add_money" href="#">Add money</a>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="o_lunch_widget_info">
+                <t t-if="widget.data.order">
+                    <t t-if="widget.data.state == 'ordered'">
+                        <t t-set="state_class" t-value="'o_lunch_ordered'"/>
+                    </t>
+                    <t t-else="widget.data.state == 'confirmed'">
+                        <t t-set="state_class" t-value="'o_lunch_confirmed'"/>
+                    </t>
+                    <div class="d-flex flex-row">
+                        <div class="flex-grow-1">
+                            <span class="o_lunch_widget_title">Your order</span>
+                            <a href="#"><i t-if="widget.data.state != 'confirmed'" class="fa fa-trash o_lunch_widget_unlink"/></a>
+                            <a t-if="widget.data.state == 'ordered' &amp;&amp; !widget.data.edit" href="#" class="o_lunch_widget_edit">Edit</a>
+                            <a t-if="widget.data.state == 'ordered' &amp;&amp; widget.data.edit" href="#" class="o_lunch_widget_save">Save</a>
                         </div>
+                        <div t-if="widget.data.state != 'new'" t-esc="widget.data.state" t-attf-class="flex-grow-0 {{ state_class }}"/>
                     </div>
-                    <div t-foreach="line.toppings" t-as="topping" class="d-flex flex-row">
-                        <div class="flex-grow-1 pl-5 ml-5">
-                            <span>+ <t t-esc="topping[0]"/></span>
+                    <div t-foreach="widget.data.lines" t-as="line">
+                        <div class="d-flex flex-row">
+                            <div class="flex-grow-0">
+                                <a class="o_remove_product" t-if="widget.data.state == 'new' || widget.data.edit" t-attf-data-id="{{ line.id }}" href="#"><i class="fa fa-minus-circle"/></a>
+                                <span t-esc="line.quantity"/>
+                                <a class="o_add_product" t-if="widget.data.state == 'new' || widget.data.edit" t-attf-data-id="{{ line.id }}" href="#"><i class="fa fa-plus-circle"/></a>
+                            </div>
+                            <div class="flex-grow-1 pl-2">
+                                <span t-esc="line.product[0]"/>
+                            </div>
+                            <div class="flex-grow-0">
+                                <t t-call="currency_field">
+                                    <t t-set="value" t-value="line.product[1]"/>
+                                    <t t-set="currency" t-value="widget.currency"/>
+                                </t>
+                            </div>
                         </div>
-                        <div class="flex-grow-0">
+                        <div t-foreach="line.toppings" t-as="topping" class="d-flex flex-row">
+                            <div class="flex-grow-1 pl-5 ml-5">
+                                <span>+ <t t-esc="topping[0]"/></span>
+                            </div>
+                            <div class="flex-grow-0">
+                                <t t-call="currency_field">
+                                    <t t-set="value" t-value="topping[1]"/>
+                                    <t t-set="currency" t-value="widget.currency"/>
+                                </t>
+                            </div>
+                        </div>
+                    </div>
+                </t>
+            </div>
+            <div class="o_lunch_widget_info">
+                <t t-if="widget.data.order &amp;&amp; widget.data.state == 'new'">
+                    <div class="d-flex flex-row">
+                        <div class="o_lunch_widget_title flex-grow-1">
+                            Total
+                        </div>
+                        <div class="flex-grow-0 pr-1">
                             <t t-call="currency_field">
-                                <t t-set="value" t-value="topping[1]"/>
+                                <t t-set="value" t-value="widget.data.total"/>
                                 <t t-set="currency" t-value="widget.currency"/>
                             </t>
                         </div>
                     </div>
-                </div>
-            </t>
-        </div>
-        <div class="o_lunch_widget_info">
-            <t t-if="widget.data.order &amp;&amp; widget.data.state == 'new'">
-                <div class="d-flex flex-row">
-                    <div class="o_lunch_widget_title flex-grow-1">
-                        Total
-                    </div>
-                    <div class="flex-grow-0 pr-1">
-                        <t t-call="currency_field">
-                            <t t-set="value" t-value="widget.data.total"/>
-                            <t t-set="currency" t-value="widget.currency"/>
-                        </t>
-                    </div>
-                </div>
-                <button class="btn btn-primary o_lunch_widget_order_button" t-attf-data-order-id="{{ widget.data.order }}">ORDER NOW</button>
-            </t>
+                    <button class="btn btn-primary o_lunch_widget_order_button" t-attf-data-order-id="{{ widget.data.order }}">ORDER NOW</button>
+                </t>
+            </div>
         </div>
+        <t t-foreach="widget.data.alerts" t-as="alert">
+            <div class="alert alert-danger" role="alert">
+                <t t-esc="alert.message"/>
+            </div>
+        </t>
     </div>
 
     <t t-name="currency_field">
diff --git a/addons/lunch/static/tests/test_lunch_kanban.js b/addons/lunch/static/tests/test_lunch_kanban.js
index b2062609974..649c84b680e 100644
--- a/addons/lunch/static/tests/test_lunch_kanban.js
+++ b/addons/lunch/static/tests/test_lunch_kanban.js
@@ -49,7 +49,8 @@ QUnit.module('Views', {
                         state: 'new',
                         lines: [
                             {id: 1, product: ['Pizza Italiana', 7.4], toppings: [], quantity: 1.0, price: 7.4}
-                        ]
+                        ],
+                        alerts: [],
                     });
                 } else if (route.startsWith('data:image/png;base64,')) {
                     return $.when();
@@ -111,7 +112,8 @@ QUnit.module('Views', {
                         state: state,
                         lines: [
                             {id: 1, product: ['Pizza Italiana', 7.4], toppings: [], quantity: 1.0, price: 7.4}
-                        ]
+                        ],
+                        alerts: [],
                     });
                 } else if (route === '/lunch/payment_message') {
                     return $.when({message: 'Hello'});
@@ -182,7 +184,8 @@ QUnit.module('Views', {
                         state: 'new',
                         lines: [
                             {id: 1, product: ['Pizza Italiana', 7.4], toppings: [], quantity: 1.0, price: 7.4}
-                        ]
+                        ],
+                        alerts: [],
                     });
                 } else if (route.startsWith('data:image/png;base64,')) {
                     return $.when();