@elice/material-assignment 1.220803.0

package/es/components/material-assignment-admin/MaterialAssignmentAdminContentTa.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface MaterialAssignmentAdminContentTaProps {
+    materialAssignmentId: number;
+    userId: number;
+    adminUserId: number;
+}
+declare const MaterialAssignmentAdminContentTa: React.FC<MaterialAssignmentAdminContentTaProps>;
+export default MaterialAssignmentAdminContentTa;

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

@@ -0,0 +1,472 @@
+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 { base } from '@elice/design-tokens';
+import { eilStatusInfo } from '@elice/icons';
+import { useMaterialConfigApiClientUpdate } from '@elice/material-shared-utils';
+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({
+    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(() => {
+    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 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 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(() => {
+    if (!isReady) {
+      return;
+    }
+
+    fetchUserGet();
+    fetchMyGrade();
+    fetchGradeResult();
+    fetchSubmissionList();
+    fetchMaterialAssignmentGet();
+  }, [isReady, fetchUserGet, fetchMyGrade, fetchGradeResult, fetchSubmissionList, fetchMaterialAssignmentGet]);
+
+  const renderHeader = () => {
+    var _a;
+
+    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 === null || gradeResult === void 0 ? void 0 : gradeResult.score) && isScoreFinalized ? `${gradeResult.score}점(공개됨)` : '--')), 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 renderGradeResult = () => {
+    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 === null || gradeResult === void 0 ? void 0 : gradeResult.score) && isScoreFinalized ? `${gradeResult.score}점(공개됨)` : '--')));
+  };
+
+  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 renderGrade = () => {
+    const isGradeEditDisabled = !isAssignmentClosed || !isUserSubmitted || isScoreFinalized;
+
+    const tooltipTitle = (() => {
+      switch (true) {
+        case isScoreFinalized:
+          return '공개 이후 채점이 불가합니다.';
+
+        case !isAssignmentClosed:
+          return '제출 기한이 지난 이후 채점할 수 있습니다.';
+
+        case !isUserSubmitted:
+          return '미제출인 경우 채점할 수 없습니다.';
+      }
+    })();
+
+    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
+    }, "\uB0B4 \uCC44\uC810"), React.createElement(Text, {
+      block: true,
+      size: "tiny",
+      role: "navy3",
+      lineHeight: 1.6
+    }, "\uB0B4\uAC00 \uB9E4\uAE34 \uD3C9\uAC00\uC640 \uAD00\uB828\uB41C \uC815\uBCF4\uB97C \uBCFC \uC218 \uC788\uC2B5\uB2C8\uB2E4.")), React.createElement(Tooltip, {
+      placement: "top",
+      title: tooltipTitle,
+      visible: isGradeEditDisabled ? undefined : false
+    }, React.createElement("span", null, React.createElement(Button, {
+      size: "small",
+      role: "lightpurple",
+      disabled: isGradeEditDisabled,
+      onClick: handleGradeEditClick
+    }, Boolean(myGrade) ? '내 채점 수정' : '내 채점 시작')))), React.createElement(Vspace, {
+      height: 0.75
+    }), React.createElement(TableNext, {
+      dark: true,
+      emptyMessage: "\uC544\uC9C1 \uCC44\uC810\uC744 \uC2DC\uC791\uD558\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.",
+      columns: [{
+        Header: '채점자명',
+        accessor: 'fullname'
+      }, {
+        Header: '과제 점수',
+        accessor: 'grade'
+      }, {
+        Header: '채점 일시',
+        accessor: 'created',
+        textAlign: 'left'
+      }],
+      data: myGrade ? [{
+        fullname: React.createElement(Flex, {
+          paddingy: "0.25rem"
+        }, React.createElement(Text, {
+          noWrap: true,
+          role: "navy0",
+          size: "small"
+        }, myGrade.gradeUser.fullname), React.createElement(Hspace, {
+          width: 0.25
+        }), React.createElement(Text, {
+          ellipsis: true,
+          role: "navy3",
+          size: "small"
+        }, myGrade.gradeUser.email)),
+        grade: myGrade.score,
+        created: React.createElement(FormattedDate, {
+          value: myGrade.createdDatetime,
+          dateStyle: "medium",
+          timeStyle: "short",
+          hour12: false
+        })
+      }] : []
+    }));
+  };
+
+  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
+      })
+    }));
+  };
+
+  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
+  }), renderGrade())), renderGradeEditModal());
+};
+
+export { MaterialAssignmentAdminContentTa as default };

package/es/components/material-assignment-admin/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MaterialAssignmentAdmin } from './MaterialAssignmentAdmin';
+export type { MaterialAssignmentAdminProps } from './MaterialAssignmentAdmin';
+export type { MaterialAssignmentAdminApis } from './MaterialAssignmentAdminContent';

package/es/components/shared/MaterialAssignmentContainer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface MaterialAssignmentContainerProps {
+    title: string;
+}
+declare const MaterialAssignmentContainer: React.FC<MaterialAssignmentContainerProps>;
+export default MaterialAssignmentContainer;

package/es/components/shared/MaterialAssignmentContainer.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Text } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+
+const 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({
+  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({
+  componentId: "sc-sdhlog-2"
+})(["padding:1.5rem;overflow-y:auto;height:calc(100% - 3.5rem);background-color:", ";"], base.color.navy8);
+
+const MaterialAssignmentContainer = ({
+  title,
+  children
+}) => {
+  return React.createElement(StyledMaterialAssignmentContainer, null, React.createElement(StyledMaterialAssignmentContainerHeader, null, React.createElement(Text, {
+    bold: true,
+    role: "navy0",
+    size: "small"
+  }, title)), React.createElement(StyledMaterialAssignmentContainerContent, null, children));
+};
+
+export { MaterialAssignmentContainer as default };

package/es/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/es/index.js

@@ -0,0 +1,2 @@
+export { default as MaterialAssignmentAdmin } from './components/material-assignment-admin/MaterialAssignmentAdmin.js';
+export { default as MaterialAssignment } from './components/material-assignment/MaterialAssignment.js';

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@elice/material-assignment",
+  "version": "1.220803.0",
+  "description": "User view and editing components of Elice material assignment",
+  "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
+  "license": "UNLICENSED",
+  "main": "./cjs/index.js",
+  "module": "./es/index.js",
+  "types": "./es/index.d.ts",
+  "files": [
+    "es",
+    "cjs",
+    "package.json",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": "~16.14",
+    "yarn": ">=1.20 <2"
+  },
+  "scripts": {
+    "start": "run-s watch",
+    "prebuild": "run-s clean",
+    "build": "run-p build:es build:cjs",
+    "build:es": "rollup -c ../../rollup.config.ts -f es",
+    "build:cjs": "rollup -c ../../rollup.config.ts -f cjs",
+    "watch": "rollup -c ../../rollup.config.ts -f es -w",
+    "lint": "eslint --ext .ts,.tsx ./src --max-warnings=0",
+    "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
+  },
+  "peerDependencies": {
+    "@elice/api-client": "^1.220802.1",
+    "@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": "22.7.2-1",
+    "@elice/material-shared-utils": "22.7.2-1",
+    "@elice/types": "^1.220802.1",
+    "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+    "react-intl": "^5.0.0",
+    "react-use": "^17.0.0",
+    "styled-components": "^5.2.0"
+  },
+  "dependencies": {
+    "classnames": "^2.2.0",
+    "dayjs": "^1.10.6",
+    "react-hook-form": "~7.12.0",
+    "tslib": "^2.3.1"
+  },
+  "devDependencies": {
+    "@elice/api-client": "^1.220802.1",
+    "@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.220803.0",
+    "@elice/material-shared-utils": "1.220803.0",
+    "@elice/types": "^1.220802.1",
+    "@types/classnames": "^2.3.1",
+    "@types/react": "~17.0.9",
+    "@types/styled-components": "^5.1.21",
+    "react": "^17.0.2",
+    "react-intl": "^5.20.10",
+    "react-use": "^17.2.4",
+    "styled-components": "^5.3.0"
+  },
+  "gitHead": "21c6b42ae6550e7899c57bf39fa78cea0f47e64c"
+}