From 753a8942fbfd97b67d5da44c2ccda733eaaf7c2f Mon Sep 17 00:00:00 2001 From: Viktor Date: Fri, 13 Oct 2023 09:39:55 +0200 Subject: [PATCH 1/5] =?UTF-8?q?skal=20st=C3=B8tte=20visning=20av=20dokumen?= =?UTF-8?q?tpaneler=20i=20journlf=C3=B8ringsbildet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Felles/EndreDokumentTittel.tsx" | 4 +- .../Journalf\303\270ring/Felles/utils.ts" | 92 +++++++++--------- .../Standard/DokumentPanel.tsx" | 93 +++++++++++++++++++ .../Standard/DokumentPanelHeader.tsx" | 71 ++++++++++++++ .../Standard/Dokumenter.tsx" | 39 ++++++++ .../Standard/Journalf\303\270ringAppNy.tsx" | 11 +++ 6 files changed, 259 insertions(+), 51 deletions(-) create mode 100644 "src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanel.tsx" create mode 100644 "src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanelHeader.tsx" create mode 100644 "src/frontend/Komponenter/Journalf\303\270ring/Standard/Dokumenter.tsx" diff --git "a/src/frontend/Komponenter/Journalf\303\270ring/Felles/EndreDokumentTittel.tsx" "b/src/frontend/Komponenter/Journalf\303\270ring/Felles/EndreDokumentTittel.tsx" index c8b39dcfe..d1290e215 100644 --- "a/src/frontend/Komponenter/Journalf\303\270ring/Felles/EndreDokumentTittel.tsx" +++ "b/src/frontend/Komponenter/Journalf\303\270ring/Felles/EndreDokumentTittel.tsx" @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import CreatableSelect from 'react-select/creatable'; -import { dokumentTitler } from './utils'; +import { dokumentTitlerMultiSelect } from './utils'; import { CSSObjectWithLabel, StylesConfig } from 'react-select'; import { Button } from '@navikt/ds-react'; import { ABlue500, ABlue800, ABorderStrong } from '@navikt/ds-tokens/dist/tokens'; @@ -58,7 +58,7 @@ const EndreDokumentTittel: React.FC<{ `Opprett "${val}"`} onChange={(value: unknown) => { settNyttDokumentNavn((value as OptionType).value); diff --git "a/src/frontend/Komponenter/Journalf\303\270ring/Felles/utils.ts" "b/src/frontend/Komponenter/Journalf\303\270ring/Felles/utils.ts" index dc4af5d5b..131c41d63 100644 --- "a/src/frontend/Komponenter/Journalf\303\270ring/Felles/utils.ts" +++ "b/src/frontend/Komponenter/Journalf\303\270ring/Felles/utils.ts" @@ -4,6 +4,7 @@ import { Behandling, BehandlingResultat } from '../../../App/typer/fagsak'; import { Behandlingstype } from '../../../App/typer/behandlingstype'; import { BehandlingRequest } from '../../../App/hooks/useJournalføringState'; import { BehandlingKlageRequest } from '../../../App/hooks/useJournalføringKlageState'; +import { ISelectOption } from '@navikt/familie-form-elements'; export const JOURNALPOST_QUERY_STRING = 'journalpostId'; export const OPPGAVEID_QUERY_STRING = 'oppgaveId'; @@ -37,55 +38,6 @@ export const utledKolonneTittel = ( return `${prefix}${type}${stønadstype}`; }; -export const dokumentTitler: { value: string; label: string }[] = [ - { value: 'Uttalelse tilbakekreving', label: 'Uttalelse tilbakekreving' }, - { value: 'Uttalelse', label: 'Uttalelse' }, - { - value: 'Tilmelding til NAV som reell arbeidssøker ved krav om overgangsstønad', - label: "Tilmelding til NAV som reell arbeidssøker ved krav om overgangsstønad'", - }, - { - value: 'Søknad om stønad til skolepenger - enslig mor eller far', - label: 'Søknad om stønad til skolepenger - enslig mor eller far', - }, - { - value: 'Søknad om stønad til barnetilsyn - enslig mor eller far i arbeid', - label: 'Søknad om stønad til skolepenger - enslig mor eller far', - }, - { - value: 'Søknad om overgangsstønad - enslig mor eller far', - label: 'Søknad om overgangsstønad - enslig mor eller far', - }, - { value: 'Stevning', label: 'Stevning' }, - { value: 'Skatteopplysninger', label: 'Skatteopplysninger' }, - { value: 'Rettsavgjørelse', label: 'Rettsavgjørelse' }, - { value: 'Refusjonskrav/faktura', label: 'Refusjonskrav/faktura' }, - { value: 'Oppholdstillatelse', label: 'Oppholdstillatelse' }, - { value: 'Merknader i ankesak', label: 'Merknader i ankesak' }, - { value: 'Medisinsk dokumentasjon', label: 'Medisinsk dokumentasjon' }, - { value: 'Krav om gjenopptak av ankesak', label: 'Krav om gjenopptak av ankesak' }, - { value: 'Klage/Anke', label: 'Klage/Anke' }, - { value: 'Klage på tilbakekreving', label: 'Klage på tilbakekreving' }, - { value: 'Inntektsopplysninger', label: 'Inntektsopplysninger' }, - { value: 'Grunnblankett', label: 'Grunnblankett' }, - { value: 'Fødselsmelding/Fødselsattest', label: 'Fødselsmelding/Fødselsattest' }, - { value: 'Forespørsel', label: 'Forespørsel' }, - { value: 'EØS-dokument', label: 'EØS-dokument' }, - { value: 'Erklæring samlivsbrudd', label: 'Erklæring samlivsbrudd' }, - { - value: 'Enslig mor eller far som er arbeidssøker', - label: 'nslig mor eller far som er arbeidssøker', - }, - { value: 'Endring i sivilstand', label: 'Endring i sivilstand' }, - { value: 'Bekreftelse på utdanning / utgifter', label: 'Bekreftelse på utdanning / utgifter' }, - { value: 'Bekreftelse på tilsynsutgifter', label: 'Bekreftelse på tilsynsutgifter' }, - { value: 'Bekreftelse på termindato', label: 'Bekreftelse på termindato' }, - { value: 'Bekreftelse fra barnevernet', label: 'Bekreftelse fra barnevernet' }, - { value: 'Avtale / avgjørelse om samvær', label: 'Avtale / avgjørelse om samvær' }, - { value: 'Arbeidsforhold', label: 'Arbeidsforhold' }, - { value: 'Anke på tilbakekreving', label: 'Anke på tilbakekreving' }, -]; - export const utledRiktigBehandlingstype = ( tidligereBehandlinger: Behandling[] ): Behandlingstype => { @@ -104,3 +56,45 @@ export const harValgtNyBehandling = (behandling: BehandlingRequest | undefined): export const harValgtNyKlageBehandling = ( behandling: BehandlingKlageRequest | undefined ): boolean => behandling !== undefined && behandling.behandlingId === undefined; + +const dokumentTitler: string[] = [ + 'Anke på tilbakekreving', + 'Arbeidsforhold', + 'Avtale / Avgjørelse om samvær', + 'Bekreftelse fra barnevernet', + 'Bekreftelse på termindato', + 'Bekreftelse på tilsynsutgifter', + 'Bekreftelse på utdanning / utgifter', + 'Endring i sivilstand', + 'Enslig mor eller far som er arbeidssøker', + 'Eklæring om samlivsbrudd', + 'EØS dokument', + 'Forespørsel', + 'Fødselsmelding/Fødselsattest', + 'Grunnblankett', + 'Inntektsopplysninger', + 'Klage på tilbakekreving', + 'Klage/Anke', + 'Krav om gjenopptak av ankesak', + 'Medisinsk dokumentasjon', + 'Merknader i ankesak', + 'Oppholdstillatelse', + 'Refusjonskrav/faktura', + 'Rettsavgjørelse', + 'Skatteopplysninger', + 'Stevning', + 'Søknad om overgangsstønad', + 'Søknad om skolepenger', + 'Søknad om barnetilsyn', + 'Tilmelding til NAV som reell arbeidssøker ved krav om overgangsstønad', + 'Uttalelse', + 'Uttalelse tilbakekreving', +]; + +export const dokumentTitlerMultiSelect: ISelectOption[] = dokumentTitler.map((tittel) => { + return { value: tittel, label: tittel }; +}); + +export const mapDokumentTittel = (tittel: string) => { + return { value: tittel, label: tittel }; +}; diff --git "a/src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanel.tsx" "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanel.tsx" new file mode 100644 index 000000000..65be06f25 --- /dev/null +++ "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanel.tsx" @@ -0,0 +1,93 @@ +import React, { Dispatch, SetStateAction, useState } from 'react'; +import { ExpansionCard } from '@navikt/ds-react'; +import styled from 'styled-components'; +import { DokumentInfo, IJournalpost } from '../../../App/typer/journalføring'; +import { DokumentPanelHeader } from './DokumentPanelHeader'; +import { FamilieReactSelect, ISelectOption } from '@navikt/familie-form-elements'; +import { dokumentTitlerMultiSelect, mapDokumentTittel } from '../Felles/utils'; + +const ExpansionCardHeader = styled(ExpansionCard.Header)` + padding-bottom: 0.35rem; +`; + +const ExpansionCardContent = styled.div` + display: flex; + flex-direction: column; + gap: 2rem; + padding-bottom: 1rem; +`; + +interface Props { + journalpost: IJournalpost; + dokument: DokumentInfo; + hentDokument: (dokumentInfoId: string) => void; + settDokumentTitler: Dispatch | undefined>>; +} + +const MultiSelect = styled(FamilieReactSelect)` + margin-bottom: -1rem; +`; + +const utledDokumentTittel = ( + gammelTittel: string | undefined, + nyTittel: string | undefined +): string => nyTittel || gammelTittel || 'ukjent'; + +const DokumentPanel: React.FC = ({ dokument, journalpost }) => { + const [nyDokumentTittel, settNyDokumentTittel] = useState(undefined); + const [nyAnnetInnholdsliste, settNyAnnetInnholdsliste] = useState([]); + + const erDokumentPanelValgt = dokument.dokumentInfoId === dokument.dokumentInfoId; + const defaultTittelValue = dokument.tittel ? mapDokumentTittel(dokument.tittel) : undefined; + const dokumentTittel = utledDokumentTittel(dokument.tittel, nyDokumentTittel); + + return ( + + + + + + + { + settNyDokumentTittel( + value ? (value as ISelectOption).value : undefined + ); + }} + /> + { + settNyAnnetInnholdsliste( + (values as ISelectOption[]).map((value) => value.value) + ); + }} + /> + + + + ); +}; + +export default DokumentPanel; diff --git "a/src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanelHeader.tsx" "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanelHeader.tsx" new file mode 100644 index 000000000..109bafba9 --- /dev/null +++ "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanelHeader.tsx" @@ -0,0 +1,71 @@ +import React from 'react'; +import styled from 'styled-components'; +import { BodyShort, Button, Label } from '@navikt/ds-react'; +import { ExternalLinkIcon, FileTextFillIcon, FileTextIcon } from '@navikt/aksel-icons'; +import { DokumentInfo } from '../../../App/typer/journalføring'; +import { ABlue500 } from '@navikt/ds-tokens/dist/tokens'; +import { åpneFilIEgenTab } from '../../../App/utils/utils'; + +const Container = styled.div` + display: flex; + gap: 1rem; +`; + +const DokumentTitler = styled.div` + display: flex; + flex-direction: column; + gap: 0.5rem; + justify-content: center; +`; + +const Tittel = styled.div` + display: flex; + align-items: center; +`; + +const IkonContainer = styled.div` + color: ${ABlue500}; +`; + +interface Props { + dokument: DokumentInfo; + dokumentTittel: string; + journalpostId: string; + valgt: boolean; +} + +export const DokumentPanelHeader: React.FC = ({ + dokument, + dokumentTittel, + journalpostId, + valgt, +}) => { + return ( + + + {valgt ? ( + + ) : ( + + )} + + + + +