Set-up grading table to allow for batch grading (#342)

* Added Pagination and checkbox to show all submissions

* Fix formatting

* Updated API calls to get submissions for group/all

* Refactored code to allow for a clean API call to fetch groups

* Updated mock backend to simulate group filtering behaviour

* Updating formatting

* Updated Documentation explaning group param

Author: rrtheonlyone

src/actions/session.ts

@@ -30,8 +30,13 @@ export const fetchGrading = (submissionId: number) => ({
   payload: submissionId
 })
 
-export const fetchGradingOverviews = () => ({
-  type: actionTypes.FETCH_GRADING_OVERVIEWS
+/**
+ * @param filterToGroup - param when set to true, only shows submissions under the group
+ * of the grader
+ */
+export const fetchGradingOverviews = (filterToGroup = true) => ({
+  type: actionTypes.FETCH_GRADING_OVERVIEWS,
+  payload: filterToGroup
 })
 
 export const login = () => ({

src/components/academy/grading/index.tsx

@@ -1,4 +1,4 @@
-import { Colors, InputGroup, NonIdealState, Spinner } from '@blueprintjs/core'
+import { Colors, FormGroup, InputGroup, NonIdealState, Spinner } from '@blueprintjs/core'
 import { IconNames } from '@blueprintjs/icons'
 import { ColDef, GridApi, GridReadyEvent } from 'ag-grid'
 import { AgGridReact } from 'ag-grid-react'
@@ -24,6 +24,7 @@ import { OwnProps as GradingWorkspaceProps } from './GradingWorkspace'
 type State = {
   columnDefs: ColDef[]
   filterValue: string
+  groupFilterEnabled: boolean
 }
 
 type GradingNavLinkProps = {
@@ -41,7 +42,7 @@ export interface IGradingWorkspaceParams {
 }
 
 export interface IDispatchProps {
-  handleFetchGradingOverviews: () => void
+  handleFetchGradingOverviews: (filterToGroup?: boolean) => void
 }
 
 export interface IStateProps {
@@ -104,7 +105,9 @@ class Grading extends React.Component<IGradingProps, State> {
         { headerName: 'Max XP', field: 'maxXp', hide: true }
       ],
 
-      filterValue: ''
+      filterValue: '',
+
+      groupFilterEnabled: false
     }
   }
 
@@ -138,17 +141,30 @@ class Grading extends React.Component<IGradingProps, State> {
     const grid = (
       <div className="GradingContainer">
         <div>
-          <div className="col-md-6 col-md-offset-3">
+          <FormGroup label="Filter:" labelFor="text-input" inline={true}>
             <InputGroup
+              id="filterBar"
               large={false}
               leftIcon="filter"
-              placeholder="Filter..."
+              placeholder="Enter any text(e.g. mission)"
               value={this.state.filterValue}
               onChange={this.handleFilterChange}
             />
+          </FormGroup>
+
+          <div className="checkboxPanel">
+            <label>Show All Submissions:</label>
+            &nbsp;&nbsp;
+            <input
+              name="showAllSubmissions"
+              type="checkbox"
+              checked={this.state.groupFilterEnabled}
+              onChange={this.handleGroupsFilter}
+            />
           </div>
         </div>
 
+        <hr />
         <br />
 
         <div className="Grading">
@@ -161,6 +177,8 @@ class Grading extends React.Component<IGradingProps, State> {
               columnDefs={this.state.columnDefs}
               onGridReady={this.onGridReady}
               rowData={data}
+              pagination={true}
+              paginationPageSize={50}
             />
           </div>
           <div className="ag-grid-export-button">
@@ -187,6 +205,12 @@ class Grading extends React.Component<IGradingProps, State> {
     }
   }
 
+  private handleGroupsFilter = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const checkStatus = event.target.checked
+    this.setState({ groupFilterEnabled: checkStatus })
+    this.props.handleFetchGradingOverviews(!checkStatus)
+  }
+
   private onGridReady = (params: GridReadyEvent) => {
     this.gridApi = params.api
     this.gridApi.sizeColumnsToFit()

src/mocks/backend.ts

@@ -42,9 +42,10 @@ export function* mockBackendSaga(): SagaIterator {
     yield put(actions.updateAssessment({ ...assessment }))
   })
 
-  yield takeEvery(actionTypes.FETCH_GRADING_OVERVIEWS, function*() {
+  yield takeEvery(actionTypes.FETCH_GRADING_OVERVIEWS, function*(action) {
     const accessToken = yield select((state: IState) => state.session.accessToken)
-    const gradingOverviews = yield call(() => mockFetchGradingOverview(accessToken))
+    const filterToGroup = (action as actionTypes.IAction).payload
+    const gradingOverviews = yield call(() => mockFetchGradingOverview(accessToken, filterToGroup))
     if (gradingOverviews !== null) {
       yield put(actions.updateGradingOverviews([...gradingOverviews]))
     }

src/mocks/gradingAPI.ts

@@ -58,15 +58,19 @@ export const mockGradingOverviews: GradingOverview[] = [
  * A null value is returned for invalid token or role.
  *
  * @param accessToken a valid access token for the cadet backend.
+ * @param group a boolean if true, only fetches submissions from the grader's group
  */
-export const mockFetchGradingOverview = (accessToken: string): GradingOverview[] | null => {
+export const mockFetchGradingOverview = (
+  accessToken: string,
+  group: boolean
+): GradingOverview[] | null => {
   // mocks backend role fetching
   const permittedRoles: Role[] = [Roles.admin, Roles.trainer]
   const role: Role | null = mockFetchRole(accessToken)
   if (role === null || !permittedRoles.includes(role)) {
     return null
   } else {
-    return mockGradingOverviews
+    return group ? [mockGradingOverviews[0]] : mockGradingOverviews
   }
 }
 

src/sagas/backend.ts

@@ -173,12 +173,15 @@ function* backendSaga(): SagaIterator {
     }
   })
 
-  yield takeEvery(actionTypes.FETCH_GRADING_OVERVIEWS, function*() {
+  yield takeEvery(actionTypes.FETCH_GRADING_OVERVIEWS, function*(action) {
     const tokens = yield select((state: IState) => ({
       accessToken: state.session.accessToken,
       refreshToken: state.session.refreshToken
     }))
-    const gradingOverviews = yield call(getGradingOverviews, tokens)
+
+    const filterToGroup = (action as actionTypes.IAction).payload
+
+    const gradingOverviews = yield call(getGradingOverviews, tokens, filterToGroup)
     if (gradingOverviews) {
       yield put(actions.updateGradingOverviews(gradingOverviews))
     }
@@ -404,10 +407,14 @@ async function postAssessment(id: number, tokens: Tokens): Promise<Response | nu
 
 /*
  * GET /grading
+ * @params group - a boolean if true gets the submissions from the grader's group
  * @returns {Array} GradingOverview[]
  */
-async function getGradingOverviews(tokens: Tokens): Promise<GradingOverview[] | null> {
-  const response = await request('grading', 'GET', {
+async function getGradingOverviews(
+  tokens: Tokens,
+  group: boolean
+): Promise<GradingOverview[] | null> {
+  const response = await request(`grading?group=${group}`, 'GET', {
     accessToken: tokens.accessToken,
     refreshToken: tokens.refreshToken,
     shouldRefresh: true

src/styles/_academy.scss

@@ -213,3 +213,15 @@
   justify-content: center;
   text-align: center;
 }
+
+#filterBar {
+  width: 400px;
+}
+
+.ag-paging-panel {
+  padding: 20px;
+}
+
+.checkboxPanel {
+  text-align: left;
+}