Bedre lesbarhet i behandlingsvelgeren (#5414)

* Bedre lesbarhet i behandlingsvelgeren * fiks test * fix test
navikt · Dec 11, 2023 · 46877b0 · 46877b0
1 parent 38e373e
commit 46877b0
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 66 deletions.
diff --git a/packages/sak-app/src/fagsakprofile/FagsakProfileIndex.spec.tsx b/packages/sak-app/src/fagsakprofile/FagsakProfileIndex.spec.tsx
@@ -191,8 +191,8 @@ describe('<FagsakProfileIndex>', () => {
     expect(screen.queryAllByTestId('BehandlingPickerItem').length).toBe(2);
     expect(screen.getByTestId('BehandlingPicker')).toBeInTheDocument();
     expect(screen.getByText('123 - Opprettet')).toBeInTheDocument();
-    expect(screen.getByText('Førstegangsbehandling')).toBeInTheDocument();
-    expect(screen.getByText('Viderebehandling')).toBeInTheDocument();
+    expect(screen.getByText('1. Førstegangsbehandling')).toBeInTheDocument();
+    expect(screen.getByText('2. Viderebehandling')).toBeInTheDocument();
   });
 
   it('skal ikke vise alle behandlinger når behandling er valgt', async () => {

diff --git a/packages/sak-behandling-velger/src/components/BehandlingPicker.tsx b/packages/sak-behandling-velger/src/components/BehandlingPicker.tsx
@@ -54,42 +54,45 @@ const renderListItems = ({
   intl: IntlShape;
   alleSøknadsperioder: UseQueryResult<PerioderMedBehandlingsId, unknown>[];
   activeFilters: string[];
-}): ReactElement[] =>
-  sortBehandlinger(behandlinger)
-    .filter(behandling => {
-      if (activeFilters.length === 0) {
-        return true;
-      }
-      if (activeFilters.includes(automatiskBehandling)) {
-        return erAutomatiskBehandlet(behandling);
-      }
-      return activeFilters.includes(behandling.type.kode);
-    })
-    .map(behandling => (
-      <li data-testid="BehandlingPickerItem" key={behandling.id}>
-        <NavLink
-          onClick={() => setValgtBehandlingId(behandling.id)}
-          className={styles.linkToBehandling}
-          to={getBehandlingLocation(behandling.id)}
-        >
-          <BehandlingPickerItemContent
-            behandlingTypeNavn={getBehandlingNavn(behandling, getKodeverkFn, intl)}
-            behandlingsresultatTypeNavn={
-              behandling.behandlingsresultat
-                ? getKodeverkFn(behandling.behandlingsresultat.type, behandling.type).navn
-                : undefined
-            }
-            behandlingsresultatTypeKode={
-              behandling.behandlingsresultat ? behandling.behandlingsresultat.type.kode : undefined
-            }
-            erAutomatiskRevurdering={erAutomatiskBehandlet(behandling)}
-            søknadsperioder={alleSøknadsperioder.find(periode => periode.data?.id === behandling.id)?.data?.perioder}
-            erFerdigstilt={!!behandling.avsluttet}
-            erUnntaksløype={behandling.type.kode === behandlingType.UNNTAK}
-          />
-        </NavLink>
-      </li>
-    ));
+}): ReactElement[] => {
+  const sorterteOgFiltrerteBehandlinger = sortBehandlinger(behandlinger).filter(behandling => {
+    if (activeFilters.length === 0) {
+      return true;
+    }
+    if (activeFilters.includes(automatiskBehandling)) {
+      return erAutomatiskBehandlet(behandling);
+    }
+    return activeFilters.includes(behandling.type.kode);
+  });
+
+  return sorterteOgFiltrerteBehandlinger.map((behandling, index) => (
+    <li data-testid="BehandlingPickerItem" key={behandling.id}>
+      <NavLink
+        onClick={() => setValgtBehandlingId(behandling.id)}
+        className={styles.linkToBehandling}
+        to={getBehandlingLocation(behandling.id)}
+      >
+        <BehandlingPickerItemContent
+          behandlingTypeNavn={getBehandlingNavn(behandling, getKodeverkFn, intl)}
+          behandlingsresultatTypeNavn={
+            behandling.behandlingsresultat
+              ? getKodeverkFn(behandling.behandlingsresultat.type, behandling.type).navn
+              : undefined
+          }
+          behandlingsresultatTypeKode={
+            behandling.behandlingsresultat ? behandling.behandlingsresultat.type.kode : undefined
+          }
+          erAutomatiskRevurdering={erAutomatiskBehandlet(behandling)}
+          søknadsperioder={alleSøknadsperioder.find(periode => periode.data?.id === behandling.id)?.data?.perioder}
+          erFerdigstilt={!!behandling.avsluttet}
+          erUnntaksløype={behandling.type.kode === behandlingType.UNNTAK}
+          index={sorterteOgFiltrerteBehandlinger.length - index}
+          opprettet={behandling.opprettet}
+        />
+      </NavLink>
+    </li>
+  ));
+};
 
 const usePrevious = (value: number): number => {
   const ref = useRef<number>();

diff --git a/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.spec.tsx b/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.spec.tsx
@@ -1,14 +1,12 @@
+import { renderWithIntl } from '@fpsak-frontend/utils-test/src/test-utils';
+import { screen } from '@testing-library/react';
 import React from 'react';
-import { shallow } from 'enzyme';
-import Panel from 'nav-frontend-paneler';
-
-import { DateLabel } from '@fpsak-frontend/shared-components';
-
+import messages from '../../i18n/nb_NO.json';
 import BehandlingPickerItemContent from './BehandlingPickerItemContent';
 
 describe('<BehandlingPickerItemContent>', () => {
   it('skal rendre komponent', () => {
-    const wrapper = shallow(
+    renderWithIntl(
       <BehandlingPickerItemContent
         behandlingTypeNavn="Viderebehandling"
         behandlingsresultatTypeNavn="Innvilget"
@@ -17,28 +15,15 @@ describe('<BehandlingPickerItemContent>', () => {
         søknadsperioder={[{ fom: '2022-01-01', tom: '2022-01-18' }]}
         erFerdigstilt
         erUnntaksløype={false}
+        index={1}
+        opprettet="2021-12-20T09:21:41"
       />,
+      {
+        locale: 'nb-NO',
+        messages,
+      },
     );
-    expect(wrapper.find(Panel)).toHaveLength(1);
-    expect(wrapper.find(DateLabel)).toHaveLength(2);
-  });
-
-  it('skal vise avsluttet dato når denne finnes', () => {
-    const wrapper = shallow(
-      <BehandlingPickerItemContent
-        behandlingTypeNavn="Viderebehandling"
-        behandlingsresultatTypeNavn="Innvilget"
-        behandlingsresultatTypeKode="INNVILGET"
-        erAutomatiskRevurdering={false}
-        søknadsperioder={[{ fom: '2022-01-01', tom: '2022-01-18' }]}
-        erFerdigstilt
-        erUnntaksløype={false}
-      />,
-    );
-
-    const labels = wrapper.find(DateLabel);
-    expect(labels).toHaveLength(2);
-    expect(labels.first().prop('dateString')).toEqual('2022-01-01');
-    expect(labels.last().prop('dateString')).toEqual('2022-01-18');
+    expect(screen.getByText('1. Viderebehandling')).toBeInTheDocument();
+    expect(screen.getByText('20.12.2021')).toBeInTheDocument();
   });
 });
diff --git a/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.tsx b/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.tsx
@@ -1,11 +1,12 @@
 import calendarImg from '@fpsak-frontend/assets/images/calendar-2.svg';
 import chevronBlueRightImg from '@fpsak-frontend/assets/images/chevron_blue_right.svg';
-import { Image } from '@fpsak-frontend/shared-components';
+import { DateLabel, Image } from '@fpsak-frontend/shared-components';
 import { Periode } from '@k9-sak-web/types';
 import Panel from 'nav-frontend-paneler';
 import { Normaltekst, Undertittel } from 'nav-frontend-typografi';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { BodyShort } from '@navikt/ds-react';
 import styles from './behandlingPickerItemContent.module.css';
 import { getFormattedSøknadserioder, getStatusIcon, getStatusText } from './behandlingVelgerUtils';
 
@@ -28,6 +29,8 @@ interface OwnProps {
   søknadsperioder: Periode[];
   erFerdigstilt: boolean;
   erUnntaksløype: boolean;
+  index: number;
+  opprettet: string;
 }
 
 /**
@@ -43,11 +46,14 @@ const BehandlingPickerItemContent: React.FC<OwnProps> = ({
   søknadsperioder,
   erFerdigstilt,
   erUnntaksløype,
+  index,
+  opprettet,
 }) => (
   <Panel className={erAutomatiskRevurdering ? styles.indent : ''} border>
     <div className={styles.behandlingPicker}>
       <div>
         <Undertittel>
+          {`${index}. `}
           {behandlingTypeNavn}
           {erAutomatiskRevurdering ? getAutomatiskRevurderingText() : ''}
           {erUnntaksløype ? getUnntaksløypeText() : ''}
@@ -69,6 +75,16 @@ const BehandlingPickerItemContent: React.FC<OwnProps> = ({
             {getStatusText(behandlingsresultatTypeKode, behandlingsresultatTypeNavn, erFerdigstilt)}
           </Normaltekst>
         </div>
+        {opprettet && (
+          <div className={styles.opprettetDatoContainer}>
+            <BodyShort weight="semibold" size="small">
+              Opprettet:
+            </BodyShort>
+            <BodyShort size="small">
+              <DateLabel dateString={opprettet} />
+            </BodyShort>
+          </div>
+        )}
       </div>
       <div className={styles.åpneText}>
         <Normaltekst>

diff --git a/packages/sak-behandling-velger/src/components/behandlingPickerItemContent.module.css b/packages/sak-behandling-velger/src/components/behandlingPickerItemContent.module.css
@@ -98,3 +98,13 @@
   margin-left: 10%;
   width: 90%;
 }
+
+.opprettetDatoContainer {
+  align-items: center;
+  display: flex;
+  margin-top: 0.5rem;
+
+  p:first-of-type {
+    margin-right: 0.25rem;
+  }
+}