Skip to content

Commit

Permalink
IS-2999-3: Be om oppfolgingsplan design finpuss
Browse files Browse the repository at this point in the history
  • Loading branch information
vetlesolgaard committed Jan 24, 2025
1 parent 1c38630 commit d16de9d
Show file tree
Hide file tree
Showing 4 changed files with 230 additions and 201 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from "react";
import Side from "../../Side";
import OppfolgingsplanerOversikt from "../oppfolgingsplaner/OppfolgingsplanerOversikt";
import IngenPlaner from "../oppfolgingsplaner/IngenPlaner";
import { activeOppfolgingsplaner } from "@/utils/oppfolgingsplanerUtils";
import SideLaster from "../../../components/SideLaster";
import { useValgtPersonident } from "@/hooks/useValgtBruker";
Expand Down Expand Up @@ -33,31 +32,19 @@ export const OppfoelgingsPlanerOversiktContainer = () => {
const inaktivePlaner = oppfolgingsplaner.filter(
(plan) => !aktivePlaner.includes(plan)
);
const hasNoPlans =
aktivePlaner.length === 0 &&
inaktivePlaner.length === 0 &&
oppfolgingsplanerLPS.length === 0;

return (
<Side
tittel="Oppfølgingsplaner"
aktivtMenypunkt={Menypunkter.OPPFOELGINGSPLANER}
>
<SideLaster henter={henter} hentingFeilet={hentingFeilet}>
{(() => {
if (hasNoPlans) {
return <IngenPlaner />;
} else {
return (
<OppfolgingsplanerOversikt
aktivePlaner={aktivePlaner}
inaktivePlaner={inaktivePlaner}
oppfolgingsplanerLPS={oppfolgingsplanerLPS}
fnr={fnr}
/>
);
}
})()}
<OppfolgingsplanerOversikt
aktivePlaner={aktivePlaner}
inaktivePlaner={inaktivePlaner}
oppfolgingsplanerLPS={oppfolgingsplanerLPS}
fnr={fnr}
/>
</SideLaster>
</Side>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
import { Alert, Heading } from "@navikt/ds-react";
import BeOmOppfolgingsplan from "@/sider/oppfolgingsplan/oppfolgingsplaner/BeOmOppfolgingsplan";
import OppfolgingsplanerOversiktLPS from "@/sider/oppfolgingsplan/lps/OppfolgingsplanerOversiktLPS";
import OppfolgingsplanLink from "@/sider/oppfolgingsplan/oppfolgingsplaner/OppfolgingsplanLink";
import React from "react";
import { erIdag, tilLesbarDatoMedArUtenManedNavn } from "@/utils/datoUtils";
import dayjs from "dayjs";
import { useLedereQuery } from "@/data/leder/ledereQueryHooks";
import {
useGetOppfolgingsplanForesporselQuery,
usePostOppfolgingsplanForesporsel,
} from "@/data/oppfolgingsplan/oppfolgingsplanForesporselHooks";
import { useOppfolgingstilfellePersonQuery } from "@/data/oppfolgingstilfelle/person/oppfolgingstilfellePersonQueryHooks";
import { useFeatureToggles } from "@/data/unleash/unleashQueryHooks";
import { NarmesteLederRelasjonDTO } from "@/data/leder/ledereTypes";
import { OppfolgingstilfelleDTO } from "@/data/oppfolgingstilfelle/person/types/OppfolgingstilfellePersonDTO";
import { OppfolgingsplanLPSMedPersonoppgave } from "@/data/oppfolgingsplan/types/OppfolgingsplanLPS";
import { OppfolgingsplanDTO } from "@/data/oppfolgingsplan/types/OppfolgingsplanDTO";

const texts = {
aktiveOppfolgingsplaner: "Aktive oppfølgingsplaner",
ingenAktiveOppfolgingsplaner: "Det er ingen aktive oppfølgingsplaner",
foresporselSendt: "Forespørsel om oppfølgingsplan ble sendt",
aktivForesporsel:
"Obs! Det ble bedt om oppfølgingsplan fra denne arbeidsgiveren",
};

function activeNarmesteLederForCurrentOppfolgingstilfelle(
ledere: NarmesteLederRelasjonDTO[],
oppfolgingsTilfelle: OppfolgingstilfelleDTO
): NarmesteLederRelasjonDTO[] {
return ledere.filter(
(leder) =>
leder.status === "INNMELDT_AKTIV" &&
oppfolgingsTilfelle.virksomhetsnummerList.includes(
leder.virksomhetsnummer
)
);
}

interface Props {
aktivePlaner: OppfolgingsplanDTO[];
oppfolgingsplanerLPSMedPersonoppgave: OppfolgingsplanLPSMedPersonoppgave[];
}

export default function AktiveOppfolgingsplaner({
aktivePlaner,
oppfolgingsplanerLPSMedPersonoppgave,
}: Props) {
const { toggles } = useFeatureToggles();
const { currentLedere } = useLedereQuery();
const getOppfolgingsplanForesporsel = useGetOppfolgingsplanForesporselQuery();
const postOppfolgingsplanForesporsel = usePostOppfolgingsplanForesporsel();
const { latestOppfolgingstilfelle, hasActiveOppfolgingstilfelle } =
useOppfolgingstilfellePersonQuery();
const currentOppfolgingstilfelle = hasActiveOppfolgingstilfelle
? latestOppfolgingstilfelle
: undefined;

const oppfolgingsplanerLPSUnprocessed = oppfolgingsplanerLPSMedPersonoppgave
.filter((oppfolgingsplanLPS) => {
if (oppfolgingsplanLPS.personoppgave) {
if (oppfolgingsplanLPS.personoppgave.behandletTidspunkt) {
return (
Date.now() <
dayjs(oppfolgingsplanLPS.personoppgave.behandletTidspunkt)
.add(1, "days")
.toDate()
.getTime()
);
}
return !oppfolgingsplanLPS.personoppgave.behandletTidspunkt;
}
return erIdag(oppfolgingsplanLPS.opprettet);
})
.sort((a, b) => {
return new Date(b.opprettet).getTime() - new Date(a.opprettet).getTime();
});

const hasActivePlan =
aktivePlaner.length !== 0 || oppfolgingsplanerLPSUnprocessed.length !== 0;

const activeNarmesteLedere = !!currentOppfolgingstilfelle
? activeNarmesteLederForCurrentOppfolgingstilfelle(
currentLedere,
currentOppfolgingstilfelle
)
: [];
const activeNarmesteLederIfSingle =
activeNarmesteLedere.length === 1 ? activeNarmesteLedere[0] : undefined;
const isBeOmOppfolgingsplanVisible =
toggles.isBeOmOppfolgingsplanEnabled &&
!hasActivePlan &&
!!currentOppfolgingstilfelle &&
!!activeNarmesteLederIfSingle &&
!postOppfolgingsplanForesporsel.isSuccess;

const lastForesporselCreatedAt =
getOppfolgingsplanForesporsel.data?.[0]?.createdAt;

const isAktivForesporsel =
!!lastForesporselCreatedAt &&
!!currentOppfolgingstilfelle &&
!postOppfolgingsplanForesporsel.isSuccess
? currentOppfolgingstilfelle.start <= lastForesporselCreatedAt &&
lastForesporselCreatedAt <= currentOppfolgingstilfelle.end
: false;
const aktivForesporselTekst = `${
texts.aktivForesporsel
} ${tilLesbarDatoMedArUtenManedNavn(lastForesporselCreatedAt)}`;

return (
<div className="mb-8">
<Heading spacing level="2" size="medium">
{texts.aktiveOppfolgingsplaner}
</Heading>
{!hasActivePlan &&
!postOppfolgingsplanForesporsel.isSuccess &&
!isAktivForesporsel && (
<Alert variant="info" className="mb-4">
<p>{texts.ingenAktiveOppfolgingsplaner}</p>
</Alert>
)}
{isAktivForesporsel && (
<Alert variant="warning" className="mb-2">
{aktivForesporselTekst}
</Alert>
)}
{postOppfolgingsplanForesporsel.isSuccess && (
<Alert variant="success" className="mb-4">
{texts.foresporselSendt}
</Alert>
)}
{isBeOmOppfolgingsplanVisible && (
<BeOmOppfolgingsplan
aktivNarmesteLeder={activeNarmesteLederIfSingle}
postOppfolgingsplanForesporsel={postOppfolgingsplanForesporsel}
/>
)}
{oppfolgingsplanerLPSUnprocessed.map((planLPS, index) => {
return (
<OppfolgingsplanerOversiktLPS
key={index}
oppfolgingsplanLPSBistandsbehov={planLPS}
/>
);
})}
{aktivePlaner.map((dialog, index) => {
return <OppfolgingsplanLink key={index} dialog={dialog} />;
})}
</div>
);
}
93 changes: 30 additions & 63 deletions src/sider/oppfolgingsplan/oppfolgingsplaner/BeOmOppfolgingsplan.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,18 @@
import {
Alert,
BodyLong,
BodyShort,
Box,
Button,
Heading,
} from "@navikt/ds-react";
import { BodyLong, BodyShort, Box, Button, Heading } from "@navikt/ds-react";
import React from "react";
import { useValgtPersonident } from "@/hooks/useValgtBruker";
import { NarmesteLederRelasjonDTO } from "@/data/leder/ledereTypes";
import { OppfolgingstilfelleDTO } from "@/data/oppfolgingstilfelle/person/types/OppfolgingstilfellePersonDTO";
import { tilLesbarDatoMedArUtenManedNavn } from "@/utils/datoUtils";
import * as Amplitude from "@/utils/amplitude";
import { EventType } from "@/utils/amplitude";
import {
NewOppfolgingsplanForesporselDTO,
useGetOppfolgingsplanForesporselQuery,
usePostOppfolgingsplanForesporsel,
} from "@/data/oppfolgingsplan/oppfolgingsplanForesporselHooks";
import { NewOppfolgingsplanForesporselDTO } from "@/data/oppfolgingsplan/oppfolgingsplanForesporselHooks";
import { UseMutationResult } from "@tanstack/react-query";

const texts = {
header: "Be om oppfølgingsplan fra arbeidsgiver",
description:
"Her kan du be om oppfølgingsplan fra arbeidsgiver eller purre om det mangler.",
virksomhet: "Virksomhet:",
narmesteLeder: "Nærmeste leder:",
aktivForesporsel:
"Obs! Det ble bedt om oppfølgingsplan fra denne arbeidsgiveren",
button: "Be om oppfølgingsplan",
};

Expand All @@ -42,17 +28,19 @@ function logOppfolgingsplanForesporselEvent() {

interface Props {
aktivNarmesteLeder: NarmesteLederRelasjonDTO;
currentOppfolgingstilfelle: OppfolgingstilfelleDTO;
postOppfolgingsplanForesporsel: UseMutationResult<
NewOppfolgingsplanForesporselDTO,
Error,
NewOppfolgingsplanForesporselDTO,
unknown
>;
}

export default function BeOmOppfolgingsplan({
aktivNarmesteLeder,
currentOppfolgingstilfelle,
postOppfolgingsplanForesporsel,
}: Props) {
const personident = useValgtPersonident();
const getOppfolgingsplanForesporsel = useGetOppfolgingsplanForesporselQuery();

const postOppfolgingsplanForesporsel = usePostOppfolgingsplanForesporsel();

function onClick() {
const foresporsel: NewOppfolgingsplanForesporselDTO = {
Expand All @@ -67,47 +55,26 @@ export default function BeOmOppfolgingsplan({
});
}

const lastForesporselCreatedAt =
getOppfolgingsplanForesporsel.data?.[0]?.createdAt;

const isAktivForesporsel = !!lastForesporselCreatedAt
? currentOppfolgingstilfelle.start <= lastForesporselCreatedAt &&
lastForesporselCreatedAt <= currentOppfolgingstilfelle.end
: false;
const aktivForesporselTekst = `${
texts.aktivForesporsel
} ${tilLesbarDatoMedArUtenManedNavn(lastForesporselCreatedAt)}`;

return (
<>
{postOppfolgingsplanForesporsel.isSuccess && (
<Alert variant="success" className="mb-2" size="small">
Forespørsel om oppfølgingsplan ble sendt
</Alert>
)}
<Box background="surface-default" className="mb-4 flex flex-col p-4">
<Heading size="medium">{texts.header}</Heading>
<BodyLong className="mb-2">{texts.description}</BodyLong>
<BodyShort>
{texts.virksomhet} {aktivNarmesteLeder.virksomhetsnavn}
</BodyShort>
<BodyShort className="mb-2">
{texts.narmesteLeder} {aktivNarmesteLeder.narmesteLederNavn}
</BodyShort>
{isAktivForesporsel && !!lastForesporselCreatedAt && (
<Alert inline variant="warning" className="mb-2">
{aktivForesporselTekst}
</Alert>
)}
<Button
className="w-fit mb-2"
size="small"
onClick={onClick}
loading={postOppfolgingsplanForesporsel.isPending}
>
{texts.button}
</Button>
</Box>
</>
<Box background="surface-default" className="mb-4 flex flex-col p-4">
<Heading size="small" level="3">
{texts.header}
</Heading>
<BodyLong className="mb-2">{texts.description}</BodyLong>
<BodyShort>
{texts.virksomhet} {aktivNarmesteLeder.virksomhetsnavn}
</BodyShort>
<BodyShort className="mb-2">
{texts.narmesteLeder} {aktivNarmesteLeder.narmesteLederNavn}
</BodyShort>
<Button
className="w-fit mb-2"
size="small"
onClick={onClick}
loading={postOppfolgingsplanForesporsel.isPending}
>
{texts.button}
</Button>
</Box>
);
}
Loading

0 comments on commit d16de9d

Please sign in to comment.