✨ kelvinsøk i full bredde

packages/aap-felles-css/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 4.2.5
+
+### Patch Changes
+
+- kelvinsok
+
 ## 4.2.4
 
 ## 4.2.3

packages/aap-felles-css/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.2.4",
+  "version": "4.2.5",
   "name": "@navikt/aap-felles-css",
   "author": "NAV",
   "homepage": "https://github.com/navikt/aap-felles-frontend#readme",

packages/aap-felles-css/src/kelvin-app-header.css

@@ -1,6 +1,20 @@
 .kelvin-app-header {
+  display: flex;
+  flex-direction: column;
+}
+.kelvin-app-header a {
+  color: var(--a-white);
+}
+
+.kelvin-app-main-header {
+  display: flex;
   justify-content: space-between;
   max-height: 4rem;
+  width: 100%;
+}
+
+.kelvin-app-main-header-borderBottom {
+  border-bottom: 1px solid grey; //TODO: riktig farge
 }
 
 .kelvin-app-header-leftSide {
@@ -16,13 +30,15 @@
 .kelvin-oppgavesok-form {
   padding-top: var(--a-spacing-2);
   background-color: var(--a-surface-inverted);
-  overflow: visible;
+}
+
+.kelvin-oppgavesok-resultat-container {
+  padding: var(--a-spacing-2);
 }
 
 .kelvin-oppgavesok-resultat {
-  overflow: visible;
-  position: relative;
   background-color: var(--a-surface-inverted);
   list-style: none;
-  padding: 0 var(--a-spacing-2) var(--a-spacing-2) var(--a-spacing-2);
+  padding: 0;
+  margin: 0;
 }

packages/aap-felles-prettier/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Change Log
 
+## 4.2.5
+
 ## 4.2.4
 
 ## 4.2.3

packages/aap-felles-prettier/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navikt/aap-felles-prettier",
   "author": "NAV",
-  "version": "4.2.4",
+  "version": "4.2.5",
   "main": "index.json",
   "license": "MIT",
   "dependencies": {

packages/aap-felles-react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 4.2.5
+
+### Patch Changes
+
+- kelvinsok
+
 ## 4.2.4
 
 ### Patch Changes

packages/aap-felles-react/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.2.4",
+  "version": "4.2.5",
   "name": "@navikt/aap-felles-react",
   "author": "NAV",
   "homepage": "https://github.com/navikt/aap-felles-frontend#readme",

packages/aap-felles-react/src/KelvinAppHeader/KelvinAppHeader.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import React from 'react';
-import { Dropdown, InternalHeader, Link } from '@navikt/ds-react';
-import { Oppgavesøk } from './Oppgavesøk';
+import React, {useState} from 'react';
+import {Button, Dropdown, HStack, InternalHeader, Link, VStack} from '@navikt/ds-react';
+import { Kelvinsøk} from './Kelvinsøk';
+import {Kelvinsøkeresultat, Søkeresultat} from "./Kelvinsøkeresultat";
 
 interface BrukerInformasjon {
   navn: string;
@@ -24,17 +25,29 @@ const Brukermeny = ({ brukerInformasjon }: { brukerInformasjon: BrukerInformasjo
   </Dropdown>
 );
 
-export const KelvinAppHeader = ({ brukerInformasjon }: { brukerInformasjon: BrukerInformasjon }) => (
-  <InternalHeader className="kelvin-app-header">
-    <div className="kelvin-app-header-leftSide">
-      <InternalHeader.Title href="/">Kelvin</InternalHeader.Title>
-      <Oppgavesøk />
-      <Link href={`${process.env.NEXT_PUBLIC_SAKSBEHANDLING_URL}/sanity`}>Sanity</Link>
-      <Link href={`${process.env.NEXT_PUBLIC_SAKSBEHANDLING_URL}/saksoversikt`}>Saksoversikt</Link>
-      <Link href={`${process.env.NEXT_PUBLIC_OPPGAVESTYRING_URL}/oppgaveliste`}>Oppgaveliste</Link>
-      <Link href={`${process.env.NEXT_PUBLIC_POSTMOTTAK_URL}/postmottak`}>Postmottak</Link>
-    </div>
-
-    <Brukermeny brukerInformasjon={brukerInformasjon} />
-  </InternalHeader>
-);
+export const KelvinAppHeader = ({ brukerInformasjon }: { brukerInformasjon: BrukerInformasjon }) => {
+  const [søkeresultat, setSøkeresultat] = useState<Søkeresultat | undefined>(undefined);
+  return (
+    <InternalHeader className="kelvin-app-header">
+      <div className={`kelvin-app-main-header ${søkeresultat ? 'kelvin-app-main-header-borderBottom' : ''}`}>
+        <div className="kelvin-app-header-leftSide">
+          <InternalHeader.Title href="/">Kelvin</InternalHeader.Title>
+          <Kelvinsøk setSøkeresultat={setSøkeresultat}/>
+          <Link href={`${process.env.NEXT_PUBLIC_OPPGAVESTYRING_URL}/`}>Oppgaveliste</Link>
+          <Link href={`${process.env.NEXT_PUBLIC_PRODUKSJONSSTYRING_URL}/`}>Oppgaveliste</Link>
+          <Link href={`${process.env.NEXT_PUBLIC_SAKSBEHANDLING_URL}/saksoversikt`}>Saksoversikt</Link>
+          <Link href={`${process.env.NEXT_PUBLIC_POSTMOTTAK_URL}/postmottak`}>Postmottak</Link>
+          <Link href={`${process.env.NEXT_PUBLIC_SAKSBEHANDLING_URL}/sanity`}>Sanity</Link>
+        </div>
+        <Brukermeny brukerInformasjon={brukerInformasjon}/>
+      </div>
+      {søkeresultat && <VStack padding={'2'}>
+          <HStack justify={'space-between'} className={'kelvin-oppgavesok-resultat-container'}>
+              <p>Søkeresultater</p>
+              <Button variant={'secondary'} size={'small'} onClick={() => setSøkeresultat(undefined)}>Lukk</Button>
+          </HStack>
+          <Kelvinsøkeresultat søkeresultat={søkeresultat}/>
+      </VStack>}
+    </InternalHeader>
+  );
+}

packages/aap-felles-react/src/KelvinAppHeader/Kelvinsøk.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import {Dispatch, SetStateAction} from "react";
+import {  Search} from "@navikt/ds-react";
+import React from "react";
+import {Søkeresultat} from "./Kelvinsøkeresultat";
+interface OppgavesøkeResultat {
+  label: string;
+  href: string;
+}
+interface SaksøkeResultat {
+  saksnummer: string;
+  periode: {
+    fom: string;
+    tom: string;
+  };
+}
+interface Props {
+  setSøkeresultat:  Dispatch<SetStateAction<Søkeresultat | undefined>>;
+}
+export const Kelvinsøk = ({ setSøkeresultat }: Props) => {
+
+  async function utførSøk(søketekst: string) {
+    const isFnr = søketekst.length === 11;
+    let oppgaveData: OppgavesøkeResultat[] = [];
+    try {
+      oppgaveData = await fetch(`${process.env.NEXT_PUBLIC_OPPGAVESTYRING_URL}/api/oppgave/sok`, {
+        method: 'POST',
+        body: JSON.stringify({ søketekst }),
+      }).then((res) => res.json());
+    } catch (error) {
+      console.error(error)
+    }
+    let sakData: SaksøkeResultat[] = [];
+    if(isFnr){
+      try {
+        sakData = await fetch(`${process.env.NEXT_PUBLIC_SAKSBEHANDLING_URL}/api/sak/finn`, {
+          method: 'POST',
+          body: JSON.stringify({ ident: søketekst }),
+        }).then((res) => res.json());
+      } catch (error) {
+        console.error(error)
+      }
+    }
+    const resData: Søkeresultat = {
+      oppgaver: oppgaveData,
+      saker: sakData.map(sak => ({
+        href: `${process.env.NEXT_PUBLIC_SAKSBEHANDLING_URL}/sak/${sak.saksnummer}`,
+        label: `${sak.periode.fom} - ${sak.periode.tom}  (${sak.saksnummer})`
+      }))
+    }
+    setSøkeresultat(resData);
+  }
+  return (
+    <form
+      data-theme={'dark'}
+      className={'kelvin-oppgavesok-form'}
+      role={'search'}
+      onSubmit={(e) => {
+        const input = e.currentTarget.elements?.[0] as HTMLInputElement;
+        if (input.value) {
+          utførSøk(input.value);
+        }
+        e.preventDefault();
+      }}
+    >
+      <Search label={'Søk etter person eller sak'} variant="secondary" hideLabel={true} size={'small'} />
+    </form>
+  );
+};

packages/aap-felles-react/src/KelvinAppHeader/Kelvinsøkeresultat.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import {HStack, Label} from "@navikt/ds-react";
+import React from "react";
+export interface Søkeresultat {
+  saker: {href: string; label: string}[];
+  oppgaver: {href: string; label: string}[];
+}
+interface Props {
+  søkeresultat: Søkeresultat
+}
+export const Kelvinsøkeresultat = ({søkeresultat}: Props) => {
+  return (
+    <section>
+      <HStack gap={'4'}>
+        {søkeresultat.saker.length > 0 && (<div>
+          <Label>Saker</Label>
+          <ul className={'kelvin-oppgavesok-resultat'}>
+            {søkeresultat.saker.map((søk, index) => (
+              <li key={`saker-resultat-${index}`}>
+                <a
+                  href={søk.href}
+                >{søk.label}</a>
+              </li>
+            ))}
+          </ul>
+        </div>)}
+        {søkeresultat.oppgaver.length > 0 && (<div>
+          <Label>Oppgaver</Label>
+          <ul className={'kelvin-oppgavesok-resultat'}>
+            {søkeresultat.oppgaver.map((søk, index) => (
+              <li key={`oppgaver-resultat-${index}`}>
+                <a
+                  href={søk.href}
+                >{søk.label}</a>
+              </li>
+            ))}
+          </ul>
+        </div>)}
+      </HStack>
+    </section>
+  )
+}

packages/aap-felles-utils-client/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Change Log
 
+## 4.2.5
+
 ## 4.2.4
 
 ## 4.2.3

packages/aap-felles-utils-client/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.2.4",
+  "version": "4.2.5",
   "name": "@navikt/aap-felles-utils-client",
   "author": "NAV",
   "homepage": "https://github.com/navikt/aap-felles-frontend#readme",

packages/aap-felles-utils/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Change Log
 
+## 4.2.5
+
 ## 4.2.4
 
 ## 4.2.3

packages/aap-felles-utils/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.2.4",
+  "version": "4.2.5",
   "name": "@navikt/aap-felles-utils",
   "author": "NAV",
   "homepage": "https://github.com/navikt/aap-felles-frontend#readme",

packages/eslint-config-aap/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Change Log
 
+## 4.2.5
+
 ## 4.2.4
 
 ## 4.2.3

packages/eslint-config-aap/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navikt/eslint-config-aap",
   "author": "NAV",
-  "version": "4.2.4",
+  "version": "4.2.5",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\"",