From 798579ee31249fff78c113315a0964363b3cda3b Mon Sep 17 00:00:00 2001 From: Jarkko Pesonen <435495+jrkkp@users.noreply.github.com> Date: Thu, 14 Nov 2024 13:23:45 +0200 Subject: [PATCH] VKT(Frontend & Backend): Examiner exam event overview page fixes --- backend/vkt/db/4_init.sql | 28 +++ .../packages/vkt/public/i18n/fi-FI/clerk.json | 1 + .../overview/ExaminerExamEventDetails.tsx | 202 ++++++------------ .../ExaminerExamEventOverviewPage.tsx | 4 +- 4 files changed, 91 insertions(+), 144 deletions(-) diff --git a/backend/vkt/db/4_init.sql b/backend/vkt/db/4_init.sql index 2977deed1..50bcefb49 100644 --- a/backend/vkt/db/4_init.sql +++ b/backend/vkt/db/4_init.sql @@ -446,3 +446,31 @@ VALUES (1, 1, 1, 'foo@bar.invalid', '0404040404', null, null, null, null, 'Teppo', 'Testinen', '922c2089-83a8-4163-8180-d8b675ff5337', NOW() + INTERVAL '3 days', NOW()); + +-- Insert enrollment appointment +INSERT INTO enrollment_appointment(person_id, examiner_id, examiner_exam_event_id, + skill_oral, skill_textual, skill_understanding, + partial_exam_speaking, partial_exam_speech_comprehension, partial_exam_writing, partial_exam_reading_comprehension, + status, digital_certificate_consent, email, phone_number, street, postal_code, town, country, first_name, last_name, + auth_hash, auth_hash_expires, auth_hash_sent) +VALUES (2, 1, 1, + false, true, false, + false, false, true, true, + 'COMPLETED', false, + 'test@test.invalid', '0401234504', null, null, null, null, + 'Anneli', 'Annikkinen', + '123c2089-83a8-4163-8180-d8b675ff5337', NOW() - INTERVAL '3 days', NOW() - INTERVAL '6 days'); + +-- Insert enrollment appointment +INSERT INTO enrollment_appointment(person_id, examiner_id, examiner_exam_event_id, + skill_oral, skill_textual, skill_understanding, + partial_exam_speaking, partial_exam_speech_comprehension, partial_exam_writing, partial_exam_reading_comprehension, + status, digital_certificate_consent, email, phone_number, street, postal_code, town, country, first_name, last_name, + auth_hash, auth_hash_expires, auth_hash_sent) +VALUES (3, 1, 1, + true, true, true, + true, true, true, true, + 'CANCELED', false, + 'bar@test.invalid', '0501234504', null, null, null, null, + 'Marja-Liisa', 'Testaaja', + '233c2129-83a8-4163-8180-d8b675ff5337', NOW() + INTERVAL '3 days', NOW()); diff --git a/frontend/packages/vkt/public/i18n/fi-FI/clerk.json b/frontend/packages/vkt/public/i18n/fi-FI/clerk.json index e8b7c1423..412b1df5e 100644 --- a/frontend/packages/vkt/public/i18n/fi-FI/clerk.json +++ b/frontend/packages/vkt/public/i18n/fi-FI/clerk.json @@ -158,6 +158,7 @@ "CANCELED": "Peruutetut", "CANCELED_UNFINISHED_ENROLLMENT": "Keskeytetyt (keskeneräinen)", "EXPECTING_PAYMENT_UNFINISHED_ENROLLMENT": "Maksua odottavat (keskeneräinen)", + "WAITING_AUTHENTICATION": "Odottaa tunnistautumista", "COMPLETED": "Ilmoittautuneet", "QUEUED": "Jonoon ilmoittautuneet", "AWAITING_APPROVAL": "Odottaa tarkastusta", diff --git a/frontend/packages/vkt/src/components/examinerExamEvent/overview/ExaminerExamEventDetails.tsx b/frontend/packages/vkt/src/components/examinerExamEvent/overview/ExaminerExamEventDetails.tsx index 3b7617bb8..431fb473b 100644 --- a/frontend/packages/vkt/src/components/examinerExamEvent/overview/ExaminerExamEventDetails.tsx +++ b/frontend/packages/vkt/src/components/examinerExamEvent/overview/ExaminerExamEventDetails.tsx @@ -1,27 +1,19 @@ -import { Dayjs } from 'dayjs'; -import { ChangeEvent, FC, useCallback, useState } from 'react'; -import { H2 } from 'shared/components'; -import { Severity, Variant } from 'shared/enums'; -import { useDialog } from 'shared/hooks'; +import EditIcon from '@mui/icons-material/Edit'; +import { FC } from 'react'; +import { CustomButton, H2, H3, Text } from 'shared/components'; +import { Color, Variant } from 'shared/enums'; -import { ClerkExamEventDetailsFields } from 'components/clerkExamEvent/overview/ClerkExamEventDetailsFields'; -import { ControlButtons } from 'components/clerkExamEvent/overview/ControlButtons'; import { ExaminerEnrollmentListing } from 'components/examinerEnrollment/listing/ExaminerEnrollmentListing'; -import { useClerkTranslation, useCommonTranslation } from 'configs/i18n'; -import { useAppDispatch, useAppSelector } from 'configs/redux'; -import { EnrollmentAppointmentStatus, UIMode } from 'enums/app'; -import { useNavigationProtection } from 'hooks/useNavigationProtection'; -import { ClerkEnrollmentAppointment } from 'interfaces/clerkEnrollment'; -import { - ClerkExamEvent, - ClerkExamEventBasicInformation, -} from 'interfaces/clerkExamEvent'; import { - resetClerkExamEventDetailsUpdate, - updateClerkExamEventDetails, -} from 'redux/reducers/clerkExamEventOverview'; + useClerkTranslation, + useCommonTranslation, + useKoodistoMunicipalitiesTranslation, +} from 'configs/i18n'; +import { useAppSelector } from 'configs/redux'; +import { EnrollmentAppointmentStatus } from 'enums/app'; +import { ClerkEnrollmentAppointment } from 'interfaces/clerkEnrollment'; import { examinerExamEventOverviewSelector } from 'redux/selectors/examinerExamEventOverview'; -import { ExamCreateEventUtils } from 'utils/examCreateEvent'; +import { DateTimeUtils } from 'utils/dateTime'; interface EnrollmentListProps { enrollments: Array; @@ -67,168 +59,94 @@ const EnrollmentList: FC = ({ export const ExaminerExamEventDetails = () => { // Redux - const dispatch = useAppDispatch(); const { examEvent } = useAppSelector(examinerExamEventOverviewSelector); - - const { showDialog } = useDialog(); - - // Local state - const [examEventDetails, setExamEventDetails] = useState(examEvent); - const [hasLocalChanges, setHasLocalChanges] = useState(false); - const [currentUIMode, setCurrentUIMode] = useState(UIMode.View); - const isViewMode = currentUIMode === UIMode.View; - - const resetLocalExamEventDetails = useCallback(() => { - setExamEventDetails(examEvent); - }, [examEvent]); const translateCommon = useCommonTranslation(); + const translateMunicipality = useKoodistoMunicipalitiesTranslation(); - const resetToInitialState = useCallback(() => { - dispatch(resetClerkExamEventDetailsUpdate()); - resetLocalExamEventDetails(); - setHasLocalChanges(false); - setCurrentUIMode(UIMode.View); - }, [dispatch, resetLocalExamEventDetails]); - - useNavigationProtection(hasLocalChanges); - - if (!examEventDetails) { + if (!examEvent) { return null; } - const { enrollments } = examEventDetails; - - const handleComboBoxChange = - (field: keyof ClerkExamEventBasicInformation) => (value?: string) => { - handleFieldChange(field, value); - }; - - const handleCheckBoxChange = - (field: keyof ClerkExamEventBasicInformation) => - (_event: ChangeEvent, checked: boolean) => { - handleFieldChange(field, checked); - }; - - const handleDateChange = - ( - field: keyof Pick< - ClerkExamEventBasicInformation, - 'date' | 'registrationCloses' | 'registrationOpens' - >, - ) => - (date: Dayjs | null) => { - handleFieldChange(field, date); - }; - - const handleMaxParticipantsChange = ( - event: ChangeEvent, - ) => { - handleFieldChange('maxParticipants', event.target.value); - }; - - const handleFieldChange = ( - field: keyof ClerkExamEventBasicInformation, - fieldValue: string | number | boolean | undefined | Dayjs | null, - ) => { - const updatedExamEventDetails = { - ...examEventDetails, - [field]: fieldValue, - }; - setHasLocalChanges(true); - setExamEventDetails(updatedExamEventDetails as ClerkExamEvent); - }; - - const onSave = () => { - dispatch(updateClerkExamEventDetails(examEventDetails as ClerkExamEvent)); - }; + const { enrollments } = examEvent; const onEdit = () => { - resetLocalExamEventDetails(); - setCurrentUIMode(UIMode.Edit); - }; - - const openCancelDialog = () => { - showDialog({ - title: translateCommon('cancelUpdateDialog.header'), - severity: Severity.Info, - description: translateCommon('cancelUpdateDialog.description'), - actions: [ - { - title: translateCommon('back'), - variant: Variant.Outlined, - }, - { - title: translateCommon('yes'), - variant: Variant.Contained, - action: () => resetToInitialState(), - }, - ], - }); - }; - - const onCancel = () => { - if (!hasLocalChanges) { - resetToInitialState(); - } else { - openCancelDialog(); - } + // TODO navigate to edit view }; return ( <>
- + } + onClick={onEdit} + > + {translateCommon('edit')} +
-
- +
+
+
+

Kieli ja taso

+ {translateCommon(`examLanguage.${examEvent.language}`)} +
+
+

Tutkintopäivä

+ {DateTimeUtils.renderDateTime(examEvent.date)} +
+
+

Tutkintopaikka

+ {translateMunicipality(examEvent.municipality.code)} +
+
+

Osoitetiedot

+ {examEvent.location} +
+
+

Paikkojen lukumäärä

+ {examEvent.maxParticipants} +
+
+

Ilmoittautuminen sulkeutuu

+ + {DateTimeUtils.renderDateTime(examEvent.registrationCloses)} + +
+
); diff --git a/frontend/packages/vkt/src/pages/examiner/ExaminerExamEventOverviewPage.tsx b/frontend/packages/vkt/src/pages/examiner/ExaminerExamEventOverviewPage.tsx index bafa5a5f4..454b52b8e 100644 --- a/frontend/packages/vkt/src/pages/examiner/ExaminerExamEventOverviewPage.tsx +++ b/frontend/packages/vkt/src/pages/examiner/ExaminerExamEventOverviewPage.tsx @@ -11,7 +11,7 @@ import { ExaminerExamEventDetails } from 'components/examinerExamEvent/overview/ import { ClerkExamEventOverviewPageSkeleton } from 'components/skeletons/ClerkExamEventOverviewPageSkeleton'; import { useClerkTranslation, useCommonTranslation } from 'configs/i18n'; import { useAppDispatch, useAppSelector } from 'configs/redux'; -import { AppRoutes } from 'enums/app'; +import { AppRoutes, ExamLevel } from 'enums/app'; import { loadExaminerExamEventOverview } from 'redux/reducers/examinerExamEventOverview'; import { examinerExamEventOverviewSelector } from 'redux/selectors/examinerExamEventOverview'; import { ExamEventUtils } from 'utils/examEvent'; @@ -77,7 +77,7 @@ export const ExaminerExamEventOverviewPage: FC = () => { const pageHeader = examEvent ? `${ExamEventUtils.languageAndLevelText( examEvent.language, - examEvent.level, + ExamLevel.GOOD_AND_SATISFACTORY, translateCommon, )} ${DateUtils.formatOptionalDate(examEvent.date)}` : '';