MDL-60558 block_calendar_upcoming: Render the template when no events
[moodle.git] / calendar / templates / upcoming_mini.mustache
1 {{!
2     This file is part of Moodle - http://moodle.org/
4     Moodle is free software: you can redistribute it and/or modify
5     it under the terms of the GNU General Public License as published by
6     the Free Software Foundation, either version 3 of the License, or
7     (at your option) any later version.
9     Moodle is distributed in the hope that it will be useful,
10     but WITHOUT ANY WARRANTY; without even the implied warranty of
11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12     GNU General Public License for more details.
14     You should have received a copy of the GNU General Public License
15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 }}
17 {{!
18     @template calendar/upcoming_mini
20     Calendar upcoming view for blocks.
22     The purpose of this template is to render the upcoming view for blocks.
24     Classes required for JS:
25     * none
27     Data attributes required for JS:
28     * none
30     Example context (json):
31     {
32     }
33 }}
34 <div class="card-text content calendarwrapper"{{!
35     }} id="month-upcoming-mini-{{uniqid}}"{{!
36     }} data-context-id="{{defaulteventcontext}}"{{!
37     }} data-courseid="{{courseid}}"{{!
38     }} data-categoryid="{{categoryid}}"{{!
39 }}>
40     {{> core/overlay_loading}}
41     {{#events}}
42         <div{{!
43             }} class="event"{{!
44             }} data-eventtype-{{calendareventtype}}="1"{{!
45             }} data-region="event-item"{{!
46         }}>
47             <span>{{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}</span>
48             <a{{!
49                 }} data-type="event"{{!
50                 }} data-action="view-event"{{!
51                 }} data-event-id="{{id}}"{{!
52                 }} href="{{viewurl}}"{{!
53             }}>{{{name}}}</a>
54             <div class="date">{{{formattedtime}}}</div>
55             <hr>
56         </div>
57     {{/events}}
58     {{^events}}
59         {{#str}}noupcomingevents, calendar{{/str}}
60     {{/events}}
61 </div>
62 {{#js}}
63 require([
64     'jquery',
65     'core_calendar/selectors',
66     'core_calendar/events',
67 ], function(
68     $,
69     CalendarSelectors,
70     CalendarEvents
71 ) {
72     var root = $('#month-upcoming-mini-{{uniqid}}');
74     $('body').on(CalendarEvents.filterChanged, function(e, data) {
75         M.util.js_pending("month-upcoming-mini-{{uniqid}}-filterChanged");
77         // A filter value has been changed.
78         // Find all matching cells in the popover data, and hide them.
79         var target = $("#month-upcoming-mini-{{uniqid}}").find(CalendarSelectors.eventType[data.type]);
81         var transitionPromise = $.Deferred();
82         if (data.hidden) {
83             transitionPromise.then(function() {
84                 return target.slideUp('fast').promise();
85             });
86         } else {
87             transitionPromise.then(function() {
88                 return target.slideDown('fast').promise();
89             });
90         }
92         transitionPromise.then(function() {
93             M.util.js_complete("month-upcoming-mini-{{uniqid}}-filterChanged");
95             return;
96         });
98         transitionPromise.resolve();
99     });
100 });
101 {{/js}}