endrer struktur på oppbygging av query params sånn at vi kan ha flere…

… params med samme key. For å støtte multiselect på gjelder filter
navikt · Dec 18, 2024 · 0ce2735 · 0ce2735
1 parent 2059713
commit 0ce2735
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 57 deletions.
diff --git a/client/src/oppgavebenk/FilterContext.tsx b/client/src/oppgavebenk/FilterContext.tsx
@@ -6,8 +6,8 @@ import { SortState } from '@navikt/ds-react'
 interface FilterContextType {
   tildeltFilter: TildeltFilter
   setTildeltFilter: (tildelt: TildeltFilter) => void
-  gjelderFilter: OppgaveGjelderFilter
-  setGjelderFilter: (gjelder: OppgaveGjelderFilter) => void
+  gjelderFilter: OppgaveGjelderFilter[]
+  setGjelderFilter: (gjelder: OppgaveGjelderFilter[]) => void
   currentPage: number
   setCurrentPage: (currentPage: number) => void
   sort: SortState
@@ -23,7 +23,7 @@ const initialSortState: SortState = {
 const initialState: FilterContextType = {
   tildeltFilter: TildeltFilter.INGEN,
   setTildeltFilter: () => {},
-  gjelderFilter: OppgaveGjelderFilter.ALLE,
+  gjelderFilter: [],
   setGjelderFilter: () => {},
   currentPage: 1,
   setCurrentPage: () => {},
@@ -41,7 +41,7 @@ function FilterProvider({ children }: { children: ReactNode }) {
   const [sort, setSort] = useLocalStorageState<SortState>('oppgavebenkSortState', initialSortState)
 
   function clearFilters() {
-    setGjelderFilter(OppgaveGjelderFilter.ALLE)
+    setGjelderFilter([])
     setTildeltFilter(TildeltFilter.INGEN)
     setSort(initialSortState)
     setCurrentPage(1)

diff --git a/client/src/oppgavebenk/OppgaveFilter.tsx b/client/src/oppgavebenk/OppgaveFilter.tsx
@@ -1,6 +1,6 @@
-import { Box, Button, HStack, ToggleGroup } from '@navikt/ds-react'
-import { FilterDropdown } from '../oppgaveliste/filter/filter'
-import { OppgaveGjelderFilter, TildeltFilter } from '../types/experimentalTypes'
+import { Box, Button, HStack } from '@navikt/ds-react'
+import { FilterChips, FilterToggleGroup } from '../oppgaveliste/filter/filter'
+import { OppgaveFilterType, OppgaveGjelderFilter, TildeltFilter } from '../types/experimentalTypes'
 import { useFilterContext } from './FilterContext'
 
 export function Oppgavefilter() {
@@ -22,28 +22,23 @@ export function Oppgavefilter() {
       borderColor="border-subtle"
     >
       <HStack gap="4" align="end">
-        <ToggleGroup
+        <FilterToggleGroup
           label="Oppgaver"
           value={tildeltFilter}
-          size="small"
-          onChange={(filterValue) => {
+          handleChange={(filterValue) => {
             handleFilter(setTildeltFilter, filterValue)
           }}
-          style={{ background: 'var(--a-bg-default)' }}
-        >
-          {Object.entries(TildeltFilter).map(([key, value]) => {
-            return <ToggleGroup.Item key={key} value={value} label={SakerFilterLabel.get(value)} />
-          })}
-        </ToggleGroup>
-        <FilterDropdown
-          handleChange={(filterValue: OppgaveGjelderFilter) => {
+          options={tildeltFilterOptions}
+        />
+
+        <FilterChips
+          label="Gjelder"
+          selected={gjelderFilter}
+          options={oppgavetema}
+          handleChange={(filterValue) => {
             handleFilter(setGjelderFilter, filterValue)
           }}
-          label="Gjelder"
-          value={gjelderFilter}
-          options={OppgavetemaLabel}
         />
-        {/*<CheckboxFilter selected={['Digital søknad']} options={[...OppgavetemaLabel.keys()]} />*/}
         <Button variant="tertiary-neutral" size="small" onClick={() => clearFilters()}>
           Tilbakestill filtre
         </Button>
@@ -52,15 +47,14 @@ export function Oppgavefilter() {
   )
 }
 
-const SakerFilterLabel = new Map<string, string>([
-  [TildeltFilter.ALLE, 'Enhetens oppgaver'],
-  [TildeltFilter.MEG, 'Mine oppgaver'],
-  [TildeltFilter.INGEN, 'Ufordelte'],
-])
+const tildeltFilterOptions = [
+  { key: TildeltFilter.ALLE, label: 'Enhetens oppgaver' },
+  { key: TildeltFilter.MEG, label: 'Mine oppgaver' },
+  { key: TildeltFilter.INGEN, label: 'Ufordelte' },
+]
 
-const OppgavetemaLabel = new Map<string, string>([
-  [OppgaveGjelderFilter.ALLE, 'Alle'],
-  [OppgaveGjelderFilter.BESTILLING, 'Bestilling'],
-  [OppgaveGjelderFilter.DIGITAL_SØKNAD, 'Søknad'],
-  [OppgaveGjelderFilter.HASTESØKNAD, 'Hastesøknad'],
-])
+const oppgavetema: OppgaveFilterType[] = [
+  { key: OppgaveGjelderFilter.BESTILLING, label: 'Bestilling' },
+  { key: OppgaveGjelderFilter.DIGITAL_SØKNAD, label: 'Søknad' },
+  { key: OppgaveGjelderFilter.HASTESØKNAD, label: 'Hastesøknad' },
+]
diff --git a/client/src/oppgavebenk/useOppgavelisteV2.ts b/client/src/oppgavebenk/useOppgavelisteV2.ts
@@ -1,9 +1,9 @@
 import useSwr from 'swr'
 
+import { SortState } from '@navikt/ds-react'
 import { httpGet } from '../io/http'
 import { PAGE_SIZE } from '../oppgaveliste/paging/Paging'
-import { OppgaveApiOppgave, OppgaveApiResponse, OppgaveGjelderFilter, TildeltFilter } from '../types/experimentalTypes'
-import { SortState } from '@navikt/ds-react'
+import { OppgaveApiOppgave, OppgaveApiResponse, TildeltFilter } from '../types/experimentalTypes'
 
 interface DataResponse {
   oppgaver: OppgaveApiOppgave[]
@@ -20,47 +20,49 @@ const basePath = 'api/oppgaver-v2'
 
 interface PathConfigType {
   path: string
-  queryParams: Record<string, string>
+  queryParams: QueryParam[]
 }
 
 interface Filters {
   tildeltFilter: string
-  gjelderFilter: string
+  gjelderFilter: string[]
 }
 
-/*interface OppgavelisteResponse {
-  oppgaver: OppgaveApiOppgave[]
-  pageNumber: number
-  pageSize: number
-  totalPages: number
-  totalElements: number
-}*/
+interface QueryParam {
+  key: string
+  value: string
+}
 
 const pathConfig = (currentPage: number, sort: SortState, filters: Filters): PathConfigType => {
-  const sortDirection = sort.direction === 'ascending' ? 'ASC' : 'DESC'
-  const pagingParams = { limit: PAGE_SIZE, page: currentPage }
-  const sortParams = { sorteringsfelt: sort.orderBy, sorteringsrekkefølge: sortDirection }
   const { tildeltFilter, gjelderFilter } = filters
+  const sortDirection = sort.direction === 'ascending' ? 'ASC' : 'DESC'
 
-  const filterParams: any = {}
+  const queryParams: QueryParam[] = [
+    { key: 'sorteringsfelt', value: sort.orderBy },
+    { key: 'sorteringsrekkefølge', value: sortDirection },
+    { key: 'limit', value: PAGE_SIZE.toString() },
+    { key: 'page', value: currentPage.toString() },
+  ]
 
-  if (gjelderFilter && gjelderFilter !== OppgaveGjelderFilter.ALLE) {
-    filterParams.gjelder = gjelderFilter
+  if (gjelderFilter.length > 0) {
+    gjelderFilter.forEach((filter) => {
+      queryParams.push({ key: 'gjelder', value: filter })
+    })
   }
 
   if (tildeltFilter && tildeltFilter !== TildeltFilter.ALLE) {
-    filterParams.tildelt = tildeltFilter
+    queryParams.push({ key: 'tildelt', value: tildeltFilter })
   }
 
   return {
     path: `${basePath}`,
-    queryParams: { ...pagingParams, ...sortParams, ...filterParams },
+    queryParams: queryParams,
   }
 }
 
-const buildQueryParamString = (queryParams: Record<string, string>) => {
-  return Object.entries(queryParams)
-    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+const buildQueryParamString = (queryParams: QueryParam[]) => {
+  return queryParams
+    .map((queryParam) => `${encodeURIComponent(queryParam.key)}=${encodeURIComponent(queryParam.value)}`)
     .join('&')
 }
 

diff --git a/client/src/oppgaveliste/filter/filter.tsx b/client/src/oppgaveliste/filter/filter.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 
-import { Select, Switch, UNSAFE_Combobox } from '@navikt/ds-react'
+import { Chips, Label, Select, Switch, ToggleGroup, UNSAFE_Combobox, VStack } from '@navikt/ds-react'
+import { OppgaveFilterType } from '../../types/experimentalTypes'
 
 const Dropdown = styled(Select)`
   width: 210px;
@@ -13,6 +14,20 @@ interface FilterProps {
   handleChange: (...args: any[]) => any
 }
 
+interface ToggleGroupProps {
+  label: string
+  value: string
+  options: OppgaveFilterType[]
+  handleChange: (...args: any[]) => any
+}
+
+interface ChipsProps {
+  label: string
+  selected: string[]
+  options: OppgaveFilterType[]
+  handleChange: (...args: any[]) => any
+}
+
 interface ComboboxProps {
   label: string
   value: string
@@ -33,6 +48,49 @@ export function FilterDropdown({ label, value, options, handleChange }: FilterPr
   )
 }
 
+export function FilterToggleGroup({ label, value, options, handleChange }: ToggleGroupProps) {
+  return (
+    <ToggleGroup
+      label={label}
+      value={value}
+      size="small"
+      onChange={(filterValue) => {
+        handleChange(filterValue)
+      }}
+      style={{ background: 'var(--a-bg-default)' }}
+    >
+      {options.map((option) => {
+        return <ToggleGroup.Item key={option.key} value={option.key} label={option.label} />
+      })}
+    </ToggleGroup>
+  )
+}
+
+export function FilterChips({ label, selected, options, handleChange }: ChipsProps) {
+  return (
+    <VStack gap="3">
+      <Label size="small">{label}</Label>
+      <Chips size="medium">
+        {options.map((filter) => {
+          return (
+            <Chips.Toggle
+              key={filter.key}
+              selected={selected.includes(filter.key)}
+              onClick={() => {
+                handleChange(
+                  selected.includes(filter.key) ? selected.filter((x) => x !== filter.key) : [...selected, filter.key]
+                )
+              }}
+            >
+              {filter.label}
+            </Chips.Toggle>
+          )
+        })}
+      </Chips>
+    </VStack>
+  )
+}
+
 export function FilterCombobox({ label, value, options }: ComboboxProps) {
   return (
     <UNSAFE_Combobox size="small" allowNewValues={false} value={value} label={label} isMultiSelect options={options} />

diff --git a/client/src/types/experimentalTypes.ts b/client/src/types/experimentalTypes.ts
@@ -50,7 +50,6 @@ export interface OppgaveApiResponse {
 }
 
 export enum OppgaveGjelderFilter {
-  ALLE = 'ALLE',
   BESTILLING = 'BESTILLING',
   DIGITAL_SØKNAD = 'DIGITAL_SØKNAD',
   HASTESØKNAD = 'HASTESØKNAD',
@@ -62,6 +61,11 @@ export enum TildeltFilter {
   MEG = 'MEG',
 }
 
+export interface OppgaveFilterType {
+  key: string
+  label: string
+}
+
 /*
 
 [