MDL-75148 mod_data: Enable Use preset button when one is selected

The 'Use preset' button will be enabled only when a preset is selected.

mod/data/amd/src/selectpreset.js

@@ -21,10 +21,8 @@
  * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
-import Notification from 'core/notification';
-import {get_string as getString} from 'core/str';
-
 const selectors = {
+    presetRadioButton: 'input[name="fullname"]',
     selectPresetButton: 'input[name="selectpreset"]',
     selectedPresetRadioButton: 'input[name="fullname"]:checked',
 };
@@ -33,22 +31,41 @@ const selectors = {
  * Initialize module.
  */
 export const init = () => {
-    const selectPresetButton = document.querySelector(selectors.selectPresetButton);
-
-    selectPresetButton.addEventListener('click', event => {
-        event.preventDefault();
-        // Validate whether there is a selected preset before submitting the form.
-        if (document.querySelectorAll(selectors.selectedPresetRadioButton).length > 0) {
-            const presetsForm = event.target.closest('form');
-            presetsForm.submit();
-        } else {
-            // No selected presets. Display an error message to user.
-            getString('presetnotselected', 'mod_data').then((str) => {
-                return Notification.addNotification({
-                    type: 'error',
-                    message: str
-                });
-            }).catch(Notification.exception);
-        }
+    const radioButton = document.querySelectorAll(selectors.presetRadioButton);
+
+    // Initialize the "Use preset" button properly.
+    disableUsePresetButton();
+
+    radioButton.forEach((elem) => {
+        elem.addEventListener('change', function(event) {
+            event.preventDefault();
+            // Enable the "Use preset" button when any of the radio buttons in the presets list is checked.
+            disableUsePresetButton();
+        });
     });
+
+};
+
+/**
+ * Decide whether to disable or not the "Use preset" button.
+ * When there is no preset selected, the button should be displayed disabled; otherwise, it will appear enabled as a primary button.
+ *
+ * @method
+ * @private
+ */
+const disableUsePresetButton = () => {
+    let selectPresetButton = document.querySelector(selectors.selectPresetButton);
+    const selectedRadioButton = document.querySelectorAll(selectors.selectedPresetRadioButton);
+
+    if (selectedRadioButton.length > 0) {
+        // There is one preset selected, so the button should be enabled.
+        selectPresetButton.removeAttribute('disabled');
+        selectPresetButton.classList.remove('btn-secondary');
+        selectPresetButton.classList.add('btn-primary');
+    } else {
+        // There is no any preset selected, so the button should be disabled.
+        selectPresetButton.setAttribute('disabled', true);
+        selectPresetButton.classList.remove('btn-primary');
+        selectPresetButton.classList.add('btn-secondary');
+    }
 };