Filter på gjelder i oppgavebenk

navikt · Dec 6, 2024 · a19f222 · a19f222
1 parent 1e635c7
commit a19f222
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 95 deletions.
diff --git a/client/src/oppgavebenk/Oppgavebenk.tsx b/client/src/oppgavebenk/Oppgavebenk.tsx
@@ -9,23 +9,26 @@ import { IngentingFunnet } from '../felleskomponenter/IngenOppgaver'
 import { Toast } from '../felleskomponenter/Toast'
 import { EllipsisCell, TekstCell } from '../felleskomponenter/table/Celle'
 import { Skjermlesertittel } from '../felleskomponenter/typografi'
-import { OppgaveApiOppgave } from '../types/experimentalTypes'
+import { OppgaveApiOppgave, OppgaveGjelderFilter, OppgavetemaLabel } from '../types/experimentalTypes'
 import { formaterDato, formaterTidsstempel } from '../utils/dato'
 import { useOppgavelisteV2 } from './useOppgavelisteV2'
 import { Oppgavetildeling } from './Oppgavetildeling'
 import { OppgavelisteTabs } from '../oppgaveliste/OppgavelisteTabs'
 import { Oppgavetype } from '../types/types.internal'
+import { useLocalStorageState } from '../oppgaveliste/useLocalStorageState'
+import { FilterCombobox, FilterDropdown, Filters } from '../oppgaveliste/filter'
 
 export function Oppgavebenk() {
   //const [sakerFilter, setSakerFilter] = useLocalStorageState('sakerFilter', SakerFilter.UFORDELTE)
-  //const [statusFilter, setStatusFilter] = useLocalStorageState('statusFilter', OppgaveStatusType.ALLE)
+  const [gjelderFilter, setGjelderFilter] = useLocalStorageState('oppgavebenkGjelderFilter', OppgaveGjelderFilter.ALLE)
   //const [områdeFilter, setOmrådeFilter] = useLocalStorageState('områdeFilter', OmrådeFilter.ALLE)
   //const [sakstypeFilter, setSakstypeFilter] = useLocalStorageState('sakstypeFilter', SakstypeFilter.ALLE)
   //const [currentPage, setCurrentPage] = useLocalStorageState('currentPage', 1)
-  //const [sort, setSort] = useLocalStorageState<SortState>('sortState', { orderBy: 'MOTTATT', direction: 'ascending' })
+  //const [sort, setSort] = useLocalStorageState<SortState>('oppgavebenkSortState', { orderBy: 'MOTTATT', direction: 'ascending' })
 
   const { oppgaver, isLoading, error } = useOppgavelisteV2(
-    1
+    1,
+    { gjelderFilter }
     /*
       currentPage, sort, {
       sakerFilter,
@@ -36,22 +39,15 @@ export function Oppgavebenk() {
     */
   )
 
-  /*
-  const handleFilter = (handler: (...args: any[]) => any, value: SakerFilter | OppgaveStatusType | OmrådeFilter) => {
+  const handleFilter = (handler: (...args: any[]) => any, value: OppgaveGjelderFilter) => {
     handler(value)
-    setCurrentPage(1)
+    //setCurrentPage(1)
   }
-  */
 
-  /*
   const clearFilters = () => {
-    setSakerFilter(SakerFilter.UFORDELTE)
-    setStatusFilter(OppgaveStatusType.ALLE)
-    setSakstypeFilter(SakstypeFilter.ALLE)
-    setOmrådeFilter(OmrådeFilter.ALLE)
-    setCurrentPage(1)
+    setGjelderFilter(OppgaveGjelderFilter.ALLE)
+    //setCurrentPage(1)
   }
-  */
 
   const kolonner = [
     {
@@ -65,18 +61,19 @@ export function Oppgavebenk() {
     {
       key: 'REGISTRERT',
       name: 'Registrert',
-      width: 114,
+      width: 122,
       render: (oppgave: OppgaveApiOppgave) => <TekstCell value={formaterTidsstempel(oppgave.opprettetTidspunkt)} />,
     },
     {
       key: 'ENDRET',
       name: 'Endret',
-      width: 114,
+      width: 122,
       render: (oppgave: OppgaveApiOppgave) => <TekstCell value={formaterTidsstempel(oppgave.endretTidspunkt)} />,
     },
     {
       key: 'GJELDER',
       name: 'Gjelder',
+      sortable: true,
       width: 140,
       render: (oppgave: OppgaveApiOppgave) => (
         <TekstCell
@@ -204,42 +201,16 @@ export function Oppgavebenk() {
     <>
       <Skjermlesertittel>Oppgaveliste</Skjermlesertittel>
       <OppgavelisteTabs />
-      {/*<Filters onClear={clearFilters}>
-        <FilterDropdown
-          handleChange={(filterValue: SakerFilter) => {
-            handleFilter(setSakerFilter, filterValue)
-          }}
-          label="Saker"
-          value={sakerFilter}
-          options={SakerFilterLabel}
-        />
-        <FilterDropdown
-          handleChange={(filterValue: SakerFilter) => {
-            handleFilter(setStatusFilter, filterValue)
-          }}
-          label="Status"
-          value={statusFilter}
-          options={OppgaveStatusLabel}
-        />
-        {
-          <FilterDropdown
-            handleChange={(filterValue: SakerFilter) => {
-              handleFilter(setSakstypeFilter, filterValue)
-            }}
-            label="Sakstype"
-            value={sakstypeFilter}
-            options={SakstypeFilterLabel}
-          />
-        }
+      <Filters onClear={clearFilters}>
         <FilterDropdown
-          handleChange={(filterValue: SakerFilter) => {
-            handleFilter(setOmrådeFilter, filterValue)
+          handleChange={(filterValue: OppgavetemaFilter) => {
+            handleFilter(setGjelderFilter, filterValue)
           }}
-          label="Område"
-          value={områdeFilter}
-          options={OmrådeFilterLabel}
+          label="Gjelder"
+          value={gjelderFilter}
+          options={OppgavetemaLabel}
         />
-        </Filters>*/}
+      </Filters>
 
       {isLoading ? (
         <Toast>Henter oppgaver </Toast>

diff --git a/client/src/oppgavebenk/useOppgavelisteV2.ts b/client/src/oppgavebenk/useOppgavelisteV2.ts
@@ -2,7 +2,7 @@ import useSwr from 'swr'
 
 import { httpGet } from '../io/http'
 import { PAGE_SIZE } from '../oppgaveliste/paging/Paging'
-import { OppgaveApiOppgave, OppgaveApiResponse } from '../types/experimentalTypes'
+import { OppgaveApiOppgave, OppgaveApiResponse, OppgaveGjelderFilter } from '../types/experimentalTypes'
 
 interface DataResponse {
   oppgaver: OppgaveApiOppgave[]
@@ -17,21 +17,14 @@ interface DataResponse {
 
 const basePath = 'api/oppgaver-v2'
 
-/*
 interface PathConfigType {
   path: string
   queryParams: Record<string, string>
 }
-*/
 
-/*
 interface Filters {
-  sakerFilter: string
-  statusFilter: string
-  sakstypeFilter: string
-  områdeFilter: string
+  gjelderFilter: string
 }
-*/
 
 /*interface OppgavelisteResponse {
   oppgaver: OppgaveApiOppgave[]
@@ -41,57 +34,34 @@ interface Filters {
   totalElements: number
 }*/
 
-/*
-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 = { sort_by: `${sort.orderBy}.${sortDirection}` }
-  const { sakerFilter, statusFilter, sakstypeFilter, områdeFilter } = filters
+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 = { sort_by: `${sort.orderBy}.${sortDirection}` }
+  const { gjelderFilter } = filters
 
   const filterParams: any = {}
 
-  if (sakerFilter && sakerFilter !== SakerFilter.ALLE) {
-    filterParams.saksbehandler = sakerFilter
-  }
-  if (statusFilter && statusFilter !== OppgaveStatusType.ALLE) {
-    filterParams.status = statusFilter
-  }
-  if (sakstypeFilter && sakstypeFilter !== SakstypeFilter.ALLE) {
-    filterParams.type = sakstypeFilter
-  }
-  if (områdeFilter && områdeFilter !== OmrådeFilter.ALLE) {
-    filterParams.område = områdeFilter
+  if (gjelderFilter && gjelderFilter !== OppgaveGjelderFilter.ALLE) {
+    filterParams.gjelder = gjelderFilter
   }
 
   return {
     path: `${basePath}`,
-    queryParams: { ...pagingParams, ...sortParams, ...filterParams },
+    queryParams: { /*...pagingParams, ...sortParams, */ ...filterParams },
   }
 }
-*/
 
-/*
 const buildQueryParamString = (queryParams: Record<string, string>) => {
   return Object.entries(queryParams)
     .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
     .join('&')
 }
-*/
-
-export function useOppgavelisteV2(currentPage: number /*, sort: SortState, filters: Filters*/): DataResponse {
-  //const { path, queryParams } = pathConfig(currentPage, sort, filters)
-  //const fullPath = `${path}?${buildQueryParamString(queryParams)}`
-  const { data, error, mutate } = useSwr<{ data: OppgaveApiResponse }>(basePath, httpGet, { refreshInterval: 10000 })
 
-  /*
-  useEffect(() => {
-    logAmplitudeEvent(amplitude_taxonomy.OPPGAVELISTE_OPPDATERT, {
-      currentPage,
-      ...sort,
-      ...filters,
-    })
-  }, [currentPage, sort, filters])
-  */
+export function useOppgavelisteV2(currentPage: number, /*, sort: SortState,*/ filters: Filters): DataResponse {
+  const { path, queryParams } = pathConfig(/*currentPage, sort,*/ filters)
+  const fullPath = `${path}?${buildQueryParamString(queryParams)}`
+  const { data, error, mutate } = useSwr<{ data: OppgaveApiResponse }>(fullPath, httpGet, { refreshInterval: 10000 })
 
   return {
     oppgaver: data?.data.oppgaver || [],

diff --git a/client/src/oppgaveliste/filter.tsx b/client/src/oppgaveliste/filter.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import styled from 'styled-components'
 
-import { Button, Select, Switch } from '@navikt/ds-react'
+import { Button, Select, Switch, UNSAFE_Combobox } from '@navikt/ds-react'
 
 import { Knappepanel } from '../felleskomponenter/Knappepanel'
 
@@ -24,6 +24,12 @@ interface FilterProps {
   handleChange: (...args: any[]) => any
 }
 
+interface ComboboxProps {
+  label: string
+  value: string
+  options: string[]
+}
+
 export function FilterDropdown({ label, value, options, handleChange }: FilterProps) {
   return (
     <Dropdown label={label} size="small" value={value} onChange={(e) => handleChange(e.target.value)}>
@@ -38,6 +44,12 @@ export function FilterDropdown({ label, value, options, handleChange }: FilterPr
   )
 }
 
+export function FilterCombobox({ label, value, options }: ComboboxProps) {
+  return (
+    <UNSAFE_Combobox size="small" allowNewValues={false} value={value} label={label} isMultiSelect options={options} />
+  )
+}
+
 export function FilterToggle({
   label,
   value,

diff --git a/client/src/types/experimentalTypes.ts b/client/src/types/experimentalTypes.ts
@@ -48,6 +48,19 @@ export interface OppgaveApiResponse {
   totalElements: number
 }
 
+export enum OppgaveGjelderFilter {
+  ALLE = 'ALLE',
+  BESTILLING = 'BESTILLING',
+  DIGITAL_SØKNAD = 'DIGITAL_SØKNAD',
+  HASTESØKNAD = 'HASTESØKNAD',
+}
+
+export const OppgavetemaLabel = new Map<string, string>([
+  [OppgaveGjelderFilter.ALLE, 'Alle'],
+  [OppgaveGjelderFilter.BESTILLING, 'Bestilling'],
+  [OppgaveGjelderFilter.DIGITAL_SØKNAD, 'Søknad'],
+  [OppgaveGjelderFilter.HASTESØKNAD, 'Hastesøknad'],
+])
 /*
 
 [