@elice/material-quiz 1.250514.0 → 1.250521.0

package/cjs/components/material-quiz/MaterialQuizImage.js

@@ -10,6 +10,7 @@ var apiClient = require('@elice/api-client');
 var designTokens = require('@elice/design-tokens');
 var fileClient = require('@elice/file-client');
 var intl = require('@elice/intl');
+var types = require('@elice/types');
 var material = require('@mui/material');
 var reactQuery = require('@tanstack/react-query');
 var index = require('../../helpers/index.js');
@@ -43,7 +44,8 @@ var MaterialQuizImage = function MaterialQuizImage(_ref) {
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
     lecture = _useMaterialQuizState.lecture,
     materialQuiz = _useMaterialQuizState.materialQuiz,
-    userId = _useMaterialQuizState.userId;
+    userId = _useMaterialQuizState.userId,
+    userRole = _useMaterialQuizState.userRole;
   var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
     onSubmit = _useMaterialQuizDispa.onSubmit,
     onNext = _useMaterialQuizDispa.onNext,
@@ -203,20 +205,6 @@ var MaterialQuizImage = function MaterialQuizImage(_ref) {
       return _ref3.apply(this, arguments);
     };
   }();
-  //
-  //
-  //
-  reactUse.useMount(function () {
-    setIsInitialLoading(false);
-  });
-  //
-  //
-  //
-  React__default.default.useEffect(function () {
-    if (materialQuizResponse === null || materialQuizResponse === void 0 ? void 0 : materialQuizResponse.resourceId) {
-      setUploadResourceId(materialQuizResponse === null || materialQuizResponse === void 0 ? void 0 : materialQuizResponse.resourceId);
-    }
-  }, [materialQuizResponse === null || materialQuizResponse === void 0 ? void 0 : materialQuizResponse.resourceId]);
   /**
    *
    */
@@ -267,6 +255,104 @@ var MaterialQuizImage = function MaterialQuizImage(_ref) {
     }
     return renderResourceIdController();
   };
+  /**
+   *
+   */
+  var handleReset = /*#__PURE__*/function () {
+    var _ref4 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee3() {
+      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (materialQuiz) {
+              _context3.next = 2;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 2:
+            setSubmitStatus('pending');
+            _context3.prev = 3;
+            _context3.next = 6;
+            return apiClient.getOrgMaterialQuizResponseReset({
+              materialQuizId: materialQuiz.id
+            });
+          case 6:
+            setUploadResourceId(null);
+            setHasSubmitted(false);
+            void refreshOrgMaterialQuiz();
+            setSubmitStatus('resolved');
+            _context3.next = 16;
+            break;
+          case 12:
+            _context3.prev = 12;
+            _context3.t0 = _context3["catch"](3);
+            console.error(_context3.t0);
+            setSubmitStatus('rejected');
+          case 16:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3, null, [[3, 12]]);
+    }));
+    return function handleReset() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  /**
+   *
+   */
+  var getFooterActions = function getFooterActions() {
+    var actions = [];
+    var userAboveHeadTA = userRole && userRole >= types.enums.CourseRole.HeadTA;
+    // reset button
+    if (userAboveHeadTA && materialQuizResponse) {
+      actions.push({
+        border: false,
+        children: intl$1.formatMessage({
+          id: 'materialQuiz.reset'
+        }),
+        disabled: isDisabled,
+        loading: submitStatus === 'pending',
+        tabIndex: 0,
+        transparent: false,
+        onClick: handleReset,
+        customStyles: {
+          backgroundColor: theme.palette.secondary.main,
+          color: theme.palette.secondary.contrastText
+        }
+      });
+    }
+    // submit button
+    actions.push({
+      border: false,
+      children: intl$1.formatMessage({
+        id: 'materialQuiz.submit'
+      }),
+      disabled: isDisabled,
+      loading: submitStatus === 'pending',
+      tabIndex: 0,
+      transparent: false,
+      onClick: handleSubmit,
+      customStyles: {
+        backgroundColor: isNextActive ? theme.palette.primary.main : isDisabled ? designTokens.base.color.gray6 : theme.palette.primary.main,
+        color: isNextActive ? theme.palette.primary.contrastText : isDisabled ? designTokens.base.color.gray3 : theme.palette.primary.contrastText
+      }
+    });
+    return actions;
+  };
+  //
+  //
+  //
+  reactUse.useMount(function () {
+    setIsInitialLoading(false);
+  });
+  //
+  //
+  //
+  React__default.default.useEffect(function () {
+    if (materialQuizResponse === null || materialQuizResponse === void 0 ? void 0 : materialQuizResponse.resourceId) {
+      setUploadResourceId(materialQuizResponse === null || materialQuizResponse === void 0 ? void 0 : materialQuizResponse.resourceId);
+    }
+  }, [materialQuizResponse === null || materialQuizResponse === void 0 ? void 0 : materialQuizResponse.resourceId]);
   //
   //
   //
@@ -283,21 +369,7 @@ var MaterialQuizImage = function MaterialQuizImage(_ref) {
     isNextActive: isNextActive,
     materialQuizResponse: materialQuizResponse,
     onHint: onHint,
-    footerActions: [{
-      border: false,
-      children: intl$1.formatMessage({
-        id: 'materialQuiz.submit'
-      }),
-      disabled: isDisabled,
-      loading: submitStatus === 'pending',
-      tabIndex: 0,
-      transparent: false,
-      onClick: handleSubmit,
-      customStyles: {
-        backgroundColor: isNextActive ? theme.palette.primary.main : isDisabled ? designTokens.base.color.gray6 : theme.palette.primary.main,
-        color: isNextActive ? theme.palette.primary.contrastText : isDisabled ? designTokens.base.color.gray3 : theme.palette.primary.contrastText
-      }
-    }],
+    footerActions: getFooterActions(),
     children: jsxRuntime.jsxs(material.Stack, {
       height: "100%",
       gap: "1rem",

package/cjs/components/material-quiz/MaterialQuizSelectMultiple.js

@@ -8,6 +8,7 @@ var React = require('react');
 var apiClient = require('@elice/api-client');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
+var types = require('@elice/types');
 var material = require('@mui/material');
 var element = require('../../constant/element.js');
 var index = require('../../helpers/index.js');
@@ -32,6 +33,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+//
+//
+//
 var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple(_ref) {
   var hasInlinePassage = _ref.hasInlinePassage;
   // context
@@ -39,7 +43,8 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple(_ref) {
     course = _useMaterialQuizState.course,
     lecture = _useMaterialQuizState.lecture,
     materialQuiz = _useMaterialQuizState.materialQuiz,
-    userId = _useMaterialQuizState.userId;
+    userId = _useMaterialQuizState.userId,
+    userRole = _useMaterialQuizState.userRole;
   var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
     onSubmit = _useMaterialQuizDispa.onSubmit,
     onNext = _useMaterialQuizDispa.onNext,
@@ -75,7 +80,9 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple(_ref) {
     setHasSubmitted = _React$useState10[1];
   var isNextActive = hasSubmitted && typeof onNext === 'function';
   var isDisabled = selectedAnswer.length === 0 || index.checkUserLectureTestEnded(lecture) || !!userId;
-  // answer select handler
+  /**
+   * answer select handler
+   */
   var handleAnswerSelect = function handleAnswerSelect(index$1) {
     if (index.checkUserLectureTestEnded(lecture) || !!userId) {
       return;
@@ -90,61 +97,9 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple(_ref) {
       return newState;
     });
   };
-  // quiz response fetcher
-  React__default.default.useEffect(function () {
-    if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
-      var controller = new AbortController();
-      var signal = controller.signal;
-      apiClient.getOrgMaterialQuizResponseGet({
-        quizResponseId: materialQuiz.lastQuizResponseId
-      }, {
-        signal: signal
-      }).then(function (response) {
-        setMaterialQuizResponse(response.quizResponse);
-        // when user submitted answers and not get the result yet, update selected options (for example, test quiz)
-        // when is is a survey type quiz
-        if (!index.shouldResetOptions({
-          materialQuizResponse: response.quizResponse
-        })) {
-          setSelectedAnswer(response.quizResponse.answer);
-        }
-        setSelectedAnswer(response.quizResponse.answer);
-      }).catch(function (error) {
-        console.error(error);
-      });
-      return function () {
-        return controller.abort();
-      };
-    }
-  }, [materialQuiz, userId]);
-  // quiz response fetcher
-  React__default.default.useEffect(function () {
-    if (userId && materialQuiz) {
-      var controller = new AbortController();
-      var signal = controller.signal;
-      apiClient.getOrgMaterialQuizResponseList({
-        materialQuizId: materialQuiz.id,
-        filterUserIds: [userId],
-        isContainOnlyLast: true,
-        isIncludeAnswer: true,
-        offset: 0,
-        count: 1
-      }, {
-        signal: signal
-      }).then(function (response) {
-        var quizResponse = response.quizResponses[0];
-        var quizResponseAnswer = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer;
-        setMaterialQuizResponse(quizResponse);
-        setSelectedAnswer(Array.isArray(quizResponseAnswer) ? quizResponseAnswer : []);
-      }).catch(function (error) {
-        console.error(error);
-      });
-      return function () {
-        return controller.abort();
-      };
-    }
-  }, [materialQuiz, userId]);
-  // submit handler
+  /**
+   * submit handler
+   */
   var handleSubmit = /*#__PURE__*/function () {
     var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
       var _yield$postOrgMateria, quizResponseId, _yield$getOrgMaterial, quizResponse;
@@ -199,6 +154,153 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+  /**
+   *
+   */
+  var handleReset = /*#__PURE__*/function () {
+    var _ref3 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2() {
+      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (materialQuiz) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            setSubmitStatus('pending');
+            _context2.prev = 3;
+            _context2.next = 6;
+            return apiClient.getOrgMaterialQuizResponseReset({
+              materialQuizId: materialQuiz.id
+            });
+          case 6:
+            setIsActive(false);
+            setSelectedAnswer([]);
+            setMaterialQuizResponse(undefined);
+            setHasSubmitted(false);
+            void refreshOrgMaterialQuiz();
+            setSubmitStatus('resolved');
+            _context2.next = 18;
+            break;
+          case 14:
+            _context2.prev = 14;
+            _context2.t0 = _context2["catch"](3);
+            console.error(_context2.t0);
+            setSubmitStatus('rejected');
+          case 18:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[3, 14]]);
+    }));
+    return function handleReset() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  /**
+   *
+   */
+  var getFooterActions = function getFooterActions() {
+    var actions = [];
+    var userAboveHeadTA = userRole && userRole >= types.enums.CourseRole.HeadTA;
+    // reset button
+    if (userAboveHeadTA && materialQuizResponse) {
+      actions.push({
+        border: false,
+        children: intl$1.formatMessage({
+          id: 'materialQuiz.reset'
+        }),
+        disabled: isDisabled,
+        loading: submitStatus === 'pending',
+        tabIndex: 0,
+        transparent: false,
+        onClick: handleReset,
+        customStyles: {
+          backgroundColor: theme.palette.secondary.main,
+          color: theme.palette.secondary.contrastText
+        }
+      });
+    }
+    // submit button
+    actions.push({
+      border: false,
+      disabled: isDisabled,
+      loading: submitStatus === 'pending',
+      tabIndex: 0,
+      transparent: false,
+      onClick: handleSubmit,
+      children: intl$1.formatMessage({
+        id: 'materialQuiz.submit'
+      }),
+      customStyles: {
+        backgroundColor: isNextActive ? theme.palette.primary.main : isDisabled ? designTokens.base.color.gray6 : theme.palette.primary.main,
+        color: isNextActive ? theme.palette.primary.contrastText : isDisabled ? designTokens.base.color.gray3 : theme.palette.primary.contrastText
+      }
+    });
+    return actions;
+  };
+  //
+  // quiz response fetcher
+  //
+  React__default.default.useEffect(function () {
+    if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
+      var controller = new AbortController();
+      var signal = controller.signal;
+      apiClient.getOrgMaterialQuizResponseGet({
+        quizResponseId: materialQuiz.lastQuizResponseId
+      }, {
+        signal: signal
+      }).then(function (response) {
+        setMaterialQuizResponse(response.quizResponse);
+        // when user submitted answers and not get the result yet, update selected options (for example, test quiz)
+        // when is is a survey type quiz
+        if (!index.shouldResetOptions({
+          materialQuizResponse: response.quizResponse
+        })) {
+          setSelectedAnswer(response.quizResponse.answer);
+        }
+        setSelectedAnswer(response.quizResponse.answer);
+      }).catch(function (error) {
+        console.error(error);
+      });
+      return function () {
+        return controller.abort();
+      };
+    }
+  }, [materialQuiz, userId]);
+  //
+  // quiz response fetcher
+  //
+  React__default.default.useEffect(function () {
+    if (userId && materialQuiz) {
+      var controller = new AbortController();
+      var signal = controller.signal;
+      apiClient.getOrgMaterialQuizResponseList({
+        materialQuizId: materialQuiz.id,
+        filterUserIds: [userId],
+        isContainOnlyLast: true,
+        isIncludeAnswer: true,
+        offset: 0,
+        count: 1
+      }, {
+        signal: signal
+      }).then(function (response) {
+        var quizResponse = response.quizResponses[0];
+        var quizResponseAnswer = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer;
+        setMaterialQuizResponse(quizResponse);
+        setSelectedAnswer(Array.isArray(quizResponseAnswer) ? quizResponseAnswer : []);
+      }).catch(function (error) {
+        console.error(error);
+      });
+      return function () {
+        return controller.abort();
+      };
+    }
+  }, [materialQuiz, userId]);
+  //
+  //
+  //
   return jsxRuntime.jsx(QuestionBox.default, {
     title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
     titlePrefix: "Q.",
@@ -213,21 +315,7 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple(_ref) {
       status: submitStatus
     }),
     bodyContainerRef: containerRef,
-    footerActions: [{
-      border: false,
-      disabled: isDisabled,
-      loading: submitStatus === 'pending',
-      tabIndex: 0,
-      transparent: false,
-      onClick: handleSubmit,
-      children: intl$1.formatMessage({
-        id: 'materialQuiz.submit'
-      }),
-      customStyles: {
-        backgroundColor: isNextActive ? theme.palette.primary.main : isDisabled ? designTokens.base.color.gray6 : theme.palette.primary.main,
-        color: isNextActive ? theme.palette.primary.contrastText : isDisabled ? designTokens.base.color.gray3 : theme.palette.primary.contrastText
-      }
-    }],
+    footerActions: getFooterActions(),
     children: jsxRuntime.jsxs(material.Stack, {
       height: "100%",
       gap: "1rem",