diff --git a/src/app/Routing.tsx b/src/app/Routing.tsx index 2a233d0708..95bd82dfc6 100644 --- a/src/app/Routing.tsx +++ b/src/app/Routing.tsx @@ -2,12 +2,12 @@ import React, { Suspense } from 'react'; import { Switch } from 'react-router'; import { SentryRoute } from '../sentry-route'; import { paths } from './routes/routing'; -import SakerFullscreen from './personside/infotabs/saksoversikt/SakerFullscreen'; import SaksDokumentEgetVindu from './personside/infotabs/saksoversikt/SaksDokumentIEgetVindu'; import Personoversikt from './personside/Personoversikt'; import Startbilde from './startbilde/Startbilde'; import { useFodselsnummer } from '../utils/customHooks'; import { CenteredLazySpinner } from '../components/LazySpinner'; +import SakerFullscreenProxy from './personside/infotabs/saksoversikt/SakerFullscreenProxy'; function Routing() { const fnr = useFodselsnummer(); @@ -17,7 +17,7 @@ function Routing() { } + render={(routeProps) => } /> diff --git a/src/app/personside/infotabs/oversikt/SakerOversiktFactory.tsx b/src/app/personside/infotabs/oversikt/SakerOversiktFactory.tsx new file mode 100644 index 0000000000..55a03d96df --- /dev/null +++ b/src/app/personside/infotabs/oversikt/SakerOversiktFactory.tsx @@ -0,0 +1,25 @@ +import React, { ReactNode } from 'react'; +import IfFeatureToggleOff from '../../../../components/featureToggle/IfFeatureToggleOff'; +import IfFeatureToggleOn from '../../../../components/featureToggle/IfFeatureToggleOn'; +import { FeatureToggles } from '../../../../components/featureToggle/toggleIDs'; +import SakerOversiktV2 from './SakerOversiktV2'; +import SakerOversikt from './SakerOversikt'; + +interface Props { + setHeaderContent: (content: ReactNode) => void; +} + +function SakerOversiktFactory(props: Props) { + return ( + <> + + + + + + + + ); +} + +export default SakerOversiktFactory; diff --git a/src/app/personside/infotabs/saksoversikt/SakerFullscreenLenkeV2.tsx b/src/app/personside/infotabs/saksoversikt/SakerFullscreenLenkeV2.tsx new file mode 100644 index 0000000000..78f7104042 --- /dev/null +++ b/src/app/personside/infotabs/saksoversikt/SakerFullscreenLenkeV2.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { useInfotabsDyplenker } from '../dyplenker'; +import styled from 'styled-components'; +import LenkepanelPersonoversikt from '../../../../utils/LenkepanelPersonoversikt'; +import theme from '../../../../styles/personOversiktTheme'; +import { useHentAlleSakstemaFraResourceV2, useSakstemaURLStateV2 } from './useSakstemaURLState'; +import { aggregertSakstemaV2 } from './utils/saksoversiktUtilsV2'; + +const StyledLenkepanelPersonoversikt = styled(LenkepanelPersonoversikt)` + margin-bottom: ${theme.margin.layout}; +`; + +function reactrouterLink(props: React.AnchorHTMLAttributes) { + const { href, ...rest } = props; + return ; +} + +function SakerFullscreenLenkeV2() { + const { alleSakstema } = useHentAlleSakstemaFraResourceV2(); + const { valgteSakstemaer, valgtDokument } = useSakstemaURLStateV2(alleSakstema); + const dyplenker = useInfotabsDyplenker(); + const aggregertSak = aggregertSakstemaV2(alleSakstema, valgteSakstemaer); + + return ( + + Åpne i fullscreen + + ); +} + +export default SakerFullscreenLenkeV2; diff --git a/src/app/personside/infotabs/saksoversikt/SakerFullscreenProxy.tsx b/src/app/personside/infotabs/saksoversikt/SakerFullscreenProxy.tsx new file mode 100644 index 0000000000..4410b7c354 --- /dev/null +++ b/src/app/personside/infotabs/saksoversikt/SakerFullscreenProxy.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import IfFeatureToggleOn from '../../../../components/featureToggle/IfFeatureToggleOn'; +import { FeatureToggles } from '../../../../components/featureToggle/toggleIDs'; +import IfFeatureToggleOff from '../../../../components/featureToggle/IfFeatureToggleOff'; +import SakerFullscreen from './SakerFullscreen'; +import SakerFullscreenV2 from './SakerFullscreenV2'; + +interface Props { + fnr: string; +} + +function SakerFullscreenProxy(props: Props) { + return ( + <> + + + + + + + + ); +} + +export default SakerFullscreenProxy; diff --git a/src/app/personside/infotabs/saksoversikt/SaksoversiktContainerV2.tsx b/src/app/personside/infotabs/saksoversikt/SaksoversiktContainerV2.tsx index 9f1ec627e4..dfa2ace0c4 100644 --- a/src/app/personside/infotabs/saksoversikt/SaksoversiktContainerV2.tsx +++ b/src/app/personside/infotabs/saksoversikt/SaksoversiktContainerV2.tsx @@ -13,6 +13,7 @@ import { useHentAlleSakstemaFraResourceV2, useSakstemaURLStateV2 } from './useSa import sakstema from '../../../../rest/resources/sakstemaResource'; import DokumentOgVedleggV2 from './dokumentvisning/DokumentOgVedleggV2'; import JournalPosterV2 from './saksdokumenter/JournalPosterV2'; +import SakerFullscreenLenkeV2 from './SakerFullscreenLenkeV2'; const saksoversiktMediaTreshold = '70rem'; @@ -66,7 +67,7 @@ function SaksoversiktContainer() { - + diff --git a/src/app/personside/infotabs/saksoversikt/__snapshots__/SaksoversiktContainer.test.tsx.snap b/src/app/personside/infotabs/saksoversikt/__snapshots__/SaksoversiktContainer.test.tsx.snap index 7c5581034e..c84db509be 100644 --- a/src/app/personside/infotabs/saksoversikt/__snapshots__/SaksoversiktContainer.test.tsx.snap +++ b/src/app/personside/infotabs/saksoversikt/__snapshots__/SaksoversiktContainer.test.tsx.snap @@ -92,27 +92,6 @@ exports[`Viser saksoversiktcontainer med alt innhold 1`] = ` padding: .5rem; } -.c2 { - padding: 0rem; - font-weight: 600; -} - -.c2 a { - padding: 0.9375rem; -} - -.c2 a:visited { - color: currentColor !important; -} - -.c2 .lenkepanel { - margin-bottom: 0; -} - -.c3 { - margin-bottom: .5rem; -} - .c22 { color: #645f5a; margin-top: 3px; @@ -122,6 +101,11 @@ exports[`Viser saksoversiktcontainer med alt innhold 1`] = ` line-height: 1rem; } +.c16 { + background-color: #cce1f3; + padding: 0.2rem 0.9375rem; +} + .c24 { margin-left: 0.5rem; } @@ -206,11 +190,6 @@ exports[`Viser saksoversiktcontainer med alt innhold 1`] = ` justify-content: space-between; } -.c16 { - background-color: #cce1f3; - padding: 0.2rem 0.9375rem; -} - .c10 { padding: 0rem; position: relative; @@ -317,6 +296,27 @@ exports[`Viser saksoversiktcontainer med alt innhold 1`] = ` outline: none; } +.c2 { + padding: 0rem; + font-weight: 600; +} + +.c2 a { + padding: 0.9375rem; +} + +.c2 a:visited { + color: currentColor !important; +} + +.c2 .lenkepanel { + margin-bottom: 0; +} + +.c3 { + margin-bottom: .5rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; diff --git a/src/app/personside/infotabs/saksoversikt/saksdokumenter/JournalPostListeElement/JournalpostListeElementV2.tsx b/src/app/personside/infotabs/saksoversikt/saksdokumenter/JournalPostListeElement/JournalpostListeElementV2.tsx new file mode 100644 index 0000000000..807a23e4df --- /dev/null +++ b/src/app/personside/infotabs/saksoversikt/saksdokumenter/JournalPostListeElement/JournalpostListeElementV2.tsx @@ -0,0 +1,203 @@ +import * as React from 'react'; +import { useRef } from 'react'; +import { + Dokument as Enkeltdokument, + Entitet, + Feilmelding, + Journalpost, + Kommunikasjonsretning +} from '../../../../../../models/saksoversikt/journalpost'; +import styled, { css } from 'styled-components/macro'; +import theme from '../../../../../../styles/personOversiktTheme'; +import dayjs from 'dayjs'; +import { saksdatoSomDate } from '../../../../../../models/saksoversikt/fellesSak'; +import { Normaltekst } from 'nav-frontend-typografi'; +import DokumentIkon from '../../../../../../svg/DokumentIkon'; +import DokumentIkkeTilgangIkon from '../../../../../../svg/DokumentIkkeTilgangIkon'; +import EtikettGraa from '../../../../../../components/EtikettGraa'; +import { Sakstema } from '../../../../../../models/saksoversikt/sakstema'; +import DokumentLenke from '../DokumentLenke'; +import { guid } from 'nav-frontend-js-utils'; +import { hentNavn } from '../../../../visittkort-v2/visittkort-utils'; +import { sakstemakodeAlle } from '../../utils/saksoversiktUtils'; +import { useHentAlleSakstemaFraResourceV2, useSakstemaURLStateV2 } from '../../useSakstemaURLState'; +import persondataResource from '../../../../../../rest/resources/persondataResource'; +import JournalpostLestAvBruker from './JournalpostLestAvBruker'; + +interface Props { + journalpost: Journalpost; + harTilgangTilSakstema: boolean; + valgtSakstema: Sakstema; +} + +const StyledArticle = styled.article<{ valgt: boolean }>` + ${(props) => + props.valgt && + css` + background-color: rgba(0, 0, 0, 0.09); + `}; + padding: ${theme.margin.layout}; + display: flex; + align-items: flex-start; +`; + +const InnholdWrapper = styled.div` + flex-grow: 1; + > *:not(:last-child) { + margin-bottom: 0.5rem; + } + width: 0; /* IE-fix*/ +`; + +const IkonWrapper = styled.div` + svg { + height: ${theme.margin.px30}; + width: ${theme.margin.px30}; + opacity: 0.5; + } + padding-right: 1rem; +`; + +const UUcustomOrder = styled.div` + display: flex; + flex-direction: column; + .order-first { + order: 0; + } + .order-second { + order: 1; + } +`; + +const VedleggStyle = styled.div` + ul { + list-style: disc; + } +`; + +const SaksVisiningOgLestWrapper = styled.div` + display: flex; + justify-content: space-between; +`; + +function tekstBasertPaRetning(brukernavn: string, dokument: Journalpost) { + switch (dokument.retning) { + case Kommunikasjonsretning.Inn: + return dokument.avsender === Entitet.Sluttbruker ? `Fra ${brukernavn}` : `Fra ${dokument.navn}`; + case Kommunikasjonsretning.Ut: + return utgaendeTekst(dokument.mottaker, dokument.navn); + case Kommunikasjonsretning.Intern: + return 'Notat'; + default: + return 'Ukjent kommunikasjonsretning'; + } +} + +function utgaendeTekst(mottaker: Entitet, mottakernavn: string) { + const dokumentmottaker = mottaker === Entitet.Sluttbruker ? '' : `(Sendt til ${mottakernavn})`; + return `Fra NAV ${dokumentmottaker}`; +} + +function formaterDatoOgAvsender(brukernavn: string, dokument: Journalpost) { + const dato = dayjs(saksdatoSomDate(dokument.dato)).format('DD.MM.YYYY'); + return `${dato} / ${tekstBasertPaRetning(brukernavn, dokument)}`; +} + +function getDokumentIkon(harTilgang: boolean) { + if (harTilgang) { + return ; + } else { + return ; + } +} + +function JournalpostListeElementV2(props: Props) { + const { alleSakstema } = useHentAlleSakstemaFraResourceV2(); + const { valgtJournalpost } = useSakstemaURLStateV2(alleSakstema); + const vedleggLinkRef = React.createRef(); + const hoveddokumentLinkRef = React.createRef(); + const brukerResponse = persondataResource.useFetch(); + const tittelId = useRef(guid()); + + const dokumentKanVises = (dokument: Enkeltdokument, journalpost: Journalpost) => { + return dokument.kanVises && harTilgangTilJournalpost(journalpost); + }; + + const harTilgangTilJournalpost = (journalpost: Journalpost) => { + const saksid = journalpost.tilhorendeFagsaksid + ? journalpost.tilhorendeFagsaksid + : journalpost.tilhorendeSaksid + ? journalpost.tilhorendeSaksid + : ''; + return ( + props.harTilgangTilSakstema && + journalpost.feil.feilmelding !== Feilmelding.Sikkerhetsbegrensning && + saksid.length !== 0 + ); + }; + + const journalpost = props.journalpost; + const brukersNavn = brukerResponse.data ? hentNavn(brukerResponse.data.person.navn.firstOrNull()) : ''; + + const saksid = journalpost.tilhorendeFagsaksid ? journalpost.tilhorendeFagsaksid : journalpost.tilhorendeSaksid; + const saksvisning = + props.valgtSakstema.temakode === sakstemakodeAlle ? ( + + {props.valgtSakstema.temanavn} / Saksid: {saksid} + + ) : ( + Saksid: {saksid} + ); + + const dokumentVedlegg = journalpost.vedlegg && journalpost.vedlegg.length > 0 && ( + + Dokumentet har {journalpost.vedlegg.length} vedlegg: +
    + {journalpost.vedlegg.map((vedlegg, index) => ( +
  • + +
    • + ))} +
+ + ); + + const tilgangTilHoveddokument = dokumentKanVises(journalpost.hoveddokument, journalpost); + + const hovedDokument = journalpost.hoveddokument; + + return ( +
  • + + {getDokumentIkon(harTilgangTilJournalpost(journalpost))} + + +

    + +

    +
    + {formaterDatoOgAvsender(brukersNavn, journalpost)} +
    +     + {dokumentVedlegg} + + {saksvisning} + + +     +     +
    • + ); +} + +export default JournalpostListeElementV2; diff --git a/src/app/personside/infotabs/saksoversikt/saksdokumenter/JournalPosterV2.tsx b/src/app/personside/infotabs/saksoversikt/saksdokumenter/JournalPosterV2.tsx index a253f8d17d..67a2951725 100644 --- a/src/app/personside/infotabs/saksoversikt/saksdokumenter/JournalPosterV2.tsx +++ b/src/app/personside/infotabs/saksoversikt/saksdokumenter/JournalPosterV2.tsx @@ -12,7 +12,6 @@ import { DokumentAvsenderFilter } from '../../../../../redux/saksoversikt/types' import LenkeNorg from '../utils/LenkeNorg'; import ToggleViktigAaViteKnapp from '../viktigavite/ToggleViktigAaViteKnapp'; import { datoSynkende } from '../../../../../utils/date-utils'; -import JournalpostListeElement from './JournalPostListeElement/JournalpostListeElement'; import { sakerTest } from '../../dyplenkeTest/utils-dyplenker-test'; import { AlertStripeInfo } from 'nav-frontend-alertstriper'; import { useEffect, useRef } from 'react'; @@ -26,6 +25,7 @@ import Panel from 'nav-frontend-paneler'; import { useHentAlleSakstemaFraResourceV2, useSakstemaURLStateV2 } from '../useSakstemaURLState'; import { forkortetTemanavn } from '../utils/saksoversiktUtils'; import { aggregertSakstemaV2 } from '../utils/saksoversiktUtilsV2'; +import JournalpostListeElementV2 from './JournalPostListeElement/JournalpostListeElementV2'; const StyledPanel = styled(Panel)` padding: 0rem; @@ -101,7 +101,7 @@ interface JournalpostGruppeProps { function JournalpostGruppe({ gruppe, harTilgang, valgtSakstema }: JournalpostGruppeProps) { const tittelId = useRef(guid()); const journalposter = gruppe.array.map((journalpost) => ( - *:not(:last-child) { + margin-right: 1rem; + } +`; + +const KnappeSeksjon = styled.section` + width: 100%; + padding: 0 ${pxToRem(15)} ${pxToRem(15)} ${pxToRem(15)}; + display: flex; + flex-direction: row; + justify-content: space-evenly; +`; + +const StyledCheckboksPanelGruppe = styled(CheckboksPanelGruppe)` + label { + border: 0; + border-top: 1px solid #6a6a6a; + border-radius: 0; + + &.inputPanel--checked { + background-color: transparent; + } + + &.inputPanel:not(:last-child) { + margin-bottom: 0; + } + + &.inputPanel:hover:not(.inputPanel--disabled):not(.bekreftCheckboksPanel) { + border: 0; + border-top: 1px solid #6a6a6a; + box-shadow: none; + } + } +`; + +function SakstemaListe() { + const { alleSakstema } = useHentAlleSakstemaFraResourceV2(); + const { setAlleValgte, setIngenValgte, toggleValgtSakstema, valgteSakstemaer } = + useSakstemaURLStateV2(alleSakstema); + const tittelId = useRef(guid()); + + function sakstemaErValgt(sakstema: Sakstema): boolean { + const valgteTemakoder: string[] = valgteSakstemaer.map((sakstema) => sakstema.temakode); + return valgteTemakoder.includes(sakstema.temakode) || valgteTemakoder[0] === sakstemakodeAlle; + } + + const checkbokser = filtrerSakstemaerUtenDataV2(alleSakstema).map((sakstema) => { + return { + label: , + value: sakstema.temakode, + id: sakstema.temakode, + checked: sakstemaErValgt(sakstema) + } as CheckboksPanelProps; + }); + + return ( + + ); +} + +export default SakstemaListe; diff --git a/src/app/personside/infotabs/saksoversikt/utils/saksoversiktUtilsV2.ts b/src/app/personside/infotabs/saksoversikt/utils/saksoversiktUtilsV2.ts index 6930b63d57..bd3172c27c 100644 --- a/src/app/personside/infotabs/saksoversikt/utils/saksoversiktUtilsV2.ts +++ b/src/app/personside/infotabs/saksoversikt/utils/saksoversiktUtilsV2.ts @@ -1,5 +1,5 @@ import { Journalpost } from '../../../../../models/saksoversikt/journalpost'; -import { AggregertSakstemaSoknadsstatus, SakstemaSoknadsstatus } from '../../../../../models/saksoversikt/sakstema'; +import { SakstemaSoknadsstatus, Soknadsstatus } from '../../../../../models/saksoversikt/sakstema'; import { saksdatoSomDate } from '../../../../../models/saksoversikt/fellesSak'; import { formatterDato } from '../../../../../utils/date-utils'; import { filtrerSakstemaerUtenDataV2 } from '../sakstemaliste/SakstemaListeUtils'; @@ -12,7 +12,7 @@ export const sakstemanavnIngen = 'Ingen tema valgt'; export function aggregertSakstemaV2( alleSakstema: SakstemaSoknadsstatus[], valgteSakstema?: SakstemaSoknadsstatus[] -): AggregertSakstemaSoknadsstatus { +): SakstemaSoknadsstatus { const alleSakstemaFiltrert = filtrerSakstemaerUtenDataV2(alleSakstema); const sakstema = valgteSakstema !== undefined ? filtrerSakstemaerUtenDataV2(valgteSakstema) : alleSakstemaFiltrert; const journalposter = aggregerSakstemaGenerisk(sakstema, (sakstema) => sakstema.dokumentMetadata); @@ -24,7 +24,7 @@ export function aggregertSakstemaV2( temanavn: aggregertTemanavnV2(sakstema, erAlleSakstema), temakode: erAlleSakstema ? sakstemakodeAlle : aggregertTemakode(sakstema), harTilgang: true, - soknadsstatuser: sakstema.map((sak) => sak.soknadsstatus), + soknadsstatus: aggregertSoknadsstatus(sakstema), dokumentMetadata: journalposter, tilhorendeSaker: tilhorendeSaker, erGruppert: false, @@ -42,6 +42,35 @@ function aggregertTemakode(valgteSakstema: SakstemaSoknadsstatus[]): string { return nyTemakode !== '' ? nyTemakode : sakstemakodeIngen; } +function aggregertSoknadsstatus(valgteSakstema: SakstemaSoknadsstatus[]): Soknadsstatus { + const res: Soknadsstatus = { + avbrutt: 0, + underBehandling: 0, + ferdigBehandlet: 0 + }; + + for (const sakstema of valgteSakstema) { + const soknadsstatus = sakstema.soknadsstatus; + res.avbrutt += soknadsstatus.avbrutt; + res.ferdigBehandlet += soknadsstatus.ferdigBehandlet; + res.underBehandling += soknadsstatus.underBehandling; + + if (soknadsstatus.sistOppdatert) { + if (!res.sistOppdatert) { + res.sistOppdatert = soknadsstatus.sistOppdatert; + } + const currentDato = new Date(res.sistOppdatert); + const tmpDato = new Date(soknadsstatus.sistOppdatert); + + if (tmpDato.valueOf() > currentDato.valueOf()) { + res.sistOppdatert = tmpDato.toISOString(); + } + } + } + + return res; +} + export function forkortetTemanavnV2(temanavn: string): string { if (temanavn === sakstemanavnAlle || temanavn === sakstemanavnIngen) { return temanavn; diff --git a/src/models/saksoversikt/sakstema.ts b/src/models/saksoversikt/sakstema.ts index 55e36704f6..2a573539f9 100644 --- a/src/models/saksoversikt/sakstema.ts +++ b/src/models/saksoversikt/sakstema.ts @@ -39,7 +39,7 @@ export interface SakstemaSoknadsstatus extends Sakstema { } export interface AggregertSakstemaSoknadsstatus extends Sakstema { - soknadsstatuser: Soknadsstatus[]; + soknadsstatus: Soknadsstatus; } export interface Soknadsstatus {