moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-05 00:46:50 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-75837 core_grades: Group search widget within a dropdown

Browse source 
Modifications that will enable the group search widget to be rendered
within a dropdown element.
This commit is contained in:
Mihail Geshoski 2022-10-20 12:12:40 +08:00
parent 64d746ec13
commit d272dcab1d
4 changed files with 44 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

6
grade/amd/build/searchwidget/group.min.js vendored
View file

@ -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 * @module core_grades/searchwidget/group
* @copyright 2022 Mathew May <mathew.solutions> * @copyright 2022 Mathew May <mathew.solutions>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later * @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 //# sourceMappingURL=group.min.js.map

2
grade/amd/build/searchwidget/group.min.js.map
View file

File diff suppressed because one or more lines are too long

75
grade/amd/src/searchwidget/group.js
View file

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

6
grade/templates/group_selector.mustache
View file

@ -33,8 +33,8 @@
"selectedgroup": "Group 1" "selectedgroup": "Group 1"
} }
}} }}
<div class="group-selector d-flex"> <div class="search-widget d-flex dropdown" data-searchtype="group">
<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"> <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="align-items-center d-flex">
<div class="d-block pr-3"> <div class="d-block pr-3">
<span class="d-block small"> <span class="d-block small">
@ -45,5 +45,7 @@
</span> </span>
</div> </div>
</div> </div>
</button>
<div class="dropdown-menu narrow">
</div> </div>
</div> </div>