Scroller til gjeldende tilskuddsperiode (#1177)

* Scroller til gjeldende tilskudsperiode * Viser antall avtaler for beslutter Co-authored-by: Odd Andreas <[email protected]>
navikt · Nov 3, 2023 · cbc3f01 · cbc3f01
1 parent a6a3763
commit cbc3f01
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/BeslutterOversikt/BeslutterOversikt.tsx b/src/BeslutterOversikt/BeslutterOversikt.tsx
@@ -26,7 +26,7 @@ const BeslutterOversikt: FunctionComponent = () => {
 
     useEffect(() => {
         setNettressurs({ status: Status.LasterInn });
-        const page = parseInt(filtre.page ? filtre.page : '1', 10)
+        const page = parseInt(filtre.page ? filtre.page : '1', 10);
         hentAvtalerForInnloggetBeslutter(filtre, 10, page - 1).then(
             (pagableAvtale: PageableAvtaleMinimalForBeslutter) => {
                 setCurrentPage(pagableAvtale);
@@ -41,7 +41,9 @@ const BeslutterOversikt: FunctionComponent = () => {
     return (
         <>
             <Dokumenttittel tittel={'Tilskuddsoversikt'} />
-            <BannerNAVAnsatt tekst={'Tilskuddsoversikt'} />
+            <BannerNAVAnsatt
+                tekst={`Tilskuddsoversikt ${currentPage ? '(' + currentPage.totalItems.toString() + ' avtaler)' : ''}`}
+            />
             <main className={cls.className} style={{ padding: layout.mellomromPåHverSide }}>
                 <div
                     style={layout.stylingAvFilterOgTabell}

diff --git a/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx b/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx
@@ -2,11 +2,11 @@ import { AvtaleContext, Context } from '@/AvtaleProvider';
 import { formatterDato, formatterPeriode, NORSK_DATO_FORMAT } from '@/utils/datoUtils';
 import { formatterProsent } from '@/utils/formatterProsent';
 import { formatterPenger } from '@/utils/PengeUtils';
-import React, { FunctionComponent, useContext, useState } from 'react';
+import React, { FunctionComponent, useContext, useRef, useState, useEffect } from 'react';
 import EtikettStatus from '../EtikettStatus';
 import BEMHelper from '@/utils/bem';
 import './beslutterTilskuddsperioder.less';
-import { BodyShort, Heading, Button } from '@navikt/ds-react';
+import { BodyShort, Button, Heading } from '@navikt/ds-react';
 import HorizontalSpacer from '@/komponenter/layout/HorizontalSpacer';
 import BekreftelseModal from '@/komponenter/modal/BekreftelseModal';
 import { Periode, TilskuddsperiodeContext } from '@/BeslutterSide/BeslutterSide';
@@ -23,8 +23,17 @@ const BeslutterTilskuddsPerioder: FunctionComponent<Props> = (props) => {
     const { enhet, setEnhetFeil, setVisAvslag } = useContext<Periode>(TilskuddsperiodeContext);
     const { gjeldendeTilskuddsperiode } = avtale;
     const [godkjennModalÅpen, setGodkjennModalÅpen] = useState<boolean>(false);
+    const gjeldendeTilskuddsperiodeRef = useRef<HTMLTableRowElement | null>(null);
 
     const cls = BEMHelper('beslutter-tilskuddsperioder');
+    useEffect(() => {
+        if (gjeldendeTilskuddsperiodeRef.current) {
+            gjeldendeTilskuddsperiodeRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            });
+        }
+    }, []);
 
     if (avtale.tilskuddPeriode.length < 1) return null;
 
@@ -119,7 +128,7 @@ const BeslutterTilskuddsPerioder: FunctionComponent<Props> = (props) => {
                                         </tr>
                                     )}
                                     {gjeldende && (
-                                        <tr className={cls.element('knapp-row')}>
+                                        <tr className={cls.element('knapp-row')} ref={gjeldendeTilskuddsperiodeRef}>
                                             <td colSpan={7} className={cls.element('knapp-data')}>
                                                 <>
                                                     {periode.status === 'AVSLÅTT' &&