wip

src/App.scss

@@ -5,6 +5,8 @@ $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
 @import "~@edx/paragon/src/SearchField/SearchField";
+@import "./components/Gradebook/gradebook";             
 
 @import "./components/Gradebook/gradebook";
 @import "./components/Gradebook/footer";
+@import "./components/Header/header";

src/components/Gradebook/index.jsx

@@ -10,7 +10,6 @@ import {
 } from '@edx/paragon';
 import queryString from 'query-string';
 import { configuration } from '../../config';
-import PageButtons from '../PageButtons';
 
 const DECIMAL_PRECISION = 2;
 
@@ -253,9 +252,9 @@ export default class Gradebook extends React.Component {
                 The grades for this course are now frozen. Editing of grades is no longer allowed.
               </div>
             }
-            { (this.props.canUserViewGradebook === false) &&
+            { !this.props.canUserViewGradebook &&
               <div className="alert alert-warning" role="alert" >
-                You are not authorized to view the gradebook for this course.
+                You are not authorized to view the gradebook for this course. If you have a global role, please enroll in this course and try again.
               </div>
             }
             <hr />
@@ -330,6 +329,21 @@ 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' }}>
+                  <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' }} />
+                  <Button
+                    label="Next"
+                    buttonType="primary"
+                    style={{ visibility: (!this.props.nextPage ? 'hidden' : 'visible') }}
+                    onClick={() => this.props.getPrevNextGrades(this.props.nextPage, this.props.selectedCohort, this.props.selectedTrack)}
+                  />
+                </div>
               </div>
             </div>
             <br />
@@ -339,14 +353,15 @@ export default class Gradebook extends React.Component {
               onClose={() => this.props.updateBanner(false)}
               open={this.props.showSuccess}
             />
-            {PageButtons(this.props)}
             <div className="gbook">
               <Table
                 columns={this.props.headings}
                 data={this.formatter[this.props.format](this.props.grades, this.props.areGradesFrozen)}
+                tableSortable
+                defaultSortDirection="asc"
+                defaultSortedColumn="username"
               />
             </div>
-            {PageButtons(this.props)}
             <Modal
               open={this.state.modalOpen}
               title="Edit Grades"

src/components/Header/_header.scss

@@ -0,0 +1,24 @@
+.color-gray-dark {
+    color: #767676;
+}
+
+.weight-bold {
+    font-weight: 600;
+}
+
+.size-16 {
+    font-size: 16px;
+}
+
+.border-bottom-blue {
+    border-bottom: 1px solid #0075b4;
+}
+
+.border-bottom-gray {
+    border-bottom: 1px solid #e7e7e7;
+}
+
+.nav-link::after {
+    content: '\00BB';
+    padding-left: 4px;
+}

src/components/Header/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink, Icon } from '@edx/paragon';
+import { configuration } from '../../config';
 
 import EdxLogo from '../../../assets/edx-sm.png';
 
@@ -24,6 +25,15 @@ export default class Header extends React.Component {
           <Hyperlink content={this.renderLogo()} destination="https://www.edx.org" />
           <div />
         </header>
+        {this.state.mobileNavOpen &&
+        <nav className="d-flex flex-column weight-bold size-16">
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Rick</a>
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Alex</a>
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Jasen</a>
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Doug</a>
+          <a href="https://www.google.com" className="nav-link border-bottom-gray">Simon</a>
+        </nav>
+        }
       </div>
     );
   }

src/components/PageButtons/PageButtons.test.jsx

@@ -1,36 +0,0 @@
-import renderer from 'react-test-renderer';
-import PageButtons from '.';
-
-const createInput = function createInput(prevPage, nextPage) {
-  return {
-    prevPage,
-    nextPage,
-    selectedTrack: 't',
-    selectedCohort: 'c',
-    getPrevNextGrades() {},
-  };
-};
-
-describe('PageButtons', () => {
-  const assertPageButtonsSnapshot = function assertPageButtonsSnapshot(input) {
-    const pb = renderer.create(PageButtons(input));
-    const tree = pb.toJSON();
-    expect(tree).toMatchSnapshot();
-  };
-
-  it('prev null, next null', () => {
-    assertPageButtonsSnapshot(createInput(null, null));
-  });
-
-  it('prev null, next not null', () => {
-    assertPageButtonsSnapshot(createInput(null, 'np'));
-  });
-
-  it('prev not null, next null', () => {
-    assertPageButtonsSnapshot(createInput('pp', null));
-  });
-
-  it('prev not null, next not null', () => {
-    assertPageButtonsSnapshot(createInput('pp', 'np'));
-  });
-});

src/components/PageButtons/__snapshots__/PageButtons.test.jsx.snap

@@ -1,169 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PageButtons prev not null, next not null 1`] = `
-<div
-  className="d-flex justify-content-center"
-  style={
-    Object {
-      "paddingBottom": "20px",
-    }
-  }
->
-  <button
-    className="btn btn-primary"
-    disabled={false}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    style={
-      Object {
-        "margin": "20px",
-      }
-    }
-    type="button"
-  >
-    Previous Page
-  </button>
-  <button
-    className="btn btn-primary"
-    disabled={false}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    style={
-      Object {
-        "margin": "20px",
-      }
-    }
-    type="button"
-  >
-    Next Page
-  </button>
-</div>
-`;
-
-exports[`PageButtons prev not null, next null 1`] = `
-<div
-  className="d-flex justify-content-center"
-  style={
-    Object {
-      "paddingBottom": "20px",
-    }
-  }
->
-  <button
-    className="btn btn-primary"
-    disabled={false}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    style={
-      Object {
-        "margin": "20px",
-      }
-    }
-    type="button"
-  >
-    Previous Page
-  </button>
-  <button
-    className="btn btn-primary"
-    disabled={true}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    style={
-      Object {
-        "margin": "20px",
-      }
-    }
-    type="button"
-  >
-    Next Page
-  </button>
-</div>
-`;
-
-exports[`PageButtons prev null, next not null 1`] = `
-<div
-  className="d-flex justify-content-center"
-  style={
-    Object {
-      "paddingBottom": "20px",
-    }
-  }
->
-  <button
-    className="btn btn-primary"
-    disabled={true}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    style={
-      Object {
-        "margin": "20px",
-      }
-    }
-    type="button"
-  >
-    Previous Page
-  </button>
-  <button
-    className="btn btn-primary"
-    disabled={false}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    style={
-      Object {
-        "margin": "20px",
-      }
-    }
-    type="button"
-  >
-    Next Page
-  </button>
-</div>
-`;
-
-exports[`PageButtons prev null, next null 1`] = `
-<div
-  className="d-flex justify-content-center"
-  style={
-    Object {
-      "paddingBottom": "20px",
-    }
-  }
->
-  <button
-    className="btn btn-primary"
-    disabled={true}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    style={
-      Object {
-        "margin": "20px",
-      }
-    }
-    type="button"
-  >
-    Previous Page
-  </button>
-  <button
-    className="btn btn-primary"
-    disabled={true}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    style={
-      Object {
-        "margin": "20px",
-      }
-    }
-    type="button"
-  >
-    Next Page
-  </button>
-</div>
-`;

src/components/PageButtons/index.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import {
-  Button,
-} from '@edx/paragon';
-
-
-export default function PageButtons({prevPage, nextPage, selectedTrack, selectedCohort, getPrevNextGrades}) {
-  return (
-    <div
-      className="d-flex justify-content-center"
-      style={{ paddingBottom: '20px' }}
-    >
-      <Button
-        label="Previous Page"
-        style={{ margin: '20px' }}
-        buttonType="primary"
-        disabled={!prevPage}
-        onClick={() => getPrevNextGrades(prevPage, selectedCohort, selectedTrack)}
-      />
-      <Button
-        label="Next Page"
-        style={{ margin: '20px' }}
-        buttonType="primary"
-        disabled={!nextPage}
-        onClick={() => getPrevNextGrades(nextPage, selectedCohort, selectedTrack)}
-      />
-    </div>
-  );
-}
-

src/data/actions/grades.test.js

@@ -96,12 +96,16 @@ describe('actions', () => {
           track: expectedTrack,
           headings: [
             {
+              columnSortable: true,
               key: 'username',
               label: 'Username',
+              onSort: expect.anything(),
             },
             {
+              columnSortable: true,
               key: 'total',
               label: 'Total',
+              onSort: expect.anything(),
             },
           ],
           prev: responseData.previous,

src/data/actions/utils.js

@@ -66,6 +66,8 @@ const headingMapper = (filterKey) => {
       const results = [{
         label: 'Username',
         key: 'username',
+        columnSortable: true,
+        onSort: (direction) => { dispatch(sortGrades('username', direction)); },
       }];
 
       const assignmentHeadings = entry.section_breakdown
@@ -73,11 +75,15 @@ const headingMapper = (filterKey) => {
         .map(s => ({
           label: s.label,
           key: s.label,
+          columnSortable: true,
+          onSort: direction => dispatch(sortGrades(s.label, direction)),
         }));
 
       const totals = [{
         label: 'Total',
         key: 'total',
+        columnSortable: true,
+        onSort: direction => dispatch(sortGrades('total', direction)),
       }];
 
       return results.concat(assignmentHeadings).concat(totals);
@@ -89,6 +95,8 @@ const headingMapper = (filterKey) => {
     const results = [{
       label: 'Username',
       key: 'username',
+      columnSortable: true,
+      onSort: (direction) => { dispatch(sortGrades('username', direction)); },
     }];
 
     const assignmentHeadings = entry.section_breakdown
@@ -96,11 +104,15 @@ const headingMapper = (filterKey) => {
       .map(s => ({
         label: s.label,
         key: s.label,
+        columnSortable: false,
+        onSort: (direction) => { this.sortNumerically(s.label, direction); },
       }));
 
     const totals = [{
       label: 'Total',
       key: 'total',
+      columnSortable: true,
+      onSort: direction => dispatch(sortGrades('total', direction)),
     }];
 
     return results.concat(assignmentHeadings).concat(totals);