MDL-79629 reportbuilder: enhance condition/filter selection in editor.

Enhance the select element used for each with the autocomplete module.

Co-authored-by: Mikel Martín <[email protected]>

reportbuilder/amd/src/local/editor/conditions.js

@@ -24,8 +24,8 @@
 "use strict";
 
 import $ from 'jquery';
-import CustomEvents from 'core/custom_interaction_events';
 import {dispatchEvent} from 'core/event_dispatcher';
+import AutoComplete from 'core/form-autocomplete';
 import 'core/inplace_editable';
 import Notification from 'core/notification';
 import Pending from 'core/pending';
@@ -69,10 +69,13 @@ const reloadSettingsConditionsRegion = (reportElement, templateContext) => {
  * Initialise conditions form, must be called on each init because the form container is re-created when switching editor modes
  */
 const initConditionsForm = () => {
-    CustomEvents.define(reportSelectors.actions.reportAddCondition, [CustomEvents.events.accessibleChange]);
+    const reportElement = document.querySelector(reportSelectors.regions.report);
+
+    // Enhance condition selector.
+    const reportAddCondition = reportElement.querySelector(reportSelectors.actions.reportAddCondition);
+    AutoComplete.enhance(reportAddCondition, false, '', getString('selectacondition', 'core_reportbuilder'));
 
     // Handle dynamic conditions form.
-    const reportElement = document.querySelector(reportSelectors.regions.report);
     const conditionFormContainer = reportElement.querySelector(reportSelectors.regions.settingsConditions);
     if (!conditionFormContainer) {
         return;
@@ -134,6 +137,7 @@ export const init = initialized => {
         'resetall',
         'resetconditions',
         'resetconditionsconfirm',
+        'selectacondition',
     ]);
 
     prefetchStrings('core', [
@@ -145,14 +149,14 @@ export const init = initialized => {
         return;
     }
 
-    // Add condition to report. Use custom events helper to ensure consistency across platforms.
-    $(document).on(CustomEvents.events.accessibleChange, reportSelectors.actions.reportAddCondition, event => {
+    // Add condition to report.
+    document.addEventListener('change', event => {
         const reportAddCondition = event.target.closest(reportSelectors.actions.reportAddCondition);
         if (reportAddCondition) {
             event.preventDefault();
 
             // Check if dropdown is closed with no condition selected.
-            if (reportAddCondition.selectedIndex === 0) {
+            if (reportAddCondition.value === "" || reportAddCondition.value === "0") {
                 return;
             }
 

reportbuilder/amd/src/local/editor/filters.js

@@ -24,7 +24,7 @@
 "use strict";
 
 import $ from 'jquery';
-import CustomEvents from 'core/custom_interaction_events';
+import AutoComplete from 'core/form-autocomplete';
 import 'core/inplace_editable';
 import Notification from 'core/notification';
 import Pending from 'core/pending';
@@ -65,7 +65,11 @@ const reloadSettingsFiltersRegion = (reportElement, templateContext) => {
  * Initialise filters form, must be called on each init because the form container is re-created when switching editor modes
  */
 const initFiltersForm = () => {
-    CustomEvents.define(reportSelectors.actions.reportAddFilter, [CustomEvents.events.accessibleChange]);
+    const reportElement = document.querySelector(reportSelectors.regions.report);
+
+    // Enhance filter selector.
+    const reportAddFilter = reportElement.querySelector(reportSelectors.actions.reportAddFilter);
+    AutoComplete.enhance(reportAddFilter, false, '', getString('selectafilter', 'core_reportbuilder'));
 };
 
 /**
@@ -80,6 +84,7 @@ export const init = initialized => {
         'filteradded',
         'filterdeleted',
         'filtermoved',
+        'selectafilter',
     ]);
 
     prefetchStrings('core', [
@@ -91,14 +96,14 @@ export const init = initialized => {
         return;
     }
 
-    // Add filter to report. Use custom events helper to ensure consistency across platforms.
-    $(document).on(CustomEvents.events.accessibleChange, reportSelectors.actions.reportAddFilter, event => {
+    // Add filter to report.
+    document.addEventListener('change', event => {
         const reportAddFilter = event.target.closest(reportSelectors.actions.reportAddFilter);
         if (reportAddFilter) {
             event.preventDefault();
 
             // Check if dropdown is closed with no filter selected.
-            if (reportAddFilter.selectedIndex === 0) {
+            if (reportAddFilter.value === "" || reportAddFilter.value === "0") {
                 return;
             }
 

reportbuilder/templates/local/settings/conditions.mustache

@@ -41,17 +41,16 @@
 <div class="p-2" data-region="settings-conditions">
     {{#conditions}}
         {{#hasavailableconditions}}
-            <div>
+            <div class="reportbuilder-conditions-select">
                 <label for="addconditionselect" class="sr-only">{{#str}} selectacondition, core_reportbuilder {{/str}}</label>
                 <select id="addconditionselect" data-action="report-add-condition" class="w-100 custom-select">
-                    <option value="0">{{#str}} selectacondition, core_reportbuilder {{/str}}&hellip;</option>
+                    <option value="0"></option>
                     {{#availableconditions}}
                         {{#optiongroup}}
-                            <optgroup label="{{text}}">
-                                {{#values}}
-                                    <option value="{{value}}">{{visiblename}}</option>
-                                {{/values}}
-                            </optgroup>
+                            <option disabled class="suggestions-heading">{{text}}</option>
+                            {{#values}}
+                                <option value="{{value}}">{{visiblename}}</option>
+                            {{/values}}
                         {{/optiongroup}}
                     {{/availableconditions}}
                 </select>

reportbuilder/templates/local/settings/filters.mustache

@@ -45,17 +45,16 @@
 <div class="p-2" data-region="settings-filters">
     {{#filters}}
         {{#hasavailablefilters}}
-            <div>
+            <div class="reportbuilder-filters-select">
                 <label for="addfilterselect" class="sr-only">{{#str}}selectafilter, core_reportbuilder{{/str}}</label>
                 <select id="addfilterselect" name="addfilterselect" data-action="report-add-filter" class="w-100 custom-select">
-                    <option value="0">{{#str}}selectafilter, core_reportbuilder{{/str}}&hellip;</option>
+                    <option value="0"></option>
                     {{#availablefilters}}
                         {{#optiongroup}}
-                            <optgroup label="{{text}}">
-                                {{#values}}
-                                    <option value="{{value}}">{{visiblename}}</option>
-                                {{/values}}
-                            </optgroup>
+                            <option disabled class="suggestions-heading">{{text}}</option>
+                            {{#values}}
+                                <option value="{{value}}">{{visiblename}}</option>
+                            {{/values}}
                         {{/optiongroup}}
                     {{/availablefilters}}
                 </select>

theme/boost/scss/moodle/reportbuilder.scss

@@ -216,6 +216,21 @@ $rb-right-sidebar-width: 350px !default;
         width: $rb-right-sidebar-width;
         flex-shrink: 0;
     }
+
+    // Improve autocomplete styles.
+    div[data-region="settings-conditions"] .reportbuilder-conditions-select,
+    div[data-region="settings-filters"] .reportbuilder-filters-select {
+        .form-autocomplete-selection {
+            display: none;
+        }
+        .form-autocomplete-input {
+            width: 100%;
+        }
+        .form-autocomplete-suggestions {
+            width: calc(100% - 2 * #{map-get($spacers, 2)});
+        }
+    }
+
     .list-group-item {
         padding: .75rem;
         .icon {

theme/boost/style/moodle.css

@@ -37998,6 +37998,18 @@ div.editor_atto_toolbar button .icon {
     flex-shrink: 0;
   }
 }
+.reportbuilder-sidebar-settings div[data-region=settings-conditions] .reportbuilder-conditions-select .form-autocomplete-selection,
+.reportbuilder-sidebar-settings div[data-region=settings-filters] .reportbuilder-filters-select .form-autocomplete-selection {
+  display: none;
+}
+.reportbuilder-sidebar-settings div[data-region=settings-conditions] .reportbuilder-conditions-select .form-autocomplete-input,
+.reportbuilder-sidebar-settings div[data-region=settings-filters] .reportbuilder-filters-select .form-autocomplete-input {
+  width: 100%;
+}
+.reportbuilder-sidebar-settings div[data-region=settings-conditions] .reportbuilder-conditions-select .form-autocomplete-suggestions,
+.reportbuilder-sidebar-settings div[data-region=settings-filters] .reportbuilder-filters-select .form-autocomplete-suggestions {
+  width: calc(100% - 2 * 0.5rem);
+}
 .reportbuilder-sidebar-settings .list-group-item {
   padding: 0.75rem;
 }

theme/classic/style/moodle.css

@@ -37932,6 +37932,18 @@ div.editor_atto_toolbar button .icon {
     flex-shrink: 0;
   }
 }
+.reportbuilder-sidebar-settings div[data-region=settings-conditions] .reportbuilder-conditions-select .form-autocomplete-selection,
+.reportbuilder-sidebar-settings div[data-region=settings-filters] .reportbuilder-filters-select .form-autocomplete-selection {
+  display: none;
+}
+.reportbuilder-sidebar-settings div[data-region=settings-conditions] .reportbuilder-conditions-select .form-autocomplete-input,
+.reportbuilder-sidebar-settings div[data-region=settings-filters] .reportbuilder-filters-select .form-autocomplete-input {
+  width: 100%;
+}
+.reportbuilder-sidebar-settings div[data-region=settings-conditions] .reportbuilder-conditions-select .form-autocomplete-suggestions,
+.reportbuilder-sidebar-settings div[data-region=settings-filters] .reportbuilder-filters-select .form-autocomplete-suggestions {
+  width: calc(100% - 2 * 0.5rem);
+}
 .reportbuilder-sidebar-settings .list-group-item {
   padding: 0.75rem;
 }