MDL-75513 gradereport_user: Trigger element for the view mode selector

Creates a renderer method and a template for the element that would
trigger the view mode selector in the grade user report.

grade/report/user/renderer.php

@@ -171,4 +171,33 @@ class gradereport_user_renderer extends plugin_renderer_base {
 
         return $this->render_from_template('gradereport_user/user_navigation', $navigationdata);
     }
+
+    /**
+     * Creates and renders 'view report as' selector element.
+     *
+     * @param int $userid The selected userid
+     * @param int $userview The current view user setting constant
+     * @param int $courseid The course ID.
+     * @return string The raw HTML to render.
+     */
+    public function view_mode_selector(int $userid, int $userview, int $courseid): string {
+
+        $viewasotheruser = new moodle_url('/grade/report/user/index.php', ['id' => $courseid, 'userid' => $userid,
+            'userview' => GRADE_REPORT_USER_VIEW_USER]);
+        $viewasmyself = new moodle_url('/grade/report/user/index.php', ['id' => $courseid, 'userid' => $userid,
+            'userview' => GRADE_REPORT_USER_VIEW_SELF]);
+
+        $selectoroptions = [
+            $viewasotheruser->out(false) => get_string('otheruser', 'core_grades'),
+            $viewasmyself->out(false) => get_string('myself', 'core_grades')
+        ];
+
+        $selectoractiveurl = $userview === GRADE_REPORT_USER_VIEW_USER ? $viewasotheruser : $viewasmyself;
+
+        $viewasselect = new \core\output\select_menu('viewas', $selectoroptions, $selectoractiveurl->out(false));
+        $viewasselect->set_label(get_string('viewas', 'core_grades'));
+
+        return $this->render_from_template('gradereport_user/view_mode_selector',
+            $viewasselect->export_for_template($this));
+    }
 }

grade/report/user/styles.css

@@ -136,6 +136,17 @@
     max-width: 767px;
 }
 
+.path-grade-report-user .view-user-selector label {
+    display: block;
+    font-size: 80%;
+    margin: 0;
+}
+
+.path-grade-report-user .view-user-selector .dropdown-toggle {
+    padding: 0;
+    font-weight: bold;
+}
+
 @media print {
     .path-grade-report-user .user-grade td.category {
         border-left: none;

grade/report/user/templates/view_mode_selector.mustache

@@ -0,0 +1,62 @@
+{{!
+    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/view_mode_selector
+
+    The view mode selector.
+
+    Context variables required for this template:
+    * name - name of the form element
+    * value - value of the form element
+    * baseid - id of the dropdown element and to be used to generate id for other elements used internally
+    * label - Element label
+    * labelattributes - Label attributes.
+    * selectedoption - Text of the selected option
+    * options - Array of options for the select with value, name, selected, isgroup and id properites.
+
+    Example context (json):
+    {
+        "name": "menuname",
+        "value": "opt2",
+        "baseid": "select-menu56789",
+        "label": "View report as",
+        "labelattributes": [],
+        "selectedoption": "Myself",
+        "options": [
+            {
+                "name": "User",
+                "value": "opt1",
+                "id": "select-menu-option1",
+                "selected": false
+            },
+            {
+                "name": "Myself",
+                "value": "opt2",
+                "id": "select-menu-option2",
+                "selected": true
+            }
+        ]
+    }
+}}
+<div class="view-user-selector">
+    {{>core/select_menu}}
+</div>
+{{#js}}
+    document.querySelector('#{{baseid}}').addEventListener('change', function(e) {
+        window.location.href = e.target.value;
+    });
+{{/js}}