Merge pull request #34 from edx/schen/EDUCATOR-3754

Add hardcoded page size on frontend

package-lock.json

@@ -3552,7 +3552,7 @@
     },
     "@types/object-assign": {
       "version": "4.0.30",
-      "resolved": "http://registry.npmjs.org/@types/object-assign/-/object-assign-4.0.30.tgz",
+      "resolved": "https://registry.npmjs.org/@types/object-assign/-/object-assign-4.0.30.tgz",
       "integrity": "sha1-iUk3HVqZ9Dge4PHfCpt6GH4H5lI="
     },
     "@types/tapable": {

src/components/Gradebook/gradebook.scss

@@ -1,3 +1,20 @@
+.spinner-overlay {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: #999;
+    opacity: 0.5;
+    z-index: 99999;
+    display:flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 200px;
+}
+
+.color-black {
+    color: black;
+}
+
 .gradebook-container{
     width: 500px;
     @media only screen and (min-width: 640px) {
@@ -10,6 +27,7 @@
         width: 1024px;
     }
 }
+
 .back-link{
     float:right;
 }

src/components/Gradebook/index.jsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { Button, InputSelect, Modal, SearchField, StatusAlert, Table } from '@edx/paragon';
+import {
+  Button,
+  InputSelect,
+  Modal,
+  SearchField,
+  StatusAlert,
+  Table,
+  Icon,
+} from '@edx/paragon';
 import queryString from 'query-string';
 import { configuration } from '../../config';
 
@@ -25,6 +33,7 @@ export default class Gradebook extends React.Component {
     );
     this.props.getTracks(this.props.match.params.courseId);
     this.props.getCohorts(this.props.match.params.courseId);
+    this.props.getAssignmentTypes(this.props.match.params.courseId);
   }
 
   setNewModalState = (userEntry, subsection) => {
@@ -50,15 +59,20 @@ export default class Gradebook extends React.Component {
   }
 
   handleAdjustedGradeClick = () => {
-    this.props.updateGrades(this.props.match.params.courseId, [
-      {
-        user_id: this.state.updateUserId,
-        usage_id: this.state.updateModuleId,
-        grade: {
-          earned_graded_override: this.state.updateVal,
+    this.props.updateGrades(
+      this.props.match.params.courseId, [
+        {
+          user_id: this.state.updateUserId,
+          usage_id: this.state.updateModuleId,
+          grade: {
+            earned_graded_override: this.state.updateVal,
+          },
         },
-      },
-    ]);
+      ],
+      this.state.filterValue,
+      this.props.selectedCohort,
+      this.props.selectedTrack,
+    );
 
     this.setState({
       modalModel: [{}],
@@ -74,6 +88,15 @@ export default class Gradebook extends React.Component {
     return `?${queryString.stringify(parsed)}`;
   };
 
+  mapAssignmentTypeEntries = (entries) => {
+    const mapped = entries.map(entry => ({
+      id: entry,
+      label: entry,
+    }));
+    mapped.unshift({ id: 0, label: 'All' });
+    return mapped;
+  };
+
   mapCohortsEntries = (entries) => {
     const mapped = entries.map(entry => ({
       id: entry.id,
@@ -92,6 +115,10 @@ export default class Gradebook extends React.Component {
     return mapped;
   };
 
+  updateAssignmentTypes = (event) => {
+    this.props.filterColumns(event, this.props.grades[0]);
+  }
+
   updateTracks = (event) => {
     const selectedTrackItem = this.props.tracks.find(x => x.name === event);
     let selectedTrackSlug = null;
@@ -122,6 +149,15 @@ export default class Gradebook extends React.Component {
     this.props.history.push(updatedQueryStrings);
   };
 
+  mapSelectedAssignmentTypeEntry = (entry) => {
+    const selectedAssignmentTypeEntry = this.props.assignmentTypes
+      .find(x => x.id === parseInt(entry, 10));
+    if (selectedAssignmentTypeEntry) {
+      return selectedAssignmentTypeEntry.name;
+    }
+    return 'All';
+  };
+
   mapSelectedCohortEntry = (entry) => {
     const selectedCohortEntry = this.props.cohorts.find(x => x.id === parseInt(entry, 10));
     if (selectedCohortEntry) {
@@ -149,11 +185,11 @@ export default class Gradebook extends React.Component {
               className="btn btn-header link-style"
               onClick={() => this.setNewModalState(entry, subsection)}
             >
-              {subsection.percent}
+              {subsection.percent * 100}%
             </button>);
           return acc;
         }, {});
-      const totals = { total: entry.percent * 100 };
+      const totals = { total: `${entry.percent * 100}%` };
       return Object.assign(results, assignments, totals);
     }),
 
@@ -172,7 +208,7 @@ export default class Gradebook extends React.Component {
           return acc;
         }, {});
 
-      const totals = { total: entry.percent * 100 };
+      const totals = { total: `${entry.percent * 100}/100` };
       return Object.assign(results, assignments, totals);
     }),
   };
@@ -182,6 +218,7 @@ export default class Gradebook extends React.Component {
   render() {
     return (
       <div className="d-flex justify-content-center">
+        { this.props.showSpinner && <div className="spinner-overlay"><Icon className={['fa', 'fa-spinner', 'fa-spin', 'fa-5x', 'color-black']} /></div>}
         <div className="card gradebook-container">
           <div className="card-body">
             <a
@@ -220,46 +257,19 @@ export default class Gradebook extends React.Component {
                     <label htmlFor="score-view-absolute">Absolute</label>
                   </span>
                 </div>
-                <div>
-                  Category:
-                  <span>
-                    <input
-                      id="category-all"
-                      className="ml-2 mr-1"
-                      type="radio"
-                      name="category"
-                      value="all"
-                      onClick={() => this.props.filterColumns('all', this.props.grades[0])}
+                { this.props.assignmnetTypes.length > 0 &&
+                  <div className="student-filters">
+                    <span className="label">
+                      Assignment Types:
+                    </span>
+                    <InputSelect
+                      name="assignment-types"
+                      value={this.mapSelectedTrackEntry(this.props.selectedAssignmentType)}
+                      options={this.mapAssignmentTypeEntries(this.props.assignmnetTypes)}
+                      onChange={this.updateAssignmentTypes}
                     />
-                    <label className="mr-2" htmlFor="category-all">
-                      All
-                    </label>
-                  </span>
-                  <span>
-                    <input
-                      id="category-homework"
-                      className="mr-1"
-                      type="radio"
-                      name="category"
-                      value="homework"
-                      onClick={() => this.props.filterColumns('hw', this.props.grades[0])}
-                    />
-                    <label className="mr-2" htmlFor="category-homework">Homework</label>
-                  </span>
-                  <span>
-                    <input
-                      id="category-exam"
-                      type="radio"
-                      name="category"
-                      value="exam"
-                      className="ml-2 mr-1"
-                      onClick={() => this.props.filterColumns('exam', this.props.grades[0])}
-                    />
-                    <label htmlFor="category-exam">
-                      Exam
-                    </label>
-                  </span>
-                </div>
+                  </div>
+                }
                 {(this.props.tracks.length > 0 || this.props.cohorts.length > 0) &&
                   <div className="student-filters">
                     <span className="label">
@@ -294,14 +304,14 @@ export default class Gradebook extends React.Component {
                   onClear={() => this.props.getUserGrades(this.props.match.params.courseId, this.props.selectedCohort, this.props.selectedTrack)}
                   value={this.state.filterValue}
                 />
-                <div className="d-flex justify-content-end" style={{ marginTop : '20px'}}>
+                <div className="d-flex justify-content-end" style={{ marginTop: '20px' }}>
                   <Button
                     label="Previous"
                     buttonType="primary"
                     style={{ visibility: (!this.props.prevPage ? 'hidden' : 'visible') }}
                     onClick={() => this.props.getPrevNextGrades(this.props.prevPage, this.props.selectedCohort, this.props.selectedTrack)}
                   />
-                  <div style={{width: '10px'}} />
+                  <div style={{ width: '10px' }} />
                   <Button
                     label="Next"
                     buttonType="primary"

src/containers/GradebookPage/index.jsx

@@ -12,6 +12,7 @@ import {
 } from '../../data/actions/grades';
 import { fetchCohorts } from '../../data/actions/cohorts';
 import { fetchTracks } from '../../data/actions/tracks';
+import { fetchAssignmentTypes } from '../../data/actions/assignmentTypes';
 
 const mapStateToProps = state => (
   {
@@ -25,6 +26,8 @@ const mapStateToProps = state => (
     showSuccess: state.grades.showSuccess,
     prevPage: state.grades.prevPage,
     nextPage: state.grades.nextPage,
+    assignmnetTypes: state.assignmentTypes.results,
+    showSpinner: state.grades.showSpinner,
   }
 );
 
@@ -36,7 +39,7 @@ const mapDispatchToProps = dispatch => (
     searchForUser: (courseId, searchText, cohort, track) => {
       dispatch(fetchMatchingUserGrades(courseId, searchText, cohort, track));
     },
-    getPrevNextGrades : (endpoint, cohort, track) => {
+    getPrevNextGrades: (endpoint, cohort, track) => {
       dispatch(fetchPrevNextGrades(endpoint, cohort, track));
     },
     getCohorts: (courseId) => {
@@ -45,8 +48,11 @@ const mapDispatchToProps = dispatch => (
     getTracks: (courseId) => {
       dispatch(fetchTracks(courseId));
     },
-    updateGrades: (courseId, updateData) => {
-      dispatch(updateGrades(courseId, updateData));
+    getAssignmentTypes: (courseId) => {
+      dispatch(fetchAssignmentTypes(courseId));
+    },
+    updateGrades: (courseId, updateData, searchText, cohort, track) => {
+      dispatch(updateGrades(courseId, updateData, searchText, cohort, track));
     },
     toggleFormat: (formatType) => {
       dispatch(toggleGradeFormat(formatType));

src/data/actions/assignmentTypes.js

@@ -0,0 +1,32 @@
+import {
+  STARTED_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ASSIGNMENT_TYPES,
+  ERROR_FETCHING_ASSIGNMENT_TYPES,
+} from '../constants/actionTypes/assignmentTypes';
+import LmsApiService from '../services/LmsApiService';
+
+const startedFetchingAssignmentTypes = () => ({ type: STARTED_FETCHING_ASSIGNMENT_TYPES });
+const errorFetchingAssignmentTypes = () => ({ type: ERROR_FETCHING_ASSIGNMENT_TYPES });
+const gotAssignmentTypes = assignmentTypes => ({ type: GOT_ASSIGNMENT_TYPES, assignmentTypes });
+
+const fetchAssignmentTypes = courseId => (
+  (dispatch) => {
+    dispatch(startedFetchingAssignmentTypes());
+    return LmsApiService.fetchAssignmentTypes(courseId)
+      .then(response => response.data)
+      .then((data) => {
+        dispatch(gotAssignmentTypes(Object.keys(data.assignment_types)));
+      })
+      .catch((error) => {
+        dispatch(errorFetchingAssignmentTypes());
+      });
+  }
+);
+
+export {
+  fetchAssignmentTypes,
+  startedFetchingAssignmentTypes,
+  gotAssignmentTypes,
+  errorFetchingAssignmentTypes,
+};
+

src/data/actions/grades.js

@@ -14,8 +14,9 @@ import {
 import LmsApiService from '../services/LmsApiService';
 import store from '../store';
 import { headingMapper, gradeSortMap, sortAlphaAsc } from './utils';
-import apiClient from "../apiClient";
+import apiClient from '../apiClient';
 
+const defaultAssignmentFilter = 'All';
 
 const sortGrades = (columnName, direction) => {
   const sortFn = gradeSortMap(columnName, direction);
@@ -55,10 +56,11 @@ const gradeUpdateFailure = error => ({
 const toggleGradeFormat = formatType => ({ type: TOGGLE_GRADE_FORMAT, formatType });
 
 const filterColumns = (filterType, exampleUser) => (
-  dispatch => ({
+  dispatch => dispatch({
     type: FILTER_COLUMNS,
-    headings: headingMapper[filterType](dispatch, exampleUser),
-  }));
+    headings: headingMapper(filterType)(dispatch, exampleUser),
+  })
+);
 
 const updateBanner = showSuccess => ({ type: UPDATE_BANNER, showSuccess });
 
@@ -72,7 +74,7 @@ const fetchGrades = (courseId, cohort, track, showSuccess) => (
           data.results.sort(sortAlphaAsc),
           cohort,
           track,
-          headingMapper.all(dispatch, data.results[0]),
+          headingMapper(defaultAssignmentFilter)(dispatch, data.results[0]),
           data.previous,
           data.next,
         ));
@@ -95,7 +97,7 @@ const fetchMatchingUserGrades = (courseId, searchText, cohort, track) => (
           data.results.sort(sortAlphaAsc),
           cohort,
           track,
-          headingMapper.all(dispatch, data.results[0]),
+          headingMapper(defaultAssignmentFilter)(dispatch, data.results[0]),
           data.previous,
           data.next,
         ));
@@ -117,7 +119,7 @@ const fetchPrevNextGrades = (endpoint, cohort, track) => (
           data.results.sort(sortAlphaAsc),
           cohort,
           track,
-          headingMapper.all(dispatch, data.results[0]),
+          headingMapper(defaultAssignmentFilter)(dispatch, data.results[0]),
           data.previous,
           data.next,
         ));
@@ -130,14 +132,14 @@ const fetchPrevNextGrades = (endpoint, cohort, track) => (
 );
 
 
-const updateGrades = (courseId, updateData) => (
+const updateGrades = (courseId, updateData, searchText, cohort, track) => (
   (dispatch) => {
     dispatch(gradeUpdateRequest());
     return LmsApiService.updateGradebookData(courseId, updateData)
       .then(response => response.data)
       .then((data) => {
         dispatch(gradeUpdateSuccess(data));
-        dispatch(fetchGrades(courseId, null, null, true));
+        dispatch(fetchMatchingUserGrades(courseId, searchText, cohort, track));
       })
       .catch((error) => {
         dispatch(gradeUpdateFailure(error));

src/data/actions/utils.js

@@ -60,8 +60,8 @@ function gradeSortMap(columnName, direction) {
   return sortNumerically(columnName, direction);
 }
 
-const headingMapper = {
-  all: (dispatch, entry) => {
+const headingMapper = (filterKey) => {
+  function all(dispatch, entry) {
     if (entry) {
       const results = [{
         label: 'Username',
@@ -89,21 +89,18 @@ const headingMapper = {
       return results.concat(assignmentHeadings).concat(totals);
     }
     return [];
-  },
-  hw: (dispatch, entry) => {
+  }
+
+  function some(dispatch, entry) {
     const results = [{
       label: 'Username',
       key: 'username',
       columnSortable: true,
-      onSort: (direction) => {
-        this.setState({
-          grades: [...this.state.grades].sort(direction === 'desc' ? this.sortAlphaDesc : this.sortAlphaAsc),
-        });
-      },
+      onSort: (direction) => { dispatch(sortGrades('username', direction)); },
     }];
 
     const assignmentHeadings = entry.section_breakdown
-      .filter(section => section.is_graded && section.label && section.category == 'Homework')
+      .filter(section => section.is_graded && section.label && section.category === filterKey)
       .map(s => ({
         label: s.label,
         key: s.label,
@@ -111,31 +108,17 @@ const headingMapper = {
         onSort: (direction) => { this.sortNumerically(s.label, direction); },
       }));
 
-    return results.concat(assignmentHeadings);
-  },
-  exam: (dispatch, entry) => {
-    const results = [{
-      label: 'Username',
-      key: 'username',
-      columnSortable: false,
-      onSort: (direction) => {
-        this.setState({
-          grades: [...this.state.grades].sort(direction === 'desc' ? this.sortAlphaDesc : this.sortAlphaAsc),
-        });
-      },
+    const totals = [{
+      label: 'Total',
+      key: 'total',
+      columnSortable: true,
+      onSort: direction => dispatch(sortGrades('total', direction)),
     }];
 
-    const assignmentHeadings = entry.section_breakdown
-      .filter(section => section.is_graded && section.label && section.category == 'Exam')
-      .map(s => ({
-        label: s.label,
-        key: s.label,
-        columnSortable: false,
-        onSort: (direction) => { this.sortNumerically(s.label, direction); },
-      }));
+    return results.concat(assignmentHeadings).concat(totals);
+  }
 
-    return results.concat(assignmentHeadings);
-  },
+  return filterKey === 'All' ? all : some;
 };
 
 export { headingMapper, gradeSortMap, sortAlphaAsc };

src/data/constants/actionTypes/assignmentTypes.js

@@ -0,0 +1,10 @@
+const STARTED_FETCHING_ASSIGNMENT_TYPES = 'STARTED_FETCHING_ASSIGNMENT_TYPES';
+const GOT_ASSIGNMENT_TYPES = 'GOT_ASSIGNMENT_TYPES';
+const ERROR_FETCHING_ASSIGNMENT_TYPES = 'ERROR_FETCHING_ASSIGNMENT_TYPES';
+
+export {
+  STARTED_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ASSIGNMENT_TYPES,
+  ERROR_FETCHING_ASSIGNMENT_TYPES,
+};
+

src/data/reducers/assignmentTypes.js

@@ -0,0 +1,39 @@
+import {
+  STARTED_FETCHING_ASSIGNMENT_TYPES,
+  ERROR_FETCHING_ASSIGNMENT_TYPES,
+  GOT_ASSIGNMENT_TYPES,
+} from '../constants/actionTypes/assignmentTypes';
+
+const initialState = {
+  results: [],
+  startedFetching: false,
+  errorFetching: false,
+};
+
+
+const assignmentTypes = (state = initialState, action) => {
+  switch (action.type) {
+    case GOT_ASSIGNMENT_TYPES:
+      return {
+        ...state,
+        results: action.assignmentTypes,
+        errorFetching: false,
+      };
+    case STARTED_FETCHING_ASSIGNMENT_TYPES:
+      return {
+        ...state,
+        startedFetching: true,
+      };
+    case ERROR_FETCHING_ASSIGNMENT_TYPES:
+      return {
+        ...state,
+        finishedFetching: true,
+        errorFetching: true,
+      };
+    default:
+      return state;
+  }
+};
+
+export default assignmentTypes;
+

src/data/reducers/grades.js

@@ -19,6 +19,7 @@ const initialState = {
   showSuccess: false,
   prevPage: null,
   nextPage: null,
+  showSpinner: true,
 };
 
 const grades = (state = initialState, action) => {
@@ -34,12 +35,14 @@ const grades = (state = initialState, action) => {
         selectedCohort: action.cohort,
         prevPage: action.prev,
         nextPage: action.next,
+        showSpinner: false,
       };
     case STARTED_FETCHING_GRADES:
       return {
         ...state,
         startedFetching: true,
         finishedFetching: false,
+        showSpinner: true,
       };
     case ERROR_FETCHING_GRADES:
       return {

src/data/reducers/index.js

@@ -3,11 +3,13 @@ import { combineReducers } from 'redux';
 import cohorts from './cohorts';
 import grades from './grades';
 import tracks from './tracks';
+import assignmentTypes from './assignmentTypes';
 
 const rootReducer = combineReducers({
   grades,
   cohorts,
   tracks,
+  assignmentTypes,
 });
 
 export default rootReducer;

src/data/services/LmsApiService.js

@@ -3,12 +3,12 @@ import { configuration } from '../../config';
 
 class LmsApiService {
   static baseUrl = configuration.LMS_BASE_URL;
+  static pageSize = 10
 
   static fetchGradebookData(courseId, searchText, cohort, track) {
     let gradebookUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/`;
-    if (searchText || track || cohort) {
-      gradebookUrl += '?';
-    }
+
+    gradebookUrl += `?page_size=${LmsApiService.pageSize}&`;
     if (searchText) {
       gradebookUrl += `username_contains=${searchText}&`;
     }
@@ -44,7 +44,7 @@ class LmsApiService {
     const gradebookUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/bulk-update`;
     return apiClient.post(gradebookUrl, updateData);
   }
-  
+
   static fetchTracks(courseId) {
     const trackUrl = `${LmsApiService.baseUrl}/api/enrollment/v1/course/${courseId}`;
     return apiClient.get(trackUrl);
@@ -54,6 +54,11 @@ class LmsApiService {
     const cohortsUrl = `${LmsApiService.baseUrl}/courses/${courseId}/cohorts/`;
     return apiClient.get(cohortsUrl);
   }
+
+  static fetchAssignmentTypes(courseId) {
+    const assignmentTypesUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/grading-info?graded_only=true`;
+    return apiClient.get(assignmentTypesUrl);
+  }
 }
 
 export default LmsApiService;