[IMP] hr_expense: Improve global UX (back2basics)

closes odoo/odoo#55852

Taskid: 2303951
Related: odoo/enterprise#12394
Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>

3 files changed, 73 insertions, 3 deletions

diff --git a/addons/hr_expense/static/src/js/expense_qr_code_action.js b/addons/hr_expense/static/src/js/expense_qr_code_action.js
new file mode 100644
index 00000000000..19226545ede
--- /dev/null
+++ b/addons/hr_expense/static/src/js/expense_qr_code_action.js
@@ -0,0 +1,24 @@
+odoo.define('hr_expense.qr_code_action', function (require) {
+"use strict";
+
+const AbstractAction = require('web.AbstractAction');
+const core = require('web.core');
+const config = require('web.config');
+
+const QRModalAction = AbstractAction.extend({
+    template: 'hr_expense_qr_code',
+    xmlDependencies: ['/hr_expense/static/src/xml/expense_qr_modal_template.xml'],
+
+    init: function(parent, action){
+        this._super.apply(this, arguments);
+        const qr_vals = [
+                '002',              // Version
+                '1',                // Character Set
+                action.params.url,  // Download app url
+        ];
+        this.url = _.str.sprintf("/report/barcode/?type=QR&value=%s&width=256&height=256&humanreadable=1", encodeURI(qr_vals.join('\n')));
+    },
+});
+
+core.action_registry.add('expense_qr_code_modal', QRModalAction);
+});
diff --git a/addons/hr_expense/static/src/js/expense_views.js b/addons/hr_expense/static/src/js/expense_views.js
index 5f2b7ad488d..adc9bfdd301 100644
--- a/addons/hr_expense/static/src/js/expense_views.js
+++ b/addons/hr_expense/static/src/js/expense_views.js
@@ -3,13 +3,16 @@ odoo.define('hr_expense.expenses.tree', function (require) {
     var DocumentUploadMixin = require('hr_expense.documents.upload.mixin');
     var KanbanController = require('web.KanbanController');
     var KanbanView = require('web.KanbanView');
+    var PivotView = require('web.PivotView');
     var ListController = require('web.ListController');
     var ListView = require('web.ListView');
     var viewRegistry = require('web.view_registry');
     var core = require('web.core');
     var ListRenderer = require('web.ListRenderer');
     var KanbanRenderer = require('web.KanbanRenderer');
+    var PivotRenderer = require('web.PivotRenderer');
     var session = require('web.session');
+    const config = require('web.config');
 
     var QWeb = core.qweb;
 
@@ -21,6 +24,38 @@ odoo.define('hr_expense.expenses.tree', function (require) {
         }),
     });
 
+    const ExpenseQRCodeMixin = {
+        async _renderView() {
+            const self = this;
+            await this._super(...arguments);
+            const google_url = "https://play.google.com/store/apps/details?id=com.odoo.mobile";
+            const apple_url = "https://apps.apple.com/be/app/odoo/id1272543640";
+            const action_desktop = {
+                name: 'Download our App',
+                type: 'ir.actions.client',
+                tag: 'expense_qr_code_modal',
+                params: {'url': "https://apps.apple.com/be/app/odoo/id1272543640"},
+                target: 'new',
+            };
+            this.$el.find('img.o_expense_apple_store').on('click', function(event) {
+                event.preventDefault();
+                if (!config.device.isMobile) {
+                    self.do_action(_.extend(action_desktop, {params: {'url': apple_url}}));
+                } else {
+                    self.do_action({type: 'ir.actions.act_url', url: apple_url});
+                }
+            });
+            this.$el.find('img.o_expense_google_store').on('click', function(event) {
+                event.preventDefault();
+                if (!config.device.isMobile) {
+                    self.do_action(_.extend(action_desktop, {params: {'url': google_url}}));
+                } else {
+                    self.do_action({type: 'ir.actions.act_url', url: google_url});
+                }
+            });
+        },
+    };
+
     const ExpenseDashboardMixin = {
         _render: async function () {
             var self = this;
@@ -50,9 +85,9 @@ odoo.define('hr_expense.expenses.tree', function (require) {
             }
             return value;
         }
-    }
+    };
 
-    var ExpenseListRenderer = ListRenderer.extend(ExpenseDashboardMixin);
+    var ExpenseListRenderer = ListRenderer.extend(ExpenseDashboardMixin, ExpenseQRCodeMixin);
 
     var ExpensesListViewDashboardUpload = ListView.extend({
         config: _.extend({}, ListView.prototype.config, {
@@ -75,7 +110,7 @@ odoo.define('hr_expense.expenses.tree', function (require) {
         }),
     });
 
-    var ExpenseKanbanRenderer = KanbanRenderer.extend(ExpenseDashboardMixin);
+    var ExpenseKanbanRenderer = KanbanRenderer.extend(ExpenseDashboardMixin, ExpenseQRCodeMixin);
 
     var ExpensesKanbanView = KanbanView.extend({
         config: _.extend({}, KanbanView.prototype.config, {
diff --git a/addons/hr_expense/static/src/xml/expense_qr_modal_template.xml b/addons/hr_expense/static/src/xml/expense_qr_modal_template.xml
new file mode 100644
index 00000000000..00a59f418fe
--- /dev/null
+++ b/addons/hr_expense/static/src/xml/expense_qr_modal_template.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+<t t-name="hr_expense_qr_code">
+    <div style="text-align:center;" class="o_expense_modal">
+        <t t-if="widget.url">
+            <h3>Scan this QR code to get the Odoo app:</h3><br/><br/>
+            <img class="border border-dark rounded" t-att-src="widget.url"/>
+        </t>
+    </div>
+</t>
+</templates>