MDL-57446 block_myoverview: add timeline sort by courses templates

Part of MDL-55611 epic.

diff --git a/blocks/myoverview/templates/course-item.mustache b/blocks/myoverview/templates/course-item.mustache
new file mode 100644 (file)
index 0000000..8803587
--- /dev/null
+++ b/blocks/myoverview/templates/course-item.mustache
@@ -0,0 +1,46 @@
+{{!
+    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 block_myoverview/course-item
+
+    This template renders the each course block containing a summary and calendar events.
+
+    Example context (json):
+    {
+        "shortname": "course 3",
+        "viewurl": "https://www.google.com",
+        "startdate": "Nov 1th, 10am",
+        "enddate": "Nov 4th, 10am",
+        "summary": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
+    }
+}}
+<li class="list-group-item m-y-1">
+<div data-region="course-events-container" id="course-events-container-{{id}}" data-course-id="{{id}}">
+    <div class="row">
+        <div class="col-md-3">
+            {{> block_myoverview/course-summary }}
+        </div>
+        <div class="col-md-9">
+            {{< block_myoverview/event-list }}
+                {{$limit}}10{{/limit}}
+                {{$offset}}0{{/offset}}
+                {{$courseid}}{{id}}{{/courseid}}
+            {{/ block_myoverview/event-list }}
+        </div>
+    </div>
+</div>
+</li>

diff --git a/blocks/myoverview/templates/course-summary.mustache b/blocks/myoverview/templates/course-summary.mustache
new file mode 100644 (file)
index 0000000..c0a32f7
--- /dev/null
+++ b/blocks/myoverview/templates/course-summary.mustache
@@ -0,0 +1,47 @@
+{{!
+    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 block_myoverview/course-summary
+
+    This template renders the course summary (view by courses) for the myoverview block.
+
+    Example context (json):
+    {
+        "shortname": "course 3",
+        "viewurl": "https://www.google.com",
+        "startdate": "Nov 1th, 10am",
+        "enddate": "Nov 4th, 10am",
+        "summary": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
+    }
+}}
+<div class="d-inline-block m-l-1">
+    <div class="course-info-container" id="course-info-container-{{id}}">
+        <div class="row m-b-1">
+            <!-- Will be replaced by the chart after course completion changes are done. -->
+            <img height="100px" src="https://conceptdraw.com/a3039c3/p1/preview/640/pict--1-sector-donut-chart-management-indicators---vector-stencils-library.png--diagram-flowchart-example.png">
+        </div>
+        <div class="row m-b-1">
+            <h3><a href="{{viewurl}}">{{shortname}}</a></h3>
+        </div>
+        <div class="row text-muted m-b-1">
+            {{startdate}} - {{enddate}}
+        </div>
+        <div class="row text-muted">
+            {{summary}}
+        </div>
+    </div>
+</div>
\ No newline at end of file

diff --git a/blocks/myoverview/templates/timeline-view-courses.mustache b/blocks/myoverview/templates/timeline-view-courses.mustache
index ac5e1ea..0a3165a 100644 (file)
--- a/blocks/myoverview/templates/timeline-view-courses.mustache
+++ b/blocks/myoverview/templates/timeline-view-courses.mustache
@@ -22,17 +22,12 @@
     Example context (json):
     {}
 }}
-<div id="timeline-view-courses-{{uniqid}}" data-region="timeline-view-courses">
-    {{#courses}}
-        <div class="container-fluid" data-region="view-course">
-            <div class="row">
-                <div class="col-md-3">
-                    {{> block_myoverview/course-summary }}
-                </div>
-                <div class="col-md-9">
-                    {{> block_myoverview/view-dates }}
-                </div>
-            </div>
-        </div>
-    {{/courses}}
-</div>
+<ul class="list-group unstyled" id="timeline-view-courses-{{uniqid}}">
+    {{#courses}} {{> block_myoverview/course-item }} {{/courses}}
+</ul>
+{{#js}}
+    require(['jquery', 'block_myoverview/event_list_by_course'], function($, EventListByCourse) {
+    var root = $("#timeline-view-courses-{{uniqid}}");
+    EventListByCourse.init(root);
+    });
+{{/js}}
\ No newline at end of file