diff --git a/frontend/packages/vkt/public/i18n/fi-FI/examiner.json b/frontend/packages/vkt/public/i18n/fi-FI/examiner.json index 291fa6f8b..39327fe8f 100644 --- a/frontend/packages/vkt/public/i18n/fi-FI/examiner.json +++ b/frontend/packages/vkt/public/i18n/fi-FI/examiner.json @@ -27,6 +27,35 @@ "heading": "Henkilötiedot", "information": "Tiedoista vain nimet näkyvät julkisessa listauksessa." } + }, + "examinerHomepage": { + "heading": "Hyvän ja tyydyttävän taidon kielitutkinnot" + }, + "examinerOverview": { + "contactRequests": { + "heading": "Yhteydenottopyynnöt", + "labels": { + "noContactRequests": "Ei yhteydenottopyyntöjä" + } + }, + "examEvents": { + "heading": "Tutkintotilaisuudet", + "labels": { + "noExamEvents": "Ei tutkintotilaisuuksia" + } + }, + "publicInformation": { + "heading": "Julkisesti näkyvät tiedot", + "labels": { + "examiner": "Tutkinnon vastaanottaja", + "examDates": "Tutkintopäivät", + "examPlaces": "Tutkintopaikat", + "full": "Täynnä", + "languages": "Kielet", + "modify": "Muokkaa tietoja", + "undefined": "Ei määritelty" + } + } } } } diff --git a/frontend/packages/vkt/src/interfaces/publicExaminer.ts b/frontend/packages/vkt/src/interfaces/publicExaminer.ts index 9cd7dedc2..9f56468a8 100644 --- a/frontend/packages/vkt/src/interfaces/publicExaminer.ts +++ b/frontend/packages/vkt/src/interfaces/publicExaminer.ts @@ -5,7 +5,7 @@ import { WithId } from 'shared/interfaces'; import { ExamLanguage } from 'enums/app'; import { Municipality } from 'interfaces/municipality'; -interface PublicExaminerExamDate { +export interface PublicExaminerExamDate { examDate: Dayjs; isFull: boolean; } diff --git a/frontend/packages/vkt/src/pages/examiner/ExaminerHomePage.tsx b/frontend/packages/vkt/src/pages/examiner/ExaminerHomePage.tsx index e75827c09..36867375f 100644 --- a/frontend/packages/vkt/src/pages/examiner/ExaminerHomePage.tsx +++ b/frontend/packages/vkt/src/pages/examiner/ExaminerHomePage.tsx @@ -1,16 +1,163 @@ -import { Box, Grid } from '@mui/material'; -import { FC, useEffect } from 'react'; +import { Box, Divider, Grid, Paper } from '@mui/material'; +import dayjs from 'dayjs'; +import { FC, Fragment, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; -import { H1 } from 'shared/components'; -import { APIResponseStatus } from 'shared/enums'; +import { CustomButtonLink, H1, H2, Text } from 'shared/components'; +import { APIResponseStatus, Color, Variant } from 'shared/enums'; +import { DateUtils } from 'shared/utils'; +import { + useCommonTranslation, + useExaminerTranslation, + useKoodistoMunicipalitiesTranslation, +} from 'configs/i18n'; import { useAppDispatch, useAppSelector } from 'configs/redux'; -import { AppRoutes } from 'enums/app'; +import { AppRoutes, ExamLanguage } from 'enums/app'; +import { PublicExaminerExamDate } from 'interfaces/publicExaminer'; import { loadExaminerDetails } from 'redux/reducers/examinerDetails'; import { clerkUserSelector } from 'redux/selectors/clerkUser'; import { examinerDetailsSelector } from 'redux/selectors/examinerDetails'; +const PublicInformation = () => { + const { t } = useExaminerTranslation({ + keyPrefix: 'vkt.component.examinerOverview.publicInformation', + }); + const translateCommon = useCommonTranslation(); + const { examiner } = useAppSelector(examinerDetailsSelector); + const translateMunicipality = useKoodistoMunicipalitiesTranslation(); + if (!examiner) { + return <>; + } + + const examLanguages: Array = [ + examiner.examLanguageFinnish ? ExamLanguage.FI : null, + examiner.examLanguageSwedish ? ExamLanguage.SV : null, + ].filter((v) => !!v); + + const examDates: Array = [ + { examDate: dayjs('2024-10-10'), isFull: false }, + { examDate: dayjs('2024-10-24'), isFull: true }, + { examDate: dayjs('2024-10-15'), isFull: false }, + { examDate: dayjs('2024-10-21'), isFull: false }, + ]; + + return ( +
+
+

{t('heading')}

+ + {t('labels.modify')} + +
+ +
+ + {t('labels.examiner')} +
+ {`${examiner.firstName} ${examiner.lastName}`} +
+ + {t('labels.languages')} +
+ {examLanguages + .map((v) => translateCommon(`examLanguage.${v}`)) + .join(' & ')} +
+ + {t('labels.examPlaces')} +
+ {examiner.municipalities + .map(({ code }) => translateMunicipality(code)) + .sort((a, b) => a.localeCompare(b, 'fi-FI')) + .join(', ')} +
+ + {t('labels.examDates')} +
+ {examDates.length === 0 ? ( + t('labels.undefined') + ) : ( + <> + {examDates.map(({ examDate, isFull }, i) => { + const newline = examDates.length > 1 && i > 0; + + return ( + + {newline &&
} + {isFull && ( + <> + {DateUtils.formatOptionalDate(examDate)}  + {t('labels.full')} + + )} + {!isFull && DateUtils.formatOptionalDate(examDate)} +
+ ); + })} + + )} +
+
+
+ ); +}; + +const ContactRequests = () => { + const { t } = useExaminerTranslation({ + keyPrefix: 'vkt.component.examinerOverview.contactRequests', + }); + // TODO Get contact requests from redux state & render them + const contactRequests = []; + + return ( +
+

{t('heading')}

+ + {contactRequests.length === 0 && ( + {t('labels.noContactRequests')} + )} +
+ ); +}; + +const ExamEvents = () => { + const { t } = useExaminerTranslation({ + keyPrefix: 'vkt.component.examinerOverview.examEvents', + }); + // TODO Get exam events from redux state & render them + const examEvents = []; + + return ( +
+

{t('heading')}

+ + {examEvents.length === 0 && ( + {t('labels.noExamEvents')} + )} +
+ ); +}; + +const ExaminerOverview = () => { + return ( + +
+ + + +
+
+ ); +}; + export const ExaminerHomePage: FC = () => { + const { t } = useExaminerTranslation({ + keyPrefix: 'vkt.component.examinerHomepage', + }); const navigate = useNavigate(); const dispatch = useAppDispatch(); @@ -36,16 +183,17 @@ export const ExaminerHomePage: FC = () => { }, [initialized, navigate, clerkUser.isExaminer, oid]); return ( - + -

Hyvän ja tyydyttävän taidon kielitutkinnot

+

{t('heading')}

+ {examiner && }
); diff --git a/frontend/packages/vkt/src/styles/pages/_examiner-homepage.scss b/frontend/packages/vkt/src/styles/pages/_examiner-homepage.scss new file mode 100644 index 000000000..1061d47a2 --- /dev/null +++ b/frontend/packages/vkt/src/styles/pages/_examiner-homepage.scss @@ -0,0 +1,38 @@ +.examiner-homepage { + flex: 1; + + & &__grid-container { + display: block; + + &__heading { + margin: 2rem 0 1rem 1rem; + } + } + + & &__overview { + display: flex; + flex-direction: column; + gap: 2rem; + padding: 2.5rem; + } + + & &__public-information { + &__details-row { + padding-right: 4rem; + } + } + + & &__contact-requests { + .empty-results { + align-self: center; + font-size: 2.8rem; + } + } + + & &__exam-events { + .empty-results { + align-self: center; + font-size: 2.8rem; + } + } +} diff --git a/frontend/packages/vkt/src/styles/styles.scss b/frontend/packages/vkt/src/styles/styles.scss index 204875d63..d41d4b72a 100644 --- a/frontend/packages/vkt/src/styles/styles.scss +++ b/frontend/packages/vkt/src/styles/styles.scss @@ -25,6 +25,7 @@ @import 'pages/clerk-exam-event-overview-page'; @import 'pages/clerk-homepage'; @import 'pages/examiner-details-page'; +@import 'pages/examiner-homepage'; @import 'pages/logout-success-page'; @import 'pages/not-found-page'; @import 'pages/public-homepage';