blocks/myoverview/amd/src/view_nav.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.  * Manage the timeline view navigation for the overview block.
  18.  *
  19.  * @copyright  2018 Bas Brands <bas@moodle.com>
  20.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  21.  */
  23. import $ from 'jquery';
  24. import * as CustomEvents from 'core/custom_interaction_events';
  25. import Notification from 'core/notification';
  26. import {setUserPreference} from 'core_user/repository';
  27. import * as View from 'block_myoverview/view';
  28. import SELECTORS from 'block_myoverview/selectors';
  30. /**
  31.  * Update the user preference for the block.
  32.  *
  33.  * @param {String} filter The type of filter: display/sort/grouping.
  34.  * @param {String} value The current preferred value.
  35.  * @return {Promise}
  36.  */
  37. const updatePreferences = (filter, value) => {
  38.     let type = null;
  39.     if (filter === 'display') {
  40.         type = 'block_myoverview_user_view_preference';
  41.     } else if (filter === 'sort') {
  42.         type = 'block_myoverview_user_sort_preference';
  43.     } else if (filter === 'customfieldvalue') {
  44.         type = 'block_myoverview_user_grouping_customfieldvalue_preference';
  45.     } else {
  46.         type = 'block_myoverview_user_grouping_preference';
  47.     }
  49.     return setUserPreference(type, value)
  50.         .catch(Notification.exception);
  51. };
  53. /**
  54.  * Event listener for the Display filter (cards, list).
  55.  *
  56.  * @param {object} root The root element for the overview block
  57.  */
  58. const registerSelector = root => {
  60.     const Selector = root.find(SELECTORS.FILTERS);
  62.     CustomEvents.define(Selector, [CustomEvents.events.activate]);
  63.     Selector.on(
  64.         CustomEvents.events.activate,
  65.         SELECTORS.FILTER_OPTION,
  66.         (e, data) => {
  67.             const option = $(e.target);
  69.             if (option.hasClass('active')) {
  70.                 // If it's already active then we don't need to do anything.
  71.                 return;
  72.             }
  74.             const filter = option.attr('data-filter');
  75.             const pref = option.attr('data-pref');
  76.             const customfieldvalue = option.attr('data-customfieldvalue');
  78.             root.find(SELECTORS.courseView.region).attr('data-' + filter, option.attr('data-value'));
  79.             updatePreferences(filter, pref);
  81.             if (customfieldvalue) {
  82.                 root.find(SELECTORS.courseView.region).attr('data-customfieldvalue', customfieldvalue);
  83.                 updatePreferences('customfieldvalue', customfieldvalue);
  84.             }
  86.             // Reset the views.
  88.             // Check if the user is currently in a searching state, if so we'll reset it.
  89.             const page = document.querySelector(SELECTORS.region.selectBlock);
  90.             const input = page.querySelector(SELECTORS.region.searchInput);
  91.             if (input.value !== '') {
  92.                 const clearIcon = page.querySelector(SELECTORS.region.clearIcon);
  93.                 input.value = '';
  94.                 // Triggers the init so wont need to call it again.
  95.                 View.clearSearch(clearIcon, root);
  96.             } else {
  97.                 View.init(root);
  98.             }
  100.             data.originalEvent.preventDefault();
  101.         }
  102.     );
  104.     Selector.on(
  105.         CustomEvents.events.activate,
  106.         SELECTORS.DISPLAY_OPTION,
  107.         (e, data) => {
  108.             const option = $(e.target);
  110.             if (option.hasClass('active')) {
  111.                 return;
  112.             }
  114.             const filter = option.attr('data-display-option');
  115.             const pref = option.attr('data-pref');
  117.             root.find(SELECTORS.courseView.region).attr('data-display', option.attr('data-value'));
  118.             updatePreferences(filter, pref);
  119.             View.reset(root);
  120.             data.originalEvent.preventDefault();
  121.         }
  122.     );
  123. };
  125. /**
  126.  * Initialise the timeline view navigation by adding event listeners to
  127.  * the navigation elements.
  128.  *
  129.  * @param {object} root The root element for the myoverview block
  130.  */
  131. export const init = root => {
  132.     root = $(root);
  133.     registerSelector(root);
  134. };