MDL-75837 core_grades: Group search widget within a dropdown

Modifications that will enable the group search widget to be rendered
within a dropdown element.

grade/amd/build/searchwidget/group.min.js

@@ -1,10 +1,10 @@
-define("core_grades/searchwidget/group",["exports","core/pending","core/templates","core/custom_interaction_events","core_grades/searchwidget/repository","core_grades/searchwidget/basewidget","core/str"],(function(_exports,_pending,Templates,_custom_interaction_events,Repository,WidgetBase,_str){function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}return newObj.default=obj,cache&&cache.set(obj,newObj),newObj}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}
+define("core_grades/searchwidget/group",["exports","core/pending","core/templates","core_grades/searchwidget/repository","core_grades/searchwidget/basewidget","jquery","core_grades/searchwidget/selectors"],(function(_exports,_pending,Templates,Repository,WidgetBase,_jquery,Selectors){function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}return newObj.default=obj,cache&&cache.set(obj,newObj),newObj}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}
 /**
-   * A small modal to search groups within the gradebook.
+   * A widget to search groups within the gradebook.
    *
    * @module    core_grades/searchwidget/group
    * @copyright 2022 Mathew May <mathew.solutions>
    * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_pending=_interopRequireDefault(_pending),Templates=_interopRequireWildcard(Templates),_custom_interaction_events=_interopRequireDefault(_custom_interaction_events),Repository=_interopRequireWildcard(Repository),WidgetBase=_interopRequireWildcard(WidgetBase);let registered=!1;_exports.init=()=>{if(registered)return;const pendingPromise=new _pending.default;registerListenerEvents(),pendingPromise.resolve(),registered=!0};const registerListenerEvents=()=>{const events=["click",_custom_interaction_events.default.events.activate,_custom_interaction_events.default.events.keyboardActivate];_custom_interaction_events.default.define(document,events);let{bodyPromiseResolver:bodyPromiseResolver,bodyPromise:bodyPromise}=WidgetBase.promisesAndResolvers();events.forEach((event=>{document.addEventListener(event,(async e=>{const trigger=e.target.closest(".groupwidget");if(trigger){const courseID=trigger.dataset.courseid,actionBaseUrl=trigger.dataset.actionBaseUrl;e.preventDefault();const data=await Repository.groupFetch(courseID,actionBaseUrl).catch((async e=>{const errorTemplateData={errormessage:e.message};bodyPromiseResolver(await Templates.render("core_grades/searchwidget/error",errorTemplateData))}));if(data===[])return;WidgetBase.init(bodyPromise,data.groups,searchGroups(),(0,_str.get_string)("selectagroup","core"))}}))})),bodyPromiseResolver(Templates.render("core_grades/searchwidget/group/groupsearch_body",[]))},searchGroups=()=>()=>(groups,searchTerm)=>{if(""===searchTerm)return groups;searchTerm=searchTerm.toLowerCase();const searchResults=[];return groups.forEach((group=>{group.name.toLowerCase().includes(searchTerm)&&searchResults.push(group)})),searchResults}}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_pending=_interopRequireDefault(_pending),Templates=_interopRequireWildcard(Templates),Repository=_interopRequireWildcard(Repository),WidgetBase=_interopRequireWildcard(WidgetBase),_jquery=_interopRequireDefault(_jquery),Selectors=_interopRequireWildcard(Selectors);let registered=!1;_exports.init=()=>{if(registered)return;const pendingPromise=new _pending.default;registerListenerEvents(),pendingPromise.resolve(),registered=!0};const registerListenerEvents=()=>{let{bodyPromiseResolver:bodyPromiseResolver,bodyPromise:bodyPromise}=WidgetBase.promisesAndResolvers();const dropdownMenuContainer=document.querySelector(Selectors.elements.getSearchWidgetDropdownSelector("group"));(0,_jquery.default)(Selectors.elements.getSearchWidgetSelector("group")).on("show.bs.dropdown",(async e=>{const courseID=e.relatedTarget.dataset.courseid,actionBaseUrl=e.relatedTarget.dataset.actionBaseUrl;await WidgetBase.showLoader(dropdownMenuContainer);const data=await Repository.groupFetch(courseID,actionBaseUrl).catch((async e=>{const errorTemplateData={errormessage:e.message};bodyPromiseResolver(await Templates.render("core_grades/searchwidget/error",errorTemplateData))}));data!==[]&&await WidgetBase.init(dropdownMenuContainer,bodyPromise,data.groups,searchGroups())})),bodyPromiseResolver(Templates.render("core_grades/searchwidget/group/groupsearch_body",[])),(0,_jquery.default)(Selectors.elements.getSearchWidgetSelector("group")).on("hide.bs.dropdown",(()=>{dropdownMenuContainer.innerHTML=""}))},searchGroups=()=>()=>(groups,searchTerm)=>{if(""===searchTerm)return groups;searchTerm=searchTerm.toLowerCase();const searchResults=[];return groups.forEach((group=>{group.name.toLowerCase().includes(searchTerm)&&searchResults.push(group)})),searchResults}}));
 
 //# sourceMappingURL=group.min.js.map

grade/amd/src/searchwidget/group.js

@@ -14,7 +14,7 @@
 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 
 /**
- * A small modal to search groups within the gradebook.
+ * A widget to search groups within the gradebook.
  *
  * @module    core_grades/searchwidget/group
  * @copyright 2022 Mathew May <mathew.solutions>
@@ -23,10 +23,10 @@
 
 import Pending from 'core/pending';
 import * as Templates from 'core/templates';
-import CustomEvents from "core/custom_interaction_events";
 import * as Repository from 'core_grades/searchwidget/repository';
 import * as WidgetBase from 'core_grades/searchwidget/basewidget';
-import {get_string as getString} from 'core/str';
+import $ from 'jquery';
+import * as Selectors from 'core_grades/searchwidget/selectors';
 
 /**
  * Whether the event listener has already been registered for this module.
@@ -58,25 +58,17 @@ export const init = () => {
  * @method registerListenerEvents
  */
 const registerListenerEvents = () => {
-    const events = [
-        'click',
-        CustomEvents.events.activate,
-        CustomEvents.events.keyboardActivate
-    ];
-    CustomEvents.define(document, events);
-
     let {bodyPromiseResolver, bodyPromise} = WidgetBase.promisesAndResolvers();
+    const dropdownMenuContainer = document.querySelector(Selectors.elements.getSearchWidgetDropdownSelector('group'));
 
-    // Register events.
-    events.forEach((event) => {
-        document.addEventListener(event, async(e) => {
-            const trigger = e.target.closest('.groupwidget');
-            if (trigger) {
-                const courseID = trigger.dataset.courseid;
-                const actionBaseUrl = trigger.dataset.actionBaseUrl;
-                e.preventDefault();
+    // Handle the 'shown.bs.dropdown' event (Fired when the dropdown menu is fully displayed).
+    $(Selectors.elements.getSearchWidgetSelector('group')).on('show.bs.dropdown', async(e) => {
+        const courseID = e.relatedTarget.dataset.courseid;
+        const actionBaseUrl = e.relatedTarget.dataset.actionBaseUrl;
+        // Display a loading icon in the dropdown menu container until the body promise is resolved.
+        await WidgetBase.showLoader(dropdownMenuContainer);
 
-                // If an error occurs while fetching the data, display the error within the modal.
+        // If an error occurs while fetching the data, display the error within the dropdown menu.
         const data = await Repository.groupFetch(courseID, actionBaseUrl).catch(async(e) => {
             const errorTemplateData = {
                 'errormessage': e.message
@@ -89,20 +81,25 @@ const registerListenerEvents = () => {
         if (data === []) {
             return;
         }
-                WidgetBase.init(
+        await WidgetBase.init(
+            dropdownMenuContainer,
             bodyPromise,
             data.groups,
             searchGroups(),
-                    getString('selectagroup', 'core')
         );
-            }
     });
-    });
-    // Resolvers for passed functions in the modal creation.
+
+    // Resolvers for passed functions in the dropdown creation.
     bodyPromiseResolver(Templates.render(
         'core_grades/searchwidget/group/groupsearch_body',
         []
     ));
+
+    // Handle the 'hide.bs.dropdown' event (Fired when the dropdown menu is being closed).
+    $(Selectors.elements.getSearchWidgetSelector('group')).on('hide.bs.dropdown', () => {
+        // Reset the state once the groups menu dropdown is closed.
+        dropdownMenuContainer.innerHTML = '';
+    });
 };
 
 /**

grade/templates/group_selector.mustache

@@ -33,8 +33,8 @@
         "selectedgroup": "Group 1"
     }
 }}
-<div class="group-selector d-flex">
-    <div role="button" class="groupwidget btn dropdown-toggle d-flex text-left align-items-center p-0" data-courseid="{{courseid}}" data-action-base-url="{{groupactionbaseurl}}" data-searchtype="group" tabindex="0">
+<div class="search-widget d-flex dropdown" data-searchtype="group">
+    <button aria-expanded="false" data-toggle="dropdown" class="btn dropdown-toggle d-flex text-left align-items-center p-0" data-courseid="{{courseid}}" data-action-base-url="{{groupactionbaseurl}}">
         <div class="align-items-center d-flex">
             <div class="d-block pr-3">
                 <span class="d-block small">
@@ -45,5 +45,7 @@
                 </span>
             </div>
         </div>
+    </button>
+    <div class="dropdown-menu narrow">
     </div>
 </div>