From 65cab4c35ac2a77e3c3a4a49dfd23573186575c3 Mon Sep 17 00:00:00 2001
From: Hallvard Andreas Stark
 <57254397+hallvardastark@users.noreply.github.com>
Date: Mon, 30 Sep 2024 12:42:28 +0200
Subject: [PATCH] Legger inn sortering av beskrivelser for periode (#6627)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Legger inn sortering av beskrivelser for periode

* Legger inn sortering av beskrivelser for periode
Fikser styling på lignende knapp

* Tekstendring
---
 .../mock/mocked-data/mockedTilsyn.ts          | 38 ++++++++++++++++-
 .../BeskrivelserForPerioden.tsx               | 42 ++++++++++++++-----
 .../VurderingAvTilsynsbehovForm.tsx"          | 10 +++--
 3 files changed, 75 insertions(+), 15 deletions(-)

diff --git a/packages/fakta-etablert-tilsyn/mock/mocked-data/mockedTilsyn.ts b/packages/fakta-etablert-tilsyn/mock/mocked-data/mockedTilsyn.ts
index 83b57375a1..3ff75ed08d 100644
--- 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/packages/fakta-etablert-tilsyn/src/ui/components/beskrivelser-for-perioden/BeskrivelserForPerioden.tsx b/packages/fakta-etablert-tilsyn/src/ui/components/beskrivelser-for-perioden/BeskrivelserForPerioden.tsx
index dd856b132e..c68075867c 100644
--- a/packages/fakta-etablert-tilsyn/src/ui/components/beskrivelser-for-perioden/BeskrivelserForPerioden.tsx
+++ b/packages/fakta-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/packages/fakta-medisinsk-vilk\303\245r/src/ui/components/vurdering-av-tilsynsbehov-form/VurderingAvTilsynsbehovForm.tsx" "b/packages/fakta-medisinsk-vilk\303\245r/src/ui/components/vurdering-av-tilsynsbehov-form/VurderingAvTilsynsbehovForm.tsx"
index 6a4dba50d0..7e77366a43 100644
--- "a/packages/fakta-medisinsk-vilk\303\245r/src/ui/components/vurdering-av-tilsynsbehov-form/VurderingAvTilsynsbehovForm.tsx"
+++ "b/packages/fakta-medisinsk-vilk\303\245r/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>
           )}