MDL-73699 qbank_editquestion: Question status UI/UX update

This commit implements a question status UI/UX change in the question bank page
from clickable popup link to dropdown following moodle UI/UX policy.

question/bank/editquestion/amd/src/question_status.js

@@ -22,114 +22,43 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
-import Fragment from 'core/fragment';
-import * as Str from 'core/str';
-import ModalFactory from 'core/modal_factory';
-import Notification from 'core/notification';
-import ModalEvents from 'core/modal_events';
 import Ajax from 'core/ajax';
-
-/**
- * Get the fragment.
- *
- * @method getFragment
- * @param {{questioned: Number}} args
- * @param {Number} contextId
- * @return {String}
- */
-const getFragment = (args, contextId) => {
-    return Fragment.loadFragment('qbank_editquestion', 'question_status', contextId, args);
-};
+import Notification from 'core/notification';
 
 /**
  * Set the question status.
  *
  * @param {Number} questionId The question id.
- * @param {String} formData The question tag form data in a URI encoded param string
+ * @param {String} status The updated question status.
  * @return {Array} The modified question status
  */
-const setQuestionStatus = (questionId, formData) => Ajax.call([{
+const setQuestionStatus = (questionId, status) => Ajax.call([{
     methodname: 'qbank_editquestion_set_status',
     args: {
         questionid: questionId,
-        formdata: formData
+        status: status
     }
 }])[0];
 
-/**
- * Save the status.
- *
- * @method getFragment
- * @param {object} modal
- * @param {Number} questionId
- * @param {HTMLElement} target
- */
-const save = (modal, questionId, target) => {
-    const formData = modal.getBody().find('form').serialize();
-
-    setQuestionStatus(questionId, formData)
-        .then(result => {
-            if (result.status) {
-                target.innerText = result.statusname;
-            }
-            return;
-        })
-        .catch(Notification.exception);
-};
-
-/**
- * Event listeners for the module.
- *
- * @method clickEvent
- * @param {Number} questionId
- * @param {Number} contextId
- * @param {HTMLElement} target
- */
-const statusEvent = (questionId, contextId, target) => {
-    let args = {
-        questionid: questionId
-    };
-    getStatusModal(args, contextId)
-        .then((modal) => {
-            modal.show();
-            let root = modal.getRoot();
-            root.on(ModalEvents.save, function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                save(modal, questionId, target);
-                modal.hide();
-            });
-            return modal;
-        })
-        .catch(Notification.exception);
-};
-
-/**
- * Get the status modal to display.
- *
- * @param {{questionid: Number}} args
- * @param {Number} contextId
- * @return {HTMLElement}
- */
-const getStatusModal = (args, contextId) => ModalFactory.create({
-    type: ModalFactory.types.SAVE_CANCEL,
-    title: Str.get_string('questionstatusheader', 'qbank_editquestion'),
-    body: getFragment(args, contextId),
-    large: false,
-});
-
 /**
  * Entrypoint of the js.
  *
  * @method init
- * @param {String} questionSelector the question status identifier.
- * @param {Number} contextId The context id of the question.
+ * @param {Number} questionId Question id.
  */
-export const init = (questionSelector, contextId) => {
-    let target = document.querySelector(questionSelector);
-    let questionId = target.getAttribute('data-questionid');
-    target.addEventListener('click', () => {
-        // Call for the event listener to listed for clicks in any usage count row.
-        statusEvent(questionId, contextId, target);
+export const init = (questionId) => {
+    let target = document.querySelector('#question_status_dropdown-' + questionId);
+    target.addEventListener('change', (e) => {
+        const questionStatus = e.target.value;
+        setQuestionStatus(questionId, questionStatus)
+        .then((response) => {
+            if (response.error) {
+                Notification.addNotification({
+                    type: 'error',
+                    message: response.error
+                });
+            }
+            return;
+        }).catch();
     });
 };