MDL-75837 gradereport_singleview: Grade item search within a dropdown

Modifications that will enable the grade item search widget to be
rendered within a dropdown element.
This commit is contained in:
Mihail Geshoski 2022-11-03 13:03:08 +08:00
parent 94b0fac776
commit 24d0beacc7
4 changed files with 46 additions and 48 deletions

View File

@ -1,10 +1,10 @@
define("gradereport_singleview/grade",["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("gradereport_singleview/grade",["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 users within the gradebook.
* A small modal to search grade items within the gradebook.
*
* @module gradereport_singleview
* @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);_exports.init=()=>{const pendingPromise=new _pending.default;registerListenerEvents(),pendingPromise.resolve()};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(".gradewidget");if(trigger){const courseID=trigger.dataset.courseid;e.preventDefault();const data=await Repository.gradeitemFetch(courseID).catch((async e=>{const errorTemplateData={errormessage:e.message};bodyPromiseResolver(await Templates.render("core_grades/searchwidget/error",errorTemplateData))}));if(data===[]||void 0===data)return;WidgetBase.init(bodyPromise,data.gradeitems,searchGradeitems(),(0,_str.get_string)("selectagrade","gradereport_singleview"))}}))})),bodyPromiseResolver(Templates.render("gradereport_singleview/gradesearch_body",[]))},searchGradeitems=()=>()=>(modules,searchTerm)=>{if(""===searchTerm)return modules;searchTerm=searchTerm.toLowerCase();const searchResults=[];return modules.forEach((module=>{module.name.toLowerCase().includes(searchTerm)&&searchResults.push(module)})),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);_exports.init=()=>{const pendingPromise=new _pending.default;registerListenerEvents(),pendingPromise.resolve()};const registerListenerEvents=()=>{let{bodyPromiseResolver:bodyPromiseResolver,bodyPromise:bodyPromise}=WidgetBase.promisesAndResolvers();const dropdownMenuContainer=document.querySelector(Selectors.elements.getSearchWidgetDropdownSelector("grade"));(0,_jquery.default)(Selectors.elements.getSearchWidgetSelector("grade")).on("show.bs.dropdown",(async e=>{const courseID=e.relatedTarget.dataset.courseid;await WidgetBase.showLoader(dropdownMenuContainer);const data=await Repository.gradeitemFetch(courseID).catch((async e=>{const errorTemplateData={errormessage:e.message};bodyPromiseResolver(await Templates.render("core_grades/searchwidget/error",errorTemplateData))}));data!==[]&&(await WidgetBase.init(dropdownMenuContainer,bodyPromise,data.gradeitems,searchGradeitems()),bodyPromiseResolver(Templates.render("gradereport_singleview/gradesearch_body",[])))})),(0,_jquery.default)(Selectors.elements.getSearchWidgetSelector("grade")).on("hide.bs.dropdown",(()=>{dropdownMenuContainer.innerHTML=""}))},searchGradeitems=()=>()=>(modules,searchTerm)=>{if(""===searchTerm)return modules;searchTerm=searchTerm.toLowerCase();const searchResults=[];return modules.forEach((module=>{module.name.toLowerCase().includes(searchTerm)&&searchResults.push(module)})),searchResults}}));
//# sourceMappingURL=grade.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -14,7 +14,7 @@
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* A small modal to search users within the gradebook.
* A small modal to search grade items within the gradebook.
*
* @module gradereport_singleview
* @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';
/**
* Our entry point into starting to build the search widget.
@ -46,50 +46,46 @@ 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('grade'));
// Register events.
events.forEach((event) => {
document.addEventListener(event, async(e) => {
const trigger = e.target.closest('.gradewidget');
if (trigger) {
const courseID = trigger.dataset.courseid;
e.preventDefault();
// Handle the 'shown.bs.dropdown' event (Fired when the dropdown menu is fully displayed).
$(Selectors.elements.getSearchWidgetSelector('grade')).on('show.bs.dropdown', async(e) => {
const courseID = e.relatedTarget.dataset.courseid;
// 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.
const data = await Repository.gradeitemFetch(courseID).catch(async(e) => {
const errorTemplateData = {
'errormessage': e.message
};
bodyPromiseResolver(
await Templates.render('core_grades/searchwidget/error', errorTemplateData)
);
});
// Early return if there is no module data.
if (data === [] || data === undefined) {
return;
}
WidgetBase.init(
bodyPromise,
data.gradeitems,
searchGradeitems(),
getString('selectagrade', 'gradereport_singleview')
);
}
// If an error occurs while fetching the data, display the error within the modal.
const data = await Repository.gradeitemFetch(courseID).catch(async(e) => {
const errorTemplateData = {
'errormessage': e.message
};
bodyPromiseResolver(
await Templates.render('core_grades/searchwidget/error', errorTemplateData)
);
});
// Early return if there is no module data.
if (data === []) {
return;
}
await WidgetBase.init(
dropdownMenuContainer,
bodyPromise,
data.gradeitems,
searchGradeitems()
);
// Resolvers for passed functions in the modal creation.
bodyPromiseResolver(Templates.render('gradereport_singleview/gradesearch_body', []));
});
// Handle the 'hide.bs.dropdown' event (Fired when the dropdown menu is being closed).
$(Selectors.elements.getSearchWidgetSelector('grade')).on('hide.bs.dropdown', () => {
// Reset the state once the grade item menu dropdown is closed.
dropdownMenuContainer.innerHTML = '';
});
// Resolvers for passed functions in the modal creation.
bodyPromiseResolver(Templates.render(
'gradereport_singleview/gradesearch_body',
[]
));
};
/**

View File

@ -29,8 +29,8 @@
}
}
}}
<div class="grade-selector d-flex">
<div role="button" class="gradewidget btn dropdown-toggle d-flex text-left align-items-center p-0" data-courseid="{{courseid}}" data-searchtype="grade" tabindex="0" aria-label="{{#str}} selectagrade, gradereport_singleview {{/str}}">
<div class="search-widget dropdown d-flex" data-searchtype="grade">
<button aria-expanded="false" data-toggle="dropdown" class="btn dropdown-toggle d-flex text-left align-items-center p-0" data-courseid="{{courseid}}" aria-label="{{#str}} selectagrade, gradereport_singleview {{/str}}">
<div class="align-items-center d-flex">
{{#selectedoption}}
<div class="d-block pr-3">
@ -48,5 +48,7 @@
</div>
{{/selectedoption}}
</div>
</button>
<div class="dropdown-menu wide">
</div>
</div>