Merge pull request #6 from Pearson-Advance/vue/PADV-646

PADV-646 - Add first access, last access and grade columns
Pearson-Advance · Sep 6, 2023 · 885f544 · 885f544
2 parents 676592b + aa3ef29
commit 885f544
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 3 deletions.
diff --git a/src/features/Students/StudentsTable/_test_/columns.test.jsx b/src/features/Students/StudentsTable/_test_/columns.test.jsx
@@ -5,7 +5,7 @@ describe('getColumns', () => {
     const columns = getColumns();
 
     expect(columns).toBeInstanceOf(Array);
-    expect(columns).toHaveLength(7);
+    expect(columns).toHaveLength(10);
 
     const [
       nameColumn,
@@ -14,6 +14,9 @@ describe('getColumns', () => {
       ClassIdColumn,
       instructorsColumn,
       createdColumn,
+      firstAccessColumn,
+      lastAccessColumn,
+      gradeColumn,
       ActionColumn,
     ] = columns;
 
@@ -35,6 +38,15 @@ describe('getColumns', () => {
     expect(createdColumn).toHaveProperty('Header', 'Created');
     expect(createdColumn).toHaveProperty('accessor', 'created');
 
+    expect(firstAccessColumn).toHaveProperty('Header', 'First Access');
+    expect(firstAccessColumn).toHaveProperty('accessor', 'first_access');
+
+    expect(lastAccessColumn).toHaveProperty('Header', 'Last Access');
+    expect(lastAccessColumn).toHaveProperty('accessor', 'last_access');
+
+    expect(gradeColumn).toHaveProperty('Header', 'Grade');
+    expect(gradeColumn).toHaveProperty('accessor', 'grade');
+
     expect(ActionColumn).toHaveProperty('Header', 'Action');
     expect(ActionColumn).toHaveProperty('accessor', 'status');
   });

diff --git a/src/features/Students/StudentsTable/_test_/index.test.jsx b/src/features/Students/StudentsTable/_test_/index.test.jsx
@@ -19,13 +19,19 @@ describe('Student Table', () => {
         ccx_name: 'CCX 1',
         instructors: ['Instructor 1'],
         created: 'Fri, 25 Aug 2023 19:01:22 GMT',
+        first_access: 'Fri, 25 Aug 2023 19:01:23 GMT',
+        last_access: 'Fri, 25 Aug 2023 20:20:22 GMT',
+        grade: true,
       },
       {
         learner_name: 'Student 2',
         learner_email: '[email protected]',
         ccx_name: 'CCX 2',
         instructors: ['Instructor 2'],
         created: 'Sat, 26 Aug 2023 19:01:22 GMT',
+        first_access: 'Sat, 26 Aug 2023 19:01:24 GMT',
+        last_access: 'Sat, 26 Aug 2023 21:22:22 GMT',
+        grade: false,
       },
     ];
 
@@ -53,10 +59,22 @@ describe('Student Table', () => {
     expect(component.container).toHaveTextContent('Instructor 1');
     expect(component.container).toHaveTextContent('Instructor 2');
 
-    // Check datetime is formatted
+    // Check datetime for created column is formatted
     expect(component.container).toHaveTextContent('Fri, 25 Aug 2023 19:01:22 GMT');
     expect(component.container).toHaveTextContent('Sat, 26 Aug 2023 19:01:22 GMT');
 
+    // Check datetime for first access column is formatted
+    expect(component.container).toHaveTextContent('Fri, 25 Aug 2023 19:01:23 GMT');
+    expect(component.container).toHaveTextContent('Sat, 26 Aug 2023 19:01:24 GMT');
+
+    // Check datetime for last access column is formatted
+    expect(component.container).toHaveTextContent('Fri, 25 Aug 2023 20:20:22 GMT');
+    expect(component.container).toHaveTextContent('Sat, 26 Aug 2023 21:22:22 GMT');
+
+    // Check grade
+    expect(component.container).toHaveTextContent('pass');
+    expect(component.container).toHaveTextContent('fail');
+
     // Ensure "No students found." is not present
     expect(screen.queryByText('No students found.')).toBeNull();
   });

diff --git a/src/features/Students/StudentsTable/columns.jsx b/src/features/Students/StudentsTable/columns.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { Button } from '@edx/paragon';
+import { Badge, Button } from '@edx/paragon';
 
 const getColumns = props => [
   {
@@ -34,6 +34,21 @@ const getColumns = props => [
     accessor: 'created',
     Cell: ({ row }) => new Date(row.values.created).toUTCString(),
   },
+  {
+    Header: 'First Access',
+    accessor: 'first_access',
+    Cell: ({ row }) => new Date(row.values.first_access).toUTCString(),
+  },
+  {
+    Header: 'Last Access',
+    accessor: 'last_access',
+    Cell: ({ row }) => new Date(row.values.last_access).toUTCString(),
+  },
+  {
+    Header: 'Grade',
+    accessor: 'grade',
+    Cell: ({ row }) => <Badge variant={row.values.grade ? 'success' : 'danger'}>{row.values.grade ? 'pass' : 'fail'}</Badge>,
+  },
   {
     Header: 'Action',
     accessor: 'status',