MDL-65671 calendar: add the calendar view selector

This commit is contained in:
Simey Lameze
2019-06-10 13:09:57 +08:00
parent f3507273e9
commit dbccdae8f5
12 changed files with 138 additions and 15 deletions
+1 -1
View File
@@ -1 +1 @@
define([],function(){return{eventFilterItem:"[data-action='filter-event-type']",eventType:{site:"[data-eventtype-site]",category:"[data-eventtype-category]",course:"[data-eventtype-course]",group:"[data-eventtype-group]",user:"[data-eventtype-user]"},popoverType:{site:"[data-popover-eventtype-site]",category:"[data-popover-eventtype-category]",course:"[data-popover-eventtype-course]",group:"[data-popover-eventtype-group]",user:"[data-popover-eventtype-user]"},calendarPeriods:{month:"[data-period='month']"},courseSelector:'select[name="course"]',actions:{create:'[data-action="new-event-button"]',edit:'[data-action="edit"]',remove:'[data-action="delete"]',viewEvent:'[data-action="view-event"]'},elements:{courseSelector:'select[name="course"]'},today:".today",day:'[data-region="day"]',wrapper:".calendarwrapper",eventItem:'[data-type="event"]',links:{navLink:".calendarwrapper .arrow_link",eventLink:"[data-region='event-item']"},containers:{loadingIcon:'[data-region="overlay-icon-container"]'}}});
define([],function(){return{eventFilterItem:"[data-action='filter-event-type']",eventType:{site:"[data-eventtype-site]",category:"[data-eventtype-category]",course:"[data-eventtype-course]",group:"[data-eventtype-group]",user:"[data-eventtype-user]"},popoverType:{site:"[data-popover-eventtype-site]",category:"[data-popover-eventtype-category]",course:"[data-popover-eventtype-course]",group:"[data-popover-eventtype-group]",user:"[data-popover-eventtype-user]"},calendarPeriods:{month:"[data-period='month']"},courseSelector:'select[name="course"]',viewSelector:'div[data-region="view-selector"]',actions:{create:'[data-action="new-event-button"]',edit:'[data-action="edit"]',remove:'[data-action="delete"]',viewEvent:'[data-action="view-event"]'},elements:{courseSelector:'select[name="course"]'},today:".today",day:'[data-region="day"]',wrapper:".calendarwrapper",eventItem:'[data-type="event"]',links:{navLink:".calendarwrapper .arrow_link",eventLink:"[data-region='event-item']"},containers:{loadingIcon:'[data-region="overlay-icon-container"]'}}});
+1 -1
View File
@@ -1 +1 @@
define(["jquery","core/templates","core/str","core/notification","core_calendar/repository","core_calendar/events","core_calendar/selectors","core/modal_factory","core/modal_events","core_calendar/summary_modal"],function(a,b,c,d,e,f,g,h,i,j){var k=function(b){b=a(b),b.on("click",g.links.eventLink,function(b){var c,d=a(b.target),e=null;c=d.is(g.actions.viewEvent)?d:d.closest(g.actions.viewEvent),e=c.length?c.data("eventId"):d.find(g.actions.viewEvent).data("eventId"),e&&(b.preventDefault(),b.stopPropagation(),v(e))}),b.on("click",g.links.navLink,function(c){var d=b.find(g.wrapper),e=d.data("view"),f=d.data("courseid"),h=d.data("categoryid"),i=a(c.currentTarget);"month"===e?(m(b,i.attr("href"),i.data("year"),i.data("month"),f,h),c.preventDefault()):"day"===e&&(q(b,i.attr("href"),i.data("year"),i.data("month"),i.data("day"),f,h),c.preventDefault())})},l=function(c,h,i,j,k,l){r(c),l=l||c.find(g.wrapper),M.util.js_pending([c.get("id"),h,i,j].join("-"));var m=c.data("includenavigation"),n=c.data("mini");return e.getCalendarMonthData(h,i,j,k,m,n).then(function(a){return b.render(c.attr("data-template"),a)}).then(function(a,c){return b.replaceNode(l,a,c)}).then(function(){a("body").trigger(f.viewUpdated)}).always(function(){return M.util.js_complete([c.get("id"),h,i,j].join("-")),s(c)}).fail(d.exception)},m=function(b,c,d,e,g,h){return l(b,d,e,g,h).then(function(){return c.length&&"#"!==c&&window.history.pushState({},"",c),arguments}).then(function(){return a("body").trigger(f.monthChanged,[d,e,g,h]),arguments})},n=function(a,b,c){var d=a.find(g.wrapper).data("year"),e=a.find(g.wrapper).data("month");return"undefined"==typeof b&&(b=a.find(g.wrapper).data("courseid")),"undefined"==typeof c&&(c=a.find(g.wrapper).data("categoryid")),l(a,d,e,b,c)},o=function(c,h,i,j,k,l,m){r(c),m=m||c.find(g.wrapper),M.util.js_pending([c.get("id"),h,i,j,k,l].join("-"));var n=c.data("includenavigation");return e.getCalendarDayData(h,i,j,k,l,n).then(function(a){return b.render(c.attr("data-template"),a)}).then(function(a,c){return b.replaceNode(m,a,c)}).then(function(){a("body").trigger(f.viewUpdated)}).always(function(){return M.util.js_complete([c.get("id"),h,i,j,k,l].join("-")),s(c)}).fail(d.exception)},p=function(a,b,c){var d=a.find(g.wrapper),e=d.data("year"),f=d.data("month"),h=d.data("day");return b||(b=a.find(g.wrapper).data("courseid")),"undefined"==typeof c&&(c=a.find(g.wrapper).data("categoryid")),o(a,e,f,h,b,c)},q=function(b,c,d,e,g,h,i){return o(b,d,e,g,h,i).then(function(){return c.length&&"#"!==c&&window.history.pushState({},"",c),arguments}).then(function(){return a("body").trigger(f.dayChanged,[d,e,g,h,i]),arguments})},r=function(a){var b=a.find(g.containers.loadingIcon);b.removeClass("hidden")},s=function(a){var b=a.find(g.containers.loadingIcon);b.addClass("hidden")},t=function(c,h,i){r(c);var j=c.find(g.wrapper);return"undefined"==typeof h&&(h=c.find(g.wrapper).data("courseid")),"undefined"==typeof i&&(i=c.find(g.wrapper).data("categoryid")),e.getCalendarUpcomingData(h,i).then(function(a){return b.render(c.attr("data-template"),a)}).then(function(a,c){return b.replaceNode(j,a,c)}).then(function(){a("body").trigger(f.viewUpdated)}).always(function(){return s(c)}).fail(d.exception)},u=function(a){return"calendar_event_"+a},v=function(a){var c="";e.getEventById(a).then(function(b){if(!b.event)throw new Error("Error encountered while trying to fetch calendar event with ID: "+a);var d=b.event;return c=u(d.normalisedeventtype),d}).then(function(a){var d={title:a.name,type:j.TYPE,body:b.render("core_calendar/event_summary_body",a),templateContext:{canedit:a.canedit,candelete:a.candelete,headerclasses:c,isactionevent:a.isactionevent,url:a.url}};return h.create(d)}).done(function(a){a.getRoot().on(i.hidden,function(){a.destroy()}),a.show()}).fail(d.exception)};return{init:function(a){k(a)},reloadCurrentMonth:n,changeMonth:m,refreshMonthContent:l,reloadCurrentDay:p,changeDay:q,refreshDayContent:o,reloadCurrentUpcoming:t}});
define(["jquery","core/templates","core/str","core/notification","core_calendar/repository","core_calendar/events","core_calendar/selectors","core/modal_factory","core/modal_events","core_calendar/summary_modal","core/custom_interaction_events"],function(a,b,c,d,e,f,g,h,i,j,k){var l=function(b){b=a(b),b.on("click",g.links.eventLink,function(b){var c,d=a(b.target),e=null;c=d.is(g.actions.viewEvent)?d:d.closest(g.actions.viewEvent),e=c.length?c.data("eventId"):d.find(g.actions.viewEvent).data("eventId"),e&&(b.preventDefault(),b.stopPropagation(),w(e))}),b.on("click",g.links.navLink,function(c){var d=b.find(g.wrapper),e=d.data("view"),f=d.data("courseid"),h=d.data("categoryid"),i=a(c.currentTarget);"month"===e?(n(b,i.attr("href"),i.data("year"),i.data("month"),f,h),c.preventDefault()):"day"===e&&(r(b,i.attr("href"),i.data("year"),i.data("month"),i.data("day"),f,h),c.preventDefault())});var c=b.find(g.viewSelector);k.define(c,[k.events.activate]),c.on(k.events.activate,function(c){c.preventDefault();var e=a(c.target);if(!e.hasClass("active")){var f=e.data("view"),g=e.data("year"),h=e.data("month"),i=e.data("day"),j=e.data("courseid"),k=e.data("categoryid");"month"==f?m(b,g,h,j,k,b,"core_calendar/calendar_month").then(function(){return window.history.pushState({},"","?view=month")}).fail(d.exception):"day"==f?p(b,g,h,i,j,k,b,"core_calendar/calendar_day").then(function(){return window.history.pushState({},"","?view=day")}).fail(d.exception):"upcoming"==f&&u(b,j,k,"core_calendar/calendar_upcoming").then(function(){return window.history.pushState({},"","?view=upcoming")}).fail(d.exception)}})},m=function(c,h,i,j,k,l,m){s(c),l=l||c.find(g.wrapper),m=m||c.attr("data-template"),M.util.js_pending([c.get("id"),h,i,j].join("-"));var n=c.data("includenavigation"),o=c.data("mini");return e.getCalendarMonthData(h,i,j,k,n,o).then(function(a){return a.viewingmonth=!0,b.render(m,a)}).then(function(a,c){return b.replaceNode(l,a,c)}).then(function(){a("body").trigger(f.viewUpdated)}).always(function(){return M.util.js_complete([c.get("id"),h,i,j].join("-")),t(c)}).fail(d.exception)},n=function(b,c,d,e,g,h){return m(b,d,e,g,h).then(function(){return c.length&&"#"!==c&&window.history.pushState({},"",c),arguments}).then(function(){return a("body").trigger(f.monthChanged,[d,e,g,h]),arguments})},o=function(a,b,c){var d=a.find(g.wrapper).data("year"),e=a.find(g.wrapper).data("month");return"undefined"==typeof b&&(b=a.find(g.wrapper).data("courseid")),"undefined"==typeof c&&(c=a.find(g.wrapper).data("categoryid")),m(a,d,e,b,c)},p=function(c,h,i,j,k,l,m,n){s(c),m=m||c.find(g.wrapper),n=n||c.attr("data-template"),M.util.js_pending([c.get("id"),h,i,j,k,l].join("-"));var o=c.data("includenavigation");return e.getCalendarDayData(h,i,j,k,l,o).then(function(a){return a.viewingday=!0,b.render(n,a)}).then(function(a,c){return b.replaceNode(m,a,c)}).then(function(){a("body").trigger(f.viewUpdated)}).always(function(){return M.util.js_complete([c.get("id"),h,i,j,k,l].join("-")),t(c)}).fail(d.exception)},q=function(a,b,c){var d=a.find(g.wrapper),e=d.data("year"),f=d.data("month"),h=d.data("day");return b||(b=a.find(g.wrapper).data("courseid")),"undefined"==typeof c&&(c=a.find(g.wrapper).data("categoryid")),p(a,e,f,h,b,c)},r=function(b,c,d,e,g,h,i){return p(b,d,e,g,h,i).then(function(){return c.length&&"#"!==c&&window.history.pushState({},"",c),arguments}).then(function(){return a("body").trigger(f.dayChanged,[d,e,g,h,i]),arguments})},s=function(a){var b=a.find(g.containers.loadingIcon);b.removeClass("hidden")},t=function(a){var b=a.find(g.containers.loadingIcon);b.addClass("hidden")},u=function(c,h,i,j){s(c);var k=c.find(g.wrapper);return j=j||c.attr("data-template"),"undefined"==typeof h&&(h=c.find(g.wrapper).data("courseid")),"undefined"==typeof i&&(i=c.find(g.wrapper).data("categoryid")),e.getCalendarUpcomingData(h,i).then(function(a){return a.viewingupcoming=!0,b.render(j,a)}).then(function(a,c){return b.replaceNode(k,a,c)}).then(function(){a("body").trigger(f.viewUpdated)}).always(function(){return t(c)}).fail(d.exception)},v=function(a){return"calendar_event_"+a},w=function(a){var c="";e.getEventById(a).then(function(b){if(!b.event)throw new Error("Error encountered while trying to fetch calendar event with ID: "+a);var d=b.event;return c=v(d.normalisedeventtype),d}).then(function(a){var d={title:a.name,type:j.TYPE,body:b.render("core_calendar/event_summary_body",a),templateContext:{canedit:a.canedit,candelete:a.candelete,headerclasses:c,isactionevent:a.isactionevent,url:a.url}};return h.create(d)}).done(function(a){a.getRoot().on(i.hidden,function(){a.destroy()}),a.show()}).fail(d.exception)};return{init:function(a,b){l(a,b)},reloadCurrentMonth:o,changeMonth:n,refreshMonthContent:m,reloadCurrentDay:q,changeDay:r,refreshDayContent:p,reloadCurrentUpcoming:u}});
+1
View File
@@ -42,6 +42,7 @@ define([], function() {
month: "[data-period='month']",
},
courseSelector: 'select[name="course"]',
viewSelector: 'div[data-region="view-selector"]',
actions: {
create: '[data-action="new-event-button"]',
edit: '[data-action="edit"]',
+59 -12
View File
@@ -32,6 +32,7 @@ define([
'core/modal_factory',
'core/modal_events',
'core_calendar/summary_modal',
'core/custom_interaction_events',
], function(
$,
Templates,
@@ -42,7 +43,8 @@ define([
CalendarSelectors,
ModalFactory,
ModalEvents,
SummaryModal
SummaryModal,
CustomEvents
) {
/**
@@ -101,6 +103,44 @@ define([
}
});
var viewSelector = root.find(CalendarSelectors.viewSelector);
CustomEvents.define(viewSelector, [CustomEvents.events.activate]);
viewSelector.on(
CustomEvents.events.activate,
function(e) {
e.preventDefault();
var option = $(e.target);
if (option.hasClass('active')) {
return;
}
var view = option.data('view'),
year = option.data('year'),
month = option.data('month'),
day = option.data('day'),
courseId = option.data('courseid'),
categoryId = option.data('categoryid');
if (view == 'month') {
refreshMonthContent(root, year, month, courseId, categoryId, root, 'core_calendar/calendar_month')
.then(function() {
return window.history.pushState({}, '', '?view=month');
}).fail(Notification.exception);
} else if (view == 'day') {
refreshDayContent(root, year, month, day, courseId, categoryId, root, 'core_calendar/calendar_day')
.then(function() {
return window.history.pushState({}, '', '?view=day');
}).fail(Notification.exception);
} else if (view == 'upcoming') {
reloadCurrentUpcoming(root, courseId, categoryId, 'core_calendar/calendar_upcoming')
.then(function() {
return window.history.pushState({}, '', '?view=upcoming');
}).fail(Notification.exception);
}
}
);
};
/**
@@ -112,19 +152,21 @@ define([
* @param {Number} courseid The id of the course whose events are shown
* @param {Number} categoryid The id of the category whose events are shown
* @param {object} target The element being replaced. If not specified, the calendarwrapper is used.
* @param {String} template The template to be rendered.
* @return {promise}
*/
var refreshMonthContent = function(root, year, month, courseid, categoryid, target) {
var refreshMonthContent = function(root, year, month, courseid, categoryid, target, template) {
startLoading(root);
target = target || root.find(CalendarSelectors.wrapper);
template = template || root.attr('data-template');
M.util.js_pending([root.get('id'), year, month, courseid].join('-'));
var includenavigation = root.data('includenavigation');
var mini = root.data('mini');
return CalendarRepository.getCalendarMonthData(year, month, courseid, categoryid, includenavigation, mini)
.then(function(context) {
return Templates.render(root.attr('data-template'), context);
context.viewingmonth = true;
return Templates.render(template, context);
})
.then(function(html, js) {
return Templates.replaceNode(target, html, js);
@@ -199,18 +241,21 @@ define([
* @param {Number} courseid The id of the course whose events are shown
* @param {Number} categoryId The id of the category whose events are shown
* @param {object} target The element being replaced. If not specified, the calendarwrapper is used.
* @param {String} template The template to be rendered.
*
* @return {promise}
*/
var refreshDayContent = function(root, year, month, day, courseid, categoryId, target) {
var refreshDayContent = function(root, year, month, day, courseid, categoryId, target, template) {
startLoading(root);
target = target || root.find(CalendarSelectors.wrapper);
template = template || root.attr('data-template');
M.util.js_pending([root.get('id'), year, month, day, courseid, categoryId].join('-'));
var includenavigation = root.data('includenavigation');
return CalendarRepository.getCalendarDayData(year, month, day, courseid, categoryId, includenavigation)
.then(function(context) {
return Templates.render(root.attr('data-template'), context);
context.viewingday = true;
return Templates.render(template, context);
})
.then(function(html, js) {
return Templates.replaceNode(target, html, js);
@@ -307,13 +352,14 @@ define([
* @param {object} root The container element.
* @param {Number} courseId The course id.
* @param {Number} categoryId The id of the category whose events are shown
* @param {String} template The template to be rendered.
* @return {promise}
*/
var reloadCurrentUpcoming = function(root, courseId, categoryId) {
var reloadCurrentUpcoming = function(root, courseId, categoryId, template) {
startLoading(root);
var target = root.find(CalendarSelectors.wrapper);
template = template || root.attr('data-template');
if (typeof courseId === 'undefined') {
courseId = root.find(CalendarSelectors.wrapper).data('courseid');
}
@@ -324,7 +370,8 @@ define([
return CalendarRepository.getCalendarUpcomingData(courseId, categoryId)
.then(function(context) {
return Templates.render(root.attr('data-template'), context);
context.viewingupcoming = true;
return Templates.render(template, context);
})
.then(function(html, js) {
return Templates.replaceNode(target, html, js);
@@ -398,8 +445,8 @@ define([
};
return {
init: function(root) {
registerEventListeners(root);
init: function(root, view) {
registerEventListeners(root, view);
},
reloadCurrentMonth: reloadCurrentMonth,
changeMonth: changeMonth,
+5 -1
View File
@@ -90,6 +90,9 @@ class calendar_upcoming_exporter extends exporter {
'isloggedin' => [
'type' => PARAM_BOOL,
],
'date' => [
'type' => date_exporter::read_properties_definition(),
],
];
}
@@ -138,7 +141,8 @@ class calendar_upcoming_exporter extends exporter {
}
$return['filter_selector'] = $this->get_course_filter_selector($output);
$return['courseid'] = $this->calendar->courseid;
$date = $this->related['type']->timestamp_to_date_array($this->calendar->time);
$return['date'] = (new date_exporter($date))->export($output);
if ($this->calendar->categoryid) {
$return['categoryid'] = $this->calendar->categoryid;
}
+3
View File
@@ -3429,9 +3429,11 @@ function calendar_get_view(\calendar_information $calendar, $view, $includenavig
$month->set_initialeventsloaded(!$skipevents);
$month->set_showcoursefilter($view == "month");
$data = $month->export($renderer);
$data->viewingmonth = true;
} else if ($view == "day") {
$day = new \core_calendar\external\calendar_day_exporter($calendar, $related);
$data = $day->export($renderer);
$data->viewingday = true;
$template = 'core_calendar/calendar_day';
} else if ($view == "upcoming" || $view == "upcoming_mini") {
$upcoming = new \core_calendar\external\calendar_upcoming_exporter($calendar, $related);
@@ -3439,6 +3441,7 @@ function calendar_get_view(\calendar_information $calendar, $view, $includenavig
if ($view == "upcoming") {
$template = 'core_calendar/calendar_upcoming';
$data->viewingupcoming = true;
} else if ($view == "upcoming_mini") {
$template = 'core_calendar/calendar_upcoming_mini';
}
+3
View File
@@ -32,6 +32,9 @@
}
}}
<div id="calendar-day-{{uniqid}}" data-template="core_calendar/day_detailed">
<div class="mb-5">
{{> core_calendar/view_selector}}
</div>
{{> core_calendar/day_detailed}}
</div>
{{#js}}
@@ -32,6 +32,10 @@
}
}}
<div id="calendar-month-{{uniqid}}" data-template="core_calendar/month_detailed">
<div class="mb-5">
{{> core_calendar/view_selector}}
</div>
{{> core_calendar/month_detailed}}
</div>
{{#js}}
@@ -32,6 +32,7 @@
}
}}
<div id="calendar-upcoming-{{uniqid}}" data-template="core_calendar/upcoming_detailed">
{{> core_calendar/upcoming_detailed}}
</div>
{{#js}}
@@ -34,5 +34,6 @@
<div class="calendarwrapper" data-view="upcoming" data-context-id="{{defaulteventcontext}}" data-courseid="{{courseid}}">
{{> core_calendar/header}}
{{> core/overlay_loading}}
<h2 class="current">{{#str}}upcomingevents, core_calendar{{/str}}</h2>
{{> core_calendar/event_list }}
</div>
+58
View File
@@ -0,0 +1,58 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core_calendar/view_selector
This template renders display dropdown.
Example context (json):
{
"viewingmonth": true,
"viewingday": false,
"viewingupcoming": false
}
}}
<div class="dropdown mb-1" data-region="view-selector">
<button id="calendarviewdropdown" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{#pix}} a/view_icon_active {{/pix}}
<span class="d-sm-inline-block" data-active-item-text>
{{#viewingmonth}}{{#str}} month {{/str}}{{/viewingmonth}}
{{#viewingday}}{{#str}} day, core_calendar {{/str}}{{/viewingday}}
{{#viewingupcoming}}{{#str}} upcomingevents, core_calendar {{/str}}{{/viewingupcoming}}
</span>
</button>
<ul class="dropdown-menu" data-show-active-item aria-labelledby="calendarviewdropdown">
<li>
<a class="dropdown-item {{#viewingmonth}}active{{/viewingmonth}}" href="#" data-view="month"
data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{date.mday}}" data-courseid="{{courseid}}" data-categoryid="{{categoryid}}">
{{#str}} month {{/str}}
</a>
</li>
<li>
<a class="dropdown-item {{#viewingday}}active{{/viewingday}}" href="#" data-view="day" data-year="{{date.year}}" data-month="{{date.mon}}"
data-day="{{date.mday}}" data-courseid="{{courseid}}" data-categoryid="{{categoryid}}">
{{#str}} day, core_calendar {{/str}}
</a>
</li>
<li>
<a class="dropdown-item {{#viewingupcoming}}active{{/viewingupcoming}}" href="#" data-view="upcoming"
data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{date.mday}}" data-courseid="{{courseid}}" data-categoryid="{{categoryid}}">
{{#str}} upcomingevents, core_calendar {{/str}}
</a>
</li>
</ul>
</div>
+1
View File
@@ -49,6 +49,7 @@ $string['categoryevents'] = 'Category events';
$string['courses'] = 'Courses';
$string['customexport'] = 'Custom range ({$a->timestart} - {$a->timeend})';
$string['daily'] = 'Daily';
$string['day'] = 'Day';
$string['daynext'] = 'Next day';
$string['dayprev'] = 'Previous day';
$string['dayviewfor'] = 'Day view for:';