From f2e28c0561bb9a74ff0298207d1e195c19bd7e2c Mon Sep 17 00:00:00 2001
From: Ilya Tregubov <ilya@moodle.com>
Date: Mon, 28 Jun 2021 14:35:58 +0200
Subject: [PATCH] MDL-71037 course: Make sections collapsible for Topics/Weeks
 format.

---
 .../classes/output/local/content/section.php  |  12 ++
 .../output/local/content/section/header.php   |   6 +-
 .../templates/local/content/section.mustache  |  15 +-
 .../local/content/section/header.mustache     |  58 +++++-
 .../behat/course_collapse_sections.feature    | 192 ++++++++++++++++++
 5 files changed, 268 insertions(+), 15 deletions(-)
 create mode 100644 course/tests/behat/course_collapse_sections.feature

diff --git a/course/format/classes/output/local/content/section.php b/course/format/classes/output/local/content/section.php
index 1545d217f17..6d3940bee28 100644
--- a/course/format/classes/output/local/content/section.php
+++ b/course/format/classes/output/local/content/section.php
@@ -152,6 +152,18 @@ class section implements renderable, templatable {
             }
         }
 
+        $coursedisplay = $course->coursedisplay ?? COURSE_DISPLAY_SINGLEPAGE;
+        if ($coursedisplay == COURSE_DISPLAY_MULTIPAGE) {
+            $data->iscoursedisplaymultipage = true;
+        }
+
+        if ($course->id == SITEID) {
+            $data->sitehome = true;
+        }
+
+        // For now sections are always expanded. User preferences will be done in MDL-71211.
+        $data->isactive = true;
+
         if ($thissection->section == 0) {
             // Section zero is always visible only as a cmlist.
             $cmlist = new $this->cmlistclass($format, $thissection);
diff --git a/course/format/classes/output/local/content/section/header.php b/course/format/classes/output/local/content/section/header.php
index 595632e9fa5..f6400763c99 100644
--- a/course/format/classes/output/local/content/section/header.php
+++ b/course/format/classes/output/local/content/section/header.php
@@ -91,10 +91,14 @@ class header implements renderable, templatable {
 
         $coursedisplay = $course->coursedisplay ?? COURSE_DISPLAY_SINGLEPAGE;
 
+        if ($course->id == SITEID) {
+            $data->sitehome = true;
+        }
+
         if (!$format->show_editor() && $coursedisplay == COURSE_DISPLAY_MULTIPAGE && empty($data->issinglesection)) {
             $data->url = course_get_url($course, $section->section);
-            $data->name = get_section_name($course, $section);
         }
+        $data->name = get_section_name($course, $section);
 
         return $data;
     }
diff --git a/course/format/templates/local/content/section.mustache b/course/format/templates/local/content/section.mustache
index 0e51f352d99..e0d7459b5f7 100644
--- a/course/format/templates/local/content/section.mustache
+++ b/course/format/templates/local/content/section.mustache
@@ -70,15 +70,17 @@
             "menu": "<a href=\"#\" class=\"d-inline-block dropdown-toggle icon-no-margin\">Edit<b class=\"caret\"></b></a>",
             "hasmenu": true
         },
-        "cmcontrols": "[Add an activity or resource]"
+        "cmcontrols": "[Add an activity or resource]",
+        "iscoursedisplaymultipage": true,
+        "sectionreturnid": 0,
+        "isactive": true,
+        "sitehome": false
     }
 }}
 <li id="section-{{num}}"
     class="section main {{#onlysummary}} section-summary {{/onlysummary}} clearfix
             {{#ishidden}} hidden {{/ishidden}} {{#iscurrent}} current {{/iscurrent}}
             {{#isstealth}} orphaned {{/isstealth}}"
-    role="region"
-    aria-labelledby="sectionid-{{id}}-title"
     data-sectionid="{{num}}"
     data-sectionreturnid="{{sectionreturnid}}"
     data-for="section"
@@ -92,8 +94,11 @@
             {{> core_courseformat/local/content/section/controlmenu }}
     {{/controlmenu}}
     </div>
-    <div class="content">
-        {{#header}} {{> core_courseformat/local/content/section/header }} {{/header}}
+    {{#header}} {{> core_courseformat/local/content/section/header }} {{/header}}
+    <div id="coursecontentcollapse{{num}}"
+         class="content {{^iscoursedisplaymultipage}}
+             {{^sitehome}}course-content-item-content collapse {{#isactive}}show{{/isactive}}{{/sitehome}}
+         {{/iscoursedisplaymultipage}}">
         {{#availability}}
             {{> core_courseformat/local/content/section/availability }}
         {{/availability}}
diff --git a/course/format/templates/local/content/section/header.mustache b/course/format/templates/local/content/section/header.mustache
index 7359a29e872..357a82bedd6 100644
--- a/course/format/templates/local/content/section/header.mustache
+++ b/course/format/templates/local/content/section/header.mustache
@@ -21,17 +21,57 @@
 
     Example context (json):
     {
+        "id": 123,
         "name": "Section title",
+        "title": "<a href=\"http://moodle/course/view.php?id=5#section-0\">Section title</a>",
         "url": "#",
-        "ishidden": true
+        "iscoursedisplaymultipage": true
     }
 }}
 
-<h3 class="sectionid-{{id}}-title sectionname" data-for="section_title">
-    {{#url}}
-    <a href="{{{url}}}" class="{{#ishidden}} dimmed_text {{/ishidden}}">{{name}}</a>
-    {{/url}}
-    {{^url}}
-    <span>{{{title}}}</span>
-    {{/url}}
-</h3>
+{{#iscoursedisplaymultipage}}
+    <h3 class="sectionid-{{id}}-title sectionname"
+        data-for="section_title" data-id="{{id}}" data-number="{{num}}">
+        {{#url}}
+            <a href="{{{url}}}" class="{{#ishidden}} dimmed_text {{/ishidden}}">{{name}}</a>
+        {{/url}}
+        {{^url}}
+            <span>{{{title}}}</span>
+        {{/url}}
+    </h3>
+{{/iscoursedisplaymultipage}}
+{{^iscoursedisplaymultipage}}
+    {{#sitehome}}
+        <h2 class="sectionid-{{id}}-title sectionname"
+            data-for="section_title" data-id="{{id}}" data-number="{{num}}">
+            {{#url}}
+                <a href="{{{url}}}" class="{{#ishidden}} dimmed_text {{/ishidden}}">{{name}}</a>
+            {{/url}}
+            {{^url}}
+                <span>{{{title}}}</span>
+            {{/url}}
+        </h2>
+    {{/sitehome}}
+    {{^sitehome}}
+        <div class="d-flex">
+            <a role="button" data-toggle="collapse"
+               href="#coursecontentcollapse{{num}}"
+               id="collapssesection{{num}}"
+               aria-expanded="{{#isactive}}true{{/isactive}}{{^isactive}}false{{/isactive}}"
+               aria-controls="coursecontentcollapse{{num}}"
+               class="btn btn-icon mr-1 icons-collapse-expand {{^isactive}}collapsed{{/isactive}}"
+               aria-label="{{name}}">
+            <span class="expanded-icon icon-no-margin p-2" data-toggle="tooltip" title="{{#str}} collapse, core {{/str}}">
+                {{#pix}} t/expandedchevron, core {{/pix}}
+            </span>
+                <span class="collapsed-icon icon-no-margin p-2" data-toggle="tooltip" title="{{#str}} expand, core {{/str}}">
+                    {{#pix}} t/collapsedchevron, core {{/pix}}
+                </span>
+            </a>
+            <h3 class="sectionid-{{id}}-title sectionname course-content-item {{^visible}}dimmed{{/visible}}"
+                id="coursecontentsection{{num}}" data-for="section_title" data-id="{{id}}" data-number="{{num}}">
+                {{{title}}}
+            </h3>
+        </div>
+    {{/sitehome}}
+{{/iscoursedisplaymultipage}}
diff --git a/course/tests/behat/course_collapse_sections.feature b/course/tests/behat/course_collapse_sections.feature
new file mode 100644
index 00000000000..b4955aa5aab
--- /dev/null
+++ b/course/tests/behat/course_collapse_sections.feature
@@ -0,0 +1,192 @@
+@core @core_course
+Feature: Collapse course sections
+  In order to quickly access the course structure
+  As a user
+  I need to collapse/extend sections for Topics/Weeks formats.
+
+  Background:
+    Given the following "users" exist:
+      | username | firstname | lastname | email                |
+      | teacher1 | Teacher   | 1        | teacher1@example.com |
+      | student1 | Student   | 1        | student1@example.com |
+    And the following "course" exists:
+      | fullname         | Course 1  |
+      | shortname        | C1        |
+      | category         | 0         |
+      | enablecompletion | 1         |
+      | numsections      | 5         |
+      | startdate        | 957139200 |
+      | enablecompletion | 1         |
+    And the following "activities" exist:
+      | activity | name         | intro                        | course | idnumber | section | completion |
+      | assign   | Assignment 1 | Test assignment description1 | C1     | assign1  | 1       | 1          |
+      | assign   | Assignment 2 | Test assignment description2 | C1     | assign2  | 2       | 1          |
+      | book     | Book 2       | Test book description2       | C1     | book2    | 2       | 1          |
+      | book     | Book 3       | Test book description3       | C1     | book3    | 3       | 1          |
+      | forum    | Forum 4      | Test forum description4      | C1     | forum4   | 4       | 1          |
+      | forum    | Forum 5      | Test forum description5      | C1     | forum5   | 5       | 1          |
+    And the following "course enrolments" exist:
+      | user     | course | role           |
+      | student1 | C1     | student        |
+      | teacher1 | C1     | editingteacher |
+    And I log in as "admin"
+    And I am on "Course 1" course homepage with editing mode on
+    When I edit the section "4"
+    And I expand all fieldsets
+    And I press "Add restriction..."
+    And I click on "Date" "button" in the "Add restriction..." "dialogue"
+    And I set the field "direction" to "until"
+    And I set the field "x[year]" to "2013"
+    And I press "Save changes"
+    And I hide section "5"
+    And I log out
+
+  @javascript
+  Scenario: No chevron on site home
+    Given I log in as "admin"
+    And I am on site homepage
+    And I turn editing mode on
+    And I add a "Forum" to section "1" and I fill the form with:
+      | Forum name  | Test forum post backup name        |
+      | Description | Test forum post backup description |
+    And I click on "Edit summary" "link" in the "region-main" "region"
+    And I click on "Custom" "checkbox"
+    And I set the field "New value for Section name" to "New section name"
+    When I press "Save changes"
+    Then "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
+
+  @javascript
+  Scenario: Expand/collapse sections for Topics format.
+    Given I log in as "student1"
+    And I am on "Course 1" course homepage
+    And "[data-toggle=collapse]" "css_element" should exist in the "region-main" "region"
+    And I should see "Assignment 1" in the "region-main" "region"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And I should see "Book 2" in the "region-main" "region"
+    And I should see "Book 3" in the "region-main" "region"
+    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should not see "Forum 4"
+    And I should see "Not available" in the "#section-5 .availabilityinfo" "css_element"
+    And I should not see "Forum 5"
+    When I click on "#collapssesection3" "css_element"
+    And I should see "Assignment 1" in the "region-main" "region"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And I should see "Book 2" in the "region-main" "region"
+    And I should not see "Book 3" in the "region-main" "region"
+    And I click on "#collapssesection1" "css_element"
+    And I click on "#collapssesection2" "css_element"
+    And I click on "#collapssesection4" "css_element"
+    And I click on "#collapssesection5" "css_element"
+    Then I should not see "Assignment 1" in the "region-main" "region"
+    And I should not see "Assignment 2" in the "region-main" "region"
+    And I should not see "Book 2" in the "region-main" "region"
+    And I should not see "Book 3" in the "region-main" "region"
+    And I should not see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should not see "Not available" in the "#section-5 .availabilityinfo" "css_element"
+    And I click on "#collapssesection1" "css_element"
+    And I click on "#collapssesection2" "css_element"
+    And I click on "#collapssesection3" "css_element"
+    And I click on "#collapssesection4" "css_element"
+    And I click on "#collapssesection5" "css_element"
+    And I should see "Assignment 1" in the "region-main" "region"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And I should see "Book 2" in the "region-main" "region"
+    And I should see "Book 3" in the "region-main" "region"
+    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Not available" in the "#section-5 .availabilityinfo" "css_element"
+
+  @javascript
+  Scenario: Expand/collapse sections for Weeks format.
+    Given I log in as "teacher1"
+    And I am on "Course 1" course homepage
+    When I navigate to "Settings" in current page administration
+    And I expand all fieldsets
+    And I set the following fields to these values:
+      | Format      | Weekly format     |
+    And I press "Save and display"
+    And I should see "Assignment 1" in the "region-main" "region"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And I should see "Book 2" in the "region-main" "region"
+    And I should see "Book 3" in the "region-main" "region"
+    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Forum 4"
+    And I should see "Hidden from students" in the "#section-5 .availabilityinfo" "css_element"
+    And I should see "Forum 5"
+    When I click on "#collapssesection3" "css_element"
+    And I should see "Assignment 1" in the "region-main" "region"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And I should see "Book 2" in the "region-main" "region"
+    And I should not see "Book 3" in the "region-main" "region"
+    And I click on "#collapssesection1" "css_element"
+    And I click on "#collapssesection2" "css_element"
+    And I click on "#collapssesection4" "css_element"
+    And I click on "#collapssesection5" "css_element"
+    Then I should not see "Assignment 1" in the "region-main" "region"
+    And I should not see "Assignment 2" in the "region-main" "region"
+    And I should not see "Book 2" in the "region-main" "region"
+    And I should not see "Book 3" in the "region-main" "region"
+    And I should not see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should not see "Not available" in the "#section-5 .availabilityinfo" "css_element"
+    And I click on "#collapssesection1" "css_element"
+    And I click on "#collapssesection2" "css_element"
+    And I click on "#collapssesection3" "css_element"
+    And I click on "#collapssesection4" "css_element"
+    And I click on "#collapssesection5" "css_element"
+    And I should see "Assignment 1" in the "region-main" "region"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And I should see "Book 2" in the "region-main" "region"
+    And I should see "Book 3" in the "region-main" "region"
+    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Forum 4"
+    And I should see "Hidden from students" in the "#section-5 .availabilityinfo" "css_element"
+    And I should see "Forum 5"
+
+  @javascript
+  Scenario: Users don't see chevron on one section per page for Topics format
+    Given I log in as "teacher1"
+    And I am on "Course 1" course homepage
+    When I navigate to "Settings" in current page administration
+    And I expand all fieldsets
+    And I set the following fields to these values:
+      | Course layout | Show one section per page |
+    And I press "Save and display"
+    And "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
+    And I follow "Topic 2"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
+    Then "Topic 1" "section" should not exist
+    And "Topic 3" "section" should not exist
+    And I am on "Course 1" course homepage with editing mode on
+    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Forum 4"
+    And I should see "Hidden from students" in the "#section-5 .availabilityinfo" "css_element"
+    And I should see "Forum 5"
+
+  @javascript
+  Scenario: Users don't see chevron on one section per page for Weeks format
+    Given I log in as "teacher1"
+    And I am on "Course 1" course homepage
+    When I navigate to "Settings" in current page administration
+    And I expand all fieldsets
+    And I set the following fields to these values:
+      | Format      | Weekly format     |
+      | Course layout | Show one section per page |
+    And I press "Save and display"
+    And "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
+    And I follow "8 May - 14 May"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
+    Then "1 May - 7 May" "section" should not exist
+    And "15 May - 21 May" "section" should not exist
+    And I log out
+    And I log in as "student1"
+    And I am on "Course 1" course homepage
+    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should not see "Forum 4"
+    And I should see "Not available" in the "#section-5 .availabilityinfo" "css_element"
+    And I should not see "Forum 5"