MDL-57447 block_myoverview: create paging bar and content modules

Part of MDL-55611 epic.

blocks/myoverview/amd/src/paging_bar.js

@@ -0,0 +1,66 @@
+// 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/>.
+
+/**
+ * Javascript to load and render the list of calendar events for a
+ * given day range.
+ *
+ * @module     block_myoverview/event_list
+ * @package    block_myoverview
+ * @copyright  2016 Ryan Wyllie <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery', 'core/custom_interaction_events'],
+        function($, CustomEvents) {
+
+    var SELECTORS = {
+        PAGE_LINK: '[data-region="page-link"]',
+        ACTIVE_PAGE_LINK: '.active > [data-region="page-link"]'
+    };
+
+    var EVENTS = {
+        PAGE_SELECTED: 'block_myoverview-paging-bar-page-selected',
+    };
+
+    var registerEventListeners = function(root) {
+        root = $(root);
+        CustomEvents.define(root, [
+            CustomEvents.events.activate
+        ]);
+
+        root.one(CustomEvents.events.activate, SELECTORS.PAGE_LINK, function(e, data) {
+            var page = $(e.target).closest(SELECTORS.PAGE_LINK);
+            var activePage = root.find(SELECTORS.ACTIVE_PAGE_LINK);
+            var isSamePage = page.is(activatePage);
+
+            if (!isSamePage) {
+                root.find(SELECTORS.PAGE_LINK).removeClass('active');
+                page.addClass('active');
+            }
+
+            root.trigger(EVENTS.PAGE_SELECTED, [{
+                pageNumber: page.attr('data-page-number'),
+                isSamePage: isSamePage,
+            }]);
+
+            data.originalEvent.preventDefault();
+        });
+    };
+
+    return {
+        registerEventListeners: registerEventListeners,
+        events: EVENTS,
+    };
+});

blocks/myoverview/amd/src/paging_content.js

@@ -0,0 +1,73 @@
+// 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/>.
+
+/**
+ * Javascript to load and render the list of calendar events for a
+ * given day range.
+ *
+ * @module     block_myoverview/event_list
+ * @package    block_myoverview
+ * @copyright  2016 Ryan Wyllie <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery', 'core/templates', 'block_myoverview/paging_bar'],
+        function($, Templates, PagingBar) {
+
+    var SELECTORS = {
+    };
+
+    var PagingContent = function(root, pagingBarElement, loadContentCallback) {
+        this.root = $(root);
+        this.pagingBar = $(pagingBarElement);
+        this.loadContent = loadContentCallback;
+    };
+
+    PagingContent.prototype.createPage = function(pageNumber) {
+        this.loadContent(pageNumber).done(function(html, js) {
+            Templates.appendTo(this.root, html, js);
+        }.bind(this));
+
+        var page = null;
+
+        return page;
+    };
+
+    PagingContent.prototype.findPage = function(pageNumber) {
+
+    };
+
+    PagingContent.prototype.showPage = function(pageNumber) {
+        var existingPage = this.findPage(pageNumber);
+
+        if (existingPage) {
+            existingPage.addClass('active');
+        } else {
+            var newPage = this.createPage(pageNumber);
+            newPage.addClass('active');
+
+            this.root.append(newPage);
+        }
+    };
+
+    PagingContent.prototype.registerEventListeners = function() {
+        this.pagingBar.one(PagingBar.events.PAGE_SELECTED, function(e, data) {
+            if (!data.isSamePage) {
+                this.showPage(data.pageNumber);
+            };
+        }.bind(this));
+    };
+
+    return PagingContent;
+});

blocks/myoverview/templates/course-paging-content-item.mustache

@@ -0,0 +1,30 @@
+{{!
+    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/paging-bar
+
+    This template renders the each course block containing a summary and calendar events.
+
+    Example context (json):
+    {
+    }
+}}
+{{< block_myoverview/paging-content-item }}
+    {{$content}}
+        <p>FILL ME WITH CONTENT</p>
+    {{/content}}
+{{/ block_myoverview/paging-content-item }}

blocks/myoverview/templates/course-paging-content.mustache

@@ -0,0 +1,30 @@
+{{!
+    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/paging-bar
+
+    This template renders the each course block containing a summary and calendar events.
+
+    Example context (json):
+    {
+    }
+}}
+{{< block_myoverview/paging-content }}
+    {{$paging-content-item}}
+        {{> block_myoverview/course-paging-content-item }}
+    {{/paging-content-item}}
+{{/ block_myoverview/paging-content }}

blocks/myoverview/templates/courses-view-in-progress.mustache

@@ -22,23 +22,44 @@
     Example context (json):
     {}
 }}
-<ul class="list-group unstyled" id="courses-view-in-progress-{{uniqid}}">
-    <span class="hidden" data-region="loading-icon-container">
-        {{> core/loading }}
-    </span>
-    <div id="courses-in-progress-container"
-         data-limit="{{$limit}}6{{/limit}}"
-         data-offset="{{$offset}}0{{/offset}}"
-         data-status="inprogress"
-         data-region="courses-in-progress-container">
+<div id data-limit="{{$limit}}6{{/limit}}" data-status="{{$status}}{{/status}}">
+    {{< block_myoverview/course-paging-content }}
+        {{$id}}paging-content-{{uniqid}}{{/id}}
+    {{/ block_myoverview/course-paging-content }}
+    <div class="text-xs-center text-center">
+        {{< block_myoverview/paging-bar }}
+            {{$id}}paging-bar-{{uniqid}}{{/id}}
+        {{/ block_myoverview/paging-bar }}
     </div>
-</ul>
-<div class="text-xs-center text-center" data-region="courses-in-progress-paging-bar" id="courses-in-progress-paging-bar-{{uniqid}}"></div>
+</div>
 {{#js}}
-require(['jquery', 'block_myoverview/courses_view'], function($, CoursesView) {
-    var root = $("#courses-in-progress-container"),
-    pagingRoot = $("#courses-in-progress-paging-bar-{{uniqid}}");
+require(
+    [
+        'jquery',
+        'core/templates',
+        'block_myoverview/paging_bar',
+        'block_myoverview/paging_content',
+        'block_myoverview/courses_view_repository'
+    ],
+    function($, Templates, PagingBar, PagingContent, CoursesRepository) {
 
-    CoursesView.init(root, pagingRoot);
+    var root = $();
+    var pagingBarElement = $('paging-bar-{{uniqid}}');
+    var pagingContentElement = $('paging-content-{{uniqid}}');
+    var loadContentCallback = function(pageNumber) {
+        var limit = root.attr('data-limit');
+        var offset = (pageNumber - 1) * limit;
+        var status = root.attr('data-status');
+
+        return CoursesRepository.queryFromStatus(status, limit, offset)
+            .then(function(courses) {
+                return Templates.render('block_myoverview/course-paging-content-item', courses);
+            })
+    };
+
+    PagingBar.registerEventListeners(pagingBarElement);
+    var content = new PagingContent(pagingContentElement, pagingBarElement, loadContentCallback);
+
+    content.registerEventListeners();
 });
 {{/js}}

blocks/myoverview/templates/courses-view.mustache

@@ -38,7 +38,9 @@
     </div>
     <div class="tab-content">
         <div class="tab-pane active fade in" id="myoverview_courses_view_in_progress">
-            {{> block_myoverview/courses-view-in-progress }}
+            {{< block_myoverview/courses-view-by-status }}
+                {{$status}}1{{/status}}
+            {{/ block_myoverview/courses-view-by-status }}
         </div>
         <div class="tab-pane fade" id="myoverview_courses_view_future">
             {{> block_myoverview/courses-view-future }}
@@ -56,4 +58,4 @@ require(['jquery', 'core/custom_interaction_events'], function($, customEvents)
         root.find('.btn.active').removeClass('active');
     });
 });
-{{/js}}
+{{/js}}

blocks/myoverview/templates/paging-bar-item.mustache

@@ -0,0 +1,38 @@
+{{!
+    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/paging-bar-item
+
+    This template renders the each course block containing a summary and calendar events.
+
+    Example context (json):
+    {
+    }
+}}
+<li class="page-item {{#active}}active{{/active}} {{#disabled}}disabled{{/disabled}}">
+    <a href="{{url}}"
+       class="page-link"
+       data-page-number="{{number}}"
+       data-region="page-link">
+        {{$item-content}}
+            {{page}}
+            {{#active}}
+                <span class="sr-only">{{#str}}currentinparentheses, theme_boost{{/str}}</span>
+            {{/active}}
+        {{/item-content}}
+    </a>
+</li>

blocks/myoverview/templates/paging-bar.mustache

@@ -0,0 +1,63 @@
+{{!
+    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/paging-bar
+
+    This template renders the each course block containing a summary and calendar events.
+
+    Example context (json):
+    {
+    }
+}}
+<nav aria-label="{{label}}"
+     id="{{$id}}paging-bar-{{uniqid}}{{/id}}"
+     data-region="paging-bar">
+
+    <ul class="pagination">
+        {{#previous}}
+            {{< block_myoverview/paging-bar-item }}
+                {{$item-content}}
+                    <span aria-hidden="true">&laquo;</span>
+                    <span class="sr-only">{{#str}}previous{{/str}}</span>
+                {{/item-content}}
+            {{/ block_myoverview/paging-bar-item }}
+        {{/previous}}
+        {{#first}}
+            {{> block_myoverview/paging-bar-item }}
+        {{/first}}
+        {{#pages}}
+            {{> block_myoverview/paging-bar-item }}
+        {{/pages}}
+        {{#last}}
+            {{> block_myoverview/paging-bar-item }}
+        {{/last}}
+        {{#next}}
+            {{< block_myoverview/paging-bar-item }}
+                {{$item-content}}
+                    <span aria-hidden="true">&raquo;</span>
+                    <span class="sr-only">{{#str}}next{{/str}}</span>
+                {{/item-content}}
+            {{/ block_myoverview/paging-bar-item }}
+        {{/next}}
+    </ul>
+</nav>
+{{#js}}
+require(['jquery', 'block_myoverview/paging_bar'], function($, PagingBar) {
+    var root = $('#{{$id}}paging-bar-{{uniqid}}{{/id}}');
+    PagingBar.registerEventListeners(root);
+});
+{{/js}}