FO-2760 Layout for hovedside

AlexGaard · AlexGaard · commit 8409ba5b7060 · 2020-02-28T10:30:15.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,12 +35,20 @@
   ],
   "dependencies": {
     "@craco/craco": "5.2.4",
+    "@navikt/fnrvalidator": "^1.1.0",
     "@navikt/navspa": "^1.0.3",
     "classnames": "^2.2.6",
     "constate": "^1.3.2",
     "craco-less": "1.9.0",
     "dayjs": "^1.8.17",
+    "lodash.throttle": "^4.1.1",
     "nav-frontend-core": "^4.0.11",
+    "nav-frontend-js-utils": "^1.0.8",
+    "nav-frontend-lenker": "^1.0.33",
+    "nav-frontend-lenker-style": "^0.2.24",
+    "nav-frontend-paneler-style": "^0.3.17",
+    "nav-frontend-skjema": "^2.0.11",
+    "nav-frontend-skjema-style": "^2.0.3",
     "nav-frontend-typografi": "^2.0.17",
     "nav-frontend-typografi-style": "^1.0.18",
     "prop-types": "^15.7.2",
diff --git a/public/index.html b/public/index.html
@@ -16,7 +16,7 @@
         <link rel="stylesheet" href="/internarbeidsflatedecorator/v2/static/css/main.css" />
         <script src="/internarbeidsflatedecorator/v2/static/js/head.v2.min.js"></script>
     </head>
-    <body class="beslutteroversikt">
+    <body class="beslutteroversikt app">
         <div id="root"/>
         <div id="modal-a11y-wrapper"></div>
     </body>
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,19 +1,15 @@
 import React from 'react';
-import { DataFetcher } from './components/datafetcher';
 import StoreProvider from './stores/store-provider';
 import { Header } from './components/header/header';
 import { InternflateDecorator } from './components/internflate-decorator/internflate-decorator';
+import { Hovedside } from './hovedside/hovedside';
 
 function App() {
 	return (
 		<StoreProvider>
 			<InternflateDecorator />
 			<Header />
-			<main>
-				<DataFetcher>
-					<div>Content goes here</div>
-				</DataFetcher>
-			</main>
+			<Hovedside />
 		</StoreProvider>
 	);
 }
diff --git a/src/components/enhet-filter/enhet-filter.less b/src/components/enhet-filter/enhet-filter.less
diff --git a/src/components/enhet-filter/enhet-filter.tsx b/src/components/enhet-filter/enhet-filter.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import './enhet-filter.less';
+import { FilterPanel } from '../filter-panel/filter-panel';
+import { Systemtittel } from 'nav-frontend-typografi';
+
+export const EnhetFilter = () => {
+    return (
+    	<FilterPanel>
+		    <Systemtittel>Enhet</Systemtittel>
+	    </FilterPanel>
+    );
+};
diff --git a/src/components/filter-panel/filter-panel.less b/src/components/filter-panel/filter-panel.less
@@ -0,0 +1,6 @@
+.filter-panel {
+  padding: 1rem;
+  background-color: white;
+
+  margin-bottom: 2rem;
+}
diff --git a/src/components/filter-panel/filter-panel.tsx b/src/components/filter-panel/filter-panel.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { ChildrenProps } from '../../utils/types/children-props';
+import './filter-panel.less';
+
+export const FilterPanel = (props: ChildrenProps) => {
+    return (
+    	<div className="filter-panel">
+		    {props.children}
+	    </div>
+    );
+};
diff --git a/src/components/internflate-decorator/internflate-decorator-utils.ts b/src/components/internflate-decorator/internflate-decorator-utils.ts
@@ -1,4 +1,5 @@
 import { OrNothing } from '../../utils/types/ornothing';
+import { doNothing } from '../../utils';
 
 export interface Toggles {
 	visVeilder: boolean;
@@ -19,6 +20,9 @@ export interface DecoratorConfig {
 
 	contextholder?: true | Contextholder;
 	autoSubmitOnMount?: boolean;
+
+	onEnhetChange: (enhet: string) => void;
+	onSok(fnr: string): void;
 }
 
 export function lagDecoratorConfig(): DecoratorConfig {
@@ -32,6 +36,8 @@ export function lagDecoratorConfig(): DecoratorConfig {
 			visEnhetVelger: false,
 			visSokefelt: false,
 			visVeilder: true
-		}
+		},
+		onEnhetChange: doNothing,
+		onSok: doNothing
 	};
 }
diff --git a/src/components/sokefelt/sokefelt.less b/src/components/sokefelt/sokefelt.less
@@ -0,0 +1,3 @@
+.sokefelt {
+  margin-bottom: 1rem;
+}
diff --git a/src/components/sokefelt/sokefelt.tsx b/src/components/sokefelt/sokefelt.tsx
@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { Input } from 'nav-frontend-skjema';
+import './sokefelt.less';
+
+export const Sokefelt = () => {
+	const [query, setQuery] = useState('');
+
+	function handleOnQueryChanged(e: React.ChangeEvent<HTMLInputElement>) {
+		setQuery(e.target.value);
+	}
+
+    return (
+    	<div className="sokefelt">
+		    <Input
+			    label=""
+			    placeholder="Søk etter navn eller fødselsnummer"
+			    onChange={handleOnQueryChanged}
+			    value={query}
+		    />
+	    </div>
+    );
+};
diff --git a/src/components/status-filter/status-filter.less b/src/components/status-filter/status-filter.less
diff --git a/src/components/status-filter/status-filter.tsx b/src/components/status-filter/status-filter.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import './status-filter.less';
+import { FilterPanel } from '../filter-panel/filter-panel';
+import { Systemtittel } from 'nav-frontend-typografi';
+
+export const StatusFilter = () => {
+    return (
+    	<FilterPanel>
+		    <Systemtittel>Status</Systemtittel>
+	    </FilterPanel>
+    );
+};
diff --git a/src/hovedside/hovedside.less b/src/hovedside/hovedside.less
@@ -0,0 +1,8 @@
+
+.hovedside {
+  margin: 2rem 2.5rem;
+
+  display: grid;
+  grid-column-gap: 1rem;
+  grid-template-columns: 25% 75%;
+}
diff --git a/src/hovedside/hovedside.tsx b/src/hovedside/hovedside.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { DataFetcher } from '../components/datafetcher';
+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';
+
+export const Hovedside = () => {
+    return (
+	    <main className="hovedside">
+		    <DataFetcher>
+			    <div className="filter-column">
+				    <Sokefelt/>
+				    <StatusFilter/>
+				    <EnhetFilter/>
+			    </div>
+			    <div className="table-column">
+				    <p>TODO</p>
+			    </div>
+		    </DataFetcher>
+	    </main>
+    );
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -0,0 +1,3 @@
+
+// tslint:disable-next-line:no-empty
+export function doNothing() {}
diff --git a/src/utils/types/children-props.ts b/src/utils/types/children-props.ts
@@ -0,0 +1,3 @@
+export interface ChildrenProps {
+	children: any;
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.sokefelt {`
	`2`	`+ margin-bottom: 1rem;`
	`3`	`+}`