Improve UI/Functionality of Grading Table

.travis.yml

@@ -1,7 +1,9 @@
 language: node_js
 node_js:
   - 9
-cache: yarn
+before_install:
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH="$HOME/.yarn/bin:$PATH"
 branches:
   except:
     - /^no-ci.*$/

src/components/Login.tsx

@@ -32,7 +32,8 @@ const Login: React.SFC<LoginProps> = props => {
         <Card className="login-card pt-elevation-4">
           <div className="login-header">
             <h4>
-              <Icon icon={IconNames.LOCK} />LOGIN
+              <Icon icon={IconNames.LOCK} />
+              LOGIN
             </h4>
           </div>
           <div className="login-body">

src/components/academy/grading/GradingHistory.tsx

@@ -0,0 +1,81 @@
+import { Popover, PopoverInteractionKind, Position } from '@blueprintjs/core'
+
+import * as React from 'react'
+
+import { GradingOverview } from './gradingShape'
+
+type GradingHistoryProps = {
+  data: GradingOverview
+  exp: boolean
+  grade: boolean
+}
+
+/**
+ * Used to render the marking history in the table that displays GradingOverviews.
+ * This is a fully fledged component (not SFC) by specification in
+ * ag-grid.
+ *
+ * See {@link https://www.ag-grid.com/example-react-dynamic}
+ */
+class GradingHistory extends React.Component<GradingHistoryProps, {}> {
+  constructor(props: GradingHistoryProps) {
+    super(props)
+  }
+
+  public render() {
+    const popoverInfo = () => (
+      <div className="col-xs-12" style={{ padding: 10 }}>
+        {(this.props.grade && (
+          <div>
+            <p>Initial Grade: {this.props.data.initialGrade}</p>
+            <p>Grade Adjustments: {this.props.data.gradeAdjustment}</p>
+          </div>
+        )) ||
+          (this.props.exp && (
+            <div>
+              <p>Initial XP: {this.props.data.initialXp}</p>
+              <p>XP Adjustments: {this.props.data.xpAdjustment}</p>
+            </div>
+          ))}
+      </div>
+    )
+
+    /** Component to render in table - marks */
+    const GradingMarks = () => {
+      if (this.props.data.maxGrade !== 0) {
+        return (
+          <div>
+            {`${this.props.data.currentGrade}`} / {`${this.props.data.maxGrade}`}
+          </div>
+        )
+      } else {
+        return <div>N/A</div>
+      }
+    }
+
+    /** Component to render in table - XP */
+    const GradingExp = () => {
+      if (this.props.data.currentXp && this.props.data.maxXp) {
+        return (
+          <div>
+            {`${this.props.data.currentXp}`} / {`${this.props.data.maxXp}`}
+          </div>
+        )
+      } else {
+        return <div>No Exp</div>
+      }
+    }
+
+    return (
+      <Popover
+        content={popoverInfo()}
+        position={Position.LEFT}
+        interactionKind={PopoverInteractionKind.HOVER}
+      >
+        {(this.props.exp && <GradingExp />) || (this.props.grade && <GradingMarks />)}
+      </Popover>
+    )
+  }
+}
+
+export default GradingHistory

src/components/academy/grading/GradingNavLink.tsx

@@ -1,4 +1,7 @@
+import { Icon } from '@blueprintjs/core'
+import { IconNames } from '@blueprintjs/icons'
 import * as React from 'react'
+
 import { NavLink } from 'react-router-dom'
 
 import { GradingOverview } from './gradingShape'
@@ -21,8 +24,12 @@ class GradingNavLink extends React.Component<GradingNavLinkProps, {}> {
 
   public render() {
     return (
-      <NavLink to={`/academy/grading/${this.props.data.submissionId}`} activeClassName="pt-active">
-        {'Edit grading'}
+      <NavLink
+        to={`/academy/grading/${this.props.data.submissionId}`}
+        activeClassName="pt-active"
+        target="_blank"
+      >
+        <Icon className="grade-edit-icon" iconSize={16} icon={IconNames.ANNOTATION} />
       </NavLink>
     )
   }

src/components/academy/grading/index.tsx

@@ -1,6 +1,6 @@
-import { NonIdealState, Spinner } from '@blueprintjs/core'
+import { Colors, InputGroup, NonIdealState, Spinner } from '@blueprintjs/core'
 import { IconNames } from '@blueprintjs/icons'
-import { ColDef, ColumnApi, GridApi, GridReadyEvent } from 'ag-grid'
+import { ColDef, GridApi, GridReadyEvent } from 'ag-grid'
 import { AgGridReact } from 'ag-grid-react'
 import 'ag-grid/dist/styles/ag-grid.css'
 import 'ag-grid/dist/styles/ag-theme-balham.css'
@@ -12,6 +12,7 @@ import GradingWorkspaceContainer from '../../../containers/academy/grading/Gradi
 import { stringParamToInt } from '../../../utils/paramParseHelpers'
 import { controlButton } from '../../commons'
 import ContentDisplay from '../../commons/ContentDisplay'
+import GradingHistory from './GradingHistory'
 import GradingNavLink from './GradingNavLink'
 import { GradingOverview } from './gradingShape'
 import { OwnProps as GradingWorkspaceProps } from './GradingWorkspace'
@@ -22,6 +23,11 @@ import { OwnProps as GradingWorkspaceProps } from './GradingWorkspace'
  */
 type State = {
   columnDefs: ColDef[]
+  filterValue: string
+}
+
+type GradingNavLinkProps = {
+  data: GradingOverview
 }
 
 interface IGradingProps
@@ -42,33 +48,63 @@ export interface IStateProps {
   gradingOverviews?: GradingOverview[]
 }
 
+/** Component to render in table - marks */
+const GradingMarks = (props: GradingNavLinkProps) => {
+  return <GradingHistory data={props.data} exp={false} grade={true} />
+}
+
+/** Component to render in table - XP */
+const GradingExp = (props: GradingNavLinkProps) => {
+  return <GradingHistory data={props.data} exp={true} grade={false} />
+}
+
 class Grading extends React.Component<IGradingProps, State> {
   private gridApi?: GridApi
-  private columnApi?: ColumnApi
 
   public constructor(props: IGradingProps) {
     super(props)
 
     this.state = {
       columnDefs: [
-        { headerName: 'Assessment ID', field: 'assessmentId' },
         { headerName: 'Assessment Name', field: 'assessmentName' },
-        { headerName: 'Assessment Category', field: 'assessmentCategory' },
+        { headerName: 'Category', field: 'assessmentCategory', maxWidth: 150 },
         { headerName: 'Student Name', field: 'studentName' },
-        { headerName: 'Auograder grade', field: 'initialGrade' },
-        { headerName: 'Grade adjustment', field: 'gradeAdjustment' },
-        { headerName: 'Current Grade', field: 'currentGrade' },
-        { headerName: 'Maximum Grade', field: 'maxGrade' },
-        { headerName: 'XP', field: 'initialXp' },
-        { headerName: 'XP adjustment', field: 'xpAdjustment' },
-        { headerName: 'Current XP', field: 'currentXp' },
-        { headerName: 'Maximum XP', field: 'maxXp' },
+        {
+          headerName: 'Grade',
+          field: '',
+          cellRendererFramework: GradingMarks,
+          maxWidth: 100,
+          cellStyle: params => {
+            if (params.data.currentGrade < params.data.maxGrade) {
+              return { backgroundColor: Colors.RED5 }
+            } else {
+              return {}
+            }
+          }
+        },
+        {
+          headerName: 'XP',
+          field: '',
+          cellRendererFramework: GradingExp,
+          maxWidth: 100
+        },
         {
           headerName: 'Edit',
           field: '',
-          cellRendererFramework: GradingNavLink
-        }
-      ]
+          cellRendererFramework: GradingNavLink,
+          maxWidth: 70
+        },
+        { headerName: 'Initial Grade', field: 'initialGrade', hide: true },
+        { headerName: 'Grade Adjustment', field: 'gradeAdjustment', hide: true },
+        { headerName: 'Initial XP', field: 'initialXp', hide: true },
+        { headerName: 'XP Adjustment', field: 'xpAdjustment', hide: true },
+        { headerName: 'Current Grade', field: 'currentGrade', hide: true },
+        { headerName: 'Max Grade', field: 'maxGrade', hide: true },
+        { headerName: 'Current XP', field: 'currentXp', hide: true },
+        { headerName: 'Max XP', field: 'maxXp', hide: true }
+      ],
+
+      filterValue: ''
     }
   }
 
@@ -98,44 +134,69 @@ class Grading extends React.Component<IGradingProps, State> {
       (a: GradingOverview) => -a.assessmentId,
       (a: GradingOverview) => -a.submissionId
     ])
+
     const grid = (
-      <div className="Grading">
-        <div className="ag-grid-parent ag-theme-balham">
-          <AgGridReact
-            gridAutoHeight={true}
-            enableColResize={true}
-            enableSorting={true}
-            enableFilter={true}
-            columnDefs={this.state.columnDefs}
-            onGridReady={this.onGridReady}
-            rowData={data}
-          />
+      <div className="GradingContainer">
+        <div>
+          <div className="col-md-6 col-md-offset-3">
+            <InputGroup
+              large={false}
+              leftIcon="filter"
+              placeholder="Filter..."
+              value={this.state.filterValue}
+              onChange={this.handleFilterChange}
+            />
+          </div>
         </div>
-        <div className="ag-grid-export-button">
-          {controlButton('Export to CSV', IconNames.EXPORT, this.exportCSV)}
+
+        <br />
+
+        <div className="Grading">
+          <div className="ag-grid-parent ag-theme-fresh">
+            <AgGridReact
+              gridAutoHeight={true}
+              enableColResize={true}
+              enableSorting={true}
+              enableFilter={true}
+              columnDefs={this.state.columnDefs}
+              onGridReady={this.onGridReady}
+              rowData={data}
+            />
+          </div>
+          <div className="ag-grid-export-button">
+            {controlButton('Export to CSV', IconNames.EXPORT, this.exportCSV)}
+          </div>
         </div>
       </div>
     )
     return (
       <ContentDisplay
         loadContentDispatch={this.props.handleFetchGradingOverviews}
         display={this.props.gradingOverviews === undefined ? loadingDisplay : grid}
-        fullWidth={true}
+        fullWidth={false}
       />
     )
   }
 
+  private handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const changeVal = event.target.value
+    this.setState({ filterValue: changeVal })
+
+    if (this.gridApi) {
+      this.gridApi.setQuickFilter(changeVal)
+    }
+  }
+
   private onGridReady = (params: GridReadyEvent) => {
     this.gridApi = params.api
-    this.columnApi = params.columnApi
-    this.columnApi.autoSizeAllColumns()
+    this.gridApi.sizeColumnsToFit()
   }
 
   private exportCSV = () => {
     if (this.gridApi === undefined) {
       return
     }
-    this.gridApi.exportDataAsCsv()
+    this.gridApi.exportDataAsCsv({ allColumns: true })
   }
 }
 

src/components/assessment/index.tsx

@@ -176,7 +176,12 @@ class Assessment extends React.Component<IAssessmentProps, State> {
         <p>
           You are about to finalise your submission for the{' '}
           {this.state.betchaAssessment.category.toLowerCase()}{' '}
-          <i>&quot;{this.state.betchaAssessment.title}&quot;</i>.
+          <i>
+            &quot;
+            {this.state.betchaAssessment.title}
+            &quot;
+          </i>
+          .
         </p>
         <p>
           Early submissions grant you additional XP, but{' '}

src/sagas/backend.ts

@@ -409,9 +409,6 @@ async function getGradingOverviews(tokens: Tokens): Promise<GradingOverview[] |
         assessmentId: overview.assessment.id,
         assessmentName: overview.assessment.title,
         assessmentCategory: capitalise(overview.assessment.type) as AssessmentCategory,
-        initialGrade: overview.grade,
-        currentGrade: overview.grade + (overview.adjustment || 0),
-        maximumGrade: overview.assessment.maxGrade,
         studentId: overview.student.id,
         studentName: overview.student.name,
         submissionId: overview.id,

src/styles/_academy.scss

@@ -194,3 +194,15 @@
     margin-top: 20px;
   }
 }
+
+.ag-header-cell-label {
+  justify-content: center;
+  font-weight: bold;
+  padding-left: 15px;
+}
+
+.ag-cell {
+  padding-top: 4px;
+  justify-content: center;
+  text-align: center;
+}