IS-3067: Legg til forhandsvisning for aktivitetskrav i oversikten (#646)

Author: vetlesolgaard

public/mockServiceWorker.js

@@ -12,15 +12,15 @@ const INTEGRITY_CHECKSUM = 'f5825c521429caf22a4dd13b66e243af';
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse');
 const activeClientIds = new Set();
 
-addEventListener('install', function () {
+addEventListener('install', function() {
   self.skipWaiting();
 });
 
-addEventListener('activate', function (event) {
+addEventListener('activate', function(event) {
   event.waitUntil(self.clients.claim());
 });
 
-addEventListener('message', async function (event) {
+addEventListener('message', async function(event) {
   const clientId = Reflect.get(event.source || {}, 'id');
 
   if (!clientId || !self.clients) {
@@ -93,7 +93,7 @@ addEventListener('message', async function (event) {
   }
 });
 
-addEventListener('fetch', function (event) {
+addEventListener('fetch', function(event) {
   // Bypass navigation requests.
   if (event.request.mode === 'navigate') {
     return;
@@ -231,7 +231,7 @@ async function getResponse(event, client, requestId) {
       }
     }
 
-    return fetch(requestClone, { headers })
+    return fetch(requestClone, { headers });
   }
 
   // Bypass mocking when the client is not active.
@@ -259,7 +259,7 @@ async function getResponse(event, client, requestId) {
       },
     },
     [serializedRequest.body],
-  )
+  );
 
   switch (clientMessage.type) {
     case 'MOCK_RESPONSE': {
@@ -340,5 +340,5 @@ async function serializeRequest(request) {
     referrerPolicy: request.referrerPolicy,
     body: await request.arrayBuffer(),
     keepalive: request.keepalive,
-  }
+  };
 }

src/api/types/aktivitetskravDTO.ts

@@ -8,9 +8,10 @@ export interface AktivitetskravDTO {
   vurderinger: AktivitetskravvurderingDTO[];
 }
 
-interface AktivitetskravvurderingDTO {
+export interface AktivitetskravvurderingDTO {
   status: AktivitetskravStatus;
   frist?: Date;
+  beskrivelse?: string;
   varsel?: AktivitetskravVarselDTO;
   arsaker: AvventVurderingArsak[];
 }

src/mocks/data/personoversiktEnhetMock.ts

@@ -192,6 +192,8 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
         {
           status: AktivitetskravStatus.AVVENT,
           frist: new Date('2022-12-10'),
+          beskrivelse:
+            'Dette er en grundig vurdering som venter på svar fra behandler. Etter dette må vi sjekke andre ting.',
           arsaker: [AvventVurderingArsak.ANNET],
         },
       ],

src/sider/oversikt/OversiktContainer.tsx

@@ -54,7 +54,7 @@ export default function OversiktContainer(): ReactElement {
       <div className="flex flex-col mx-8">
         <NavigationBar />
         <NotificationBar />
-        {personoversiktQuery.isInitialLoading ? (
+        {personoversiktQuery.isLoading ? (
           <AppSpinner />
         ) : (
           <Oversikt

src/sider/oversikt/sokeresultat/Sokeresultat.tsx

@@ -8,12 +8,16 @@ import {
   filterOnCompany,
   filterOnFodselsnummerOrName,
   filterOnFrist,
+  getSortedEventsFromSortingType,
 } from '@/utils/hendelseFilteringUtils';
 import { useFilters } from '@/context/filters/FilterContext';
-import OversiktTableContainer from '@/sider/oversikt/sokeresultat/oversikttable/OversiktTableContainer';
 import { TabType, useTabType } from '@/hooks/useTabType';
 import { filterUfordelteBrukere } from '@/sider/oversikt/filter/UfordelteBrukereFilter';
 import Toolbar from '@/sider/oversikt/sokeresultat/toolbar/Toolbar';
+import OversiktTable from '@/sider/oversikt/sokeresultat/oversikttable/OversiktTable';
+import { useSorting } from '@/hooks/useSorting';
+import { useVeiledereQuery } from '@/data/veiledereQueryHooks';
+import EmptyDrawer from '@/sider/oversikt/sokeresultat/oversikttable/EmptyDrawer';
 
 interface Props {
   allEvents: Filterable<PersonregisterState>;
@@ -22,6 +26,8 @@ interface Props {
 export default function Sokeresultat({ allEvents }: Props) {
   const { filterState } = useFilters();
   const { selectedTab } = useTabType();
+  const { sorting, setSorting } = useSorting();
+  const veiledereQuery = useVeiledereQuery();
 
   const [selectedPersoner, setSelectedPersoner] = useState<string[]>([]);
   const [startItem, setStartItem] = useState(0);
@@ -58,6 +64,16 @@ export default function Sokeresultat({ allEvents }: Props) {
     setEndItem(endItem);
   };
 
+  const sortedPersonregister = getSortedEventsFromSortingType(
+    filteredEvents.value,
+    veiledereQuery.data || [],
+    sorting
+  );
+  const paginatedPersonregister = Object.fromEntries(
+    Object.entries(sortedPersonregister).slice(startItem, endItem + 1)
+  );
+  const personListe = Object.entries(paginatedPersonregister);
+
   return (
     <div className="flex-[3]">
       <Toolbar
@@ -69,13 +85,17 @@ export default function Sokeresultat({ allEvents }: Props) {
         setSelectedPersoner={setSelectedPersoner}
       />
 
-      <OversiktTableContainer
-        personregister={filteredEvents.value}
-        startItem={startItem}
-        endItem={endItem}
-        selectedRows={selectedPersoner}
-        setSelectedRows={setSelectedPersoner}
-      />
+      {!personListe.length ? (
+        <EmptyDrawer />
+      ) : (
+        <OversiktTable
+          sorting={sorting}
+          setSorting={setSorting}
+          personListe={personListe}
+          selectedRows={selectedPersoner}
+          setSelectedRows={setSelectedPersoner}
+        />
+      )}
     </div>
   );
 }

src/sider/oversikt/sokeresultat/oversikttable/EmptyDrawer.tsx

@@ -2,16 +2,18 @@ import { EmptyDrawerImage } from '../../../../../img/ImageComponents';
 import React from 'react';
 import { BodyShort } from '@navikt/ds-react';
 
-export const texts = {
+const texts = {
   ingenHendelser: 'Vi finner ingen personer som har hendelser',
   altText: 'Her var det ikke mye',
 };
 
-export const EmptyDrawer = () => (
-  <div className="mt-16 text-center">
-    <img alt={texts.altText} src={EmptyDrawerImage} />
-    <BodyShort size="large" className="mt-8">
-      {texts.ingenHendelser}
-    </BodyShort>
-  </div>
-);
+export default function EmptyDrawer() {
+  return (
+    <div className="mt-16 text-center">
+      <img alt={texts.altText} src={EmptyDrawerImage} />
+      <BodyShort size="large" className="mt-8">
+        {texts.ingenHendelser}
+      </BodyShort>
+    </div>
+  );
+}

src/sider/oversikt/sokeresultat/oversikttable/OversiktTableContainer.tsx

@@ -0,0 +1,66 @@
+import { BodyLong, BodyShort, Label, Modal } from '@navikt/ds-react';
+import { toReadableDate } from '@/utils/dateUtils';
+import React from 'react';
+import { AktivitetskravvurderingDTO } from '@/api/types/aktivitetskravDTO';
+import { avventVurderingArsakTexts } from '@/api/types/personoversiktTypes';
+
+const texts = {
+  header: 'Aktivitetskrav avvent vurdering',
+  avventArsak: 'Årsak',
+  frist: 'Frist',
+  ingenArsakOppgitt: 'Ingen årsak oppgitt',
+};
+
+interface Props {
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+  vurdering: AktivitetskravvurderingDTO;
+  sykmeldtNavn: string;
+}
+
+export default function AktivitetskravAvventModal({
+  isOpen,
+  setOpen,
+  vurdering,
+  sykmeldtNavn,
+}: Props) {
+  const arsaker = vurdering?.arsaker.map(
+    (arsak) => avventVurderingArsakTexts[arsak]
+  );
+  const frist = toReadableDate(vurdering?.frist ?? null);
+
+  function arsakerText() {
+    if (!arsaker || arsaker.length === 0) {
+      return texts.ingenArsakOppgitt;
+    } else {
+      return `${arsaker.join(', ')}`;
+    }
+  }
+
+  return (
+    <Modal
+      closeOnBackdropClick
+      className="w-full max-w-[50rem]"
+      open={isOpen}
+      onClose={() => setOpen(false)}
+      header={{
+        label: sykmeldtNavn,
+        heading: texts.header,
+      }}
+    >
+      <Modal.Body>
+        <Label size="small" as="p">
+          {texts.avventArsak}
+        </Label>
+        <BodyShort className="mb-4">{arsakerText()}</BodyShort>
+        <BodyLong className="mb-4 whitespace-pre-wrap">
+          {vurdering?.beskrivelse}
+        </BodyLong>
+        <Label size="small" as="p">
+          {texts.frist}
+        </Label>
+        <BodyShort>{frist}</BodyShort>
+      </Modal.Body>
+    </Modal>
+  );
+}