Datoformatering i varseltabell

Hvis en hendelse inntraff for mer enn 12 timer siden, vis en dato i stedet for "x tid siden"
navikt · Jan 27, 2025 · 46c4742 · 46c4742
1 parent 69818fc
commit 46c4742
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/src/AvtaleSide/Varsellogg/VarselTabell.tsx b/src/AvtaleSide/Varsellogg/VarselTabell.tsx
@@ -1,6 +1,6 @@
 import HendelseIkon from '@/komponenter/HendelseIkon';
 import { Varsel } from '@/types/varsel';
-import { tidSidenTidspunkt, formaterDato } from '@/utils/datoUtils';
+import { formaterDato, tidSidenTidspunktEllerDato } from '@/utils/datoUtils';
 import { storForbokstav } from '@/utils/stringUtils';
 import { Table } from '@navikt/ds-react';
 import { Checkbox, CheckboxGroup } from '@navikt/ds-react';
@@ -75,7 +75,7 @@ const VarselTabell: FunctionComponent<Props> = (props) => {
                             <Table.Row key={varsel.id} role="row">
                                 <Table.DataCell role="cell" aria-labelledby="tidspunkt">
                                     <UtgråetTekst title={formaterDato(varsel.tidspunkt)} grå={varsel.skjules}>
-                                        {tidSidenTidspunkt(varsel.tidspunkt)} siden
+                                        {tidSidenTidspunktEllerDato(varsel.tidspunkt)}
                                     </UtgråetTekst>
                                 </Table.DataCell>
                                 <Table.DataCell role="cell">

diff --git a/src/utils/datoUtils.ts b/src/utils/datoUtils.ts
@@ -1,4 +1,13 @@
-import { differenceInDays, format, isBefore, formatDistanceToNowStrict, Duration, intervalToDuration } from 'date-fns';
+import {
+    differenceInDays,
+    format,
+    isBefore,
+    formatDistanceToNowStrict,
+    Duration,
+    intervalToDuration,
+    differenceInHours,
+    isAfter,
+} from 'date-fns';
 import { nb } from 'date-fns/locale';
 
 const units: Array<{ unit: keyof Duration; single: string; plural: string }> = [
@@ -26,6 +35,8 @@ export const formaterVarighet = (dato1: Date | string, dato2: Date | string): st
  */
 export const NORSK_DATO_OG_TID_FORMAT_FULL = 'PPPp';
 
+export const NORSK_DATO_OG_TID_FORMAT = 'dd.MM.yyyy HH:mm';
+
 /**
  * Eksempel:
  * `format(new Date('2025-01-10', NORSK_DATO_FORMAT, {locale: nb}))` => '10.01.2025'
@@ -87,6 +98,24 @@ export const formaterDatoHvisDefinert = (
  * `tidSidenTidspunkt(addHours(new Date(), -5))` => '5 timer'
  * `tidSidenTidspunkt(addYears(new Date(), -5))` => '5 år'
  */
-export const tidSidenTidspunkt = (tidspunkt: string) => {
+export const tidSidenTidspunkt = (tidspunkt: string | Date) => {
     return formatDistanceToNowStrict(tidspunkt, { locale: nb });
 };
+
+/**
+ * Eksempler (gitt at nåværende tidspunkt er '2025-01-27 15:00:00'):
+ * `tidSidenTidspunktEllerDato('2025-01-27')` => '27.01.2025 01:00'
+ * `tidSidenTidspunktEllerDato('2025-01-27 12:00:00')` => '3 timer siden'
+ * `tidSidenTidspunktEllerDato('2025-01-28')` => 'om 10 timer'
+ */
+export const tidSidenTidspunktEllerDato = (tidspunkt: string | Date): string => {
+    const now = new Date();
+    const hoursSince = differenceInHours(tidspunkt, now);
+    const inFuture = isAfter(tidspunkt, now);
+    if (Math.abs(hoursSince) > 12) {
+        return formaterDato(tidspunkt, NORSK_DATO_OG_TID_FORMAT);
+    } else if (inFuture) {
+        return 'om ' + tidSidenTidspunkt(tidspunkt);
+    }
+    return tidSidenTidspunkt(tidspunkt) + ' siden';
+};