mod/forum/amd/src/local/grades/local/grader/user_picker.js

// 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/>.

/**
 * This module will tie together all of the different calls the gradable module will make.
 *
 * @module     mod_forum/local/grades/local/grader/user_picker
 * @copyright  2019 Mathew May <mathew.solutions>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

import Templates from 'core/templates';
import Selectors from './user_picker/selectors';
import {get_string as getString} from 'core/str';

const templatePath = 'mod_forum/local/grades/local/grader';

/**
 * The Grader User Picker.
 *
 * @class mod_forum/local/grades/local/grader/user_picker
 */
class UserPicker {

    /**
     * Constructor for the User Picker.
     *
     * @constructor mod_forum/local/grades/local/grader/user_picker
     * @param {Array} userList List of users
     * @param {Function} showUserCallback The callback used to display the user
     * @param {Function} preChangeUserCallback The callback to use before changing user
     */
    constructor(userList, showUserCallback, preChangeUserCallback) {
        this.userList = userList;
        this.showUserCallback = showUserCallback;
        this.preChangeUserCallback = preChangeUserCallback;
        this.currentUserIndex = 0;

        // Ensure that render is bound correctly.
        this.render = this.render.bind(this);
        this.setUserId = this.setUserId.bind(this);
    }

    /**
     * Set the current userid without rendering the change.
     * To show the user, call showUser too.
     *
     * @param {Number} userId
     */
    setUserId(userId) {
        // Determine the current index based on the user ID.
        const userIndex = this.userList.findIndex(user => {
            return user.id === parseInt(userId);
        });

        if (userIndex === -1) {
            throw Error(`User with id ${userId} not found`);
        }

        this.currentUserIndex = userIndex;
    }

    /**
     * Render the user picker.
     */
    async render() {
        // Create the root node.
        this.root = document.createElement('div');

        const {html, js} = await this.renderNavigator();
        Templates.replaceNodeContents(this.root, html, js);

        // Call the showUser function to show the first user immediately.
        await this.showUser(this.currentUser);

        // Ensure that the event listeners are all bound.
        this.registerEventListeners();
    }

    /**
     * Render the navigator itself.
     *
     * @returns {Promise}
     */
    renderNavigator() {
        return Templates.renderForPromise(`${templatePath}/user_picker`, {});
    }

    /**
     * Render the current user details for the picker.
     *
     * @param {Object} context The data used to render the user picker.
     * @returns {Promise}
     */
    renderUserChange(context) {
        return Templates.renderForPromise(`${templatePath}/user_picker/user`, context);
    }

    /**
     * Show the specified user in the picker.
     *
     * @param {Object} user
     */
    async showUser(user) {
        const [{html, js}] = await Promise.all([this.renderUserChange(user), this.showUserCallback(user)]);
        const userRegion = this.root.querySelector(Selectors.regions.userRegion);
        Templates.replaceNodeContents(userRegion, html, js);

        // Update the hidden now-grading region so screen readers can announce the user that's currently being graded.
        const currentUserRegion = this.root.querySelector(Selectors.regions.currentUser);
        currentUserRegion.textContent = await getString('nowgradinguser', 'mod_forum', user.fullname);
    }

    /**
     * Register the event listeners for the user picker.
     */
    registerEventListeners() {
        this.root.addEventListener('click', async(e) => {
            const button = e.target.closest(Selectors.actions.changeUser);

            if (button) {
                const result = await this.preChangeUserCallback(this.currentUser);

                if (!result.failed) {
                    this.updateIndex(parseInt(button.dataset.direction));
                    await this.showUser(this.currentUser);
                }
            }
        });
    }

    /**
     * Update the current user index.
     *
     * @param {Number} direction
     * @returns {Number}}
     */
    updateIndex(direction) {
        this.currentUserIndex += direction;

        // Loop around the edges.
        if (this.currentUserIndex < 0) {
            this.currentUserIndex = this.userList.length - 1;
        } else if (this.currentUserIndex > this.userList.length - 1) {
            this.currentUserIndex = 0;
        }

        return this.currentUserIndex;
    }

    /**
     * Get the details of the user currently shown with the total number of users, and the 1-indexed count of the
     * current user.
     *
     * @returns {Object}
     */
    get currentUser() {
        return {
            ...this.userList[this.currentUserIndex],
            total: this.userList.length,
            displayIndex: this.currentUserIndex + 1,
        };
    }

    /**
     * Get the root node for the User Picker.
     *
     * @returns {HTMLElement}
     */
    get rootNode() {
        return this.root;
    }
}

/**
 * Create a new user picker.
 *
 * @param {Array} users The list of users
 * @param {Function} showUserCallback The function to call to show a specific user
 * @param {Function} preChangeUserCallback The fucntion to call to save the grade for the current user
 * @param {Number} [currentUserID] The userid of the current user
 * @returns {UserPicker}
 */
export default async(
    users,
    showUserCallback,
    preChangeUserCallback,
    {
        initialUserId = null,
    } = {}
) => {
    const userPicker = new UserPicker(users, showUserCallback, preChangeUserCallback);
    if (initialUserId) {
        userPicker.setUserId(initialUserId);
    }
    await userPicker.render();

    return userPicker;
};