FO-2760 Startet på tabell for visning av brukere

Author: AlexGaard

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const UserTableHeader = () => {
+    return (
+    	<tr className="user-table__header">
+		    <HeaderCell name="Fødselsnummer" />
+		    <HeaderCell name="Navn" />
+		    <HeaderCell name="Oppfølging startet" />
+		    <HeaderCell name="Oppfølgingsenhet" />
+		    <HeaderCell name="Beslutter" />
+		    <HeaderCell name="Status" />
+		    <HeaderCell name="Utkast sist endret" />
+	    </tr>
+    );
+};
+
+const HeaderCell = (props: { name: string }) => {
+	return <td className="user-table__header-title">{props.name}</td>;
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Bruker } from '../../rest/data/bruker';
+import { formatDateStr, formatDateTime } from '../../utils/date-utils';
+
+export const UserRow = (props: {bruker: Bruker}) => {
+	const {
+		fnr, fornavn, etternavn, utkastSistEndret,
+		oppfolgingsenhetNavn, oppfolgingStartet,
+		beslutterNavn, status
+	} = props.bruker;
+
+    return (
+    	<tr className="user-table__row">
+		    <td>{fnr}</td>
+		    <td>{fornavn + ' ' + etternavn}</td>
+		    <td>{formatDateStr(oppfolgingStartet)}</td>
+		    <td>{oppfolgingsenhetNavn}</td>
+		    <td>{beslutterNavn}</td>
+		    <td>{status}</td>
+		    <td>{formatDateTime(utkastSistEndret)}</td>
+	    </tr>
+    );
+};

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

@@ -0,0 +1,9 @@
+
+.user-table {
+
+  &__header-title {
+    font-size: 18px;
+    font-weight: bolder;
+  }
+
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Bruker } from '../../rest/data/bruker';
+import { UserRow } from './user-table-row';
+import { UserTableHeader } from './user-table-header';
+import './user-table.less';
+
+export const UserTable = (props: { brukere: Bruker[] }) => {
+    return (
+    	<table>
+		    <UserTableHeader />
+		    {props.brukere.map((bruker, idx) => <UserRow bruker={bruker} key={idx} />)}
+	    </table>
+    );
+};

src/hovedside/hovedside.less

@@ -4,5 +4,5 @@
 
   display: grid;
   grid-column-gap: 1rem;
-  grid-template-columns: 25% 75%;
+  grid-template-columns: 20% 80%;
 }

src/hovedside/hovedside.tsx

@@ -4,8 +4,12 @@ import './hovedside.less';
 import { StatusFilter } from '../components/status-filter/status-filter';
 import { EnhetFilter } from '../components/enhet-filter/enhet-filter';
 import { Sokefelt } from '../components/sokefelt/sokefelt';
+import { UserTable } from '../components/user-table/user-table';
+import { useFetchStore } from '../stores/fetch-store';
 
 export const Hovedside = () => {
+	const { brukere } = useFetchStore();
+
     return (
 	    <main className="hovedside">
 		    <DataFetcher>
@@ -15,7 +19,7 @@ export const Hovedside = () => {
 				    <EnhetFilter/>
 			    </div>
 			    <div className="table-column">
-				    <p>TODO</p>
+				    <UserTable brukere={brukere.data} />
 			    </div>
 		    </DataFetcher>
 	    </main>