5 | 22 |

23 |

24 | 25 |

26 |

27 | 28 | 29 | 30 |

31 |

Current Tickets

32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |

Title	Description

44 | 45 |

No tickets to see

46 |

47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |

58 |

59 |

60 | Title 61 | 62 |

63 |

64 | Description 65 |

66 |                 </div>
67 |             </form>
68 |         </div>
69 |     </t>
70 | 
71 |     <t t-name="ticket_viewer.about">
72 |         <div>
73 |             <h1>Hi</h1>
74 |             <p>Thank you for viewing this demo.</p>
75 |             <img src="https://odoocdn.com/openerp_website/static/src/img/2016/odoo-experience/learn_03.jpg"/>
76 |         </div>
77 |     </t>
78 | 
79 |     
80 |     <t t-name="Notification">
81 |         <div class="o_notification" t-translation="off">
82 |             <a t-if="widget.sticky" class="fa fa-times o_close" href="#"/>
83 |             <div class="o_notification_title">
84 |                 <span class="o_icon fa fa-3x fa-lightbulb-o"/>
85 |                 <t t-raw="widget.title"/>
86 |             </div>
87 |             <div class="o_notification_content" t-if="widget.text"><t t-raw="widget.text"/></div>
88 |         </div>
89 |     </t>
90 |     <t t-name="Warning" t-extend="Notification">
91 |         <t t-jquery=".o_notification">$(this).addClass('o_error');</t>
92 |         <t t-jquery=".o_icon" t-operation="replace">
93 |             <span class="o_icon fa fa-3x fa-exclamation"/>
94 |         </t>
95 |     </t>
96 | </odoo>

--------------------------------------------------------------------------------
/ticket_viewer/static/src/js/models.js:
--------------------------------------------------------------------------------
  1 | odoo.define('demo.classes', function (require) {
  2 | 'use strict';
  3 | 
  4 | var Class = require('web.Class');
  5 | var rpc = require('web.rpc');
  6 | 
  7 | 
  8 | /**
  9 |  * Ticket
 10 |  * Represent a demo.ticket object from the Odoo Backend
 11 |  * @type {OdooClass}
 12 |  */
 13 | var Ticket = Class.extend({
 14 |     init: function (values) {
 15 |         Object.assign(this, values);
 16 |     },
 17 |     /**
 18 |      * Fetch the latest fields for this particular ticket
 19 |      * on the backend server
 20 |      * @return {jQuery.Deferred} Resolves to the updated
 21 |      *                           Ticket if successful.
 22 |      */
 23 |     update: function () {
 24 |         var self = this;
 25 |         return rpc.query({
 26 |             model: 'demo.ticket',
 27 |             method: 'read',
 28 |             args: [[this.id]],
 29 |             kwargs: {fields: ['id', 'name', 'description']}
 30 |         }).then(function (ticket_values) {
 31 |             Object.assign(self, ticket_values[0]);
 32 |             return self;
 33 |         });
 34 |     },
 35 | });
 36 | 
 37 | 
 38 | /**
 39 |  * User
 40 |  * Represent a res.users from the Odoo Backend, with only
 41 |  * the fields [id, login, name, image_small] accessible by
 42 |  * default.
 43 |  * The User class also represent a Ticket collection.
 44 |  * @type {OdooClass}
 45 |  */
 46 | var User = Class.extend({
 47 |     init: function (values) {
 48 |         Object.assign(this, values);
 49 |         this.tickets = [];
 50 |     },
 51 |     /**
 52 |      * Create a ticket on the server via rpc call and create it
 53 |      * client-side in the User tickets' collection on success.
 54 |      * @param  {Object} values Object containing the 'name'
 55 |      *                         and 'description' content for
 56 |      *                         the new ticket
 57 |      * @return {jQuery.Deferred} The newly created ticket.
 58 |      */
 59 |     createTicket: function (values) {
 60 |         var self = this;
 61 |         var ticket_values = {
 62 |             name: values.name,
 63 |             description: values.description
 64 |         };
 65 |         return rpc.query({
 66 |             model: 'demo.ticket',
 67 |             method: 'create',
 68 |             args: [ticket_values]
 69 |         }).then(function (ticket_id) {
 70 |             var ticket = new Ticket({id: ticket_id});
 71 |             self.tickets.push(ticket);
 72 |             return ticket.update();
 73 |         });
 74 |     },
 75 |     /**
 76 |      * Fetch the default fields for the user on the server.
 77 |      * @return {jQuery.Deferred} Resolves to the udpate User.
 78 |      */
 79 |     fetchUserInfo: function () {
 80 |         var self = this;
 81 |         return rpc.query({
 82 |             model: 'res.users',
 83 |             method: 'read',
 84 |             args: [[this.id]],
 85 |             kwargs: {fields: ['id', 'login', 'name', 'image_small', 'partner_id']}
 86 |         }).then(function (user_values) {
 87 |             var values = user_values[0];
 88 |             values.partner_id = values.partner_id[0];
 89 |             Object.assign(self, values);
 90 |             return self;
 91 |         });
 92 |     },
 93 |     /**
 94 |      * Fetch all available tickets for the current user.
 95 |      * Note that the actual search is done server side
 96 |      * using the model's ACLs and Access Rules.
 97 |      * @return {jQuery.Deferred} Resolves to the udpated User
 98 |      *                           (with its Tickets collection
 99 |      *                           populated).
100 |      */
101 |     fetchAllTickets: function () {
102 |         var self = this;
103 |         return rpc.query({
104 |             model: 'demo.ticket',
105 |             method: 'search_read',
106 |             args: [[]],
107 |             kwargs: {fields: ['id', 'name', 'description']}
108 |         }).then(function (ticket_values) {
109 |             for (var vals of ticket_values) {
110 |                 self.tickets.push(new Ticket(vals));
111 |             }
112 |             return self;
113 |         });
114 |     },
115 |     /**
116 |      * Fetch a specified ticket id for the current user.
117 |      * @param  {Integer} id ID of the ticket to fetch.
118 |      * @return {jQuery.Deferred} Resolves to the new Ticket
119 |      */
120 |     fetchTicket: function (id) {
121 |         var self = this;
122 |         return rpc.query({
123 |             model: 'demo.ticket',
124 |             method: 'search_read',
125 |             args: [[['id', '=', id]]],
126 |             kwargs: {fields: ['id', 'name', 'description']}
127 |         }).then(function (ticket_values) {
128 |             if (ticket_values.length) {
129 |                 var ticket = new Ticket(ticket_values[0]);
130 |                 self.tickets.push(ticket);
131 |             }
132 |             return ticket;
133 |         });
134 |     },
135 |     /**
136 |      * Remove a specified ticket id from the collections.
137 |      * @param  {Integer} id ID of the ticket to remove
138 |      */
139 |     removeTicket: function (id) {
140 |         var t_idx = this.tickets.findIndex(t => t.id === id);
141 |         if (t_idx !== -1) {
142 |             this.tickets.splice(t_idx, 1);
143 |         }
144 |     },
145 | });
146 | 
147 | return {
148 |     Ticket: Ticket,
149 |     User: User,
150 | };
151 | });

--------------------------------------------------------------------------------
/ticket_viewer/static/src/js/controllers.js:
--------------------------------------------------------------------------------
  1 | odoo.define('demo.views', function (require) {
  2 | 'use strict';
  3 | 
  4 | var bus = require('bus.bus').bus;
  5 | var core = require('web.core');
  6 | var Dialog = require('web.Dialog');
  7 | var notification = require('web.notification');
  8 | var User = require('demo.classes').User;
  9 | var Widget = require('web.Widget');
 10 | var Router = require('demo.router');
 11 | 
 12 | var qweb = core.qweb;
 13 | var _t = core._t;
 14 | 
 15 | require('web.dom_ready');
 16 | 
 17 | var TicketApp = Widget.extend({
 18 |     template: 'ticket_viewer.app',
 19 |     events: {
 20 |         'click .ticket_about': function (ev) {ev.preventDefault(); Router.navigate('/about');},
 21 |         'click button.o_new_ticket': function () {Router.navigate('/new');},
 22 |     },
 23 |     custom_events: {
 24 |         'ticket-submit': '_onTicketSubmit',
 25 |         'warning': function (ev) {this.notification_manager.warn(ev.data.msg);},
 26 |         'notify': function (ev) {this.notification_manager.notify(ev.data.msg);},
 27 |     },
 28 |     xmlDependencies: ['/ticket_viewer/static/src/xml/ticket_views.xml'],
 29 |     /* Lifecycle */
 30 |     init: function (parent, options) {
 31 |         this._super.apply(this, arguments);
 32 |         this.user = new User({id: odoo.session_info.user_id});
 33 |         var self = this;
 34 |         Router.config({ mode: 'history', root:'/tickets'});
 35 | 
 36 |         // adding routes
 37 |         Router
 38 |         .add(/new/, function () {
 39 |             self._onNewTicket();
 40 |         }).add(/about/, function () {
 41 |             self._about();
 42 |         })
 43 |         .listen();
 44 |     },
 45 |     willStart: function () {
 46 |         return $.when(this._super.apply(this, arguments),
 47 |                       this.user.fetchUserInfo(),
 48 |                       this.user.fetchAllTickets()
 49 |         ).then(function (dummy, user) {
 50 |             bus.update_option('demo.ticket', user.partner_id);
 51 |         });
 52 |     },
 53 |     start: function () {
 54 |         var self = this;
 55 |         return this._super.apply(this, arguments).then(function () {
 56 |             self.list = new TicketList(self, self.user.tickets);
 57 |             self.list.appendTo($('.o_ticket_list'));
 58 |             self.notification_manager = new notification.NotificationManager(self);
 59 |             self.notification_manager.appendTo(self.$el);
 60 |             bus.on('notification', self, self._onNotification);
 61 |             Router.check();
 62 |         });
 63 |     },
 64 |     _about: function () {
 65 |         new Dialog(this, {
 66 |             title: _t('About'),
 67 |             $content: qweb.render('ticket_viewer.about'),
 68 |             buttons: [{
 69 |                 text: _t('Awesome!'),
 70 |                 click: function () {
 71 |                     Router.navigate();
 72 |                 },
 73 |                 close: true,
 74 |             }],
 75 |         }).open();
 76 |     },
 77 |     /**
 78 |      * Open a new modal to encode a new ticket.
 79 |      * @param  {jQuery.Event} ev
 80 |      */
 81 |     _onNewTicket: function (ev) {
 82 |         new TicketDialog(this, {
 83 |             title: _t('New Ticket'),
 84 |             $content: qweb.render('ticket_viewer.ticket_form'),
 85 |             buttons: [{
 86 |                 text: _t('Submit Ticket'),
 87 |                 click: function () {
 88 |                     this._onFormSubmit();
 89 |                 },
 90 |             }],
 91 |         }).open();
 92 |     },
 93 |     /**
 94 |      * Send the submitted ticket data to the model for saving.
 95 |      * @param  {OdooEvent} ev Odoo Event containing the form data
 96 |      */
 97 |     _onTicketSubmit: function (ev) {
 98 |         var self = this;
 99 |         var data = ev.data;
100 |         this.user.createTicket(data).then(function (new_ticket) {
101 |             self.list.insertTicket(new_ticket);
102 |             Router.navigate('');
103 |         });
104 |     },
105 |     /**
106 |      * Handle bus notification.
107 |      *
108 |      * Currently, 2 notification types are handled in this page:
109 |      *     - new_ticket: a ticket has been added for the current user
110 |      *     - unlink_ticket: a ticket has been deleted for the current user
111 |      *
112 |      * @param  {Array} notifications Array of notification arriving through the bus.
113 |      */
114 |     _onNotification: function (notifications) {
115 |         var self = this;
116 |         for (var notif of notifications) {
117 |             var channel = notif[0], message = notif[1];
118 |             if (channel[1] !== 'demo.ticket' || channel[2] !== this.user.partner_id) {
119 |                 return;
120 |             }
121 |             if (message[0] === 'new_ticket') {
122 |                 var ticket_id = message[1];
123 |                 if (!this.user.tickets.find(t => t.id === ticket_id)) {
124 |                     this.user.fetchTicket(ticket_id).then(function (new_ticket) {
125 |                         self.list.insertTicket(new_ticket);
126 |                         self.trigger_up('notify', {msg: (_t('New Ticket ') + new_ticket.name)});
127 |                     });
128 |                 }
129 |             } else if (message[0] === 'unlink_ticket') {
130 |                 this.user.removeTicket(message[1]);
131 |                 this.list.removeTicket(message[1]);
132 |             }
133 |         }
134 |     },
135 | });
136 | 
137 | var TicketList = Widget.extend({
138 |     template: 'ticket_viewer.ticket_list',
139 |     /* Lifecycle */
140 |     init: function (parent, tickets) {
141 |         this._super.apply(this, arguments);
142 |         this.tickets = tickets;
143 |     },
144 |     /**
145 |      * Insert a new ticket instance in the list. If the list is hidden
146 |      * (because there was no ticket prior to the insertion), call for
147 |      * a complete rerendering instead.
148 |      * @param  {OdooClass.Ticket} ticket Ticket to insert in the list
149 |      */
150 |     insertTicket: function (ticket) {
151 |         if (!this.$('tbody').length) {
152 |             this._rerender();
153 |             return;
154 |         }
155 |         var ticket_node = qweb.render('ticket_viewer.ticket_list.ticket', {ticket: ticket});
156 |         this.$('tbody').prepend(ticket_node);
157 |     },
158 |     /**
159 |      * Remove a ticket from the list. If this is the last ticket to be
160 |      * removed, rerender the widget completely to reflect the 'empty list'
161 |      * state.
162 |      * @param  {Integer} id ID of the ticket to remove.
163 |      */
164 |     removeTicket: function (id) {
165 |         this.$('tr[data-id=' + id + ']').remove();
166 |         if (!this.$('tr[data-id]').length) {
167 |             this._rerender();
168 |         }
169 |     },
170 | 
171 |     /**
172 |      * Rerender the whole widget; will be useful when we switch from
173 |      * an empty list of tickets to one or more ticket (or vice-versa)
174 |      * by using the bus.
175 |      */
176 |     _rerender: function () {
177 |         this.replaceElement(qweb.render('ticket_viewer.ticket_list', {widget: this}));
178 |     },
179 | });
180 | 
181 | var TicketDialog = Dialog.extend({
182 |     events: {
183 |         'submit form': '_onFormSubmit',
184 |         'click .btn-primary': '_onFormSubmit',
185 |     },
186 |     _onFormSubmit: function (ev) {
187 |         if (ev) {
188 |             ev.preventDefault();
189 |         }
190 |         var form = this.$('form')[0];
191 |         var formdata = new FormData(form);
192 |         var data = {};
193 |         for (var field of formdata) {
194 |             data[field[0]] = field[1];
195 |         }
196 |         if (!data.name || !data.description) {
197 |             this.trigger_up('warning', {msg: _t('All fields are mandatory.')});
198 |             return;
199 |         }
200 |         this.trigger_up('ticket-submit', data);
201 |         form.reset();
202 |         this.close();
203 |     },
204 | });
205 | 
206 | 
207 | var $elem = $('.o_ticket_app');
208 | var app = new TicketApp(null);
209 | app.appendTo($elem).then(function () {
210 |     bus.start_polling();
211 | });
212 | });
213 |

--------------------------------------------------------------------------------