admin/tool/monitor/amd/src/dropdown.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.  * Dropdown handler for the Event monitor tool.
  18.  *
  19.  * @module     tool_monitor/dropdown
  20.  * @copyright  2023 Andrew Lyons <andrew@nicols.co.uk>
  21.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22.  */
  24. export const init = () => {
  25.     const componentSelector = document.querySelector('[data-field="component"]');
  26.     const eventSelector = document.querySelector('[data-field="eventname"]');
  28.     const matchesComponent = (component, event) => event.startsWith(`\\${component}\\`);
  30.     // Helper to fetch events for a component.
  31.     const getEventsForComponent = (component) => {
  32.         const events = Object.entries(JSON.parse(eventSelector.dataset.eventlist));
  33.         return events.filter(([eventName], index) => {
  34.             // Always return the Choose... option.
  35.             if (index === 0) {
  36.                 return true;
  37.             }
  38.             return matchesComponent(component, eventName);
  39.         });
  40.     };
  42.     // Helper to fetch the <option> elements for a compoment.
  43.     const getEventOptionsForComponent = (component) => {
  44.         return getEventsForComponent(component).map(([name, description]) => {
  45.             const option = document.createElement('option');
  46.             option.value = name;
  47.             option.text = description;
  48.             return option;
  49.         });
  50.     };
  52.     // Change handler for the component selector.
  53.     componentSelector.addEventListener('change', () => {
  54.         eventSelector.innerHTML = '';
  55.         getEventOptionsForComponent(componentSelector.value).forEach((option) => {
  56.             eventSelector.options.add(option);
  57.         });
  58.         eventSelector.options.value = '';
  59.     });
  61.     // Set the initial value.
  62.     // Rather than emptying the list and re-adding as the change handler does, remove any options that don't match.
  63.     // This means that the current selection (when editing) is maintained.
  64.     const initialCount = eventSelector.options.length;
  65.     [...eventSelector.options].reverse().forEach((option, index) => {
  66.         if (option.value === '') {
  67.             // The first value is the "Choose..." pseudo-option.
  68.             return;
  69.         }
  70.         if (!matchesComponent(componentSelector.value, option.value)) {
  71.             eventSelector.options.remove(initialCount - index - 1);
  72.         }
  73.     });
  74. };