fix: order columns classes tables

Pearson-Advance · Jul 3, 2024 · 6805e13 · 6805e13
1 parent 4aed2b3
commit 6805e13
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 50 deletions.
diff --git a/src/features/Classes/ClassesTable/_test_/columns.test.jsx b/src/features/Classes/ClassesTable/_test_/columns.test.jsx
@@ -13,38 +13,38 @@ describe('columns', () => {
 
     const [
       classNameColumn,
-      masterCourseNameColumn,
-      startDateColumn,
-      endDateColumn,
-      minStudentsAllowedColumn,
-      numberOfStudentsColumn,
-      maxStudentsColumn,
-      instructorsColumn,
+      instructor,
+      enrollmentStatus,
+      minStudentsAllowed,
+      studentsEnrolled,
+      maxStudents,
+      startDate,
+      endDate,
     ] = columns;
 
     expect(classNameColumn).toHaveProperty('Header', 'Class');
     expect(classNameColumn).toHaveProperty('accessor', 'className');
 
-    expect(masterCourseNameColumn).toHaveProperty('Header', 'Course');
-    expect(masterCourseNameColumn).toHaveProperty('accessor', 'masterCourseName');
+    expect(instructor).toHaveProperty('Header', 'Instructor');
+    expect(instructor).toHaveProperty('accessor', 'instructors');
 
-    expect(startDateColumn).toHaveProperty('Header', 'Start Date');
-    expect(startDateColumn).toHaveProperty('accessor', 'startDate');
+    expect(minStudentsAllowed).toHaveProperty('Header', 'Min');
+    expect(minStudentsAllowed).toHaveProperty('accessor', 'minStudentsAllowed');
 
-    expect(endDateColumn).toHaveProperty('Header', 'End Date');
-    expect(endDateColumn).toHaveProperty('accessor', 'endDate');
+    expect(enrollmentStatus).toHaveProperty('Header', 'Enrollment status');
+    expect(enrollmentStatus).toHaveProperty('accessor', 'numberOfPendingStudents');
 
-    expect(minStudentsAllowedColumn).toHaveProperty('Header', 'Min');
-    expect(minStudentsAllowedColumn).toHaveProperty('accessor', 'minStudentsAllowed');
+    expect(studentsEnrolled).toHaveProperty('Header', 'Students Enrolled');
+    expect(studentsEnrolled).toHaveProperty('accessor', 'numberOfStudents');
 
-    expect(numberOfStudentsColumn).toHaveProperty('Header', 'Students Enrolled');
-    expect(numberOfStudentsColumn).toHaveProperty('accessor', 'numberOfStudents');
+    expect(maxStudents).toHaveProperty('Header', 'Max');
+    expect(maxStudents).toHaveProperty('accessor', 'maxStudents');
 
-    expect(maxStudentsColumn).toHaveProperty('Header', 'Max');
-    expect(maxStudentsColumn).toHaveProperty('accessor', 'maxStudents');
+    expect(startDate).toHaveProperty('Header', 'Start Date');
+    expect(startDate).toHaveProperty('accessor', 'startDate');
 
-    expect(instructorsColumn).toHaveProperty('Header', 'Instructors');
-    expect(instructorsColumn).toHaveProperty('accessor', 'instructors');
+    expect(endDate).toHaveProperty('Header', 'End Date');
+    expect(endDate).toHaveProperty('accessor', 'endDate');
   });
 
   test('Show menu dropdown', async () => {

diff --git a/src/features/Classes/ClassesTable/_test_/index.test.jsx b/src/features/Classes/ClassesTable/_test_/index.test.jsx
@@ -68,8 +68,6 @@ describe('Classes Table', () => {
       { preloadedState: mockStore },
     );
 
-    expect(component.container).toHaveTextContent('Demo MasterCourse 1');
-    expect(component.container).toHaveTextContent('Demo MasterCourse 2');
     expect(component.container).toHaveTextContent('Demo Class 1');
     expect(component.container).toHaveTextContent('Demo Class 2');
     expect(component.container).toHaveTextContent('09/21/24');

diff --git a/src/features/Classes/ClassesTable/columns.jsx b/src/features/Classes/ClassesTable/columns.jsx
@@ -8,6 +8,7 @@ import {
   Icon,
   useToggle,
 } from '@edx/paragon';
+import { Badge } from 'react-paragon-topaz';
 import { MoreHoriz } from '@edx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
 
@@ -29,33 +30,7 @@ const columns = [
     ),
   },
   {
-    Header: 'Course',
-    accessor: 'masterCourseName',
-  },
-  {
-    Header: 'Start Date',
-    accessor: 'startDate',
-    Cell: ({ row }) => (row.values.startDate ? formatUTCDate(row.values.startDate, 'MM/dd/yy') : ''),
-  },
-  {
-    Header: 'End Date',
-    accessor: 'endDate',
-    Cell: ({ row }) => (row.values.endDate ? formatUTCDate(row.values.endDate, 'MM/dd/yy') : ''),
-  },
-  {
-    Header: 'Min',
-    accessor: 'minStudentsAllowed',
-  },
-  {
-    Header: 'Students Enrolled',
-    accessor: 'numberOfStudents',
-  },
-  {
-    Header: 'Max',
-    accessor: 'maxStudents',
-  },
-  {
-    Header: 'Instructors',
+    Header: 'Instructor',
     accessor: 'instructors',
     Cell: ({ row }) => {
       if (row.values.instructors?.length > 0) {
@@ -73,6 +48,41 @@ const columns = [
       );
     },
   },
+  {
+    Header: 'Enrollment status',
+    accessor: 'numberOfPendingStudents',
+    Cell: ({ row }) => {
+      const isEnrollmentComplete = row.values.numberOfPendingStudents === 0;
+
+      return isEnrollmentComplete ? (
+        <Badge variant="success" light>Complete</Badge>
+      ) : (
+        <Badge variant="warning" light>Pending ({row.values.numberOfPendingStudents})</Badge>
+      );
+    },
+  },
+  {
+    Header: 'Min',
+    accessor: 'minStudentsAllowed',
+  },
+  {
+    Header: 'Students Enrolled',
+    accessor: 'numberOfStudents',
+  },
+  {
+    Header: 'Max',
+    accessor: 'maxStudents',
+  },
+  {
+    Header: 'Start Date',
+    accessor: 'startDate',
+    Cell: ({ row }) => (row.values.startDate ? formatUTCDate(row.values.startDate, 'MM/dd/yy') : '-'),
+  },
+  {
+    Header: 'End Date',
+    accessor: 'endDate',
+    Cell: ({ row }) => (row.values.endDate ? formatUTCDate(row.values.endDate, 'MM/dd/yy') : '-'),
+  },
   {
     Header: '',
     accessor: 'courseName',