// 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 Popper from 'core/popper';
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");
new Popper(referenceElement, popperContent, {placement: 'bottom'});
};
// 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);
new Popper(referenceElement, popperContent, {placement: 'bottom'});
// 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);
new Popper(referenceElement, popperContent, {placement: 'bottom'});
// 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);
});
};