Skip to content

Commit 4a592ac

Browse files
henrikthebosshenriktheboss
committed
Refactor TilskuddsperiodeTabellRad and related components: Simplified JSX structure and improved CSS class usage for better readability
1 parent a37d6a9 commit 4a592ac

6 files changed

+40
-50
lines changed

Diff for: ‎src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/TilskuddsperiodeTabellRad.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,14 @@ const TilskuddsperiodeRad: React.FC<{
3434
)}
3535
</Table.DataCell>
3636
{erNavAnsatt && (
37-
<Table.DataCell textSize={'small'}>
37+
<Table.DataCell textSize="small">
3838
<EtikettStatus tilskuddsperiodestatus={periodeStatus} size="small" />
3939
</Table.DataCell>
4040
)}
41-
<Table.DataCell align={'right'} textSize={'small'}>
41+
<Table.DataCell align="right" textSize="small">
4242
{periode.beløp !== null ? formaterPenger(periode.beløp) : '—'}
4343
</Table.DataCell>
44-
<Table.DataCell textSize={'small'}>
44+
<Table.DataCell textSize="small">
4545
{formaterDato(addDays(new Date(periode.sluttDato), 3).toString(), 'dd MMM yyyy')}
4646
</Table.DataCell>
4747
</Table.Row>

Diff for: ‎src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioder.tsx

+20-24
Original file line numberDiff line numberDiff line change
@@ -22,30 +22,26 @@ const VisningTilskuddsperioder: FunctionComponent = () => {
2222
<Accordion.Item defaultOpen>
2323
<Accordion.Header>Oversikt over tilskudd i perioder</Accordion.Header>
2424
<Accordion.Content>
25-
<div className={cls.element('container')}>
26-
<div className={cls.element('header')}>
27-
<Label>Utregning</Label>
28-
{avtale.tiltakstype === 'VTAO' ? (
29-
<BodyShort size="small">
30-
Dagsatsen får du ved å dele "sum tilskudd for en måned" på snitt antall dager i
31-
en måned (365,25 / 12 = 30,4375) og ganger med antall dager i perioden.
32-
</BodyShort>
33-
) : (
34-
<BodyShort size="small">
35-
Utregningen baserer seg på lønn for en måned. Dagsatsen får du ved å dele "sum
36-
tilskudd for en måned" på snitt antall dager i en måned (365,25 / 12 = 30,4375)
37-
og ganger med antall dager i perioden.
38-
</BodyShort>
39-
)}
40-
<InfoRundtRedusertProsentsats className={cls.className} />
41-
</div>
42-
{avtale.tiltakstype == 'VTAO' ? (
43-
<VisningTilskuddsperioderTabellVtao className={cls.className} />
44-
) : (
45-
<VisningTilskuddsperioderTabell className={cls.className} />
46-
)}
47-
<MeldingArbeidsgiverSokRefusjon className={cls.className} avtale={avtale} />
48-
</div>
25+
<Label>Utregning</Label>
26+
{avtale.tiltakstype === 'VTAO' ? (
27+
<BodyShort size="small">
28+
Dagsatsen får du ved å dele "sum tilskudd for en måned" på snitt antall dager i en måned
29+
(365,25 / 12 = 30,4375) og ganger med antall dager i perioden.
30+
</BodyShort>
31+
) : (
32+
<BodyShort size="small">
33+
Utregningen baserer seg på lønn for en måned. Dagsatsen får du ved å dele "sum tilskudd
34+
for en måned" på snitt antall dager i en måned (365,25 / 12 = 30,4375) og ganger med
35+
antall dager i perioden.
36+
</BodyShort>
37+
)}
38+
<InfoRundtRedusertProsentsats className={cls.className} />
39+
{avtale.tiltakstype == 'VTAO' ? (
40+
<VisningTilskuddsperioderTabellVtao className={cls.className} />
41+
) : (
42+
<VisningTilskuddsperioderTabell className={cls.className} />
43+
)}
44+
<MeldingArbeidsgiverSokRefusjon className={cls.className} avtale={avtale} />
4945
</Accordion.Content>
5046
</Accordion.Item>
5147
</Accordion>

Diff for: ‎src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabell.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@ const VisningTilskuddsperioderTabell: React.FC<Properties> = ({ className }: Pro
2525
const cls = BEMHelper(className);
2626
return (
2727
<>
28-
<Table size={'medium'}>
28+
<Table size="medium">
2929
<Table.Header>
3030
<Table.Row>
31-
<Table.HeaderCell textSize={'small'}>Tilskudd for perioder</Table.HeaderCell>
32-
{innloggetBruker.erNavAnsatt && <Table.HeaderCell textSize={'small'}>Status</Table.HeaderCell>}
33-
<Table.HeaderCell textSize={'small'}>Tilskuddsprosent</Table.HeaderCell>
34-
<Table.HeaderCell textSize={'small'}>Inntil</Table.HeaderCell>
31+
<Table.HeaderCell textSize="small">Tilskudd for perioder</Table.HeaderCell>
32+
{innloggetBruker.erNavAnsatt && <Table.HeaderCell textSize="small">Status</Table.HeaderCell>}
33+
<Table.HeaderCell textSize="small">Tilskuddsprosent</Table.HeaderCell>
34+
<Table.HeaderCell textSize="small">Inntil</Table.HeaderCell>
3535
</Table.Row>
3636
</Table.Header>
3737
<Table.Body>
@@ -48,7 +48,7 @@ const VisningTilskuddsperioderTabell: React.FC<Properties> = ({ className }: Pro
4848
} else if (index !== 0 && (index === startIndexVisning || index === sluttIndexVisning)) {
4949
return (
5050
<Table.Row key={periode.id}>
51-
<Table.DataCell textSize={'small'} colSpan={100}>
51+
<Table.DataCell textSize="small" colSpan={100}>
5252
...
5353
</Table.DataCell>
5454
</Table.Row>
@@ -65,11 +65,11 @@ const VisningTilskuddsperioderTabell: React.FC<Properties> = ({ className }: Pro
6565
{formaterPeriode(periode.startDato, periode.sluttDato)}
6666
</Table.DataCell>
6767
{innloggetBruker.erNavAnsatt && (
68-
<Table.DataCell textSize={'small'}>
68+
<Table.DataCell textSize="small">
6969
<EtikettStatus tilskuddsperiodestatus={periode.status} size="small" />
7070
</Table.DataCell>
7171
)}
72-
<Table.DataCell textSize={'small'}>
72+
<Table.DataCell textSize="small">
7373
{avtale.tiltakstype === 'VARIG_LONNSTILSKUDD' &&
7474
periode.status !== 'BEHANDLET_I_ARENA' && (
7575
<>{periode.lonnstilskuddProsent}%</>
@@ -79,7 +79,7 @@ const VisningTilskuddsperioderTabell: React.FC<Properties> = ({ className }: Pro
7979
<>{periode.lonnstilskuddProsent}%</>
8080
)}
8181
</Table.DataCell>
82-
<Table.DataCell textSize={'small'}>{formaterPenger(periode.beløp)}</Table.DataCell>
82+
<Table.DataCell textSize="small">{formaterPenger(periode.beløp)}</Table.DataCell>
8383
</Table.Row>
8484
);
8585
})}

Diff for: ‎src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -37,20 +37,20 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
3737

3838
return (
3939
<>
40-
<Table size={'medium'}>
40+
<Table size="medium">
4141
<Table.Header>
4242
<Table.Row>
43-
<Table.HeaderCell textSize={'small'}>Tilskudd for perioder</Table.HeaderCell>
44-
{innloggetBruker.erNavAnsatt && <Table.HeaderCell textSize={'small'}>Status</Table.HeaderCell>}
45-
<Table.HeaderCell textSize={'small'}>Inntil</Table.HeaderCell>
46-
<Table.HeaderCell textSize={'small'}>Utbetales</Table.HeaderCell>
43+
<Table.HeaderCell textSize="small">Tilskudd for perioder</Table.HeaderCell>
44+
{innloggetBruker.erNavAnsatt && <Table.HeaderCell textSize="small">Status</Table.HeaderCell>}
45+
<Table.HeaderCell textSize="small">Inntil</Table.HeaderCell>
46+
<Table.HeaderCell textSize="small">Utbetales</Table.HeaderCell>
4747
</Table.Row>
4848
</Table.Header>
4949
<Table.Body>
5050
{avtale.tilskuddPeriode
5151
.filter((p: TilskuddsPeriode) => p.aktiv)
5252
.slice(startIndexVisning, sluttIndexVisning)
53-
.map((periode: TilskuddsPeriode, key: number) => (
53+
.map((periode: TilskuddsPeriode) => (
5454
<TilskuddsperiodeRad
5555
avtaleOpprettet={avtaleOpprettet}
5656
erNavAnsatt={erNavAnsatt}
@@ -62,7 +62,7 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
6262
{!visAllePerioder && sistePeriode && (
6363
<>
6464
<Table.Row>
65-
<Table.DataCell textSize={'small'} colSpan={100}>
65+
<Table.DataCell textSize="small" colSpan={100}>
6666
...
6767
</Table.DataCell>
6868
</Table.Row>

Diff for: ‎src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderVtao.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ const VisningTilskuddsperioderVtao: FunctionComponent = () => {
1616
Oversikt over tilskudd fra {avtale.gjeldendeInnhold.startDato} - {avtale.gjeldendeInnhold.sluttDato}
1717
</Label>
1818
<VerticalSpacer rem={2} />
19-
<div className={cls.element('container')}>
20-
<VisningTilskuddsperioderTabellVtao className={cls.className} />
21-
</div>
19+
<VisningTilskuddsperioderTabellVtao className={cls.className} />
2220
</div>
2321
);
2422
};

Diff for: ‎src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/visningTilskuddsperioder.less

-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
.visning-tilskuddsperioder {
2-
&__header {
3-
margin-bottom: 2rem;
4-
}
5-
62
&__melding-arbeidsgiver,
73
&__melding-arbeidsgiver-text {
84
margin: 1rem 0;

0 commit comments

Comments
 (0)