[REF] web: extracts calendar's methods to allow customization
This commit extracts some calendar's event handlers, private methods and templates to create 'hooks' allowing further customization. Task ID: 2092550
This commit is contained in:
Romeo Fragomeli
committed by
Pierre Paridans
Pierre Paridans
parent
10bc51cf88
commit
70ea6739ed
@@ -38,7 +38,14 @@ var CalendarController = AbstractController.extend({
|
||||
viewUpdated: '_onViewUpdated',
|
||||
}),
|
||||
events: _.extend({}, AbstractController.prototype.events, {
|
||||
today_button_click: '_onTodayButtonClicked'
|
||||
today_button_click: '_onTodayButtonClicked',
|
||||
'click button.o_calendar_button_new': '_onButtonNew',
|
||||
'click button.o_calendar_button_prev': '_onButtonNavigation',
|
||||
'click button.o_calendar_button_today': '_onButtonNavigation',
|
||||
'click button.o_calendar_button_next': '_onButtonNavigation',
|
||||
'click button.o_calendar_button_day': '_onButtonScale',
|
||||
'click button.o_calendar_button_week': '_onButtonScale',
|
||||
'click button.o_calendar_button_month': '_onButtonScale',
|
||||
}),
|
||||
/**
|
||||
* @override
|
||||
@@ -77,25 +84,7 @@ var CalendarController = AbstractController.extend({
|
||||
* inserts them into this.options.$buttons or into a div of its template
|
||||
*/
|
||||
renderButtons: function ($node) {
|
||||
var self = this;
|
||||
this.$buttons = $(QWeb.render('CalendarView.buttons', {
|
||||
isMobile: config.device.isMobile,
|
||||
}));
|
||||
this.$buttons.on('click', 'button.o_calendar_button_new', function () {
|
||||
self.trigger_up('switch_view', {view_type: 'form'});
|
||||
});
|
||||
|
||||
_.each(['prev', 'today', 'next'], function (action) {
|
||||
self.$buttons.on('click', '.o_calendar_button_' + action, function () {
|
||||
self._move(action);
|
||||
});
|
||||
});
|
||||
_.each(['day', 'week', 'month'], function (scale) {
|
||||
self.$buttons.on('click', '.o_calendar_button_' + scale, function () {
|
||||
self.model.setScale(scale);
|
||||
self.reload();
|
||||
});
|
||||
});
|
||||
this.$buttons = $(QWeb.render('CalendarView.buttons', this._renderButtonsParameters()));
|
||||
|
||||
this.$buttons.find('.o_calendar_button_' + this.mode).addClass('active');
|
||||
|
||||
@@ -110,6 +99,23 @@ var CalendarController = AbstractController.extend({
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Find a className in an array using the start of this class and
|
||||
* return the last part of a string
|
||||
* @private
|
||||
* @param {string} startClassName start of string to find in the "array"
|
||||
* @param {array|DOMTokenList} classList array of all class
|
||||
* @return {string|undefined}
|
||||
*/
|
||||
_extractLastPartOfClassName(startClassName, classList) {
|
||||
var result;
|
||||
classList.forEach(function(value){
|
||||
if (value && value.indexOf(startClassName) === 0) {
|
||||
result = value.substring(startClassName.length);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
/**
|
||||
* Move to the requested direction and reload the view
|
||||
*
|
||||
@@ -121,6 +127,17 @@ var CalendarController = AbstractController.extend({
|
||||
this.model[to]();
|
||||
return this.reload();
|
||||
},
|
||||
/**
|
||||
* Parameter send to QWeb to render the template of Buttons
|
||||
*
|
||||
* @private
|
||||
* @return {{}}
|
||||
*/
|
||||
_renderButtonsParameters() {
|
||||
return {
|
||||
isMobile: config.device.isMobile,
|
||||
};
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
* @private
|
||||
@@ -161,6 +178,40 @@ var CalendarController = AbstractController.extend({
|
||||
// Handlers
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Handler when a user clicks on button to create event
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_onButtonNew() {
|
||||
this.trigger_up('switch_view', {view_type: 'form'});
|
||||
},
|
||||
/**
|
||||
* Handler when a user click on navigation button like prev, next, ...
|
||||
*
|
||||
* @private
|
||||
* @param {Event|jQueryEvent} jsEvent
|
||||
*/
|
||||
_onButtonNavigation(jsEvent) {
|
||||
const action = this._extractLastPartOfClassName('o_calendar_button_', jsEvent.currentTarget.classList);
|
||||
if (action) {
|
||||
this._move(action);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Handler when a user click on scale button like day, month, ...
|
||||
*
|
||||
* @private
|
||||
* @param {Event|jQueryEvent} jsEvent
|
||||
*/
|
||||
_onButtonScale(jsEvent) {
|
||||
const scale = this._extractLastPartOfClassName('o_calendar_button_', jsEvent.currentTarget.classList);
|
||||
if (scale) {
|
||||
this.model.setScale(scale);
|
||||
this.reload();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {OdooEvent} event
|
||||
|
||||
@@ -411,17 +411,15 @@ return AbstractRenderer.extend({
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Initialize the main calendar
|
||||
* Return the Object options for FullCalendar
|
||||
*
|
||||
* @private
|
||||
* @param {Object} fcOptions
|
||||
* @return {Object}
|
||||
*/
|
||||
_initCalendar: function () {
|
||||
_getFullCalendarOptions: function (fcOptions) {
|
||||
var self = this;
|
||||
|
||||
this.calendarElement = this.$(".o_calendar_widget")[0];
|
||||
var locale = moment.locale();
|
||||
|
||||
var fc_options = $.extend({}, this.state.fc_options, {
|
||||
return Object.assign({}, this.state.fc_options, {
|
||||
plugins: [
|
||||
'moment',
|
||||
'interaction',
|
||||
@@ -546,7 +544,19 @@ return AbstractRenderer.extend({
|
||||
height: 'parent',
|
||||
unselectAuto: false,
|
||||
dir: _t.database.parameters.direction,
|
||||
locale: locale,
|
||||
}, fcOptions);
|
||||
},
|
||||
/**
|
||||
* Initialize the main calendar
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_initCalendar: function () {
|
||||
this.calendarElement = this.$(".o_calendar_widget")[0];
|
||||
var locale = moment.locale();
|
||||
|
||||
var fcOptions = this._getFullCalendarOptions({
|
||||
locale: locale, // reset locale when fullcalendar has already been instanciated before now
|
||||
});
|
||||
|
||||
this.calendar = new FullCalendar.Calendar(this.calendarElement, fcOptions);
|
||||
|
||||
@@ -92,15 +92,23 @@
|
||||
<t t-name="CalendarView.buttons">
|
||||
<div class="o_calendar_buttons">
|
||||
<t t-if="!isMobile">
|
||||
<button class="o_calendar_button_prev btn btn-primary" aria-label="Previous" title="Previous"><span class="fa fa-arrow-left"/></button>
|
||||
<button class="o_calendar_button_today btn btn-primary">Today</button>
|
||||
<button class="o_calendar_button_next btn btn-primary" aria-label="Next" title="Next"><span class="fa fa-arrow-right"/></button>
|
||||
<t t-call="CalendarView.navigation_buttons" />
|
||||
</t>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="o_calendar_button_day btn btn-secondary">Day</button>
|
||||
<button type="button" class="o_calendar_button_week btn btn-secondary">Week</button>
|
||||
<button type="button" class="o_calendar_button_month btn btn-secondary">Month</button>
|
||||
</div>
|
||||
<t t-call="CalendarView.scale_buttons" />
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="CalendarView.navigation_buttons">
|
||||
<button class="o_calendar_button_prev btn btn-primary" aria-label="Previous" title="Previous"><span class="fa fa-arrow-left"/></button>
|
||||
<button class="o_calendar_button_today btn btn-primary">Today</button>
|
||||
<button class="o_calendar_button_next btn btn-primary" aria-label="Next" title="Next"><span class="fa fa-arrow-right"/></button>
|
||||
</t>
|
||||
|
||||
<t t-name="CalendarView.scale_buttons">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="o_calendar_button_day btn btn-secondary">Day</button>
|
||||
<button type="button" class="o_calendar_button_week btn btn-secondary">Week</button>
|
||||
<button type="button" class="o_calendar_button_month btn btn-secondary">Month</button>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user