Improvement: Allow the admin to change the look of the course overvie…

…w block, solves #204

CHANGES.md

@@ -4,6 +4,10 @@ moodle-theme_boost_union
 Changes
 -------
 
+### Unreleased
+
+* 2023-12-10 - Improvement: Allow the admin to change the look of the course overview block, solves #204
+
 ### v4.3-r3
 
 * 2023-12-05 - Improvement: Option to suppress footer (circle containing the question mark) button, solves #444.

README.md

@@ -185,6 +185,18 @@ With this setting, you can optimize the login form to fit to a greater variety o
 
 With this setting, you can make the login form slightly transparent to let the background image shine through even more.
 
+#### Tab "Dashboard / My courses"
+
+##### Course overview block
+
+###### Show course images
+
+With this setting, you can control whether the course image is visible inside the course overview block or not. It is possible to choose a different setting for Card view, Summary view, and List view. 
+
+###### Show course completion progress
+
+With this setting, you can control whether the course completion progress is visible inside the course overview block or not.
+
 #### Tab "Course"
 
 ##### Course Header
@@ -619,6 +631,7 @@ This theme is a collaboration result of multiple organisations.
 
 Moodle an Hochschulen e.V. would like to thank these main contributors (in alphabetical order of the institutions) for their work:
 
+* Academic Moodle Cooperation (AMC): Ideating, Code
 * Baden-Württemberg Cooperative State University (DHBW), Katja Neubehler: Code
 * bdecent GmbH, Stefan Scholz: Code, Ideating, Funding
 * Bern University of Applied Sciences (BFH), Luca Bösch: Code, Peer Review, Ideating

lang/en/theme_boost_union.php

@@ -194,6 +194,17 @@
 $string['loginformtransparencysetting'] = 'Login form transparency';
 $string['loginformtransparencysetting_desc'] = 'With this setting, you can make the login form slightly transparent to let the background image shine through even more.';
 
+// Settings: Dashboard / My courses tab.
+$string['dashboardtab'] = 'Dashboard / My courses';
+// ... Section: Course overview block.
+$string['courseoverviewheading'] = 'Course overview block';
+// ... ... Setting: Show course images.
+$string['courseoverviewshowcourseimagessetting'] = 'Show course images';
+$string['courseoverviewshowcourseimagessetting_desc'] = 'With this setting, you can control whether the course image is visible inside the course overview block or not. It is possible to choose a different setting for Card view, Summary view, and List view.';
+// ... ... Setting: Show course completion progress.
+$string['courseoverviewshowprogresssetting'] = 'Show course completion progress';
+$string['courseoverviewshowprogresssetting_desc'] = 'With this setting, you can control whether the course completion progress is visible inside the course overview block or not.';
+
 // Settings: Course tab.
 $string['coursetab'] = 'Course';
 // ... Section: Course header.

lib.php

@@ -97,6 +97,10 @@
 define('THEME_BOOST_UNION_SETTING_ENABLEFOOTER_MOBILE', 'enablefooterbuttonmobile');
 define('THEME_BOOST_UNION_SETTING_ENABLEFOOTER_NONE', 'enablefooterbuttonnone');
 
+define('THEME_BOOST_UNION_SETTING_COURSEOVERVIEW_SHOWCOURSEIMAGES_CARD', 'card');
+define('THEME_BOOST_UNION_SETTING_COURSEOVERVIEW_SHOWCOURSEIMAGES_LIST', 'list');
+define('THEME_BOOST_UNION_SETTING_COURSEOVERVIEW_SHOWCOURSEIMAGES_SUMMARY', 'summary');
+
 /**
  * Returns the main SCSS content.
  *
@@ -294,6 +298,9 @@ function theme_boost_union_get_extra_scss($theme) {
     // Setting: Mark external links.
     $content .= theme_boost_union_get_scss_to_mark_external_links($theme);
 
+    // Setting: Course overview block.
+    $content .= theme_boost_union_get_scss_courseoverview_block($theme);
+
     return $content;
 }
 

locallib.php

@@ -1394,3 +1394,60 @@ function theme_boost_union_get_scss_to_mark_external_links($theme) {
     }
     return $scss;
 }
+
+/**
+ * Returns the SCSS code to hide the course image and/or the course progress in the course overview block, depending
+ * on the theme settings courseoverviewshowcourseimages and courseoverviewshowcourseprogress respectively.
+ *
+ * @param theme_config $theme The theme config object.
+ * @return string
+ */
+function theme_boost_union_get_scss_courseoverview_block($theme) {
+    // Initialize SCSS snippet.
+    $scss = '';
+
+    // Selector for the course overview block.
+    $blockselector = '.block_myoverview.block div[data-region="courses-view"]';
+
+    // Get the course image setting, defaults to true if the setting does not exist.
+    if (!isset($theme->settings->courseoverviewshowcourseimages)) {
+        $showcourseimagescard = true;
+        $showcourseimageslist = true;
+        $showimagessummary = true;
+    } else {
+        $showcourseimages = explode(',', $theme->settings->courseoverviewshowcourseimages);
+        $showcourseimagescard = in_array(THEME_BOOST_UNION_SETTING_COURSEOVERVIEW_SHOWCOURSEIMAGES_CARD, $showcourseimages);
+        $showcourseimageslist = in_array(THEME_BOOST_UNION_SETTING_COURSEOVERVIEW_SHOWCOURSEIMAGES_LIST, $showcourseimages);
+        $showimagessummary = in_array(THEME_BOOST_UNION_SETTING_COURSEOVERVIEW_SHOWCOURSEIMAGES_SUMMARY, $showcourseimages);
+    }
+
+    // If the corresponding settings are set to false.
+    if (!$showimagessummary) {
+        $listitemselector = $blockselector.' .course-summaryitem > .row ';
+        $scss .= $listitemselector.'> .col-md-2 { display: none !important; }'.PHP_EOL;
+        $scss .= $listitemselector.'> .col-md-9 { @extend .col-md-11; }'.PHP_EOL;
+    }
+    if (!$showcourseimageslist) {
+        $listitemselector = $blockselector.' .course-listitem:not(.course-summaryitem) > .row ';
+        $scss .= $listitemselector.'> .col-md-2 { display: none !important; }'.PHP_EOL;
+        $scss .= $listitemselector.'> .col-md-9 { @extend .col-md-11; }'.PHP_EOL;
+    }
+    if (!$showcourseimagescard) {
+        $scss .= $blockselector.' .dashboard-card-img { display: none !important; }'.PHP_EOL;
+    }
+
+    // Get the course progress setting, defaults to true if the setting does not exist.
+    if (!isset($theme->settings->courseoverviewshowcourseprogress) ||
+            $theme->settings->courseoverviewshowcourseprogress == THEME_BOOST_UNION_SETTING_SELECT_YES) {
+        $showcourseprogress = true;
+    } else {
+        $showcourseprogress = false;
+    }
+
+    // If the corresponding setting is set to false.
+    if (!$showcourseprogress) {
+        $scss .= $blockselector.' .progress-text { display: none !important; }'.PHP_EOL;
+    }
+
+    return $scss;
+}

settings.php

@@ -636,6 +636,43 @@
         $page->add($tab);
 
 
+        // Create Dashboard / My courses tab.
+        $tab = new admin_settingpage('theme_boost_union_look_dashboard',
+                get_string('dashboardtab', 'theme_boost_union', null, true));
+
+        // Create Course overview block heading.
+        $name = 'theme_boost_union/courseoverviewheading';
+        $title = get_string('courseoverviewheading', 'theme_boost_union', null, true);
+        $setting = new admin_setting_heading($name, $title, null);
+        $tab->add($setting);
+
+        // Prepare show course images options.
+        $showcourseimagesoptions = [
+                THEME_BOOST_UNION_SETTING_COURSEOVERVIEW_SHOWCOURSEIMAGES_CARD => get_string('card', 'block_myoverview'),
+                THEME_BOOST_UNION_SETTING_COURSEOVERVIEW_SHOWCOURSEIMAGES_LIST => get_string('list', 'block_myoverview'),
+                THEME_BOOST_UNION_SETTING_COURSEOVERVIEW_SHOWCOURSEIMAGES_SUMMARY => get_string('summary', 'block_myoverview'),
+        ];
+        // Setting: Show course images.
+        $name = 'theme_boost_union/courseoverviewshowcourseimages';
+        $title = get_string('courseoverviewshowcourseimagessetting', 'theme_boost_union', null, true);
+        $description = get_string('courseoverviewshowcourseimagessetting_desc', 'theme_boost_union', null, true);
+        $setting = new admin_setting_configmulticheckbox($name, $title, $description, $showcourseimagesoptions,
+                $showcourseimagesoptions);
+        $setting->set_updatedcallback('theme_reset_all_caches');
+        $tab->add($setting);
+
+        // Setting: Show course progress.
+        $name = 'theme_boost_union/courseoverviewshowcourseprogress';
+        $title = get_string('courseoverviewshowprogresssetting', 'theme_boost_union', null, true);
+        $description = get_string('courseoverviewshowprogresssetting_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);
+
+        // Add tab to settings page.
+        $page->add($tab);
+
+
         // Create course tab.
         $tab = new admin_settingpage('theme_boost_union_look_course',
                 get_string('coursetab', 'theme_boost_union', null, true));

tests/behat/theme_boost_union_looksettings_dashboardmycourses.feature

@@ -0,0 +1,71 @@
+@theme @theme_boost_union @theme_boost_union_looksettings @theme_boost_union_looksettings_dashboardmycourses
+Feature: Configuring the theme_boost_union plugin for the "Dashboard/My courses" tab on the "Look" page
+  In order to use the features
+  As admin
+  I need to be able to configure the theme Boost Union plugin
+
+  Background:
+    Given the following "users" exist:
+      | username |
+      | student1 |
+    And the following "courses" exist:
+      | fullname | shortname | enablecompletion | showcompletionconditions |
+      | Course 1 | C1        | 1                | 1                        |
+      | Course 2 | C2        | 1                | 1                        |
+    And the following "activities" exist:
+      | activity | name              | course | completion |
+      | assign   | Activity sample 1 | C1     | 1          |
+    And the following "course enrolments" exist:
+      | user     | course | role    |
+      | student1 | C1     | student |
+      | student1 | C2     | student |
+
+  @javascript
+  Scenario Outline: Setting: Show course images - Display the course completion progress in the myoverview block or not
+    Given the following config values are set as admin:
+      | config                           | value          | plugin            |
+      | courseoverviewshowcourseprogress | <settingvalue> | 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"
+    And I log out
+    And I log in as "student1"
+    And I follow "My courses"
+    Then I <shouldornot> see "0% complete" in the ".block_myoverview.block div[data-region=courses-view]" "css_element"
+    Examples:
+      | settingvalue | shouldornot |
+      | yes          | should      |
+      | no           | should not  |
+
+  @javascript
+  Scenario Outline: Setting: Show course images - Display the course image in the myoverview block or not
+    Given the following config values are set as admin:
+      | config                         | value          | plugin            |
+      | courseoverviewshowcourseimages | <settingvalue> | 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"
+    And I log out
+    And I log in as "student1"
+    And I follow "My courses"
+    Then I should see "Course overview" in the "#region-main" "css_element"
+    And I click on "#displaydropdown" "css_element" in the "section.block_myoverview" "css_element"
+    And I click on "[data-value=card]" "css_element" in the ".dropdown-menu.show" "css_element"
+    And ".block_myoverview.block div[data-region=courses-view] .dashboard-card-img" "css_element" <shouldornotcard> be visible
+    And I click on "#displaydropdown" "css_element" in the "section.block_myoverview" "css_element"
+    And I click on "[data-value=list]" "css_element" in the ".dropdown-menu.show" "css_element"
+    And ".block_myoverview.block div[data-region=courses-view] .course-listitem:not(.course-summaryitem) > .row > .col-md-2" "css_element" <shouldornotlist> be visible
+    And I click on "#displaydropdown" "css_element" in the "section.block_myoverview" "css_element"
+    And I click on "[data-value=summary]" "css_element" in the ".dropdown-menu.show" "css_element"
+    And ".block_myoverview.block div[data-region=courses-view] .course-summaryitem > .row > .col-md-2" "css_element" <shouldornotsummary> be visible
+
+    Examples:
+      | settingvalue      | shouldornotcard | shouldornotlist | shouldornotsummary |
+      | card,list,summary | should          | should          | should             |
+      | card,list         | should          | should          | should not         |
+      | card,summary      | should          | should not      | should             |
+      | list,summary      | should not      | should          | should             |
+      | card              | should          | should not      | should not         |
+      | list              | should not      | should          | should not         |
+      | summary           | should not      | should not      | should             |
+      |                   | should not      | should not      | should not         |

version.php

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