FO-2772 legg til ikoner for status kolonne

Author: matiasvinjevoll

src/components/user-table/body/status/har_beslutter.svg

@@ -13,8 +13,25 @@
 
 .user-table-row {
   display: grid;
-  grid-template-columns: repeat(8, 1fr) 200px;
-  padding: 1.5rem 0;
+  grid-template-columns: repeat(3, 2fr) 3fr repeat(3, 2fr) 1fr 200px;
+  justify-items: start;
+  padding: 1.3rem 0 1.7rem 0;
+
+  & > {
+    padding-left: 7px;
+  }
 
   text-align: center;
-}
+
+  align-items: end;
+
+  &__status {
+    display: grid;
+    grid-template-columns: 2rem auto;
+    align-items: end;
+    .status_ikon {
+      max-width: 1.6rem;
+    }
+
+  }
+}

src/components/user-table/body/status/klar_for_utsendelse.svg

@@ -1,8 +1,13 @@
 import React from 'react';
-import { Bruker } from '../../../rest/data/bruker';
+import { Bruker, UtkastStatus } from '../../../rest/data/bruker';
 import { formatDateStr, tidSiden } from '../../../utils/date-utils';
 import { Normaltekst, Element } from 'nav-frontend-typografi';
 import { fjernNavFraEnhetNavn, mapBrukerStatusTilTekst } from '../../../utils';
+import harBeslutterIcon from './status/har_beslutter.svg';
+import klarForUtsendelseIcon from './status/klar_for_utsendelse.svg';
+import trengerBeslutterIcon from './status/trenger_beslutter.svg';
+import trengerTilbakemeldingIcon from './status/trenger_tilbakemelding.svg';
+import venterPaResponsIcon from './status/venter_pa_respons.svg';
 
 export const UserRow = (props: {bruker: Bruker}) => {
 	const {
@@ -16,11 +21,37 @@ export const UserRow = (props: {bruker: Bruker}) => {
 		    <Normaltekst>{etternavn + ', ' + fornavn}</Normaltekst>
 		    <Element>{fnr}</Element>
 		    <Normaltekst>{formatDateStr(vedtakStartet)}</Normaltekst>
-		    <Normaltekst>{mapBrukerStatusTilTekst(status)}</Normaltekst>
+			<UtkastStatusData status={status}/>
 		    <Element>{beslutterNavn || '-'}</Element>
 		    <Normaltekst>{veilederNavn}</Normaltekst>
 		    <Normaltekst>{tidSiden(utkastSistEndret)}</Normaltekst>
 		    <Normaltekst>{fjernNavFraEnhetNavn(oppfolgingsenhetNavn)}</Normaltekst>
 	    </li>
     );
 };
+
+const UtkastStatusData = (props: { status: UtkastStatus }) => {
+	let statusIkon;
+	switch (props.status) {
+		case UtkastStatus.KLAR_FOR_BESLUTTER:
+			statusIkon = trengerBeslutterIcon;
+			break;
+		case UtkastStatus.HAR_BESLUTTER:
+			statusIkon = harBeslutterIcon;
+			break;
+		case UtkastStatus.VENTER_PA_VEILEDER:
+			statusIkon = trengerTilbakemeldingIcon;
+			break;
+		case UtkastStatus.VENTER_PA_BESLUTTER:
+			statusIkon = venterPaResponsIcon;
+			break;
+		case UtkastStatus.KLAR_TIL_UTSENDING:
+			statusIkon = klarForUtsendelseIcon;
+			break;
+	}
+	return (
+		<span className={'user-table-row__status'}>
+			<img className={'status_ikon'} src={statusIkon} alt={'status ikon'} />
+		<Normaltekst>{mapBrukerStatusTilTekst(props.status)}</Normaltekst>
+	</span>);
+};

src/components/user-table/body/status/trenger_beslutter.svg

@@ -2,7 +2,8 @@
 
 .user-table-header {
   display: grid;
-  grid-template-columns: repeat(8, 1fr) 200px;
+  grid-template-columns: repeat(3, 2fr) 3fr repeat(3, 2fr) 1fr 200px;
+  justify-items: start;
   padding-bottom: 1rem;
   border-bottom: 1px solid @navGra60;
 

src/components/user-table/body/status/trenger_tilbakemelding.svg

@@ -1,5 +1,5 @@
 import faker from 'faker';
-import { Bruker, BrukerStatus } from '../../rest/data/bruker';
+import { Bruker, UtkastStatus } from '../../rest/data/bruker';
 import { enheter } from './enheter';
 import { randBetween } from '../../utils';
 
@@ -34,7 +34,7 @@ export const lagBrukere = (antallBrukere: number): Bruker[] => {
 			vedtakStartet: faker.date.recent(30).toISOString(),
 			oppfolgingsenhetId: randomEnhet.enhetId,
 			oppfolgingsenhetNavn: randomEnhet.navn,
-			status: faker.random.objectElement(BrukerStatus) as BrukerStatus,
+			status: faker.random.objectElement(UtkastStatus) as UtkastStatus,
 			utkastSistEndret: faker.date.recent().toISOString()
 		};
 

src/components/user-table/body/status/venter_pa_respons.svg

@@ -1,5 +1,5 @@
 
-export enum BrukerStatus {
+export enum UtkastStatus {
 	KLAR_FOR_BESLUTTER = 'KLAR_FOR_BESLUTTER',
 	HAR_BESLUTTER = 'HAR_BESLUTTER',
 	VENTER_PA_VEILEDER = 'VENTER_PA_VEILEDER',
@@ -11,7 +11,7 @@ export interface Bruker {
 	fnr: string;
 	fornavn: string;
 	etternavn: string;
-	status: BrukerStatus;
+	status: UtkastStatus;
 	beslutterNavn: string | null;
 	veilederNavn: string;
 	utkastSistEndret: string; // dato