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

     1  import React from "react"
     2  import { GradingCriterion, GradingCriterion_Grade } from "../../../proto/qf/types_pb"
     3  import { useActions, useAppState } from "../../overmind"
     4  
     5  
     6  const CriteriaStatus = ({ criterion }: { criterion: GradingCriterion }): JSX.Element | null => {
     7      const { setGrade } = useActions().review
     8      const { isTeacher } = useAppState()
     9  
    10      if (!isTeacher) {
    11          return null
    12      }
    13  
    14      const buttons: { icon: string, status: GradingCriterion_Grade, style: string, onClick: () => void }[] = [
    15          { icon: "fa fa-check", status: GradingCriterion_Grade.PASSED, style: "success", onClick: () => setGrade({ criterion: criterion, grade: GradingCriterion_Grade.PASSED }) },
    16          { icon: "fa fa-ban", status: GradingCriterion_Grade.NONE, style: "secondary", onClick: () => setGrade({ criterion: criterion, grade: GradingCriterion_Grade.NONE }) },
    17          { icon: "fa fa-times", status: GradingCriterion_Grade.FAILED, style: "danger", onClick: () => setGrade({ criterion: criterion, grade: GradingCriterion_Grade.FAILED }) },
    18      ]
    19  
    20      const StatusButtons = buttons.map((button, index) => {
    21          const style = criterion.grade === button.status ? `col btn-xs btn-${button.style} mr-2 border` : `col btn-xs btn-outline-${button.style} mr-2 border`
    22          // TODO: Perhaps refactor button into a separate general component to enable reuse
    23          return (
    24              <div key={index} className={style} onClick={() => button.onClick()}>
    25                  <i className={button.icon} />
    26              </div>
    27          )
    28      })
    29  
    30      return <div className="btn-group">{StatusButtons}</div>
    31  }
    32  
    33  export default CriteriaStatus