MDL-78528 course: Display all forms in default activity completion page

This commit displays all the module forms together in the default activity completion page: - The checkboxes have been removed. Now the activity names are displayed as accordions. - Module names have been changed from plural to singular. - The activity completion form is displayed below each module name, when the chevron icon is expanded. The cancel button is not displayed. - The CSS has been updated to meet the prototype styling.
sarjona · Jul 4, 2023 · be418e0 · be418e0
1 parent 5158e8d
commit be418e0
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 90 deletions.
diff --git a/completion/classes/manager.php b/completion/classes/manager.php
@@ -205,9 +205,10 @@ protected function get_completion_active_rule_descriptions($moduledata) {
     /**
      * Gets the course modules for the current course.
      *
+     * @param bool $includeform Whether to form HTML should be returned.
      * @return stdClass $data containing the modules
      */
-    public function get_activities_and_resources() {
+    public function get_activities_and_resources(bool $includeform = false) {
         global $DB, $OUTPUT, $CFG;
         require_once($CFG->dirroot.'/course/lib.php');
 
@@ -224,12 +225,24 @@ public function get_activities_and_resources() {
         $course = get_course($this->courseid);
         foreach ($data->modules as $module) {
             $module->icon = $OUTPUT->image_url('monologo', $module->name)->out();
-            $module->formattedname = format_string(get_string('modulenameplural', 'mod_' . $module->name),
+            $module->formattedname = format_string(get_string('modulename', 'mod_' . $module->name),
                 true, ['context' => $coursecontext]);
             $module->canmanage = $canmanage && course_allowed_module($course, $module->name);
             $defaults = self::get_default_completion($course, $module, false);
             $defaults->modname = $module->name;
             $module->completionstatus = $this->get_completion_detail($defaults);
+            if ($module->canmanage && $includeform) {
+                // If the user can manage this module, then the activity completion form needs to be returned too, without the
+                // cancel button (so only "Save changes" button is displayed).
+                $form = new \core_completion_defaultedit_form(null, [
+                    'course' => $course,
+                    'modules' => [
+                        $module->id => $module,
+                    ],
+                    'displaycancel' => false,
+                ]);
+                $module->formhtml = $form->render();
+            }
         }
 
         return $data;

diff --git a/course/defaultcompletion.php b/course/defaultcompletion.php
@@ -28,6 +28,7 @@
 require_once($CFG->libdir.'/completionlib.php');
 
 $id = required_param('id', PARAM_INT);       // Course id.
+$modids = optional_param_array('modids', [], PARAM_INT);
 
 // Perform some basic access control checks.
 if ($id) {
@@ -56,9 +57,22 @@
 $PAGE->set_heading($course->fullname);
 $PAGE->set_pagelayout('admin');
 
-// Get all that stuff I need for the renderer.
+// Get list of modules that have been sent in the form.
 $manager = new \core_completion\manager($id);
-$activityresourcedata = $manager->get_activities_and_resources();
+$allmodules = $manager->get_activities_and_resources(true);
+$modules = [];
+foreach ($allmodules->modules as $module) {
+    if ($module->canmanage && in_array($module->id, $modids)) {
+        $modules[$module->id] = $module;
+    }
+}
+
+if (!empty($modules)) {
+    $form = new core_completion_defaultedit_form(null, ['course' => $course, 'modules' => $modules]);
+    if (!$form->is_cancelled() && $data = $form->get_data()) {
+        $manager->apply_default_completion($data, $form->has_custom_completion_rules());
+    }
+}
 
 $renderer = $PAGE->get_renderer('core_course', 'bulk_activity_completion');
 
@@ -70,8 +84,6 @@
 
 echo $OUTPUT->heading(get_string('defaultcompletion', 'completion'));
 
-$PAGE->requires->js_call_amd('core_form/changechecker', 'watchFormById', ['theform']);
-
-echo $renderer->defaultcompletion($activityresourcedata);
+echo $renderer->defaultcompletion($allmodules);
 
 echo $OUTPUT->footer();
diff --git a/course/templates/defaultactivitycompletion.mustache b/course/templates/defaultactivitycompletion.mustache
@@ -36,95 +36,47 @@
     }
 }}
 <div class="container-fluid">
-    <div class="row mb-2">
-        <div class="col">{{#str}}bulkactivitydetail, core_completion{{/str}}</div>
+    <div class="row mb-5">
+        <div class="col">{{#str}}defaultactivitycompletion, core_completion{{/str}}</div>
     </div>
-<form method="post" action="editdefaultcompletion.php" class="mform" id="theform">
-    <div class="row mb-2">
-        <div class="col">
-            <input type="submit" value="{{#str}}edit{{/str}}" class="btn btn-primary" name="submitbutton" aria-label="{{#str}}updateactivities, completion{{/str}}" disabled/>
-        </div>
-    </div>
-    <div class="row mb-1">
-        <div class="col-6">
-            <input type="checkbox" class="mastercheck mr-1" aria-label="{{#str}}checkall, completion{{/str}}">
-            <label class="font-weight-bold">{{#str}}activitieslabel, core_completion{{/str}}</label>
-        </div>
-        <div class="col-6">
-            <label class="font-weight-bold">{{#str}}completion, core_completion{{/str}}</label>
-            <span>{{{helpicon}}}</span>
-        </div>
-    </div>
-    <hr class="row">
+
     <div class="modules">
         {{#modules}}
             {{#canmanage}}
-             <div class="mb-1">
-                <div class="row mb-1">
-                    <div class="col-6">
-                        <label class="accesshide" for="modtype_{{id}}">{{#str}}select, core_completion{{/str}} {{formattedname}}</label>
-                        <input id="modtype_{{id}}" type="checkbox" class="mr-1" name="modids[]" value="{{id}}" aria-label="{{#str}}checkactivity, completion, {{{formattedname}}}{{/str}}">
-                        <img class="iconlarge activityicon" src="{{icon}}" alt=" " role="presentation" />
-                        <span>{{{formattedname}}}</span>
-                    </div>
-                    <div class="activity-completionstatus col-6">
-                        <div class="col-sm-1 pl-0">
-                            {{#completionstatus.icon}}
-                                {{{completionstatus.icon}}}
-                            {{/completionstatus.icon}}
-                            {{^completionstatus.icon}}
-                                <span class="mr-3"></span>
-                            {{/completionstatus.icon}}
-                        </div>
-                        <div class="col-sm-11 pl-0">
-                            <span class="text-muted muted">{{{completionstatus.string}}}</span>
-                        </div>
-                    </div>
+                <div class="activitycompletion-item d-flex"
+                    id="activitycompletion-{{id}}"
+                >
+                    <a data-toggle="collapse"
+                        href="#activitycompletioncollapse-{{id}}"
+                        class="icons-collapse-expand collapsed"
+                        aria-expanded="false"
+                        role="button"
+                    >
+                        <span class="collapsed-icon icon-no-margin mr-1"
+                            title="{{#str}} expandcategory, core, {{formattedname}} {{/str}}">
+                            <span class="dir-rtl-hide">{{#pix}} t/collapsedchevron, core {{/pix}}</span>
+                            <span class="dir-ltr-hide">{{#pix}} t/collapsedchevron_rtl, core {{/pix}}</span>
+                            <span class="sr-only">{{#str}} expandcategory, core, {{formattedname}} {{/str}}</span>
+                        </span>
+                        <span class="expanded-icon icon-no-margin mr-1"
+                            title="{{#str}} collapsecategory, core, {{formattedname}} {{/str}}">
+                            {{#pix}} t/expandedchevron, core {{/pix}}
+                            <span class="sr-only">{{#str}} collapsecategory, core, {{formatedname}} {{/str}}</span>
+                        </span>
+                        <img class="iconlarge activityicon ml-4" src="{{icon}}" alt=" " role="presentation" />
+                        <span class="ml-3">{{{formattedname}}}</span>
+                    </a>
                 </div>
-            </div>
-            <hr class="row">
+                <div id="activitycompletioncollapse-{{id}}"
+                    class="activitycompletion-item-content collapse"
+                    aria-labelledby="activitycompletion-{{id}}" role="group"
+                >
+                    <hr class="row">
+                    <div class="py-3">{{{formhtml}}}</div>
+                </div>
+
+                <hr class="row">
             {{/canmanage}}
         {{/modules}}
     </div>
-    <input type="hidden" name="id" value="{{courseid}}" />
-    <input type="hidden" name="sesskey" value="{{sesskey}}" />
-    <div class="row">
-        <div class="col">
-            <input type="submit" value="{{#str}}edit{{/str}}" class="btn btn-primary" name="submitbutton" disabled/>
-        </div>
-    </div>
-</form>
 </div>
-
-{{#js}}
-require([
-    'jquery',
-], function($) {
-    $('.mastercheck').click(function() {
-        var checked = $('.mastercheck').is(':checked');
-        $('input[type=checkbox]').each(function() {
-            $(this).prop('checked', checked);
-            $(this).trigger('change');
-        });
-    });
-
-    $('input[type=checkbox][id^=modtype_]').change(function() {
-        if ($(this).is(':checked')) {
-            $('[name=submitbutton]').removeAttr('disabled');
-        } else {
-            // Is this the last activity checkbox to be un-checked? If so, disable the edit button.
-            var somechecked = false;
-            $('input[type=checkbox][id^=modtype_]').each(function() {
-                if ($(this).is(':checked')) {
-                    somechecked = true;
-                    return false;
-                }
-                return true;
-            });
-            if (!somechecked) {
-                $('[name=submitbutton]').attr('disabled', 'disabled');
-            }
-        }
-    });
-});
-{{/js}}
diff --git a/lang/en/completion.php b/lang/en/completion.php
@@ -143,6 +143,7 @@
 $string['days'] = 'Days';
 $string['daysoftotal'] = '{$a->days} of {$a->total}';
 $string['daysuntilcompletion'] = 'Days until completion';
+$string['defaultactivitycompletion'] = 'These are the default completion conditions for activities in all courses.';
 $string['defaultcompletion'] = 'Default activity completion';
 $string['defaultcompletionupdated'] = 'Changes saved';
 $string['deletecompletiondata'] = 'Delete completion data';

diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
@@ -1720,3 +1720,15 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
         margin-left: 2rem;
     }
 }
+
+/* Activity completion */
+
+.activitycompletion-item {
+    a {
+        color: $black;
+        text-decoration: none;
+        img {
+            filter: invert(25%) sepia(86%) saturate(1158%) hue-rotate(189deg) brightness(104%) contrast(92%);
+        }
+    }
+}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -29271,6 +29271,15 @@ span.editinstructions .alert-link {
     margin-left: 2rem;
   }
 }
+/* Activity completion */
+.activitycompletion-item a {
+  color: #000;
+  text-decoration: none;
+}
+.activitycompletion-item a img {
+  filter: invert(25%) sepia(86%) saturate(1158%) hue-rotate(189deg) brightness(104%) contrast(92%);
+}
+
 /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
 :target {
   scroll-margin-top: 70px;

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
@@ -29271,6 +29271,15 @@ span.editinstructions .alert-link {
     margin-left: 2rem;
   }
 }
+/* Activity completion */
+.activitycompletion-item a {
+  color: #000;
+  text-decoration: none;
+}
+.activitycompletion-item a img {
+  filter: invert(25%) sepia(86%) saturate(1158%) hue-rotate(189deg) brightness(104%) contrast(92%);
+}
+
 /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
 :target {
   scroll-margin-top: 60px;