@elice/material-assignment 1.230328.0 → 1.230418.1

package/es/components/material-assignment-admin/MaterialAssignmentAdminContentTa.js

@@ -1,8 +1,9 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { FormattedDate } from 'react-intl';
 import { config, getOrgUserGet, getOrgMaterialAssignmentGet, getOrgMaterialAssignmentSubmissionList, getOrgMaterialAssignmentGradeResultGet, getOrgMaterialAssignmentGradeList, postOrgMaterialAssignmentGradeEdit } from '@elice/api-client';
-import { Notification, Flex, ProfileImage, Hspace, Text, Tooltip, Icon, Vspace, InfoTable, Button, TableNext, Modal, Label, Input, Textarea } from '@elice/blocks';
+import { Flex, ProfileImage, Hspace, Text, Tooltip, Icon, Vspace, InfoTable, Button, TableNext, Notification, Modal, Label, Input, Textarea } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilStatusInfo } from '@elice/icons';
 import { useMaterialConfigApiClientUpdate } from '@elice/material-shared-utils';
@@ -10,129 +11,173 @@ import dayjs from 'dayjs';
 import MaterialAssignmentContainer from '../shared/MaterialAssignmentContainer.js';
 import { StyledMaterialAssignmentAdminHeader, StyledMaterialAssignmentAdminHeaderCell, StyledMaterialAssignmentAdminGradeWrapper } from './MaterialAssignmentAdmin.styled.js';
 
-const MaterialAssignmentAdminContentTa = ({
-  materialAssignmentId,
-  userId,
-  adminUserId
-}) => {
-  var _a; // Form
-
-
-  const gradeEditFormMethods = useForm({
+var MaterialAssignmentAdminContentTa = function MaterialAssignmentAdminContentTa(_ref) {
+  var materialAssignmentId = _ref.materialAssignmentId,
+    userId = _ref.userId,
+    adminUserId = _ref.adminUserId;
+  var _a;
+  // Form
+  var gradeEditFormMethods = useForm({
     defaultValues: {
       score: 0,
       comment: ''
     },
     mode: 'onChange'
-  }); // State related with component
-
-  const [showGradeEditModal, setShowGradeEditModal] = React.useState(false); // State related with api
-
-  const [user, setUser] = React.useState(null);
-  const [materialAssignment, setMaterialAssignment] = React.useState(null);
-  const [userSubmission, setUserSubmission] = React.useState(null);
-  const [gradeResult, setGradeResult] = React.useState(null);
-  const [myGrade, setMyGrade] = React.useState(null);
-  const isAssignmentClosed = dayjs().isAfter(dayjs(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.closeDatetime));
-  const isScoreFinalized = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.scoreFinalizedDatetime);
-  const isUserSubmitted = Boolean(userSubmission); // API Status
-
-  const isReady = useMaterialConfigApiClientUpdate(config.init);
-  const [submissionListGetStatus, setSubmissionListGetStatus] = React.useState('idle');
-  const fetchUserGet = React.useCallback(() => {
+  });
+  // State related with component
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showGradeEditModal = _React$useState2[0],
+    setShowGradeEditModal = _React$useState2[1];
+  // State related with api
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    user = _React$useState4[0],
+    setUser = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    materialAssignment = _React$useState6[0],
+    setMaterialAssignment = _React$useState6[1];
+  var _React$useState7 = React.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    userSubmission = _React$useState8[0],
+    setUserSubmission = _React$useState8[1];
+  var _React$useState9 = React.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    gradeResult = _React$useState10[0],
+    setGradeResult = _React$useState10[1];
+  var _React$useState11 = React.useState(null),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    myGrade = _React$useState12[0],
+    setMyGrade = _React$useState12[1];
+  var isAssignmentClosed = dayjs().isAfter(dayjs(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.closeDatetime));
+  var isScoreFinalized = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.scoreFinalizedDatetime);
+  var isUserSubmitted = Boolean(userSubmission);
+  // API Status
+  var isReady = useMaterialConfigApiClientUpdate(config.init);
+  var _React$useState13 = React.useState('idle'),
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    submissionListGetStatus = _React$useState14[0],
+    setSubmissionListGetStatus = _React$useState14[1];
+  var fetchUserGet = React.useCallback(function () {
     void getOrgUserGet({
-      userId
-    }).then(res => res.user).then(setUser);
+      userId: userId
+    }).then(function (res) {
+      return res.user;
+    }).then(setUser);
   }, [userId]);
-  const fetchMaterialAssignmentGet = React.useCallback(() => {
+  var fetchMaterialAssignmentGet = React.useCallback(function () {
     void getOrgMaterialAssignmentGet({
-      materialAssignmentId
-    }).then(res => res.materialAssignment).then(setMaterialAssignment);
+      materialAssignmentId: materialAssignmentId
+    }).then(function (res) {
+      return res.materialAssignment;
+    }).then(setMaterialAssignment);
   }, [materialAssignmentId]);
-  const fetchSubmissionList = React.useCallback(() => {
+  var fetchSubmissionList = React.useCallback(function () {
     setSubmissionListGetStatus('pending');
     void getOrgMaterialAssignmentSubmissionList({
-      materialAssignmentId,
+      materialAssignmentId: materialAssignmentId,
       offset: 0,
       count: 1,
       filterConditions: {
         isLast: true,
         userIds: [userId]
       }
-    }).then(res => res.materialAssignmentSubmissions[0]).then(submission => {
+    }).then(function (res) {
+      return res.materialAssignmentSubmissions[0];
+    }).then(function (submission) {
       setUserSubmission(submission !== null && submission !== void 0 ? submission : null);
       setSubmissionListGetStatus('resolved');
-    }).catch(err => {
+    }).catch(function (err) {
       console.error(err);
       setSubmissionListGetStatus('rejected');
     });
   }, [materialAssignmentId, userId]);
-  const fetchGradeResult = React.useCallback(() => {
+  var fetchGradeResult = React.useCallback(function () {
     void getOrgMaterialAssignmentGradeResultGet({
-      materialAssignmentId,
-      userId
-    }).then(res => res.materialAssignmentGradeResult).then(setGradeResult).catch(() => {
+      materialAssignmentId: materialAssignmentId,
+      userId: userId
+    }).then(function (res) {
+      return res.materialAssignmentGradeResult;
+    }).then(setGradeResult).catch(function () {
       setGradeResult(null);
     });
   }, [materialAssignmentId, userId]);
-  const fetchMyGrade = React.useCallback(() => {
+  var fetchMyGrade = React.useCallback(function () {
     void getOrgMaterialAssignmentGradeList({
-      materialAssignmentId,
+      materialAssignmentId: materialAssignmentId,
       offset: 0,
       count: 1,
       filterConditions: {
-        userId,
+        userId: userId,
         gradeUserId: adminUserId
       }
-    }).then(res => res.materialAssignmentGrades[0]).then(grade => setMyGrade(grade !== null && grade !== void 0 ? grade : null));
+    }).then(function (res) {
+      return res.materialAssignmentGrades[0];
+    }).then(function (grade) {
+      return setMyGrade(grade !== null && grade !== void 0 ? grade : null);
+    });
   }, [adminUserId, materialAssignmentId, userId]);
-
-  const handleGradeEditClick = () => {
+  var handleGradeEditClick = function handleGradeEditClick() {
     var _a, _b;
-
     setShowGradeEditModal(true);
     gradeEditFormMethods.reset({
       score: (_a = myGrade === null || myGrade === void 0 ? void 0 : myGrade.score) !== null && _a !== void 0 ? _a : 0,
       comment: (_b = myGrade === null || myGrade === void 0 ? void 0 : myGrade.comment) !== null && _b !== void 0 ? _b : ''
     });
   };
-
-  const handleGradeEditSubmit = gradeEditFormMethods.handleSubmit(async ({
-    score,
-    comment
-  }) => {
-    try {
-      await postOrgMaterialAssignmentGradeEdit({
-        materialAssignmentGradeId: myGrade === null || myGrade === void 0 ? void 0 : myGrade.id,
-        materialAssignmentId,
-        userId,
-        score,
-        comment
-      });
-      fetchMyGrade();
-      Notification.success('저장되었습니다');
-    } catch (err) {
-      console.error(err);
-      Notification.error('오류가 발생했습니다.');
-    } finally {
-      setShowGradeEditModal(false);
-    }
-  });
-  React.useEffect(() => {
+  var handleGradeEditSubmit = gradeEditFormMethods.handleSubmit( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref2) {
+      var score, comment;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            score = _ref2.score, comment = _ref2.comment;
+            _context.prev = 1;
+            _context.next = 4;
+            return postOrgMaterialAssignmentGradeEdit({
+              materialAssignmentGradeId: myGrade === null || myGrade === void 0 ? void 0 : myGrade.id,
+              materialAssignmentId: materialAssignmentId,
+              userId: userId,
+              score: score,
+              comment: comment
+            });
+          case 4:
+            fetchMyGrade();
+            Notification.success('저장되었습니다');
+            _context.next = 12;
+            break;
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](1);
+            console.error(_context.t0);
+            Notification.error('오류가 발생했습니다.');
+          case 12:
+            _context.prev = 12;
+            setShowGradeEditModal(false);
+            return _context.finish(12);
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 8, 12, 15]]);
+    }));
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }());
+  React.useEffect(function () {
     if (!isReady) {
       return;
     }
-
     fetchUserGet();
     fetchMyGrade();
     fetchGradeResult();
     fetchSubmissionList();
     fetchMaterialAssignmentGet();
   }, [isReady, fetchUserGet, fetchMyGrade, fetchGradeResult, fetchSubmissionList, fetchMaterialAssignmentGet]);
-
-  const renderHeader = () => {
+  var renderHeader = function renderHeader() {
     var _a;
-
     return React.createElement(StyledMaterialAssignmentAdminHeader, {
       align: "center",
       padding: "1rem",
@@ -155,7 +200,7 @@ const MaterialAssignmentAdminContentTa = ({
     }, "\uC810\uC218"), React.createElement(Text, {
       size: "small",
       role: "white"
-    }, (gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.score) && isScoreFinalized ? `${gradeResult.score}점(공개됨)` : '--')), React.createElement(StyledMaterialAssignmentAdminHeaderCell, null, React.createElement(Text, {
+    }, (gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.score) && isScoreFinalized ? "".concat(gradeResult.score, "\uC810(\uACF5\uAC1C\uB428)") : '--')), React.createElement(StyledMaterialAssignmentAdminHeaderCell, null, React.createElement(Text, {
       size: "tiny",
       role: "gray4"
     }, "\uC81C\uCD9C \uC77C\uC2DC"), React.createElement(Text, {
@@ -168,8 +213,7 @@ const MaterialAssignmentAdminContentTa = ({
       hour12: false
     }) : '--')));
   };
-
-  const renderGradeResult = () => {
+  var renderGradeResult = function renderGradeResult() {
     return React.createElement(StyledMaterialAssignmentAdminGradeWrapper, {
       wrap: true,
       width: "100%",
@@ -181,7 +225,7 @@ const MaterialAssignmentAdminContentTa = ({
       role: "navy1",
       size: "small",
       lineHeight: "1.375rem"
-    }, user ? `${user.fullname} 님의 점수` : null), React.createElement(Hspace, {
+    }, user ? "".concat(user.fullname, " \uB2D8\uC758 \uC810\uC218") : null), React.createElement(Hspace, {
       width: 0.25
     }), React.createElement(Tooltip, {
       useMaxWidth: true,
@@ -195,15 +239,13 @@ const MaterialAssignmentAdminContentTa = ({
     }), React.createElement(Text, {
       bold: true,
       role: "white"
-    }, (gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.score) && isScoreFinalized ? `${gradeResult.score}점(공개됨)` : '--')));
+    }, (gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.score) && isScoreFinalized ? "".concat(gradeResult.score, "\uC810(\uACF5\uAC1C\uB428)") : '--')));
   };
-
-  const renderSubmissionInfo = () => {
-    const statusText = (() => {
+  var renderSubmissionInfo = function renderSubmissionInfo() {
+    var statusText = function () {
       if (submissionListGetStatus === 'pending') {
         return null;
       }
-
       switch (true) {
         case !isUserSubmitted && isAssignmentClosed:
           return React.createElement(Text, {
@@ -211,21 +253,18 @@ const MaterialAssignmentAdminContentTa = ({
             role: "danger",
             size: "small"
           }, "\uC81C\uCD9C \uAE30\uD55C \uB9CC\uB8CC");
-
         case isScoreFinalized:
           return React.createElement(Text, {
             bold: true,
             role: "lightpurple",
             size: "small"
           }, "\uCC44\uC810 \uC644\uB8CC");
-
         case isUserSubmitted:
           return React.createElement(Text, {
             bold: true,
             role: "success",
             size: "small"
           }, "\uC81C\uCD9C\uB428");
-
         case !isUserSubmitted:
           return React.createElement(Text, {
             bold: true,
@@ -233,15 +272,13 @@ const MaterialAssignmentAdminContentTa = ({
             size: "small"
           }, "\uBBF8\uC81C\uCD9C");
       }
-    })();
-
-    const submissionAttachment = (() => {
+    }();
+    var submissionAttachment = function () {
       if (!userSubmission) {
         return '--';
       }
-
       if (userSubmission.assignmentFileUrl) {
-        const assignmentFilename = decodeURIComponent(userSubmission.assignmentFileUrl && new URL(userSubmission.assignmentFileUrl).pathname.split('/').pop() || '');
+        var assignmentFilename = decodeURIComponent(userSubmission.assignmentFileUrl && new URL(userSubmission.assignmentFileUrl).pathname.split('/').pop() || '');
         return React.createElement("a", {
           href: userSubmission.assignmentFileUrl,
           download: assignmentFilename,
@@ -254,7 +291,6 @@ const MaterialAssignmentAdminContentTa = ({
           size: "small"
         }, assignmentFilename));
       }
-
       if (userSubmission === null || userSubmission === void 0 ? void 0 : userSubmission.assignmentUrl) {
         return React.createElement("a", {
           href: userSubmission.assignmentUrl,
@@ -267,8 +303,7 @@ const MaterialAssignmentAdminContentTa = ({
           size: "small"
         }, userSubmission.assignmentUrl));
       }
-    })();
-
+    }();
     return React.createElement(InfoTable, {
       dark: true
     }, React.createElement("tbody", null, React.createElement("tr", null, React.createElement("td", null, "\uC0C1\uD0DC"), React.createElement("td", null, statusText)), React.createElement("tr", null, React.createElement("td", null, "\uACFC\uC81C \uC81C\uCD9C \uAE30\uD55C"), React.createElement("td", null, React.createElement(FormattedDate, {
@@ -283,23 +318,18 @@ const MaterialAssignmentAdminContentTa = ({
       hour12: false
     }) : '--')), React.createElement("tr", null, React.createElement("td", null, "\uC5C5\uB85C\uB4DC\uB41C \uACFC\uC81C"), React.createElement("td", null, submissionAttachment))));
   };
-
-  const renderGrade = () => {
-    const isGradeEditDisabled = !isAssignmentClosed || !isUserSubmitted || isScoreFinalized;
-
-    const tooltipTitle = (() => {
+  var renderGrade = function renderGrade() {
+    var isGradeEditDisabled = !isAssignmentClosed || !isUserSubmitted || isScoreFinalized;
+    var tooltipTitle = function () {
       switch (true) {
         case isScoreFinalized:
           return '공개 이후 채점이 불가합니다.';
-
         case !isAssignmentClosed:
           return '제출 기한이 지난 이후 채점할 수 있습니다.';
-
         case !isUserSubmitted:
           return '미제출인 경우 채점할 수 없습니다.';
       }
-    })();
-
+    }();
     return React.createElement(Flex, {
       column: true,
       align: "center"
@@ -368,12 +398,10 @@ const MaterialAssignmentAdminContentTa = ({
       }] : []
     }));
   };
-
-  const renderGradeEditModal = () => {
+  var renderGradeEditModal = function renderGradeEditModal() {
     if (!showGradeEditModal) {
       return null;
     }
-
     return React.createElement(Modal, {
       title: Boolean(myGrade) ? '내 채점 수정' : '과제 채점',
       footerButtons: [{
@@ -387,11 +415,11 @@ const MaterialAssignmentAdminContentTa = ({
         label: '취소',
         size: 'small',
         role: 'gray1',
-        onClick: () => {
+        onClick: function onClick() {
           setShowGradeEditModal(false);
         }
       }],
-      onHide: () => {
+      onHide: function onHide() {
         setShowGradeEditModal(false);
       }
     }, React.createElement(Label, {
@@ -410,15 +438,16 @@ const MaterialAssignmentAdminContentTa = ({
         min: 0,
         max: 100
       },
-      render: ({
-        field,
-        fieldState
-      }) => React.createElement(Input, Object.assign({}, field, {
-        invalid: fieldState.invalid,
-        size: "small",
-        width: "xsmall",
-        type: "number"
-      }))
+      render: function render(_ref4) {
+        var field = _ref4.field,
+          fieldState = _ref4.fieldState;
+        return React.createElement(Input, Object.assign({}, field, {
+          invalid: fieldState.invalid,
+          size: "small",
+          width: "xsmall",
+          type: "number"
+        }));
+      }
     }), React.createElement(Hspace, {
       width: 0.5
     }), React.createElement(Text, {
@@ -441,17 +470,17 @@ const MaterialAssignmentAdminContentTa = ({
       rules: {
         maxLength: 1000
       },
-      render: ({
-        field
-      }) => React.createElement(Textarea, {
-        value: field.value,
-        wordLimit: 1000,
-        rows: 8,
-        onChange: field.onChange
-      })
+      render: function render(_ref5) {
+        var field = _ref5.field;
+        return React.createElement(Textarea, {
+          value: field.value,
+          wordLimit: 1000,
+          rows: 8,
+          onChange: field.onChange
+        });
+      }
     }));
   };
-
   return React.createElement(React.Fragment, null, renderHeader(), React.createElement(Flex, {
     column: true,
     auto: true,

package/es/components/shared/MaterialAssignmentContainer.js

@@ -3,20 +3,18 @@ import { Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-const StyledMaterialAssignmentContainer = styled.div.withConfig({
+var StyledMaterialAssignmentContainer = styled.div.withConfig({
   componentId: "sc-sdhlog-0"
 })(["height:100%;width:100%;max-width:55rem;border-radius:0.5rem;overflow:hidden;"]);
-const StyledMaterialAssignmentContainerHeader = styled.div.withConfig({
+var StyledMaterialAssignmentContainerHeader = styled.div.withConfig({
   componentId: "sc-sdhlog-1"
 })(["padding:1rem 1.5rem;height:3.5rem;display:flex;align-items:center;background-color:", ";"], base.color.navy7);
-const StyledMaterialAssignmentContainerContent = styled.div.withConfig({
+var StyledMaterialAssignmentContainerContent = styled.div.withConfig({
   componentId: "sc-sdhlog-2"
 })(["padding:1.5rem;overflow-y:auto;height:calc(100% - 3.5rem);background-color:", ";"], base.color.navy8);
-
-const MaterialAssignmentContainer = ({
-  title,
-  children
-}) => {
+var MaterialAssignmentContainer = function MaterialAssignmentContainer(_ref) {
+  var title = _ref.title,
+    children = _ref.children;
   return React.createElement(StyledMaterialAssignmentContainer, null, React.createElement(StyledMaterialAssignmentContainerHeader, null, React.createElement(Text, {
     bold: true,
     role: "navy0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-assignment",
-  "version": "1.230328.0",
+  "version": "1.230418.1",
   "description": "User view and editing components of Elice material assignment",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -29,14 +29,14 @@
     "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
   },
   "peerDependencies": {
-    "@elice/api-client": "1.230306.1",
+    "@elice/api-client": "^1.230413.0",
     "@elice/blocks": "^1.220803.0",
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.220803.0",
     "@elice/markdown": "^1.220803.0",
     "@elice/material-shared-types": "*",
     "@elice/material-shared-utils": "*",
-    "@elice/types": "^1.230306.0",
+    "@elice/types": "^1.230417.0",
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
     "react-intl": "^5.0.0",
     "react-use": "^17.0.0",
@@ -49,15 +49,15 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@elice/api-client": "1.230306.1",
+    "@elice/api-client": "^1.230413.0",
     "@elice/blocks": "^1.220803.0",
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.220803.0",
     "@elice/icons-legacy": "npm:@elice/icons@0.220803.1",
     "@elice/markdown": "^1.220803.0",
-    "@elice/material-shared-types": "1.230328.0",
-    "@elice/material-shared-utils": "1.230328.0",
-    "@elice/types": "^1.230306.0",
+    "@elice/material-shared-types": "1.230418.1",
+    "@elice/material-shared-utils": "1.230418.1",
+    "@elice/types": "^1.230417.0",
     "@types/classnames": "^2.3.1",
     "@types/react": "~17.0.9",
     "@types/styled-components": "^5.1.21",
@@ -66,5 +66,5 @@
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
   },
-  "gitHead": "c24abeffe609385031a77c725bf6e92e47e94b56"
+  "gitHead": "9c1ccec857ef44c667da271e9782ca20ff713390"
 }