MDL-75513 gradereport_user: Create trigger element for the user selector

Creates a renderer method and a template for the element that would
trigger the user selector.

grade/report/user/renderer.php

@@ -80,4 +80,53 @@ class gradereport_user_renderer extends plugin_renderer_base {
         return $output;
     }
 
+    /**
+     * Renders the user selector trigger element.
+     *
+     * @param object $course The course object.
+     * @param int|null $userid The user ID.
+     * @param int|null $groupid The group ID.
+     * @return string The raw HTML to render.
+     * @throws coding_exception
+     */
+    public function users_selector(object $course, ?int $userid = null, ?int $groupid = null): string {
+
+        $data = [
+            'courseid' => $course->id,
+            'groupid' => $groupid ?? 0,
+        ];
+
+        // If a particular option is selected (not in zero state).
+        if (!is_null($userid)) {
+            if ($userid) { // A single user selected.
+                $user = core_user::get_user($userid);
+                $data['selectedoption'] = [
+                    'image' => $this->user_picture($user, ['size' => 40, 'link' => false]),
+                    'text' => fullname($user),
+                    'additionaltext' => $user->email,
+                ];
+            } else { // All users selected.
+                // Get the total number of users.
+                $defaultgradeshowactiveenrol = !empty($CFG->grade_report_showonlyactiveenrol);
+                $showonlyactiveenrol = get_user_preferences('grade_report_showonlyactiveenrol', $defaultgradeshowactiveenrol);
+                $showonlyactiveenrol = $showonlyactiveenrol ||
+                    !has_capability('moodle/course:viewsuspendedusers', context_course::instance($course->id));
+                $gui = new graded_users_iterator($course, null, $groupid);
+                $gui->require_active_enrolment($showonlyactiveenrol);
+                $gui->init();
+                $totalusersnum = 0;
+                while ($userdata = $gui->next_user()) {
+                    $totalusersnum++;
+                }
+                $gui->close();
+
+                $data['selectedoption'] = [
+                    'text' => get_string('allusersnum', 'gradereport_user', $totalusersnum),
+                ];
+            }
+        }
+
+        $this->page->requires->js_call_amd('gradereport_user/user', 'init');
+        return $this->render_from_template('gradereport_user/user_selector', $data);
+    }
 }

grade/report/user/styles.css

@@ -127,6 +127,11 @@
     align-items: center;
 }
 
+.path-grade-report-user .user-selector .userinitials {
+    width: 40px;
+    height: 40px;
+}
+
 @media print {
     .path-grade-report-user .user-grade td.category {
         border-left: none;

grade/report/user/templates/user_selector.mustache

@@ -0,0 +1,74 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template gradereport_user/user_selector
+
+    The user selector trigger element.
+
+    Context variables required for this template:
+    * courseid - The course ID.
+    * groupid - The group ID.
+    * selectedoption - (optional) Object containing information about the selected option.
+        * image - The image corresponding to the selected option.
+        * text - The text of the selected option.
+        * additionaltext - (optional) Additional text displayed below the selected option (e.g. the user email)
+
+    Example context (json):
+    {
+        "courseid": "2",
+        "groupid": "2",
+        "selectedoption": {
+            "image": "<img src=\"http://example.com/pluginfile.php/14/user/icon/boost/f2\" class=\"userpicture\" width=\"40\" alt=\"\">",
+            "text": "John Doe",
+            "additionaltext": "[email protected]"
+        }
+    }
+}}
+<div class="user-selector d-flex">
+    <div role="button" class="userwidget btn dropdown-toggle d-flex text-left align-items-center p-0" data-courseid="{{courseid}}" data-groupid="{{groupid}}" data-searchtype="user" tabindex="0" aria-label="{{#str}} selectauser, core_grades {{/str}}">
+        <div class="align-items-center d-flex">
+            {{#selectedoption}}
+                <div class="selected-option-img d-block pr-2">
+                    {{#image}}
+                        {{{image}}}
+                    {{/image}}
+                    {{^image}}
+                        <span class="userinitials"></span>
+                    {{/image}}
+                </div>
+                <div class="selected-option-info d-block pr-3">
+                    <span class="selected-option-text p-0 font-weight-bold">
+                        {{text}}
+                    </span>
+                    {{#additionaltext}}
+                        <span class="d-block small">
+                            {{additionaltext}}
+                        </span>
+                    {{/additionaltext}}
+                </div>
+            {{/selectedoption}}
+            {{^selectedoption}}
+                <div class="d-block pr-2">
+                    <span class="userinitials"></span>
+                </div>
+                <div class="user-info d-block pr-3">
+                    {{#str}} selectauser, core_grades {{/str}}
+                </div>
+            {{/selectedoption}}
+        </div>
+    </div>
+</div>