5de0576c21d62d8ec8d1e3062008e3c96e1dbe68
[moodle.git] / course / amd / src / activitychooser.js
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/>.
16 /**
17  * A type of dialogue used as for choosing modules in a course.
18  *
19  * @module     core_course/activitychooser
20  * @package    core_course
21  * @copyright  2020 Mathew May <mathew.solutions>
22  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
23  */
25 import * as ChooserDialogue from 'core_course/local/activitychooser/dialogue';
26 import * as Repository from 'core_course/local/activitychooser/repository';
27 import selectors from 'core_course/local/activitychooser/selectors';
28 import CustomEvents from 'core/custom_interaction_events';
29 import * as Templates from 'core/templates';
30 import * as ModalFactory from 'core/modal_factory';
31 import {get_string as getString} from 'core/str';
32 import Pending from 'core/pending';
34 // Set up some JS module wide constants that can be added to in the future.
36 // Tab config options.
37 const ALLACTIVITIESRESOURCES = 0;
38 const ONLYALL = 1;
39 const ACTIVITIESRESOURCES = 2;
41 // Module types.
42 const ACTIVITY = 0;
43 const RESOURCE = 1;
45 /**
46  * Set up the activity chooser.
47  *
48  * @method init
49  * @param {Number} courseId Course ID to use later on in fetchModules()
50  * @param {Object} chooserConfig Any PHP config settings that we may need to reference
51  */
52 export const init = (courseId, chooserConfig) => {
53     const pendingPromise = new Pending();
55     registerListenerEvents(courseId, chooserConfig);
57     pendingPromise.resolve();
58 };
60 /**
61  * Once a selection has been made make the modal & module information and pass it along
62  *
63  * @method registerListenerEvents
64  * @param {Number} courseId
65  * @param {Object} chooserConfig Any PHP config settings that we may need to reference
66  */
67 const registerListenerEvents = (courseId, chooserConfig) => {
68     const events = [
69         'click',
70         CustomEvents.events.activate,
71         CustomEvents.events.keyboardActivate
72     ];
74     const fetchModuleData = (() => {
75         let innerPromise = null;
77         return () => {
78             if (!innerPromise) {
79                 innerPromise = new Promise((resolve) => {
80                     resolve(Repository.activityModules(courseId));
81                 });
82             }
84             return innerPromise;
85         };
86     })();
88     const fetchFooterData = (() => {
89         let footerInnerPromise = null;
91         return (sectionId) => {
92             if (!footerInnerPromise) {
93                 footerInnerPromise = new Promise((resolve) => {
94                     resolve(Repository.fetchFooterData(courseId, sectionId));
95                 });
96             }
98             return footerInnerPromise;
99         };
100     })();
102     CustomEvents.define(document, events);
104     // Display module chooser event listeners.
105     events.forEach((event) => {
106         document.addEventListener(event, async(e) => {
107             if (e.target.closest(selectors.elements.sectionmodchooser)) {
108                 let caller;
109                 // We need to know who called this.
110                 // Standard courses use the ID in the main section info.
111                 const sectionDiv = e.target.closest(selectors.elements.section);
112                 // Front page courses need some special handling.
113                 const button = e.target.closest(selectors.elements.sectionmodchooser);
115                 // If we don't have a section ID use the fallback ID.
116                 // We always want the sectionDiv caller first as it keeps track of section ID's after DnD changes.
117                 // The button attribute is always just a fallback for us as the section div is not always available.
118                 // A YUI change could be done maybe to only update the button attribute but we are going for minimal change here.
119                 if (sectionDiv !== null && sectionDiv.hasAttribute('data-sectionid')) {
120                     // We check for attributes just in case of outdated contrib course formats.
121                     caller = sectionDiv;
122                 } else {
123                     caller = button;
124                 }
126                 // We want to show the modal instantly but loading whilst waiting for our data.
127                 let bodyPromiseResolver;
128                 const bodyPromise = new Promise(resolve => {
129                     bodyPromiseResolver = resolve;
130                 });
132                 const footerData = await fetchFooterData(caller.dataset.sectionid);
133                 const sectionModal = buildModal(bodyPromise, footerData);
135                 // Now we have a modal we should start fetching data.
136                 const data = await fetchModuleData();
138                 // Apply the section id to all the module instance links.
139                 const builtModuleData = sectionIdMapper(data, caller.dataset.sectionid, caller.dataset.sectionreturnid);
141                 ChooserDialogue.displayChooser(
142                     sectionModal,
143                     builtModuleData,
144                     partiallyAppliedFavouriteManager(data, caller.dataset.sectionid),
145                     footerData,
146                 );
148                 bodyPromiseResolver(await Templates.render(
149                     'core_course/activitychooser',
150                     templateDataBuilder(builtModuleData, chooserConfig)
151                 ));
152             }
153         });
154     });
155 };
157 /**
158  * Given the web service data and an ID we want to make a deep copy
159  * of the WS data then add on the section ID to the addoption URL
160  *
161  * @method sectionIdMapper
162  * @param {Object} webServiceData Our original data from the Web service call
163  * @param {Number} id The ID of the section we need to append to the links
164  * @param {Number|null} sectionreturnid The ID of the section return we need to append to the links
165  * @return {Array} [modules] with URL's built
166  */
167 const sectionIdMapper = (webServiceData, id, sectionreturnid) => {
168     // We need to take a fresh deep copy of the original data as an object is a reference type.
169     const newData = JSON.parse(JSON.stringify(webServiceData));
170     newData.content_items.forEach((module) => {
171         module.link += '&section=' + id + '&sr=' + (sectionreturnid ?? 0);
172     });
173     return newData.content_items;
174 };
176 /**
177  * Given an array of modules we want to figure out where & how to place them into our template object
178  *
179  * @method templateDataBuilder
180  * @param {Array} data our modules to manipulate into a Templatable object
181  * @param {Object} chooserConfig Any PHP config settings that we may need to reference
182  * @return {Object} Our built object ready to render out
183  */
184 const templateDataBuilder = (data, chooserConfig) => {
185     // Setup of various bits and pieces we need to mutate before throwing it to the wolves.
186     let activities = [];
187     let resources = [];
188     let showAll = true;
189     let showActivities = false;
190     let showResources = false;
192     // Tab mode can be the following [All, Resources & Activities, All & Activities & Resources].
193     const tabMode = parseInt(chooserConfig.tabmode);
195     // Filter the incoming data to find favourite & recommended modules.
196     const favourites = data.filter(mod => mod.favourite === true);
197     const recommended = data.filter(mod => mod.recommended === true);
199     // Both of these modes need Activity & Resource tabs.
200     if ((tabMode === ALLACTIVITIESRESOURCES || tabMode === ACTIVITIESRESOURCES) && tabMode !== ONLYALL) {
201         // Filter the incoming data to find activities then resources.
202         activities = data.filter(mod => mod.archetype === ACTIVITY);
203         resources = data.filter(mod => mod.archetype === RESOURCE);
204         showActivities = true;
205         showResources = true;
207         // We want all of the previous information but no 'All' tab.
208         if (tabMode === ACTIVITIESRESOURCES) {
209             showAll = false;
210         }
211     }
213     // Given the results of the above filters lets figure out what tab to set active.
214     // We have some favourites.
215     const favouritesFirst = !!favourites.length;
216     // We are in tabMode 2 without any favourites.
217     const activitiesFirst = showAll === false && favouritesFirst === false;
218     // We have nothing fallback to show all modules.
219     const fallback = showAll === true && favouritesFirst === false;
221     return {
222         'default': data,
223         showAll: showAll,
224         activities: activities,
225         showActivities: showActivities,
226         activitiesFirst: activitiesFirst,
227         resources: resources,
228         showResources: showResources,
229         favourites: favourites,
230         recommended: recommended,
231         favouritesFirst: favouritesFirst,
232         fallback: fallback,
233     };
234 };
236 /**
237  * Given an object we want to build a modal ready to show
238  *
239  * @method buildModal
240  * @param {Promise} bodyPromise
241  * @param {String|Boolean} footer Either a footer to add or nothing
242  * @return {Object} The modal ready to display immediately and render body in later.
243  */
244 const buildModal = (bodyPromise, footer) => {
245     return ModalFactory.create({
246         type: ModalFactory.types.DEFAULT,
247         title: getString('addresourceoractivity'),
248         body: bodyPromise,
249         footer: footer.customfootertemplate,
250         large: true,
251         templateContext: {
252             classes: 'modchooser'
253         }
254     })
255     .then(modal => {
256         modal.show();
257         return modal;
258     });
259 };
261 /**
262  * A small helper function to handle the case where there are no more favourites
263  * and we need to mess a bit with the available tabs in the chooser
264  *
265  * @method nullFavouriteDomManager
266  * @param {HTMLElement} favouriteTabNav Dom node of the favourite tab nav
267  * @param {HTMLElement} modalBody Our current modals' body
268  */
269 const nullFavouriteDomManager = (favouriteTabNav, modalBody) => {
270     favouriteTabNav.tabIndex = -1;
271     favouriteTabNav.classList.add('d-none');
272     // Need to set active to an available tab.
273     if (favouriteTabNav.classList.contains('active')) {
274         favouriteTabNav.classList.remove('active');
275         favouriteTabNav.setAttribute('aria-selected', 'false');
276         const favouriteTab = modalBody.querySelector(selectors.regions.favouriteTab);
277         favouriteTab.classList.remove('active');
278         const defaultTabNav = modalBody.querySelector(selectors.regions.defaultTabNav);
279         const activitiesTabNav = modalBody.querySelector(selectors.regions.activityTabNav);
280         if (defaultTabNav.classList.contains('d-none') === false) {
281             defaultTabNav.classList.add('active');
282             defaultTabNav.setAttribute('aria-selected', 'true');
283             defaultTabNav.tabIndex = 0;
284             defaultTabNav.focus();
285             const defaultTab = modalBody.querySelector(selectors.regions.defaultTab);
286             defaultTab.classList.add('active');
287         } else {
288             activitiesTabNav.classList.add('active');
289             activitiesTabNav.setAttribute('aria-selected', 'true');
290             activitiesTabNav.tabIndex = 0;
291             activitiesTabNav.focus();
292             const activitiesTab = modalBody.querySelector(selectors.regions.activityTab);
293             activitiesTab.classList.add('active');
294         }
296     }
297 };
299 /**
300  * Export a curried function where the builtModules has been applied.
301  * We have our array of modules so we can rerender the favourites area and have all of the items sorted.
302  *
303  * @method partiallyAppliedFavouriteManager
304  * @param {Array} moduleData This is our raw WS data that we need to manipulate
305  * @param {Number} sectionId We need this to add the sectionID to the URL's in the faves area after rerender
306  * @return {Function} partially applied function so we can manipulate DOM nodes easily & update our internal array
307  */
308 const partiallyAppliedFavouriteManager = (moduleData, sectionId) => {
309     /**
310      * Curried function that is being returned.
311      *
312      * @param {String} internal Internal name of the module to manage
313      * @param {Boolean} favourite Is the caller adding a favourite or removing one?
314      * @param {HTMLElement} modalBody What we need to update whilst we are here
315      */
316     return async(internal, favourite, modalBody) => {
317         const favouriteArea = modalBody.querySelector(selectors.render.favourites);
319         // eslint-disable-next-line max-len
320         const favouriteButtons = modalBody.querySelectorAll(`[data-internal="${internal}"] ${selectors.actions.optionActions.manageFavourite}`);
321         const favouriteTabNav = modalBody.querySelector(selectors.regions.favouriteTabNav);
322         const result = moduleData.content_items.find(({name}) => name === internal);
323         const newFaves = {};
324         if (result) {
325             if (favourite) {
326                 result.favourite = true;
328                 // eslint-disable-next-line camelcase
329                 newFaves.content_items = moduleData.content_items.filter(mod => mod.favourite === true);
331                 const builtFaves = sectionIdMapper(newFaves, sectionId);
333                 const {html, js} = await Templates.renderForPromise('core_course/local/activitychooser/favourites',
334                     {favourites: builtFaves});
336                 await Templates.replaceNodeContents(favouriteArea, html, js);
338                 Array.from(favouriteButtons).forEach((element) => {
339                     element.classList.remove('text-muted');
340                     element.classList.add('text-primary');
341                     element.dataset.favourited = 'true';
342                     element.setAttribute('aria-pressed', true);
343                     element.firstElementChild.classList.remove('fa-star-o');
344                     element.firstElementChild.classList.add('fa-star');
345                 });
347                 favouriteTabNav.classList.remove('d-none');
348             } else {
349                 result.favourite = false;
351                 const nodeToRemove = favouriteArea.querySelector(`[data-internal="${internal}"]`);
353                 nodeToRemove.parentNode.removeChild(nodeToRemove);
355                 Array.from(favouriteButtons).forEach((element) => {
356                     element.classList.add('text-muted');
357                     element.classList.remove('text-primary');
358                     element.dataset.favourited = 'false';
359                     element.setAttribute('aria-pressed', false);
360                     element.firstElementChild.classList.remove('fa-star');
361                     element.firstElementChild.classList.add('fa-star-o');
362                 });
363                 const newFaves = moduleData.content_items.filter(mod => mod.favourite === true);
365                 if (newFaves.length === 0) {
366                     nullFavouriteDomManager(favouriteTabNav, modalBody);
367                 }
368             }
369         }
370     };
371 };