Commit 3ea4f446 authored by Andrew Nicols's avatar Andrew Nicols Committed by jun
Browse files

MDL-60096 calendar: Add JS for day view

parent 736b3689
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -31,6 +31,7 @@ define([], function() {
editEvent: 'calendar-events:edit_event',
editActionEvent: 'calendar-events:edit_action_event',
eventMoved: 'calendar-events:event_moved',
dayChanged: 'calendar-events:day_changed',
monthChanged: 'calendar-events:month_changed',
moveEvent: 'calendar-events:move_event',
filterChanged: 'calendar-events:filter_changed',
......
......@@ -112,6 +112,32 @@ define(['jquery', 'core/ajax'], function($, Ajax) {
return Ajax.call([request])[0];
};
/**
* Get calendar data for the day view.
*
* @method getCalendarDayData
* @param {Number} year Year
* @param {Number} month Month
* @param {Number} day Day
* @param {Number} courseid The course id.
* @param {Number} categoryId The id of the category whose events are shown
* @return {promise} Resolved with the day view data.
*/
var getCalendarDayData = function(year, month, day, courseid, categoryId) {
var request = {
methodname: 'core_calendar_get_calendar_day_view',
args: {
year: year,
month: month,
day: day,
courseid: courseid,
categoryid: categoryId,
}
};
return Ajax.call([request])[0];
};
/**
* Change the start day for the given event id. The day timestamp
* only has to be any time during the target day because only the
......@@ -157,6 +183,7 @@ define(['jquery', 'core/ajax'], function($, Ajax) {
updateEventStartDay: updateEventStartDay,
submitCreateUpdateForm: submitCreateUpdateForm,
getCalendarMonthData: getCalendarMonthData,
getCalendarDayData: getCalendarDayData,
getCalendarUpcomingData: getCalendarUpcomingData
};
});
......@@ -21,13 +21,24 @@
* @copyright 2017 Andrew Nicols <andrew@nicols.co.uk>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
define(['jquery', 'core/templates', 'core/notification', 'core_calendar/repository', 'core_calendar/events'],
function($, Templates, Notification, CalendarRepository, CalendarEvents) {
define([
'jquery',
'core/templates',
'core/notification',
'core_calendar/repository',
'core_calendar/events',
'core_calendar/selectors',
], function(
$,
Templates,
Notification,
CalendarRepository,
CalendarEvents,
CalendarSelectors
) {
var SELECTORS = {
ROOT: "[data-region='calendar']",
CALENDAR_NAV_LINK: ".calendarwrapper .arrow_link",
CALENDAR_MONTH_WRAPPER: ".calendarwrapper",
LOADING_ICON_CONTAINER: '[data-region="overlay-icon-container"]'
};
......@@ -40,13 +51,21 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
root = $(root);
root.on('click', SELECTORS.CALENDAR_NAV_LINK, function(e) {
var wrapper = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER);
var wrapper = root.find(CalendarSelectors.wrapper);
var view = wrapper.data('view');
var courseId = wrapper.data('courseid');
var categoryId = wrapper.data('categoryid');
var link = $(e.currentTarget);
changeMonth(root, link.attr('href'), link.data('year'), link.data('month'), courseId, categoryId);
e.preventDefault();
if (view === 'month') {
changeMonth(root, link.attr('href'), link.data('year'), link.data('month'), courseId, categoryId);
e.preventDefault();
} else if (view === 'day') {
changeDay(root, link.attr('href'), link.data('year'), link.data('month'), link.data('day'),
courseId, categoryId);
e.preventDefault();
}
});
};
......@@ -64,7 +83,7 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
var refreshMonthContent = function(root, year, month, courseid, categoryid, target) {
startLoading(root);
target = target || root.find(SELECTORS.CALENDAR_MONTH_WRAPPER);
target = target || root.find(CalendarSelectors.wrapper);
M.util.js_pending([root.get('id'), year, month, courseid].join('-'));
var includenavigation = root.data('includenavigation');
......@@ -120,19 +139,107 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
* @return {promise}
*/
var reloadCurrentMonth = function(root, courseId, categoryId) {
var year = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('year');
var month = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('month');
var year = root.find(CalendarSelectors.wrapper).data('year');
var month = root.find(CalendarSelectors.wrapper).data('month');
if (typeof courseId === 'undefined') {
courseId = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('courseid');
courseId = root.find(CalendarSelectors.wrapper).data('courseid');
}
if (typeof categoryId === 'undefined') {
categoryId = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('categoryid');
categoryId = root.find(CalendarSelectors.wrapper).data('categoryid');
}
return refreshMonthContent(root, year, month, courseId, categoryId);
};
/**
* Refresh the day content.
*
* @param {object} root The root element.
* @param {Number} year Year
* @param {Number} month Month
* @param {Number} day Day
* @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.
* @return {promise}
*/
var refreshDayContent = function(root, year, month, day, courseid, categoryId, target) {
startLoading(root);
target = target || root.find(CalendarSelectors.wrapper);
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);
})
.then(function(html, js) {
return Templates.replaceNode(target, html, js);
})
.then(function() {
$('body').trigger(CalendarEvents.viewUpdated);
return;
})
.always(function() {
M.util.js_complete([root.get('id'), year, month, day, courseid, categoryId].join('-'));
return stopLoading(root);
})
.fail(Notification.exception);
};
/**
* Reload the current day view data.
*
* @param {object} root The container element.
* @param {Number} courseId The course id.
* @param {Number} categoryId The id of the category whose events are shown
* @return {promise}
*/
var reloadCurrentDay = function(root, courseId, categoryId) {
var wrapper = root.find(CalendarSelectors.wrapper);
var year = wrapper.data('year');
var month = wrapper.data('month');
var day = wrapper.data('day');
if (!courseId) {
courseId = root.find(CalendarSelectors.wrapper).data('courseid');
}
if (typeof categoryId === 'undefined') {
categoryId = root.find(CalendarSelectors.wrapper).data('categoryid');
}
return refreshDayContent(root, year, month, day, courseId, categoryId);
};
/**
* Handle changes to the current calendar view.
*
* @param {object} root The root element.
* @param {String} url The calendar url to be shown
* @param {Number} year Year
* @param {Number} month Month
* @param {Number} day Day
* @param {Number} courseId The id of the course whose events are shown
* @param {Number} categoryId The id of the category whose events are shown
* @return {promise}
*/
var changeDay = function(root, url, year, month, day, courseId, categoryId) {
return refreshDayContent(root, year, month, day, courseId, categoryId)
.then(function() {
if (url.length && url !== '#') {
window.history.pushState({}, '', url);
}
return arguments;
})
.then(function() {
$('body').trigger(CalendarEvents.dayChanged, [year, month, day, courseId, categoryId]);
return arguments;
});
};
/**
......@@ -169,10 +276,10 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
var reloadCurrentUpcoming = function(root, courseId) {
startLoading(root);
var target = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER);
var target = root.find(CalendarSelectors.wrapper);
if (!courseId) {
courseId = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('courseid');
courseId = root.find(CalendarSelectors.wrapper).data('courseid');
}
return CalendarRepository.getCalendarUpcomingData(courseId)
......@@ -200,6 +307,9 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
reloadCurrentMonth: reloadCurrentMonth,
changeMonth: changeMonth,
refreshMonthContent: refreshMonthContent,
reloadCurrentDay: reloadCurrentDay,
changeDay: changeDay,
refreshDayContent: refreshDayContent,
reloadCurrentUpcoming: reloadCurrentUpcoming
};
});
<?php
// 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/>.
/**
* Contains event class for displaying the day view.
*
* @package core_calendar
* @copyright 2017 Simey Lameze <simey@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
namespace core_calendar\external;
defined('MOODLE_INTERNAL') || die();
use core\external\exporter;
use renderer_base;
use moodle_url;
use \core_calendar\local\event\container;
/**
* Class for displaying the day view.
*
* @package core_calendar
* @copyright 2017 Simey Lameze <simey@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
class calendar_day_exporter extends exporter {
/**
* @var \calendar_information $calendar The calendar to be rendered.
*/
protected $calendar;
/**
* @var moodle_url $url The URL for the day view page.
*/
protected $url;
/**
* Constructor for day exporter.
*
* @param \calendar_information $calendar The calendar being represented.
* @param array $related The related information
*/
public function __construct(\calendar_information $calendar, $related) {
$this->calendar = $calendar;
parent::__construct([], $related);
}
/**
* Return the list of additional properties.
*
* @return array
*/
protected static function define_other_properties() {
return [
'events' => [
'type' => calendar_event_exporter::read_properties_definition(),
'multiple' => true,
],
'defaulteventcontext' => [
'type' => PARAM_INT,
'default' => null,
],
'filter_selector' => [
'type' => PARAM_RAW,
],
'courseid' => [
'type' => PARAM_INT,
],
'categoryid' => [
'type' => PARAM_INT,
'optional' => true,
'default' => 0,
],
'neweventtimestamp' => [
'type' => PARAM_INT,
],
'date' => [
'type' => date_exporter::read_properties_definition(),
],
'periodname' => [
// Note: We must use RAW here because the calendar type returns the formatted month name based on a
// calendar format.
'type' => PARAM_RAW,
],
'previousperiod' => [
'type' => date_exporter::read_properties_definition(),
],
'previousperiodlink' => [
'type' => PARAM_URL,
],
'previousperiodname' => [
// Note: We must use RAW here because the calendar type returns the formatted month name based on a
// calendar format.
'type' => PARAM_RAW,
],
'nextperiod' => [
'type' => date_exporter::read_properties_definition(),
],
'nextperiodname' => [
// Note: We must use RAW here because the calendar type returns the formatted month name based on a
// calendar format.
'type' => PARAM_RAW,
],
'nextperiodlink' => [
'type' => PARAM_URL,
],
'larrow' => [
// The left arrow defined by the theme.
'type' => PARAM_RAW,
],
'rarrow' => [
// The right arrow defined by the theme.
'type' => PARAM_RAW,
],
];
}
/**
* Get the additional values to inject while exporting.
*
* @param renderer_base $output The renderer.
* @return array Keys are the property names, values are their values.
*/
protected function get_other_values(renderer_base $output) {
$timestamp = $this->calendar->time;
$cache = $this->related['cache'];
$url = new moodle_url('/calendar/view.php', [
'view' => 'day',
'time' => $timestamp,
]);
if ($this->calendar->course && SITEID !== $this->calendar->course->id) {
$url->param('course', $this->calendar->course->id);
} else if ($this->calendar->categoryid) {
$url->param('category', $this->calendar->categoryid);
}
$this->url = $url;
$return['events'] = array_map(function($event) use ($cache, $output, $url) {
$context = $cache->get_context($event);
$course = $cache->get_course($event);
$exporter = new calendar_event_exporter($event, [
'context' => $context,
'course' => $course,
'daylink' => $url,
'type' => $this->related['type'],
'today' => $this->calendar->time,
]);
$data = $exporter->export($output);
// We need to override default formatted time because it differs from day view.
// Formatted time for day view adds a link to the day view.
$legacyevent = container::get_event_mapper()->from_event_to_legacy_event($event);
$data->formattedtime = calendar_format_event_time($legacyevent, time(), null);
return $data;
}, $this->related['events']);
if ($context = $this->get_default_add_context()) {
$return['defaulteventcontext'] = $context->id;
}
if ($this->calendar->categoryid) {
$return['categoryid'] = $this->calendar->categoryid;
}
$return['filter_selector'] = $this->get_course_filter_selector($output);
$return['courseid'] = $this->calendar->courseid;
$previousperiod = $this->get_previous_day_data();
$nextperiod = $this->get_next_day_data();
$date = $this->related['type']->timestamp_to_date_array($this->calendar->time);
$nextperiodlink = new moodle_url($this->url);
$nextperiodlink->param('time', $nextperiod[0]);
$previousperiodlink = new moodle_url($this->url);
$previousperiodlink->param('time', $previousperiod[0]);
$days = calendar_get_days();
$return['date'] = (new date_exporter($date))->export($output);
$return['periodname'] = userdate($this->calendar->time, get_string('strftimedaydate'));
$return['previousperiod'] = (new date_exporter($previousperiod))->export($output);
$return['previousperiodname'] = $days[$previousperiod['wday']]['fullname'];
$return['previousperiodlink'] = $previousperiodlink->out(false);
$return['nextperiod'] = (new date_exporter($nextperiod))->export($output);
$return['nextperiodname'] = $days[$nextperiod['wday']]['fullname'];
$return['nextperiodlink'] = $nextperiodlink->out(false);
$return['larrow'] = $output->larrow();
$return['rarrow'] = $output->rarrow();
// Need to account for user's timezone.
$usernow = usergetdate(time());
$today = new \DateTimeImmutable();
$neweventtimestamp = $today->setTimestamp($date[0])->setTime(
$usernow['hours'],
$usernow['minutes'],
$usernow['seconds']
);
$return['neweventtimestamp'] = $neweventtimestamp->getTimestamp();
return $return;
}
/**
* Get the default context for use when adding a new event.
*
* @return null|\context
*/
protected function get_default_add_context() {
if (calendar_user_can_add_event($this->calendar->course)) {
return \context_course::instance($this->calendar->course->id);
}
return null;
}
/**
* Get the course filter selector.
*
* @param renderer_base $output
* @return string The html code for the course filter selector.
*/
protected function get_course_filter_selector(renderer_base $output) {
$langstr = get_string('upcomingeventsfor', 'calendar');
return $output->course_filter_selector($this->url, $langstr);
}
/**
* Returns a list of objects that are related.
*
* @return array
*/
protected static function define_related() {
return [
'events' => '\core_calendar\local\event\entities\event_interface[]',
'cache' => '\core_calendar\external\events_related_objects_cache',
'type' => '\core_calendar\type_base',
];
}
/**
* Get the previous day timestamp.
*
* @return int The previous day timestamp.
*/
protected function get_previous_day_data() {
$type = $this->related['type'];
$time = $type->get_prev_day($this->calendar->time);
return $type->timestamp_to_date_array($time);
}
/**
* Get the next day timestamp.
*
* @return int The next day timestamp.
*/
protected function get_next_day_data() {
$type = $this->related['type'];
$time = $type->get_next_day($this->calendar->time);
return $type->timestamp_to_date_array($time);
}
}
......@@ -972,6 +972,95 @@ class core_calendar_external extends external_api {
return \core_calendar\external\month_exporter::get_read_structure();
}
/**
* Get data for the daily calendar view.
*
* @param int $year The year to be shown
* @param int $month The month to be shown
* @param int $day The day to be shown
* @param int $courseid The course to be included
* @return array
*/
public static function get_calendar_day_view($year, $month, $day, $courseid, $categoryid) {
global $CFG, $DB, $USER, $PAGE;
require_once($CFG->dirroot."/calendar/lib.php");
// Parameter validation.
$params = self::validate_parameters(self::get_calendar_day_view_parameters(), [
'year' => $year,
'month' => $month,
'day' => $day,
'courseid' => $courseid,
'categoryid' => $categoryid,
]);
if ($courseid != SITEID && !empty($courseid)) {
// Course ID must be valid and existing.
$course = $DB->get_record('course', array('id' => $courseid), '*', MUST_EXIST);
$courses = [$course->id => $course];
$coursecat = \coursecat::get($course->category);
$category = $coursecat->get_db_record();
} else {
$course = get_site();
$courses = calendar_get_default_courses();
$category = null;
if ($categoryid) {
self::validate_context(context_coursecat::instance($categoryid));
$ids = [$categoryid];
$category = \coursecat::get($categoryid);
$ids += $category->get_parents();
$categories = \coursecat::get_many($ids);
$courses = array_filter($courses, function($course) use ($categories) {
return array_search($course->category, $categories) !== false;
});
$category = $category->get_db_record();
}
}
// TODO: Copy what we do in calendar/view.php.
$context = \context_user::instance($USER->id);
self::validate_context($context);
$type = \core_calendar\type_factory::get_calendar_instance();
$time = $type->convert_to_timestamp($year, $month, $day);
$calendar = new calendar_information(0, 0, 0, $time);
$calendar->set_sources($course, $courses, $category);
list($data, $template) = calendar_get_view($calendar, 'day', $params['includenavigation']);
return $data;
}
/**