feat: Additional game metadata for teachers

FGPE-Erasmus · Mar 26, 2023 · b638f9e · b638f9e
1 parent 6d098c3
commit b638f9e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 160 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -281,6 +281,8 @@
     "descriptionPlaceholder": "Description of your game",
     "startDate": "Start date",
     "endDate": "End date",
+    "createdAt": "Created at",
+    "lastSubmission": "Last submission date",
     "evaluationEngine": "Evaluation engine",
     "courseId": "Course ID",
     "courseIdPlaceholder": "Unique course id",

diff --git a/src/components/Challenge.tsx b/src/components/Challenge.tsx
@@ -156,7 +156,7 @@ const Challenge = () => {
     error: activityError,
     loading: activityLoading,
   } = useQuery<getActivityById>(GET_ACTIVITY_BY_ID, {
-    skip: !activeExercise,
+    skip: !activeExercise?.activity?.id,
     variables: { gameId, activityId: activeExercise?.activity?.id },
     fetchPolicy: "no-cache",
     onCompleted: () => {

diff --git a/src/components/InstructorGame/index.tsx b/src/components/InstructorGame/index.tsx
@@ -100,6 +100,8 @@ const InstructorGame = () => {
     fetchPolicy: "cache-first",
   });
 
+  const lastSubmissionDate = gameData?.game.submissions[0]?.submittedAt;
+
   if (!gameId) {
     return <div>Game ID not provided</div>;
   }
@@ -125,7 +127,6 @@ const InstructorGame = () => {
   }
 
   const getSelectedPlayers = () => {
-    console.log("getting selected players", selectedStudentsRef);
     return selectedStudentsRef.current.map(
       (student: getGameByIdQuery_game_players) => student.id
     );
@@ -345,7 +346,34 @@ const InstructorGame = () => {
             content={gameData.game.private ? t("Yes") : t("No")}
           />
         </Flex>
-        {/* <Divider marginBottom={10} /> */}
+
+        <Flex
+          margin="auto"
+          width="100%"
+          justifyContent="space-between"
+          flexDirection={{ base: "column", md: "row" }}
+        >
+          <DetailsCard
+            badgeContent
+            flexDirection="row"
+            title={t("addGame.createdAt")}
+            content={
+              gameData.game.createdAt
+                ? dayjs(gameData.game.createdAt).format("DD/MM/YYYY")
+                : "-"
+            }
+          />
+          <DetailsCard
+            badgeContent
+            flexDirection="row"
+            title={t("addGame.lastSubmission")}
+            content={
+              lastSubmissionDate
+                ? dayjs(lastSubmissionDate).format("DD/MM/YYYY")
+                : "-"
+            }
+          />
+        </Flex>
 
         <Accordion allowToggle allowMultiple marginTop={3}>
           <AccordionItem>
@@ -401,163 +429,6 @@ const InstructorGame = () => {
             )}
           </AccordionItem>
         </Accordion>
-        {/* 
-        <Flex justifyContent="space-between" alignItems="center">
-          <Heading as="h3" size="sm" marginTop={5} marginBottom={5}>
-            {t("Students")}
-          </Heading>
-
-          <Flex>
-            <Button
-              marginRight={2}
-              size="sm"
-              isLoading={autoAssignGroupsLoading}
-              disabled={autoAssignGroupsLoading}
-              onClick={async () => {
-                setLoading(true);
-                try {
-                  await autoAssignGroups({
-                    variables: {
-                      gameId,
-                    },
-                  });
-                  await refetchGame();
-                } catch (err) {
-                  addNotification({
-                    status: "error",
-                    title: t("error.autoAssign.title"),
-                    description: t("error.autoAssign.description"),
-                  });
-                }
-                setLoading(false);
-              }}
-            >
-              {t("Auto-assign groups")}
-            </Button>
-            <Button marginRight={2} size="sm" onClick={onAddGroupModalOpen}>
-              {t("Add new group")}
-            </Button>
-
-            <Menu>
-              <MenuButton
-                disabled={!isStudentSelected}
-                size="sm"
-                as={Button}
-                rightIcon={<ChevronDownIcon />}
-              >
-                {t("Actions")}
-              </MenuButton>
-
-              <MenuList>
-                <MenuItem onClick={onSetGroupModalOpen}>
-                  {t("Set group")}
-                </MenuItem>
-                <MenuItem onClick={getSelectedStudentsAndRemoveFromGroups}>
-                  {t("Remove from the group")}
-                </MenuItem>
-                <MenuItem onClick={getSelectedStudentAndRemoveFromGame}>
-                  {t("Remove from the game")}
-                </MenuItem>
-              </MenuList>
-            </Menu>
-          </Flex>
-        </Flex>
-
-        <Box>
-          <TableComponent
-            loading={loading}
-            onRowClick={(row: getGameByIdQuery_game_players) => {
-              history.push({
-                pathname: `/teacher/player-details/${row.user.id}/${gameId}`,
-              });
-            }}
-            selectableRows
-            setIsAnythingSelected={setIsStudentSelected}
-            setSelectedStudents={(rows: any) => {
-              selectedStudentsRef.current = rows;
-            }}
-            columns={[
-              {
-                Header: t("table.name"),
-                accessor: "user.firstName",
-                Filter: ({ column }: { column: any }) => (
-                  <ColumnFilter
-                    column={column}
-                    placeholder={t("placeholders.name")}
-                  />
-                ),
-              },
-              {
-                Header: t("table.lastName"),
-                accessor: "user.lastName",
-                Filter: ({ column }: { column: any }) => (
-                  <ColumnFilter
-                    column={column}
-                    placeholder={t("placeholders.lastName")}
-                  />
-                ),
-              },
-
-              {
-                Header: t("table.submissions"),
-                accessor: "stats.nrOfSubmissions",
-                Filter: ({ column }: { column: any }) => (
-                  <ColumnFilter column={column} placeholder="123" />
-                ),
-              },
-              {
-                Header: t("table.validations"),
-                accessor: "stats.nrOfValidations",
-                Filter: ({ column }: { column: any }) => (
-                  <ColumnFilter column={column} placeholder="123" />
-                ),
-              },
-              {
-                Header: t("table.group"),
-                accessor: "group.name",
-                Cell: ({ value }: { value: any }) => {
-                  return value ? value : "-";
-                },
-                Filter: ({ column }: { column: any }) => (
-                  <ColumnFilter
-                    column={column}
-                    placeholder={t("table.group")}
-                  />
-                ),
-              },
-              {
-                Header: t("table.progress"),
-                accessor: "learningPath",
-                Cell: ({ value }: { value: any }) => {
-                  const totalChallengesCount = value.length || 1;
-
-                  const progressCombined =
-                    value
-                      .flatMap((learningPath: any) => learningPath.progress)
-                      .reduce((a: any, b: any) => a + b, 0) /
-                    totalChallengesCount;
-
-                  return (progressCombined * 100).toFixed(1) + "%";
-                },
-                disableFilters: true,
-                sortType: memoizedSorting,
-              },
-            ]}
-            data={gameData.game.players}
-          />
-        </Box> */}
-
-        {/* <Flex justifyContent="space-between" alignItems="center">
-          <Heading as="h3" size="sm" marginTop={5} marginBottom={5}>
-            {t("Activities")}
-          </Heading>
-        </Flex>
-
-        <ActivitiesStats
-          gameData={gameData}
-          gameId={gameId}
-          statsData={overallStatsData}
-        /> */}
       </div>
     </>
   );

diff --git a/src/generated/gameDetailsGetGameByIdQuery.ts b/src/generated/gameDetailsGetGameByIdQuery.ts
@@ -7,6 +7,11 @@
 // GraphQL query operation: gameDetailsGetGameByIdQuery
 // ====================================================
 
+export interface gameDetailsGetGameByIdQuery_game_submissions {
+  __typename: "Submission";
+  submittedAt: any;
+}
+
 export interface gameDetailsGetGameByIdQuery_game_players_stats {
   __typename: "PlayerStats";
   nrOfSubmissions: number;
@@ -31,6 +36,7 @@ export interface gameDetailsGetGameByIdQuery_game {
   endDate: any | null;
   archival: boolean;
   private: boolean;
+  submissions: gameDetailsGetGameByIdQuery_game_submissions[];
   players: gameDetailsGetGameByIdQuery_game_players[];
   createdAt: any;
 }

diff --git a/src/graphql/gameDetailsGetGameById.tsx b/src/graphql/gameDetailsGetGameById.tsx
@@ -11,6 +11,10 @@ export const GAME_DETAILS_GET_GAME_BY_ID = gql`
       archival
       private
 
+      submissions {
+        submittedAt
+      }
+
       players {
         id
         stats {