From 6a7b92f3dd35000325fb54c8e26764a26b276636 Mon Sep 17 00:00:00 2001 From: Marko Haarni Date: Fri, 13 Oct 2023 12:32:42 +0300 Subject: [PATCH] HAI-1881 Save hanke form in summary page Made changes to saving hanke form when clicking Save button in summary page. Now instead of taking user to hanke list after saving, user ends up in the hanke page and success notification is displayed. Also changed the Save and quit button to do the same thing. --- src/domain/hanke/edit/HankeForm.test.tsx | 64 ++++++++++++++++++++++++ src/domain/hanke/edit/HankeForm.tsx | 57 ++++++++++++--------- src/locales/fi.json | 2 + 3 files changed, 98 insertions(+), 25 deletions(-) diff --git a/src/domain/hanke/edit/HankeForm.test.tsx b/src/domain/hanke/edit/HankeForm.test.tsx index 2810ba916..2ff0299ce 100644 --- a/src/domain/hanke/edit/HankeForm.test.tsx +++ b/src/domain/hanke/edit/HankeForm.test.tsx @@ -4,6 +4,7 @@ import HankeForm from './HankeForm'; import HankeFormContainer from './HankeFormContainer'; import { HANKE_VAIHE, HANKE_TYOMAATYYPPI } from '../../types/hanke'; import { render, cleanup, fireEvent, waitFor, screen } from '../../../testUtils/render'; +import hankkeet from '../../mocks/data/hankkeet-data'; afterEach(cleanup); @@ -36,6 +37,36 @@ const hankeData: HankeDataDraft = { }; */ +function fillBasicInformation( + options: { + name?: string; + description?: string; + address?: string; + phase?: 'Ohjelmointi' | 'Suunnittelu' | 'Rakentaminen'; + isYKT?: boolean; + } = {}, +) { + const { + name = nimi, + description = hankkeenKuvaus, + address = hankkeenOsoite, + phase = 'Ohjelmointi', + isYKT = false, + } = options; + + fireEvent.change(screen.getByLabelText(/hankkeen nimi/i), { + target: { value: name }, + }); + fireEvent.change(screen.getByLabelText(/hankkeen kuvaus/i), { target: { value: description } }); + fireEvent.change(screen.getByLabelText(/katuosoite/i), { + target: { value: address }, + }); + fireEvent.click(screen.getByRole('radio', { name: phase })); + if (isYKT) { + fireEvent.click(screen.getByRole('checkbox', { name: 'Hanke on YKT-hanke' })); + } +} + const formData: HankeDataFormState = { vaihe: HANKE_VAIHE.OHJELMOINTI, rakennuttajat: [], @@ -195,4 +226,37 @@ describe('HankeForm', () => { await user.click(screen.getByText(/toteuttajan tiedot/i)); await user.click(screen.getByText(/muiden tahojen tiedot/i)); }); + + test('Should be able to save and quit', async () => { + const { user } = render(); + + fillBasicInformation(); + + await user.click(screen.getByRole('button', { name: 'Tallenna ja keskeytä' })); + + expect(window.location.pathname).toBe('/fi/hankesalkku/HAI22-13'); + expect(screen.getByText(`Hanke ${nimi} (HAI22-13) tallennettu omiin hankkeisiin.`)); + }); + + test('Should be able to save hanke in the last page', async () => { + const hanke = hankkeet[1]; + + const { user } = render( + ({})} + onFormClose={() => ({})} + > + children + , + ); + + await user.click(screen.getByRole('button', { name: /yhteenveto/i })); + await user.click(screen.getByRole('button', { name: 'Tallenna' })); + + expect(window.location.pathname).toBe(`/fi/hankesalkku/${hanke.hankeTunnus}`); + expect( + screen.getByText(`Hanke ${hanke.nimi} (${hanke.hankeTunnus}) tallennettu omiin hankkeisiin.`), + ); + }); }); diff --git a/src/domain/hanke/edit/HankeForm.tsx b/src/domain/hanke/edit/HankeForm.tsx index 30a335cc3..c87ad416f 100644 --- a/src/domain/hanke/edit/HankeForm.tsx +++ b/src/domain/hanke/edit/HankeForm.tsx @@ -21,8 +21,9 @@ import MultipageForm from '../../forms/MultipageForm'; import FormActions from '../../forms/components/FormActions'; import { useLocalizedRoutes } from '../../../common/hooks/useLocalizedRoutes'; import ApplicationAddDialog from '../../application/components/ApplicationAddDialog'; +import { useGlobalNotification } from '../../../common/components/globalNotification/GlobalNotificationContext'; -async function saveHanke({ data }: { data: HankeDataFormState; navigateTo?: string }) { +async function saveHanke(data: HankeDataFormState) { const requestData = { ...convertFormStateToHankeData(data), }; @@ -50,6 +51,7 @@ const HankeForm: React.FC> = ({ const { t } = useTranslation(); const { HANKEPORTFOLIO } = useLocalizedRoutes(); const navigate = useNavigate(); + const { setNotification } = useGlobalNotification(); const [showNotification, setShowNotification] = useState(null); const [showAddApplicationDialog, setShowAddApplicationDialog] = useState(false); const formContext = useForm({ @@ -67,7 +69,6 @@ const HankeForm: React.FC> = ({ formState: { errors, isDirty }, getValues, setValue, - handleSubmit, } = formContext; const isNewHanke = !formData.hankeTunnus; @@ -85,34 +86,41 @@ const HankeForm: React.FC> = ({ onError() { setShowNotification('error'); }, - onSuccess(data, { navigateTo }) { + onSuccess(data) { setValue('hankeTunnus', data.hankeTunnus); setValue('tormaystarkasteluTulos', data.tormaystarkasteluTulos); setValue('status', data.status); setShowNotification('success'); - if (navigateTo) { - navigate(navigateTo); - } }, }); - function saveDraft() { - hankeMutation.mutate({ data: getValues() }); - } - - function saveDraftAndQuit() { - hankeMutation.mutate({ data: getValues(), navigateTo: HANKEPORTFOLIO.path }); + function save() { + hankeMutation.mutate(getValues()); } - function save() { - hankeMutation.mutate({ - data: getValues(), - navigateTo: HANKEPORTFOLIO.path, + function saveAndQuit() { + hankeMutation.mutate(getValues(), { + onSuccess(data) { + setNotification(true, { + position: 'top-right', + dismissible: true, + autoClose: true, + autoCloseDuration: 8000, + label: t('hankeForm:saveAndQuitSuccessHeader'), + message: t('hankeForm:saveAndQuitSuccessText', { + name: data.nimi, + hankeTunnus: data.hankeTunnus, + }), + type: 'success', + closeButtonLabelText: t('common:components:notification:closeButtonLabelText'), + }); + navigate(`${HANKEPORTFOLIO.path}/${data.hankeTunnus}`); + }, }); } function saveAndAddApplication() { - hankeMutation.mutate({ data: getValues() }); + save(); setShowAddApplicationDialog(true); } @@ -161,12 +169,7 @@ const HankeForm: React.FC> = ({ hanke={getValues() as HankeData} />
- + {function renderFormActions(activeStepIndex, handlePrevious, handleNext) { const lastStep = activeStepIndex === formSteps.length - 1; return ( @@ -189,8 +192,10 @@ const HankeForm: React.FC> = ({ @@ -209,7 +214,9 @@ const HankeForm: React.FC> = ({ diff --git a/src/locales/fi.json b/src/locales/fi.json index 5f08a94a9..259fe8b08 100644 --- a/src/locales/fi.json +++ b/src/locales/fi.json @@ -462,6 +462,8 @@ "savingSuccessText": "Luonnos on tallennettu Hankelistalle", "savingFailHeader": "Joku meni vikaan", "savingFailText": "Luonnosta ei saatu tallennettua, koita uudelleen", + "saveAndQuitSuccessHeader": "Hanke tallennettu", + "saveAndQuitSuccessText": "Hanke {{name}} ({{hankeTunnus}}) tallennettu omiin hankkeisiin.", "closeAriaLabel": "Poistu kaavakkeelta tallentamatta", "confirmIndexCalculationButton": "Jatka indeksilaskentaan", "cancelDialog": {