MDL-73232 core_courseformat: Inform user when max number of sections …

…reached * Disable the Add new Section button when max has been reached * It also grays out the (+) button between sections and display a tooltip
laurentdavid · Jun 18, 2024 · 286cc42 · 286cc42
1 parent 2bf886f
commit 286cc42
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 14 deletions.
diff --git a/course/format/amd/build/local/content/actions.min.js b/course/format/amd/build/local/content/actions.min.js
diff --git a/course/format/amd/build/local/content/actions.min.js.map b/course/format/amd/build/local/content/actions.min.js.map
diff --git a/course/format/amd/src/local/content/actions.js b/course/format/amd/src/local/content/actions.js
@@ -82,11 +82,16 @@ export default class extends BaseComponent {
             ACTIONMENUTOGGLER: `[data-toggle="dropdown"]`,
             // Availability modal selectors.
             OPTIONSRADIO: `[type='radio']`,
+            COURSE_ADDSECTION: `#course-addsection`,
+            NOMORESECTION: `.add-no-more-sections`,
         };
         // Component css classes.
         this.classes = {
             DISABLED: `text-body`,
             ITALIC: `font-italic`,
+            DISPLAYNONE: `d-none`,
+            DISPLAYFLEX: `d-flex`,
+            ADDCONTENTDISABLED: `add-content-disabled`
         };
     }
 
@@ -681,9 +686,29 @@ export default class extends BaseComponent {
         const targets = this.getElements(this.selectors.ADDSECTION);
         targets.forEach(element => {
             element.classList.toggle(this.classes.DISABLED, locked);
+            element.classList.toggle(this.classes.ADDCONTENTDISABLED, locked);
             element.classList.toggle(this.classes.ITALIC, locked);
             this.setElementLocked(element, locked);
+            // We tweak the element to show a tooltip.
+            if (locked) {
+                element.setAttribute('data-toggle', 'tooltip');
+                element.setAttribute('data-placement', 'left');
+                getString('sectionaddmax', 'core_courseformat').then((text) => element.setAttribute('title', text));
+                element.style.pointerEvents = null;
+                element.style.userSelect = null;
+            } else {
+                element.removeAttribute('data-toggle');
+                element.removeAttribute('title');
+                element.removeAttribute('data-original-title');
+            }
         });
+        const courseAddSection = this.getElement(this.selectors.COURSE_ADDSECTION);
+        const addSection = courseAddSection.querySelector(this.selectors.ADDSECTION);
+        addSection.classList.toggle(this.classes.DISPLAYNONE, locked);
+        addSection.classList.toggle(this.classes.DISPLAYFLEX, !locked);
+        const noMoreSections = courseAddSection.querySelector(this.selectors.NOMORESECTION);
+        noMoreSections.classList.toggle(this.classes.DISPLAYNONE, !locked);
+        noMoreSections.classList.toggle(this.classes.DISPLAYFLEX, locked);
     }
 
     /**

diff --git a/course/format/templates/local/content/addsection.mustache b/course/format/templates/local/content/addsection.mustache
@@ -51,18 +51,29 @@
     </a>
     {{/decrease}}
     {{#addsections}}
-
-    <a href="{{{url}}}"
-        class="btn add-section d-flex justify-content-center align-items-center p-3"
-        data-add-sections="{{title}}"
-        data-new-sections="{{newsection}}"
-        data-action="addSection"
-        {{#insertafter}} data-id="{{id}}" {{/insertafter}}
-    >
-        {{#pix}} t/add, core {{/pix}}
-        {{title}}
-    </a>
-
+        <a href="{{{url}}}"
+           class="d-none btn add-section justify-content-center align-items-center p-3"
+           data-add-sections="{{title}}"
+           data-new-sections="{{newsection}}"
+           data-action="addSection"
+            {{#insertafter}} data-id="{{id}}" {{/insertafter}}
+        >
+            {{#pix}} t/add, core {{/pix}}
+            {{title}}
+        </a>
+        <div class="d-none add-no-more-sections justify-content-center align-items-center p-3 flex-column">
+            <div>
+                {{#pix}}t/block, moodle{{/pix}}
+            </div>
+            <span class="font-italic">
+                {{#str}}maxsectionaddmessage, core_courseformat{{/str}}
+            </span>
+        </div>
     {{/addsections}}
 </div>
 {{/showaddsection}}
+{{^showaddsection}}
+<div id="course-addsection" class="changenumsections bulk-hidden mt-5">
+    <span>No more section</span>
+</div>
+{{/showaddsection}}
diff --git a/lang/en/courseformat.php b/lang/en/courseformat.php
@@ -65,6 +65,7 @@
 $string['courseindexoptions'] = 'Course index options';
 $string['nobulkaction'] = 'No bulk actions available';
 $string['preference:coursesectionspreferences'] = 'Section user preferences for course {$a}';
+$string['maxsectionaddmessage'] = 'You have reached the maximum number of sections allowed for a course.';
 $string['privacy:metadata:preference:coursesectionspreferences'] = 'Section user preferences like collapsed and expanded.';
 $string['section_hide_feedback'] = 'Course section {$a->name} hidden.';
 $string['section_hide_feedback_batch'] = 'Selected {$a->count} course sections hidden.';
@@ -73,6 +74,7 @@
 $string['section_delete_feedback'] = 'Course section {$a->name} deleted.';
 $string['section_delete_feedback_batch'] = 'Selected {$a->count} course sections deleted.';
 $string['sectionavailability_title'] = 'Section availability';
+$string['sectionaddmax'] = 'You have reached the maximum number of sections allowed for a course...';
 $string['sectiondelete_info'] = 'This will delete {$a->name} and all the activities it contains.';
 $string['sectiondelete_title'] = 'Delete section?';
 $string['sectionsavailability'] = 'Sections availability';

diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
@@ -1243,6 +1243,12 @@ $divider-hover-color: $primary !default;
         color: $primary;
     }
 }
+.add-no-more-sections {
+    border-top: $divider-width dashed $border-color;
+    font-size: $font-size-sm;
+    font-weight: normal;
+    color: $dark;
+}
 
 /* Single section page specific styles */
 
@@ -1615,6 +1621,17 @@ $divider-hover-color: $primary !default;
     }
 }
 
+.btn.add-content-disabled {
+    @include border-radius($rounded-pill);
+    color: theme-color-level("secondary", $alert-color-level);
+    background-color: theme-color-level("secondary", $alert-bg-level);
+    &:hover,
+    &:focus {
+        color: color-yiq($secondary);
+        background-color: $secondary;
+    }
+}
+
 /* Bulk editing */
 
 .bulkenabled {

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -29057,6 +29057,13 @@ span.editinstructions .alert-link {
   color: #0f6cbf;
 }
 
+.add-no-more-sections {
+  border-top: 2px dashed #dee2e6;
+  font-size: 0.8203125rem;
+  font-weight: normal;
+  color: #343a40;
+}
+
 /* Single section page specific styles */
 .single-section > ul > .course-section.hidden .section-item {
   background-color: inherit;
@@ -29776,6 +29783,16 @@ span.editinstructions .alert-link {
   font-size: 14px;
 }
 
+.btn.add-content-disabled {
+  border-radius: 50rem;
+  color: #6b6e71;
+  background-color: #f5f6f8;
+}
+.btn.add-content-disabled:hover, .btn.add-content-disabled:focus {
+  color: #1d2125;
+  background-color: #ced4da;
+}
+
 /* Bulk editing */
 .bulkenabled .bulk-hidden {
   display: none !important;

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
@@ -29057,6 +29057,13 @@ span.editinstructions .alert-link {
   color: #0f6cbf;
 }
 
+.add-no-more-sections {
+  border-top: 2px dashed #dee2e6;
+  font-size: 0.8203125rem;
+  font-weight: normal;
+  color: #343a40;
+}
+
 /* Single section page specific styles */
 .single-section > ul > .course-section.hidden .section-item {
   background-color: inherit;
@@ -29776,6 +29783,16 @@ span.editinstructions .alert-link {
   font-size: 14px;
 }
 
+.btn.add-content-disabled {
+  border-radius: 50rem;
+  color: #6b6e71;
+  background-color: #f5f6f8;
+}
+.btn.add-content-disabled:hover, .btn.add-content-disabled:focus {
+  color: #1d2125;
+  background-color: #ced4da;
+}
+
 /* Bulk editing */
 .bulkenabled .bulk-hidden {
   display: none !important;