Skip to content

Commit

Permalink
HAI-1881 Save hanke form in summary page
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@markohaarni
markohaarni committed Oct 13, 2023
1 parent 2064414 commit 6a7b92f
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 25 deletions.
64 changes: 64 additions & 0 deletions src/domain/hanke/edit/HankeForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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: [],
Expand Down Expand Up @@ -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(<HankeFormContainer />);

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(
<HankeForm
formData={hanke as HankeDataFormState}
onIsDirtyChange={() => ({})}
onFormClose={() => ({})}
>
children
</HankeForm>,
);

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.`),
);
});
});
57 changes: 32 additions & 25 deletions src/domain/hanke/edit/HankeForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
};
Expand Down Expand Up @@ -50,6 +51,7 @@ const HankeForm: React.FC<React.PropsWithChildren<Props>> = ({
const { t } = useTranslation();
const { HANKEPORTFOLIO } = useLocalizedRoutes();
const navigate = useNavigate();
const { setNotification } = useGlobalNotification();
const [showNotification, setShowNotification] = useState<FormNotification | null>(null);
const [showAddApplicationDialog, setShowAddApplicationDialog] = useState(false);
const formContext = useForm<HankeDataFormState>({
Expand All @@ -67,7 +69,6 @@ const HankeForm: React.FC<React.PropsWithChildren<Props>> = ({
formState: { errors, isDirty },
getValues,
setValue,
handleSubmit,
} = formContext;

const isNewHanke = !formData.hankeTunnus;
Expand All @@ -85,34 +86,41 @@ const HankeForm: React.FC<React.PropsWithChildren<Props>> = ({
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);
}

Expand Down Expand Up @@ -161,12 +169,7 @@ const HankeForm: React.FC<React.PropsWithChildren<Props>> = ({
hanke={getValues() as HankeData}
/>
<div className="hankeForm">
<MultipageForm
heading={formHeading}
formSteps={formSteps}
onStepChange={saveDraft}
onSubmit={handleSubmit(save)}
>
<MultipageForm heading={formHeading} formSteps={formSteps} onStepChange={save}>
{function renderFormActions(activeStepIndex, handlePrevious, handleNext) {
const lastStep = activeStepIndex === formSteps.length - 1;
return (
Expand All @@ -189,8 +192,10 @@ const HankeForm: React.FC<React.PropsWithChildren<Props>> = ({
<Button
variant="supplementary"
iconLeft={<IconSaveDiskette aria-hidden="true" />}
onClick={saveDraftAndQuit}
onClick={saveAndQuit}
data-testid="save-form-btn"
isLoading={hankeMutation.isLoading}
loadingText={t('common:buttons:savingText')}
>
{t('hankeForm:saveDraftButton')}
</Button>
Expand All @@ -209,7 +214,9 @@ const HankeForm: React.FC<React.PropsWithChildren<Props>> = ({
<Button
variant="primary"
iconLeft={<IconSaveDiskette aria-hidden />}
type="submit"
onClick={saveAndQuit}
isLoading={hankeMutation.isLoading}
loadingText={t('common:buttons:savingText')}
>
{t('hankeForm:saveButton')}
</Button>
Expand Down
2 changes: 2 additions & 0 deletions src/locales/fi.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down

0 comments on commit 6a7b92f

Please sign in to comment.