legg til neutral icon for kalenderavtale som er avlyst eller tilbake …

…i tid
navikt · Feb 16, 2024 · 008bd25 · 008bd25
1 parent 93b844a
commit 008bd25
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 21 deletions.
diff --git a/brukerapi-mock/notifikasjonMockMiddleware.js b/brukerapi-mock/notifikasjonMockMiddleware.js
@@ -16,6 +16,10 @@ const utgåttDate = () => {
   return date;
 };
 
+const datePlusTimer = (date, hours) => {
+  return new Date(date.getTime() + hours * 60 * 60 * 1000);
+}
+
 const casualDate = () => {
   const date = new Date();
 
@@ -41,6 +45,31 @@ const casualDate = () => {
   return date;
 };
 
+const casualFutureDate = () => {
+  const date = new Date();
+
+  if (casual.integer(0, 1)) {
+    date.setHours(date.getHours() + casual.integer(0, 60));
+  }
+
+  if (casual.integer(0, 1)) {
+    date.setMinutes(date.getMinutes() + casual.integer(0, 60));
+  }
+
+  if (casual.integer(0, 5)) {
+    date.setDate(date.getDate() + casual.integer(0, 31));
+  }
+
+  if (casual.integer(0, 10) === 0) {
+    date.setMonth(date.getMonth() + casual.integer(0, 12));
+  }
+
+  if (casual.integer(0, 49) === 0) {
+    date.setFullYear(date.getFullYear() + casual.integer(0, 1));
+  }
+  return date;
+};
+
 const eksempler = {
   'Lønnstilskudd': [
     'Ny avtale om arbeidstiltak opprettet. Åpne avtale og fyll ut innholdet.',
@@ -106,6 +135,8 @@ const TidslinjeElement = (navn) => {
   const tilstand = erUtgåttOppgave ? 'UTGAATT' : casual.random_element(['NY', 'UTFOERT']);
   const paaminnelseTidspunkt = casual.boolean ? casualDate().toISOString() : null;
   const opprettetTidspunkt = casualDate().toISOString();
+  const startTidspunkt = casual.boolean ? utgåttDate().toISOString() : casualFutureDate().toISOString();
+  const sluttTidspunkt = casual.boolean ? datePlusTimer(new Date(startTidspunkt), 1).toISOString() : null;
   return {
     __typename: navn,
     id: Math.random().toString(36),
@@ -125,8 +156,8 @@ const TidslinjeElement = (navn) => {
     ...(navn === 'KalenderavtaleTidslinjeElement'
         ? {
           tekst: 'Dialogmøte ' + casual.random_element(['Mikke', 'Minni', 'Dolly', 'Donald', 'Langbein']),
-          startTidspunkt: '2021-02-04T15:15:00',
-          sluttTidspunkt: casual.boolean ? '2021-02-04T16:15:00' : null,
+          startTidspunkt: startTidspunkt,
+          sluttTidspunkt: sluttTidspunkt,
           lokasjon: casual.boolean ? null : {
             adresse: 'Thorvald Meyers gate 2B',
             postnummer: '0473',
@@ -147,6 +178,8 @@ const Notifikasjon = (navn) => {
   const tilstand = navn === 'Oppgave' ? { tilstand: erUtgåttOppgave ? 'UTGAATT' : casual.random_element(['NY', 'UTFOERT']) } : {};
   const opprettetTidspunkt = casualDate().toISOString();
   const paaminnelseTidspunkt = casual.boolean ? casualDate().toISOString() : null;
+  const startTidspunkt = casual.boolean ? utgåttDate().toISOString() : casualFutureDate().toISOString();
+  const sluttTidspunkt = casual.boolean ? datePlusTimer(new Date(startTidspunkt), 1).toISOString() : null;
   return {
     __typename: navn,
     id: Math.random().toString(36),
@@ -165,8 +198,8 @@ const Notifikasjon = (navn) => {
     ),
     ...(navn === 'Kalenderavtale' ? {
           tekst: 'Dialogmøte Dolly',
-          startTidspunkt: '2021-02-04T15:15:00',
-          sluttTidspunkt: casual.boolean ? '2021-02-04T16:15:00' : null,
+          startTidspunkt: startTidspunkt,
+          sluttTidspunkt: sluttTidspunkt,
           lokasjon: {
             adresse: 'Thorvald Meyers gate 2B',
             postnummer: '0473',

diff --git a/brukerapi-mock/package-lock.json b/brukerapi-mock/package-lock.json
diff --git a/brukerapi-mock/package.json b/brukerapi-mock/package.json
@@ -2,7 +2,7 @@
   "name": "@navikt/arbeidsgiver-notifikasjoner-brukerapi-mock",
   "description": "Mocker graphql-endepunkt for brukerapi. Nyttig for utvikling av @navikt/arbeidsgiver-notifikasjon-widget.",
   "repository": "github:navikt/arbeidsgiver-notifikasjon-widget",
-  "version": "6.5.0",
+  "version": "6.5.1",
   "license": "MIT",
   "main": "dist/notifikasjonMockMiddleware.js",
   "files": [

diff --git a/component/package-lock.json b/component/package-lock.json
diff --git a/component/package.json b/component/package.json
@@ -2,7 +2,7 @@
   "name": "@navikt/arbeidsgiver-notifikasjon-widget",
   "description": "React component for notifikasjoner for arbeidsgivere",
   "repository": "github:navikt/arbeidsgiver-notifikasjon-widget",
-  "version": "6.5.0",
+  "version": "6.5.1",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
   "types": "./lib/esm/lib/esm/index.d.ts",

diff --git a/component/src/NotifikasjonWidget/NotifikasjonPanel/NotifikasjonListeElement/Ikoner.tsx b/component/src/NotifikasjonWidget/NotifikasjonPanel/NotifikasjonListeElement/Ikoner.tsx
@@ -11,18 +11,29 @@ const useId = () => useMemo(() => {
   }, []
 )
 
-export const KalenderavtaleIkon = () => {
+export const KalenderavtaleIkon = ({variant}: {variant?: 'default' | 'neutral'}) => {
   const id = useId()
+  if (variant === 'neutral') {
+    return (
+      <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <title id={id}>Kalenderavtale</title>
+        <rect width="38" height="38" rx="4" fill="#021431" fillOpacity="0.49"/>
+        <path fillRule="evenodd" clipRule="evenodd"
+              d="M16 9.25C16.4142 9.25 16.75 9.58579 16.75 10V11.25H21.25V10C21.25 9.58579 21.5858 9.25 22 9.25C22.4142 9.25 22.75 9.58579 22.75 10V11.25H26.5C27.1904 11.25 27.75 11.8096 27.75 12.5V25.5C27.75 26.1904 27.1904 26.75 26.5 26.75H11.5C10.8096 26.75 10.25 26.1904 10.25 25.5V12.5C10.25 11.8096 10.8096 11.25 11.5 11.25H15.25V10C15.25 9.58579 15.5858 9.25 16 9.25ZM22.75 14C22.75 14.4142 22.4142 14.75 22 14.75C21.5858 14.75 21.25 14.4142 21.25 14V12.75H16.75V14C16.75 14.4142 16.4142 14.75 16 14.75C15.5858 14.75 15.25 14.4142 15.25 14V12.75H11.75V16.25H26.25V12.75H22.75V14ZM11.75 25.25V17.75H26.25V25.25H11.75ZM13.75 20C13.75 19.5858 14.0858 19.25 14.5 19.25H15.5C15.9142 19.25 16.25 19.5858 16.25 20C16.25 20.4142 15.9142 20.75 15.5 20.75H14.5C14.0858 20.75 13.75 20.4142 13.75 20ZM17.75 20C17.75 19.5858 18.0858 19.25 18.5 19.25H19.5C19.9142 19.25 20.25 19.5858 20.25 20C20.25 20.4142 19.9142 20.75 19.5 20.75H18.5C18.0858 20.75 17.75 20.4142 17.75 20ZM22.5 19.25C22.0858 19.25 21.75 19.5858 21.75 20C21.75 20.4142 22.0858 20.75 22.5 20.75H23.5C23.9142 20.75 24.25 20.4142 24.25 20C24.25 19.5858 23.9142 19.25 23.5 19.25H22.5ZM17.75 23C17.75 22.5858 18.0858 22.25 18.5 22.25H19.5C19.9142 22.25 20.25 22.5858 20.25 23C20.25 23.4142 19.9142 23.75 19.5 23.75H18.5C18.0858 23.75 17.75 23.4142 17.75 23ZM22.5 22.25C22.0858 22.25 21.75 22.5858 21.75 23C21.75 23.4142 22.0858 23.75 22.5 23.75H23.5C23.9142 23.75 24.25 23.4142 24.25 23C24.25 22.5858 23.9142 22.25 23.5 22.25H22.5ZM13.75 23C13.75 22.5858 14.0858 22.25 14.5 22.25H15.5C15.9142 22.25 16.25 22.5858 16.25 23C16.25 23.4142 15.9142 23.75 15.5 23.75H14.5C14.0858 23.75 13.75 23.4142 13.75 23Z"
+              fill="white"/>
+      </svg>
+
+    );
+  }
   return <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
     <title id={id}>Kalenderavtale</title>
     <rect width="38" height="38" rx="4" fill="#3380A5"/>
     <path fillRule="evenodd" clipRule="evenodd"
           d="M16 9.25C16.4142 9.25 16.75 9.58579 16.75 10V11.25H21.25V10C21.25 9.58579 21.5858 9.25 22 9.25C22.4142 9.25 22.75 9.58579 22.75 10V11.25H26.5C27.1904 11.25 27.75 11.8096 27.75 12.5V25.5C27.75 26.1904 27.1904 26.75 26.5 26.75H11.5C10.8096 26.75 10.25 26.1904 10.25 25.5V12.5C10.25 11.8096 10.8096 11.25 11.5 11.25H15.25V10C15.25 9.58579 15.5858 9.25 16 9.25ZM22.75 14C22.75 14.4142 22.4142 14.75 22 14.75C21.5858 14.75 21.25 14.4142 21.25 14V12.75H16.75V14C16.75 14.4142 16.4142 14.75 16 14.75C15.5858 14.75 15.25 14.4142 15.25 14V12.75H11.75V16.25H26.25V12.75H22.75V14ZM11.75 25.25V17.75H26.25V25.25H11.75ZM13.75 20C13.75 19.5858 14.0858 19.25 14.5 19.25H15.5C15.9142 19.25 16.25 19.5858 16.25 20C16.25 20.4142 15.9142 20.75 15.5 20.75H14.5C14.0858 20.75 13.75 20.4142 13.75 20ZM17.75 20C17.75 19.5858 18.0858 19.25 18.5 19.25H19.5C19.9142 19.25 20.25 19.5858 20.25 20C20.25 20.4142 19.9142 20.75 19.5 20.75H18.5C18.0858 20.75 17.75 20.4142 17.75 20ZM22.5 19.25C22.0858 19.25 21.75 19.5858 21.75 20C21.75 20.4142 22.0858 20.75 22.5 20.75H23.5C23.9142 20.75 24.25 20.4142 24.25 20C24.25 19.5858 23.9142 19.25 23.5 19.25H22.5ZM17.75 23C17.75 22.5858 18.0858 22.25 18.5 22.25H19.5C19.9142 22.25 20.25 22.5858 20.25 23C20.25 23.4142 19.9142 23.75 19.5 23.75H18.5C18.0858 23.75 17.75 23.4142 17.75 23ZM22.5 22.25C22.0858 22.25 21.75 22.5858 21.75 23C21.75 23.4142 22.0858 23.75 22.5 23.75H23.5C23.9142 23.75 24.25 23.4142 24.25 23C24.25 22.5858 23.9142 22.25 23.5 22.25H22.5ZM13.75 23C13.75 22.5858 14.0858 22.25 14.5 22.25H15.5C15.9142 22.25 16.25 22.5858 16.25 23C16.25 23.4142 15.9142 23.75 15.5 23.75H14.5C14.0858 23.75 13.75 23.4142 13.75 23Z"
           fill="white"/>
   </svg>
-
-
 }
+
 export const OppgaveIkon = () => {
   const id = useId()
   return <svg width="38" height="38" viewBox="0 0 38 38" aria-labelledby={id} fill="none"

diff --git a/...otifikasjonWidget/NotifikasjonPanel/NotifikasjonListeElement/NotifikasjonListeElement.tsx b/...otifikasjonWidget/NotifikasjonPanel/NotifikasjonListeElement/NotifikasjonListeElement.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Next as HoyreChevron } from '@navikt/ds-icons'
-import { BodyShort, Detail } from '@navikt/ds-react'
-import { sendtDatotekst } from '../dato-funksjoner'
-import {Kalenderavtale, Notifikasjon, OppgaveTilstand} from '../../../api/graphql-types'
-import { useAmplitude } from '../../../utils/amplitude'
-import { StatusLinje } from './StatusLinje'
+import {Next as HoyreChevron} from '@navikt/ds-icons'
+import {BodyShort, Detail} from '@navikt/ds-react'
+import {sendtDatotekst} from '../dato-funksjoner'
+import {Kalenderavtale, KalenderavtaleTilstand, Notifikasjon, OppgaveTilstand} from '../../../api/graphql-types'
+import {useAmplitude} from '../../../utils/amplitude'
+import {StatusLinje} from './StatusLinje'
 import './NotifikasjonListeElement.css'
 import {BeskjedIkon, KalenderavtaleIkon, OppgaveIkkeNyIkon, OppgaveIkon} from './Ikoner'
 import {AvtaletilstandLinje} from "./AvtaletilstandLinje";
@@ -41,6 +41,9 @@ export const NotifikasjonListeElement = (props: Props) => {
       break
     case 'Kalenderavtale':
       ikon = <KalenderavtaleIkon/>
+      if (props.notifikasjon.avtaletilstand === KalenderavtaleTilstand.Avlyst || new Date(props.notifikasjon.startTidspunkt) < new Date()) {
+        ikon = <KalenderavtaleIkon variant='neutral'/>
+      }
 
       break
     default:

diff --git a/demo/package-lock.json b/demo/package-lock.json