nullstill filter-knapp

frontend/mulighetsrommet-veileder-flate/src/apps/modia/ModiaContext.tsx

@@ -3,8 +3,8 @@ import { useHydrateAtoms } from "jotai/utils";
 import { ReactNode, useEffect, useState } from "react";
 import { AppContextData, modiaContextAtom } from "./hooks/useModiaContext";
 import {
+  Filter,
   filterAtom,
-  FilterMedBrukerIKontekst,
   getDefaultFilterForBrukerIKontekst,
 } from "@/hooks/useArbeidsmarkedstiltakFilter";
 import { ReactQueryProvider } from "@/ReactQueryProvider";
@@ -21,7 +21,7 @@ function HydrateAtoms({
   children,
 }: {
   appContext: Partial<AppContextData>;
-  filter: FilterMedBrukerIKontekst;
+  filter: Filter;
   children: ReactNode;
 }) {
   /**
@@ -37,7 +37,7 @@ function HydrateAtoms({
 export function ModiaContext(props: ModiaContextProps) {
   const [contextData, setContextData] = useAtom(modiaContextAtom);
 
-  const [loadedFilter, setLoadedFilter] = useState<FilterMedBrukerIKontekst | null>(null);
+  const [loadedFilter, setLoadedFilter] = useState<Filter | null>(null);
 
   useEffect(() => {
     if (props.contextData) {

frontend/mulighetsrommet-veileder-flate/src/apps/modia/views/ModiaArbeidsmarkedstiltakOversikt.tsx

@@ -19,7 +19,7 @@ import { useFeatureToggle } from "@/core/api/feature-toggles";
 import { useHentAlleTiltakDeltMedBruker } from "@/apps/modia/hooks/useHentAlleTiltakDeltMedBruker";
 import { useHentBrukerdata } from "@/apps/modia/hooks/useHentBrukerdata";
 import { useVeilederTiltaksgjennomforinger } from "@/core/api/queries/useTiltaksgjennomforinger";
-import { useResetArbeidsmarkedstiltakFilter } from "@/hooks/useArbeidsmarkedstiltakFilter";
+import { useResetArbeidsmarkedstiltakFilterMedBrukerIKontekst } from "@/hooks/useArbeidsmarkedstiltakFilter";
 import { ManglerInnsatsOgServicegruppeVarsel } from "@/apps/modia/varsler/ManglerInnsatsOgServiceGruppeVarsel";
 import { FilterMenyMedSkeletonLoader } from "@/components/filtrering/FilterMenyMedSkeletonLoader";
 
@@ -29,7 +29,8 @@ export const ModiaArbeidsmarkedstiltakOversikt = () => {
   const { data: brukerdata } = useHentBrukerdata();
   const { alleTiltakDeltMedBruker } = useHentAlleTiltakDeltMedBruker();
 
-  const { filter, filterHasChanged, resetFilterToDefaults } = useResetArbeidsmarkedstiltakFilter();
+  const { filter, filterHasChanged, resetFilterToDefaults } =
+    useResetArbeidsmarkedstiltakFilterMedBrukerIKontekst();
 
   const landingssideFeature = useFeatureToggle(Toggles.MULIGHETSROMMET_VEILEDERFLATE_LANDINGSSIDE);
   const landingssideEnabled = landingssideFeature.isSuccess && landingssideFeature.data;

frontend/mulighetsrommet-veileder-flate/src/components/filtrering/FiltertagsArbeidsmarkedstiltak.tsx

@@ -0,0 +1,52 @@
+import { ApentForInnsok } from "mulighetsrommet-api-client";
+import {
+  ArbeidsmarkedstiltakFilterGruppe,
+  useArbeidsmarkedstiltakFilter,
+} from "@/hooks/useArbeidsmarkedstiltakFilter";
+import FilterTag from "../tags/FilterTag";
+import styles from "./Filtertags.module.scss";
+import { NavEnhetTag } from "./NavEnhetTag";
+
+export function Filtertags() {
+  const [filter, setFilter] = useArbeidsmarkedstiltakFilter();
+
+  return (
+    <div className={styles.filtertags} data-testid="filtertags">
+      <NavEnhetTag />
+      {filter.apentForInnsok !== ApentForInnsok.APENT_ELLER_STENGT && (
+        <FilterTag
+          options={[
+            {
+              id: filter.apentForInnsok,
+              tittel: filter.apentForInnsok === ApentForInnsok.APENT ? "Åpent" : "Stengt",
+            },
+          ]}
+          handleClick={() =>
+            setFilter({
+              ...filter,
+              apentForInnsok: ApentForInnsok.APENT_ELLER_STENGT,
+            })
+          }
+        />
+      )}
+      {filter.innsatsgruppe && <FilterTag options={[filter.innsatsgruppe]} />}
+      <FilterTag
+        options={filter.tiltakstyper}
+        handleClick={(id: string) =>
+          setFilter({
+            ...filter,
+            tiltakstyper: filter.tiltakstyper?.filter(
+              (tiltakstype: ArbeidsmarkedstiltakFilterGruppe<string>) => tiltakstype.id !== id,
+            ),
+          })
+        }
+      />
+      {filter.search && (
+        <FilterTag
+          options={[{ id: "search", tittel: `'${filter.search}'` }]}
+          handleClick={() => setFilter({ ...filter, search: "" })}
+        />
+      )}
+    </div>
+  );
+}

frontend/mulighetsrommet-veileder-flate/src/components/filtrering/NavEnhetFilter.tsx

@@ -4,10 +4,10 @@ import classnames from "classnames";
 import { useAtom } from "jotai";
 import { NavEnhet, NavRegion } from "mulighetsrommet-api-client";
 import { useState } from "react";
-import { useRegioner } from "../../core/api/queries/useRegioner";
-import { filterAccordionAtom } from "../../core/atoms/atoms";
-import { RegionMap } from "../../hooks/useArbeidsmarkedstiltakFilter";
-import { addOrRemove } from "../../utils/Utils";
+import { useRegioner } from "@/core/api/queries/useRegioner";
+import { filterAccordionAtom } from "@/core/atoms/atoms";
+import { RegionMap } from "@/hooks/useArbeidsmarkedstiltakFilter";
+import { addOrRemove } from "@/utils/Utils";
 import styles from "./NavEnhetFilter.module.scss";
 
 interface Props {
@@ -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
@@ -89,7 +89,7 @@ export function NavEnhetFilter({
           legend=""
           hideLegend
           size="small"
-          data-testid={"checkboxgroup_brukers-enhet"}
+          data-testid="checkboxgroup_brukers-enhet"
         >
           {alleRegioner?.map((region: NavRegion) => (
             <div key={region.enhetsnummer}>

frontend/mulighetsrommet-veileder-flate/src/components/tags/NavEnhetTag.tsx

@@ -0,0 +1,62 @@
+import { Tag } from "@navikt/ds-react";
+import {
+  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;
+}
+
+export function NavEnhetTag({ handleClick }: Props) {
+  const filter = useArbeidsmarkedstiltakFilterValue();
+  const { data: alleEnheter } = useNavEnheter();
+  const enheter = valgteEnhetsnumre(filter);
+
+  if (!alleEnheter || !filter || enheter.length === 0) {
+    return null;
+  }
+
+  function tagLabel() {
+    const firstEnhetName = alleEnheter?.find(
+      (enhet: NavEnhet) => enhet.enhetsnummer === enheter[0],
+    )?.navn;
+    if (enheter.length > 1) {
+      return `${firstEnhetName} +${enheter.length - 1}`;
+    }
+    return firstEnhetName;
+  }
+
+  return (
+    <Tag
+      key="navenhet"
+      size="small"
+      data-testid="filtertag_navenhet"
+      title="Valgt enhet"
+      variant="info"
+    >
+      {tagLabel()}
+      {handleClick ? (
+        <Ikonknapp
+          className={styles.overstyrt_ikon_knapp}
+          handleClick={() => handleClick(filtertype.id)}
+          ariaLabel="Lukke"
+          data-testid={`filtertag_lukkeknapp_${kebabCase(filtertype.tittel)}`}
+          icon={
+            <XMarkIcon
+              data-testid={`filtertag_lukkeknapp_${kebabCase(filtertype.tittel)}`}
+              className={styles.ikon}
+              aria-label="Lukke"
+            />
+          }
+        />
+      ) : null}
+    </Tag>
+  );
+}

frontend/mulighetsrommet-veileder-flate/src/hooks/useArbeidsmarkedstiltakFilter.ts

@@ -37,20 +37,34 @@ export function useArbeidsmarkedstiltakFilter(): [
   ];
 }
 
+export function useArbeidsmarkedstiltakFilterUtenBrukerIKontekst(): [
+  ArbeidsmarkedstiltakFilter,
+  (filter: ArbeidsmarkedstiltakFilter) => void,
+] {
+  const [value, setValue] = useAtom(filterAtom);
+
+  return [
+    value.filter,
+    (filter: ArbeidsmarkedstiltakFilter) => {
+      setValue({ brukerIKontekst: null, filter });
+    },
+  ];
+}
+
 export function useArbeidsmarkedstiltakFilterValue() {
   const value = useAtomValue(filterAtom);
   return value.filter;
 }
 
-export function useResetArbeidsmarkedstiltakFilter() {
+export function useResetArbeidsmarkedstiltakFilterMedBrukerIKontekst() {
   const [{ brukerIKontekst, filter }, setValue] = useAtom(filterAtom);
 
   const { data: brukerdata } = useHentBrukerdata();
 
   const filterHasChanged =
-    filter.innsatsgruppe?.nokkel !== brukerdata?.innsatsgruppe ||
-    filter.apentForInnsok !== ApentForInnsok.APENT_ELLER_STENGT ||
     filter.search !== "" ||
+    filter.apentForInnsok !== ApentForInnsok.APENT_ELLER_STENGT ||
+    filter.innsatsgruppe?.nokkel !== brukerdata?.innsatsgruppe ||
     brukersEnhetFilterHasChanged(filter, brukerdata) ||
     filter.tiltakstyper.length > 0;
 
@@ -66,14 +80,34 @@ export function useResetArbeidsmarkedstiltakFilter() {
   };
 }
 
-export interface FilterMedBrukerIKontekst {
+export function useResetArbeidsmarkedstiltakFilterUtenBrukerIKontekst() {
+  const [{ filter }, setValue] = useAtom(filterAtom);
+
+  const filterHasChanged =
+    filter.search !== "" ||
+    filter.apentForInnsok !== ApentForInnsok.APENT_ELLER_STENGT ||
+    filter.innsatsgruppe?.nokkel !== undefined ||
+    valgteEnhetsnumre(filter).length !== 0 ||
+    filter.tiltakstyper.length > 0;
+
+  return {
+    filter,
+    filterHasChanged,
+    resetFilterToDefaults() {
+      setValue({
+        brukerIKontekst: null,
+        filter: defaultTiltaksgjennomforingfilter,
+      });
+    },
+  };
+}
+
+export interface Filter {
   brukerIKontekst: string | null;
   filter: ArbeidsmarkedstiltakFilter;
 }
 
-export function getDefaultFilterForBrukerIKontekst(
-  brukerIKontekst: string | null,
-): FilterMedBrukerIKontekst {
+export function getDefaultFilterForBrukerIKontekst(brukerIKontekst: string | null): Filter {
   const defaultFilterForBrukerIKontekst = {
     brukerIKontekst,
     filter: defaultTiltaksgjennomforingfilter,
@@ -89,9 +123,7 @@ export function getDefaultFilterForBrukerIKontekst(
     : defaultFilterForBrukerIKontekst;
 }
 
-const filterStorage: SyncStorage<FilterMedBrukerIKontekst> = createJSONStorage(
-  () => sessionStorage,
-);
+const filterStorage: SyncStorage<Filter> = createJSONStorage(() => sessionStorage);
 
 const ARBEIDSMARKEDSTILTAK_FILTER_KEY = "arbeidsmarkedstiltak-filter";
 
@@ -103,7 +135,7 @@ const defaultTiltaksgjennomforingfilter: ArbeidsmarkedstiltakFilter = {
   apentForInnsok: ApentForInnsok.APENT_ELLER_STENGT,
 };
 
-export const filterAtom = atomWithStorage<FilterMedBrukerIKontekst>(
+export const filterAtom = atomWithStorage<Filter>(
   ARBEIDSMARKEDSTILTAK_FILTER_KEY,
   { brukerIKontekst: null, filter: defaultTiltaksgjennomforingfilter },
   filterStorage,