From 46877b02996fd566930ec3706657bbdfb91dc231 Mon Sep 17 00:00:00 2001 From: Hallvard Andreas Stark <57254397+hallvardastark@users.noreply.github.com> Date: Mon, 11 Dec 2023 16:21:30 +0100 Subject: [PATCH] Bedre lesbarhet i behandlingsvelgeren (#5414) * Bedre lesbarhet i behandlingsvelgeren * fiks test * fix test --- .../fagsakprofile/FagsakProfileIndex.spec.tsx | 4 +- .../src/components/BehandlingPicker.tsx | 75 ++++++++++--------- .../BehandlingPickerItemContent.spec.tsx | 39 +++------- .../BehandlingPickerItemContent.tsx | 18 ++++- .../behandlingPickerItemContent.module.css | 10 +++ 5 files changed, 80 insertions(+), 66 deletions(-) diff --git a/packages/sak-app/src/fagsakprofile/FagsakProfileIndex.spec.tsx b/packages/sak-app/src/fagsakprofile/FagsakProfileIndex.spec.tsx index dc2d072ccd..fa12bd11d9 100644 --- a/packages/sak-app/src/fagsakprofile/FagsakProfileIndex.spec.tsx +++ b/packages/sak-app/src/fagsakprofile/FagsakProfileIndex.spec.tsx @@ -191,8 +191,8 @@ describe('', () => { 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 index bc6d5b80af..42e6dc0c40 100644 --- 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[]; 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 => ( -
  • - setValgtBehandlingId(behandling.id)} - className={styles.linkToBehandling} - to={getBehandlingLocation(behandling.id)} - > - periode.data?.id === behandling.id)?.data?.perioder} - erFerdigstilt={!!behandling.avsluttet} - erUnntaksløype={behandling.type.kode === behandlingType.UNNTAK} - /> - -
    • - )); +}): 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) => ( +
  • + setValgtBehandlingId(behandling.id)} + className={styles.linkToBehandling} + to={getBehandlingLocation(behandling.id)} + > + periode.data?.id === behandling.id)?.data?.perioder} + erFerdigstilt={!!behandling.avsluttet} + erUnntaksløype={behandling.type.kode === behandlingType.UNNTAK} + index={sorterteOgFiltrerteBehandlinger.length - index} + opprettet={behandling.opprettet} + /> + +
    • + )); +}; const usePrevious = (value: number): number => { const ref = useRef(); diff --git a/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.spec.tsx b/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.spec.tsx index 2ca2f9e53a..e6f6312968 100644 --- 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('', () => { it('skal rendre komponent', () => { - const wrapper = shallow( + renderWithIntl( ', () => { 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( - , - ); - - 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 index 34c3f485a8..37990e798c 100644 --- 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 = ({ søknadsperioder, erFerdigstilt, erUnntaksløype, + index, + opprettet, }) => (
    + {`${index}. `} {behandlingTypeNavn} {erAutomatiskRevurdering ? getAutomatiskRevurderingText() : ''} {erUnntaksløype ? getUnntaksløypeText() : ''} @@ -69,6 +75,16 @@ const BehandlingPickerItemContent: React.FC = ({ {getStatusText(behandlingsresultatTypeKode, behandlingsresultatTypeNavn, erFerdigstilt)}
    + {opprettet && ( +
    + + Opprettet: + + + + +
    + )}
    diff --git a/packages/sak-behandling-velger/src/components/behandlingPickerItemContent.module.css b/packages/sak-behandling-velger/src/components/behandlingPickerItemContent.module.css index 225bf1bf51..d898e9595b 100644 --- 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; + } +}