From 4cb228d823e0346e6052091d397249b8e39d576b Mon Sep 17 00:00:00 2001 From: jem-odoo Date: Mon, 28 Jan 2019 10:15:50 +0000 Subject: [PATCH] [IMP] portal,website_rating: new popup composer to submit rating Rating document available on a website will become more common, but we want to do it with different UI widget. This commit introduces a new "popup rating composer": the idea is the rating average is displayed with stars, and when clicking on it, a popup with the composer appears. The user can so submit its review. To do so, we factorize the Portal Composer into a dedicated widget (instead of natively inside Portal Chatter). Task-1902304 --- addons/portal/static/src/js/portal_chatter.js | 86 +++++-- .../portal/static/src/xml/portal_chatter.xml | 19 +- .../static/src/js/website_mail.js | 217 ++++++++++++------ .../static/src/scss/website_rating.scss | 12 + .../static/src/xml/portal_chatter.xml | 71 ++++++ .../static/src/xml/website_mail.xml | 32 +-- .../views/website_rating_templates.xml | 15 ++ 7 files changed, 326 insertions(+), 126 deletions(-) create mode 100644 addons/website_rating/static/src/xml/portal_chatter.xml diff --git a/addons/portal/static/src/js/portal_chatter.js b/addons/portal/static/src/js/portal_chatter.js index 7f4ba583036..5a56a35bed9 100644 --- a/addons/portal/static/src/js/portal_chatter.js +++ b/addons/portal/static/src/js/portal_chatter.js @@ -12,6 +12,43 @@ var time = require('web.time'); var qweb = core.qweb; var _t = core._t; +/** + * Widget PortalComposer + * + * Display the composer (according to access right) + * + */ +var PortalComposer = Widget.extend({ + template: 'portal.Composer', + events: { + 'click .o_portal_chatter_composer_btn': '_onSubmitButtonClick', + }, + init: function(parent, options){ + this._super.apply(this, arguments); + this.options = _.defaults(options || {}, { + 'allow_composer': true, + 'display_composer': false, + 'csrf_token': odoo.csrf_token, + 'token': false, + 'res_model': false, + 'res_id': false, + }); + + // TODO simplify this using the 'async' keyword in the events + // property definition as soon as this widget is converted in + // frontend widget. + this._onSubmitButtonClick = dom.makeButtonHandler(this._onSubmitButtonClick); + }, + /** + * @private + */ + _onSubmitButtonClick: function () { + return $.Deferred(); + }, +}); + + + /** * Widget PortalChatter * @@ -20,15 +57,23 @@ var _t = core._t; * - Provider API to filter displayed messages */ var PortalChatter = Widget.extend({ - template: 'portal.chatter', + template: 'portal.Chatter', events: { "click .o_portal_chatter_pager_btn": '_onClickPager', - 'click .o_portal_chatter_composer_btn': '_onSubmitButtonClick', }, + xmlDependencies: ['/portal/static/src/xml/portal_chatter.xml'], init: function(parent, options){ + var self = this; + this.options = {}; this._super.apply(this, arguments); - this.options = _.defaults(options || {}, { + + // underscorize the camelcased option keys + _.each(options, function(val, key) { + self.options[_.str.underscored(key)] = val; + }); + // set default options + this.options = _.defaults(this.options, { 'allow_composer': true, 'display_composer': false, 'csrf_token': odoo.csrf_token, @@ -45,20 +90,16 @@ var PortalChatter = Widget.extend({ this.set('pager', {}); this.set('domain', this.options['domain']); this._current_page = this.options['pager_start']; - - // TODO simplify this using the 'async' keyword in the events - // property definition as soon as this widget is converted in - // frontend widget. - this._onSubmitButtonClick = dom.makeButtonHandler(this._onSubmitButtonClick); }, willStart: function(){ var self = this; // load qweb template and init data return $.when( + this._super.apply(this, arguments), rpc.query({ route: '/mail/chatter_init', params: this._messageFetchPrepareParams() - }), this._loadTemplates() + }), ).then(function(result){ self.result = result; self.options = _.extend(self.options, self.result['options'] || {}); @@ -80,7 +121,18 @@ var PortalChatter = Widget.extend({ // set options and parameters this.set('message_count', this.options['message_count']); this.set('messages', this.preprocessMessages(this.result['messages'])); - return this._super.apply(this, arguments); + + + var defs = []; + defs.push(this._super.apply(this, arguments)); + + // instanciate and insert composer widget + if (this.options['display_composer']) { + this._composer = new PortalComposer(this, this.options); + defs.push(this._composer.replace(this.$('.o_portal_chatter_composer'))); + } + + return $.when.apply($, defs); }, //-------------------------------------------------------------------------- @@ -134,13 +186,6 @@ var PortalChatter = Widget.extend({ var d = domain ? domain : _.clone(this.get('domain')); this.set('domain', d); // trigger fetch message }, - /** - * @private - * @returns {Deferred} - */ - _loadTemplates: function(){ - return ajax.loadXML('/portal/static/src/xml/portal_chatter.xml', qweb); - }, _messageFetchPrepareParams: function(){ var self = this; var data = { @@ -234,12 +279,6 @@ var PortalChatter = Widget.extend({ var page = $(ev.currentTarget).data('page'); this._changeCurrentPage(page); }, - /** - * @private - */ - _onSubmitButtonClick: function () { - return $.Deferred(); - }, }); base.ready().then(function () { @@ -251,6 +290,7 @@ base.ready().then(function () { }); return { + PortalComposer: PortalComposer, PortalChatter: PortalChatter, }; diff --git a/addons/portal/static/src/xml/portal_chatter.xml b/addons/portal/static/src/xml/portal_chatter.xml index a306cb246e1..f090965bde2 100644 --- a/addons/portal/static/src/xml/portal_chatter.xml +++ b/addons/portal/static/src/xml/portal_chatter.xml @@ -15,7 +15,12 @@ - + +

Leave a comment

@@ -45,13 +50,16 @@
-
+ +
- +
avatar
@@ -96,13 +104,14 @@
- +
+
+
-
diff --git a/addons/website_rating/static/src/js/website_mail.js b/addons/website_rating/static/src/js/website_mail.js index 01bf0295494..2848bc79d30 100644 --- a/addons/website_rating/static/src/js/website_mail.js +++ b/addons/website_rating/static/src/js/website_mail.js @@ -1,27 +1,122 @@ odoo.define('website_rating.thread', function(require) { 'use strict'; + var base = require('web_editor.base'); var ajax = require('web.ajax'); var core = require('web.core'); var Widget = require('web.Widget'); + var rootWidget = require('web_editor.root_widget'); + + var session = require('web.session'); var qweb = core.qweb; var _t = core._t; + var PortalComposer = require('portal.chatter').PortalComposer; var PortalChatter = require('portal.chatter').PortalChatter; /** - * Extends Frontend Chatter to handle rating + * PortalComposer + * + * Extends Frontend Composer to handle rating submission */ - PortalChatter.include({ - events: _.extend({}, PortalChatter.prototype.events, { + PortalComposer.include({ + events: _.extend({}, PortalComposer.prototype.events, { "mousemove .stars i" : "_onMoveStar", "mouseleave .stars i" : "_onMoveOutStar", "click .stars" : "_onClickStar", "mouseleave .stars" : "_onMouseleaveStar", + }), + + init: function(parent, options){ + this._super.apply(this, arguments); + // star input widget + this.labels = { + '0': "", + '1': _t("I hate it"), + '2': _t("I don't like it"), + '3': _t("It's okay"), + '4': _t("I like it"), + '5': _t("I love it"), + }; + this.user_click = false; // user has click or not + this.set("star_value", this.options.rating_default_value); + this.on("change:star_value", this, this._onChangeStarValue); + }, + start: function(){ + var self = this; + return this._super.apply(this, arguments).then(function(){ + // rating stars + self.$input = self.$('input[name="rating_value"]'); + self.$star_list = self.$('.stars').find('i'); + self.set("star_value", self.options.rating_default_value); // set the default value to trigger the display of star widget + }); + }, + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} event + */ + _onClickStar: function(e){ + this.user_click = true; + this.$input.val(this.get("star_value")); + }, + /** + * @private + */ + _onChangeStarValue: function(){ + var val = this.get("star_value"); + var index = Math.floor(val); + var decimal = val - index; + // reset the stars + this.$star_list.removeClass('fa-star fa-star-half-o').addClass('fa-star-o'); + + this.$('.stars').find("i:lt("+index+")").removeClass('fa-star-o fa-star-half-o').addClass('fa-star'); + if(decimal){ + this.$('.stars').find("i:eq("+(index)+")").removeClass('fa-star-o fa-star fa-star-half-o').addClass('fa-star-half-o'); + } + + this.$('.rate_text .label').text(this.labels[index]); + }, + _onMouseleaveStar: function(e){ + this.$('.rate_text').hide(); + }, + /** + * @private + * @param {MouseEvent} event + */ + _onMoveStar: function(e){ + var index = this.$('.stars i').index(e.currentTarget); + this.$('.rate_text').show(); + this.set("star_value", index+1); + }, + /** + * @private + */ + _onMoveOutStar: function(){ + if(!this.user_click){ + this.set("star_value", parseInt(this.$input.val())); + } + this.user_click = false; + }, + }); + + + /** + * PortalChatter + * + * Extends Frontend Chatter to handle rating + */ + PortalChatter.include({ + events: _.extend({}, PortalChatter.prototype.events, { "click .o_website_rating_select": "_onClickStarDomain", "click .o_website_rating_select_text": "_onClickStarDomainReset", }), + xmlDependencies: (PortalChatter.prototype.xmlDependencies || []).concat(['/website_rating/static/src/xml/website_mail.xml', '/website_rating/static/src/xml/portal_chatter.xml']), init: function(parent, options){ this._super.apply(this, arguments); @@ -36,18 +131,6 @@ odoo.define('website_rating.thread', function(require) { this.set('rating_card_values', {}); this.set('rating_value', false); this.on("change:rating_value", this, this._onChangeRatingDomain); - // rating star - this.labels = { - '0': "", - '1': _t("I hate it"), - '2': _t("I don't like it"), - '3': _t("It's okay"), - '4': _t("I like it"), - '5': _t("I love it"), - }; - this.user_click = false; // user has click or not - this.set("star_value", this.options.rating_default_value); - this.on("change:star_value", this, this._onChangeStarValue); }, willStart: function(){ var self = this; @@ -70,15 +153,6 @@ odoo.define('website_rating.thread', function(require) { } }); }, - start: function(){ - var self = this; - return this._super.apply(this, arguments).then(function(){ - // rating stars - self.$input = self.$('input[name="rating_value"]'); - self.$star_list = self.$('.stars').find('i'); - self.set("star_value", self.options.rating_default_value); // set the default value to trigger the display of star widget - }); - }, //-------------------------------------------------------------------------- // Public @@ -129,9 +203,6 @@ odoo.define('website_rating.thread', function(require) { // Private //-------------------------------------------------------------------------- - _loadTemplates: function(){ - return $.when(this._super(), ajax.loadXML('/website_rating/static/src/xml/website_mail.xml', qweb)); - }, _messageFetchPrepareParams: function(){ var params = this._super.apply(this, arguments); if(this.options['display_rating']){ @@ -144,14 +215,6 @@ odoo.define('website_rating.thread', function(require) { // Handlers //-------------------------------------------------------------------------- - /** - * @private - * @param {MouseEvent} event - */ - _onClickStar: function(e){ - this.user_click = true; - this.$input.val(this.get("star_value")); - }, /** * @private * @param {MouseEvent} event @@ -179,6 +242,7 @@ odoo.define('website_rating.thread', function(require) { */ _onClickStarDomainReset: function(e){ e.stopPropagation(); + e.preventDefault(); this.set('rating_value', false); this.$('.o_website_rating_select_text').css('visibility', 'hidden'); this.$('.o_website_rating_select').css({ @@ -195,43 +259,62 @@ odoo.define('website_rating.thread', function(require) { } this._changeCurrentPage(1, domain); }, - /** - * @private - */ - _onChangeStarValue: function(){ - var val = this.get("star_value"); - var index = Math.floor(val); - var decimal = val - index; - // reset the stars - this.$star_list.removeClass('fa-star fa-star-half-o').addClass('fa-star-o'); + }); - this.$('.stars').find("i:lt("+index+")").removeClass('fa-star-o fa-star-half-o').addClass('fa-star'); - if(decimal){ - this.$('.stars').find("i:eq("+(index)+")").removeClass('fa-star-o fa-star fa-star-half-o').addClass('fa-star-half-o'); - } - this.$('.rate_text .label').text(this.labels[index]); - }, - _onMouseleaveStar: function(e){ - this.$('.rate_text').hide(); + /** + * RatingPopupComposer + * + * Display the rating average with a static star widget, and open + * a popup with the portal composer when clicking on it. + **/ + var RatingPopupComposer = Widget.extend({ + template: 'website_rating.PopupComposer', + xmlDependencies: [ + '/portal/static/src/xml/portal_chatter.xml', + '/website_rating/static/src/xml/website_mail.xml', + '/website_rating/static/src/xml/portal_chatter.xml', + ], + + init: function(parent, options){ + this._super.apply(this, arguments); + this.rating_avg = Math.round(options['ratingAvg'] * 100) / 100 || 0.0; + this.rating_total = options['ratingTotal'] || 0.0; + + this.options = _.defaults({}, options, { + 'token': false, + 'res_model': false, + 'res_id': false, + 'pid': 0, + 'display_composer': !session.is_website_user, + 'display_rating': true, + 'csrf_token': odoo.csrf_token, + 'user_id': session.user_id, + }); }, /** - * @private - * @param {MouseEvent} event + * @override */ - _onMoveStar: function(e){ - var index = this.$('.stars i').index(e.currentTarget); - this.$('.rate_text').show(); - this.set("star_value", index+1); - }, - /** - * @private - */ - _onMoveOutStar: function(){ - if(!this.user_click){ - this.set("star_value", parseInt(this.$input.val())); - } - this.user_click = false; + start: function () { + var defs = []; + defs.push(this._super.apply(this, arguments)); + + // instanciate and insert composer widget + this._composer = new PortalComposer(this, this.options); + defs.push(this._composer.replace(this.$('.o_portal_chatter_composer'))); + + return $.when.apply($, defs); }, }); + + +base.ready().then(function () { + $('.o_rating_popup_composer').each(function (index) { + var $elem = $(this); + var rating_popup = new RatingPopupComposer(rootWidget, $elem.data()); + rating_popup.appendTo($elem); + }); +}); + + }); diff --git a/addons/website_rating/static/src/scss/website_rating.scss b/addons/website_rating/static/src/scss/website_rating.scss index 1d2dd1fd99b..69a57691b5b 100644 --- a/addons/website_rating/static/src/scss/website_rating.scss +++ b/addons/website_rating/static/src/scss/website_rating.scss @@ -68,3 +68,15 @@ $o-w-rating-star-color: #FACC2E; display: inline-block; } } + +/* Rating Popup Composer */ +.o_rating_popup_composer { + + .o_rating_clickable { + cursor: pointer; + } + + .o_portal_chatter_avatar { + margin-right: 10px; + } +} diff --git a/addons/website_rating/static/src/xml/portal_chatter.xml b/addons/website_rating/static/src/xml/portal_chatter.xml new file mode 100644 index 00000000000..c4b13d02d31 --- /dev/null +++ b/addons/website_rating/static/src/xml/portal_chatter.xml @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + () + +
+
+ +