Skip to content

Commit cef2563

Browse files
simahawklasley
simahawk
authored and
lasley
committed
[add] status msg rendering via JS (OCA#10)
* [add] status message: javascript rendering * [imp] status message js: reuse existing qweb templates
1 parent 4ba396c commit cef2563

File tree

5 files changed

+151
-31
lines changed

5 files changed

+151
-31
lines changed

‎cms_status_message/README.rst

Lines changed: 53 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,16 @@ You can add several messages: they will be displayed one after another.
2121
Usage
2222
=====
2323

24-
Set a message::
24+
Python code
25+
-----------
2526

26-
msg = _('My important message.')
27-
if request.website:
28-
request.website.add_status_message(msg)
27+
Set a message:
28+
29+
```python
30+
msg = _('My important message.')
31+
if request.website:
32+
request.website.add_status_message(msg)
33+
```
2934

3035
By default the message type is `info`.
3136
The title (the label at the beginning of the message) matches the message type:
@@ -36,16 +41,56 @@ The title (the label at the beginning of the message) matches the message type:
3641
* 'warning': 'Warning'
3742

3843

39-
You can change message parameters::
44+
You can change message parameters:
4045

41-
msg = _('Watch out!')
42-
if request.website:
43-
request.website.add_status_message(msg, mtype='warning', mtitle='Oh no')
46+
```python
47+
msg = _('Watch out!')
48+
if request.website:
49+
request.website.add_status_message(msg, mtype='warning', mtitle='Oh no')
50+
```
4451

4552
Messages will be displayed like this:
4653

4754
|preview|
4855

56+
Javascript code
57+
---------------
58+
59+
Dependencies:
60+
61+
```javascript
62+
63+
var msg_tool = require('cms_status_message.tool');
64+
var core = require('web.core');
65+
var _t = core._t;
66+
```
67+
68+
Inject a custom message on the fly:
69+
70+
```javascript
71+
msg = {
72+
'msg': _t('Item unpublished.'),
73+
'title': _t('Warning'),
74+
'type': 'warning'
75+
}
76+
// wipe existing
77+
$('.status_message').remove();
78+
79+
// inject new
80+
$(msg_tool.render_messages(msg))
81+
.hide()
82+
.prependTo('main')
83+
.fadeIn('slow');
84+
```
85+
86+
Add a status message to the session, useful if you want to show the message only after a redirect:
87+
88+
```javascript
89+
var msg = _t('Contratulations! You made it!.');
90+
var options = {'title': _('My title'), 'dismissible': false};
91+
msg_tool.add_message(msg, options);
92+
```
93+
4994
Customize appereance
5095
--------------------
5196

‎cms_status_message/__openerp__.py

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
'website',
1313
],
1414
'data': [
15+
'templates/assets.xml',
1516
'templates/status_message.xml',
1617
],
1718
}

‎cms_status_message/static/src/js/tool.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
odoo.define('cms_status_message.tool', function (require) {
2+
'use strict';
3+
4+
var Model = require('web.Model');
5+
var session = require('web.session');
6+
var WebsiteModel = new Model('website', session.user_context);
7+
var core = require('web.core');
8+
var qweb = core.qweb;
9+
var ajax = require('web.ajax');
10+
11+
// load existing qweb templates
12+
ajax.jsonRpc('/web/dataset/call', 'call', {
13+
'model': 'ir.ui.view',
14+
'method': 'read_template',
15+
'args': ['cms_status_message.message_listing_wrapper']
16+
}).done(function (data) {
17+
qweb.add_template(data);
18+
});
19+
ajax.jsonRpc('/web/dataset/call', 'call', {
20+
'model': 'ir.ui.view',
21+
'method': 'read_template',
22+
'args': ['cms_status_message.message_wrapper']
23+
}).done(function (data) {
24+
qweb.add_template(data);
25+
});
26+
27+
var MessageTool = {
28+
add_message: function add_message (msg, options) {
29+
return WebsiteModel.call('add_status_message', [msg, ], options);
30+
},
31+
get_messages: function get_messages() {
32+
return WebsiteModel.call('get_status_message', []);
33+
},
34+
render_messages: function render_messages(msg, selector) {
35+
// defaults
36+
var status_message = {
37+
'msg': '',
38+
'title': null,
39+
'type': 'info',
40+
'dismissible': true
41+
}
42+
// inject user values
43+
$.extend(status_message, msg);
44+
// render it
45+
var result = qweb.render(
46+
'cms_status_message.message_listing_wrapper',
47+
{status_message: [status_message]}
48+
);
49+
if(selector){
50+
$(result).prependTo(selector);
51+
}
52+
return result
53+
}
54+
}
55+
56+
return MessageTool
57+
58+
});

‎cms_status_message/templates/assets.xml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<odoo>
3+
4+
<template id="assets_frontend" name="CMS status message frontend assets" inherit_id="website.assets_frontend">
5+
6+
<xpath expr="." position="inside">
7+
<script type="text/javascript" src="/cms_status_message/static/src/js/tool.js"></script>
8+
</xpath>
9+
10+
</template>
11+
12+
</odoo>

‎cms_status_message/templates/status_message.xml

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,43 @@
44
<template id="status_message" name="CMS status_message">
55
<t t-set="status_message" t-value="website.get_status_message()" />
66
<t t-if="status_message">
7-
<div class="container-fluid status_message">
8-
<t t-foreach="status_message" t-as="msg">
9-
<div t-attf-class="alert alert-#{msg['type']} #{msg['dismissible'] and 'alert-dismissible' or ''}" role="alert">
10-
<t t-if="msg['dismissible']">
11-
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
12-
<span t-translation="off" aria-hidden="true" class="fa fa-remove"></span>
13-
</button>
14-
</t>
15-
<t t-call="cms_status_message.message_wrapper" />
16-
</div>
7+
<t t-call="cms_status_message.message_listing_wrapper" />
8+
</t>
9+
</template>
10+
11+
<template id="message_listing_wrapper" name="CMS status_message listing wrapper">
12+
<div class="container-fluid status_message">
13+
<t t-foreach="status_message" t-as="msg">
14+
<div t-attf-class="alert alert-#{msg['type']} #{msg['dismissible'] and 'alert-dismissible' or ''}" role="alert">
15+
<t t-if="msg['dismissible']">
16+
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
17+
<span t-translation="off" aria-hidden="true" class="fa fa-remove"></span>
18+
</button>
1719
</t>
20+
<t t-call="cms_status_message.message_wrapper" />
1821
</div>
1922
</t>
23+
</div>
2024
</template>
2125

22-
<template id="message_wrapper" name="CMS status_message wrapper">
23-
<div class="msg-wrapper row">
24-
<t t-if="msg['title']">
25-
<div class="title col-md-3">
26-
<strong t-esc="msg['title']" />
27-
</div>
28-
</t>
29-
<div t-attf-class="msg #{msg['title'] and 'col-md-9' or 'col-md-12'}">
30-
<t t-raw="msg['msg']" />
31-
</div>
26+
<template id="message_wrapper" name="CMS status_message single message wrapper">
27+
<div class="msg-wrapper row">
28+
<t t-if="msg['title']">
29+
<div class="title col-md-3">
30+
<strong t-esc="msg['title']" />
31+
</div>
32+
</t>
33+
<div t-attf-class="msg #{msg['title'] and 'col-md-9' or 'col-md-12'}">
34+
<t t-raw="msg['msg']" />
3235
</div>
36+
</div>
3337
</template>
3438

3539
<template id="add_status_message" inherit_id="website.layout" name="Add status message">
3640

37-
<xpath expr="//div[@id='wrapwrap']/main/*" position="before">
38-
<t t-call="cms_status_message.status_message" />
39-
</xpath>
41+
<xpath expr="//div[@id='wrapwrap']/main/*" position="before">
42+
<t t-call="cms_status_message.status_message" />
43+
</xpath>
4044

4145
</template>
4246

0 commit comments

Comments
 (0)