Skip to content

Commit

Permalink
MDL-65671 calendar: add the calendar view selector
Browse files Browse the repository at this point in the history
  • Loading branch information
@lameze
lameze committed Jun 10, 2019
1 parent f350727 commit dbccdae
Show file tree
Hide file tree
Showing 12 changed files with 138 additions and 15 deletions.
2 changes: 1 addition & 1 deletion calendar/amd/build/selectors.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion calendar/amd/build/view_manager.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions calendar/amd/src/selectors.js
View file
Expand Up @@ -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"]',
Expand Down
71 changes: 59 additions & 12 deletions calendar/amd/src/view_manager.js
View file
Expand Up @@ -32,6 +32,7 @@ define([
'core/modal_factory',
'core/modal_events',
'core_calendar/summary_modal',
'core/custom_interaction_events',
], function(
$,
Templates,
Expand All @@ -42,7 +43,8 @@ define([
CalendarSelectors,
ModalFactory,
ModalEvents,
SummaryModal
SummaryModal,
CustomEvents
) {

/**
Expand Down Expand Up @@ -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);
}
}
);
};

/**
Expand All @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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');
}
Expand All @@ -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);
Expand Down Expand Up @@ -398,8 +445,8 @@ define([
};

return {
init: function(root) {
registerEventListeners(root);
init: function(root, view) {
registerEventListeners(root, view);
},
reloadCurrentMonth: reloadCurrentMonth,
changeMonth: changeMonth,
Expand Down
6 changes: 5 additions & 1 deletion calendar/classes/external/calendar_upcoming_exporter.php
View file
Expand Up @@ -90,6 +90,9 @@ protected static function define_other_properties() {
'isloggedin' => [
'type' => PARAM_BOOL,
],
'date' => [
'type' => date_exporter::read_properties_definition(),
],
];
}

Expand Down Expand Up @@ -138,7 +141,8 @@ protected function get_other_values(renderer_base $output) {
}
$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;
}
Expand Down
3 changes: 3 additions & 0 deletions calendar/lib.php
View file
Expand Up @@ -3429,16 +3429,19 @@ function ($event) {
$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);
$data = $upcoming->export($renderer);

if ($view == "upcoming") {
$template = 'core_calendar/calendar_upcoming';
$data->viewingupcoming = true;
} else if ($view == "upcoming_mini") {
$template = 'core_calendar/calendar_upcoming_mini';
}
Expand Down
3 changes: 3 additions & 0 deletions calendar/templates/calendar_day.mustache
View file
Expand Up @@ -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}}
Expand Down

0 comments on commit dbccdae

Please sign in to comment.