github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/src/components/manual-grading/ReviewInfo.tsx (about)

     1  import React from "react"
     2  import { Review } from "../../../proto/qf/types_pb"
     3  import { NoSubmission } from "../../consts"
     4  import { Color, getFormattedTime, SubmissionStatus } from "../../Helpers"
     5  import { useActions, useAppState } from "../../overmind"
     6  import { ButtonType } from "../admin/Button"
     7  import DynamicButton from "../DynamicButton"
     8  import ManageSubmissionStatus from "../ManageSubmissionStatus"
     9  import MarkReadyButton from "./MarkReadyButton"
    10  
    11  
    12  const ReviewInfo = ({ review }: { review?: Review }): JSX.Element | null => {
    13      const state = useAppState()
    14      const actions = useActions()
    15  
    16      if (!review) {
    17          return null
    18      }
    19  
    20      const assignment = state.selectedAssignment
    21      const submission = state.selectedSubmission
    22      const ready = review.ready
    23  
    24      const markReadyButton = <MarkReadyButton review={review} />
    25  
    26      const user = state.selectedEnrollment?.user
    27      let userLi = null
    28      if (user) {
    29          // List item for the user that submitted the selected submission
    30          userLi = (
    31              <li className="list-group-item">
    32                  <span className="w-25 mr-5 float-left">User: </span>
    33                  {user.Name}
    34              </li>
    35          )
    36      }
    37  
    38      const setReadyOrGradeButton = ready ? <ManageSubmissionStatus /> : markReadyButton
    39      const releaseButton = (
    40          <DynamicButton
    41              text={submission?.released ? "Released" : "Release"}
    42              color={submission?.released ? Color.WHITE : Color.YELLOW}
    43              type={ButtonType.BUTTON}
    44              className={`float-right ${!state.isCourseCreator && "disabled"} `}
    45              onClick={() => actions.review.release({ submission, owner: state.submissionOwner })}
    46          />
    47      )
    48      return (
    49          <ul className="list-group">
    50              <li className="list-group-item active">
    51                  <span className="align-middle">
    52                      <span style={{ display: "inline-block" }} className="w-25 mr-5 p-3">{assignment?.name}</span>
    53                      {releaseButton}
    54                  </span>
    55              </li>
    56              {userLi}
    57              <li className="list-group-item">
    58                  <span className="w-25 mr-5 float-left">Reviewer: </span>
    59                  {state.review.reviewer?.Name}
    60              </li>
    61              <li className="list-group-item">
    62                  <span className="w-25 mr-5 float-left">Submission Status: </span>
    63                  {submission ? SubmissionStatus[submission.status] : { NoSubmission }}
    64              </li>
    65              <li className="list-group-item">
    66                  <span className="w-25 mr-5 float-left">Review Status: </span>
    67                  <span>{ready ? "Ready" : "In progress"}</span>
    68                  {ready && markReadyButton}
    69              </li>
    70              <li className="list-group-item">
    71                  <span className="w-25 mr-5 float-left">Score: </span>
    72                  {review.score}
    73              </li>
    74              <li className="list-group-item">
    75                  <span className="w-25 mr-5 float-left">Updated: </span>
    76                  {getFormattedTime(review.edited)}
    77              </li>
    78              <li className="list-group-item">
    79                  <span className="w-25 mr-5 float-left">Graded: </span>
    80                  {state.review.graded}/{state.review.criteriaTotal}
    81              </li>
    82              <li className="list-group-item">
    83                  {setReadyOrGradeButton}
    84              </li>
    85          </ul>
    86      )
    87  }
    88  
    89  export default ReviewInfo