lukkeknapp på filtre + ny infoboks + ny helptext

navikt · Feb 6, 2024 · 28c12b7 · 28c12b7
1 parent 344ec38
commit 28c12b7
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 44 deletions.
diff --git a/frontend/mulighetsrommet-veileder-flate/src/App.module.scss b/frontend/mulighetsrommet-veileder-flate/src/App.module.scss
@@ -2,6 +2,10 @@
   max-width: none;
 }
 
+:global(.navds-internalheader) {
+  margin-bottom: 1rem;
+}
+
 .svg_success {
   color: var(--a-green-600);
 }

diff --git a/...end/mulighetsrommet-veileder-flate/src/apps/nav/views/NavArbeidsmarkedstiltakOversikt.tsx b/...end/mulighetsrommet-veileder-flate/src/apps/nav/views/NavArbeidsmarkedstiltakOversikt.tsx
@@ -1,23 +1,47 @@
 import { TiltakLoader } from "@/components/TiltakLoader";
 import { Feilmelding } from "@/components/feilmelding/Feilmelding";
 import { FilterAndTableLayout } from "@/components/filtrering/FilterAndTableLayout";
-import { Filtertags } from "@/components/filtrering/Filtertags";
 import { Tiltaksgjennomforingsoversikt } from "@/components/oversikt/Tiltaksgjennomforingsoversikt";
 import { useNavTiltaksgjennomforinger } from "@/core/api/queries/useTiltaksgjennomforinger";
 import { FilterMenyMedSkeletonLoader } from "@/components/filtrering/FilterMenyMedSkeletonLoader";
+import { Button } from "@navikt/ds-react";
+import {
+  useResetArbeidsmarkedstiltakFilterUtenBrukerIKontekst,
+  valgteEnhetsnumre,
+} from "@/hooks/useArbeidsmarkedstiltakFilter";
+import { FiltertagsArbeidsmarkedstiltak } from "@/components/filtrering/FiltertagsArbeidsmarkedstiltak";
 
 export const NavArbeidsmarkedstiltakOversikt = () => {
   const { data: tiltaksgjennomforinger = [], isLoading } = useNavTiltaksgjennomforinger();
+  const { filter, filterHasChanged, resetFilterToDefaults } =
+    useResetArbeidsmarkedstiltakFilterUtenBrukerIKontekst();
 
   return (
     <FilterAndTableLayout
       buttons={null}
       filter={<FilterMenyMedSkeletonLoader />}
-      tags={<Filtertags />}
+      tags={<FiltertagsArbeidsmarkedstiltak />}
+      resetButton={
+        filterHasChanged && (
+          <Button
+            size="small"
+            variant="tertiary"
+            onClick={resetFilterToDefaults}
+            data-testid="knapp_nullstill-filter"
+          >
+            Nullstill filter
+          </Button>
+        )
+      }
       table={
         <div>
           {isLoading ? (
             <TiltakLoader />
+          ) : valgteEnhetsnumre(filter).length === 0 || filter.innsatsgruppe === undefined ? (
+            <Feilmelding
+              header="Du må filtrere på en NAV-enhet og en innsatsgruppe for å se tiltaksgjennomføringer"
+              ikonvariant="info"
+            />
           ) : tiltaksgjennomforinger.length === 0 ? (
             <Feilmelding
               header="Ingen tiltaksgjennomføringer funnet"

diff --git a/frontend/mulighetsrommet-veileder-flate/src/components/feilmelding/Feilmelding.tsx b/frontend/mulighetsrommet-veileder-flate/src/components/feilmelding/Feilmelding.tsx
@@ -11,7 +11,7 @@ import {
 
 interface FeilmeldingProps {
   header: ReactNode;
-  beskrivelse: ReactNode;
+  beskrivelse?: ReactNode;
   children?: ReactNode;
   ikonvariant?: string;
   utenMargin?: boolean;

diff --git a/frontend/mulighetsrommet-veileder-flate/src/components/filtrering/Filtertags.module.scss b/frontend/mulighetsrommet-veileder-flate/src/components/filtrering/Filtertags.module.scss
@@ -5,5 +5,6 @@
   height: fit-content;
   flex-wrap: wrap;
   align-self: flex-start;
-  margin-top: 1rem;
+  margin: 1rem 0;
+  min-height: 33px;
 }
diff --git a/frontend/mulighetsrommet-veileder-flate/src/components/filtrering/Filtertags.tsx b/frontend/mulighetsrommet-veileder-flate/src/components/filtrering/Filtertags.tsx
@@ -2,10 +2,10 @@ import { ApentForInnsok } from "mulighetsrommet-api-client";
 import {
   ArbeidsmarkedstiltakFilterGruppe,
   useArbeidsmarkedstiltakFilter,
-} from "../../hooks/useArbeidsmarkedstiltakFilter";
+} from "@/hooks/useArbeidsmarkedstiltakFilter";
 import FilterTag from "../tags/FilterTag";
 import styles from "./Filtertags.module.scss";
-import { NavEnhetTag } from "./NavEnhetTag";
+import { NavEnhetTag } from "../tags/NavEnhetTag";
 
 export function Filtertags() {
   const [filter, setFilter] = useArbeidsmarkedstiltakFilter();

diff --git a/...lighetsrommet-veileder-flate/src/components/filtrering/FiltertagsArbeidsmarkedstiltak.tsx b/...lighetsrommet-veileder-flate/src/components/filtrering/FiltertagsArbeidsmarkedstiltak.tsx
@@ -1,18 +1,23 @@
 import { ApentForInnsok } from "mulighetsrommet-api-client";
 import {
   ArbeidsmarkedstiltakFilterGruppe,
-  useArbeidsmarkedstiltakFilter,
+  useArbeidsmarkedstiltakFilterUtenBrukerIKontekst,
 } from "@/hooks/useArbeidsmarkedstiltakFilter";
 import FilterTag from "../tags/FilterTag";
 import styles from "./Filtertags.module.scss";
-import { NavEnhetTag } from "./NavEnhetTag";
+import { NavEnhetTag } from "../tags/NavEnhetTag";
 
-export function Filtertags() {
-  const [filter, setFilter] = useArbeidsmarkedstiltakFilter();
+export function FiltertagsArbeidsmarkedstiltak() {
+  const [filter, setFilter] = useArbeidsmarkedstiltakFilterUtenBrukerIKontekst();
 
   return (
     <div className={styles.filtertags} data-testid="filtertags">
-      <NavEnhetTag />
+      {filter.search && (
+        <FilterTag
+          options={[{ id: "search", tittel: `'${filter.search}'` }]}
+          handleClick={() => setFilter({ ...filter, search: "" })}
+        />
+      )}
       {filter.apentForInnsok !== ApentForInnsok.APENT_ELLER_STENGT && (
         <FilterTag
           options={[
@@ -29,7 +34,15 @@ export function Filtertags() {
           }
         />
       )}
-      {filter.innsatsgruppe && <FilterTag options={[filter.innsatsgruppe]} />}
+      {filter.innsatsgruppe && (
+        <FilterTag
+          options={[filter.innsatsgruppe]}
+          handleClick={() => {
+            setFilter({ ...filter, innsatsgruppe: undefined });
+          }}
+        />
+      )}
+      <NavEnhetTag handleClick={(e: React.MouseEvent) => e.stopPropagation()} />
       <FilterTag
         options={filter.tiltakstyper}
         handleClick={(id: string) =>
@@ -41,12 +54,6 @@ export function Filtertags() {
           })
         }
       />
-      {filter.search && (
-        <FilterTag
-          options={[{ id: "search", tittel: `'${filter.search}'` }]}
-          handleClick={() => setFilter({ ...filter, search: "" })}
-        />
-      )}
     </div>
   );
 }
diff --git a/.../mulighetsrommet-veileder-flate/src/components/filtrering/InnsatsgruppeFilter.module.scss b/.../mulighetsrommet-veileder-flate/src/components/filtrering/InnsatsgruppeFilter.module.scss
@@ -0,0 +1,10 @@
+.accordion_header {
+  display: flex;
+  justify-content: flex-start;
+
+  .accordion_header_text {
+    display: flex;
+    justify-content: space-between;
+    width: 16rem;
+  }
+}
diff --git a/frontend/mulighetsrommet-veileder-flate/src/components/filtrering/InnsatsgruppeFilter.tsx b/frontend/mulighetsrommet-veileder-flate/src/components/filtrering/InnsatsgruppeFilter.tsx
@@ -1,11 +1,12 @@
-import { Accordion, Alert, Radio, RadioGroup } from "@navikt/ds-react";
+import { Accordion, Alert, HelpText, Radio, RadioGroup } from "@navikt/ds-react";
 import { useAtom } from "jotai";
 import { Innsatsgruppe } from "mulighetsrommet-api-client";
-import { useInnsatsgrupper } from "../../core/api/queries/useInnsatsgrupper";
-import { filterAccordionAtom } from "../../core/atoms/atoms";
-import { useArbeidsmarkedstiltakFilter } from "../../hooks/useArbeidsmarkedstiltakFilter";
-import { addOrRemove, kebabCase } from "../../utils/Utils";
+import { useInnsatsgrupper } from "@/core/api/queries/useInnsatsgrupper";
+import { filterAccordionAtom } from "@/core/atoms/atoms";
+import { useArbeidsmarkedstiltakFilter } from "@/hooks/useArbeidsmarkedstiltakFilter";
+import { addOrRemove, kebabCase } from "@/utils/Utils";
 import "./Filtermeny.module.scss";
+import styles from "./InnsatsgruppeFilter.module.scss";
 
 interface InnsatsgruppeFilterProps<
   T extends { id: string; tittel: string; nokkel?: Innsatsgruppe },
@@ -42,11 +43,23 @@ const InnsatsgruppeAccordion = <T extends { id: string; tittel: string; nokkel?:
         onClick={() => {
           setAccordionsOpen([...addOrRemove(accordionsOpen, "innsatsgruppe")]);
         }}
-        data-testid={"filter_accordionheader_innsatsgruppe"}
+        data-testid="filter_accordionheader_innsatsgruppe"
+        className={styles.accordion_header}
       >
-        Innsatsgruppe
+        <div className={styles.accordion_header_text}>
+          Innsatsgruppe
+          <HelpText placement="right" strategy="fixed" onClick={(e) => e.stopPropagation()}>
+            Dette filteret baserer seg på brukerens innsatsgruppe etter behovsvurdering av
+            arbeidsevne (NAV-loven § 14 a), og viser de tiltakene brukeren har krav på med valgt
+            innsatsgruppe.
+            <br />
+            <a href="https://www.nav.no/arbeidsevne#hvordan" rel="noreferrer" target="_blank">
+              Klikk her for mer informasjon.
+            </a>
+          </HelpText>
+        </div>
       </Accordion.Header>
-      <Accordion.Content data-testid={"filter_accordioncontent_innsatsgruppe"}>
+      <Accordion.Content data-testid="filter_accordioncontent_innsatsgruppe">
         {options.length !== 0 && (
           <RadioGroup
             legend=""

diff --git a/frontend/mulighetsrommet-veileder-flate/src/components/filtrering/NavEnhetFilter.tsx b/frontend/mulighetsrommet-veileder-flate/src/components/filtrering/NavEnhetFilter.tsx
@@ -80,7 +80,7 @@ export function NavEnhetFilter({
         }}
         data-testid="filter_accordionheader_brukers-enhet"
       >
-        NAV enhet
+        NAV-enhet
       </Accordion.Header>
       <Accordion.Content data-testid="filter_accordioncontent_brukers-enhet">
         <CheckboxGroup

diff --git a/frontend/mulighetsrommet-veileder-flate/src/components/knapper/Ikonknapp.tsx b/frontend/mulighetsrommet-veileder-flate/src/components/knapper/Ikonknapp.tsx
@@ -7,7 +7,7 @@ interface SidemenyKnappProps {
   children?: React.ReactNode;
   icon?: React.ReactNode;
   className?: string;
-  handleClick: () => void;
+  handleClick: (e: React.MouseEvent) => void;
   ariaLabel: string;
   dataTestId?: string;
 }

diff --git a/frontend/mulighetsrommet-veileder-flate/src/components/tags/FilterTag.tsx b/frontend/mulighetsrommet-veileder-flate/src/components/tags/FilterTag.tsx
@@ -1,5 +1,5 @@
 import { Tag } from "@navikt/ds-react";
-import { kebabCase } from "../../utils/Utils";
+import { kebabCase } from "@/utils/Utils";
 import Ikonknapp from "../knapper/Ikonknapp";
 import styles from "./Filtertag.module.scss";
 import { XMarkIcon } from "@navikt/aksel-icons";

diff --git a/frontend/mulighetsrommet-veileder-flate/src/components/tags/NavEnhetTag.tsx b/frontend/mulighetsrommet-veileder-flate/src/components/tags/NavEnhetTag.tsx
@@ -1,23 +1,24 @@
 import { Tag } from "@navikt/ds-react";
 import {
+  useArbeidsmarkedstiltakFilterUtenBrukerIKontekst,
   useArbeidsmarkedstiltakFilterValue,
   valgteEnhetsnumre,
 } from "@/hooks/useArbeidsmarkedstiltakFilter";
 import { useNavEnheter } from "@/core/api/queries/useNavEnheter";
 import { NavEnhet } from "mulighetsrommet-api-client";
 import Ikonknapp from "@/components/knapper/Ikonknapp";
 import { XMarkIcon } from "@navikt/aksel-icons";
-import { kebabCase } from "@/utils/Utils";
 import styles from "./Filtertag.module.scss";
 
 interface Props {
-  handleClick?: (id: string) => void;
+  handleClick?: (e: React.MouseEvent) => void;
 }
 
 export function NavEnhetTag({ handleClick }: Props) {
   const filter = useArbeidsmarkedstiltakFilterValue();
   const { data: alleEnheter } = useNavEnheter();
   const enheter = valgteEnhetsnumre(filter);
+  const [, setFilter] = useArbeidsmarkedstiltakFilterUtenBrukerIKontekst();
 
   if (!alleEnheter || !filter || enheter.length === 0) {
     return null;
@@ -38,23 +39,19 @@ export function NavEnhetTag({ handleClick }: Props) {
       key="navenhet"
       size="small"
       data-testid="filtertag_navenhet"
-      title="Valgt enhet"
+      title={enheter
+        .map((enhet) => alleEnheter.find((e) => e.enhetsnummer === enhet)?.navn)
+        .join(", ")}
       variant="info"
     >
       {tagLabel()}
+
       {handleClick ? (
         <Ikonknapp
           className={styles.overstyrt_ikon_knapp}
-          handleClick={() => handleClick(filtertype.id)}
+          handleClick={() => setFilter({ ...filter, regionMap: {} })}
           ariaLabel="Lukke"
-          data-testid={`filtertag_lukkeknapp_${kebabCase(filtertype.tittel)}`}
-          icon={
-            <XMarkIcon
-              data-testid={`filtertag_lukkeknapp_${kebabCase(filtertype.tittel)}`}
-              className={styles.ikon}
-              aria-label="Lukke"
-            />
-          }
+          icon={<XMarkIcon className={styles.ikon} aria-label="Lukke" />}
         />
       ) : null}
     </Tag>

diff --git a/mulighetsrommet-api/src/main/kotlin/no/nav/mulighetsrommet/api/utils/SanityFilters.kt b/mulighetsrommet-api/src/main/kotlin/no/nav/mulighetsrommet/api/utils/SanityFilters.kt
@@ -21,8 +21,6 @@ fun byggSokeFilter(sokestreng: String?): String {
 }
 
 fun byggInnsatsgruppeFilter(innsatsgruppe: String?): String {
-    if (innsatsgruppe.isNullOrBlank()) return ""
-
     return """
              && tiltakstype->innsatsgruppe->nokkel in ${utledInnsatsgrupper(innsatsgruppe).toSanityListe()}
     """.trimIndent()
@@ -32,7 +30,7 @@ private fun List<String>.toSanityListe(): String {
     return "[${this.joinToString { "'$it'" }}]"
 }
 
-fun utledInnsatsgrupper(innsatsgruppe: String): List<String> {
+fun utledInnsatsgrupper(innsatsgruppe: String?): List<String> {
     return when (innsatsgruppe) {
         Innsatsgruppe.STANDARD_INNSATS.name -> listOf(Innsatsgruppe.STANDARD_INNSATS.name)
         Innsatsgruppe.SITUASJONSBESTEMT_INNSATS.name -> listOf(