IS-2649: Show content of oppfolgingsoppgave in oversikt

navikt · Nov 7, 2024 · ec3b1f5 · ec3b1f5
1 parent 93f3981
commit ec3b1f5
Show file tree

Hide file tree

Showing 12 changed files with 192 additions and 93 deletions.
diff --git a/src/api/types/personoversiktTypes.ts b/src/api/types/personoversiktTypes.ts
@@ -107,3 +107,32 @@ export enum Oppfolgingsgrunn {
   VURDER_ANNEN_YTELSE = 'VURDER_ANNEN_YTELSE',
   ANNET = 'ANNET',
 }
+
+export function oppfolgingsgrunnToString(
+  oppfolgingsgrunn: Oppfolgingsgrunn
+): string {
+  switch (oppfolgingsgrunn) {
+    case Oppfolgingsgrunn.TA_KONTAKT_SYKEMELDT:
+      return 'Ta kontakt med den sykmeldte';
+    case Oppfolgingsgrunn.TA_KONTAKT_ARBEIDSGIVER:
+      return 'Ta kontakt med arbeidsgiver';
+    case Oppfolgingsgrunn.TA_KONTAKT_BEHANDLER:
+      return 'Ta kontakt med behandler';
+    case Oppfolgingsgrunn.VURDER_DIALOGMOTE_SENERE:
+      return 'Vurder behov for dialogmøte';
+    case Oppfolgingsgrunn.FOLG_OPP_ETTER_NESTE_SYKMELDING:
+      return 'Følg opp etter neste sykmelding';
+    case Oppfolgingsgrunn.VURDER_TILTAK_BEHOV:
+      return 'Vurder behov for tiltak';
+    case Oppfolgingsgrunn.VURDER_ARBEIDSUFORHET:
+      return 'Vurder §8-4 - Arbeidsuførhet';
+    case Oppfolgingsgrunn.FRISKMELDING_TIL_ARBEIDSFORMIDLING:
+      return 'Vurder §8-5 - Friskmelding til arbeidsformidling';
+    case Oppfolgingsgrunn.VURDER_14A:
+      return 'Vurder §14a';
+    case Oppfolgingsgrunn.VURDER_ANNEN_YTELSE:
+      return 'Vurder annen ytelse';
+    case Oppfolgingsgrunn.ANNET:
+      return 'Annet';
+  }
+}
diff --git a/src/components/FristColumn.tsx → src/components/FristDataCell.tsx b/src/components/FristColumn.tsx → src/components/FristDataCell.tsx
@@ -5,12 +5,16 @@ import {
   FileTextIcon,
   HourglassTopFilledIcon,
 } from '@navikt/aksel-icons';
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useState } from 'react';
 import {
   AktivitetskravStatus,
-  Oppfolgingsgrunn,
+  oppfolgingsgrunnToString,
 } from '@/api/types/personoversiktTypes';
-import { Tooltip } from '@navikt/ds-react';
+import { Button, Table, Tooltip } from '@navikt/ds-react';
+import OppfolgingsoppgaveModal from '@/components/OppfolgingsoppgaveModal';
+import * as Amplitude from '@/utils/amplitude';
+import { useTabType } from '@/context/tab/TabTypeContext';
+import { OverviewTabType } from '@/konstanter';
 
 const texts = {
   tooltipAvventer: 'Avventer til',
@@ -21,8 +25,14 @@ const texts = {
   aktivitetskravvarselFrist: 'Aktivitetskrav: Svarfrist forhåndsvarsel',
 };
 
-interface FristColumnProps {
-  personData: PersonData;
+function logOppfolgingsOppgaveModalOpenEvent() {
+  Amplitude.logEvent({
+    type: Amplitude.EventType.ButtonClick,
+    data: {
+      url: window.location.href,
+      tekst: 'Åpnet oppfølgingsoppgave modal',
+    },
+  });
 }
 
 type Frist = {
@@ -31,49 +41,21 @@ type Frist = {
   tooltip: string;
 };
 
-const byFristAsc = (fristA: Frist, fristB: Frist) => {
+function byFristAsc(fristA: Frist, fristB: Frist) {
   return fristA.date > fristB.date ? 1 : -1;
-};
-
-const oppfolgingsgrunnTekster = (
-  oppfolgingsgrunn: Oppfolgingsgrunn
-): string => {
-  switch (oppfolgingsgrunn) {
-    case Oppfolgingsgrunn.TA_KONTAKT_SYKEMELDT:
-      return 'Ta kontakt med den sykmeldte';
-    case Oppfolgingsgrunn.TA_KONTAKT_ARBEIDSGIVER:
-      return 'Ta kontakt med arbeidsgiver';
-    case Oppfolgingsgrunn.TA_KONTAKT_BEHANDLER:
-      return 'Ta kontakt med behandler';
-    case Oppfolgingsgrunn.VURDER_DIALOGMOTE_SENERE:
-      return 'Vurder behov for dialogmøte';
-    case Oppfolgingsgrunn.FOLG_OPP_ETTER_NESTE_SYKMELDING:
-      return 'Følg opp etter neste sykmelding';
-    case Oppfolgingsgrunn.VURDER_TILTAK_BEHOV:
-      return 'Vurder behov for tiltak';
-    case Oppfolgingsgrunn.VURDER_ARBEIDSUFORHET:
-      return 'Vurder §8-4 - Arbeidsuførhet';
-    case Oppfolgingsgrunn.FRISKMELDING_TIL_ARBEIDSFORMIDLING:
-      return 'Vurder §8-5 - Friskmelding til arbeidsformidling';
-    case Oppfolgingsgrunn.VURDER_14A:
-      return 'Vurder §14a';
-    case Oppfolgingsgrunn.VURDER_ANNEN_YTELSE:
-      return 'Vurder annen ytelse';
-    case Oppfolgingsgrunn.ANNET:
-      return 'Annet';
-    default:
-      return 'Ukjent oppfølgingsgrunn';
-  }
-};
+}
 
-export const FristColumn = ({ personData }: FristColumnProps) => {
-  const {
+function fristerInfo(
+  {
     oppfolgingsoppgave,
     friskmeldingTilArbeidsformidlingFom,
     arbeidsuforhetvurdering,
     aktivitetskravvurdering,
     manglendeMedvirkning,
-  } = personData;
+  }: PersonData,
+  setIsModalOpen: (open: boolean) => void,
+  selectedTab: OverviewTabType
+): Frist[] {
   const frister: Frist[] = [];
   const aktivitetskravStatus = aktivitetskravvurdering?.status;
   const aktivitetskravVurderingFrist =
@@ -108,9 +90,22 @@ export const FristColumn = ({ personData }: FristColumnProps) => {
   }
   if (oppfolgingsoppgave?.frist) {
     frister.push({
-      icon: () => <FileTextIcon aria-hidden fontSize="1.5rem" />,
+      icon: () =>
+        selectedTab === OverviewTabType.MY_OVERVIEW ? (
+          <Button
+            size="xsmall"
+            icon={<FileTextIcon aria-hidden fontSize="1.5rem" />}
+            className="mr-1"
+            onClick={() => {
+              logOppfolgingsOppgaveModalOpenEvent();
+              setIsModalOpen(true);
+            }}
+          />
+        ) : (
+          <FileTextIcon aria-hidden fontSize="1.5rem" />
+        ),
       date: oppfolgingsoppgave.frist,
-      tooltip: `${oppfolgingsgrunnTekster(
+      tooltip: `${oppfolgingsgrunnToString(
         oppfolgingsoppgave.oppfolgingsgrunn
       )}`,
     });
@@ -139,9 +134,20 @@ export const FristColumn = ({ personData }: FristColumnProps) => {
       tooltip: texts.manglendeMedvirkningVarselFrist,
     });
   }
+  return frister;
+}
+
+interface Props {
+  personData: PersonData;
+}
+
+export function FristDataCell({ personData }: Props) {
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const { selectedTab } = useTabType();
+  const frister: Frist[] = fristerInfo(personData, setIsModalOpen, selectedTab);
 
   return (
-    <>
+    <Table.DataCell textSize="small">
       {frister.sort(byFristAsc).map(({ date, icon, tooltip }, index) => (
         <div key={index} className="flex flex-wrap items-center">
           <Tooltip content={tooltip} arrow={false}>
@@ -150,6 +156,14 @@ export const FristColumn = ({ personData }: FristColumnProps) => {
           <div>{toReadableDate(date)}</div>
         </div>
       ))}
-    </>
+      {personData.oppfolgingsoppgave && (
+        <OppfolgingsoppgaveModal
+          isOpen={isModalOpen}
+          setOpen={setIsModalOpen}
+          oppfolgingsoppgave={personData.oppfolgingsoppgave}
+          sykmeldtNavn={personData.navn}
+        />
+      )}
+    </Table.DataCell>
   );
-};
+}
diff --git a/src/components/HendelseFilterPanel.tsx b/src/components/HendelseFilterPanel.tsx
@@ -234,12 +234,12 @@ function CheckboxLabel({ labelText, antallHendelser }: CheckboxLabelProps) {
 export function HendelseFilterPanel({ personRegister }: Props) {
   const { toggles } = useFeatureToggles();
   const { filterState, dispatch: dispatchFilterAction } = useFilters();
-  const { tabType } = useTabType();
+  const { selectedTab } = useTabType();
 
   const checkboxElements = hendelseCheckboxes(
     personRegister,
     filterState,
-    tabType,
+    selectedTab,
     toggles
   ).filter((checkboksElement) => checkboksElement.isVisible);
 

diff --git a/src/components/NewOversiktTable.tsx b/src/components/NewOversiktTable.tsx
@@ -4,7 +4,7 @@ import { VeilederColumn } from '@/components/VeilederColumn';
 import { PersonData } from '@/api/types/personregisterTypes';
 import { PersonRadVirksomhetColumn } from '@/components/PersonRadVirksomhetColumn';
 import { OppfolgingstilfelleDTO } from '@/api/types/personoversiktTypes';
-import { FristColumn } from '@/components/FristColumn';
+import { FristDataCell } from '@/components/FristDataCell';
 import { Sorting, SortingKey, useSorting } from '@/hooks/useSorting';
 import { LinkSyfomodiaperson } from '@/components/LinkSyfomodiaperson';
 import { toLastnameFirstnameFormat } from '@/utils/stringUtil';
@@ -14,13 +14,13 @@ import { OverviewTabType } from '@/konstanter';
 import * as Amplitude from '@/utils/amplitude';
 import { EventType } from '@/utils/amplitude';
 
-const getVarighetOppfolgingstilfelle = (
+function getVarighetOppfolgingstilfelle(
   oppfolgingstilfelle: OppfolgingstilfelleDTO | undefined
-): string => {
+): string {
   return oppfolgingstilfelle
     ? `${oppfolgingstilfelle.varighetUker} uker`
     : 'Ukjent';
-};
+}
 
 interface Props {
   personListe: [string, PersonData][];
@@ -30,17 +30,17 @@ interface Props {
   setSorting: (sorting: Sorting) => void;
 }
 
-export const NewOversiktTable = ({
+export function NewOversiktTable({
   personListe,
   selectedRows,
   setSelectedRows,
   sorting,
   setSorting,
-}: Props): ReactElement => {
+}: Props): ReactElement {
   const { columns } = useSorting();
-  const { tabType } = useTabType();
+  const { selectedTab } = useTabType();
 
-  const handleSort = (sortKey: string | undefined) => {
+  function handleSort(sortKey: string | undefined) {
     let direction: 'none' | 'ascending' | 'descending';
     if (sortKey === sorting.orderBy && sorting.direction === 'descending') {
       direction = 'none';
@@ -64,27 +64,27 @@ export const NewOversiktTable = ({
         retning: direction,
       },
     });
-  };
+  }
 
   const allRowsSelected = personListe.length === selectedRows.length;
   const anyRowsSelected = selectedRows.length > 0;
   const isRowSelected = (fnr: string) => selectedRows.includes(fnr);
 
-  const toggleSelectedRow = (fnr: string) => {
+  function toggleSelectedRow(fnr: string) {
     if (isRowSelected(fnr)) {
       setSelectedRows(selectedRows.filter((value) => value !== fnr));
     } else {
       setSelectedRows([...selectedRows, fnr]);
     }
-  };
+  }
 
-  const toggleSelectAllRows = () => {
+  function toggleSelectAllRows() {
     if (anyRowsSelected) {
       setSelectedRows([]);
     } else {
       setSelectedRows(personListe.map(([fnr]) => fnr));
     }
-  };
+  }
 
   return (
     <Table
@@ -109,7 +109,7 @@ export const NewOversiktTable = ({
           {columns
             .filter(
               (column) =>
-                tabType === OverviewTabType.ENHET_OVERVIEW ||
+                selectedTab === OverviewTabType.ENHET_OVERVIEW ||
                 column.sortKey !== 'VEILEDER'
             )
             .map((col, index) => (
@@ -156,7 +156,7 @@ export const NewOversiktTable = ({
             <Table.DataCell textSize="small">
               <PersonRadVirksomhetColumn personData={persondata} />
             </Table.DataCell>
-            {tabType === OverviewTabType.ENHET_OVERVIEW && (
+            {selectedTab === OverviewTabType.ENHET_OVERVIEW && (
               <Table.DataCell textSize="small">
                 <VeilederColumn personData={persondata} />
               </Table.DataCell>
@@ -166,9 +166,7 @@ export const NewOversiktTable = ({
                 persondata.latestOppfolgingstilfelle
               )}
             </Table.DataCell>
-            <Table.DataCell textSize="small">
-              <FristColumn personData={persondata} />
-            </Table.DataCell>
+            <FristDataCell personData={persondata} />
             <Table.DataCell
               textSize="small"
               className="[&>*:not(:last-child)]:mb-1.5"
@@ -184,4 +182,4 @@ export const NewOversiktTable = ({
       </Table.Body>
     </Table>
   );
-};
+}
diff --git a/src/components/OppfolgingsoppgaveModal.tsx b/src/components/OppfolgingsoppgaveModal.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { BodyLong, BodyShort, Label, Modal } from '@navikt/ds-react';
+import {
+  oppfolgingsgrunnToString,
+  OppfolgingsoppgaveDTO,
+} from '@/api/types/personoversiktTypes';
+import { toReadableDate } from '@/utils/dateUtils';
+
+const texts = {
+  header: 'Oppfølgingsoppgave',
+  oppfolgingsgrunn: 'Oppfølgingsgrunn',
+  frist: 'Frist',
+};
+
+interface Props {
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+  oppfolgingsoppgave: OppfolgingsoppgaveDTO;
+  sykmeldtNavn: string;
+}
+
+export default function OppfolgingsoppgaveModal({
+  isOpen,
+  setOpen,
+  oppfolgingsoppgave,
+  sykmeldtNavn,
+}: Props) {
+  return (
+    <Modal
+      closeOnBackdropClick
+      className="w-full max-w-[50rem]"
+      aria-label="oppfølgingsoppgave"
+      open={isOpen}
+      onClose={() => setOpen(false)}
+      header={{
+        label: sykmeldtNavn,
+        heading: texts.header,
+      }}
+    >
+      <Modal.Body>
+        <Label size="small" as="p">
+          {texts.oppfolgingsgrunn}
+        </Label>
+        <BodyShort className="mb-4">
+          {oppfolgingsgrunnToString(oppfolgingsoppgave.oppfolgingsgrunn)}
+        </BodyShort>
+        <BodyLong className="mb-4">{oppfolgingsoppgave.tekst}</BodyLong>
+        <Label size="small" as="p">
+          {texts.frist}
+        </Label>
+        <BodyShort>{toReadableDate(oppfolgingsoppgave.frist)}</BodyShort>
+      </Modal.Body>
+    </Modal>
+  );
+}