Skip to content

Commit

Permalink
HAI-1586 Change hanke contact data model
Browse files Browse the repository at this point in the history
  • Loading branch information
@pitkni
pitkni committed Sep 15, 2023
1 parent 0793950 commit 508c310
Show file tree
Hide file tree
Showing 12 changed files with 143 additions and 182 deletions.
6 changes: 3 additions & 3 deletions public/mockServiceWorker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ self.addEventListener('fetch', function (event) {
console.warn(
'[MSW] Successfully emulated a network error for the "%s %s" request.',
request.method,
request.url
request.url,
);
return;
}
Expand All @@ -131,9 +131,9 @@ self.addEventListener('fetch', function (event) {
[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
request.method,
request.url,
`${error.name}: ${error.message}`
`${error.name}: ${error.message}`,
);
})
}),
);
});

Expand Down
55 changes: 26 additions & 29 deletions src/domain/hanke/edit/HankeForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,58 +122,55 @@ describe('HankeForm', () => {
test('Yhteystiedot can be filled', async () => {
const { user } = await setupYhteystiedotPage(<HankeFormContainer hankeTunnus="HAI22-1" />);

// Hanke owner
await user.click(screen.getByRole('button', { name: /tyyppi/i }));
await user.click(screen.getByText(/yritys/i));
fireEvent.change(screen.getByLabelText(/nimi/i), {
target: { value: 'Olli Omistaja' },

fireEvent.change(screen.getByTestId('omistajat.0.nimi'), {
target: { value: 'Omistaja Yritys' },
});
fireEvent.change(screen.getByLabelText(/y-tunnus tai henkilötunnus/i), {
target: { value: 'y-tunnus' },
});
fireEvent.change(screen.getByLabelText(/katuosoite/i), {
target: { value: 'Testikuja 1' },
});
fireEvent.change(screen.getByLabelText(/postinumero/i), {
target: { value: '00000' },
});
fireEvent.change(screen.getByLabelText(/postitoimipaikka/i), {
target: { value: 'Testikaupunki' },
});
fireEvent.change(screen.getByLabelText(/sähköposti/i), {
fireEvent.change(screen.getByTestId('omistajat.0.email'), {
target: { value: '[email protected]' },
});
fireEvent.change(screen.getByLabelText(/puhelinnumero/i), {
target: { value: '0400000000' },
fireEvent.change(screen.getByTestId('omistajat.0.puhelinnumero'), {
target: { value: '0401234567' },
});

expect(screen.queryByRole('group', { name: 'Yhteyshenkilö' })).not.toBeInTheDocument();
await user.click(screen.getByLabelText(/erillinen yhteyshenkilö/i));
expect(screen.getByRole('group', { name: 'Yhteyshenkilö' })).toBeInTheDocument();

fireEvent.change(screen.getAllByLabelText(/nimi/i)[1], {
target: { value: 'Testi Yhteyshenkilö' },
// Hanke owner contact person
fireEvent.change(screen.getByTestId('omistajat.0.alikontaktit.0.etunimi'), {
target: { value: 'Olli' },
});
fireEvent.change(screen.getByTestId('omistajat.0.alikontaktit.0.sukunimi'), {
target: { value: 'Omistaja' },
});
fireEvent.change(screen.getByTestId('omistajat.0.alikontaktit.0.email'), {
target: { value: '[email protected]' },
});
fireEvent.change(screen.getAllByLabelText(/sähköposti/i)[1], {
target: { value: '[email protected]' },
fireEvent.change(screen.getByTestId('omistajat.0.alikontaktit.0.puhelinnumero'), {
target: { value: '0507654321' },
});

await user.click(screen.getByText(/Rakennuttajan tiedot/i));
// Rakennuttaja
await user.click(screen.getByText(/rakennuttajan tiedot/i));
await user.click(screen.getByText(/lisää rakennuttaja/i));
expect(screen.getAllByText('Rakennuttaja')).toHaveLength(1);

await user.click(screen.getByText(/lisää yhteyshenkilö/i));
await user.click(screen.getByText(/lisää yhteyshenkilö/i));
expect(screen.getByRole('tablist').childElementCount).toBe(2);
await user.click(screen.getByText(/poista yhteyshenkilö/i));
await user.click(screen.getByText(/poista yhteyshenkilö/i));

await user.click(screen.getByText(/lisää rakennuttaja/i));
expect(screen.getAllByText('Rakennuttaja')).toHaveLength(2);

await user.click(screen.getAllByText(/poista rakennuttaja/i)[1]);
expect(screen.getAllByText('Rakennuttaja')).toHaveLength(1);
await user.click(screen.getByText(/poista rakennuttaja/i));

await user.click(screen.getByText(/poista yhteyshenkilö/i));
expect(screen.getByRole('tablist').childElementCount).toBe(1);
await user.click(screen.getByText(/poista yhteyshenkilö/i));
expect(screen.queryByText('Yhteyshenkilön tiedot')).not.toBeInTheDocument();
// Check Other types are present and clickable
await user.click(screen.getByText(/toteuttajan tiedot/i));
await user.click(screen.getByText(/muiden tahojen tiedot/i));
});
});
139 changes: 51 additions & 88 deletions src/domain/hanke/edit/HankeFormYhteystiedot.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { useState } from 'react';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { $enum } from 'ts-enum-util';
import { Accordion, Button, Fieldset, IconCross, IconPlusCircle, ToggleButton } from 'hds-react';
import { Accordion, Button, Fieldset, IconCross, IconPlusCircle } from 'hds-react';
import { useFieldArray } from 'react-hook-form';
import { CONTACT_FORMFIELD, FORMFIELD, FormProps } from './types';
import { CONTACT_FORMFIELD, FORMFIELD, FormProps, SUBCONTACT_FORMFIELD } from './types';
import {
HankeContact,
CONTACT_TYYPPI,
Expand All @@ -25,9 +25,6 @@ const CONTACT_FIELDS: Array<keyof HankeContact> = [
'tyyppi',
'nimi',
'ytunnusTaiHetu',
'osoite',
'postinumero',
'postitoimipaikka',
'email',
'puhelinnumero',
];
Expand All @@ -36,6 +33,7 @@ const REQUIRED_CONTACT_FIELDS: Array<keyof HankeContact> = [
'nimi',
'ytunnusTaiHetu',
'email',
'puhelinnumero',
];

function isRequiredContactField(field: keyof HankeContact) {
Expand All @@ -47,9 +45,6 @@ function getEmptyContact(): Omit<HankeContact, 'id'> {
nimi: '',
tyyppi: null,
ytunnusTaiHetu: '',
osoite: '',
postinumero: '',
postitoimipaikka: '',
email: '',
puhelinnumero: '',
alikontaktit: [],
Expand All @@ -70,10 +65,8 @@ function getEmptyOtherContact(): HankeMuuTaho {

function getEmptySubContact(): HankeSubContact {
return {
nimi: '',
osoite: '',
postinumero: '',
postitoimipaikka: '',
etunimi: '',
sukunimi: '',
email: '',
puhelinnumero: '',
};
Expand All @@ -93,32 +86,26 @@ const SubContactFields: React.FC<{ fieldPath: string; onRemove: () => void }> =
>
<ResponsiveGrid>
<TextInput
name={`${fieldPath}.${CONTACT_FORMFIELD.NIMI}`}
label={t(`form:yhteystiedot:labels:${CONTACT_FORMFIELD.NIMI}`)}
name={`${fieldPath}.${SUBCONTACT_FORMFIELD.ETUNIMI}`}
label={t(`form:yhteystiedot:labels:${SUBCONTACT_FORMFIELD.ETUNIMI}`)}
required
/>
</ResponsiveGrid>
<ResponsiveGrid>
<TextInput
name={`${fieldPath}.${CONTACT_FORMFIELD.OSOITE}`}
label={t(`form:yhteystiedot:labels:${CONTACT_FORMFIELD.OSOITE}`)}
/>
<TextInput
name={`${fieldPath}.${CONTACT_FORMFIELD.POSTINRO}`}
label={t(`form:yhteystiedot:labels:${CONTACT_FORMFIELD.POSTINRO}`)}
/>
<TextInput
name={`${fieldPath}.${CONTACT_FORMFIELD.POSTITOIMIPAIKKA}`}
label={t(`form:yhteystiedot:labels:${CONTACT_FORMFIELD.POSTITOIMIPAIKKA}`)}
name={`${fieldPath}.${SUBCONTACT_FORMFIELD.SUKUNIMI}`}
label={t(`form:yhteystiedot:labels:${SUBCONTACT_FORMFIELD.SUKUNIMI}`)}
required
/>
</ResponsiveGrid>
<ResponsiveGrid>
<TextInput
name={`${fieldPath}.${CONTACT_FORMFIELD.EMAIL}`}
label={t(`form:yhteystiedot:labels:${CONTACT_FORMFIELD.EMAIL}`)}
name={`${fieldPath}.${SUBCONTACT_FORMFIELD.EMAIL}`}
label={t(`form:yhteystiedot:labels:${SUBCONTACT_FORMFIELD.EMAIL}`)}
required
/>
<TextInput
name={`${fieldPath}.${CONTACT_FORMFIELD.PUHELINNUMERO}`}
label={t(`form:yhteystiedot:labels:${CONTACT_FORMFIELD.PUHELINNUMERO}`)}
name={`${fieldPath}.${SUBCONTACT_FORMFIELD.PUHELINNUMERO}`}
label={t(`form:yhteystiedot:labels:${SUBCONTACT_FORMFIELD.PUHELINNUMERO}`)}
required
/>
<Button
variant="supplementary"
Expand Down Expand Up @@ -168,8 +155,6 @@ const HankeFormYhteystiedot: React.FC<FormProps> = () => {
const { t } = useTranslation();
const locale = useLocale();

const [separateContact, setSeparateContact] = useState(false);

const {
fields: rakennuttajat,
append: appendRakennuttaja,
Expand All @@ -184,15 +169,15 @@ const HankeFormYhteystiedot: React.FC<FormProps> = () => {
remove: removeToteuttaja,
} = useFieldArray({ name: FORMFIELD.TOTEUTTAJAT });

const { fields: muutTahot, append: appendMuuTaho, remove: removeMuuTaho } = useFieldArray({
const {
fields: muutTahot,
append: appendMuuTaho,
remove: removeMuuTaho,
} = useFieldArray({
name: FORMFIELD.MUUTTAHOT,
});

function toggleSeparateContact() {
setSeparateContact((separateContactValue) => !separateContactValue);
}

const ownerSubContactFieldPath = `${FORMFIELD.OMISTAJAT}.0.${CONTACT_FORMFIELD.ALIKONTAKTIT}.0`;
const ownerSubContactFieldPath = `${FORMFIELD.OMISTAJAT}.0.${CONTACT_FORMFIELD.ALIKONTAKTIT}`;

return (
<div className="form2">
Expand All @@ -202,60 +187,36 @@ const HankeFormYhteystiedot: React.FC<FormProps> = () => {
<Text tag="h3" styleAs="h3" weight="light" spacingBottom="xs">
{t(`form:yhteystiedot:titles:omistajaInfo`)}
</Text>
<Fieldset
heading={t(`form:yhteystiedot:titles:omistaja`)}
style={{ paddingTop: 'var(--spacing-s)' }}
>
<ResponsiveGrid className="formWpr">
{CONTACT_FIELDS.map((contactField) => {
const fieldName = `${FORMFIELD.OMISTAJAT}.0.${contactField}`;
return <ContactField key={contactField} field={contactField} fieldName={fieldName} />;
})}
</ResponsiveGrid>
</Fieldset>
<div className="formWpr">
<ToggleButton
id="erillinen-yhteyshenkilo"
label={t('form:yhteystiedot:labels:erillinenYhteyshenkilo')}
onChange={toggleSeparateContact}
checked={separateContact}
/>
</div>
{separateContact && (
<Fieldset heading={t('form:yhteystiedot:titles:subContact')} border className="fieldset">
<ResponsiveGrid>
<TextInput
name={`${ownerSubContactFieldPath}.${CONTACT_FORMFIELD.NIMI}`}
label={t(`form:yhteystiedot:labels:${CONTACT_FORMFIELD.NIMI}`)}
required

{/* Hakija */}
<Contact<HankeContactTypeKey>
contactType={HANKE_CONTACT_TYPE.OMISTAJAT}
subContactPath={ownerSubContactFieldPath}
emptySubContact={getEmptySubContact()}
renderSubContact={(subContactIndex, removeSubContact) => {
const fieldPath = `${ownerSubContactFieldPath}.${subContactIndex}`;
return (
<SubContactFields
fieldPath={fieldPath}
onRemove={() => removeSubContact(subContactIndex)}
/>
</ResponsiveGrid>
);
}}
>
<Fieldset
heading={t('form:yhteystiedot:titles:omistaja')}
style={{ paddingTop: 'var(--spacing-s)' }}
>
<ResponsiveGrid>
<TextInput
name={`${ownerSubContactFieldPath}.${CONTACT_FORMFIELD.OSOITE}`}
label={t(`form:yhteystiedot:labels:${CONTACT_FORMFIELD.OSOITE}`)}
/>
<TextInput
name={`${ownerSubContactFieldPath}.${CONTACT_FORMFIELD.POSTINRO}`}
label={t(`form:yhteystiedot:labels:${CONTACT_FORMFIELD.POSTINRO}`)}
/>
<TextInput
name={`${ownerSubContactFieldPath}.${CONTACT_FORMFIELD.POSTITOIMIPAIKKA}`}
label={t(`form:yhteystiedot:labels:${CONTACT_FORMFIELD.POSTITOIMIPAIKKA}`)}
/>
<TextInput
name={`${ownerSubContactFieldPath}.${CONTACT_FORMFIELD.EMAIL}`}
label={t(`form:yhteystiedot:labels:${CONTACT_FORMFIELD.EMAIL}`)}
required
/>
<TextInput
name={`${ownerSubContactFieldPath}.${CONTACT_FORMFIELD.PUHELINNUMERO}`}
label={t(`form:yhteystiedot:labels:${CONTACT_FORMFIELD.PUHELINNUMERO}`)}
/>
{CONTACT_FIELDS.map((contactField) => {
const fieldName = `${FORMFIELD.OMISTAJAT}.0.${contactField}`;
return <ContactField key={contactField} field={contactField} fieldName={fieldName} />;
})}
</ResponsiveGrid>
</Fieldset>
)}
</Contact>

{/* Rakennuttaja */}
<Accordion
language={locale}
headingLevel={3}
Expand Down Expand Up @@ -306,6 +267,7 @@ const HankeFormYhteystiedot: React.FC<FormProps> = () => {
</Button>
</Accordion>

{/* Toteuttaja */}
<Accordion
language={locale}
headingLevel={3}
Expand Down Expand Up @@ -356,6 +318,7 @@ const HankeFormYhteystiedot: React.FC<FormProps> = () => {
</Button>
</Accordion>

{/* Muut tahot */}
<Accordion
language={locale}
headingLevel={3}
Expand Down
17 changes: 8 additions & 9 deletions src/domain/hanke/edit/components/ContactsSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,8 @@ const ContactSummary: React.FC<{ contact: HankeContact | HankeMuuTaho }> = ({ co
<p>{t(`form:yhteystiedot:contactType:${contact.tyyppi}`)}</p>
<p>{contact.nimi}</p>
<p>{contact.ytunnusTaiHetu}</p>
{contact.osoite && <p>{contact.osoite}</p>}
<p>
{contact.postinumero} {contact.postitoimipaikka}
</p>
<p>{contact.email}</p>
<p>{contact.puhelinnumero}</p>
</div>
);
}
Expand All @@ -33,15 +31,16 @@ const ContactSummary: React.FC<{ contact: HankeContact | HankeMuuTaho }> = ({ co
);
};

const SubContactSummary: React.FC<{ contact: HankeSubContact }> = ({ contact }) => {
const SubContactSummary: React.FC<{ contact: HankeSubContact }> = ({
contact: { etunimi, sukunimi, email, puhelinnumero },
}) => {
return (
<div>
<p>{contact.nimi}</p>
<p>{contact.email}</p>
{contact.osoite && <p>{contact.osoite}</p>}
<p>
{contact.postinumero} {contact.postitoimipaikka}
{etunimi} {sukunimi}
</p>
<p>{email}</p>
<p>{puhelinnumero}</p>
</div>
);
};
Expand Down
Loading

0 comments on commit 508c310

Please sign in to comment.