[IMP] website: improve dashboard header to have a website-related dashboard

This header displays icons that proposes to install other website related
applications.

4 files changed, 120 insertions, 41 deletions

diff --git a/addons/website/controllers/backend.py b/addons/website/controllers/backend.py
index 6897da70fc3..3c9323c6823 100644
--- a/addons/website/controllers/backend.py
+++ b/addons/website/controllers/backend.py
@@ -9,16 +9,29 @@ class WebsiteBackend(http.Controller):
 
     @http.route('/website/fetch_dashboard_data', type="json", auth='user')
     def fetch_dashboard_data(self, date_from, date_to):
-
-        params = request.env['ir.config_parameter']
-        ga_client_id = params.sudo().get_param('google_management_client_id', default='')
-
-        return {
-            'groups': {'system': request.env['res.users'].has_group('base.group_system')},
+        has_group_system = request.env['res.users'].has_group('base.group_system')
+        has_group_designer = request.env['res.users'].has_group('website.group_website_designer')
+        if has_group_system:
+            apps_data = dict((app['name'], app) for app in request.env['ir.module.module'].sudo().search_read(
+                ['|', ('name', 'ilike', 'website'), ('application', '=', True)],
+                ['id', 'sequence', 'name', 'shortdesc', 'state'],
+                order='sequence ASC'))
+        else:
+            apps_data = {}
+        dashboard_data = {
+            'groups': {
+                'system': has_group_system,
+                'website_designer': has_group_designer
+            },
             'currency': request.env.user.company_id.currency_id.id,
             'dashboards': {
-                'visits': {
-                    'ga_client_id': ga_client_id,
-                }
+                'apps_data': apps_data,
+                'visits': {},
             }
         }
+        if has_group_designer:
+            ga_dashboard = request.env['ir.values'].sudo().get_default('website.config.settings', 'has_google_analytics_dashboard')
+            if ga_dashboard:
+                ga_client_id = request.env['ir.config_parameter'].sudo().get_param('google_management_client_id', default='')
+                dashboard_data['dashboards']['visits']['ga_client_id'] = ga_client_id
+        return dashboard_data
diff --git a/addons/website/static/src/js/website.backendDashboard.js b/addons/website/static/src/js/website.backendDashboard.js
index 23e4c74a817..3b5ad204ad7 100644
--- a/addons/website/static/src/js/website.backendDashboard.js
+++ b/addons/website/static/src/js/website.backendDashboard.js
@@ -6,12 +6,14 @@ var ajax = require('web.ajax');
 var ControlPanelMixin = require('web.ControlPanelMixin');
 var core = require('web.core');
 var Dialog = require('web.Dialog');
+var formats = require('web.formats');
 var Model = require('web.Model');
 var session = require('web.session');
-var utils = require('web.utils');
 var web_client = require('web.web_client');
 var Widget = require('web.Widget');
 
+var local_storage = require('web.local_storage');
+
 var _t = core._t;
 var QWeb = core.qweb;
 
@@ -19,7 +21,9 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
     template: "website.WebsiteDashboardMain",
     events: {
         'click .js_link_analytics_settings': 'on_link_analytics_settings',
-        'click .o_dashboard_action': 'on_dashboard_action_clicked',
+        'click .o_dashboard_action': 'on_dashboard_action',
+        'click .o_dashboard_action_form': 'on_dashboard_action_form',
+        'click .o_dashboard_hide_panel': 'on_dashboard_hide_panel',
     },
 
     init: function(parent, context) {
@@ -28,6 +32,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
         this.date_range = 'week';  // possible values : 'week', 'month', year'
         this.date_from = moment().subtract(1, 'week');
         this.date_to = moment();
+        this.hidden_apps = JSON.parse(local_storage.getItem('website_dashboard_hidden_app_ids') || '[]');
 
         this.dashboards_templates = ['website.dashboard_visits'];
         this.graphs = [];
@@ -107,7 +112,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
     render_dashboards: function() {
         var self = this;
         _.each(this.dashboards_templates, function(template) {
-            self.$('.o_website_dashboard').append(QWeb.render(template, {widget: self}));
+            self.$('.o_website_dashboard_content').append(QWeb.render(template, {widget: self}));
         });
     },
 
@@ -140,7 +145,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
                 .append("svg");
 
             svg
-                .attr("height", '20em')
+                .attr("height", '24em')
                 .datum(chart_values)
                 .call(chart);
 
@@ -206,7 +211,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
 
         var self = this;
         $.when(this.fetch_data()).then(function() {
-            self.$('.o_website_dashboard').empty();
+            self.$('.o_website_dashboard_content').empty();
             self.render_dashboards();
             self.render_graphs();
         });
@@ -218,7 +223,7 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
         this.update_cp();
     },
 
-    on_dashboard_action_clicked: function (ev) {
+    on_dashboard_action: function (ev) {
         ev.preventDefault();
         var $action = $(ev.currentTarget);
         var additional_context = {};
@@ -235,6 +240,32 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
         });
     },
 
+    on_dashboard_action_form: function (ev) {
+        ev.preventDefault();
+        var $action = $(ev.currentTarget);
+        this.do_action({
+            name: $action.attr('name'),
+            res_model: $action.data('res_model'),
+            res_id: $action.data('res_id'),
+            views: [[false, 'form']],
+            type: 'ir.actions.act_window',
+        }, {
+            on_reverse_breadcrumb: this.on_reverse_breadcrumb
+        });
+    },
+
+    on_dashboard_hide_panel: function (ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        var $action = $(ev.currentTarget);
+        // update hidden module list
+        this.hidden_apps = JSON.parse(local_storage.getItem('website_dashboard_hidden_app_ids') || '[]');
+        this.hidden_apps.push(JSON.parse($action.data('module_id')));
+        local_storage.setItem('website_dashboard_hidden_app_ids', JSON.stringify(this.hidden_apps));
+        // remove box
+        $action.closest(".o_box_item").remove();
+    },
+
     update_cp: function() {
         var self = this;
         if (!this.$searchview) {
@@ -535,24 +566,24 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
             return i % keep_one_of === 0;
         });
     },
-    format_number: function(value, symbol) {
-        value = utils.human_number(value);
-        if (symbol === 'currency') {
+    format_number: function(value, type, digits, symbol) {
+        if (type === 'currency') {
             return this.render_monetary_field(value, this.currency_id);
         } else {
-            return value + (symbol || '');
+            return formats.format_value(value || 0, {type: type, digits: digits}) + ' ' + symbol;
         }
     },
     render_monetary_field: function(value, currency_id) {
         var currency = session.get_currency(currency_id);
+        var formatted_value = formats.format_value(value || 0, {type: "float", digits: currency && currency.digits});
         if (currency) {
             if (currency.position === "after") {
-                value += currency.symbol;
+                formatted_value += currency.symbol;
             } else {
-                value = currency.symbol + value;
+                formatted_value = currency.symbol + formatted_value;
             }
         }
-        return value;
+        return formatted_value;
     },
 
 });
diff --git a/addons/website/static/src/less/website.backendDashboard.less b/addons/website/static/src/less/website.backendDashboard.less
index 1e162f6c43b..83116d07a94 100644
--- a/addons/website/static/src/less/website.backendDashboard.less
+++ b/addons/website/static/src/less/website.backendDashboard.less
@@ -27,9 +27,9 @@
 
             h4 { margin: 0 0 0 8px; }
 
-            h2 { color: @odoo-brand-primary; }
+            h2, h4 { color: @odoo-brand-primary; }
             
-            .col-md-6 {
+            .col-md-5, .col-md-7 {
                 padding: 15px;
 
                 .js_field_selection {
@@ -80,12 +80,6 @@
                         .translate(45; 30) !important;
                     }
 
-                    g.nv-y.nv-axis, g.nv-x.nv-axis, g.nv-y.nv-axis .nv-axisMaxMin {
-                        text {
-                            opacity: .3 !important;
-                        }
-                    }
-
                     g.nv-x.nv-axis .tick > line {
                         opacity: 0 !important;
                     }
@@ -122,7 +116,7 @@
                         background-color: @odoo-brand-optional !important;
                     }
                     tr:last-child .legend-color-guide > div {
-                        background-color: darken(@odoo-brand-optional, 10%) !important;
+                        background-color: darken(@odoo-brand-lightsecondary, 10%) !important;
                     }
                 }
             }
@@ -139,7 +133,7 @@
                         display: block !important;
                     }
                     @media (min-width: @screen-sm-min) {
-                        flex: 0 0 20%;
+                        flex: 0 0 16.6%;
                     }
                 }
             }
@@ -172,7 +166,7 @@
                     color: white;
                     .o_apps_hidden {
                         display: none;
-                        &.o_apps_hide_panel {
+                        &.o_dashboard_hide_panel {
                             position: absolute;
                             top: 0px;
                             right: 0px;
@@ -198,6 +192,10 @@
 
         .o_dashboard_visits {
 
+            h2 {
+                padding: 15px;
+            }
+
             .o_demo_background {
 
                 margin-top: 16px;
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index 992ffc5d821..a30267af9a8 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -9,6 +9,7 @@
         <div class="o_dashboards">
             <div class="container-fluid o_website_dashboard">
                 <t t-call="website.dashboard_header"/>
+                <div class="o_website_dashboard_content"/>
             </div>
         </div>
     </t>
@@ -22,17 +23,54 @@
                         Go to Website
                     </div>
                 </a>
+                <t t-if="widget.groups.system">
+                    <t t-set="apps" t-value="{
+                        'website_crm':              {'icon': 'fa-file-text-o', 'help': _('Add a contact form to your Contact Us page.')},
+                        'website_sale':             {'icon': 'fa-shopping-cart', 'help': _('Sell online to reach new customers.')},
+                        'website_blog':             {'icon': 'fa-rss-square', 'help': _('Build up a community with an efficient content strategy.')},
+                        'website_hr_recruitment':   {'icon': 'fa-suitcase', 'help': _('Promote your job announces to attract new talents.')},
+                        'website_event':            {'icon': 'fa-ticket', 'help': _('Promote your events, manage attendance and sell tickets.')},
+                        'im_livechat':              {'icon': 'fa-comments-o', 'help': _('Chat with your visitors in real time.')},
+                    }"/>
+                </t>
+                <t t-if="! widget.groups.system"><t t-set="apps" t-value="{}"/></t>
+                <t t-set="vignette_max" t-value="6"/>
+                <t t-set="vignette_nbr" t-value="1"/>
+                <t t-foreach="apps" t-as="app">
+                    <t t-set="app_data" t-value="widget.dashboards_data.apps_data[app]"/>
+                    <t t-set="app_dashboard" t-value="apps[app]"/>
+                    <t t-if="vignette_nbr &lt; vignette_max &amp;&amp; widget.hidden_apps.indexOf(app_data['id']) == -1 &amp;&amp; app_data['state'] == 'uninstalled'">
+                        <t t-set="vignette_nbr" t-value="vignette_nbr + 1"/>
+                        <a href="#" class="o_box_item o_dashboard_action_form"
+                                name="Apps"
+                                data-res_model="ir.module.module"
+                                t-att-data-res_id="app_data['id']"
+                                t-att-title="app_dashboard['help']">
+                            <div class="o_inner_box o_apps">
+                                <div class="o_apps_show">
+                                    <i t-attf-class="fa #{app_dashboard['icon']} fa-3x"></i><br/>
+                                    <t t-esc="app_data['shortdesc']"/>
+                                </div>
+                                <div class="o_apps_hidden">
+                                    <i class="fa fa-plus-circle fa-3x"></i><br/>
+                                    Add this feature
+                                </div>
+                                <i class="o_apps_hidden o_dashboard_hide_panel fa fa-close" t-att-data-module_id="app_data['id']" title="Remove this suggestion from dashboard"/>
+                            </div>
+                        </a>
+                    </t>
+                </t>
             </div>
         </div>
     </t>
 
     <t t-name="website.dashboard_visits">
-        <div class="row o_dashboard_visits">
+        <div class="row o_dashboard_visits" t-if="widget.groups.website_designer">
             <div class="col-xs-12 o_box">
                 <h2>Visits</h2>
                 <div t-if="widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id">
                     <div class="row js_analytics_components"/>
-                    <a href="#" t-if="widget.groups.system" class="js_link_analytics_settings">Edit my Analytics Client ID</a>
+                    <a href="#" class="js_link_analytics_settings">Edit my Analytics Client ID</a>
                 </div>
                 <div t-if="!(widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id)" class="col-md-12">
                     <div class="o_demo_background">
@@ -40,8 +78,7 @@
                         </div>
                         <div class="o_buttons text-center">
                             <h3>There is no data currently available.</h3>
-                            <button t-if="widget.groups.system" class="btn btn-sm btn-primary js_link_analytics_settings center-block mb8">Link my Analytics Account</button>
-                            <h5 t-if="!widget.groups.system">You do not have sufficient access rights to configure the Google Analytics account.</h5>
+                            <button class="btn btn-sm btn-primary js_link_analytics_settings center-block mb8">Link my Analytics Account</button>
                         </div>
                     </div>
                 </div>
@@ -60,10 +97,10 @@
     </div>
 
     <t t-name="website.DateRangeButtons">
-        <div class="btn-group btn-group-sm o_date_range_buttons">
-            <button class="btn btn-sm btn-default js_date_range active" data-date="week">Week</button>
-            <button class="btn btn-sm btn-default js_date_range" data-date="month">Month</button>
-            <button class="btn btn-sm btn-default js_date_range" data-date="year">Year</button>
+        <div class="btn-group btn-group-sm o_date_range_buttons pull-right">
+            <button class="btn btn-sm btn-default js_date_range active" data-date="week">Last Week</button>
+            <button class="btn btn-sm btn-default js_date_range" data-date="month">Last Month</button>
+            <button class="btn btn-sm btn-default js_date_range" data-date="year">Last Year</button>
         </div>
     </t>
 </templates>