VKT(Frontend): Exam event participants calculation

Opetushallitus · Nov 8, 2024 · 7722142 · 7722142
1 parent 27d0185
commit 7722142
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 12 deletions.
diff --git a/frontend/packages/vkt/public/i18n/fi-FI/examiner.json b/frontend/packages/vkt/public/i18n/fi-FI/examiner.json
@@ -32,6 +32,9 @@
         }
       },
       "examinerExamEventListing": {
+        "actions": {
+          "createExamEvent": "Lisää tutkintotilaisuus"
+        },
         "heading": "Tutkintotilaisuudet",
         "labels": {
           "noExamEvents": "Ei tutkintotilaisuuksia"

diff --git a/frontend/packages/vkt/src/components/examinerExamEvent/listing/ExaminerExamEventListing.tsx b/frontend/packages/vkt/src/components/examinerExamEvent/listing/ExaminerExamEventListing.tsx
@@ -1,4 +1,5 @@
-import { ChevronRight } from '@mui/icons-material';
+import AddIcon from '@mui/icons-material/Add';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import {
   Divider,
   SelectChangeEvent,
@@ -18,7 +19,7 @@ import {
   useKoodistoMunicipalitiesTranslation,
 } from 'configs/i18n';
 import { useAppDispatch, useAppSelector } from 'configs/redux';
-import { AppRoutes, ExamLanguage } from 'enums/app';
+import { AppRoutes, EnrollmentStatus, ExamLanguage } from 'enums/app';
 import { ExaminerExamEvent } from 'interfaces/examinerExamEvent';
 import { setExaminerExamEventLanguageFilter } from 'redux/reducers/examinerDetails';
 import { examinerDetailsSelector } from 'redux/selectors/examinerDetails';
@@ -55,9 +56,22 @@ const ExaminerExamEventListingRow = ({
   });
   const translateCommon = useCommonTranslation();
   const translateMunicipality = useKoodistoMunicipalitiesTranslation();
-  const { language, date, municipality, isHidden, id } = examEvent;
+  const {
+    language,
+    date,
+    municipality,
+    maxParticipants,
+    enrollments,
+    isHidden,
+    id,
+  } = examEvent;
   const { examiner } = useAppSelector(examinerDetailsSelector);
 
+  // TODO Clarify which enrollments should be counted here
+  const participantsCount = enrollments.filter(
+    (e) => e.status === EnrollmentStatus.COMPLETED,
+  ).length;
+
   return (
     <TableRow>
       <TableCell>
@@ -70,7 +84,11 @@ const ExaminerExamEventListingRow = ({
         <Text>{translateMunicipality(municipality.code)}</Text>
       </TableCell>
       <TableCell>
-        <Text className="bold">TODO</Text>
+        <Text>
+          {maxParticipants
+            ? `${participantsCount}/${maxParticipants}`
+            : `${participantsCount}`}
+        </Text>
       </TableCell>
       <TableCell>
         <Text>{translateCommon(isHidden ? 'no' : 'yes')}</Text>
@@ -80,7 +98,7 @@ const ExaminerExamEventListingRow = ({
           sx={{ padding: 0 }}
           variant={Variant.Text}
           color={Color.Secondary}
-          endIcon={<ChevronRight />}
+          endIcon={<ChevronRightIcon />}
           to={AppRoutes.ExaminerExamEventPage.replace(
             /:oid/,
             examiner?.oid || '',
@@ -116,7 +134,9 @@ export const ExaminerExamEventListing = () => {
   });
 
   const filteredExamEvents = useAppSelector(selectFilteredExaminerExamEvents);
-  const { examEventFilters } = useAppSelector(examinerDetailsSelector);
+  const { examiner, examEventFilters } = useAppSelector(
+    examinerDetailsSelector,
+  );
   const dispatch = useAppDispatch();
 
   const handleLanguageFilterChange = (event: SelectChangeEvent) => {
@@ -127,7 +147,23 @@ export const ExaminerExamEventListing = () => {
 
   return (
     <div className="examiner-homepage__exam-events rows gapped-xl">
-      <H2>{t('heading')}</H2>
+      <div className="columns">
+        <H2 className="grow">{t('heading')}</H2>
+        <div className="flex-end">
+          <CustomButtonLink
+            data-testid="clerk-exam-events__create-exam-event-btn"
+            startIcon={<AddIcon />}
+            color={Color.Secondary}
+            variant={Variant.Contained}
+            to={AppRoutes.ExaminerExamEventCreatePage.replace(
+              /:oid/,
+              examiner?.oid || '',
+            )}
+          >
+            {t('actions.createExamEvent')}
+          </CustomButtonLink>{' '}
+        </div>
+      </div>
       <Divider />
       <ExaminerExamEventToggleFilters />
       <LanguageFilter

diff --git a/frontend/packages/vkt/src/enums/app.ts b/frontend/packages/vkt/src/enums/app.ts
@@ -79,7 +79,8 @@ export enum AppRoutes {
   ExaminerRoot = '/vkt/tv',
   ExaminerHomePage = '/vkt/tv/:oid',
   ExaminerDetailsPage = '/vkt/tv/:oid/omat-tiedot',
-  ExaminerExamEventPage = '/vkt/tv/:oid/tutkinto/:examEventId',
+  ExaminerExamEventCreatePage = '/vkt/tv/:oid/tutkintotilaisuus/luo',
+  ExaminerExamEventPage = '/vkt/tv/:oid/tutkintotilaisuus/:examEventId',
 
   // Miscellaneous
   AccessibilityStatementPage = '/vkt/saavutettavuusseloste',

diff --git a/frontend/packages/vkt/src/interfaces/examinerExamEvent.ts b/frontend/packages/vkt/src/interfaces/examinerExamEvent.ts
@@ -2,14 +2,16 @@ import { Dayjs } from "dayjs";
 import { ExamLanguage } from "enums/app";
 import { WithId, WithVersion } from "shared/interfaces";
 import { MunicipalityCode } from "./municipality";
+import { ClerkEnrollmentAppointment, ClerkEnrollmentAppointmentResponse } from "./clerkEnrollment";
 
 export interface ExaminerExamEventResponse
   extends Omit<
     ExaminerExamEvent,
-    'date' | 'registrationCloses'
+    'date' | 'registrationCloses' | 'enrollments'
   > {
   date: string;
   registrationCloses: string;
+  enrollments: Array<ClerkEnrollmentAppointmentResponse>;
 }
 
 export interface ExaminerExamEvent
@@ -22,4 +24,5 @@ export interface ExaminerExamEvent
   isHidden: boolean;
   maxParticipants?: number;
   registrationCloses?: Dayjs;
+  enrollments: Array<ClerkEnrollmentAppointment>;
 }
diff --git a/frontend/packages/vkt/src/redux/selectors/clerkListExamEvent.ts b/frontend/packages/vkt/src/redux/selectors/clerkListExamEvent.ts
@@ -22,9 +22,13 @@ export const selectFilteredClerkExamEvents = createSelector(
     }
 
     if (toggleFilter === ExamEventToggleFilter.Upcoming) {
-      return ExamEventUtils.getUpcomingExamEvents(filteredExamEvents) as Array<ClerkListExamEvent>;
+      return ExamEventUtils.getUpcomingExamEvents(
+        filteredExamEvents,
+      ) as Array<ClerkListExamEvent>;
     } else {
-      return ExamEventUtils.getPassedExamEvents(filteredExamEvents) as Array<ClerkListExamEvent>;
+      return ExamEventUtils.getPassedExamEvents(
+        filteredExamEvents,
+      ) as Array<ClerkListExamEvent>;
     }
   },
 );
diff --git a/frontend/packages/vkt/src/utils/serialization.ts b/frontend/packages/vkt/src/utils/serialization.ts
@@ -268,8 +268,11 @@ export class SerializationUtils {
     const registrationCloses = !!examinerExamEvent.registrationCloses
       ? dayjs(examinerExamEvent.registrationCloses)
       : undefined;
+    const enrollments = examinerExamEvent.enrollments.map(
+      SerializationUtils.deserializeClerkEnrollmentAppointment,
+    );
 
-    return { ...examinerExamEvent, date, registrationCloses };
+    return { ...examinerExamEvent, date, registrationCloses, enrollments };
   }
 
   static deserializeExaminerDetails(