VKT(Frontend & Backend): Examiner admin ui navigation fixes and some …

…demo data
Opetushallitus · Nov 14, 2024 · 3c9f292 · 3c9f292
1 parent 798579e
commit 3c9f292
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 83 deletions.
diff --git a/backend/vkt/db/4_init.sql b/backend/vkt/db/4_init.sql
@@ -461,6 +461,12 @@ VALUES (2, 1, 1,
        'Anneli', 'Annikkinen',
        '123c2089-83a8-4163-8180-d8b675ff5337', NOW() - INTERVAL '3 days', NOW() - INTERVAL '6 days');
 
+INSERT INTO payment(version, enrollment_id, amount, transaction_id, reference, payment_url,
+       payment_status, refunded_at, enrollment_appointment_id)
+VALUES (2, null, 51400, '78b29334-a283-11ef-88a1-bf672bd574b1', '7676156682',
+       'https://pay.paytrail.com/pay/78b29334-a283-11ef-88a1-bf672bd574b1', 'OK',
+       null, 3);
+
 -- Insert enrollment appointment
 INSERT INTO enrollment_appointment(person_id, examiner_id, examiner_exam_event_id,
                        skill_oral, skill_textual, skill_understanding,

diff --git a/frontend/packages/vkt/src/components/clerkExamEvent/overview/TopControls.tsx b/frontend/packages/vkt/src/components/clerkExamEvent/overview/TopControls.tsx
@@ -4,15 +4,18 @@ import { CustomButtonLink } from 'shared/components';
 import { Variant } from 'shared/enums';
 
 import { useCommonTranslation } from 'configs/i18n';
-import { AppRoutes } from 'enums/app';
 
-export const TopControls: FC = () => {
+interface TopControlsProps {
+  backTo: string;
+}
+
+export const TopControls: FC<TopControlsProps> = ({ backTo }) => {
   const translateCommon = useCommonTranslation();
 
   return (
     <div className="columns">
       <CustomButtonLink
-        to={AppRoutes.ClerkExcellentLevelPage}
+        to={backTo}
         className="color-secondary-dark"
         variant={Variant.Text}
         startIcon={<ArrowBackIosOutlined />}

diff --git a/...tend/packages/vkt/src/components/examinerEnrollment/listing/ExaminerEnrollmentListing.tsx b/...tend/packages/vkt/src/components/examinerEnrollment/listing/ExaminerEnrollmentListing.tsx
@@ -6,31 +6,24 @@ import { ClerkEnrollmentAppointment } from 'interfaces/clerkEnrollment';
 
 interface ExaminerEnrollmentListingProps {
   enrollments: Array<ClerkEnrollmentAppointment>;
-  examEventId: number;
 }
 
-const getRowDetailsWithExamEventId = (examEventId: number) => {
+const getRowDetailsWithExamEventId = () => {
   const getRowDetails = (enrollment: ClerkEnrollmentAppointment) => {
-    return (
-      <ExaminerEnrollmentListingRow
-        enrollment={enrollment}
-        examEventId={examEventId}
-      />
-    );
+    return <ExaminerEnrollmentListingRow enrollment={enrollment} />;
   };
 
   return getRowDetails;
 };
 
 export const ExaminerEnrollmentListing = ({
   enrollments,
-  examEventId,
 }: ExaminerEnrollmentListingProps) => (
   <CustomTable
     className="table-layout-auto"
     data={enrollments}
     header={<ExaminerEnrollmentListingHeader />}
-    getRowDetails={getRowDetailsWithExamEventId(examEventId)}
+    getRowDetails={getRowDetailsWithExamEventId()}
     size="small"
     stickyHeader
   />

diff --git a/...d/packages/vkt/src/components/examinerEnrollment/listing/ExaminerEnrollmentListingRow.tsx b/...d/packages/vkt/src/components/examinerEnrollment/listing/ExaminerEnrollmentListingRow.tsx
@@ -1,5 +1,5 @@
 import { TableCell, TableRow } from '@mui/material';
-import { useNavigate } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
 import { Text } from 'shared/components';
 
 import { useClerkTranslation } from 'configs/i18n';
@@ -26,16 +26,15 @@ function pick<T extends object, K extends keyof T>(object: T, keys: Array<K>) {
 
 export const ExaminerEnrollmentListingRow = ({
   enrollment,
-  examEventId,
 }: {
   enrollment: ClerkEnrollmentAppointment;
-  examEventId: number;
 }) => {
   // I18n
   const { t } = useClerkTranslation({
     keyPrefix: 'vkt.component.clerkEnrollmentListing.row',
   });
   const navigate = useNavigate();
+  const params = useParams();
 
   const getSelectedPartialExamsText = () => {
     const partialExams = pick(enrollment, [
@@ -56,12 +55,14 @@ export const ExaminerEnrollmentListingRow = ({
   };
 
   const onClick = () => {
-    navigate(
-      AppRoutes.ClerkEnrollmentOverviewPage.replace(
-        /:examEventId/,
-        `${examEventId}`,
-      ),
-    );
+    if (params.oid && enrollment.id) {
+      navigate(
+        AppRoutes.ExaminerEnrollmentAppointmentPage.replace(
+          ':oid',
+          params.oid,
+        ).replace(/:enrollmentAppointmentId/, `${enrollment.id}`),
+      );
+    }
   };
 
   return (

diff --git a/...d/packages/vkt/src/components/examinerExamEvent/listing/ExaminerContactRequestListing.tsx b/...d/packages/vkt/src/components/examinerExamEvent/listing/ExaminerContactRequestListing.tsx
@@ -1,5 +1,6 @@
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { TableCell, TableHead, TableRow } from '@mui/material';
+import { useParams } from 'react-router';
 import { CustomButtonLink, CustomTable, Text } from 'shared/components';
 import { Color, Variant } from 'shared/enums';
 
@@ -25,6 +26,9 @@ const ExaminerContactRequestListingRow = ({
 }: {
   contactRequest: ContactRequest;
 }) => {
+  const params = useParams();
+  const oid = params.oid || '';
+
   return (
     <TableRow>
       <TableCell>
@@ -39,7 +43,10 @@ const ExaminerContactRequestListingRow = ({
           variant={Variant.Text}
           color={Color.Secondary}
           endIcon={<ChevronRightIcon />}
-          to={AppRoutes.ClerkEnrollmentContactRequestPage.replace(
+          to={AppRoutes.ExaminerEnrollmentContactRequestPage.replace(
+            ':oid',
+            oid,
+          ).replace(
             /:enrollmentContactRequestId/,
             contactRequest.id.toString(),
           )}

diff --git a/frontend/packages/vkt/src/components/examinerExamEvent/overview/ExaminerExamEventDetails.tsx b/frontend/packages/vkt/src/components/examinerExamEvent/overview/ExaminerExamEventDetails.tsx
@@ -18,7 +18,6 @@ import { DateTimeUtils } from 'utils/dateTime';
 interface EnrollmentListProps {
   enrollments: Array<ClerkEnrollmentAppointment>;
   status: EnrollmentAppointmentStatus;
-  examEventId: number;
 }
 
 const enrollmentFilter = (
@@ -27,11 +26,7 @@ const enrollmentFilter = (
 ): Array<ClerkEnrollmentAppointment> =>
   enrollments.filter((e: ClerkEnrollmentAppointment) => e.status === status);
 
-const EnrollmentList: FC<EnrollmentListProps> = ({
-  enrollments,
-  status,
-  examEventId,
-}) => {
+const EnrollmentList: FC<EnrollmentListProps> = ({ enrollments, status }) => {
   const { t } = useClerkTranslation({
     keyPrefix: 'vkt.component.clerkExamEventOverview.examEventListingHeader',
   });
@@ -46,10 +41,7 @@ const EnrollmentList: FC<EnrollmentListProps> = ({
             data-testid={`clerk-exam-event-overview-page__enrollment-list-${status}__header`}
           >{`${t(status)}: ${filteredEnrollments.length}`}</H2>
           <div className="margin-top-sm">
-            <ExaminerEnrollmentListing
-              enrollments={filteredEnrollments}
-              examEventId={examEventId}
-            />
+            <ExaminerEnrollmentListing enrollments={filteredEnrollments} />
           </div>
         </div>
       )}
@@ -119,34 +111,28 @@ export const ExaminerExamEventDetails = () => {
       <EnrollmentList
         enrollments={enrollments}
         status={EnrollmentAppointmentStatus.COMPLETED}
-        examEventId={examEvent.id}
       />
       <EnrollmentList
         enrollments={enrollments}
         status={EnrollmentAppointmentStatus.AWAITING_PAYMENT}
-        examEventId={examEvent.id}
       />
       <EnrollmentList
         enrollments={enrollments}
         status={
           EnrollmentAppointmentStatus.EXPECTING_PAYMENT_UNFINISHED_ENROLLMENT
         }
-        examEventId={examEvent.id}
       />
       <EnrollmentList
         enrollments={enrollments}
         status={EnrollmentAppointmentStatus.WAITING_AUTHENTICATION}
-        examEventId={examEvent.id}
       />
       <EnrollmentList
         enrollments={enrollments}
         status={EnrollmentAppointmentStatus.CANCELED}
-        examEventId={examEvent.id}
       />
       <EnrollmentList
         enrollments={enrollments}
         status={EnrollmentAppointmentStatus.CANCELED_UNFINISHED_ENROLLMENT}
-        examEventId={examEvent.id}
       />
     </>
   );

diff --git a/frontend/packages/vkt/src/components/skeletons/ClerkExamEventOverviewPageSkeleton.tsx b/frontend/packages/vkt/src/components/skeletons/ClerkExamEventOverviewPageSkeleton.tsx
@@ -3,12 +3,13 @@ import { SkeletonVariant } from 'shared/enums';
 
 import { ClerkExamEventDetails } from 'components/clerkExamEvent/overview/ClerkExamEventDetails';
 import { TopControls } from 'components/clerkExamEvent/overview/TopControls';
+import { AppRoutes } from 'enums/app';
 
 export const ClerkExamEventOverviewPageSkeleton = () => {
   return (
     <>
       <Skeleton variant={SkeletonVariant.Rectangular}>
-        <TopControls />
+        <TopControls backTo={AppRoutes.ClerkExcellentLevelPage} />
       </Skeleton>
       <Skeleton
         className="full-max-width half-height margin-top-lg"

diff --git a/frontend/packages/vkt/src/enums/app.ts b/frontend/packages/vkt/src/enums/app.ts
@@ -59,9 +59,6 @@ export enum AppRoutes {
   PublicEnrollmentContactDone = goodAndSatisfactoryLevelContactRoute +
     '/:examinerId/valmis',
 
-  // Routes for clerk user
-  ClerkEnrollmentContactRequestPage = '/vkt/virkailija/yhteydenottopyynto/:enrollmentContactRequestId',
-  ClerkEnrollmentAppointmentPage = '/vkt/virkailija/ilmoittautuminen/:enrollmentAppointmentId',
   ClerkLocalLogoutPage = '/vkt/cas/localLogout',
   ClerkRoot = '/vkt/virkailija',
 
@@ -81,6 +78,8 @@ export enum AppRoutes {
   ExaminerDetailsPage = '/vkt/tv/:oid/omat-tiedot',
   ExaminerExamEventCreatePage = '/vkt/tv/:oid/tutkintotilaisuus/luo',
   ExaminerExamEventPage = '/vkt/tv/:oid/tutkintotilaisuus/:examEventId',
+  ExaminerEnrollmentContactRequestPage = '/vkt/tv/:oid/yhteydenottopyynto/:enrollmentContactRequestId',
+  ExaminerEnrollmentAppointmentPage = '/vkt/tv/:oid/ilmoittautuminen/:enrollmentAppointmentId',
 
   // Miscellaneous
   AccessibilityStatementPage = '/vkt/saavutettavuusseloste',

diff --git a/frontend/packages/vkt/src/pages/ClerkEnrollmentAppointmentOverviewPage.tsx b/frontend/packages/vkt/src/pages/ClerkEnrollmentAppointmentOverviewPage.tsx
@@ -5,7 +5,9 @@ import { H1 } from 'shared/components';
 import { APIResponseStatus } from 'shared/enums';
 
 import { ClerkEnrollmentAppointmentDetails } from 'components/clerkEnrollment/appointment/ClerkEnrollmentAppointmentDetails';
+import { TopControls } from 'components/clerkExamEvent/overview/TopControls';
 import { useAppDispatch, useAppSelector } from 'configs/redux';
+import { AppRoutes } from 'enums/app';
 import { loadClerkEnrollmentAppointment } from 'redux/reducers/clerkEnrollmentAppointment';
 import { clerkEnrollmentAppointmentSelector } from 'redux/selectors/clerkEnrollmentAppointment';
 
@@ -17,6 +19,12 @@ export const ClerkEnrollmentAppointmentOverviewPage: FC = () => {
 
   const dispatch = useAppDispatch();
   const params = useParams();
+  const backTo = enrollment?.examEvent?.id
+    ? AppRoutes.ExaminerExamEventPage.replace(':oid', params.oid || '').replace(
+        ':examEventId',
+        enrollment?.examEvent?.id,
+      )
+    : AppRoutes.ExaminerHomePage.replace(':oid', params.oid || '');
 
   useEffect(() => {
     if (
@@ -29,6 +37,7 @@ export const ClerkEnrollmentAppointmentOverviewPage: FC = () => {
 
   return (
     <Box className="clerk-enrollment-overview-page">
+      <TopControls backTo={backTo} />
       <H1 data-testid="clerk-enrollment-overview-page__header"></H1>
       <Paper
         elevation={3}

diff --git a/frontend/packages/vkt/src/pages/ClerkEnrollmentContactRequestPage.tsx b/frontend/packages/vkt/src/pages/ClerkEnrollmentContactRequestPage.tsx
@@ -1,10 +1,8 @@
-import { ArrowBackIosOutlined as ArrowBackIosOutlinedIcon } from '@mui/icons-material';
 import { Box, Divider, Grid, Paper } from '@mui/material';
 import { FC, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router';
 import {
   CustomButton,
-  CustomButtonLink,
   H1,
   H2,
   H3,
@@ -13,6 +11,7 @@ import {
 } from 'shared/components';
 import { APIResponseStatus, Color, Variant } from 'shared/enums';
 
+import { TopControls } from 'components/clerkExamEvent/overview/TopControls';
 import { useCommonTranslation } from 'configs/i18n';
 import { useAppDispatch, useAppSelector } from 'configs/redux';
 import { AppRoutes } from 'enums/app';
@@ -24,22 +23,6 @@ import {
 import { clerkEnrollmentContactRequestSelector } from 'redux/selectors/clerkEnrollmentContactRequest';
 import { EnrollmentUtils } from 'utils/enrollment';
 
-const BackButton = () => {
-  const translateCommon = useCommonTranslation();
-
-  return (
-    <CustomButtonLink
-      to={AppRoutes.ClerkRoot}
-      variant={Variant.Text}
-      startIcon={<ArrowBackIosOutlinedIcon />}
-      className="color-secondary-dark"
-      data-testid="clerk-create-exam__back-btn"
-    >
-      {translateCommon('back')}
-    </CustomButtonLink>
-  );
-};
-
 export const ClerkEnrollmentContactRequestPage: FC = () => {
   const { status, createStatus, enrollment } = useAppSelector(
     clerkEnrollmentContactRequestSelector,
@@ -64,16 +47,26 @@ export const ClerkEnrollmentContactRequestPage: FC = () => {
   useEffect(() => {
     if (
       createStatus === APIResponseStatus.Success &&
-      params.enrollmentContactRequestId
+      params.enrollmentContactRequestId &&
+      params.oid
     ) {
       navigate(
-        AppRoutes.ClerkEnrollmentAppointmentPage.replace(
+        AppRoutes.ExaminerEnrollmentAppointmentPage.replace(
+          ':oid',
+          params.oid,
+        ).replace(
           ':enrollmentAppointmentId',
           params.enrollmentContactRequestId,
         ),
       );
     }
-  }, [dispatch, navigate, params.enrollmentContactRequestId, createStatus]);
+  }, [
+    dispatch,
+    navigate,
+    params.oid,
+    params.enrollmentContactRequestId,
+    createStatus,
+  ]);
 
   const isLoading = status === APIResponseStatus.InProgress;
   const isSavingDisabled = isLoading;
@@ -110,6 +103,7 @@ export const ClerkEnrollmentContactRequestPage: FC = () => {
   const onSubmit = () => {
     dispatch(createClerkEnrollmentAppointment(enrollment.id));
   };
+  const backTo = AppRoutes.ExaminerHomePage.replace(':oid', params.oid || '');
 
   return (
     <Box className="clerk-homepage">
@@ -120,7 +114,7 @@ export const ClerkEnrollmentContactRequestPage: FC = () => {
         className="clerk-homepage__grid-container"
       >
         <div>
-          <BackButton />
+          <TopControls backTo={backTo} />
         </div>
         <Grid item>
           <H1>Yhteydenottopyyntö</H1>

diff --git a/frontend/packages/vkt/src/pages/ClerkExamEventOverviewPage.tsx b/frontend/packages/vkt/src/pages/ClerkExamEventOverviewPage.tsx
@@ -86,7 +86,7 @@ export const ClerkExamEventOverviewPage: FC = () => {
           <ClerkExamEventOverviewPageSkeleton />
         ) : (
           <>
-            <TopControls />
+            <TopControls backTo={AppRoutes.ClerkExcellentLevelPage} />
             <ClerkExamEventDetails />
           </>
         )}

diff --git a/frontend/packages/vkt/src/pages/examiner/ExaminerExamEventOverviewPage.tsx b/frontend/packages/vkt/src/pages/examiner/ExaminerExamEventOverviewPage.tsx
@@ -81,6 +81,7 @@ export const ExaminerExamEventOverviewPage: FC = () => {
         translateCommon,
       )} ${DateUtils.formatOptionalDate(examEvent.date)}`
     : '';
+  const backTo = AppRoutes.ExaminerHomePage.replace(':oid', params.oid || '');
 
   return (
     <Box className="clerk-exam-event-overview-page">
@@ -93,7 +94,7 @@ export const ExaminerExamEventOverviewPage: FC = () => {
           <ClerkExamEventOverviewPageSkeleton />
         ) : (
           <>
-            <TopControls />
+            <TopControls backTo={backTo} />
             <ExaminerExamEventDetails />
           </>
         )}