IS-1710: Move avventer dato to frist column with icon

Anders Rognstad · Anders Rognstad · commit a9d966b655b5 · 2023-11-30T10:23:38.000+01:00
diff --git a/mock/data/personoversiktEnhetMock.ts b/mock/data/personoversiktEnhetMock.ts
@@ -114,7 +114,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
     aktivitetskrav: AktivitetskravStatus.AVVENT,
     aktivitetskravActive: false,
     aktivitetskravSistVurdert: new Date('2022-12-01T10:12:05.913826'),
-    aktivitetskravVurderingFrist: null,
+    aktivitetskravVurderingFrist: new Date('2022-12-10'),
     oppfolgingsplanLPSBistandUbehandlet: null,
     dialogmotekandidat: undefined,
     motestatus: undefined,
@@ -159,7 +159,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
     aktivitetskrav: AktivitetskravStatus.AVVENT,
     aktivitetskravActive: false,
     aktivitetskravSistVurdert: new Date('2022-12-01T10:12:05.913826'),
-    aktivitetskravVurderingFrist: null,
+    aktivitetskravVurderingFrist: new Date('2022-12-10'),
     dialogmotesvarUbehandlet: false,
     behandlerdialogUbehandlet: false,
     aktivitetskravVurderStansUbehandlet: false,
@@ -232,7 +232,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
     aktivitetskrav: AktivitetskravStatus.AVVENT,
     aktivitetskravActive: false,
     aktivitetskravSistVurdert: new Date('1984-01-19T10:12:05.913826'),
-    aktivitetskravVurderingFrist: null,
+    aktivitetskravVurderingFrist: new Date('2023-12-10'),
     behandlerdialogUbehandlet: false,
     aktivitetskravVurderStansUbehandlet: false,
     trengerOppfolging: false,
@@ -322,7 +322,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
     aktivitetskrav: AktivitetskravStatus.AVVENT,
     aktivitetskravActive: false,
     aktivitetskravSistVurdert: new Date('2022-12-01T10:12:05.913826'),
-    aktivitetskravVurderingFrist: null,
+    aktivitetskravVurderingFrist: new Date('2022-12-10'),
     behandlerdialogUbehandlet: false,
     aktivitetskravVurderStansUbehandlet: false,
     trengerOppfolging: false,
@@ -527,7 +527,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
     aktivitetskrav: AktivitetskravStatus.AVVENT,
     aktivitetskravActive: false,
     aktivitetskravSistVurdert: new Date('2020-12-01T10:12:05.913826'),
-    aktivitetskravVurderingFrist: null,
+    aktivitetskravVurderingFrist: new Date('2022-12-10'),
     behandlerdialogUbehandlet: false,
     aktivitetskravVurderStansUbehandlet: false,
     trengerOppfolging: false,
@@ -556,7 +556,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
     aktivitetskrav: AktivitetskravStatus.AVVENT,
     aktivitetskravActive: false,
     aktivitetskravSistVurdert: new Date('2022-12-01T10:12:05.913826'),
-    aktivitetskravVurderingFrist: null,
+    aktivitetskravVurderingFrist: new Date('2022-12-20'),
     dialogmotesvarUbehandlet: false,
     behandlerdialogUbehandlet: false,
     aktivitetskravVurderStansUbehandlet: false,
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
   "author": "DigiSyfo <digisyfo@nav.no>",
   "license": "ISC",
   "dependencies": {
+    "@navikt/aksel-icons": "5.11.2",
     "@navikt/ds-css": "5.11.1",
     "@navikt/ds-react": "5.11.1",
     "@navikt/fnrvalidator": "1.1.4",
diff --git a/src/components/FristColumn.tsx b/src/components/FristColumn.tsx
@@ -0,0 +1,33 @@
+import { PersonData } from '@/api/types/personregisterTypes';
+import { toReadableDate } from '@/utils/dateUtils';
+import { HourglassTopFilledIcon } from '@navikt/aksel-icons';
+import React from 'react';
+import { AktivitetskravStatus } from '@/api/types/personoversiktTypes';
+import { Tooltip } from '@navikt/ds-react';
+import styled from 'styled-components';
+
+const FristColumnWrapper = styled.div`
+  display: flex;
+`;
+
+interface FristColumnProps {
+  personData: PersonData;
+}
+
+export const FristColumn = ({ personData }: FristColumnProps) => {
+  const showAvventerFrist =
+    personData.aktivitetskrav === AktivitetskravStatus.AVVENT;
+
+  return (
+    <FristColumnWrapper>
+      {showAvventerFrist && (
+        <>
+          <Tooltip content="Avventer" arrow={false}>
+            <HourglassTopFilledIcon aria-hidden fontSize="1.5rem" />
+          </Tooltip>
+          {toReadableDate(personData.aktivitetskravVurderingFrist)}
+        </>
+      )}
+    </FristColumnWrapper>
+  );
+};
diff --git a/src/components/Labels.tsx b/src/components/Labels.tsx
@@ -2,9 +2,7 @@ import React from 'react';
 import { PersonData } from '@/api/types/personregisterTypes';
 import { getReadableSkjermingskode } from '@/utils/personDataUtil';
 import styled from 'styled-components';
-import { AktivitetskravStatus } from '@/api/types/personoversiktTypes';
-import { EtikettFokus } from 'nav-frontend-etiketter';
-import { toReadableDate } from '@/utils/dateUtils';
+import { Tag } from '@navikt/ds-react';
 
 const LabelColumnWrapper = styled.div`
   padding: 0.5em 0;
@@ -21,24 +19,13 @@ interface LabelColumnProps {
 export const Labels = ({ personData }: LabelColumnProps) => {
   const showSkjermingskode =
     personData.skjermingskode && personData.skjermingskode !== 'INGEN';
-  const showAktivitetskrav =
-    personData.aktivitetskrav === AktivitetskravStatus.AVVENT;
-  const avventerDato = personData.aktivitetskravVurderingFrist;
 
   return (
     <LabelColumnWrapper>
       {showSkjermingskode && (
-        <EtikettFokus mini>
+        <Tag variant="warning" size="small">
           {getReadableSkjermingskode(personData.skjermingskode)}
-        </EtikettFokus>
-      )}
-
-      {showAktivitetskrav && (
-        <EtikettFokus mini>
-          {avventerDato
-            ? `Avventer (${toReadableDate(avventerDato)})`
-            : 'Avventer'}
-        </EtikettFokus>
+        </Tag>
       )}
     </LabelColumnWrapper>
   );
diff --git a/src/components/Personrad.tsx b/src/components/Personrad.tsx
@@ -14,6 +14,7 @@ import { getEarliestDate, getWeeksBetween } from '@/utils/dateUtils';
 import { PersonRadVirksomhetColumn } from '@/components/PersonRadVirksomhetColumn';
 import { Labels } from '@/components/Labels';
 import { OppfolgingstilfelleDTO } from '@/api/types/personoversiktTypes';
+import { FristColumn } from '@/components/FristColumn';
 
 interface PersonradProps {
   fnr: string;
@@ -95,7 +96,7 @@ export const Personrad = (props: PersonradProps): ReactElement => {
           }}
         />
       </Column>
-      <Column xs={'3'}>{lenkeTilModiaEnkeltperson(personData, onClick)}</Column>
+      <Column xs={'2'}>{lenkeTilModiaEnkeltperson(personData, onClick)}</Column>
       <Column xs={'2'}>
         {lenkeTilModiaEnkeltpersonFnr(personData, fnr, onClick)}
       </Column>
@@ -104,6 +105,9 @@ export const Personrad = (props: PersonradProps): ReactElement => {
       </Column>
       <Column xs={'2'}>{veilederName}</Column>
       <Column xs={'1'}>{oppfolgingstilfelleLengthInWeeks}</Column>
+      <Column xs={'1'}>
+        <FristColumn personData={personData} />
+      </Column>
       <Column xs={'2'}>
         <Labels personData={personData} />
       </Column>
diff --git a/src/components/Sorteringsrad.tsx b/src/components/Sorteringsrad.tsx
@@ -14,7 +14,8 @@ const tekster = {
   overskriftBruker: 'Bruker',
   overskriftVeileder: 'Veileder',
   virksomhet: 'Virksomhet',
-  varighetSykefravar: 'Varighet sykefravær',
+  varighetSykefravar: 'Sykefravær',
+  frist: 'Frist',
 };
 
 export const GrayChevron = styled(Chevron)`
@@ -116,7 +117,7 @@ const Sorteringsrad = ({ onSortClick }: SortingRowProps): ReactElement => {
       extraText: <p>, Fornavn</p>,
       sortingTypeAsc: 'NAME_ASC',
       sortingTypeDesc: 'NAME_DESC',
-      xs: '3',
+      xs: '2',
     },
     {
       sortingText: tekster.fodselsnummer,
@@ -146,6 +147,13 @@ const Sorteringsrad = ({ onSortClick }: SortingRowProps): ReactElement => {
       sortingTypeDesc: 'UKE_DESC',
       xs: '1',
     },
+    {
+      sortingText: tekster.frist,
+      extraText: null,
+      sortingTypeAsc: 'DATO_ASC',
+      sortingTypeDesc: 'DATO_DESC',
+      xs: '1',
+    },
   ];
 
   return (
diff --git a/src/utils/hendelseFilteringUtils.tsx b/src/utils/hendelseFilteringUtils.tsx
@@ -156,25 +156,37 @@ export type SortingType =
   | 'VEILEDER_DESC'
   | 'UKE_ASC'
   | 'UKE_DESC'
+  | 'DATO_ASC'
+  | 'DATO_DESC'
   | 'NONE';
 
 export const getSortedEventsFromSortingType = (
   personregister: PersonregisterState,
   veiledere: Veileder[],
   type: SortingType
 ): PersonregisterState => {
-  if (type === 'NAME_ASC' || type === 'NAME_DESC') {
-    return sortEventsOnName(personregister, type);
-  } else if (type === 'FNR_ASC' || type === 'FNR_DESC') {
-    return sortEventsOnFnr(personregister, type);
-  } else if (type === 'COMPANY_ASC' || type === 'COMPANY_DESC') {
-    return sortEventsOnCompanyName(personregister, type);
-  } else if (type === 'VEILEDER_ASC' || type === 'VEILEDER_DESC') {
-    return sortEventsOnVeileder(personregister, veiledere, type);
-  } else if (type === 'UKE_ASC' || type === 'UKE_DESC') {
-    return sortEventsOnWeek(personregister, type);
+  switch (type) {
+    case 'NAME_ASC':
+    case 'NAME_DESC':
+      return sortEventsOnName(personregister, type);
+    case 'FNR_ASC':
+    case 'FNR_DESC':
+      return sortEventsOnFnr(personregister, type);
+    case 'COMPANY_ASC':
+    case 'COMPANY_DESC':
+      return sortEventsOnCompanyName(personregister, type);
+    case 'VEILEDER_ASC':
+    case 'VEILEDER_DESC':
+      return sortEventsOnVeileder(personregister, veiledere, type);
+    case 'UKE_ASC':
+    case 'UKE_DESC':
+      return sortEventsOnWeek(personregister, type);
+    case 'DATO_ASC':
+    case 'DATO_DESC':
+      return sortEventsOnFrist(personregister, type);
+    case 'NONE':
+      return personregister;
   }
-  return personregister;
 };
 
 const sortVeiledereByLastName = (
@@ -293,3 +305,22 @@ const sortEventsOnWeek = (
 
   return Object.fromEntries(sorted);
 };
+
+const sortEventsOnFrist = (
+  personregister: PersonregisterState,
+  order: 'DATO_ASC' | 'DATO_DESC'
+): PersonregisterState => {
+  const sorted = Object.entries(personregister).sort(
+    ([, persondataA], [, persondataB]) => {
+      const fristDateA = persondataA.aktivitetskravVurderingFrist;
+      const fristDateB = persondataB.aktivitetskravVurderingFrist;
+      if (!fristDateA) return order === 'DATO_ASC' ? -1 : 1;
+      if (!fristDateB) return order === 'DATO_ASC' ? 1 : -1;
+      if (fristDateA > fristDateB) return order === 'DATO_ASC' ? -1 : 1;
+      if (fristDateA < fristDateB) return order === 'DATO_ASC' ? 1 : -1;
+      return 0;
+    }
+  );
+
+  return Object.fromEntries(sorted);
+};
diff --git a/test/components/Personrad.test.tsx b/test/components/Personrad.test.tsx
@@ -105,16 +105,16 @@ describe('Personrad', () => {
     expect(screen.getByText('diskresjonsmerket')).to.exist;
   });
 
-  it('Skal rendre label med frist-dato for aktivitetskrav AVVENT', () => {
+  it('Skal rendre frist-dato for aktivitetskrav AVVENT', () => {
     renderPersonrad(personDataAktivitetskravAvventMedFrist);
 
-    expect(screen.getByText('Avventer (01.04.2023)')).to.exist;
+    expect(screen.getByText('01.04.2023')).to.exist;
   });
 
-  it('Skal rendre label uten frist-dato for aktivitetskrav AVVENT når frist mangler', () => {
+  it('Rendrer ingen frist-dato for aktivitetskrav AVVENT når frist mangler', () => {
     renderPersonrad(personDataAktivitetskravAvventUtenFrist);
 
-    expect(screen.getByText('Avventer')).to.exist;
+    expect(screen.queryByText('01.04.2023')).to.not.exist;
   });
 
   it('Viser riktig utregning av varighet på sykefraværet', () => {
