FO-2772 Ryddet opp i felter i user-table

Author: AlexGaard

src/components/header/header.less

@@ -1,6 +1,5 @@
 
 .header {
-  width: 100%;
   padding: 2rem 2.5rem;
   background-color: white;
 }

src/components/user-table/body/user-table-body.less

@@ -13,7 +13,7 @@
 
 .user-table-row {
   display: grid;
-  grid-template-columns: repeat(7, 1fr) 200px;
+  grid-template-columns: repeat(8, 1fr) 200px;
   padding: 1.5rem 0;
 
   text-align: center;

src/components/user-table/body/user-table-row.tsx

@@ -1,24 +1,26 @@
 import React from 'react';
 import { Bruker } from '../../../rest/data/bruker';
-import { formatDateTime, dagerSiden } from '../../../utils/date-utils';
-import { Normaltekst } from 'nav-frontend-typografi';
+import { formatDateStr, tidSiden } from '../../../utils/date-utils';
+import { Normaltekst, Element } from 'nav-frontend-typografi';
+import { fjernNavFraEnhetNavn } from '../../../utils';
 
 export const UserRow = (props: {bruker: Bruker}) => {
 	const {
 		fnr, fornavn, etternavn, utkastSistEndret,
-		oppfolgingsenhetNavn, oppfolgingStartet,
-		beslutterNavn, status
+		oppfolgingsenhetNavn, vedtakStartet,
+		beslutterNavn, veilederNavn, status
 	} = props.bruker;
 
     return (
     	<li className="user-table-row">
 		    <Normaltekst>{etternavn + ', ' + fornavn}</Normaltekst>
-		    <Normaltekst>{fnr}</Normaltekst>
-		    <Normaltekst>{dagerSiden(oppfolgingStartet)}</Normaltekst>
-		    <Normaltekst>{oppfolgingsenhetNavn}</Normaltekst>
-		    <Normaltekst>{beslutterNavn}</Normaltekst>
+		    <Element>{fnr}</Element>
+		    <Normaltekst>{formatDateStr(vedtakStartet)}</Normaltekst>
 		    <Normaltekst>{status}</Normaltekst>
-		    <Normaltekst>{formatDateTime(utkastSistEndret)}</Normaltekst>
+		    <Element>{beslutterNavn}</Element>
+		    <Normaltekst>{veilederNavn}</Normaltekst>
+		    <Normaltekst>{fjernNavFraEnhetNavn(oppfolgingsenhetNavn)}</Normaltekst>
+		    <Normaltekst>{tidSiden(utkastSistEndret)}</Normaltekst>
 	    </li>
     );
 };

src/components/user-table/header/user-table-header.less

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

src/components/user-table/header/user-table-header.tsx

@@ -19,10 +19,11 @@ interface UserTableHeaderProps {
 export enum HeaderFieldName {
 	NAVN = 'NAVN',
 	FNR = 'FNR',
-	OPPFOLGING_STARTET = 'OPPFOLGING_STARTET',
-	OPFOLGING_ENHET = 'OPFOLGING_ENHET',
-	BESLUTTER = 'BESLUTTER',
+	VEDTAK_STARTET = 'VEDTAK_STARTET',
 	STATUS = 'STATUS',
+	BESLUTTER = 'BESLUTTER',
+	VEILEDER = 'VEILEDER',
+	OPFOLGING_ENHET = 'OPFOLGING_ENHET',
 	UTKAST_ENDRET = 'UTKAST_ENDRET'
 }
 
@@ -48,11 +49,12 @@ export const UserTableHeader = (props: UserTableHeaderProps) => {
     	<div className="user-table-header">
 		    <HeaderField name={HeaderFieldName.NAVN} text="Etternavn, Fornavn" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
 		    <HeaderField name={HeaderFieldName.FNR} text="Fødselsnummer" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
-		    <HeaderField name={HeaderFieldName.OPPFOLGING_STARTET} text="Oppfølging startet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
-		    <HeaderField name={HeaderFieldName.OPFOLGING_ENHET} text="Oppfølgingsenhet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
-		    <HeaderField name={HeaderFieldName.BESLUTTER} text="Beslutter" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+		    <HeaderField name={HeaderFieldName.VEDTAK_STARTET} text="Vedtak startet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
 		    <HeaderField name={HeaderFieldName.STATUS} text="Status" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
-		    <HeaderField name={HeaderFieldName.UTKAST_ENDRET} text="Utkast sist endret" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+		    <HeaderField name={HeaderFieldName.BESLUTTER} text="Beslutter" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+		    <HeaderField name={HeaderFieldName.VEILEDER} text="Veileder" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+		    <HeaderField name={HeaderFieldName.OPFOLGING_ENHET} text="Enhet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
+		    <HeaderField name={HeaderFieldName.UTKAST_ENDRET} text="Sist endret" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
 			<UserTablePagination />
 	    </div>
     );

src/mock/data/brukere.ts

@@ -22,10 +22,11 @@ export const lagBrukere = (antallBrukere: number): Bruker[] => {
 		const randomEnhet = faker.random.arrayElement(enheter);
 		const bruker: Bruker = {
 			beslutterNavn: faker.name.firstName() + ' ' + faker.name.lastName(),
+			veilederNavn: faker.name.firstName() + ' ' + faker.name.lastName(),
 			fnr: randomFnr(),
 			fornavn: faker.name.firstName(),
 			etternavn: faker.name.lastName(),
-			oppfolgingStartet: faker.date.recent(30).toISOString(),
+			vedtakStartet: faker.date.recent(30).toISOString(),
 			oppfolgingsenhetId: randomEnhet.enhetId,
 			oppfolgingsenhetNavn: randomEnhet.navn,
 			status: faker.random.objectElement(BrukerStatus) as BrukerStatus,

src/rest/data/bruker.ts

@@ -11,9 +11,10 @@ export interface Bruker {
 	etternavn: string;
 	status: BrukerStatus;
 	beslutterNavn: string;
+	veilederNavn: string;
 	utkastSistEndret: string; // dato
 
-	oppfolgingStartet: string; // dato
+	vedtakStartet: string; // dato
 	oppfolgingsenhetId: string;
 	oppfolgingsenhetNavn: string;
 }

src/utils/date-utils.ts

@@ -5,7 +5,7 @@ export function formatDateTime(dateStr: string) {
 }
 
 export function formatDateStr(dateStr: string) {
-	return dayjs(dateStr).format('DD. MMM YYYY');
+	return dayjs(dateStr).format('DD.MM.YYYY');
 }
 
 export function formatDate(date: Date, format: string = 'DD.MM.YYYY') {
@@ -28,4 +28,8 @@ export function dagerSiden(dateStr: string): string {
 	}
 
 	return formatDate(date);
+}
+
+export function tidSiden(dateStr: string): string {
+	return '10 timer siden';
 }

src/utils/index.ts

@@ -9,3 +9,7 @@ export function isEmpty(str: string): boolean {
 export function randBetween(from: number, to: number): number {
 	return Math.round(Math.random() * (to - from) + from);
 }
+
+export function fjernNavFraEnhetNavn(enhetNavn: string): string {
+	return enhetNavn.replace('NAV', '').trim();
+}