Merge branch 'backend/documentation/readme-update' of github.com:SELa…

…b-2/UGent-3 into backend/documentation/readme-update

backend/project/endpoints/submissions/submission_detail.py

@@ -107,7 +107,6 @@ def patch(self, submission_id:int) -> dict[str, any]:
 
                 # Save the submission
                 session.commit()
-
                 data["message"] = f"Submission (submission_id={submission_id}) patched"
                 data["url"] = urljoin(f"{BASE_URL}/", str(submission.submission_id))
                 data["data"] = submission_response(submission, API_HOST)

documentation/docusaurus.config.ts

@@ -38,7 +38,7 @@ const config: Config = {
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+            'https://github.com/SELab-2/UGent-3',
         },
         theme: {
           customCss: './src/css/custom.css',
@@ -64,7 +64,7 @@ const config: Config = {
           label: 'User guide',
         },
         {
-          href: 'https://github.com/facebook/docusaurus',
+          href: 'https://github.com/SELab-2/UGent-3',
           label: 'GitHub',
           position: 'right',
         },

frontend/README.md

@@ -26,6 +26,17 @@ You can choose your own preferred webserver like for example `nginx`, `serve` or
    npm run dev
    ```
 
+## Setting up the environment variables
+
+This application requires a couple of environment variables to run.
+Setting values for these variables can be done with a method to your own liking.
+
+| Variable               | Description                                                                        |
+|------------------------|------------------------------------------------------------------------------------|
+| VITE_API_HOST          | URL of the API                                                                     |
+| VITE_APP_TENANT_ID     | [Tenant id](https://learn.microsoft.com/nl-nl/entra/fundamentals/whatis)           |
+| VITE_APP_CLIENT_ID     | [Client id](https://learn.microsoft.com/nl-nl/entra/identity-platform/v2-protocols) |
+
 ## Maintaining the codebase
 ### Writing tests
 When writing new code it is important to maintain the right functionality so 
@@ -50,5 +61,4 @@ If you want to execute the linter on all files in the project it can simply be d
 with the command:
 ```sh
 npm run lint
-``` 
-
+```

frontend/public/locales/en/submissionOverview.json

@@ -1,6 +1,12 @@
 {
   "submissionOverview": {
     "submissionOverviewHeader": "Project status overview",
-    "downloadButton": "DOWNLOAD ALL PROJECTS"
+    "downloadButton": "DOWNLOAD ALL PROJECTS",
+    "scoreError": "Grade must be between 0 and 20",
+    "submissionID": "Submission ID",
+    "student": "Student",
+    "grading": "Grading",
+    "status": "Status",
+    "download": "Download"
   }
 }

frontend/public/locales/nl/submissionOverview.json

@@ -0,0 +1,12 @@
+{
+  "submissionOverview": {
+    "submissionOverviewHeader": "Project status overzicht",
+    "downloadButton": "DOWNLOAD ALLE PROJECTEN",
+    "scoreError": "Score moeten tussen 0 en 20 liggen",
+    "submissionID": "Indiening ID",
+    "student": "Student",
+    "grading": "Score",
+    "status": "Status",
+    "download": "Download"
+  }
+}

frontend/src/components/ProjectSubmissionOverview/ProjectSubmissionOverviewDatagrid.tsx

@@ -1,13 +1,20 @@
-import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
-import { Box, IconButton } from "@mui/material";
+import {
+  DataGrid,
+  GridEditInputCell,
+  GridPreProcessEditCellProps,
+  GridRenderCellParams,
+  GridRenderEditCellParams
+} from "@mui/x-data-grid";
+import {Box, IconButton, styled, Tooltip, tooltipClasses, TooltipProps} from "@mui/material";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import { green, red } from "@mui/material/colors";
 import CancelIcon from "@mui/icons-material/Cancel";
 import DownloadIcon from "@mui/icons-material/Download";
 import download from "downloadjs";
 import { authenticatedFetch } from "../../utils/authenticated-fetch";
 import { Submission } from "../../types/submission";
-
+import {useTranslation} from "react-i18next";
+import {TFunction} from "i18next";
 const APIURL = import.meta.env.VITE_APP_API_HOST;
 
 /**
@@ -27,57 +34,121 @@ const fetchSubmissionsFromUser = async (submission_id: string) => {
     });
 };
 
-const columns: GridColDef<Submission>[] = [
-  { field: "submission_id", headerName: "Submission ID", flex: 0.4 },
-  { field: "display_name", headerName: "Student", width: 160, flex: 0.4 },
-  {
-    field: "grading",
-    headerName: "Grading",
-    editable: true,
-    flex: 0.2,
-  },
-  {
-    field: "submission_status",
-    headerName: "Status",
-    renderCell: (params: GridRenderCellParams<Submission>) => (
-      <>
-        {params.row.submission_status === "SUCCESS" ? (
-          <CheckCircleIcon sx={{ color: green[500] }} />
-        ) : (
-          <CancelIcon sx={{ color: red[500] }} />
-        )}
-      </>
-    ),
-  },
-  {
-    field: "submission_path",
-    headerName: "Download",
-    renderCell: (params: GridRenderCellParams<Submission>) => (
-      <IconButton
-        onClick={() => fetchSubmissionsFromUser(params.row.submission_id)}
-      >
-        <DownloadIcon />
-      </IconButton>
-    ),
+const editGrade = (submission: Submission, errorMessage: string) => {
+  const submission_id = submission.submission_id;
+  const newGrade = submission.grading;
+
+  if (newGrade < 0 || newGrade > 20) {
+    throw new Error(errorMessage);
+  }
+
+  const formData = new FormData();
+  formData.append('grading', newGrade.toString());
+
+  authenticatedFetch(`${APIURL}/submissions/${submission_id}`, {
+    method: "PATCH",
+    body: formData
+  })
+
+  return submission
+};
+
+const StyledTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.error.main,
+    color: theme.palette.error.contrastText,
   },
-];
+}));
 
 /**
- * @returns the datagrid for displaying submissiosn
+ * @returns Component for input edit cell
+ */
+function NameEditInputCell(props: GridRenderEditCellParams) {
+  const { error, msg } = props;
+
+  return (
+    <StyledTooltip open={!!error} title={msg}>
+      <GridEditInputCell {...props} />
+    </StyledTooltip>
+  );
+}
+
+/**
+ * @returns component for passing params
+ */
+function renderEditScore(params: GridRenderEditCellParams) {
+  return <NameEditInputCell {...params} />;
+}
+
+const getTranslatedRows = (t: TFunction<string, string>) => {
+  return [
+    { field: "submission_id", headerName: t("submissionID"), flex: 0.4, editable: false },
+    { field: "display_name", headerName: t("student"), width: 160, flex: 0.4, editable: false },
+    {
+      field: "grading",
+      headerName: t("grading"),
+      editable: true,
+      flex: 0.2,
+      preProcessEditCellProps: (params: GridPreProcessEditCellProps) => {
+        const hasError = params.props.value > 20 || params.props.value < 0;
+        return { ...params.props, error: hasError, msg: t("scoreError") };
+      },
+      renderEditCell: renderEditScore
+    },
+    {
+      field: "submission_status",
+      headerName: t("status"),
+      editable: false,
+      renderCell: (params: GridRenderCellParams<Submission>) => (
+        <>
+          {params.row.submission_status === "SUCCESS" ? (
+            <CheckCircleIcon sx={{ color: green[500] }} />
+          ) : (
+            <CancelIcon sx={{ color: red[500] }} />
+          )}
+        </>
+      ),
+    },
+    {
+      field: "submission_path",
+      headerName: t("download"),
+      renderCell: (params: GridRenderCellParams<Submission>) => (
+        <IconButton
+          onClick={() => fetchSubmissionsFromUser(params.row.submission_id)}
+        >
+          <DownloadIcon />
+        </IconButton>
+      ),
+    },
+  ];
+}
+
+/**
+ * @returns the datagrid for displaying submissions
  */
 export default function ProjectSubmissionsOverviewDatagrid({
   submissions,
 }: {
   submissions: Submission[];
 }) {
+
+  const { t } = useTranslation('submissionOverview', { keyPrefix: 'submissionOverview' });
+
+  const errorMsg = t("scoreError");
+
   return (
     <Box my={4}>
       <DataGrid
         getRowId={getRowId}
         rows={submissions}
-        columns={columns}
+        columns={getTranslatedRows(t)}
         pageSizeOptions={[20]}
         disableRowSelectionOnClick
+        processRowUpdate={(updatedRow) =>
+          editGrade(updatedRow, errorMsg)
+        }
       />
     </Box>
   );

frontend/src/types/submission.ts

@@ -3,4 +3,5 @@ export interface Submission {
   submission_time: string;
   submission_status: string;
   uid: string;
+  grading: number;
 }