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

/**
 * Module responsible for handling forum summary report filters.
 *
 * @module     forumreport_summary/filters
 * @copyright  2019 Michael Hawkins <michaelh@moodle.com>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

import $ from 'jquery';
import {createPopper} from 'core/popper2';
import CustomEvents from 'core/custom_interaction_events';
import Selectors from 'forumreport_summary/selectors';
import Ajax from 'core/ajax';
import KeyCodes from 'core/key_codes';
import * as FormChangeChecker from 'core_form/changechecker';

export const init = (root) => {
    let jqRoot = $(root);

    // Hide loading spinner and show report once page is ready.
    // This ensures filters can be applied when sorting by columns.
    $(document).ready(function() {
        $('.loading-icon').hide();
        $('#summaryreport').removeClass('hidden');
    });

    // Generic filter handlers.

    // Called to override click event to trigger a proper generate request with filtering.
    const generateWithFilters = (event, getparams) => {
        let currentLink = document.forms.filtersform.action,
            newLink;

        if (event) {
            event.preventDefault();

           let currentSplit = currentLink.split('?'),
               currentstring = currentSplit[1],
               newparamsarray = getparams.split('&'),
               paramsstring = '',
               paramkeys = [],
               paramvalues = [];

            // Separate out the existing action GET param string.
            currentstring.split('&').forEach(function(param) {
                let splitparam = param.split('=');
                paramkeys.push(splitparam[0]);
                paramvalues.push(splitparam[1]);
            });

            newparamsarray.forEach(function(paramstring) {
                let newparam = paramstring.split('='),
                    existingkey = paramkeys.indexOf(newparam[0]);

                // Overwrite value if existing, otherwise add new param.
                if (existingkey > -1) {
                    paramvalues[existingkey] = newparam[1];
                } else {
                    paramkeys.push(newparam[0]);
                    paramvalues.push(newparam[1]);
                }
            });

            // Build URL.
            paramkeys.forEach(function(name, key) {
                paramsstring += `&${name}=${paramvalues[key]}`;
            });

            newLink = currentSplit[0] + '?' + paramsstring.substr(1);
        } else {
            newLink = currentLink;
        }

        document.forms.filtersform.action = newLink;
        document.forms.filtersform.submit();
    };

    // Override 'reset table preferences' so it generates with filters.
    $('.resettable').on("click", "a", function(event) {
        generateWithFilters(event, event.target.search.substr(1));
    });

    // Override table heading sort links so they generate with filters.
    $('thead').on("click", "a", function(event) {
        generateWithFilters(event, event.target.search.substr(1));
    });

    // Override pagination page links so they generate with filters.
    $('.pagination').on("click", "a", function(event) {
        generateWithFilters(event, event.target.search.substr(1));
    });

    // Override rows per page submission so it generates with filters.
    if (document.forms.selectperpage) {
        document.forms.selectperpage.onsubmit = (event) => {
            let getparam = 'perpage=' + document.forms.selectperpage.elements.perpage.value;
            generateWithFilters(event, getparam);
        };
    }

    // Override download link so the file is generated with filters.
    const downloadForm = document.getElementById('summaryreport').querySelector('form.dataformatselector');
    if (downloadForm) {
        downloadForm.onsubmit = (event) => {
            const downloadType = downloadForm.querySelector('#downloadtype_download').value;
            const getParams = `download=${downloadType}`;
            const prevAction = document.forms.filtersform.action;

            generateWithFilters(event, getParams);

            // Revert action, so re-submitting the form via filter does not trigger a further download.
            document.forms.filtersform.action = prevAction;
        };
    }

    // Submit report via filter
    const submitWithFilter = (containerelement) => {
        // Disable the dates filter mform checker to prevent any changes triggering a warning to the user.
        FormChangeChecker.unWatchForm(document.forms.filtersform);

        // Close the container (eg popover).
        $(containerelement).addClass('hidden');

        // Submit the filter values and re-generate report.
        generateWithFilters(false);
    };

    // Use popper to override date mform calendar position.
    const updateCalendarPosition = (referenceid) => {
        let referenceElement = document.querySelector(referenceid),
            popperContent = document.querySelector(Selectors.filters.date.calendar);

        popperContent.style.removeProperty("z-index");
        createPopper(referenceElement, popperContent, {placement: 'bottom-end'});
    };

    // Close the relevant filter.
    const closeOpenFilters = (openFilterButton, openFilter) => {
        openFilter.classList.add('hidden');
        openFilter.setAttribute('data-openfilter', 'false');

        openFilterButton.classList.add('btn-primary');
        openFilterButton.classList.remove('btn-outline-primary');
        openFilterButton.setAttribute('aria-expanded', false);
    };

    // Groups filter specific handlers.

    // Event handler for clicking select all groups.
    jqRoot.on(CustomEvents.events.activate, Selectors.filters.group.selectall, function() {
        let deselected = root.querySelectorAll(Selectors.filters.group.checkbox + ':not(:checked)');
        deselected.forEach(function(checkbox) {
            checkbox.checked = true;
        });
    });

    // Event handler for clearing filter by clicking option.
    jqRoot.on(CustomEvents.events.activate, Selectors.filters.group.clear, function() {
        // Clear checkboxes.
        let selected = root.querySelectorAll(Selectors.filters.group.checkbox + ':checked');
        selected.forEach(function(checkbox) {
            checkbox.checked = false;
        });
    });

    // Event handler for showing groups filter popover.
    jqRoot.on(CustomEvents.events.activate, Selectors.filters.group.trigger, function() {
        // Create popover.
        let referenceElement = root.querySelector(Selectors.filters.group.trigger),
            popperContent = root.querySelector(Selectors.filters.group.popover);

        createPopper(referenceElement, popperContent, {placement: 'bottom-end'});

        // Show popover.
        popperContent.classList.remove('hidden');
        popperContent.setAttribute('data-openfilter', 'true');

        // Change to outlined button.
        referenceElement.classList.add('btn-outline-primary');
        referenceElement.classList.remove('btn-primary');

        // Let screen readers know that it's now expanded.
        referenceElement.setAttribute('aria-expanded', true);

        // Add listeners to handle closing filter.
        const closeListener = e => {
            if (e.target.id !== referenceElement.id && popperContent !== e.target.closest('[data-openfilter="true"]') &&
                    (typeof e.keyCode === 'undefined' || e.keyCode === KeyCodes.enter || e.keyCode === KeyCodes.space)) {
                closeOpenFilters(referenceElement, popperContent);
                document.removeEventListener('click', closeListener);
                document.removeEventListener('keyup', closeListener);
                document.removeEventListener('keyup', escCloseListener);
            }
        };

        document.addEventListener('click', closeListener);
        document.addEventListener('keyup', closeListener);

        const escCloseListener = e => {
            if (e.keyCode === KeyCodes.escape) {
                closeOpenFilters(referenceElement, popperContent);
                document.removeEventListener('keyup', escCloseListener);
                document.removeEventListener('click', closeListener);
            }
        };

        document.addEventListener('keyup', escCloseListener);
    });

    // Event handler to click save groups filter.
    jqRoot.on(CustomEvents.events.activate, Selectors.filters.group.save, function() {
        // Copy the saved values into the form before submitting.
        let popcheckboxes = root.querySelectorAll(Selectors.filters.group.checkbox);

        popcheckboxes.forEach(function(popcheckbox) {
            let filtersform = document.forms.filtersform,
                saveid = popcheckbox.getAttribute('data-saveid');

            filtersform.querySelector(`#${saveid}`).checked = popcheckbox.checked;
        });

        submitWithFilter('#filter-groups-popover');
    });

    // Listeners for export buttons.
    // These allow fetching of the relevant export URL, before submitting the request with
    // any POST data that is common to all of the export links. This allows filters to be
    // applied that contain potentially a lot of data (eg discussion IDs for groups filtering).
    document.querySelectorAll(Selectors.filters.exportlink.link).forEach(function(exportbutton) {
        exportbutton.addEventListener('click', function(event) {
            document.forms.exportlinkform.action = event.target.dataset.url;
            document.forms.exportlinkform.submit();
        });
    });

    // Dates filter specific handlers.

   // Event handler for showing dates filter popover.
    jqRoot.on(CustomEvents.events.activate, Selectors.filters.date.trigger, function() {

        // Create popover.
        let referenceElement = root.querySelector(Selectors.filters.date.trigger),
            popperContent = root.querySelector(Selectors.filters.date.popover);

        createPopper(referenceElement, popperContent, {placement: 'bottom-end'});

        // Show popover and move focus.
        popperContent.classList.remove('hidden');
        popperContent.setAttribute('data-openfilter', 'true');
        popperContent.querySelector('[name="filterdatefrompopover[enabled]"]').focus();

        // Change to outlined button.
        referenceElement.classList.add('btn-outline-primary');
        referenceElement.classList.remove('btn-primary');

        // Let screen readers know that it's now expanded.
        referenceElement.setAttribute('aria-expanded', true);

        // Add listener to handle closing filter.
        const closeListener = e => {
            if (e.target.id !== referenceElement.id && popperContent !== e.target.closest('[data-openfilter="true"]') &&
                    (typeof e.keyCode === 'undefined' || e.keyCode === KeyCodes.enter || e.keyCode === KeyCodes.space)) {
                closeOpenFilters(referenceElement, popperContent);
                document.removeEventListener('click', closeListener);
                document.removeEventListener('keyup', closeListener);
                document.removeEventListener('keyup', escCloseListener);
            }
        };

        document.addEventListener('click', closeListener);
        document.addEventListener('keyup', closeListener);

        const escCloseListener = e => {
            if (e.keyCode === KeyCodes.escape) {
                closeOpenFilters(referenceElement, popperContent);
                document.removeEventListener('keyup', escCloseListener);
                document.removeEventListener('click', closeListener);
            }
        };

        document.addEventListener('keyup', escCloseListener);
    });

    // Event handler to save dates filter.
    jqRoot.on(CustomEvents.events.activate, Selectors.filters.date.save, function() {
        // Populate the hidden form inputs to submit the data.
        let filtersForm = document.forms.filtersform;
        const datesPopover = root.querySelector(Selectors.filters.date.popover);
        const fromEnabled = datesPopover.querySelector('[name="filterdatefrompopover[enabled]"]').checked ? 1 : 0;
        const toEnabled = datesPopover.querySelector('[name="filterdatetopopover[enabled]"]').checked ? 1 : 0;

        if (!fromEnabled && !toEnabled) {
            // Update the elements in the filter form.
            filtersForm.elements['datefrom[timestamp]'].value = 0;
            filtersForm.elements['datefrom[enabled]'].value = fromEnabled;
            filtersForm.elements['dateto[timestamp]'].value = 0;
            filtersForm.elements['dateto[enabled]'].value = toEnabled;

            // Submit the filter values and re-generate report.
            submitWithFilter('#filter-dates-popover');
        } else {
            let args = {data: []};

            if (fromEnabled) {
                args.data.push({
                    'key': 'from',
                    'year': datesPopover.querySelector('[name="filterdatefrompopover[year]"]').value,
                    'month': datesPopover.querySelector('[name="filterdatefrompopover[month]"]').value,
                    'day': datesPopover.querySelector('[name="filterdatefrompopover[day]"]').value,
                    'hour': 0,
                    'minute': 0
                });
            }

            if (toEnabled) {
                args.data.push({
                    'key': 'to',
                    'year': datesPopover.querySelector('[name="filterdatetopopover[year]"]').value,
                    'month': datesPopover.querySelector('[name="filterdatetopopover[month]"]').value,
                    'day': datesPopover.querySelector('[name="filterdatetopopover[day]"]').value,
                    'hour': 23,
                    'minute': 59
                });
            }

            const request = {
                methodname: 'core_calendar_get_timestamps',
                args: args
            };

            Ajax.call([request])[0].done(function(result) {
                let fromTimestamp = 0,
                    toTimestamp = 0;

                result.timestamps.forEach(function(data) {
                    if (data.key === 'from') {
                        fromTimestamp = data.timestamp;
                    } else if (data.key === 'to') {
                        toTimestamp = data.timestamp;
                    }
                });

                // Display an error if the from date is later than the do date.
                if (toTimestamp > 0 && fromTimestamp > toTimestamp) {
                    const warningdiv = document.getElementById('dates-filter-warning');
                    warningdiv.classList.remove('hidden');
                    warningdiv.classList.add('d-block');
                } else {
                    filtersForm.elements['datefrom[timestamp]'].value = fromTimestamp;
                    filtersForm.elements['datefrom[enabled]'].value = fromEnabled;
                    filtersForm.elements['dateto[timestamp]'].value = toTimestamp;
                    filtersForm.elements['dateto[enabled]'].value = toEnabled;

                    // Submit the filter values and re-generate report.
                    submitWithFilter('#filter-dates-popover');
                }
            });
        }
    });

    jqRoot.on(CustomEvents.events.activate, Selectors.filters.date.calendariconfrom, function() {
        updateCalendarPosition(Selectors.filters.date.calendariconfrom);
    });

    jqRoot.on(CustomEvents.events.activate, Selectors.filters.date.calendariconto, function() {
        updateCalendarPosition(Selectors.filters.date.calendariconto);
    });
};