MDL-68977 user: Add pendingPromise to interactions
[moodle.git] / user / amd / src / participantsfilter.js
CommitLineData
77ba77f1
AN
1// This file is part of Moodle - http://moodle.org/
2//
3// Moodle is free software: you can redistribute it and/or modify
4// it under the terms of the GNU General Public License as published by
5// the Free Software Foundation, either version 3 of the License, or
6// (at your option) any later version.
7//
8// Moodle is distributed in the hope that it will be useful,
9// but WITHOUT ANY WARRANTY; without even the implied warranty of
10// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11// GNU General Public License for more details.
12//
13// You should have received a copy of the GNU General Public License
14// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
15
16/**
17 * Participants filter managemnet.
18 *
19 * @module core_user/participants_filter
20 * @package core_user
21 * @copyright 2020 Andrew Nicols <andrew@nicols.co.uk>
22 * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
23 */
24
25import CourseFilter from './local/participantsfilter/filtertypes/courseid';
26import * as DynamicTable from 'core_table/dynamic';
27import GenericFilter from './local/participantsfilter/filter';
3d60881d 28import {get_strings as getStrings} from 'core/str';
77ba77f1 29import Notification from 'core/notification';
cb2f6725 30import Pending from 'core/pending';
77ba77f1
AN
31import Selectors from './local/participantsfilter/selectors';
32import Templates from 'core/templates';
33
34/**
35 * Initialise the participants filter on the element with the given id.
36 *
37 * @param {String} participantsRegionId
38 */
39export const init = participantsRegionId => {
40 // Keep a reference to the filterset.
41 const filterSet = document.querySelector(`#${participantsRegionId}`);
42
43 // Keep a reference to all of the active filters.
44 const activeFilters = {
45 courseid: new CourseFilter('courseid', filterSet),
46 };
47
48 /**
49 * Get the filter list region.
50 *
51 * @return {HTMLElement}
52 */
53 const getFilterRegion = () => filterSet.querySelector(Selectors.filterset.regions.filterlist);
54
55 /**
56 * Add an unselected filter row.
57 *
58 * @return {Promise}
59 */
60 const addFilterRow = () => {
cb2f6725
AN
61 const pendingPromise = new Pending('core_user/participantsfilter:addFilterRow');
62
3d60881d
MH
63 const rownum = 1 + getFilterRegion().querySelectorAll(Selectors.filter.region).length;
64 return Templates.renderForPromise('core_user/local/participantsfilter/filterrow', {"rownumber": rownum})
77ba77f1
AN
65 .then(({html, js}) => {
66 const newContentNodes = Templates.appendNodeContents(getFilterRegion(), html, js);
67
68 return newContentNodes;
69 })
70 .then(filterRow => {
71 // Note: This is a nasty hack.
72 // We should try to find a better way of doing this.
73 // We do not have the list of types in a readily consumable format, so we take the pre-rendered one and copy
74 // it in place.
75 const typeList = filterSet.querySelector(Selectors.data.typeList);
76
77 filterRow.forEach(contentNode => {
78 const contentTypeList = contentNode.querySelector(Selectors.filter.fields.type);
79
80 if (contentTypeList) {
81 contentTypeList.innerHTML = typeList.innerHTML;
82 }
83 });
84
85 return filterRow;
86 })
87 .then(filterRow => {
88 updateFiltersOptions();
89
90 return filterRow;
91 })
cb2f6725
AN
92 .then(result => {
93 pendingPromise.resolve();
94
95 return result;
96 })
77ba77f1
AN
97 .catch(Notification.exception);
98 };
99
100 /**
101 * Get the filter data source node fro the specified filter type.
102 *
103 * @param {String} filterType
104 * @return {HTMLElement}
105 */
106 const getFilterDataSource = filterType => {
107 const filterDataNode = filterSet.querySelector(Selectors.filterset.regions.datasource);
108
109 return filterDataNode.querySelector(Selectors.data.fields.byName(filterType));
110 };
111
112 /**
113 * Add a filter to the list of active filters, performing any necessary setup.
114 *
115 * @param {HTMLElement} filterRow
116 * @param {String} filterType
084c955e
AN
117 * @param {Array} initialFilterValues The initially selected values for the filter
118 * @returns {Filter}
77ba77f1 119 */
084c955e 120 const addFilter = async(filterRow, filterType, initialFilterValues) => {
77ba77f1
AN
121 // Name the filter on the filter row.
122 filterRow.dataset.filterType = filterType;
123
124 const filterDataNode = getFilterDataSource(filterType);
125
126 // Instantiate the Filter class.
127 let Filter = GenericFilter;
128 if (filterDataNode.dataset.filterTypeClass) {
129 Filter = await import(filterDataNode.dataset.filterTypeClass);
130 }
084c955e 131 activeFilters[filterType] = new Filter(filterType, filterSet, initialFilterValues);
77ba77f1
AN
132
133 // Disable the select.
134 const typeField = filterRow.querySelector(Selectors.filter.fields.type);
084c955e 135 typeField.value = filterType;
77ba77f1
AN
136 typeField.disabled = 'disabled';
137
138 // Update the list of available filter types.
139 updateFiltersOptions();
084c955e
AN
140
141 return activeFilters[filterType];
77ba77f1
AN
142 };
143
144 /**
145 * Get the registered filter class for the named filter.
146 *
147 * @param {String} name
148 * @return {Object} See the Filter class.
149 */
150 const getFilterObject = name => {
151 return activeFilters[name];
152 };
153
154 /**
155 * Remove or replace the specified filter row and associated class, ensuring that if there is only one filter row,
156 * that it is replaced instead of being removed.
157 *
158 * @param {HTMLElement} filterRow
159 */
160 const removeOrReplaceFilterRow = filterRow => {
161 const filterCount = getFilterRegion().querySelectorAll(Selectors.filter.region).length;
162
163 if (filterCount === 1) {
164 replaceFilterRow(filterRow);
165 } else {
166 removeFilterRow(filterRow);
167 }
168 };
169
170 /**
171 * Remove the specified filter row and associated class.
172 *
173 * @param {HTMLElement} filterRow
174 */
3d60881d 175 const removeFilterRow = async filterRow => {
8503e0ee
AN
176 const filterType = filterRow.querySelector(Selectors.filter.fields.type);
177 const hasFilterValue = !!filterType.value;
178
77ba77f1
AN
179 // Remove the filter object.
180 removeFilterObject(filterRow.dataset.filterType);
181
182 // Remove the actual filter HTML.
183 filterRow.remove();
184
77ba77f1
AN
185 // Update the list of available filter types.
186 updateFiltersOptions();
3d60881d 187
8503e0ee
AN
188 if (hasFilterValue) {
189 // Refresh the table if there was any content in this row.
190 updateTableFromFilter();
191 }
c36f37df 192
3d60881d
MH
193 // Update filter fieldset legends.
194 const filterLegends = await getAvailableFilterLegends();
195
196 getFilterRegion().querySelectorAll(Selectors.filter.region).forEach((filterRow, index) => {
197 filterRow.querySelector('legend').innerText = filterLegends[index];
198 });
199
77ba77f1
AN
200 };
201
202 /**
203 * Replace the specified filter row with a new one.
204 *
205 * @param {HTMLElement} filterRow
3d60881d 206 * @param {Number} rowNum The number used to label the filter fieldset legend (eg Row 1). Defaults to 1 (the first filter).
77ba77f1
AN
207 * @return {Promise}
208 */
3d60881d 209 const replaceFilterRow = (filterRow, rowNum = 1) => {
77ba77f1
AN
210 // Remove the filter object.
211 removeFilterObject(filterRow.dataset.filterType);
212
3d60881d 213 return Templates.renderForPromise('core_user/local/participantsfilter/filterrow', {"rownumber": rowNum})
77ba77f1
AN
214 .then(({html, js}) => {
215 const newContentNodes = Templates.replaceNode(filterRow, html, js);
216
217 return newContentNodes;
218 })
219 .then(filterRow => {
220 // Note: This is a nasty hack.
221 // We should try to find a better way of doing this.
222 // We do not have the list of types in a readily consumable format, so we take the pre-rendered one and copy
223 // it in place.
224 const typeList = filterSet.querySelector(Selectors.data.typeList);
225
226 filterRow.forEach(contentNode => {
227 const contentTypeList = contentNode.querySelector(Selectors.filter.fields.type);
228
229 if (contentTypeList) {
230 contentTypeList.innerHTML = typeList.innerHTML;
231 }
232 });
233
234 return filterRow;
235 })
236 .then(filterRow => {
237 updateFiltersOptions();
238
239 return filterRow;
240 })
241 .then(filterRow => {
242 // Refresh the table.
243 updateTableFromFilter();
244
245 return filterRow;
246 })
247 .catch(Notification.exception);
248 };
249
250 /**
251 * Remove the Filter Object from the register.
252 *
253 * @param {string} filterName The name of the filter to be removed
254 */
255 const removeFilterObject = filterName => {
256 if (filterName) {
257 const filter = getFilterObject(filterName);
258 if (filter) {
259 filter.tearDown();
260
261 // Remove from the list of active filters.
262 delete activeFilters[filterName];
263 }
264 }
265 };
266
267 /**
268 * Remove all filters.
084c955e
AN
269 *
270 * @returns {Promise}
77ba77f1 271 */
084c955e 272 const removeAllFilters = () => {
cb2f6725
AN
273 const pendingPromise = new Pending('core_user/participantsfilter:setFilterFromConfig');
274
77ba77f1 275 const filters = getFilterRegion().querySelectorAll(Selectors.filter.region);
084c955e 276 filters.forEach(filterRow => removeOrReplaceFilterRow(filterRow));
77ba77f1
AN
277
278 // Refresh the table.
cb2f6725
AN
279 return updateTableFromFilter()
280 .then(result => {
281 pendingPromise.resolve();
282
283 return result;
284 });
084c955e
AN
285 };
286
287 /**
288 * Remove any empty filters.
289 */
290 const removeEmptyFilters = () => {
291 const filters = getFilterRegion().querySelectorAll(Selectors.filter.region);
292 filters.forEach(filterRow => {
293 const filterType = filterRow.querySelector(Selectors.filter.fields.type);
294 if (!filterType.value) {
295 removeOrReplaceFilterRow(filterRow);
296 }
297 });
77ba77f1
AN
298 };
299
300 /**
301 * Update the list of filter types to filter out those already selected.
302 */
303 const updateFiltersOptions = () => {
304 const filters = getFilterRegion().querySelectorAll(Selectors.filter.region);
305 filters.forEach(filterRow => {
306 const options = filterRow.querySelectorAll(Selectors.filter.fields.type + ' option');
307 options.forEach(option => {
308 if (option.value === filterRow.dataset.filterType) {
309 option.classList.remove('hidden');
310 option.disabled = false;
311 } else if (activeFilters[option.value]) {
312 option.classList.add('hidden');
313 option.disabled = true;
314 } else {
315 option.classList.remove('hidden');
316 option.disabled = false;
317 }
318 });
319 });
110f3ebf
AN
320
321 // Configure the state of the "Add row" button.
322 // This button is disabled when there is a filter row available for each condition.
323 const addRowButton = filterSet.querySelector(Selectors.filterset.actions.addRow);
324 const filterDataNode = filterSet.querySelectorAll(Selectors.data.fields.all);
325 if (filterDataNode.length <= filters.length) {
326 addRowButton.setAttribute('disabled', 'disabled');
327 } else {
328 addRowButton.removeAttribute('disabled');
329 }
330
331 if (filters.length === 1) {
332 filterSet.querySelector(Selectors.filterset.regions.filtermatch).classList.add('hidden');
333 filterSet.querySelector(Selectors.filterset.fields.join).value = 1;
334 } else {
335 filterSet.querySelector(Selectors.filterset.regions.filtermatch).classList.remove('hidden');
336 }
77ba77f1
AN
337 };
338
084c955e
AN
339 /**
340 * Set the current filter options based on a provided configuration.
341 *
342 * @param {Object} config
343 * @param {Number} config.jointype
344 * @param {Object} config.filters
cb2f6725 345 * @returns {Promise}
084c955e
AN
346 */
347 const setFilterFromConfig = config => {
348 const filterConfig = Object.entries(config.filters);
349
350 if (!filterConfig.length) {
351 // There are no filters to set from.
cb2f6725 352 return Promise.resolve();
084c955e
AN
353 }
354
355 // Set the main join type.
356 filterSet.querySelector(Selectors.filterset.fields.join).value = config.jointype;
357
358 const filterPromises = filterConfig.map(([filterType, filterData]) => {
359 if (filterType === 'courseid') {
360 // The courseid is a special case.
8503e0ee 361 return false;
084c955e
AN
362 }
363
364 const filterValues = filterData.values;
365
366 if (!filterValues.length) {
367 // There are no values for this filter.
368 // Skip it.
8503e0ee 369 return false;
084c955e
AN
370 }
371
372 return addFilterRow().then(([filterRow]) => addFilter(filterRow, filterType, filterValues));
8503e0ee
AN
373 }).filter(promise => promise);
374
375 if (!filterPromises.length) {
cb2f6725 376 return Promise.resolve();
8503e0ee 377 }
084c955e 378
cb2f6725 379 return Promise.all(filterPromises).then(() => {
084c955e
AN
380 return removeEmptyFilters();
381 })
382 .then(updateFiltersOptions)
cb2f6725 383 .then(updateTableFromFilter);
084c955e
AN
384 };
385
77ba77f1
AN
386 /**
387 * Update the Dynamic table based upon the current filter.
388 *
389 * @return {Promise}
390 */
391 const updateTableFromFilter = () => {
cb2f6725
AN
392 const pendingPromise = new Pending('core_user/participantsfilter:updateTableFromFilter');
393
dd9dea61
AN
394 const filters = {};
395 Object.values(activeFilters).forEach(filter => {
396 filters[filter.filterValue.name] = filter.filterValue;
397 });
398
77ba77f1
AN
399 return DynamicTable.setFilters(
400 DynamicTable.getTableFromId(filterSet.dataset.tableRegion),
401 {
dd9dea61
AN
402 jointype: parseInt(filterSet.querySelector(Selectors.filterset.fields.join).value, 10),
403 filters,
77ba77f1 404 }
eb087fc5 405 )
cb2f6725
AN
406 .then(result => {
407 pendingPromise.resolve();
408
409 return result;
410 })
eb087fc5 411 .catch(Notification.exception);
77ba77f1
AN
412 };
413
3d60881d
MH
414 /**
415 * Fetch the strings used to populate the fieldset legends for the maximum number of filters possible.
416 *
417 * @return {array}
418 */
419 const getAvailableFilterLegends = async() => {
420 const maxFilters = document.querySelector(Selectors.data.typeListSelect).length - 1;
421 let requests = [];
422
423 [...Array(maxFilters)].forEach((_, rowIndex) => {
424 requests.push({
425 "key": "filterrowlegend",
426 "component": "core_user",
427 // Add 1 since rows begin at 1 (index begins at zero).
428 "param": rowIndex + 1
429 });
430 });
431
432 const legendStrings = await getStrings(requests)
433 .then(fetchedStrings => {
434 return fetchedStrings;
435 })
436 .catch(Notification.exception);
437
438 return legendStrings;
439 };
440
77ba77f1
AN
441 // Add listeners for the main actions.
442 filterSet.querySelector(Selectors.filterset.region).addEventListener('click', e => {
443 if (e.target.closest(Selectors.filterset.actions.addRow)) {
444 e.preventDefault();
445
446 addFilterRow();
447 }
448
449 if (e.target.closest(Selectors.filterset.actions.applyFilters)) {
450 e.preventDefault();
451
452 updateTableFromFilter();
453 }
454
455 if (e.target.closest(Selectors.filterset.actions.resetFilters)) {
456 e.preventDefault();
457
458 removeAllFilters();
459 }
460 });
461
462 // Add the listener to remove a single filter.
463 filterSet.querySelector(Selectors.filterset.regions.filterlist).addEventListener('click', e => {
464 if (e.target.closest(Selectors.filter.actions.remove)) {
465 e.preventDefault();
466
467 removeOrReplaceFilterRow(e.target.closest(Selectors.filter.region));
468 }
469 });
470
471 // Add listeners for the filter type selection.
472 filterSet.querySelector(Selectors.filterset.regions.filterlist).addEventListener('change', e => {
473 const typeField = e.target.closest(Selectors.filter.fields.type);
474 if (typeField && typeField.value) {
475 const filter = e.target.closest(Selectors.filter.region);
476
477 addFilter(filter, typeField.value);
478 }
479 });
110f3ebf
AN
480
481 filterSet.querySelector(Selectors.filterset.fields.join).addEventListener('change', e => {
482 filterSet.dataset.filterverb = e.target.value;
483 });
084c955e
AN
484
485 const tableRoot = DynamicTable.getTableFromId(filterSet.dataset.tableRegion);
486 const initialFilters = DynamicTable.getFilters(tableRoot);
487 if (initialFilters) {
cb2f6725 488 const initialFilterPromise = new Pending('core_user/participantsfilter:setFilterFromConfig');
084c955e 489 // Apply the initial filter configuration.
cb2f6725
AN
490 setFilterFromConfig(initialFilters)
491 .then(() => initialFilterPromise.resolve())
492 .catch();
084c955e 493 }
77ba77f1 494};