Fixed mocks for student overview and a improved styling a little bit

IguideME.Web/Frontend/src/api/grades.ts

@@ -1,12 +1,5 @@
 import { type DiscussionEntry, type DiscussionTopic, type LearningGoal } from '@/types/tile';
-import {
-  type Submission,
-  type Grades,
-  type TileGrade,
-  type UserGrade,
-  EntryGrade,
-  EntryGradeMap,
-} from '@/types/grades';
+import { type Submission, type Grades, type TileGrade, type UserGrade, EntryGradeMap } from '@/types/grades';
 import apiClient from './axios';
 
 export async function getCompareGrades(id: number, type: string): Promise<UserGrade[]> {

IguideME.Web/Frontend/src/components/pages/admin/studentoverview/common-table.tsx

@@ -78,6 +78,8 @@ const CommonTable: FC<Props> = ({ type }): ReactElement => {
       key: 'name',
       title: 'Student' as any,
       dataIndex: 'name',
+      fixed: true,
+      width: '16vw',
       ...useAntFilterDropdown('name'),
       sorter: (a: CommonData, b: CommonData) => a.student.sortable_name.localeCompare(b.student.sortable_name),
     },
@@ -94,7 +96,7 @@ const CommonTable: FC<Props> = ({ type }): ReactElement => {
         className='custom-table'
         columns={columns}
         dataSource={getData()}
-        scroll={{ x: 900, y: 600 }}
+        scroll={{ x: 'max-content', y: 600 }}
         loading={isLoading || !students}
         sticky
       />

IguideME.Web/Frontend/src/components/pages/admin/studentoverview/entries.tsx

@@ -20,9 +20,14 @@ export const getEntryColumns = (tiles: Tile[]): TableColumnsType<CommonData & En
     .map((tile) => ({
       title: tile.title,
       children: tile.entries.map((entry) => ({
-        title: entry.title,
+        title: (
+          <div className='text-ellipsis' style={{ width: '6vw', maxHeight: 100 }}>
+            {entry.title}
+          </div>
+        ),
         dataIndex: 'grade' + entry.content_id,
         key: 'grade' + entry.content_id,
+        width: '8vw',
         sorter: (a, b) => (a[`grade${entry.content_id}`] ?? -1) - (b[`grade${entry.content_id}`] ?? -1),
         render: (value: number, record) => {
           const type = record[`type${entry.content_id}`] ?? GradingType.NotGraded;

IguideME.Web/Frontend/src/components/pages/admin/studentoverview/notifications.tsx

@@ -15,12 +15,14 @@ export const getNotificationColumns = (): TableColumnsType<CommonData & Notifica
       title: 'Received Notifications',
       dataIndex: 'received',
       key: 'received',
+      width: '40%',
       render: (notifications: string | undefined) => <NotificationCell notifications={notifications} />,
     },
     {
       title: 'To Be Sent Notifications',
       dataIndex: 'to_be_sent',
       key: 'to_be_sent',
+      width: '40%',
     },
   ];
 };

IguideME.Web/Frontend/src/components/pages/admin/studentoverview/tiles.tsx

@@ -39,9 +39,10 @@ export const getTileColumns = (tiles: Tile[]): TableColumnsType<CommonData & Til
       return true;
     },
     render: (value: number, record) => {
+      const grade = record[`grade${tile.id}`];
       return (
         <div className={tile.gradingType !== GradingType.NotGraded && value < 50 ? 'text-failure' : ''}>
-          {printGrade(tile.gradingType, record[`grade${tile.id}`] ?? -1, record[`max${tile.id}`] ?? -1, false)}
+          {grade === undefined ? '...' : printGrade(tile.gradingType, grade, record[`max${tile.id}`] ?? -1, false)}
         </div>
       );
     },

IguideME.Web/Frontend/src/mocks/grades.ts

@@ -6,7 +6,7 @@ import { MOCK_PERUSALL_SUBMISSIONS } from './submissions/perusal';
 import { MOCK_PRACTICE_SESSIONS } from './submissions/practice-sessions';
 import { MOCK_QUIZ_SUBMISSIONS } from './submissions/quizzes';
 import { type LearningGoal, LogicalExpression } from '@/types/tile';
-import { type Submission, Grades, TileGrade, UserGrade } from '@/types/grades';
+import { type Submission, EntryGradeMap, Grades, GradingType, TileGrade, UserGrade } from '@/types/grades';
 import { MOCK_STUDENTS } from './users';
 import { MOCK_TILES } from './tiles';
 
@@ -52,6 +52,57 @@ export const gradeHandlers = [
       }>
     >(MOCK_TILE_GRADES);
   }),
+  http.get('/entries/grades', () => {
+    let result: EntryGradeMap = {};
+    MOCK_STUDENTS.forEach((student) => {
+      result[student.userID] = [];
+      MOCK_GOALS.forEach((goal) => {
+        let grade = 0;
+        goal.requirements.forEach((req) => {
+          const ass_grade =
+            MOCK_SUBMISSIONS.find((sub) => sub.assignmentID === req.assignment_id && sub.userID === student.userID)
+              ?.grades.grade ?? 0;
+          switch (req.expression) {
+            case LogicalExpression.NotEqual:
+              grade += +(ass_grade !== req.value);
+              break;
+            case LogicalExpression.Less:
+              grade += +(ass_grade < req.value);
+              break;
+            case LogicalExpression.LessEqual:
+              grade += +(ass_grade <= req.value);
+              break;
+            case LogicalExpression.Equal:
+              grade += +(ass_grade === req.value);
+              break;
+            case LogicalExpression.GreaterEqual:
+              grade += +(ass_grade > req.value);
+              break;
+            case LogicalExpression.Greater:
+              grade += +(ass_grade >= req.value);
+              break;
+          }
+        });
+        result[student.userID].push({
+          content_id: goal.id,
+          grade,
+          grading_type: GradingType.Points,
+          max: goal.requirements.length,
+        });
+      });
+    });
+    MOCK_SUBMISSIONS.forEach((sub) => {
+      result[sub.userID]?.push({
+        content_id: sub.assignmentID,
+        grade: sub.grades.grade,
+        max: sub.grades.max,
+        grading_type: sub.grades.type,
+      });
+    });
+    // Skipping discussions as the mocks only cover the alt version, and that is not included in this call
+
+    return HttpResponse.json<EntryGradeMap>(result);
+  }),
   http.get('/assignments/*/submissions/*', ({ params }) => {
     return HttpResponse.json<Submission | undefined>(
       MOCK_SUBMISSIONS.find((sub) => sub.assignmentID.toString() === params[0] && sub.userID === params[1]),

IguideME.Web/Frontend/src/mocks/users.ts

@@ -35,6 +35,9 @@ export const userHandlers = [
   http.get('/student/*', ({ params }) => {
     return HttpResponse.json<User | undefined>(MOCK_STUDENTS.find((student) => student.userID === params[0]));
   }),
+  http.get('/datamart/accept-list/*', () => {
+    return HttpResponse.json<boolean>(true);
+  }),
 ];
 
 export const MOCK_STUDENTS: User[] = [

IguideME.Web/Frontend/src/router.tsx

@@ -269,7 +269,7 @@ export const createRouter = (): ReturnType<typeof createBrowserRouter> =>
       },
     ],
     {
-      basename: import.meta.env.MODE === 'mock' ? '/' : '/front',
+      basename: '/front',
       future: {
         v7_fetcherPersist: true,
         v7_normalizeFormMethod: true,