Show rating results on project list for admins

Author: sezanzeb

backend/src/controllers/dto.ts

@@ -628,12 +628,22 @@ export class RatingDTO {
   public rating!: number;
 }
 
+class CriterionAvgDTO {
+  @Expose()
+  @Type(() => CriterionDTO)
+  public criterion!: CriterionDTO;
+  @Expose()
+  public average!: number;
+}
+
 // Do not send all ratings to the client,
 // because peoples opinion on the projects should be anonymous
 export class ProjectRatingResultDTO {
   @Expose()
   @Type(() => ProjectDTO)
   public project!: ProjectDTO;
+  @IsArray()
+  @Type(() => CriterionAvgDTO)
   @Expose()
-  public criterionIdToAvg!: Record<number, number>;
+  public averagesPerCriterion!: CriterionAvgDTO[];
 }

backend/src/services/rating-service.ts

@@ -5,18 +5,13 @@ import { IService } from ".";
 import { DatabaseServiceToken, IDatabaseService } from "./database-service";
 import { ISettingsService, SettingsServiceToken } from "./settings-service";
 import { Rating } from "../entities/rating";
-import { RatingDTO, convertBetweenEntityAndDTO } from "../controllers/dto";
+import { RatingDTO, ProjectRatingResultDTO, convertBetweenEntityAndDTO } from "../controllers/dto";
 import { User } from "../entities/user";
 import { Team } from "../entities/team";
 import { Project } from "../entities/project";
 import { Criterion } from "../entities/criterion";
 import { UserRole } from "../entities/user-role";
 
-export interface ProjectRatingResult {
-  project: Project;
-  criterionIdToAvg: Record<number, number>;
-}
-
 export interface IRatingService extends IService {
   /**
    * Get the ratings for a specific project, cast by a specific user.
@@ -38,7 +33,7 @@ export interface IRatingService extends IService {
   /**
    * Get all ratings for every project
    */
-  getRatingResults(): Promise<readonly ProjectRatingResult[]>;
+  getRatingResults(): Promise<readonly ProjectRatingResultDTO[]>;
 }
 
 /**
@@ -162,17 +157,23 @@ export class RatingService implements IRatingService {
   /**
    * Get the average ratings for each project
    */
-  public async getRatingResults(): Promise<readonly ProjectRatingResult[]> {
+  public async getRatingResults(): Promise<readonly ProjectRatingResultDTO[]> {
     const allProjects = await this._projects.find();
     const allRatings = await this._ratings.find();
 
     const result = [];
 
+    const idToCriterion: Record<number, Criterion> = {};
+
     for (const project of allProjects) {
+      const averagesPerCriterion = [];
+
       // Sum up
       const criterionIdToSum: Record<number, number> = {}
       const criterionIdToCount: Record<number, number> = {}
       for (const rating of allRatings) {
+        idToCriterion[rating.criterion.id] = rating.criterion;
+
         if (rating.project.id !== project.id) {
           continue;
         }
@@ -190,12 +191,14 @@ export class RatingService implements IRatingService {
       // Calculate average
       const criterionIdToAvg: Record<number, number> = {}
       for (const criterionId in criterionIdToSum) {
-        criterionIdToAvg[criterionId] = criterionIdToSum[criterionId] / criterionIdToCount[criterionId];
+        const average = criterionIdToSum[criterionId] / criterionIdToCount[criterionId];
+        const criterion = idToCriterion[criterionId];
+        averagesPerCriterion.push({ criterion, average });
       }
 
       result.push({
         project,
-        criterionIdToAvg
+        averagesPerCriterion
       });
     }
 

frontend/src/components/pages/projects.tsx

@@ -1,4 +1,13 @@
 import styled from "@emotion/styled";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+} from '@mui/material';
 import * as React from "react";
 import { useState, useEffect } from "react";
 import { Chip, Grid } from "@mui/material";
@@ -16,12 +25,87 @@ import { Routes } from "../../routes";
 import { TeamDTO } from "../../api/types/dto";
 import { api } from "../../hooks/use-api";
 import { PageHeader } from "../base/page-header";
+import { useLoginContext } from "../../contexts/login-context";
+import { UserRole } from "../../api/types/enums";
 
 const HeaderContainer = styled(NonGrowingFlexContainer)`
   justify-content: space-between;
   flex-direction: row;
 `;
 
+const arraySum = (array) => {
+  return array.reduce((partialSum, a) => partialSum + a, 0);
+}
+
+/**
+ * A table displaying the average rating per criterion, and the total sum
+ * for each project.
+ */
+const RatingResults = () => {
+  const [ratingResults, setRatingResults] = useState([]);
+  const [criteria, setCriteria] = React.useState([]);
+
+  useEffect(
+    () => {
+      api.getRatingResults().then((stuff) => {
+        setRatingResults(stuff)
+      });
+
+      api.getAllCriteria().then((criteria) => {
+        setCriteria(criteria);
+      });
+    },
+    []
+  );
+
+  return (
+    <div style={{ marginTop: "2em"  }}>
+      <h2>Results</h2>
+      <p>(Only visible to admins)</p>
+      {
+        <TableContainer component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>Project</TableCell>
+                {criteria.map(criterion => (
+                  <TableCell key={criterion.id} align="center">
+                    {criterion.title}
+                  </TableCell>
+                ))}
+                <TableCell key="CriterionSum" align="center">
+                Sum
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {ratingResults.map(resultForProject => (
+                <TableRow key={resultForProject.project.id}>
+                  <TableCell>
+                    {resultForProject.project.title} #{resultForProject.project.id}
+                  </TableCell>
+                  {criteria.map(criterion => (
+                    <TableCell key={criterion.id} align="center">
+                      {
+                        resultForProject
+                          .averagesPerCriterion
+                          .find((a) => a.criterion.id == criterion.id)?.average
+                      }
+                    </TableCell>
+                  ))}
+                  <TableCell key="CriterionSum" align="center">
+                  {arraySum(resultForProject.averagesPerCriterion.map(({ average }) => average))}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      }
+    </div>
+  )
+}
+
 /**
  * - Show all projects visible to the user (owned + rating allowed)
  * - Let users rate them
@@ -32,6 +116,8 @@ const HeaderContainer = styled(NonGrowingFlexContainer)`
 export const Projects = () => {
   const [allProjects, setAllProjects] = useState([]);
   const [settings, setSettings] = useState({});
+  const loginState = useLoginContext();
+  const { user } = loginState;
 
   // Do this only on mount
   useEffect(
@@ -111,6 +197,9 @@ export const Projects = () => {
           </Grid>
         ))}
       </Grid>
+      {user.role === UserRole.Root && (
+        <RatingResults />
+      )}
     </Page>
   );
 };

frontend/src/components/pages/rating-form.tsx

@@ -5,13 +5,13 @@ import {
   RadioGroup,
   FormControlLabel,
   Radio,
-  Button,
   Alert,
   Typography,
   Tooltip,
 } from "@mui/material";
 import { api } from "../../hooks/use-api";
 import { useLoginContext } from "../../contexts/login-context";
+import { Button } from "../base/button";
 
 /**
  * Component that allows users to submit and edit ratings for projects.
@@ -96,9 +96,9 @@ export const RatingForm = ({
           variant="contained"
           onClick={handleSubmit}
           disabled={isSubmitting}
-          sx={{ alignSelf: { xs: "stretch", sm: "auto" } }}
+          loading={isSubmitting}
         >
-          {isSubmitting ? "Submitting..." : "Submit"}
+          Submit
         </Button>
       </Stack>