Issue #289 - implement popover menu in navbar with starred courses

Author: abias

CHANGES.md

@@ -4,6 +4,10 @@ moodle-theme_boost_union
 Changes
 -------
 
+### Unreleased
+
+* 2024-03-01 - Improvement: implement new setting to show starred courses in a popover menu in navbar, solves #289.
+
 ### v4.3-r8
 
 * 2024-02-22 - Feature: Allow the admin to change the link behind the logo in the navbar, resolves #565.

README.md

@@ -321,6 +321,10 @@ With this setting, you can set an alternative link URL which will be used as lin
 
 With this setting, you can add a 'Set preferred language' setting to the language menu within the user menu. Understandably, this setting is only processed if the language menu is enabled at all.
 
+###### Show starred courses in primary navigation bar
+
+With this setting, you can show a popover menu with links to starred courses next to the messages and notifications menus.
+
 ##### Breadcrumbs
 
 ###### Display the category breadcrumbs in the course header
@@ -774,5 +778,6 @@ Moodle an Hochschulen e.V. would like to thank these main contributors (in alpha
 * University of Graz, André Menrath: Code
 * University of Lübeck, Christian Wolters: Code, Peer Review, Ideating
 * Zurich University of Applied Sciences (ZHAW): Funding, Ideating
+* Academic Moodle Cooperation (AMC): Code, Ideating
 
 Additionally, we thank all other contributors who contributed ideas, feedback and code snippets within the Github issues and pull requests as well as all contributors who contributed additional translations in AMOS, the Moodle translation tool.

lang/en/theme_boost_union.php

@@ -398,6 +398,9 @@
 $string['addpreferredlangsetting'] = 'Add preferred language link to language menu';
 $string['addpreferredlangsetting_desc'] = 'With this setting, you can add a \'Set preferred language\' setting to the language menu within the user menu. Understandably, this setting is only processed if the setting <a href="{$a->url1}">Display language menu</a> is enabled, and if at least <a href="{$a->url2}">a second language pack is installed</a> and <a href="{$a->url3}">offered for selection</a>.';
 $string['setpreferredlanglink'] = 'Set preferred language';
+// ... ... Settings: show a popover menu with starred courses next to the messages and notifications menus.
+$string['shownavbarstarredcoursessetting'] = 'Show starred courses in primary navigation bar';
+$string['shownavbarstarredcoursessetting_desc'] = 'Show a popover menu with links to starred courses next to the messages and notifications menus.';
 // ... Section: Breadcrumbs.
 $string['breadcrumbsheading'] = 'Breadcrumbs';
 // ... ... Setting: Course category breadcrumb.

lib.php

@@ -602,3 +602,13 @@ function theme_boost_union_user_preferences(): array {
     }
     return $preferences;
 }
+
+/**
+ * Returns the html for the starred courses popover menu.
+ *
+ * @return string
+ */
+function theme_boost_union_render_navbar_output() {
+    require_once(__DIR__ . '/locallib.php');
+    return theme_boost_union_get_favourites_popover_menu();
+}

locallib.php

@@ -1867,3 +1867,50 @@ function theme_boost_union_yesno_to_boolstring($var) {
         return 'false';
     }
 }
+
+/**
+ * Function that fetches all favorite courses, and renders them as a popover menu.
+ *
+ * @return string HTML to display the main header.
+ */
+function theme_boost_union_get_favourites_popover_menu() {
+    global $USER, $DB, $OUTPUT;
+    // Menu is relevant only for logged in users.
+    if (isloggedin()) {
+        $settings = get_config('theme_boost_union');
+        if (!isset($settings->shownavbarstarredcourses) || $settings->shownavbarstarredcourses == 'no') {
+            return '';
+        }
+        // Get all favourite courses.
+        $ufservice = \core_favourites\service_factory::get_service_for_user_context(\context_user::instance($USER->id));
+        $favourites = $ufservice->find_favourites_by_type('core_course', 'courses');
+        if (!$favourites) {
+            return '';
+        }
+        $favouritecourseids = array_map(
+            function($favourite) {
+                return $favourite->itemid;
+            }, $favourites);
+        $coursefields = 'id, shortname, fullname, visible';
+        $courses = $DB->get_records_list('course', 'id', $favouritecourseids, 'visible DESC,sortorder ASC', $coursefields);
+
+        // Sort courses by visibility and name.
+        usort($courses, function($a, $b) {
+            if ($a->visible != $b->visible) {
+                return $a->visible == 0 ? 1 : -1;
+            }
+            return strcasecmp(trim($a->fullname), trim($b->fullname));
+        });
+        $menu = [];
+        foreach ($courses as $course) {
+            $menu[] = [
+                'url' => new \moodle_url('/course/view.php', ['id' => $course->id]),
+                'fullname' => $course->fullname,
+                'visible' => $course->visible == 1,
+            ];
+        }
+        $html = $OUTPUT->render_from_template('theme_boost_union/favourites-popover', ['favourites' => $menu]);
+        return $html;
+    }
+    return '';
+}

scss/boost_union/post.scss

@@ -472,6 +472,43 @@ body.hascourseindexcplsol.editing {
     padding-top: 0.5rem;
 }
 
+/*---------------------------------------
+ * Setting: show a popover menu with starred courses next to the messages and notifications menus.
+ --------------------------------------*/
+.navbar #nav-favourites-popover-container {
+    .popover-region-container {
+        height: auto;
+        /* Limit the width to some reasonable size to avoid that the popover menu is too wide. */
+        max-width: 78vw;
+        border-radius: 0.5rem;
+        right: -5vw;
+        width: auto;
+        @include media-breakpoint-down(lg) {
+            max-width: 73vw;
+        }
+        @include media-breakpoint-down(md) {
+            max-width: 68vw;
+        }
+        @include media-breakpoint-down(xs) {
+            right: -35vw;
+            top: 60px;
+        }
+        /* Hide overflowing course names. */
+        .dropdown-item {
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+    .popover-region-header-container {
+        display: none;
+    }
+    .popover-region-content-container {
+        height: auto;
+        min-width: 10rem;
+    }
+}
+
+
 /*---------------------------------------
  * Setting: Back to top button.
  --------------------------------------*/

settings.php

@@ -1259,6 +1259,14 @@
         $setting = new admin_setting_configselect($name, $title, $description, THEME_BOOST_UNION_SETTING_SELECT_NO, $yesnooption);
         $tab->add($setting);
 
+        // Setting: show a popover menu with starred courses next to the messages and notifications menus.
+        $name = 'theme_boost_union/shownavbarstarredcourses';
+        $title = get_string('shownavbarstarredcoursessetting', 'theme_boost_union', null, true);
+        $description = get_string('shownavbarstarredcoursessetting_desc', 'theme_boost_union', null, true);
+        $setting = new admin_setting_configselect($name, $title, $description, THEME_BOOST_UNION_SETTING_SELECT_YES, $yesnooption);
+        $setting->set_updatedcallback('theme_reset_all_caches');
+        $tab->add($setting);
+
         // Create breadcrumbs heading.
         $name = 'theme_boost_union/breadcrumbsheading';
         $title = get_string('breadcrumbsheading', 'theme_boost_union', null, true);

templates/favourites-popover.mustache

@@ -0,0 +1,27 @@
+{{< core/popover_region }}
+    {{$classes}}popover-region-favourites{{/classes}}
+    {{$attributes}}id="nav-favourites-popover-container" {{/attributes}}
+
+    {{$togglelabel}}{{#str}} favourites {{/str}}{{/togglelabel}}
+    {{$togglecontent}}
+        <i class="fa fa-star icon" title="{{#str}}favourites{{/str}}"></i>
+    {{/togglecontent}}
+
+    {{$containerlabel}}{{#str}} favourites {{/str}}{{/containerlabel}}
+
+
+    {{$content}}
+        <div class="">
+            {{#favourites}}
+                <a class="dropdown-item {{^visible}}dimmed{{/visible}}" href="{{{url}}}" title="{{{fullname}}}">{{{fullname}}}</a>
+            {{/favourites}}
+        </div>
+    {{/content}}
+{{/ core/popover_region }}
+
+{{#js}}
+    require(['jquery', 'core/popover_region_controller'], function($, Controller) {
+        var container = $('#nav-favourites-popover-container');
+        var controller = new Controller(container);
+    });
+{{/js}}

tests/behat/theme_boost_union_feelsettings_navigation.feature

@@ -77,12 +77,63 @@ Feature: Configuring the theme_boost_union plugin for the "Navigation" tab on th
     And I click on "User menu" "button" in the ".usermenu" "css_element"
     And I click on "Language" "link" in the ".usermenu" "css_element"
     Then I <shouldornot> see "Set preferred language" in the ".usermenu .carousel-item.submenu" "css_element"
+    Examples:
+      | setting | shouldornot |
+      | yes     | should      |
+      | no      | should not  |
 
+  @javascript
+  Scenario Outline: Check whether a popover menu with starred courses is displayed in the navbar
+    Given the following config values are set as admin:
+      | config                     | value      | plugin            |
+      | shownavbarstarredcourses   | <setting>  | theme_boost_union |
+    When I log in as "admin"
+    And I navigate to "Development > Purge caches" in site administration
+    And I press "Purge all caches"
+    Then I should see "All caches were purged"
+    Then I log in as "student1"
+    And I follow "My courses"
+    And I click on ".coursemenubtn" "css_element" in the "section.block_myoverview.block div[data-region=course-content] .menu" "css_element"
+    And I click on "Star this course" "link" in the "section.block_myoverview.block div[data-region=course-content] .menu" "css_element"
+    When I reload the page
+    Then "nav.navbar #usernavigation .popover-region-favourites" "css_element" <shouldornot> be visible
     Examples:
       | setting | shouldornot |
       | yes     | should      |
       | no      | should not  |
 
+  @javascript
+  Scenario: Check whether the correct courses are displayed in the "Starred courses" popover menu
+    Given the following config values are set as admin:
+      | config                     | value      | plugin            |
+      | shownavbarstarredcourses   | yes        | theme_boost_union |
+    And the following "courses" exist:
+      | fullname | shortname |
+      | Course 2 | C2        |
+      | Course 3 | C3        |
+      | Course 4 | C4        |
+    And the following "course enrolments" exist:
+      | user     | course | role           |
+      | student1 | C2     | student        |
+      | student1 | C3     | student        |
+      | student1 | C4     | student        |
+    When I log in as "admin"
+    And I navigate to "Development > Purge caches" in site administration
+    And I press "Purge all caches"
+    Then I should see "All caches were purged"
+    Then I log in as "student1"
+    And I follow "My courses"
+    And I click on ".coursemenubtn" "css_element" in the "section.block_myoverview.block div[data-region=course-content]:nth-child(1) .menu" "css_element"
+    And I click on "Star this course" "link" in the "section.block_myoverview.block div[data-region=course-content]:nth-child(1) .menu" "css_element"
+    And I click on ".coursemenubtn" "css_element" in the "section.block_myoverview.block div[data-region=course-content]:nth-child(2) .menu" "css_element"
+    And I click on "Star this course" "link" in the "section.block_myoverview.block div[data-region=course-content]:nth-child(2) .menu" "css_element"
+    When I reload the page
+    Then I click on "nav.navbar #usernavigation .popover-region-favourites .nav-link" "css_element"
+    And I should see "Course 1" in the ".popover-region-favourites .popover-region-content-container" "css_element"
+    And I should see "Course 2" in the ".popover-region-favourites .popover-region-content-container" "css_element"
+    And I should not see "Course 3" in the ".popover-region-favourites .popover-region-content-container" "css_element"
+    And I should not see "Course 4" in the ".popover-region-favourites .popover-region-content-container" "css_element"
+
   Scenario Outline: Setting: Course category breadcrumbs
     Given the following "categories" exist:
       | name           | category | idnumber | category |

version.php

@@ -25,7 +25,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $plugin->component = 'theme_boost_union';
-$plugin->version = 2023102025;
+$plugin->version = 2023102026;
 $plugin->release = 'v4.3-r8';
 $plugin->requires = 2023100900;
 $plugin->supported = [403, 403];