lib/amd/src/datafilter.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/>.
/**
 * Data filter management.
 *
 * @module     core/datafilter
 * @copyright  2020 Andrew Nicols <andrew@nicols.co.uk>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */
import CourseFilter from 'core/datafilter/filtertypes/courseid';
import GenericFilter from 'core/datafilter/filtertype';
import {getStrings} from 'core/str';
import Notification from 'core/notification';
import Pending from 'core/pending';
import Selectors from 'core/datafilter/selectors';
import Templates from 'core/templates';
import CustomEvents from 'core/custom_interaction_events';
import jQuery from 'jquery';
export default class {
    /**
     * Initialise the filter on the element with the given filterSet and callback.
     *
     * @param {HTMLElement} filterSet The filter element.
     * @param {Function} applyCallback Callback function when updateTableFromFilter
     */
    constructor(filterSet, applyCallback) {
        this.filterSet = filterSet;
        this.applyCallback = applyCallback;
        // Keep a reference to all of the active filters.
        this.activeFilters = {
            courseid: new CourseFilter('courseid', filterSet),
        };
    }
    /**
     * Initialise event listeners to the filter.
     */
    init() {
        // Add listeners for the main actions.
        this.filterSet.querySelector(Selectors.filterset.region).addEventListener('click', e => {
            if (e.target.closest(Selectors.filterset.actions.addRow)) {
                e.preventDefault();
                this.addFilterRow();
            }
            if (e.target.closest(Selectors.filterset.actions.applyFilters)) {
                e.preventDefault();
                this.updateTableFromFilter();
            }
            if (e.target.closest(Selectors.filterset.actions.resetFilters)) {
                e.preventDefault();
                this.removeAllFilters();
            }
        });
        // Add the listener to remove a single filter.
        this.filterSet.querySelector(Selectors.filterset.regions.filterlist).addEventListener('click', e => {
            if (e.target.closest(Selectors.filter.actions.remove)) {
                e.preventDefault();
                this.removeOrReplaceFilterRow(e.target.closest(Selectors.filter.region), true);
            }
        });
        // Add listeners for the filter type selection.
        let filterRegion = jQuery(this.getFilterRegion());
        CustomEvents.define(filterRegion, [CustomEvents.events.accessibleChange]);
        filterRegion.on(CustomEvents.events.accessibleChange, e => {
            const typeField = e.target.closest(Selectors.filter.fields.type);
            if (typeField && typeField.value) {
                const filter = e.target.closest(Selectors.filter.region);
                this.addFilter(filter, typeField.value);
            }
        });
        this.filterSet.querySelector(Selectors.filterset.fields.join).addEventListener('change', e => {
            this.filterSet.dataset.filterverb = e.target.value;
        });
    }
    /**
     * Get the filter list region.
     *
     * @return {HTMLElement}
     */
    getFilterRegion() {
        return this.filterSet.querySelector(Selectors.filterset.regions.filterlist);
    }
    /**
     * Add a filter row.
     *
     * @param {Object} filterdata Optional, data for adding for row with an existing filter.
     * @return {Promise}
     */
    addFilterRow(filterdata = {}) {
        const pendingPromise = new Pending('core/datafilter:addFilterRow');
        const rownum = filterdata.rownum ?? 1 + this.getFilterRegion().querySelectorAll(Selectors.filter.region).length;
        return Templates.renderForPromise('core/datafilter/filter_row', {"rownumber": rownum})
            .then(({html, js}) => {
                const newContentNodes = Templates.appendNodeContents(this.getFilterRegion(), html, js);
                return newContentNodes;
            })
            .then(filterRow => {
                // Note: This is a nasty hack.
                // We should try to find a better way of doing this.
                // We do not have the list of types in a readily consumable format, so we take the pre-rendered one and copy
                // it in place.
                const typeList = this.filterSet.querySelector(Selectors.data.typeList);
                filterRow.forEach(contentNode => {
                    const contentTypeList = contentNode.querySelector(Selectors.filter.fields.type);
                    if (contentTypeList) {
                        contentTypeList.innerHTML = typeList.innerHTML;
                    }
                });
                return filterRow;
            })
            .then(filterRow => {
                this.updateFiltersOptions();
                return filterRow;
            })
            .then(result => {
                pendingPromise.resolve();
                // If an existing filter is passed in, add it. Otherwise, leave the row empty.
                if (filterdata.filtertype) {
                    result.forEach(filter => {
                        this.addFilter(filter, filterdata.filtertype, filterdata.values,
                            filterdata.jointype, filterdata.filteroptions);
                    });
                }
                return result;
            })
            .catch(Notification.exception);
    }
    /**
     * Get the filter data source node fro the specified filter type.
     *
     * @param {String} filterType
     * @return {HTMLElement}
     */
    getFilterDataSource(filterType) {
        const filterDataNode = this.filterSet.querySelector(Selectors.filterset.regions.datasource);
        return filterDataNode.querySelector(Selectors.data.fields.byName(filterType));
    }
    /**
     * Add a filter to the list of active filters, performing any necessary setup.
     *
     * @param {HTMLElement} filterRow
     * @param {String} filterType
     * @param {Array} initialFilterValues The initially selected values for the filter
     * @param {String} filterJoin
     * @param {Object} filterOptions
     * @returns {Filter}
     */
    async addFilter(filterRow, filterType, initialFilterValues, filterJoin, filterOptions) {
        // Name the filter on the filter row.
        filterRow.dataset.filterType = filterType;
        const filterDataNode = this.getFilterDataSource(filterType);
        // Instantiate the Filter class.
        let Filter = GenericFilter;
        if (filterDataNode.dataset.filterTypeClass) {
            // Ensure the filter class passed through exists, otherwise the filtering will break.
            try {
                Filter = await import(filterDataNode.dataset.filterTypeClass);
            } catch (error) {
                Notification.exception(error);
            }
        }
        this.activeFilters[filterType] = new Filter(filterType, this.filterSet, initialFilterValues, filterOptions);
        // Disable the select.
        const typeField = filterRow.querySelector(Selectors.filter.fields.type);
        typeField.value = filterType;
        typeField.disabled = 'disabled';
        // Update the join list.
        this.updateJoinList(JSON.parse(filterDataNode.dataset.joinList), filterRow);
        const joinField = filterRow.querySelector(Selectors.filter.fields.join);
        if (!isNaN(filterJoin)) {
            joinField.value = filterJoin;
        }
        // Update the list of available filter types.
        this.updateFiltersOptions();
        return this.activeFilters[filterType];
    }
    /**
     * Get the registered filter class for the named filter.
     *
     * @param {String} name
     * @return {Object} See the Filter class.
     */
    getFilterObject(name) {
        return this.activeFilters[name];
    }
    /**
     * Remove or replace the specified filter row and associated class, ensuring that if there is only one filter row,
     * that it is replaced instead of being removed.
     *
     * @param {HTMLElement} filterRow
     * @param {Bool} refreshContent Whether to refresh the table content when removing
     */
    removeOrReplaceFilterRow(filterRow, refreshContent) {
        const filterCount = this.getFilterRegion().querySelectorAll(Selectors.filter.region).length;
        if (filterCount === 1) {
            this.replaceFilterRow(filterRow, refreshContent);
        } else {
            this.removeFilterRow(filterRow, refreshContent);
        }
    }
    /**
     * Remove the specified filter row and associated class.
     *
     * @param {HTMLElement} filterRow
     * @param {Bool} refreshContent Whether to refresh the table content when removing
     */
    async removeFilterRow(filterRow, refreshContent = true) {
        if (filterRow.querySelector(Selectors.data.required)) {
            return;
        }
        const filterType = filterRow.querySelector(Selectors.filter.fields.type);
        const hasFilterValue = !!filterType.value;
        // Remove the filter object.
        this.removeFilterObject(filterRow.dataset.filterType);
        // Remove the actual filter HTML.
        filterRow.remove();
        // Update the list of available filter types.
        this.updateFiltersOptions();
        if (hasFilterValue && refreshContent) {
            // Refresh the table if there was any content in this row.
            this.updateTableFromFilter();
        }
        // Update filter fieldset legends.
        const filterLegends = await this.getAvailableFilterLegends();
        this.getFilterRegion().querySelectorAll(Selectors.filter.region).forEach((filterRow, index) => {
            filterRow.querySelector('legend').innerText = filterLegends[index];
        });
    }
    /**
     * Replace the specified filter row with a new one.
     *
     * @param {HTMLElement} filterRow
     * @param {Bool} refreshContent Whether to refresh the table content when removing
     * @param {Number} rowNum The number used to label the filter fieldset legend (eg Row 1). Defaults to 1 (the first filter).
     * @return {Promise}
     */
    replaceFilterRow(filterRow, refreshContent = true, rowNum = 1) {
        if (filterRow.querySelector(Selectors.data.required)) {
            return;
        }
        // Remove the filter object.
        this.removeFilterObject(filterRow.dataset.filterType);
        return Templates.renderForPromise('core/datafilter/filter_row', {"rownumber": rowNum})
            .then(({html, js}) => {
                const newContentNodes = Templates.replaceNode(filterRow, html, js);
                return newContentNodes;
            })
            .then(filterRow => {
                // Note: This is a nasty hack.
                // We should try to find a better way of doing this.
                // We do not have the list of types in a readily consumable format, so we take the pre-rendered one and copy
                // it in place.
                const typeList = this.filterSet.querySelector(Selectors.data.typeList);
                filterRow.forEach(contentNode => {
                    const contentTypeList = contentNode.querySelector(Selectors.filter.fields.type);
                    if (contentTypeList) {
                        contentTypeList.innerHTML = typeList.innerHTML;
                    }
                });
                return filterRow;
            })
            .then(filterRow => {
                this.updateFiltersOptions();
                return filterRow;
            })
            .then(filterRow => {
                // Refresh the table.
                if (refreshContent) {
                    return this.updateTableFromFilter();
                } else {
                    return filterRow;
                }
            })
            .catch(Notification.exception);
    }
    /**
     * Remove the Filter Object from the register.
     *
     * @param {string} filterName The name of the filter to be removed
     */
    removeFilterObject(filterName) {
        if (filterName) {
            const filter = this.getFilterObject(filterName);
            if (filter) {
                filter.tearDown();
                // Remove from the list of active filters.
                delete this.activeFilters[filterName];
            }
        }
    }
    /**
     * Remove all filters.
     *
     * @returns {Promise}
     */
    removeAllFilters() {
        const filters = this.getFilterRegion().querySelectorAll(Selectors.filter.region);
        filters.forEach(filterRow => this.removeOrReplaceFilterRow(filterRow, false));
        // Refresh the table.
        return this.updateTableFromFilter();
    }
    /**
     * Remove any empty filters.
     */
    removeEmptyFilters() {
        const filters = this.getFilterRegion().querySelectorAll(Selectors.filter.region);
        filters.forEach(filterRow => {
            const filterType = filterRow.querySelector(Selectors.filter.fields.type);
            if (!filterType.value) {
                this.removeOrReplaceFilterRow(filterRow, false);
            }
        });
    }
    /**
     * Update the list of filter types to filter out those already selected.
     */
    updateFiltersOptions() {
        const filters = this.getFilterRegion().querySelectorAll(Selectors.filter.region);
        filters.forEach(filterRow => {
            const options = filterRow.querySelectorAll(Selectors.filter.fields.type + ' option');
            options.forEach(option => {
                if (option.value === filterRow.dataset.filterType) {
                    option.classList.remove('hidden');
                    option.disabled = false;
                } else if (this.activeFilters[option.value]) {
                    option.classList.add('hidden');
                    option.disabled = true;
                } else {
                    option.classList.remove('hidden');
                    option.disabled = false;
                }
            });
        });
        // Configure the state of the "Add row" button.
        // This button is disabled when there is a filter row available for each condition.
        const addRowButton = this.filterSet.querySelector(Selectors.filterset.actions.addRow);
        const filterDataNode = this.filterSet.querySelectorAll(Selectors.data.fields.all);
        if (filterDataNode.length <= filters.length) {
            addRowButton.setAttribute('disabled', 'disabled');
        } else {
            addRowButton.removeAttribute('disabled');
        }
        if (filters.length === 1) {
            this.filterSet.querySelector(Selectors.filterset.regions.filtermatch).classList.add('hidden');
            this.filterSet.querySelector(Selectors.filterset.fields.join).value = 2;
            this.filterSet.dataset.filterverb = 2;
        } else {
            this.filterSet.querySelector(Selectors.filterset.regions.filtermatch).classList.remove('hidden');
        }
    }
    /**
     * Update the Dynamic table based upon the current filter.
     *
     * @param {bool} validate Should we validate the filters? We might want to skip this if the filters won't have changed,
     *     for example for pagination/sorting.
     */
    updateTableFromFilter(validate = true) {
        const pendingPromise = new Pending('core/datafilter:updateTableFromFilter');
        const filters = {};
        let valid = true;
        Object.values(this.activeFilters).forEach(filter => {
            if (validate) {
                valid = valid && filter.validate();
            }
            filters[filter.filterValue.name] = filter.filterValue;
        });
        if (validate) {
            valid = valid && document.querySelector(Selectors.filter.region).closest('form').reportValidity();
        }
        if (this.applyCallback && valid) {
            this.applyCallback(filters, pendingPromise);
        } else {
            pendingPromise.resolve();
        }
    }
    /**
     * Fetch the strings used to populate the fieldset legends for the maximum number of filters possible.
     *
     * @return {array}
     */
    async getAvailableFilterLegends() {
        const maxFilters = document.querySelector(Selectors.data.typeListSelect).length - 1;
        let requests = [];
        [...Array(maxFilters)].forEach((_, rowIndex) => {
            requests.push({
                "key": "filterrowlegend",
                "component": "core",
                // Add 1 since rows begin at 1 (index begins at zero).
                "param": rowIndex + 1
            });
        });
        const legendStrings = await getStrings(requests)
            .then(fetchedStrings => {
                return fetchedStrings;
            })
            .catch(Notification.exception);
        return legendStrings;
    }
    /**
     * Update the list of join types for a filter.
     *
     * This will update the list of join types based on the allowed types defined for a filter.
     * If only one type is allowed, the list will be hidden.
     *
     * @param {Array} filterJoinList Array of join types, a subset of the regularJoinList array in this function.
     * @param {Element} filterRow The row being updated.
     */
    updateJoinList(filterJoinList, filterRow) {
        const regularJoinList = [0, 1, 2];
        // If a join list was specified for this filter, find the default join list and disable the options that are not allowed
        // for this filter.
        if (filterJoinList.length !== 0) {
            const joinField = filterRow.querySelector(Selectors.filter.fields.join);
            // Check each option from the default list, and disable the option in this filter row if it is not allowed
            // for this filter.
            regularJoinList.forEach((join) => {
                if (!filterJoinList.includes(join)) {
                    joinField.options[join].classList.add('hidden');
                    joinField.options[join].disabled = true;
                }
            });
            // Now remove the disabled options, and hide the select list of there is only one option left.
            joinField.options.forEach((element, index) => {
                if (element.disabled) {
                    joinField.options[index] = null;
                }
            });
            if (joinField.options.length === 1) {
                joinField.hidden = true;
            }
        }
    }
}