@elice/material-assignment 1.220803.0

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

@@ -0,0 +1,808 @@
+import React, { forwardRef } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { FormattedDate } from 'react-intl';
+import { config, getOrgUserGet, getOrgMaterialAssignmentGet, getOrgMaterialAssignmentSubmissionList, getOrgMaterialAssignmentGradeResultGet, getOrgMaterialAssignmentGradeList, postOrgMaterialAssignmentGradeEdit, postOrgMaterialAssignmentGradeResultManualScoreEdit, postOrgMaterialAssignmentGradeDelete } from '@elice/api-client';
+import { Notification, Flex, ProfileImage, Hspace, Text, Tooltip, Icon, Vspace, InfoTable, Button, TableNext, IconButton, Pagination, Modal, Label, Input, Textarea, Alert } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { eilStatusInfo, eilChat, eilDelete, eilArrowRightwardsBasic } from '@elice/icons';
+import { useMaterialConfigApiClientUpdate } from '@elice/material-shared-utils';
+import dayjs from 'dayjs';
+import MaterialAssignmentContainer from '../shared/MaterialAssignmentContainer.js';
+import { StyledMaterialAssignmentAdminHeader, StyledMaterialAssignmentAdminHeaderCell, StyledMaterialAssignmentAdminGradeWrapper, StyledMaterialAssignmentAdminManualScoreEditButtonWrapper, StyledMaterialAssignmentAdminManualScoreEditButton, StyledMaterialAssignmentAdminTextareaWrapper } from './MaterialAssignmentAdmin.styled.js';
+
+const FETCH_GRADE_LIST_COUNT = 5;
+const MaterialAssignmentAdminContent = forwardRef(({
+  materialAssignmentId,
+  userId,
+  adminUserId,
+  updateMaterialUserBrowserResponse
+}, ref) => {
+  var _a; // Form
+
+
+  const gradeEditFormMethods = useForm({
+    defaultValues: {
+      score: 0,
+      comment: ''
+    },
+    mode: 'onChange'
+  });
+  const manualScoreEditFormMethods = useForm({
+    defaultValues: {
+      manualScore: 0
+    },
+    mode: 'onChange'
+  }); // API Status
+
+  const isReady = useMaterialConfigApiClientUpdate(config.init);
+  const [submissionListGetStatus, setSubmissionListGetStatus] = React.useState('idle');
+  const [gradeDeleteStatus, setGradeDeleteStatus] = React.useState('idle'); // State related with component
+
+  const [showGradeEditModal, setShowGradeEditModal] = React.useState(false);
+  const [showManualScoreEditModal, setShowManualScoreEditModal] = React.useState(false);
+  const [selectedGradeForShow, setSelectedGradeForShow] = React.useState(null);
+  const [selectedGradeForDelete, setSelectedGradeForDelete] = React.useState(null); // State related with api
+
+  const [user, setUser] = React.useState(null);
+  const [materialAssignment, setMaterialAssignment] = React.useState(null);
+  const [userSubmission, setUserSubmission] = React.useState(null);
+  const [myGrade, setMyGrade] = React.useState(null);
+  const [gradeResult, setGradeResult] = React.useState(null);
+  const [gradeList, setGradeList] = React.useState([]);
+  const [gradeListCount, setGradeListCount] = React.useState(0);
+  const [gradeListPage, setGradeListPage] = React.useState(1);
+  const gradeListOffset = (gradeListPage - 1) * FETCH_GRADE_LIST_COUNT;
+  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);
+  const fetchUserGet = React.useCallback(() => {
+    void getOrgUserGet({
+      userId
+    }).then(res => res.user).then(setUser);
+  }, [userId]);
+  const fetchMaterialAssignmentGet = React.useCallback(() => {
+    void getOrgMaterialAssignmentGet({
+      materialAssignmentId
+    }).then(res => res.materialAssignment).then(setMaterialAssignment);
+  }, [materialAssignmentId]);
+  const fetchSubmissionList = React.useCallback(() => {
+    setSubmissionListGetStatus('pending');
+    void getOrgMaterialAssignmentSubmissionList({
+      materialAssignmentId,
+      offset: 0,
+      count: 1,
+      filterConditions: {
+        isLast: true,
+        userIds: [userId]
+      }
+    }).then(res => res.materialAssignmentSubmissions[0]).then(submission => {
+      setUserSubmission(submission !== null && submission !== void 0 ? submission : null);
+      setSubmissionListGetStatus('resolved');
+    }).catch(err => {
+      console.error(err);
+      setSubmissionListGetStatus('rejected');
+    });
+  }, [materialAssignmentId, userId]);
+  const fetchGradeResult = React.useCallback(() => {
+    void getOrgMaterialAssignmentGradeResultGet({
+      materialAssignmentId,
+      userId
+    }).then(res => res.materialAssignmentGradeResult).then(setGradeResult).catch(() => {
+      setGradeResult(null);
+    });
+  }, [materialAssignmentId, userId]);
+  const fetchGradeList = React.useCallback(() => {
+    void getOrgMaterialAssignmentGradeList({
+      materialAssignmentId,
+      offset: gradeListOffset,
+      count: FETCH_GRADE_LIST_COUNT,
+      filterConditions: {
+        userId
+      }
+    }).then(({
+      materialAssignmentGrades,
+      materialAssignmentGradeCount
+    }) => {
+      setGradeList(materialAssignmentGrades);
+      setGradeListCount(materialAssignmentGradeCount);
+    });
+  }, [gradeListOffset, materialAssignmentId, userId]);
+  const fetchMyGrade = React.useCallback(() => {
+    void getOrgMaterialAssignmentGradeList({
+      materialAssignmentId,
+      offset: 0,
+      count: 1,
+      filterConditions: {
+        userId,
+        gradeUserId: adminUserId
+      }
+    }).then(res => res.materialAssignmentGrades[0]).then(grade => setMyGrade(grade !== null && grade !== void 0 ? grade : null));
+  }, [adminUserId, materialAssignmentId, userId]);
+
+  const handleManualScoreEditClick = () => {
+    var _a, _b;
+
+    setShowManualScoreEditModal(true);
+    manualScoreEditFormMethods.reset({
+      manualScore: (_b = (_a = gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.manualScore) !== null && _a !== void 0 ? _a : gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.avgCalcScore) !== null && _b !== void 0 ? _b : 0
+    });
+  };
+
+  const 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();
+      fetchGradeResult();
+      fetchGradeList();
+
+      if (typeof updateMaterialUserBrowserResponse === 'function') {
+        updateMaterialUserBrowserResponse(userId);
+      }
+
+      Notification.success('저장되었습니다');
+    } catch (err) {
+      console.error(err);
+      Notification.error('오류가 발생했습니다.');
+    } finally {
+      setShowGradeEditModal(false);
+    }
+  });
+
+  const handleGradeDeleteSubmit = async () => {
+    if (!selectedGradeForDelete) {
+      return;
+    }
+
+    try {
+      setGradeDeleteStatus('pending');
+      await postOrgMaterialAssignmentGradeDelete({
+        materialAssignmentGradeId: selectedGradeForDelete.id
+      }); // If delete my grade, re-fetch my grade data.
+
+      if (adminUserId === selectedGradeForDelete.gradeUser.id) {
+        fetchMyGrade();
+      }
+
+      fetchGradeList();
+      fetchGradeResult();
+      setGradeDeleteStatus('resolved');
+
+      if (typeof updateMaterialUserBrowserResponse === 'function') {
+        updateMaterialUserBrowserResponse(userId);
+      }
+
+      Notification.success('저장되었습니다');
+    } catch (err) {
+      console.error(err);
+      setGradeDeleteStatus('rejected');
+      Notification.error('오류가 발생했습니다.');
+    } finally {
+      setSelectedGradeForDelete(null);
+    }
+  };
+
+  const handleManualScoreEditSubmit = manualScoreEditFormMethods.handleSubmit(async ({
+    manualScore
+  }) => {
+    try {
+      await postOrgMaterialAssignmentGradeResultManualScoreEdit({
+        userId,
+        manualScore,
+        materialAssignmentId
+      });
+      fetchGradeResult();
+
+      if (typeof updateMaterialUserBrowserResponse === 'function') {
+        updateMaterialUserBrowserResponse(userId);
+      }
+
+      Notification.success('저장되었습니다');
+    } catch (err) {
+      console.error(err);
+      Notification.error('오류가 발생했습니다.');
+    } finally {
+      setShowManualScoreEditModal(false);
+    }
+  });
+  React.useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    fetchUserGet();
+    fetchMyGrade();
+    fetchGradeList();
+    fetchGradeResult();
+    fetchSubmissionList();
+    fetchMaterialAssignmentGet();
+  }, [isReady, fetchUserGet, fetchMyGrade, fetchGradeList, fetchGradeResult, fetchSubmissionList, fetchMaterialAssignmentGet]);
+  React.useImperativeHandle(ref, () => ({
+    refreshMaterialAssignment: () => {
+      fetchMaterialAssignmentGet();
+    }
+  }), [fetchMaterialAssignmentGet]);
+
+  const renderHeader = () => {
+    var _a, _b, _c;
+
+    return React.createElement(StyledMaterialAssignmentAdminHeader, {
+      align: "center",
+      padding: "1rem",
+      width: "100%"
+    }, React.createElement(Flex, {
+      auto: true,
+      align: "center"
+    }, React.createElement(ProfileImage, {
+      src: (_a = user === null || user === void 0 ? void 0 : user.profileUrl) !== null && _a !== void 0 ? _a : '',
+      width: "2.5rem",
+      height: "2.5rem"
+    }), React.createElement(Hspace, {
+      width: 1
+    }), React.createElement(Text, {
+      size: "small",
+      role: "warmwhite"
+    }, user === null || user === void 0 ? void 0 : user.fullname)), React.createElement(StyledMaterialAssignmentAdminHeaderCell, null, React.createElement(Text, {
+      size: "tiny",
+      role: "gray4"
+    }, "\uC810\uC218"), React.createElement(Text, {
+      size: "small",
+      role: "white"
+    }, gradeResult ? `${(_c = (_b = gradeResult.manualScore) !== null && _b !== void 0 ? _b : gradeResult.avgCalcScore) !== null && _c !== void 0 ? _c : 0}${isScoreFinalized ? '(공개됨)' : '(비공개)'}` : '--')), React.createElement(StyledMaterialAssignmentAdminHeaderCell, null, React.createElement(Text, {
+      size: "tiny",
+      role: "gray4"
+    }, "\uC81C\uCD9C \uC77C\uC2DC"), React.createElement(Text, {
+      size: "small",
+      role: "white"
+    }, userSubmission ? React.createElement(FormattedDate, {
+      value: userSubmission.createdDatetime,
+      dateStyle: "medium",
+      timeStyle: "short",
+      hour12: false
+    }) : '--')));
+  };
+
+  const renderManualScoreEditButton = () => {
+    return React.createElement(Tooltip, {
+      placement: "top",
+      title: isUserSubmitted ? '제출 기한이 지난 이후 조정할 수 있습니다.' : '미제출인 경우 조정할 수 없습니다.',
+      visible: !isAssignmentClosed || !isUserSubmitted ? undefined : false
+    }, React.createElement(StyledMaterialAssignmentAdminManualScoreEditButtonWrapper, {
+      disabled: !isAssignmentClosed || !isUserSubmitted
+    }, React.createElement(StyledMaterialAssignmentAdminManualScoreEditButton, {
+      disabled: !isAssignmentClosed || !isUserSubmitted,
+      underline: true,
+      role: "navy3",
+      size: "tiny",
+      onClick: handleManualScoreEditClick
+    }, "\uC810\uC218 \uC870\uC815\uD558\uAE30")));
+  };
+
+  const renderGradeResult = () => {
+    var _a, _b;
+
+    return React.createElement(StyledMaterialAssignmentAdminGradeWrapper, {
+      wrap: true,
+      width: "100%",
+      align: "center"
+    }, React.createElement(Flex, {
+      auto: true,
+      align: "center"
+    }, React.createElement(Text, {
+      role: "navy1",
+      size: "small",
+      lineHeight: "1.375rem"
+    }, user ? `${user.fullname} 님의 점수` : null), React.createElement(Hspace, {
+      width: 0.25
+    }), React.createElement(Tooltip, {
+      useMaxWidth: true,
+      placement: "top",
+      title: "모든 채점 점수의 평균값이 반영된 종합 점수입니다. 평균값을 사용하지 않으려면 ‘조정하기'를 클릭해 직접 점수를 입력하세요."
+    }, React.createElement(Icon, {
+      icon: eilStatusInfo,
+      color: base.color.navy1
+    })), React.createElement(Hspace, {
+      width: 0.75
+    }), React.createElement(Text, {
+      bold: true,
+      role: "white"
+    }, gradeResult ? `${(_b = (_a = gradeResult.manualScore) !== null && _a !== void 0 ? _a : gradeResult.avgCalcScore) !== null && _b !== void 0 ? _b : 0}${isScoreFinalized ? '(공개됨)' : '(비공개)'}` : '--')), renderManualScoreEditButton());
+  };
+
+  const renderSubmissionInfo = () => {
+    const statusText = (() => {
+      if (submissionListGetStatus === 'pending') {
+        return null;
+      }
+
+      switch (true) {
+        case !isUserSubmitted && isAssignmentClosed:
+          return React.createElement(Text, {
+            bold: true,
+            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,
+            role: "warning",
+            size: "small"
+          }, "\uBBF8\uC81C\uCD9C");
+      }
+    })();
+
+    const submissionAttachment = (() => {
+      if (!userSubmission) {
+        return '--';
+      }
+
+      if (userSubmission.assignmentFileUrl) {
+        const assignmentFilename = decodeURIComponent(userSubmission.assignmentFileUrl && new URL(userSubmission.assignmentFileUrl).pathname.split('/').pop() || '');
+        return React.createElement("a", {
+          href: userSubmission.assignmentFileUrl,
+          download: assignmentFilename,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, React.createElement(Text, {
+          hoverable: true,
+          underline: true,
+          role: "white",
+          size: "small"
+        }, assignmentFilename));
+      }
+
+      if (userSubmission === null || userSubmission === void 0 ? void 0 : userSubmission.assignmentUrl) {
+        return React.createElement("a", {
+          href: userSubmission.assignmentUrl,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, React.createElement(Text, {
+          hoverable: true,
+          underline: true,
+          role: "white",
+          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, {
+      value: materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.closeDatetime,
+      dateStyle: "medium",
+      timeStyle: "short",
+      hour12: false
+    }))), React.createElement("tr", null, React.createElement("td", null, "\uC81C\uCD9C \uC77C\uC2DC"), React.createElement("td", null, userSubmission ? React.createElement(FormattedDate, {
+      value: userSubmission.createdDatetime,
+      dateStyle: "medium",
+      timeStyle: "short",
+      hour12: false
+    }) : '--')), React.createElement("tr", null, React.createElement("td", null, "\uC5C5\uB85C\uB4DC\uB41C \uACFC\uC81C"), React.createElement("td", null, submissionAttachment))));
+  };
+
+  const renderGradeList = () => {
+    return React.createElement(Flex, {
+      column: true,
+      align: "center"
+    }, React.createElement(Flex, {
+      align: "center",
+      width: "100%"
+    }, React.createElement(Flex, {
+      column: true,
+      auto: true
+    }, React.createElement(Text, {
+      block: true,
+      bold: true,
+      role: "white",
+      lineHeight: 1.375
+    }, "\uCC44\uC810 \uD604\uD669"), React.createElement(Text, {
+      block: true,
+      size: "tiny",
+      role: "navy3",
+      lineHeight: 1.6
+    }, "\uCC44\uC810\uC644\uB8CC\uD55C \uCC44\uC810\uC790\uC758 \uC810\uC218\uC640 \uD53C\uB4DC\uBC31\uC744 \uBCFC \uC218 \uC788\uC2B5\uB2C8\uB2E4.")), React.createElement(Tooltip, {
+      placement: "top",
+      title: isUserSubmitted ? '제출 기한이 지난 이후 채점할 수 있습니다.' : '미제출인 경우 채점할 수 없습니다.',
+      visible: !isAssignmentClosed || !isUserSubmitted ? undefined : false
+    }, React.createElement("span", null, React.createElement(Button, {
+      size: "small",
+      role: "lightpurple",
+      disabled: !isAssignmentClosed || !isUserSubmitted,
+      onClick: handleGradeEditClick
+    }, Boolean(myGrade) ? '내 채점 수정' : '내 채점 시작')))), React.createElement(Vspace, {
+      height: 0.75
+    }), React.createElement(TableNext, {
+      dark: true,
+      emptyMessage: "\uCC44\uC810 \uC644\uB8CC\uD55C \uCC44\uC810\uC790\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+      columns: [{
+        Header: '채점자명',
+        accessor: 'fullname'
+      }, {
+        Header: '과제 점수',
+        accessor: 'grade'
+      }, {
+        Header: '채점 일시',
+        accessor: 'created',
+        textAlign: 'left'
+      }],
+      data: gradeList.map(grade => ({
+        fullname: React.createElement(Flex, null, React.createElement(Text, {
+          noWrap: true,
+          role: "navy0",
+          size: "small"
+        }, `${grade.gradeUser.fullname}${grade.gradeUser.id === adminUserId ? '(나)' : ''}`), React.createElement(Hspace, {
+          width: 0.25
+        }), React.createElement(Text, {
+          ellipsis: true,
+          role: "navy3",
+          size: "small"
+        }, grade.gradeUser.email)),
+        grade: grade.score,
+        created: React.createElement(Flex, {
+          align: "center",
+          justify: "space-between"
+        }, React.createElement(FormattedDate, {
+          value: grade.createdDatetime,
+          dateStyle: "medium",
+          timeStyle: "short",
+          hour12: false
+        }), React.createElement(Flex, {
+          align: "center"
+        }, React.createElement(IconButton, {
+          icon: eilChat,
+          size: "tiny",
+          role: "navy3",
+          onClick: () => {
+            setSelectedGradeForShow(grade);
+          }
+        }), React.createElement(Hspace, {
+          width: 0.5
+        }), React.createElement(IconButton, {
+          icon: eilDelete,
+          size: "tiny",
+          role: "navy3",
+          onClick: () => {
+            setSelectedGradeForDelete(grade);
+          }
+        })))
+      }))
+    }), React.createElement(Vspace, {
+      height: 0.5
+    }), React.createElement(Pagination, {
+      dark: true,
+      offset: gradeListOffset,
+      count: FETCH_GRADE_LIST_COUNT,
+      total: gradeListCount,
+      isNext: gradeListOffset + FETCH_GRADE_LIST_COUNT < gradeListCount,
+      isPrev: gradeListOffset > 0,
+      onClickNext: () => {
+        setGradeListPage(gradeListPage + 1);
+      },
+      onClickPrev: () => {
+        setGradeListPage(gradeListPage - 1);
+      }
+    }));
+  };
+
+  const renderGradeEditModal = () => {
+    if (!showGradeEditModal) {
+      return null;
+    }
+
+    return React.createElement(Modal, {
+      title: Boolean(myGrade) ? '내 채점 수정' : '과제 채점',
+      footerButtons: [{
+        label: '확인',
+        size: 'small',
+        role: 'primary',
+        loading: gradeEditFormMethods.formState.isSubmitting,
+        disabled: gradeEditFormMethods.formState.isSubmitting || !gradeEditFormMethods.formState.isValid,
+        onClick: handleGradeEditSubmit
+      }, {
+        label: '취소',
+        size: 'small',
+        role: 'gray1',
+        onClick: () => {
+          setShowGradeEditModal(false);
+        }
+      }],
+      onHide: () => {
+        setShowGradeEditModal(false);
+      }
+    }, React.createElement(Label, {
+      bold: true,
+      block: true,
+      required: true
+    }, "\uC810\uC218"), React.createElement(Vspace, {
+      height: 0.5
+    }), React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Controller, {
+      control: gradeEditFormMethods.control,
+      name: "score",
+      rules: {
+        required: true,
+        min: 0,
+        max: 100
+      },
+      render: ({
+        field,
+        fieldState
+      }) => React.createElement(Input, Object.assign({}, field, {
+        invalid: fieldState.invalid,
+        size: "small",
+        width: "xsmall",
+        type: "number"
+      }))
+    }), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(Text, {
+      bold: true,
+      role: "gray9",
+      size: "small"
+    }, "\uC810"), React.createElement(Text, {
+      role: "gray6",
+      size: "small"
+    }, ' / 100점 만점')), React.createElement(Vspace, {
+      height: 1.25
+    }), React.createElement(Label, {
+      bold: true,
+      block: true
+    }, "\uD53C\uB4DC\uBC31"), React.createElement(Vspace, {
+      height: 0.5
+    }), React.createElement(Controller, {
+      control: gradeEditFormMethods.control,
+      name: "comment",
+      rules: {
+        maxLength: 1000
+      },
+      render: ({
+        field
+      }) => React.createElement(Textarea, {
+        value: field.value,
+        wordLimit: 1000,
+        rows: 8,
+        onChange: field.onChange
+      })
+    }));
+  };
+
+  const renderGradeShowModal = () => {
+    if (!selectedGradeForShow) {
+      return null;
+    }
+
+    return React.createElement(Modal, {
+      title: "\uCC44\uC810 \uACB0\uACFC \uD655\uC778",
+      footerButtons: [{
+        label: '확인',
+        size: 'small',
+        role: 'primary',
+        onClick: () => {
+          setSelectedGradeForShow(null);
+        }
+      }],
+      onHide: () => {
+        setSelectedGradeForShow(null);
+      }
+    }, React.createElement(Label, {
+      bold: true,
+      block: true,
+      required: true
+    }, "\uC810\uC218"), React.createElement(Vspace, {
+      height: 0.5
+    }), React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Input, {
+      disabled: true,
+      value: selectedGradeForShow.score,
+      size: "small",
+      width: "xsmall",
+      type: "number"
+    }), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(Text, {
+      bold: true,
+      role: "gray9",
+      size: "small"
+    }, "\uC810"), React.createElement(Text, {
+      role: "gray6",
+      size: "small"
+    }, ' / 100점 만점')), React.createElement(Vspace, {
+      height: 1.25
+    }), React.createElement(Label, {
+      bold: true,
+      block: true
+    }, "\uD53C\uB4DC\uBC31"), React.createElement(Vspace, {
+      height: 0.5
+    }), React.createElement(StyledMaterialAssignmentAdminTextareaWrapper, null, React.createElement(Textarea, {
+      disabled: true,
+      value: selectedGradeForShow.comment,
+      wordLimit: 1000,
+      rows: 8
+    })));
+  };
+
+  const renderGradeDeleteModal = () => {
+    if (!selectedGradeForDelete) {
+      return null;
+    }
+
+    return React.createElement(Modal, {
+      title: "\uCC44\uC810 \uC0AD\uC81C",
+      width: "narrow",
+      footerButtons: [{
+        label: '확인',
+        size: 'small',
+        role: 'primary',
+        loading: gradeDeleteStatus === 'pending',
+        disabled: gradeDeleteStatus === 'pending',
+        onClick: handleGradeDeleteSubmit
+      }, {
+        label: '취소',
+        size: 'small',
+        role: 'gray1',
+        onClick: () => {
+          setSelectedGradeForDelete(null);
+        }
+      }],
+      onHide: () => {
+        setSelectedGradeForDelete(null);
+      }
+    }, React.createElement(Text, {
+      role: "gray9"
+    }, "\uC0AD\uC81C\uB41C \uC810\uC218\uC640 \uD53C\uB4DC\uBC31\uC740 \uB2E4\uC2DC \uBCF5\uAD6C\uB420 \uC218 \uC5C6\uC73C\uBA70 \uD559\uC0DD\uC758 \uD3C9\uADE0 \uC810\uC218\uAC00 \uBCC0\uACBD\uB420 \uC218 \uC788\uC2B5\uB2C8\uB2E4."), React.createElement(Vspace, {
+      height: 0.75
+    }), React.createElement(TableNext, {
+      columns: [{
+        Header: '채점자명',
+        accessor: 'fullname'
+      }, {
+        Header: '최종 점수',
+        accessor: 'score'
+      }],
+      data: [{
+        fullname: React.createElement(Flex, null, React.createElement(Text, {
+          noWrap: true,
+          role: "gray9",
+          size: "small"
+        }, selectedGradeForDelete.gradeUser.fullname), React.createElement(Hspace, {
+          width: 0.25
+        }), React.createElement(Text, {
+          ellipsis: true,
+          role: "gray5",
+          size: "small"
+        }, selectedGradeForDelete.gradeUser.email)),
+        score: selectedGradeForDelete.score
+      }]
+    }));
+  };
+
+  const renderManualScoreEditModal = () => {
+    var _a, _b;
+
+    if (!showManualScoreEditModal) {
+      return null;
+    }
+
+    return React.createElement(Modal, {
+      title: "\uC810\uC218 \uC870\uC815",
+      width: "narrow",
+      footerButtons: [{
+        label: '확인',
+        size: 'small',
+        role: 'primary',
+        loading: manualScoreEditFormMethods.formState.isSubmitting,
+        disabled: manualScoreEditFormMethods.formState.isSubmitting || !manualScoreEditFormMethods.formState.isValid,
+        onClick: handleManualScoreEditSubmit
+      }, {
+        label: '취소',
+        size: 'small',
+        role: 'gray1',
+        onClick: () => {
+          setShowManualScoreEditModal(false);
+        }
+      }],
+      onHide: () => {
+        setShowManualScoreEditModal(false);
+      }
+    }, React.createElement(Alert, {
+      role: "warning"
+    }, "\uC810\uC218 \uC870\uC815 \uC774\uD6C4 \uB2E4\uC2DC \uD3C9\uADE0\uAC12\uC73C\uB85C \uB418\uB3CC\uB9B4 \uC218 \uC5C6\uC73C\uB2C8 \uC720\uC758\uD574 \uC8FC\uC138\uC694."), React.createElement(Vspace, {
+      height: 1
+    }), React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Input, {
+      disabled: true,
+      size: "small",
+      width: "xsmall",
+      type: "number",
+      label: "\uC774\uC804 \uC810\uC218",
+      value: (_b = (_a = gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.manualScore) !== null && _a !== void 0 ? _a : gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.avgCalcScore) !== null && _b !== void 0 ? _b : 0
+    }), React.createElement(Hspace, {
+      width: 1
+    }), React.createElement(Icon, {
+      icon: eilArrowRightwardsBasic
+    }), React.createElement(Hspace, {
+      width: 1
+    }), React.createElement(Controller, {
+      control: manualScoreEditFormMethods.control,
+      name: "manualScore",
+      rules: {
+        required: true,
+        min: 0,
+        max: 100
+      },
+      render: ({
+        field,
+        fieldState
+      }) => React.createElement(Input, Object.assign({}, field, {
+        invalid: fieldState.invalid,
+        size: "small",
+        width: "xsmall",
+        type: "number",
+        label: "\uC870\uC815 \uC810\uC218"
+      }))
+    }), React.createElement(Hspace, {
+      width: 0.75
+    }), React.createElement(Text, {
+      bold: true,
+      role: "gray9",
+      size: "small"
+    }, "\uC810"), React.createElement(Text, {
+      role: "gray6",
+      size: "small"
+    }, ' / 100점 만점')));
+  };
+
+  return React.createElement(React.Fragment, null, renderHeader(), React.createElement(Flex, {
+    column: true,
+    auto: true,
+    padding: "3.625rem",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    align: "center"
+  }, React.createElement(MaterialAssignmentContainer, {
+    title: (_a = materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.title) !== null && _a !== void 0 ? _a : ''
+  }, renderGradeResult(), React.createElement(Vspace, {
+    height: 1.25
+  }), renderSubmissionInfo(), React.createElement(Vspace, {
+    height: 1.5
+  }), renderGradeList())), renderGradeEditModal(), renderGradeShowModal(), renderGradeDeleteModal(), renderManualScoreEditModal());
+});
+
+export { MaterialAssignmentAdminContent as default };