Legger inn sortering av beskrivelser for periode (#6627)

* Legger inn sortering av beskrivelser for periode * Legger inn sortering av beskrivelser for periode Fikser styling på lignende knapp * Tekstendring
navikt · Sep 30, 2024 · 65cab4c · 65cab4c
1 parent 9b9ae7a
commit 65cab4c
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 15 deletions.
diff --git a/packages/fakta-etablert-tilsyn/mock/mocked-data/mockedTilsyn.ts b/packages/fakta-etablert-tilsyn/mock/mocked-data/mockedTilsyn.ts
@@ -270,15 +270,51 @@ export default {
  ],
  nattevåk: {
  beskrivelser: [
+ {
+ periode: {
+ fom: '2021-08-20',
+ tom: '2021-08-25',
+ },
+ tekst: 'More text',
+ mottattDato: '2021-08-20',
+ kilde: 'ANDRE',
+ },
  {
  periode: {
  fom: '2021-05-11',
  tom: '2021-05-11',
  },
- tekst: 'string',
+ tekst: 'Some text',
  mottattDato: '2021-05-11',
+ kilde: 'ANDRE',
+ },
+ {
+ periode: {
+ fom: '2021-09-15',
+ tom: '2021-09-20',
+ },
+ tekst: 'Additional text',
+ mottattDato: '2021-09-15',
  kilde: 'SØKER',
  },
+ {
+ periode: {
+ fom: '2021-06-01',
+ tom: '2021-06-05',
+ },
+ tekst: 'Another text',
+ mottattDato: '2021-06-01',
+ kilde: 'SØKER',
+ },
+ {
+ periode: {
+ fom: '2021-07-10',
+ tom: '2021-07-15',
+ },
+ tekst: 'Different text',
+ mottattDato: '2021-07-10',
+ kilde: 'ANDRE',
+ },
  ],
  vurderinger: [
  {

diff --git a/...a-etablert-tilsyn/src/ui/components/beskrivelser-for-perioden/BeskrivelserForPerioden.tsx b/...a-etablert-tilsyn/src/ui/components/beskrivelser-for-perioden/BeskrivelserForPerioden.tsx
@@ -1,3 +1,6 @@
+import { sortPeriodsByFomDate } from '@fpsak-frontend/utils';
+import { MinusIcon, PlusIcon } from '@navikt/aksel-icons';
+import { Button } from '@navikt/ds-react';
 import {
  Box,
  ContentWithTooltip,
@@ -6,7 +9,7 @@ import {
  OnePersonIconGray,
  OnePersonOutlineGray,
 } from '@navikt/ft-plattform-komponenter';
-import * as React from 'react';
+import { useState } from 'react';
 import Beskrivelse from '../../../types/Beskrivelse';
 import Kilde from '../../../types/Kilde';
 import { prettifyDate } from '../../../util/formats';
@@ -40,18 +43,37 @@ const getLabel = (periodebeskrivelse: Beskrivelse) => {
 };
 
 const BeskrivelserForPerioden = ({ periodebeskrivelser }: BeskrivelserForPeriodenProps): JSX.Element | null => {
+ const [visAlleBeskrivelser, setVisAlleBeskrivelser] = useState(periodebeskrivelser?.length <= 3);
  if (periodebeskrivelser?.length > 0) {
+ const sortertePeriodebeskrivelser = [
+ ...periodebeskrivelser
+ .sort((periode1, periode2) => sortPeriodsByFomDate(periode1.periode, periode2.periode))
+ .reverse(),
+ ];
  return (
  <>
- {periodebeskrivelser.map(periodebeskrivelse => (
- <Box marginBottom={Margin.large} key={periodebeskrivelse.tekst}>
- <LabelledContent
- label={getLabel(periodebeskrivelse)}
- content={<span className="whitespace-pre-wrap">{periodebeskrivelse.tekst}</span>}
- labelTag="div"
- />
- </Box>
- ))}
+ {sortertePeriodebeskrivelser
+ .filter((periodebeskrivelse, index) => (visAlleBeskrivelser ? true : index <= 2))
+ .map(periodebeskrivelse => (
+ <Box marginBottom={Margin.large} key={periodebeskrivelse.tekst}>
+ <LabelledContent
+ label={getLabel(periodebeskrivelse)}
+ content={<span className="whitespace-pre-wrap">{periodebeskrivelse.tekst}</span>}
+ labelTag="div"
+ />
+ </Box>
+ ))}
+ {sortertePeriodebeskrivelser.length > 3 && (
+ <Button
+ icon={visAlleBeskrivelser ? <MinusIcon /> : <PlusIcon />}
+ onClick={() => setVisAlleBeskrivelser(!visAlleBeskrivelser)}
+ size="small"
+ type="button"
+ variant="secondary"
+ >
+ {visAlleBeskrivelser ? 'Skjul tidligere beskrivelser' : 'Vis tidligere beskrivelser'}
+ </Button>
+ )}
  <hr className={styles.beskrivelserForPerioden__separator} />
  </>
  );

diff --git a/...k-vilkår/src/ui/components/vurdering-av-tilsynsbehov-form/VurderingAvTilsynsbehovForm.tsx b/...k-vilkår/src/ui/components/vurdering-av-tilsynsbehov-form/VurderingAvTilsynsbehovForm.tsx
@@ -1,7 +1,7 @@
 import { CheckboxGroupRHF, PeriodpickerListRHF, TextAreaRHF, YesOrNoQuestionRHF } from '@fpsak-frontend/form';
 import { Period, isSameOrBefore } from '@fpsak-frontend/utils';
 import { Close } from '@navikt/ds-icons';
-import { Alert, Label, Link } from '@navikt/ds-react';
+import { Alert, Button, Label, Link } from '@navikt/ds-react';
 import { Box, ContentWithTooltip, Form, Margin, OnePersonOutlineGray } from '@navikt/ft-plattform-komponenter';
 import React, { useState } from 'react';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
@@ -254,13 +254,15 @@ const VurderingAvTilsynsbehovForm = ({
  />
  </div>
  {visFlereDokumenterKnapp() && (
- <button
- className={styles.visDokumenterKnapp}
+ <Button
+ className="mt-2"
  onClick={() => setVisAlleDokumenter(!visAlleDokumenter)}
+ size="small"
  type="button"
+ variant="secondary"
  >
  {visAlleDokumenter ? `Vis færre dokumenter` : `Vis alle dokumenter (${dokumenter.length})`}
- </button>
+ </Button>
  )}
  </Box>
  )}