uses display name instead of uid

backend/project/endpoints/users.py

@@ -34,6 +34,10 @@ def get(self):
                 role = Role[role.upper()]
                 query = query.filter(userModel.role == role)
 
+            uid = request.args.getlist("uid")
+            if len(uid) > 0:
+                query = query.filter(userModel.uid.in_(uid))
+
             users = query.all()
             users = [user.to_dict() for user in users]
 

frontend/src/components/ProjectSubmissionOverview/ProjectSubmissionOverviewDatagrid.tsx

@@ -9,17 +9,23 @@ import DownloadIcon from '@mui/icons-material/Download';
 import download from "downloadjs";
 import { authenticatedFetch } from "../../utils/authenticated-fetch";
 
-const apiUrl = import.meta.env.VITE_API_HOST
+const apiUrl = import.meta.env.VITE_APP_API_HOST
 
-  interface Submission {
-    grading: string;
-    project_id: string;
-    submission_id: string;
-    submission_path: string;
-    submission_status: string;
-    submission_time: string;
-    uid: string;
-  }
+interface Submission {
+  grading: string;
+  project_id: string;
+  submission_id: string;
+  submission_path: string;
+  submission_status: string;
+  submission_time: string;
+  uid: string;
+}
+
+interface User {
+  display_name: string;
+  role: string;
+  uid: string
+}
 
 /**
  * @returns unique id for datarows
@@ -40,7 +46,7 @@ const fetchSubmissionsFromUser = async (submission_id: string) => {
 
 const columns: GridColDef<Submission>[] = [
   { field: 'submission_id', headerName: 'Submission ID', flex: 0.4 },
-  { field: 'uid', headerName: 'Student ID', width: 160, flex: 0.4 },
+  { field: 'display_name', headerName: 'Student', width: 160, flex: 0.4 },
   {
     field: 'grading',
     headerName: 'Grading',
@@ -77,16 +83,43 @@ export default function ProjectSubmissionsOverviewDatagrid() {
   const { projectId } = useParams<{ projectId: string }>();
   const [submissions, setSubmissions]  = useState<Submission[]>([])
 
-  useEffect(() => {
-    fetchLastSubmissionsByUser();
-  });
+  const fetchDisplaynameByUid = async (uids: [string]) => {
+
+    const uidParams = new URLSearchParams()
+    for (const uid of uids) {
+      uidParams.append('uid', uid);
+    }
+    const uidUrl = `${apiUrl}/users?`+uidParams;
+    const response = await authenticatedFetch(uidUrl);
+    const jsonData = await response.json();
+
+    return jsonData.data
+  };
 
   const fetchLastSubmissionsByUser = async () => {
     const response = await authenticatedFetch(`${apiUrl}/projects/${projectId}/latest-per-user`)
     const jsonData = await response.json();
-    setSubmissions(jsonData.data);
+    console.log(jsonData);
+    const uids = jsonData.data.map((submission: Submission) => submission.uid);
+    const users = await fetchDisplaynameByUid(uids);
+
+    const submissionsWithUsers = jsonData.data.map((submission: Submission) => {
+      // Find the corresponding user for this submission's UID
+      const user = users.find((user: User) => user.uid === submission.uid);
+      // Add user information to the submission
+      return {
+        ...submission,
+        display_name: user.display_name
+      };
+    });
+
+    setSubmissions(submissionsWithUsers);
   }
 
+  useEffect(() => {
+    fetchLastSubmissionsByUser();
+  });
+
   return (
     <Box
       my={4}