Merge pull request #37 from Pearson-Advance/vue/PADV-969

PADV-969 feat: Update students table
Pearson-Advance · Feb 20, 2024 · ff30b18 · ff30b18
2 parents fd6acf8 + af628ed
commit ff30b18
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 <div>{startDate} - {endDate}</div>;
+    },
+  },
+  {
+    Header: 'Progress',
+    accessor: 'completePercentage',
+    Cell: ({ row }) => (<ProgressBar now={row.values.completePercentage} variant="primary" />),
+  },
   {
     Header: 'Exam Ready',
     accessor: 'examReady',