Merge pull request #1 from digitalaidseattle/studentDetailsTable

Student details table

src/api/cePlanService.ts

@@ -25,6 +25,7 @@ class CEPlanService {
                         student: {
                             id: '',
                             name: 'Student 1',
+                            age: null,
                             email: '',
                             city: '',
                             state: '',
@@ -40,6 +41,7 @@ class CEPlanService {
                         student: {
                             id: '',
                             name: 'Student 2',
+                            age: null,
                             email: '',
                             city: '',
                             state: '',
@@ -55,6 +57,7 @@ class CEPlanService {
                         student: {
                             id: '',
                             name: 'Student 3',
+                            age: null,
                             email: '',
                             city: '',
                             state: '',

src/api/ceSessionService.ts

@@ -20,6 +20,7 @@ const TEST_PLAN = {
             student: {
                 id: '',
                 name: 'Student 1',
+                age: null,
                 email: '',
                 city: '',
                 state: '',
@@ -35,6 +36,7 @@ const TEST_PLAN = {
             student: {
                 id: '',
                 name: 'Student 2',
+                age: null,
                 email: '',
                 city: '',
                 state: '',
@@ -50,6 +52,7 @@ const TEST_PLAN = {
             student: {
                 id: '',
                 name: 'Student 3',
+                age: null,
                 email: '',
                 city: '',
                 state: '',

src/api/ceStudentService.ts

@@ -17,6 +17,7 @@ class CEStudentService {
                     {
                         id: 'sess1',
                         name: 'Student 1',
+                        age: 17,
                         email: '[email protected]',
                         city: "Seattle",
                         state: "Washington",
@@ -26,6 +27,7 @@ class CEStudentService {
                     {
                         id: 'sess2',
                         name: 'Student 1',
+                        age: 15,
                         email: '[email protected]',
                         city: "Essen",
                         state: "",

src/api/types.ts

@@ -7,6 +7,7 @@ type Availability = {
 type Student = {
     id: string;
     name: string;
+    age: number | null;
     email: string;
     city: string;
     state: string;

src/pages/students/StudentsDetailsTable.tsx

@@ -0,0 +1,80 @@
+import { useContext, useEffect, useState } from 'react';
+
+import Box from '@mui/material/Box';
+import {
+  DataGrid,
+  GridColDef,
+  GridSortModel,
+} from '@mui/x-data-grid';
+
+import { PageInfo, QueryModel } from '../../services/supabaseClient';
+import { studentService } from '../../api/ceStudentService';
+import { LoadingContext } from '../../components/contexts/LoadingContext';
+
+const PAGE_SIZE = 10;
+
+const getColumns = (): GridColDef[] => {
+  return [
+    {
+      field: 'name',
+      headerName: 'Name',
+      width: 150,
+    },
+    {
+      field: 'age',
+      headerName: 'Age',
+      width: 150,
+    },
+    {
+      field: 'country',
+      headerName: 'Country',
+      width: 150,
+    },
+  ]
+}
+
+const StudentsDetailsTable: React.FC = () => {
+  const [paginationModel, setPaginationModel] = useState({ page: 0, pageSize: PAGE_SIZE });
+  const [sortModel, setSortModel] = useState<GridSortModel>([{ field: 'name', sort: 'asc' }]);
+  const [pageInfo, setPageInfo] = useState<PageInfo<Student>>({ rows: [], totalRowCount: 0 });
+  const { setLoading } = useContext(LoadingContext);
+
+  useEffect(() => {
+    if (paginationModel && sortModel) {
+      setLoading(true);
+        const queryModel = {
+          page: paginationModel.page,
+          pageSize: paginationModel.pageSize,
+          sortField: sortModel.length === 0 ? 'name' : sortModel[0].field,
+          sortDirection: sortModel.length === 0 ? 'asc' : sortModel[0].sort
+        } as QueryModel
+        studentService.find(queryModel)
+          .then((pi) => setPageInfo(pi))
+          .catch((err) => console.error(err))
+          .finally(() => setLoading(false))
+    }
+  }, [paginationModel, sortModel])
+
+
+  return (
+    <Box>
+      <DataGrid
+        rows={pageInfo.rows}
+        columns={getColumns()}
+
+        paginationMode='server'
+        paginationModel={paginationModel}
+        rowCount={pageInfo.totalRowCount}
+        onPaginationModelChange={setPaginationModel}
+
+        sortingMode='server'
+        sortModel={sortModel}
+        onSortModelChange={setSortModel}
+
+        pageSizeOptions={[5, 10, 25, 100]}
+      />
+    </Box>
+  )
+}
+
+export default StudentsDetailsTable;

src/pages/students/index.tsx

@@ -4,15 +4,16 @@
 // project import
 import { Typography } from '@mui/material';
 import MainCard from '../../components/MainCard';
+import StudentsDetailsTable from './StudentsDetailsTable';
 
 // ================================|| 404 ||================================ //
 
 const StudentsPage: React.FC = () => {
     return (
         <MainCard title="Students Page">
-            <Typography>List/Table of students enrolled in the program.</Typography>
             <Typography>Should include method to upload a spreadsheet</Typography>
             <Typography>Investigate integration with Google Docs to obtain data</Typography>
+            <StudentsDetailsTable />
         </MainCard>
     )
 };