diff --git a/src/assets/colors.scss b/src/assets/colors.scss index 3faa622a..9ed2a4ca 100644 --- a/src/assets/colors.scss +++ b/src/assets/colors.scss @@ -7,6 +7,7 @@ $color-white: #fefefe; $color-gray: #60646d; $gray-70: #666666; $gray-60: #808080; +$gray-30: #d3d3d3; $gray-20: #dfe1e1; $color-pink: #ffecf0; $color-green: #e7f7eb; diff --git a/src/assets/global.scss b/src/assets/global.scss index 872f2081..3df0dc0f 100644 --- a/src/assets/global.scss +++ b/src/assets/global.scss @@ -4,8 +4,15 @@ border: 1px solid $gray-20; border-radius: 0.375rem; padding: 20px 0; - box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.16); + box-shadow: 0px 3px 12px 0px $gray-30; background-color: $color-white; + + .progress { + border-radius: 2rem; + background: $gray-20; + border: none; + height: 0.6rem; + } } .filter-container .filters { diff --git a/src/features/Students/StudentsTable/_test_/columns.test.jsx b/src/features/Students/StudentsTable/_test_/columns.test.jsx index c4a4fc54..acf0fdf6 100644 --- a/src/features/Students/StudentsTable/_test_/columns.test.jsx +++ b/src/features/Students/StudentsTable/_test_/columns.test.jsx @@ -5,13 +5,15 @@ describe('getColumns', () => { const columns = getColumns(); expect(columns).toBeInstanceOf(Array); - expect(columns).toHaveLength(5); + expect(columns).toHaveLength(7); const [ nameColumn, emailColumn, classNameColumn, ClassIdColumn, + dateColumn, + progressColumn, examReadyColumn, ] = columns; @@ -27,6 +29,12 @@ describe('getColumns', () => { expect(ClassIdColumn).toHaveProperty('Header', 'Class Id'); expect(ClassIdColumn).toHaveProperty('accessor', 'classId'); + expect(dateColumn).toHaveProperty('Header', 'Start - End Date'); + expect(dateColumn).toHaveProperty('accessor', 'startDate'); + + expect(progressColumn).toHaveProperty('Header', 'Progress'); + expect(progressColumn).toHaveProperty('accessor', 'completePercentage'); + expect(examReadyColumn).toHaveProperty('Header', 'Exam Ready'); expect(examReadyColumn).toHaveProperty('accessor', 'examReady'); }); diff --git a/src/features/Students/StudentsTable/columns.jsx b/src/features/Students/StudentsTable/columns.jsx index c38bbdd4..85e6c234 100644 --- a/src/features/Students/StudentsTable/columns.jsx +++ b/src/features/Students/StudentsTable/columns.jsx @@ -1,4 +1,6 @@ /* eslint-disable react/prop-types */ +import { format } from 'date-fns'; +import { ProgressBar } from '@edx/paragon'; const getColumns = () => [ { @@ -17,6 +19,20 @@ const getColumns = () => [ Header: 'Class Id', accessor: 'classId', }, + { + Header: 'Start - End Date', + accessor: 'startDate', + Cell: ({ row }) => { + const startDate = row.values.startDate ? format(row.values.startDate, 'MM/dd/yy') : ''; + const endDate = row.values.endDate ? format(row.values.endDate, 'MM/dd/yy') : ''; + return