From 0bb972fe421729d686c75ec5b54db0088140651f Mon Sep 17 00:00:00 2001 From: amaliejvik Date: Thu, 24 Oct 2024 20:45:32 +0200 Subject: [PATCH 1/2] feat: add that applicant must confirm his/her occupied timeslots in order to send an application for a position Related to #1480 --- .../Components/OccupiedForm/OccupiedForm.tsx | 18 +++++++--- ...RecruitmentApplicationFormPage.module.scss | 4 +++ .../RecruitmentApplicationFormPage.tsx | 35 ++++++++++++++++++- frontend/src/i18n/constants.ts | 3 ++ frontend/src/i18n/translations.ts | 8 +++++ 5 files changed, 63 insertions(+), 5 deletions(-) diff --git a/frontend/src/Components/OccupiedForm/OccupiedForm.tsx b/frontend/src/Components/OccupiedForm/OccupiedForm.tsx index 449ad162d..602661d81 100644 --- a/frontend/src/Components/OccupiedForm/OccupiedForm.tsx +++ b/frontend/src/Components/OccupiedForm/OccupiedForm.tsx @@ -12,9 +12,13 @@ import styles from './OccupiedForm.module.scss'; type Props = { recruitmentId: number; onCancel?: () => void; + onConfirm?: () => void; + header?: string; + subHeader?: string; + saveButtonText?: string; }; -export function OccupiedForm({ recruitmentId = 1, onCancel }: Props) { +export function OccupiedForm({ recruitmentId = 1, onCancel, onConfirm, header, subHeader, saveButtonText }: Props) { const { t } = useTranslation(); const [loading, setLoading] = useState(true); @@ -62,6 +66,7 @@ export function OccupiedForm({ recruitmentId = 1, onCancel }: Props) { postOccupiedTimeslots(data) .then(() => { toast.success(t(KEY.common_update_successful)); + onConfirm?.(); }) .catch((error) => { toast.error(t(KEY.common_something_went_wrong)); @@ -92,14 +97,19 @@ export function OccupiedForm({ recruitmentId = 1, onCancel }: Props) { return (
-

{t(KEY.occupied_title)}

+

{header ? t(header) : t(KEY.occupied_title)}

{loading ? ( {t(KEY.common_loading)}... ) : ( <> - + {' '} + {subHeader ? ( + }} /> + ) : ( + + )}
diff --git a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.module.scss b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.module.scss index 3e0264d8a..d325f2efb 100644 --- a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.module.scss +++ b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.module.scss @@ -26,6 +26,10 @@ } } +.occupied_modal { + min-width: auto; +} + .text_container { flex: 6; } diff --git a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx index e28efb093..7c4118e0b 100644 --- a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx +++ b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate, useParams } from 'react-router-dom'; import { toast } from 'react-toastify'; -import { Button, Link, Page, SamfundetLogoSpinner } from '~/Components'; +import { Button, Link, Modal, OccupiedForm, Page, SamfundetLogoSpinner } from '~/Components'; import { Text } from '~/Components/Text/Text'; import { SamfForm } from '~/Forms/SamfForm'; import { SamfFormField } from '~/Forms/SamfFormField'; @@ -22,6 +22,7 @@ import { reverse } from '~/named-urls'; import { ROUTES } from '~/routes'; import { dbT } from '~/utils'; import styles from './RecruitmentApplicationFormPage.module.scss'; +import { Icon } from '@iconify/react'; type FormProps = { application_text: string; @@ -37,6 +38,10 @@ export function RecruitmentApplicationFormPage() { const [recruitmentPositionsForGang, setRecruitmentPositionsForGang] = useState(); const [recruitmentApplication, setRecruitmentApplication] = useState(); + const [openOccupiedForm, setOpenOccupiedForm] = useState(false); + const [occupiedTimesConfirmed, setOccupiedTimesConfirmed] = useState(false); + const [formData, setFormData] = useState(); + const [recruitmentId, setRecruitmentId] = useState(0); const [loading, setLoading] = useState(true); @@ -59,6 +64,7 @@ export function RecruitmentApplicationFormPage() { }), getRecruitmentApplicationForPosition(positionId as string).then((res) => { setRecruitmentApplication(res.data); + setRecruitmentId(res.data.recruitment); console.log(res.data); }), ]).then(() => { @@ -96,6 +102,11 @@ export function RecruitmentApplicationFormPage() { } function handleOnSubmit(data: FormProps) { + setFormData(data); + setOpenOccupiedForm(true); + } + + function submitData(data: FormProps) { putRecruitmentApplication(data as Partial, positionId ? +positionId : 1) .then(() => { navigate({ @@ -137,6 +148,28 @@ export function RecruitmentApplicationFormPage() { return (
+ {openOccupiedForm && ( + + <> + + setOpenOccupiedForm(false)} + onConfirm={() => formData && submitData(formData)} + header="confirm_occupied_time" + subHeader="confirm_occupied_time_text" + saveButtonText="confirm_occupied_time_send_application" + /> + + + )}

{dbT(recruitmentPosition, 'name')}

diff --git a/frontend/src/i18n/constants.ts b/frontend/src/i18n/constants.ts index 3e9717c39..b5037963d 100644 --- a/frontend/src/i18n/constants.ts +++ b/frontend/src/i18n/constants.ts @@ -434,6 +434,9 @@ export const KEY = { occupied_select_time_text: 'occupied_select_time_text', occupied_title: 'occupied_title', occupied_show: 'occupied_show', + confirm_occupied_time: 'confirm_occupied_time', + confirm_occupied_time_text: 'confirm_occupied_time_text', + confirm_occupied_time_send_application: 'confirm_occupied_time_send_application', // Feedback feedback_type: 'feedback_type', diff --git a/frontend/src/i18n/translations.ts b/frontend/src/i18n/translations.ts index 6505dc4ff..f6fcbf56d 100644 --- a/frontend/src/i18n/translations.ts +++ b/frontend/src/i18n/translations.ts @@ -434,6 +434,10 @@ export const nb = prepareTranslations({ [KEY.occupied_help_text]: 'Vennligst angi tider du ikke er tilgjengelig for intervju', [KEY.occupied_select_time_text]: 'Velg tidspunkt du er utilgjengelig', [KEY.occupied_show]: 'Sett din tilgjengelighet', + [KEY.confirm_occupied_time]: 'Bekreft din tilgjengelighet', + [KEY.confirm_occupied_time_text]: + 'Vennligst bekreft at dette er tidene du ikke er tilgjengelig for intervju', + [KEY.confirm_occupied_time_send_application]: 'Lagre og send søknad', // Feedback [KEY.feedback_type]: 'Type tilbakemelding', @@ -900,6 +904,10 @@ export const en = prepareTranslations({ [KEY.occupied_help_text]: 'Please indicate times you are not available for interview', [KEY.occupied_select_time_text]: 'Select times you are unavailable', [KEY.occupied_show]: 'Set your availability', + [KEY.confirm_occupied_time]: 'Confirm your availability', + [KEY.confirm_occupied_time_text]: + 'Please confirm that these are the times you are not available for interview', + [KEY.confirm_occupied_time_send_application]: 'Save and send application', // Feedback [KEY.feedback_type]: 'Feedback type', From b5a700b5afb65589671e7a778870d24ef68c0763 Mon Sep 17 00:00:00 2001 From: amaliejvik Date: Thu, 24 Oct 2024 20:52:43 +0200 Subject: [PATCH 2/2] Fix biome Related to #1480 --- .../RecruitmentApplicationFormPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx index 7c4118e0b..d9554fb8e 100644 --- a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx +++ b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx @@ -1,3 +1,4 @@ +import { Icon } from '@iconify/react'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate, useParams } from 'react-router-dom'; @@ -22,7 +23,6 @@ import { reverse } from '~/named-urls'; import { ROUTES } from '~/routes'; import { dbT } from '~/utils'; import styles from './RecruitmentApplicationFormPage.module.scss'; -import { Icon } from '@iconify/react'; type FormProps = { application_text: string;