@elice/material-assignment 1.220803.0

package/es/components/material-assignment/MaterialAssignmentContent.js

@@ -0,0 +1,391 @@
+import React from 'react';
+import { useIntl, FormattedDate } from 'react-intl';
+import { config, getOrgMaterialAssignmentGet, getOrgMaterialAssignmentGradeList, getOrgMaterialAssignmentGradeResultGet, getOrgMaterialAssignmentSubmissionGet } from '@elice/api-client';
+import { Spinner, Text, Vspace, InfoTable, Button, TableNext, Hspace } from '@elice/blocks';
+import { useMaterialConfigApiClientUpdate } from '@elice/material-shared-utils';
+import MaterialAssignmentContainer from '../shared/MaterialAssignmentContainer.js';
+import MaterialAssignmentUploadModal from './MaterialAssignmentUploadModal.js';
+
+const GRADE_LIST_COUNT = 20;
+
+const MaterialAssignmentContent = ({
+  materialAssignmentId,
+  userId
+}) => {
+  const intl = useIntl();
+  const [assignmentGetStatus, setAssignmentGetStatus] = React.useState('idle');
+  const [assignmentGradeListGetStatus, setAssignmentGradeListGetStatus] = React.useState('idle');
+  const [assignmentGradeResultGetStatus, setAssignmentGradeResultGetStatus] = React.useState('idle');
+  const [assignmentSubmissionGetStatus, setAssignmentSubmissionGetStatus] = React.useState('idle');
+  const [materialAssignment, setMaterialAssignment] = React.useState();
+  const [materialAssignmentSubmission, setMaterialAssignmentSubmission] = React.useState();
+  const [materialAssignmentGradeResult, setMaterialAssignmentGradeResult] = React.useState();
+  const [materialAssignmentGradeList, setMaterialAssignmentGradeList] = React.useState();
+  /** Is confirm modal visible? */
+
+  const [showAssignmentSubmitModal, setShowAssignmentSubmitModal] = React.useState(false);
+  const isAssignmentSubmitted = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.lastAssignmentSubmissionId);
+  const isAssignmentClosed = materialAssignment && Boolean(materialAssignment.closeDatetime < Date.now());
+  const isAssignmentResultVisible = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.scoreFinalizedDatetime);
+  const isReady = useMaterialConfigApiClientUpdate(config.init);
+  /**
+   *
+   */
+
+  const doGetOrgMaterialAssignmentGet = React.useCallback(() => {
+    setAssignmentGetStatus('pending');
+    return getOrgMaterialAssignmentGet({
+      materialAssignmentId
+    }).then(({
+      materialAssignment
+    }) => {
+      setAssignmentGetStatus('resolved');
+      setMaterialAssignment(materialAssignment);
+    }).catch(error => {
+      setAssignmentGetStatus('rejected');
+      console.error(error);
+    });
+  }, [materialAssignmentId]); //
+  //
+  //
+
+  /**
+   * Get assignment info
+   */
+
+  React.useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    void doGetOrgMaterialAssignmentGet();
+  }, [doGetOrgMaterialAssignmentGet, isReady]);
+  /**
+   * When Grade_result exist, a comment list is called.
+   */
+
+  React.useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    if (!isAssignmentResultVisible) {
+      return;
+    }
+
+    setAssignmentGradeListGetStatus('pending');
+    getOrgMaterialAssignmentGradeList({
+      offset: 0,
+      count: GRADE_LIST_COUNT,
+      materialAssignmentId,
+      filterConditions: {
+        userId
+      }
+    }).then(({
+      materialAssignmentGrades,
+      materialAssignmentGradeCount
+    }) => {
+      setAssignmentGradeListGetStatus('resolved');
+      setMaterialAssignmentGradeList(materialAssignmentGrades);
+    }).catch(error => {
+      console.error(error);
+      setAssignmentGradeListGetStatus('rejected');
+    });
+  }, [isAssignmentResultVisible, isReady, materialAssignmentId, userId]);
+  /**
+   * When Grade_result exist, a score is called.
+   */
+
+  React.useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    if (!isAssignmentResultVisible) {
+      return;
+    }
+
+    setAssignmentGradeResultGetStatus('pending');
+    getOrgMaterialAssignmentGradeResultGet({
+      materialAssignmentId,
+      userId
+    }).then(({
+      materialAssignmentGradeResult
+    }) => {
+      setAssignmentGradeResultGetStatus('resolved');
+      setMaterialAssignmentGradeResult(materialAssignmentGradeResult);
+    }).catch(error => {
+      console.error(error);
+      setAssignmentGradeResultGetStatus('rejected');
+    });
+  }, [isAssignmentResultVisible, isReady, materialAssignmentId, userId]);
+  /**
+   * Get information on the assignment submitted
+   */
+
+  React.useEffect(() => {
+    var _a;
+
+    if (!isReady) {
+      return;
+    } // Get assignment response according to `lastAssignmentSubmissionId` of material.
+
+
+    if (!isAssignmentSubmitted) {
+      setMaterialAssignmentSubmission(undefined);
+      return;
+    }
+
+    setAssignmentSubmissionGetStatus('pending');
+    getOrgMaterialAssignmentSubmissionGet({
+      materialAssignmentSubmissionId: (_a = materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.lastAssignmentSubmissionId) !== null && _a !== void 0 ? _a : 0
+    }).then(({
+      materialAssignmentSubmission
+    }) => {
+      setAssignmentSubmissionGetStatus('resolved');
+      setMaterialAssignmentSubmission(materialAssignmentSubmission);
+    }).catch(error => {
+      console.error(error);
+      setAssignmentSubmissionGetStatus('rejected');
+      setMaterialAssignmentSubmission(undefined);
+    });
+  }, [isAssignmentSubmitted, isReady, materialAssignment]);
+
+  if (assignmentGetStatus === 'pending' || assignmentGradeListGetStatus === 'pending' || assignmentGradeResultGetStatus === 'pending' || assignmentSubmissionGetStatus === 'pending') {
+    return React.createElement(Spinner, null);
+  }
+
+  if (!materialAssignment || assignmentGetStatus === 'rejected') {
+    return React.createElement(Text, {
+      role: "white"
+    }, intl.formatMessage({
+      id: 'materialAssignment.error'
+    }));
+  }
+  /**
+   *
+   */
+
+
+  const renderAssignmentInfo = () => {
+    const assignmentFilename = decodeURIComponent((materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentFileUrl) && new URL(materialAssignmentSubmission.assignmentFileUrl).pathname.split('/').pop() || '');
+
+    const renderAssignmentStatus = () => {
+      if (!isAssignmentSubmitted && isAssignmentClosed) {
+        return React.createElement(Text, {
+          bold: true,
+          role: "danger",
+          size: "small"
+        }, intl.formatMessage({
+          id: 'materialAssignment.status.deadlineExpired'
+        }));
+      }
+
+      if (isAssignmentResultVisible) {
+        return React.createElement(Text, {
+          bold: true,
+          role: "lightpurple",
+          size: "small"
+        }, intl.formatMessage({
+          id: 'materialAssignment.status.graded'
+        }));
+      }
+
+      if (isAssignmentSubmitted) {
+        return React.createElement(Text, {
+          bold: true,
+          role: "success",
+          size: "small"
+        }, intl.formatMessage({
+          id: 'materialAssignment.status.submitted'
+        }));
+      }
+
+      return React.createElement(Text, {
+        bold: true,
+        role: "warning",
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialAssignment.status.noSubmitted'
+      }));
+    };
+
+    const renderAssignmentScore = () => {
+      var _a;
+
+      return React.createElement(React.Fragment, null, React.createElement(Text, {
+        bold: true,
+        role: "white",
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialAssignment.table.column.score'
+      }, {
+        score: (_a = materialAssignmentGradeResult === null || materialAssignmentGradeResult === void 0 ? void 0 : materialAssignmentGradeResult.score) !== null && _a !== void 0 ? _a : '--'
+      })), React.createElement(Hspace, {
+        width: 0.25
+      }));
+    };
+
+    const renderAssignmentAttachment = () => {
+      if (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentFileUrl) {
+        return React.createElement("a", {
+          href: materialAssignmentSubmission.assignmentFileUrl,
+          download: assignmentFilename,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, React.createElement(Text, {
+          hoverable: true,
+          underline: true,
+          role: "white",
+          size: "small"
+        }, assignmentFilename));
+      }
+
+      if (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentUrl) {
+        return React.createElement("a", {
+          href: materialAssignmentSubmission.assignmentUrl,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, React.createElement(Text, {
+          hoverable: true,
+          underline: true,
+          role: "white",
+          size: "small"
+        }, materialAssignmentSubmission.assignmentUrl));
+      }
+
+      return '--';
+    };
+
+    return React.createElement(InfoTable, {
+      dark: true
+    }, React.createElement("tbody", null, React.createElement("tr", null, React.createElement("td", {
+      style: {
+        width: '19%'
+      }
+    }, intl.formatMessage({
+      id: 'materialAssignment.table.column.status'
+    })), React.createElement("td", null, renderAssignmentStatus())), React.createElement("tr", null, React.createElement("td", null, intl.formatMessage({
+      id: 'materialAssignment.table.column.deadlineDatetime'
+    })), React.createElement("td", null, React.createElement(FormattedDate, {
+      value: materialAssignment.closeDatetime,
+      dateStyle: "medium",
+      timeStyle: "short",
+      hour12: false
+    }))), React.createElement("tr", null, React.createElement("td", null, intl.formatMessage({
+      id: 'materialAssignment.table.column.lastSubmitDatetime'
+    })), React.createElement("td", null, (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.createdDatetime) ? React.createElement(FormattedDate, {
+      value: materialAssignmentSubmission.createdDatetime,
+      dateStyle: "medium",
+      timeStyle: "short",
+      hour12: false
+    }) : '--')), React.createElement("tr", null, React.createElement("td", null, intl.formatMessage({
+      id: 'materialAssignment.table.column.uploadedFile'
+    })), React.createElement("td", null, React.createElement("div", null, renderAssignmentAttachment(), React.createElement(Vspace, {
+      height: 0.75
+    }), React.createElement(Button, {
+      size: "tiny",
+      role: "lightpurple",
+      disabled: [isAssignmentResultVisible, !materialAssignment.isResubmitEnabled && isAssignmentSubmitted, isAssignmentClosed].some(Boolean),
+      onClick: () => setShowAssignmentSubmitModal(true)
+    }, intl.formatMessage({
+      id: 'materialAssignment.button.upload'
+    }))))), React.createElement("tr", null, React.createElement("td", null, intl.formatMessage({
+      id: 'materialAssignment.table.column.assignmentScore'
+    })), React.createElement("td", null, renderAssignmentScore(), React.createElement(Text, {
+      role: "navy4",
+      size: "small"
+    }, intl.formatMessage({
+      id: 'materialAssignment.table.column.totalPoint'
+    }, {
+      point: materialAssignment.point
+    }))))));
+  };
+  /**
+   *
+   */
+
+
+  const renderAssignmentFeedback = () => {
+    var _a;
+
+    const tableColumns = [{
+      Header: intl.formatMessage({
+        id: 'materialAssignment.table.header.index'
+      }),
+      accessor: 'index',
+      width: 50
+    }, {
+      Header: intl.formatMessage({
+        id: 'materialAssignment.table.header.feedback'
+      }),
+      accessor: 'feedback'
+    }];
+    const tableData = (_a = materialAssignmentGradeList === null || materialAssignmentGradeList === void 0 ? void 0 : materialAssignmentGradeList.filter(grade => grade.comment.length).map((grade, index) => ({
+      index: index + 1,
+      feedback: React.createElement(Text, {
+        preWrap: true,
+        size: "small",
+        role: "navy1"
+      }, grade.comment)
+    }))) !== null && _a !== void 0 ? _a : [];
+    return React.createElement(TableNext, {
+      dark: true,
+      columns: tableColumns,
+      data: tableData,
+      emptyMessage: intl.formatMessage({
+        id: isAssignmentResultVisible ? 'materialAssignment.table.empty.noFeedback' : 'materialAssignment.table.empty.noAssignment'
+      })
+    });
+  };
+  /**
+   *
+   */
+
+
+  const renderAssignmentUploadModal = () => {
+    if (!showAssignmentSubmitModal) {
+      return null;
+    }
+
+    return React.createElement(MaterialAssignmentUploadModal, {
+      materialAssignment: materialAssignment,
+      onClose: () => setShowAssignmentSubmitModal(false),
+      onSubmitCallback: doGetOrgMaterialAssignmentGet
+    });
+  };
+
+  return React.createElement(MaterialAssignmentContainer, {
+    title: materialAssignment.title
+  }, React.createElement(Text, {
+    bold: true,
+    block: true,
+    role: "white"
+  }, intl.formatMessage({
+    id: 'materialAssignment.label.general'
+  })), React.createElement(Text, {
+    role: "navy3",
+    size: "tiny"
+  }, intl.formatMessage({
+    id: 'materialAssignment.description.general'
+  })), React.createElement(Vspace, {
+    height: 0.75
+  }), renderAssignmentInfo(), React.createElement(Vspace, {
+    height: 1.5
+  }), React.createElement(Text, {
+    bold: true,
+    block: true,
+    role: "white"
+  }, intl.formatMessage({
+    id: 'materialAssignment.label.feedback'
+  })), React.createElement(Text, {
+    role: "navy3",
+    size: "tiny"
+  }, intl.formatMessage({
+    id: 'materialAssignment.description.feedback'
+  })), React.createElement(Vspace, {
+    height: 0.75
+  }), renderAssignmentFeedback(), renderAssignmentUploadModal());
+};
+
+export { MaterialAssignmentContent as default };

package/es/components/material-assignment/MaterialAssignmentUploadModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { GetOrgMaterialAssignmentGetResponses } from '@elice/types';
+interface MaterialAssignmentUploadModalProps {
+    materialAssignment: GetOrgMaterialAssignmentGetResponses['materialAssignment'];
+    onClose: () => void;
+    onSubmitCallback?: () => void;
+}
+declare const MaterialAssignmentUploadModal: React.FC<MaterialAssignmentUploadModalProps>;
+export default MaterialAssignmentUploadModal;

package/es/components/material-assignment/MaterialAssignmentUploadModal.js

@@ -0,0 +1,194 @@
+import React from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { useIntl } from 'react-intl';
+import { postOrgMaterialAssignmentSubmissionAdd } from '@elice/api-client';
+import { Files, Notification, Modal, Alert, Vspace, Radio, RadioButton, Input, Checkbox, Text } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { validateUrl } from '@elice/utils';
+import styled from 'styled-components';
+
+const StyledAssignmentContentFiles = styled(Files).withConfig({
+  componentId: "sc-9bizrf-0"
+})(["width:100%;.eb-files__choose-button{border-color:", ";background-color:", ";}"], base.color.primary5, base.color.primary5);
+
+const MaterialAssignmentUploadModal = ({
+  materialAssignment,
+  onClose,
+  onSubmitCallback
+}) => {
+  const intl = useIntl();
+  const abortCtrl = React.useRef(new AbortController());
+  /** Select submission method */
+
+  const [assignmentMode, setAssignmentMode] = React.useState('attachment');
+  /** Check "Once you submit it, you cannot submit it again." */
+
+  const [isAgreedSubmit, setAgreedSubmit] = React.useState(false);
+  /** Check if the submission time is past */
+
+  const isAssignmentClosed = Boolean(materialAssignment.closeDatetime < Date.now());
+  /** Check if it is possible to resubmit */
+
+  const isAssignmentResubmitEnabled = Boolean(materialAssignment.isResubmitEnabled);
+  const {
+    control,
+    formState,
+    handleSubmit,
+    reset
+  } = useForm({
+    mode: 'onChange'
+  });
+  /**
+   * Submit assignment.
+   */
+
+  const submitAssignment = handleSubmit(async data => {
+    var _a;
+
+    try {
+      await postOrgMaterialAssignmentSubmissionAdd(Object.assign(Object.assign({}, data), {
+        materialAssignmentId: (_a = materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.id) !== null && _a !== void 0 ? _a : 0
+      }), {
+        signal: abortCtrl.current.signal
+      });
+      onClose();
+      Notification.success(intl.formatMessage({
+        id: 'materialAssignment.notification.submit.success'
+      }));
+
+      if (typeof onSubmitCallback === 'function') {
+        onSubmitCallback();
+      }
+    } catch (error) {
+      if (error.name === 'AbortError') {
+        return Notification.error(intl.formatMessage({
+          id: 'materialAssignment.notification.submit.cancel'
+        }));
+      }
+
+      Notification.error(intl.formatMessage({
+        id: 'materialAssignment.notification.submit.failure'
+      }));
+    }
+  }); //
+  //
+  //
+
+  React.useEffect(() => {
+    const _abortCtrl = abortCtrl.current;
+    return () => {
+      _abortCtrl.abort();
+    };
+  }, []);
+  return React.createElement(Modal, {
+    title: intl.formatMessage({
+      id: 'materialAssignment.modal.title'
+    }),
+    footerButtons: [{
+      label: intl.formatMessage({
+        id: 'materialAssignment.modal.button.submit'
+      }),
+      loading: formState.isSubmitting,
+      disabled: [!isAssignmentResubmitEnabled && !isAgreedSubmit, formState.isSubmitting, !formState.isValid].some(Boolean),
+      onClick: submitAssignment
+    }, {
+      label: intl.formatMessage({
+        id: 'materialAssignment.modal.button.cancel'
+      }),
+      role: 'gray1',
+      onClick: onClose
+    }],
+    onHide: onClose
+  }, React.createElement(Alert, {
+    role: isAssignmentResubmitEnabled ? 'primary' : 'warning'
+  }, intl.formatMessage({
+    id: isAssignmentResubmitEnabled ? 'materialAssignment.alert.oftenSubmit' : 'materialAssignment.alert.onceSubmit'
+  })), React.createElement(Vspace, {
+    height: 1.5
+  }), React.createElement(Radio, {
+    purpleWhite: true,
+    borderRound: true,
+    value: assignmentMode,
+    onChange: value => {
+      reset();
+      setAgreedSubmit(false);
+      setAssignmentMode(value);
+    }
+  }, React.createElement(RadioButton, {
+    value: "attachment"
+  }, intl.formatMessage({
+    id: 'materialAssignment.radio.option.attachment'
+  })), React.createElement(RadioButton, {
+    value: "url"
+  }, intl.formatMessage({
+    id: 'materialAssignment.radio.option.url'
+  }))), React.createElement(Vspace, {
+    height: 1
+  }), assignmentMode === 'attachment' ? React.createElement(Controller, {
+    control: control,
+    name: "assignmentFile",
+    rules: {
+      required: true
+    },
+    render: ({
+      field
+    }) => React.createElement(StyledAssignmentContentFiles, Object.assign({}, field, {
+      files: field.value ? [field.value] : undefined,
+      accept: "*",
+      maxCount: 1,
+      maxSize: 300,
+      disabled: isAssignmentClosed,
+      dropMessage: intl.formatMessage({
+        id: 'materialAssignment.attachment.dropMessage'
+      }),
+      buttonMessage: intl.formatMessage({
+        id: 'materialAssignment.attachment.button'
+      }),
+      maxSizeMessage: intl.formatMessage({
+        id: 'materialAssignment.attachment.maxSizeMessage'
+      }),
+      onChange: newFiles => {
+        if (Array.isArray(newFiles) && newFiles[0] instanceof File) {
+          field.onChange(newFiles[0]);
+        } else {
+          field.onChange(undefined);
+        }
+      }
+    }))
+  }) : React.createElement(Controller, {
+    control: control,
+    name: "assignmentUrl",
+    rules: {
+      required: true,
+      validate: url => validateUrl(url !== null && url !== void 0 ? url : '') ? true : intl.formatMessage({
+        id: 'materialAssignment.input.invalid'
+      })
+    },
+    render: ({
+      field,
+      fieldState
+    }) => {
+      var _a;
+
+      return React.createElement(Input, Object.assign({}, field, {
+        width: "full",
+        size: "small",
+        placeholder: "http(s)://",
+        invalid: fieldState.invalid,
+        invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
+      }));
+    }
+  }), isAssignmentResubmitEnabled ? null : React.createElement(React.Fragment, null, React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Checkbox, {
+    size: "small",
+    value: isAgreedSubmit,
+    onChange: setAgreedSubmit
+  }, React.createElement(Text, {
+    size: "small"
+  }, intl.formatMessage({
+    id: 'materialAssignment.attachment.checkbox.onceSubmit'
+  })))));
+};
+
+export { MaterialAssignmentUploadModal as default };

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

@@ -0,0 +1,2 @@
+export { default as MaterialAssignment } from './MaterialAssignment';
+export type { MaterialAssignmentProps } from './MaterialAssignment';

package/es/components/material-assignment/locales.d.ts

@@ -0,0 +1,39 @@
+export declare const en: {
+    'materialAssignment.button.upload': string;
+    'materialAssignment.error': string;
+    'materialAssignment.status.noSubmitted': string;
+    'materialAssignment.status.submitted': string;
+    'materialAssignment.status.graded': string;
+    'materialAssignment.status.deadlineExpired': string;
+    'materialAssignment.table.column.status': string;
+    'materialAssignment.table.column.deadlineDatetime': string;
+    'materialAssignment.table.column.lastSubmitDatetime': string;
+    'materialAssignment.table.column.uploadedFile': string;
+    'materialAssignment.table.column.assignmentScore': string;
+    'materialAssignment.table.column.score': string;
+    'materialAssignment.table.column.totalPoint': string;
+    'materialAssignment.table.header.index': string;
+    'materialAssignment.table.header.feedback': string;
+    'materialAssignment.table.empty.noAssignment': string;
+    'materialAssignment.table.empty.noFeedback': string;
+    'materialAssignment.label.general': string;
+    'materialAssignment.label.feedback': string;
+    'materialAssignment.description.general': string;
+    'materialAssignment.description.feedback': string;
+    'materialAssignment.notification.submit.success': string;
+    'materialAssignment.notification.submit.failure': string;
+    'materialAssignment.notification.submit.cancel': string;
+    'materialAssignment.modal.title': string;
+    'materialAssignment.modal.button.submit': string;
+    'materialAssignment.modal.button.cancel': string;
+    'materialAssignment.alert.onceSubmit': string;
+    'materialAssignment.alert.oftenSubmit': string;
+    'materialAssignment.radio.option.attachment': string;
+    'materialAssignment.radio.option.url': string;
+    'materialAssignment.attachment.dropMessage': string;
+    'materialAssignment.attachment.maxSizeMessage': string;
+    'materialAssignment.attachment.button': string;
+    'materialAssignment.attachment.checkbox.onceSubmit': string;
+    'materialAssignment.input.invalid': string;
+};
+export declare const ko: typeof en;