diff --git a/src/AvtaleSide/AvtaleStatus/HvemHarGodkjentModal.less b/src/AvtaleSide/AvtaleStatus/HvemHarGodkjentModal.less new file mode 100644 index 000000000..286539c4e --- /dev/null +++ b/src/AvtaleSide/AvtaleStatus/HvemHarGodkjentModal.less @@ -0,0 +1,17 @@ +@import (reference) '../../tiltak_variabler.less'; + +.godkjenningstatus { + padding: 1rem; + border: 2px solid @navBlaLighten60; + + &__rader { + > div:not(:last-child) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid #e7e9e9; + } + > div:last-child { + padding-top: 0.5rem; + } + } +} diff --git a/src/AvtaleSide/AvtaleStatus/HvemHarGodkjentModal.tsx b/src/AvtaleSide/AvtaleStatus/HvemHarGodkjentModal.tsx new file mode 100644 index 000000000..1c82a0718 --- /dev/null +++ b/src/AvtaleSide/AvtaleStatus/HvemHarGodkjentModal.tsx @@ -0,0 +1,102 @@ +import CheckIkon from '@/assets/ikoner/check.svg?react'; +import VarselIkon from '@/assets/ikoner/varsel.svg?react'; +import { AvtaleContext } from '@/AvtaleProvider'; +import { Feature, FeatureToggleContext } from '@/FeatureToggleProvider'; +import { TiltaksType } from '@/types/avtale'; +import { formatterDato } from '@/utils/datoUtils'; +import { BodyLong, BodyShort, Button, Label, Modal } from '@navikt/ds-react'; +import { FunctionComponent, useContext, useState } from 'react'; +import './HvemHarGodkjentModal.less'; + +type Props = {}; + +const HvemHarGodkjentModal: FunctionComponent = (props) => { + const [modalOpen, setModalOpen] = useState(false); + const avtaleContext = useContext(AvtaleContext); + const featureToggles = useContext(FeatureToggleContext); + + if (!featureToggles[Feature.VisHvemHarGodkjent]) return null; + + return ( +
+ + + setModalOpen(false)} + header={{ heading: 'Hvem har godkjent?' }} + > + + +
+
+ + {avtaleContext.avtale.tiltakstype === 'MENTOR' && ( + + )} + + + +
+
+
+
+ + + +
+
+ ); +}; + +type GodkjenningRadProps = { + godkjentAvtale?: string; + navn: string; + tiltakstype?: TiltaksType; +}; + +const GodkjenningRad: React.FunctionComponent = (props: GodkjenningRadProps) => { + const Ikon = props.godkjentAvtale ? CheckIkon : VarselIkon; + const harGodkjentTekst = props.tiltakstype === 'MENTOR' ? 'Signert' : 'Godkjent'; + const måGodkjenneTekst = props.tiltakstype === 'MENTOR' ? 'Må signere' : 'Må godkjenne'; + + const godkjentStatus: string = props.godkjentAvtale + ? harGodkjentTekst + ' ' + formatterDato(props.godkjentAvtale) + : måGodkjenneTekst; + + const navn = props.navn; + + return ( +
+ {navn} +
+ + +
+
+ ); +}; + +export default HvemHarGodkjentModal; diff --git a/src/AvtaleSide/AvtaleStatus/StatusPanel.tsx b/src/AvtaleSide/AvtaleStatus/StatusPanel.tsx index 552ccdec6..af781e5c6 100644 --- a/src/AvtaleSide/AvtaleStatus/StatusPanel.tsx +++ b/src/AvtaleSide/AvtaleStatus/StatusPanel.tsx @@ -1,9 +1,10 @@ -import React from 'react'; import Innholdsboks from '@/komponenter/Innholdsboks/Innholdsboks'; import VerticalSpacer from '@/komponenter/layout/VerticalSpacer'; +import BEMHelper from '@/utils/bem'; import { Heading } from '@navikt/ds-react'; +import React from 'react'; +import HvemHarGodkjentModal from './HvemHarGodkjentModal'; import './StatusPanel.less'; -import BEMHelper from '@/utils/bem'; const cls = BEMHelper('statusPanel'); @@ -19,6 +20,7 @@ const StatusPanel: React.FunctionComponent<{ {body} + ); diff --git a/src/FeatureToggleProvider.tsx b/src/FeatureToggleProvider.tsx index c9de87f8e..7fdd02b28 100644 --- a/src/FeatureToggleProvider.tsx +++ b/src/FeatureToggleProvider.tsx @@ -1,9 +1,10 @@ -import React, { createContext, useEffect, useState } from 'react'; +import { createContext, useEffect, useState } from 'react'; import { hentFeatureToggles } from './services/rest-service'; export enum Feature { VisNedetidBanner = 'visNedetidBanner', VtaoTiltakToggle = 'vtaoTiltakToggle', + VisHvemHarGodkjent = 'visHvemHarGodkjent', } export const alleFeatures = Object.values(Feature);