Proyectos de Subversion Moodle

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

/**

 * Enhance the gradebook tree setup with various facilities.

 *

 * @module     core_grades/edittree_index

 * @copyright  2016 Andrew Nicols <andrew@nicols.co.uk>

 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

import storage from 'core/localstorage';

import {addIconToContainer} from 'core/loadingicon';

import Notification from 'core/notification';

import Pending from 'core/pending';

const SELECTORS = {

    CATEGORY_TOGGLE: '.toggle-category',

    GRADEBOOK_SETUP_TABLE: '.setup-grades',

    WEIGHT_OVERRIDE_CHECKBOX: '.weightoverride',

    BULK_MOVE_SELECT: '#menumoveafter',

    BULK_MOVE_INPUT: '#bulkmoveinput',

    GRADEBOOK_SETUP_WRAPPER: '.gradetree-wrapper',

    GRADEBOOK_SETUP_BOX: '.gradetreebox'

};

/**

 * Register related event listeners.

 *

 * @method registerListenerEvents

 * @param {int} courseId The ID of course.

 * @param {int} userId The ID of the current logged user.

 */

const registerListenerEvents = (courseId, userId) => {

    document.addEventListener('change', e => {

        // Toggle the availability of the weight input field based on the changed state (checked/unchecked) of the

        // related checkbox element.

        if (e.target.matches(SELECTORS.WEIGHT_OVERRIDE_CHECKBOX)) {

            toggleWeightInput(e.target);

        }

        // Submit the bulk move form when the selected option in the bulk move select element has been changed.

        if (e.target.matches(SELECTORS.BULK_MOVE_SELECT)) {

            submitBulkMoveForm(e.target);

        }

    });

    const gradebookSetup = document.querySelector(SELECTORS.GRADEBOOK_SETUP_TABLE);

    gradebookSetup.addEventListener('click', e => {

        const toggle = e.target.closest(SELECTORS.CATEGORY_TOGGLE);

        // Collapse or expand the grade category when the visibility toggle button is activated.

        if (toggle) {

            e.preventDefault();

            toggleCategory(toggle, courseId, userId, true);

        }

    });

};

/**

 * Toggle the weight input field based on its checkbox.

 *

 * @method toggleWeightInput

 * @param {object} weightOverrideCheckbox The weight override checkbox element.

 */

const toggleWeightInput = (weightOverrideCheckbox) => {

    const row = weightOverrideCheckbox.closest('tr');

    const itemId = row.dataset.itemid;

    const weightOverrideInput = row.querySelector(`input[name="weight_${itemId}"]`);

    weightOverrideInput.disabled = !weightOverrideCheckbox.checked;

};

/**

 * Submit the bulk move form.

 *

 * @method toggleWeightInput

 * @param {object} bulkMoveSelect The bulk move select element.

 */

const submitBulkMoveForm = (bulkMoveSelect) => {

    const form = bulkMoveSelect.closest('form');

    const bulkMoveInput = form.querySelector(SELECTORS.BULK_MOVE_INPUT);

    bulkMoveInput.value = 1;

    form.submit();

};

/**

 * Method that collapses all relevant grade categories based on the locally stored state of collapsed grade categories

 * for a given user.

 *

 * @method collapseGradeCategories

 * @param {int} courseId The ID of course.

 * @param {int} userId The ID of the current logged user.

 */

const collapseGradeCategories = (courseId, userId) => {

    const gradebookSetup = document.querySelector(SELECTORS.GRADEBOOK_SETUP_TABLE);

    const storedCollapsedCategories = storage.get(`core_grade_collapsedgradecategories_${courseId}_${userId}`);

    if (storedCollapsedCategories) {

        // Fetch all grade categories that are locally stored as collapsed and re-apply the collapse action.

        const collapsedCategories = JSON.parse(storedCollapsedCategories);

        collapsedCategories.forEach((category) => {

            const categoryToggleElement =

                gradebookSetup.querySelector(`${SELECTORS.CATEGORY_TOGGLE}[data-category="${category}"`);

            if (categoryToggleElement) {

                toggleCategory(categoryToggleElement, courseId, userId, false);

            }

        });

    }

};

/**

 * Method that updates the locally stored state of collapsed grade categories based on a performed toggle action on a

 * given grade category.

 *

 * @method updateCollapsedCategoriesStoredState

 * @param {string} category The category to be added or removed from the collapsed grade categories local storage.

 * @param {int} courseId The ID of course.

 * @param {int} userId The ID of the current logged user.

 * @param {boolean} isCollapsing Whether the category is being collapsed or not.

 */

const updateCollapsedCategoriesStoredState = (category, courseId, userId, isCollapsing) => {

    const currentStoredCollapsedCategories = storage.get(`core_grade_collapsedgradecategories_${courseId}_${userId}`);

    let collapsedCategories = currentStoredCollapsedCategories ?

        JSON.parse(currentStoredCollapsedCategories) : [];

    if (isCollapsing) {

        collapsedCategories.push(category);

    } else {

        collapsedCategories = collapsedCategories.filter(cat => cat !== category);

    }

    storage.set(`core_grade_collapsedgradecategories_${courseId}_${userId}`, JSON.stringify(collapsedCategories));

};

/**

 * Method that handles the grade category toggle action.

 *

 * @method toggleCategory

 * @param {object} toggleElement The category toggle node that was clicked.

 * @param {int} courseId The ID of course.

 * @param {int} userId The ID of the current logged user.

 * @param {boolean} storeCollapsedState Whether to store (local storage) the state of collapsed grade categories.

 */

const toggleCategory = (toggleElement, courseId, userId, storeCollapsedState) => {

    const target = toggleElement.dataset.target;

    const category = toggleElement.dataset.category;

    // Whether the toggle action is collapsing the category or not.

    const isCollapsing = toggleElement.getAttribute('aria-expanded') === "true";

    const gradebookSetup = toggleElement.closest(SELECTORS.GRADEBOOK_SETUP_TABLE);

    // Find all targeted 'children' rows of the toggled category.

    const targetRows = gradebookSetup.querySelectorAll(target);

    // Find the maximum grade cell in the grade category that is being collapsed/expanded.

    const toggleElementRow = toggleElement.closest('tr');

    const maxGradeCell = toggleElementRow.querySelector('.column-range');

    if (isCollapsing) {

        toggleElement.setAttribute('aria-expanded', 'false');

        // Update the 'data-target' of the toggle category node to make sure that when we perform another toggle action

        // to expand this category we only target rows which have been hidden by this category toggle action.

        toggleElement.dataset.target = `[data-hidden-by='${category}']`;

        if (maxGradeCell) {

            const relatedCategoryAggregationRow = gradebookSetup.querySelector(`[data-aggregationforcategory='${category}']`);

            maxGradeCell.innerHTML = relatedCategoryAggregationRow.querySelector('.column-range').innerHTML;

        }

    } else {

        toggleElement.setAttribute('aria-expanded', 'true');

        // Update the 'data-target' of the toggle category node to make sure that when we perform another toggle action

        // to collapse this category we only target rows which are children of this category and are not currently hidden.

        toggleElement.dataset.target = `.${category}[data-hidden='false']`;

        if (maxGradeCell) {

            maxGradeCell.innerHTML = '';

        }

    }

    // If explicitly instructed, update accordingly the locally stored state of collapsed categories based on the

    // toggle action performed on the given grade category.

    if (storeCollapsedState) {

        updateCollapsedCategoriesStoredState(category, courseId, userId, isCollapsing);

    }

    // Loop through all targeted child row elements and update the required data attributes to either hide or show

    // them depending on the toggle action (collapsing or expanding).

    targetRows.forEach((row) => {

        if (isCollapsing) {

            row.dataset.hidden = 'true';

            row.dataset.hiddenBy = category;

        } else {

            row.dataset.hidden = 'false';

            row.dataset.hiddenBy = '';

        }

    });

    // Since the user report is presented in an HTML table, rowspans are used under each category to create a visual

    // hierarchy between categories and grading items. When expanding or collapsing a category we need to also update

    // (subtract or add) the rowspan values associated to each parent category row to preserve the correct visual

    // hierarchy in the table.

    updateParentCategoryRowspans(toggleElement, targetRows.length);

};

/**

 * Method that updates the rowspan value of all 'parent' category rows of a given category node.

 *

 * @method updateParentCategoryRowspans

 * @param {object} toggleElement The category toggle node that was clicked.

 * @param {int} num The number we want to add or subtract from the rowspan value of the 'parent' category row elements.

 */

const updateParentCategoryRowspans = (toggleElement, num) => {

    const gradebookSetup = toggleElement.closest(SELECTORS.GRADEBOOK_SETUP_TABLE);

    // Get the row element which contains the category toggle node.

    const rowElement = toggleElement.closest('tr');

    // Loop through the class list of the toggle category row element.

    // The list contains classes which identify all parent categories of the toggled category.

    rowElement.classList.forEach((className) => {

        // Find the toggle node of the 'parent' category that is identified by the given class name.

        const parentCategoryToggleElement = gradebookSetup.querySelector(`[data-target=".${className}[data-hidden='false']"`);

        if (parentCategoryToggleElement) {

            // Get the row element which contains the parent category toggle node.

            const categoryRowElement = parentCategoryToggleElement.closest('tr');

            // Find the rowspan element associated to this parent category.

            const categoryRowSpanElement = categoryRowElement.nextElementSibling.querySelector('[rowspan]');

            // Depending on whether the toggle action has expanded or collapsed the category, either add or

            // subtract from the 'parent' category rowspan.

            if (toggleElement.getAttribute('aria-expanded') === "true") {

                categoryRowSpanElement.rowSpan = categoryRowSpanElement.rowSpan + num;

            } else { // The category has been collapsed.

                categoryRowSpanElement.rowSpan = categoryRowSpanElement.rowSpan - num;

            }

        }

    });

};

/**

 * Initialize module.

 *

 * @method init

 * @param {int} courseId The ID of course.

 * @param {int} userId The ID of the current logged user.

 */

export const init = (courseId, userId) => {

    const pendingPromise = new Pending();

    const gradebookSetupBox = document.querySelector(SELECTORS.GRADEBOOK_SETUP_BOX);

    // Display a loader while the relevant grade categories are being re-collapsed on page load (based on the locally

    // stored state for the given user).

    addIconToContainer(gradebookSetupBox).then((loader) => {

        setTimeout(() => {

            collapseGradeCategories(courseId, userId);

            // Once the grade categories have been re-collapsed, remove the loader and display the Gradebook setup content.

            loader.remove();

            document.querySelector(SELECTORS.GRADEBOOK_SETUP_WRAPPER).classList.remove('d-none');

            pendingPromise.resolve();

        }, 150);

        return;

    }).fail(Notification.exception);

    registerListenerEvents(courseId, userId);

};