github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/src/components/teacher/EditCriterion.tsx (about)

     1  import React, { useState } from "react"
     2  import { Assignment, GradingCriterion } from "../../../proto/qf/types_pb"
     3  import { useActions } from "../../overmind"
     4  
     5  
     6  const EditCriterion = ({ originalCriterion, benchmarkID, assignment }: { originalCriterion?: GradingCriterion, benchmarkID: bigint, assignment: Assignment }): JSX.Element => {
     7      const actions = useActions()
     8  
     9      const [editing, setEditing] = useState<boolean>(false)
    10      const [add, setAdd] = useState<boolean>(originalCriterion ? false : true)
    11  
    12      // Clone the criterion, or create a new one if none was passed in
    13      const criterion = originalCriterion
    14          ? originalCriterion.clone()
    15          : new GradingCriterion()
    16  
    17      const handleCriteria = (event: React.KeyboardEvent<HTMLInputElement>) => {
    18          const { value } = event.currentTarget
    19          if (event.key === "Enter") {
    20              // Set the criterion's benchmark ID
    21              // This could already be set if a criterion was passed in
    22              criterion.BenchmarkID = benchmarkID
    23              actions.createOrUpdateCriterion({ criterion: criterion, assignment: assignment })
    24              setEditing(false)
    25          } else {
    26              criterion.description = value
    27          }
    28      }
    29  
    30      const handleBlur = () => {
    31          if (originalCriterion) {
    32              // Restore the original criterion
    33              criterion.description = originalCriterion.description
    34          } else {
    35              // Reset the criterion and enable add button
    36              criterion.description = ""
    37              setAdd(true)
    38          }
    39          setEditing(false)
    40      }
    41  
    42      if (add) {
    43          return (
    44              <div className="list-group-item">
    45                  <button className="btn btn-primary" name="submit" onClick={() => { setAdd(false); setEditing(true) }}>Add</button>
    46              </div>
    47          )
    48      }
    49  
    50      return (
    51          <div className="list-group-item" onClick={() => setEditing(!editing)}>
    52              {editing
    53                  ? <input className="form-control" type="text" onBlur={() => { handleBlur() }} autoFocus defaultValue={criterion.description} name="criterion" onKeyUp={e => { handleCriteria(e) }} />
    54                  : <><span>{criterion.description}</span><span className="badge badge-danger float-right clickable" onClick={() => actions.deleteCriterion({ criterion: originalCriterion, assignment: assignment })}>Delete</span></>
    55              }
    56          </div>
    57      )
    58  }
    59  
    60  export default EditCriterion