[IMP] web, web_calendar: New calendar

This commit is contained in:
qsm-odoo
2015-06-17 09:49:46 +02:00
parent 6b56091749
commit d6d3d0983f
7 changed files with 111 additions and 532 deletions
+1 -1
View File
@@ -159,7 +159,7 @@ var ControlPanel = Widget.extend({
function make_breadcrumb (bc, is_last) {
var $bc = $('<li>')
.append(is_last ? bc.title : $('<a>').text(bc.title))
.append(is_last ? bc.title : $('<a>').html(bc.title))
.toggleClass('active', is_last);
if (!is_last) {
$bc.click(function () {
@@ -18,7 +18,7 @@
@odoo-main-color-muted: #a8a8a8;
@odoo-main-text-color: #666666;
@odoo-webclient-background-color: @odoo-brand-secondary;
@odoo-view-background-color: red;
@odoo-view-background-color: white;
@odoo-shadow-color: #303030;
@brand-primary: @odoo-brand-primary;
@@ -1,423 +0,0 @@
@charset "utf-8"
$color1: #ac725e
$color2: #d06b64
$color3: #f83a22
$color4: #fa573c
$color5: #ff7537
$color6: #ffad46
$color7: #42d692
$color8: #16a765
$color9: #7bd148
$color10: #b3dc6c
$color11: #fbe983
$color12: #fad165
$color13: #92e1c0
$color14: #9fe1e7
$color15: #9fc6e7
$color16: #4986e7
$color17: #9a9cff
$color18: #b99aff
$color19: #c2c2c2
$color20: #cabdbf
$color21: #cca6ac
$color22: #f691b2
$color23: #cd74e6
$color24: #a47ae2
$ecolor1: #a4bdfc
$ecolor2: #7ae7bf
$ecolor3: #dbadff
$ecolor4: #ff887c
$ecolor5: #fbd75b
$ecolor6: #ffb878
$ecolor7: #46d6db
$ecolor8: #e1e1e1
$ecolor9: #5484ed
$ecolor10:#51b749
$ecolor11: #dc2127
$fontcolor: #0d0d0d
.openerp
.oe_calendar_quick_create
margin: 12px
.oe-view-manager-view-calendar
position: relative
padding-top: 10px
padding-left: 5px
.openerp
.oe_searchview.oe_searchview_open_drawer
.oe_searchview_drawer
z-index: 10
.openerp
td.oe_calendar_sidebar_container
padding: 10px
.openerp
.o-dashboard
td.oe_calendar_sidebar_container
display: none
img.attendee_head
height: 18px
width: 18px
.openerp .oe_calendar_table
.attendee_head
float: right
margin-left: 1px
size: 18px !important
.cal_avatar
height: 24px
width: 24px
.cal_opacity
opacity: 0.6
.event_color_1
background-color: $ecolor1
color: $fontcolor
.event_color_2
background-color: $ecolor2
color: $fontcolor
.event_color_3
background-color: $ecolor3
color: $fontcolor
.event_color_4
background-color: $ecolor4
color: $fontcolor
.event_color_5
background-color: $ecolor5
color: $fontcolor
.event_color_6
background-color: $ecolor6
color: $fontcolor
.event_color_7
background-color: $ecolor7
color: $fontcolor
.event_color_8
background-color: $ecolor8
color: $fontcolor
.event_color_9
background-color: $ecolor9
color: $fontcolor
.event_color_10
background-color: $ecolor10
color: $fontcolor
.event_color_11
background-color: $ecolor11
color: $fontcolor
.calendar_color_1
border-color: $color1
background-color: $color1
color: $fontcolor
.calendar_color_2
border-color: $color2
background-color: $color2
color: $fontcolor
.calendar_color_3
border-color: $color3
background-color: $color3
color: $fontcolor
.calendar_color_4
border-color: $color4
background-color: $color4
color: $fontcolor
.calendar_color_5
border-color: $color5
background-color: $color5
color: $fontcolor
.calendar_color_6
border-color: $color6
background-color: $color6
color: $fontcolor
.calendar_color_7
border-color: $color7
background-color: $color7
color: $fontcolor
.calendar_color_8
border-color: $color8
background-color: $color8
color: $fontcolor
.calendar_color_9
border-color: $color9
background-color: $color9
color: $fontcolor
.calendar_color_10
border-color: $color10
background-color: $color10
color: $fontcolor
.calendar_color_11
border-color: $color11
background-color: $color11
color: $fontcolor
.calendar_color_12
border-color: $color12
background-color: $color12
color: $fontcolor
.calendar_color_13
border-color: $color13
background-color: $color13
color: $fontcolor
.calendar_color_14
border-color: $color14
background-color: $color14
color: $fontcolor
.calendar_color_15
border-color: $color15
background-color: $color15
color: $fontcolor
.calendar_color_16
border-color: $color16
background-color: $color16
color: $fontcolor
.calendar_color_17
border-color: $color17
background-color: $color17
color: $fontcolor
.calendar_color_18
border-color: $color18
background-color: $color18
color: $fontcolor
.calendar_color_19
border-color: $color19
background-color: $color19
color: $fontcolor
.calendar_color_20
border-color: $color20
background-color: $color20
color: $fontcolor
.calendar_color_21
border-color: $color21
background-color: $color21
color: $fontcolor
.calendar_color_22
border-color: $color22
background-color: $color22
color: $fontcolor
.calendar_color_23
border-color: $color23
background-color: $color23
color: $fontcolor
.calendar_color_24
border-color: $color24
background-color: $color24
color: $fontcolor
.underline_ecolor_1
border-bottom: 4px solid $ecolor1
.underline_ecolor_2
border-bottom: 4px solid $ecolor2
.underline_ecolor_3
border-bottom: 4px solid $ecolor3
.underline_ecolor_4
border-bottom: 4px solid $ecolor4
.underline_ecolor_5
border-bottom: 4px solid $ecolor5
.underline_ecolor_6
border-bottom: 4px solid $ecolor6
.underline_ecolor_7
border-bottom: 4px solid $ecolor7
.underline_ecolor_8
border-bottom: 4px solid $ecolor8
.underline_ecolor_9
border-bottom: 4px solid $ecolor9
.underline_ecolor_10
border-bottom: 4px solid $ecolor10
.underline_ecolor_11
border-bottom: 4px solid $ecolor11
.underline_color_1
border-bottom: 4px solid $color1
.underline_color_2
border-bottom: 4px solid $color2
.underline_color_3
border-bottom: 4px solid $color3
.underline_color_4
border-bottom: 4px solid $color4
.underline_color_5
border-bottom: 4px solid $color5
.underline_color_6
border-bottom: 4px solid $color6
.underline_color_7
border-bottom: 4px solid $color7
.underline_color_8
border-bottom: 4px solid $color8
.underline_color_9
border-bottom: 4px solid $color9
.underline_color_10
border-bottom: 4px solid $color10
.underline_color_11
border-bottom: 4px solid $color11
.underline_color_12
border-bottom: 4px solid $color12
.underline_color_13
border-bottom: 4px solid $color13
.underline_color_14
border-bottom: 4px solid $color14
.underline_color_15
border-bottom: 4px solid $color15
.underline_color_16
border-bottom: 4px solid $color16
.underline_color_17
border-bottom: 4px solid $color17
.underline_color_18
border-bottom: 4px solid $color18
.underline_color_19
border-bottom: 4px solid $color19
.underline_color_20
border-bottom: 4px solid $color20
.underline_color_21
border-bottom: 4px solid $color21
.underline_color_22
border-bottom: 4px solid $color22
.underline_color_23
border-bottom: 4px solid $color23
.underline_color_24
border-bottom: 4px solid $color24
.color_1
color: $color1
.color_2
color: $color2
.color_3
color: $color3
.color_4
color: $color4
.color_5
color: $color5
.color_6
color: $color6
.color_7
color: $color7
.color_8
color: $color8
.color_9
color: $color9
.color_10
color: $color10
.color_11
color: $color11
.color_12
color: $color12
.color_13
color: $color13
.color_14
color: $color14
.color_15
color: $color15
.color_16
color: $color16
.color_17
color: $color17
.color_18
color: $color18
.color_19
color: $color19
.color_20
color: $color20
.color_21
color: $color21
.color_22
color: $color22
.color_23
color: $color23
.color_24
color: $color24
@@ -32,12 +32,6 @@ function get_fc_defaultOptions() {
return {
weekNumberTitle: _t("W"),
allDayText: _t("All day"),
buttonText : {
today: _t("Today"),
month: _t("Month"),
week: _t("Week"),
day: _t("Day")
},
monthNames: moment.months(),
monthNamesShort: moment.monthsShort(),
dayNames: moment.weekdays(),
@@ -53,7 +47,7 @@ function get_fc_defaultOptions() {
},
titleFormat: {
month: 'MMMM yyyy',
week: dateFormat + "{ '&#8212;'"+ dateFormat,
week: "W",
day: dateFormat,
},
columnFormat: {
@@ -94,6 +88,8 @@ var CalendarView = View.extend({
this.range_stop = null;
this.selected_filters = [];
this.title = (this.options.action)? this.options.action.name : '';
this.shown = $.Deferred();
},
@@ -117,7 +113,7 @@ var CalendarView = View.extend({
var attrs = fv.arch.attrs,
self = this;
this.fields_view = fv;
this.$calendar = this.$el.find(".oe_calendar_widget");
this.$calendar = this.$(".o_calendar_widget");
this.info_fields = [];
@@ -138,6 +134,10 @@ var CalendarView = View.extend({
this.how_display_event = '';
this.attendee_people = attrs.attendee;
// Check whether the date field is editable (i.e. if the events can be dragged and dropped)
var main_date_field = this.date_start || this.date_end || this.date_delay;
this.editable = !this.options.read_only_mode && !this.fields_view.fields[main_date_field].readonly;
//if quick_add = False, we don't allow quick_add
//if quick_add = not specified in view, we use the default quick_create_instance
//if quick_add = is NOT False and IS specified in view, we this one for quick_create_instance'
@@ -249,15 +249,28 @@ var CalendarView = View.extend({
render_buttons: function($node) {
var self = this;
this.$buttons = $(QWeb.render("CalendarView.buttons", {'widget': this}));
this.$buttons.on('click', 'button.oe_calendar_button_new', function () {
this.$buttons.on('click', 'button.o_calendar_button_new', function () {
self.dataset.index = null;
self.do_switch_view('form');
});
var bindCalendarButton = function(selector, arg1, arg2) {
self.$buttons.on('click', selector, _.bind(self.$calendar.fullCalendar, self.$calendar, arg1, arg2));
}
bindCalendarButton('.o_calendar_button_prev', 'prev');
bindCalendarButton('.o_calendar_button_today', 'today');
bindCalendarButton('.o_calendar_button_next', 'next');
bindCalendarButton('.o_calendar_button_day', 'changeView', 'agendaDay');
bindCalendarButton('.o_calendar_button_week', 'changeView', 'agendaWeek');
bindCalendarButton('.o_calendar_button_month', 'changeView', 'month');
this.$buttons.find('.o_calendar_button_' + this.mode).addClass('active');
$node = $node || this.options.$buttons;
if ($node) {
this.$buttons.appendTo($node);
} else {
this.$('.oe_calendar_buttons').replaceWith(this.$buttons);
this.$('.o_calendar_buttons').replaceWith(this.$buttons);
}
},
get_fc_init_options: function () {
@@ -265,21 +278,25 @@ var CalendarView = View.extend({
var self = this;
return $.extend({}, get_fc_defaultOptions(), {
defaultView: (this.mode == "month")?"month":
(this.mode == "week"?"agendaWeek":
(this.mode == "day"?"agendaDay":"month")),
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: (this.mode == "month")? "month" : ((this.mode == "week")? "agendaWeek" : ((this.mode == "day")? "agendaDay" : "agendaWeek")),
header: false,
selectable: !this.options.read_only_mode && this.create_right,
selectHelper: true,
editable: !this.options.read_only_mode,
editable: this.editable,
droppable: true,
// callbacks
viewRender: function(view) {
var mode = (view.name == "month")? "month" : ((view.name == "agendaWeek") ? "week" : "day");
if(self.$buttons !== undefined) {
self.$buttons.find('.active').removeClass('active');
self.$buttons.find('.o_calendar_button_' + mode).addClass('active');
}
var title = self.title + ' (' + ((mode === "week")? _t("Week ") : "") + view.title + ")";
self.set({'title': title});
},
eventDrop: function (event, _day_delta, _minute_delta, _all_day, _revertFunc) {
var data = self.get_event_data(event);
self.proxy('update_record')(event._id, data); // we don't revert the event, but update it.
@@ -307,18 +324,15 @@ var CalendarView = View.extend({
allDay: all_day,
});
self.open_quick_create(data_template);
},
unselectAuto: false,
});
},
calendarMiniChanged: function (context) {
return function(datum,obj) {
var curView = context.$calendar.fullCalendar( 'getView');
var curView = context.$calendar.fullCalendar('getView');
var curDate = new Date(obj.currentYear , obj.currentMonth, obj.currentDay);
if (curView.name == "agendaWeek") {
@@ -327,7 +341,7 @@ var CalendarView = View.extend({
}
}
else if (curView.name != "agendaDay" || (curView.name == "agendaDay" && moment(curDate).diff(moment(curView.start))===0)) {
context.$calendar.fullCalendar('changeView','agendaWeek');
context.$calendar.fullCalendar('changeView','agendaWeek');
}
context.$calendar.fullCalendar('gotoDate', obj.currentYear , obj.currentMonth, obj.currentDay);
};
@@ -339,9 +353,9 @@ var CalendarView = View.extend({
if (!this.sidebar) {
var translate = get_fc_defaultOptions();
this.sidebar = new widgets.Sidebar(this);
this.sidebar.appendTo(this.$el.find('.oe_calendar_sidebar_container'));
this.sidebar.appendTo(this.$('.o_calendar_sidebar_container'));
this.$small_calendar = self.$el.find(".oe_calendar_mini");
this.$small_calendar = self.$(".o_calendar_mini");
this.$small_calendar.datepicker({
onSelect: self.calendarMiniChanged(self),
dayNamesMin : translate.dayNamesShort,
@@ -561,7 +575,7 @@ var CalendarView = View.extend({
attendee_showed += 1;
if (attendee_showed<= MAX_ATTENDEES) {
if (self.avatar_model !== null) {
the_title_avatar += '<img title="' + self.all_attendees[the_attendee_people] + '" class="attendee_head" \
the_title_avatar += '<img title="' + self.all_attendees[the_attendee_people] + '" class="o_attendee_head" \
src="/web/binary/image?model=' + self.avatar_model + '&field=image_small&id=' + the_attendee_people + '"></img>';
}
else {
@@ -569,7 +583,7 @@ var CalendarView = View.extend({
var tempColor = (self.all_filters[the_attendee_people] !== undefined)
? self.all_filters[the_attendee_people].color
: (self.all_filters[-1] ? self.all_filters[-1].color : 1);
the_title_avatar += '<i class="fa fa-user attendee_head color_'+tempColor+'" title="' + self.all_attendees[the_attendee_people] + '" ></i>';
the_title_avatar += '<i class="fa fa-user o_attendee_head o_underline_color_'+tempColor+'" title="' + self.all_attendees[the_attendee_people] + '" ></i>';
}//else don't add myself
}
}
@@ -579,7 +593,7 @@ var CalendarView = View.extend({
}
);
if (attendee_other.length>2) {
the_title_avatar += '<span class="attendee_head" title="' + attendee_other.slice(0, -2) + '">+</span>';
the_title_avatar += '<span class="o_attendee_head" title="' + attendee_other.slice(0, -2) + '">+</span>';
}
the_title = the_title_avatar + the_title;
}
@@ -603,11 +617,11 @@ var CalendarView = View.extend({
if (typeof color_key === "object") {
color_key = color_key[0];
}
r.className = 'cal_opacity calendar_color_'+ this.get_color(color_key);
r.className = 'o_calendar_color_'+ this.get_color(color_key);
}
}
else { // if form all, get color -1
r.className = 'cal_opacity calendar_color_'+ self.all_filters[-1].color;
r.className = 'o_calendar_color_'+ self.all_filters[-1].color;
}
return r;
},
@@ -665,7 +679,6 @@ var CalendarView = View.extend({
}
if (this.date_delay) {
data[this.date_delay] = diff_seconds / 3600;
}
return data;
+10 -13
View File
@@ -37,7 +37,7 @@ var QuickCreate = Widget.extend({
}
var title = (_.isUndefined(parent.field_widget)) ?
(parent.string || parent.name) :
parent.field_widget.string || parent.field_widget.name || '';
(parent.field_widget.string || parent.field_widget.name || '');
return _t("Create: ") + title;
},
start: function () {
@@ -64,18 +64,18 @@ var QuickCreate = Widget.extend({
self.slow_add();
}}
] : []
}, QWeb.render('CalendarView.quick_create', {widged: this}))
}, QWeb.render('CalendarView.quick_create', {widget: this}))
.on('closed', self, function() {
self.trigger('close');
})
.open();
this.$input = this.$dialog.$('input').keyup(function enterHandler (e) {
if(e.keyCode == 13){
if(e.keyCode == $.ui.keyCode.ENTER){
self.$input.off('keyup', enterHandler);
if (!self.quick_add()){
self.$input.on('keyup', enterHandler);
}
} else if (e.keyCode == 27 && self._buttons) {
} else if (e.keyCode == $.ui.keyCode.ESCAPE && self._buttons) {
self.trigger('close');
}
});
@@ -88,15 +88,12 @@ var QuickCreate = Widget.extend({
* Gathers data from the quick create dialog a launch quick_create(data) method
*/
quick_add: function() {
var val = this.$input.val();
if (/^\s*$/.test(val)) {
return false;
}
return this.quick_create({'name': val}).always(function() { return true; });
var val = this.$input.val().trim();
return (val)? this.quick_create({'name': val}) : false;
},
slow_add: function() {
var val = this.$input.val();
var val = this.$input.val().trim();
this.slow_create({'name': val});
},
@@ -109,7 +106,7 @@ var QuickCreate = Widget.extend({
.then(function(id) {
self.trigger('added', id);
self.$input.val("");
}).fail(function(r, event) {
}, function(r, event) {
event.preventDefault();
// This will occurs if there are some more fields required
self.slow_create(data);
@@ -199,7 +196,7 @@ var Sidebar = Widget.extend({
start: function() {
this._super();
this.filter = new SidebarFilter(this, this.getParent());
this.filter.appendTo(this.$el.find('.oe_calendar_filter'));
this.filter.appendTo(this.$('.o_calendar_filter'));
}
});
var SidebarFilter = Widget.extend({
@@ -216,7 +213,7 @@ var SidebarFilter = Widget.extend({
var self = this;
_.forEach(self.view.all_filters, function(o) {
if (_.contains(self.view.now_filter_ids, o.value)) {
self.$('div.oe_calendar_responsible input[value=' + o.value + ']').prop('checked',o.is_checked);
self.$('div.o_calendar_responsible input[value=' + o.value + ']').prop('checked',o.is_checked);
}
});
},
@@ -1,68 +1,60 @@
<template>
<t t-name="CalendarView">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="oe_calendar_table">
<tr>
<td width="100%">
<div class="oe_calendar_view">
<div class="oe_calendar_widget" />
<div class="oe_calendar_buttons"/>
<div class="oe_calendar_qc_placeholder"/>
</div>
</td>
<td class='oe_calendar_sidebar_container'>
</td>
</tr>
</table>
</t>
<t t-name="CalendarView.sidebar">
<div class="oe_calendar_sidebar">
<div class="oe_calendar_mini" />
<div class="oe_calendar_filter">
<h3><t t-esc="widget.getParent().color_string"/></h3>
</div>
</div>
</t>
<t t-name="CalendarView.sidebar.responsible">
<div class="oe_calendar_all_responsibles">
<div t-foreach="filters" class="oe_calendar_responsible" >
<t t-if="filters_value.value"> <!-- don't display if no value given (or undefined) -->
<input type="checkbox" name="selection" t-att-value="filters_value.value" checked="checked" />
<t t-if="filters_value.value == -1">
<span><i t-attf-class="fa fa-users fa-fw cal_avatar" ></i></span>
</t>
<t t-if="(filters_value.value != -1) &amp;&amp; filters_value.avatar_model ">
<img t-att-src="'/web/binary/image?model=' + filters_value.avatar_model + '&amp;field=image_small&amp;id=' + filters_value.value" class="cal_avatar"/>
</t>
<span t-attf-class="color_filter cal_opacity underline_color_#{filters_value.color}" ><t t-esc="filters_value.label" /></span>
</t>
</div>
</div>
</t>
<t t-name="CalendarView.buttons">
<t t-if="widget.options.action_buttons !== false">
<t t-if="widget.is_action_enabled('create') &amp;&amp;
((widget.field_widget &amp;&amp;
(widget.field_widget.open_popup_add)) ||
(!widget.field_widget))">
<div class="oe_calendar_buttons">
<button type="button" class="oe_calendar_button_new oe_highlight">
<t t-esc="widget.options.create_text || _t('Create')"/>
</button>
<t t-name="CalendarView">
<div class="row o_calendar_container">
<div class="o_calendar_view col-sm-9">
<div class="o_calendar_widget" />
<div class="o_calendar_buttons"/>
</div>
<div class="o_calendar_sidebar_container col-sm-3 hidden-xs"/>
</div>
</t>
</t>
</t>
<t t-name="CalendarView.sidebar">
<div class="o_calendar_sidebar">
<div class="o_calendar_mini"/>
<div class="o_calendar_filter">
<h3><t t-esc="widget.getParent().color_string"/></h3>
</div>
</div>
</t>
<div t-name="CalendarView.quick_create" class="oe_calendar_quick_create">
<div class="form-group">
<label for='name' class='control-label'>Event summary:</label>
<input name='name' class="form-control"/>
</div>
</div>
<t t-name="CalendarView.sidebar.responsible">
<div class="o_calendar_all_responsibles">
<div t-foreach="filters" class="o_calendar_responsible" >
<t t-if="filters_value.value"><!-- don't display if no value given (or undefined) -->
<input type="checkbox" name="selection" t-att-value="filters_value.value" checked="checked" />
<t t-if="filters_value.value == -1">
<span><i t-attf-class="fa fa-users fa-fw o_cal_avatar"></i></span>
</t>
<t t-if="(filters_value.value != -1) &amp;&amp; filters_value.avatar_model ">
<img t-att-src="'/web/binary/image?model=' + filters_value.avatar_model + '&amp;field=image_small&amp;id=' + filters_value.value" class="o_cal_avatar"/>
</t>
<span t-attf-class="color_filter o_underline_color_#{filters_value.color}" ><t t-esc="filters_value.label" /></span>
</t>
</div>
</div>
</t>
<t t-name="CalendarView.buttons">
<div class="o_calendar_buttons">
<button t-if="widget.options.action_buttons !== false &amp;&amp; widget.is_action_enabled('create') &amp;&amp; ((widget.field_widget &amp;&amp; (widget.field_widget.open_popup_add)) || (!widget.field_widget))" type="button" class="o_calendar_button_new o_highlight"><t t-esc="widget.options.create_text || _t('Create')"/></button>
<button class="o_calendar_button_prev btn btn-sm btn-primary"><span class="fa fa-arrow-left"/></button>
<button class="o_calendar_button_today btn btn-sm btn-primary">Today</button>
<button class="o_calendar_button_next btn btn-sm btn-primary"><span class="fa fa-arrow-right"/></button>
<div class="btn-group btn-group-sm">
<button type="button" class="o_calendar_button_day btn btn-sm btn-default">Day</button>
<button type="button" class="o_calendar_button_week btn btn-sm btn-default">Week</button>
<button type="button" class="o_calendar_button_month btn btn-sm btn-default">Month</button>
</div>
</div>
</t>
<div t-name="CalendarView.quick_create" class="o_calendar_quick_create">
<div class="form-group">
<label for='name' class='control-label'>Event summary:</label>
<input name='name' class="form-control"/>
</div>
</div>
</template>
+1 -1
View File
@@ -3,7 +3,7 @@
<data>
<template id="assets_backend" name="web_calendar assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/web_calendar/static/src/css/web_fullcalendar.css"/>
<link rel="stylesheet" href="/web_calendar/static/src/less/web_calendar.less"/>
<link rel="stylesheet" href="/web_calendar/static/lib/fullcalendar/css/fullcalendar.css"/>
<script type="text/javascript" src="/web_calendar/static/lib/fullcalendar/js/fullcalendar.js"></script>