[TPO-67] Dato velger for oppfølging tab (#2303)

* [TPO-67] Dato velger for oppfølging tab

* [TPO-67] Dato velger for oppfølging tab

src/app/personside/infotabs/oppfolging/OppfolgingContainer.tsx

@@ -1,19 +1,46 @@
 import * as React from 'react';
-import OppfolgingVisning from './OppfolgingVisningKomponent';
-import { BigCenteredLazySpinner } from '../../../../components/BigCenteredLazySpinner';
 import oppfolgingResource from '../../../../rest/resources/oppfolgingResource';
-import AlertStripe from 'nav-frontend-alertstriper';
+import { useAppState } from '../../../../utils/customHooks';
+import OppfolgingFilter from './OppfolgingFilter';
+import VisOppfolgingDetaljer from './OppfolgingDetaljerKomponent';
+import SykefraversoppfolgingEkspanderbartPanel from './SykefraversoppfolgingEkspanderbartPanel';
+import OppfolgingYtelserEkspanderbartPanel from './OppfolgingYtelserEkspanderbartPanel';
+import styled from 'styled-components';
+import theme from '../../../../styles/personOversiktTheme';
+import { DetaljertOppfolging } from '../../../../models/oppfolging';
 
-function OppfolgingContainer() {
-    const oppfolging = oppfolgingResource.useFetch();
+const OppfolgingStyle = styled.div`
+    > *:not(:last-child) {
+        margin-bottom: ${theme.margin.layout};
+    }
+    padding: ${theme.margin.layout};
+`;
 
-    if (oppfolging.isLoading) {
-        return BigCenteredLazySpinner;
-    } else if (oppfolging.isError) {
-        return <AlertStripe type="advarsel">Kunne ikke laste inn informasjon om brukers oppfølging</AlertStripe>;
-    } else {
-        return <OppfolgingVisning detaljertOppfolging={oppfolging.data} />;
+const DetaljertInfoWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    > *:last-child {
+        margin-left: ${theme.margin.layout};
+        flex-basis: 75%;
     }
+`;
+
+function OppfolgingContainer() {
+    const periode = useAppState((appState) => appState.oppfolging.periode);
+    const fraTilDato = periode.egendefinertPeriode;
+    const oppfolgingResponse = oppfolgingResource.useFetch(fraTilDato.fra, fraTilDato.til);
+    const oppfolging = oppfolgingResponse.data as DetaljertOppfolging;
+
+    return (
+        <OppfolgingStyle>
+            <DetaljertInfoWrapper>
+                <OppfolgingFilter />
+                <VisOppfolgingDetaljer detaljertOppfolging={oppfolging ?? {}} isError={oppfolgingResponse.isError} />
+            </DetaljertInfoWrapper>
+            <SykefraversoppfolgingEkspanderbartPanel syfoPunkter={oppfolging?.sykefraværsoppfølging ?? []} />
+            <OppfolgingYtelserEkspanderbartPanel ytelser={oppfolging?.ytelser ?? []} />
+        </OppfolgingStyle>
+    );
 }
 
 export default OppfolgingContainer;

src/app/personside/infotabs/oppfolging/OppfolgingDetaljerKomponent.tsx

@@ -9,7 +9,7 @@ import { useRef } from 'react';
 import { guid } from 'nav-frontend-js-utils';
 import Panel from 'nav-frontend-paneler';
 import { getErUnderOppfolging, getOppfolgingEnhet, getVeileder } from './oppfolging-utils';
-import { AlertStripeAdvarsel } from 'nav-frontend-alertstriper';
+import AlertStripe, { AlertStripeAdvarsel } from 'nav-frontend-alertstriper';
 
 const StyledPanel = styled(Panel)`
     padding: ${pxToRem(15)};
@@ -20,6 +20,7 @@ const StyledPanel = styled(Panel)`
 
 interface Props {
     detaljertOppfolging: DetaljertOppfolging;
+    isError?: boolean;
 }
 
 function VisOppfolgingDetaljer(props: Props) {
@@ -30,7 +31,9 @@ function VisOppfolgingDetaljer(props: Props) {
         detaljer.oppfolging === null ? (
             <AlertStripeAdvarsel>Kunne ikke hente ut all oppfølgings-informasjon</AlertStripeAdvarsel>
         ) : null;
-
+    const errorLoadingData = props.isError ? (
+        <AlertStripe type="advarsel">Kunne ikke laste inn informasjon om brukers oppfølging</AlertStripe>
+    ) : null;
     const descriptionListProps = {
         'Er under oppfølging': getErUnderOppfolging(detaljer.oppfolging),
         Oppfølgingsenhet: getOppfolgingEnhet(detaljer.oppfolging),
@@ -46,6 +49,7 @@ function VisOppfolgingDetaljer(props: Props) {
         <StyledPanel aria-labelledby={headerId.current}>
             <article>
                 <Undertittel id={headerId.current}>Arbeidsoppfølging</Undertittel>
+                {errorLoadingData}
                 {ikkeFullstendigData}
                 <DescriptionList entries={descriptionListProps} />
             </article>

src/app/personside/infotabs/oppfolging/OppfolgingFilter.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Undertittel } from 'nav-frontend-typografi';
+import theme, { pxToRem } from '../../../../styles/personOversiktTheme';
+import { settValgtPeriode } from '../../../../redux/oppfolging/actions';
+import { useDispatch } from 'react-redux';
+import { useCallback, useRef } from 'react';
+import { guid } from 'nav-frontend-js-utils';
+import Panel from 'nav-frontend-paneler';
+import { useAppState } from '../../../../utils/customHooks';
+import FiltreringPeriode from '../utbetalinger/filter/FilterPeriode';
+import { PeriodeOptions } from '../../../../redux/utbetalinger/types';
+
+const StyledPanel = styled(Panel)`
+    padding: ${pxToRem(15)};
+`;
+
+const TittelWrapper = styled.div`
+    &:focus {
+        outline: none;
+    }
+    margin-bottom: ${theme.margin.layout};
+`;
+
+const InputPanel = styled.form`
+    display: flex;
+    flex-direction: column;
+    margin-top: 1.5rem;
+    > *:first-child {
+        margin-bottom: 0.5rem;
+    }
+    > * {
+        margin-top: 0.5rem;
+    }
+    .skjemaelement--horisontal {
+        margin-bottom: 0.4rem;
+    }
+`;
+
+function OppfolgingFilter() {
+    const headerId = useRef(guid());
+    const dispatch = useDispatch();
+    const periode = useAppState((appState) => appState.oppfolging.periode);
+    const updateFilter = useCallback(
+        (change: PeriodeOptions) => {
+            dispatch(settValgtPeriode(change));
+        },
+        [dispatch]
+    );
+
+    return (
+        <StyledPanel aria-labelledby={headerId.current}>
+            <article>
+                <TittelWrapper>
+                    <Undertittel id={headerId.current}>Oppfølging og ytelser vises for perioden:</Undertittel>
+                </TittelWrapper>
+                <InputPanel>
+                    <FiltreringPeriode
+                        periode={periode}
+                        updatePeriod={(change) => {
+                            updateFilter(change);
+                        }}
+                    />
+                </InputPanel>
+            </article>
+        </StyledPanel>
+    );
+}
+
+export default OppfolgingFilter;