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

This header displays icons that proposes to install other website related
applications.
This commit is contained in:
Rohan Patel
2017-03-03 16:57:06 +01:00
committed by Thibault Delavallée
parent 79597a2b84
commit 4d1cef1b1f
4 changed files with 120 additions and 41 deletions
+22 -9
View File
@@ -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
@@ -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;
},
});
@@ -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;
@@ -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>