Paging på oppgavebenken. Endrer på query params for tildeling. Fjerne…

…r custom Container komponent til fordel for Vstack
navikt · Dec 12, 2024 · 01e46b5 · 01e46b5
1 parent 7adaf18
commit 01e46b5
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 61 deletions.
diff --git a/client/src/oppgavebenk/Oppgavebenk.tsx b/client/src/oppgavebenk/Oppgavebenk.tsx
@@ -10,20 +10,21 @@ import { Skjermlesertittel } from '../felleskomponenter/typografi'
 import { FilterDropdown } from '../oppgaveliste/filter'
 import { OppgavelisteTabs } from '../oppgaveliste/OppgavelisteTabs'
 import { useLocalStorageState } from '../oppgaveliste/useLocalStorageState'
-import { OppgaveApiOppgave, OppgaveGjelderFilter, OppgaverFilter, OppgavetemaLabel } from '../types/experimentalTypes'
+import { OppgaveApiOppgave, OppgaveGjelderFilter, TildeltFilter, OppgavetemaLabel } from '../types/experimentalTypes'
 import { Oppgavetype } from '../types/types.internal'
 import { formaterDato, formaterTidsstempel } from '../utils/dato'
 import { formaterFødselsnummer, formaterNavn, storForbokstavIAlleOrd, storForbokstavIOrd } from '../utils/formater'
 import { isError } from '../utils/type'
 import { useOppgavelisteV2 } from './useOppgavelisteV2'
 import { Oppgavetildeling } from './Oppgavetildeling'
+import { Paging } from '../oppgaveliste/paging/Paging'
 
 export function Oppgavebenk() {
-  const [oppgaverFilter, setOppgaverFilter] = useLocalStorageState('oppgaverFilter', OppgaverFilter.UFORDELTE)
+  const [tildeltFilter, setTildeltFilter] = useLocalStorageState('oppgaverFilter', TildeltFilter.INGEN)
   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 [currentPage, setCurrentPage] = useLocalStorageState('currentPage', 1)
 
   const initialSortState: SortState = {
     orderBy: 'OPPRETTET_TIDSPUNKT',
@@ -32,18 +33,18 @@ export function Oppgavebenk() {
 
   const [sort, setSort] = useLocalStorageState<SortState>('oppgavebenkSortState', initialSortState)
 
-  const { oppgaver, isLoading, error } = useOppgavelisteV2(1, sort, { oppgaverFilter, gjelderFilter })
+  const { oppgaver, isLoading, error, totalElements } = useOppgavelisteV2(1, sort, { tildeltFilter, gjelderFilter })
 
   const handleFilter = (handler: (...args: any[]) => any, value: OppgaveGjelderFilter | string) => {
     handler(value)
-    //setCurrentPage(1)
+    setCurrentPage(1)
   }
 
   const clearFilters = () => {
     setGjelderFilter(OppgaveGjelderFilter.ALLE)
-    setOppgaverFilter(OppgaverFilter.UFORDELTE)
+    setTildeltFilter(TildeltFilter.INGEN)
     setSort(initialSortState)
-    //setCurrentPage(1)
+    setCurrentPage(1)
   }
 
   const kolonner = [
@@ -207,16 +208,16 @@ export function Oppgavebenk() {
         <HStack gap="4" align="end">
           <ToggleGroup
             label="Oppgaver"
-            value={oppgaverFilter}
+            value={tildeltFilter}
             size="small"
             onChange={(filterValue) => {
-              handleFilter(setOppgaverFilter, filterValue)
+              handleFilter(setTildeltFilter, filterValue)
             }}
             style={{ background: 'var(--a-bg-default)' }}
           >
-            <ToggleGroup.Item value="UFORDELTE" label="Ufordelte" />
-            <ToggleGroup.Item value="MINE" label="Mine oppgaver" />
-            <ToggleGroup.Item value="ALLE" label="Enhetens oppgaver" />
+            <ToggleGroup.Item value={TildeltFilter.INGEN} label="Ufordelte" />
+            <ToggleGroup.Item value={TildeltFilter.MEG} label="Mine oppgaver" />
+            <ToggleGroup.Item value={TildeltFilter.ALLE} label="Enhetens oppgaver" />
           </ToggleGroup>
           <FilterDropdown
             handleChange={(filterValue: OppgaveGjelderFilter) => {
@@ -262,14 +263,7 @@ export function Oppgavebenk() {
                   </Table.Header>
                   <Table.Body>
                     {oppgaver.map((oppgave: OppgaveApiOppgave) => (
-                      <Table.Row
-                        key={oppgave.oppgaveId}
-                        /*path={
-                          oppgave.oppgavetype !== Oppgavetype.JOURNALFØRING
-                            ? `/dokument/${oppgave.journalpostId}`
-                            : `/sak/${oppgave.sakId}`
-                        }*/
-                      >
+                      <Table.Row key={oppgave.oppgaveId}>
                         {kolonner.map(({ render, width, key }) => (
                           <DataCell
                             key={key}
@@ -286,11 +280,11 @@ export function Oppgavebenk() {
                   </Table.Body>
                 </Table>
 
-                {/*<Paging
-                  totalCount={totalCount}
+                <Paging
+                  totalElements={totalElements}
                   currentPage={currentPage}
                   onPageChange={(page: number) => setCurrentPage(page)}
-                        />*/}
+                />
               </ScrollWrapper>
             ) : (
               <IngentingFunnet>Ingen oppgaver funnet</IngentingFunnet>

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, OppgaveGjelderFilter, OppgaverFilter } from '../types/experimentalTypes'
+import { OppgaveApiOppgave, OppgaveApiResponse, OppgaveGjelderFilter, TildeltFilter } from '../types/experimentalTypes'
 import { SortState } from '@navikt/ds-react'
 
 interface DataResponse {
@@ -24,7 +24,7 @@ interface PathConfigType {
 }
 
 interface Filters {
-  oppgaverFilter: string
+  tildeltFilter: string
   gjelderFilter: string
 }
 
@@ -36,25 +36,25 @@ interface Filters {
   totalElements: number
 }*/
 
-const pathConfig = (/*currentPage: number,*/ sort: SortState, filters: Filters): PathConfigType => {
+const pathConfig = (currentPage: number, sort: SortState, filters: Filters): PathConfigType => {
   const sortDirection = sort.direction === 'ascending' ? 'ASC' : 'DESC'
-  //const pagingParams = { limit: PAGE_SIZE, page: currentPage }
+  const pagingParams = { limit: PAGE_SIZE, offset: currentPage - 1 }
   const sortParams = { sorteringsfelt: sort.orderBy, sorteringsrekkefølge: sortDirection }
-  const { oppgaverFilter, gjelderFilter } = filters
+  const { tildeltFilter, gjelderFilter } = filters
 
   const filterParams: any = {}
 
   if (gjelderFilter && gjelderFilter !== OppgaveGjelderFilter.ALLE) {
     filterParams.gjelder = gjelderFilter
   }
 
-  if (oppgaverFilter && oppgaverFilter !== OppgaverFilter.ALLE) {
-    filterParams.oppgaver = oppgaverFilter
+  if (tildeltFilter && tildeltFilter !== TildeltFilter.ALLE) {
+    filterParams.tildelt = tildeltFilter
   }
 
   return {
     path: `${basePath}`,
-    queryParams: { /*...pagingParams,*/ ...sortParams, ...filterParams },
+    queryParams: { ...pagingParams, ...sortParams, ...filterParams },
   }
 }
 
@@ -65,7 +65,7 @@ const buildQueryParamString = (queryParams: Record<string, string>) => {
 }
 
 export function useOppgavelisteV2(currentPage: number, sort: SortState, filters: Filters): DataResponse {
-  const { path, queryParams } = pathConfig(/*currentPage,*/ sort, filters)
+  const { path, queryParams } = pathConfig(currentPage, sort, filters)
   const fullPath = `${path}?${buildQueryParamString(queryParams)}`
   const { data, error, mutate } = useSwr<{ data: OppgaveApiResponse }>(fullPath, httpGet, { refreshInterval: 10000 })
 

diff --git a/client/src/oppgaveliste/paging/PageCounter.tsx b/client/src/oppgaveliste/paging/PageCounter.tsx
@@ -18,7 +18,7 @@ export function PageCounter({ pageSize, totalElements, currentPage }: PageCounte
         <Tekst>
           {`Viser ${førsteSynligeOppgave} - ${
             sisteOppgave > totalElements ? totalElements : sisteOppgave
-          } av ${totalElements} saker`}
+          } av ${totalElements} oppgaver`}
         </Tekst>
       </Container>
     </>

diff --git a/client/src/oppgaveliste/paging/Paging.tsx b/client/src/oppgaveliste/paging/Paging.tsx
@@ -1,15 +1,7 @@
-import styled from 'styled-components'
-
-import { Pagination } from '@navikt/ds-react'
+import { Pagination, VStack } from '@navikt/ds-react'
 
 import { PageCounter } from './PageCounter'
 
-const Container = styled.div`
-  display: flex;
-  margin-top: 2rem;
-  justify-content: space-between;
-`
-
 export const PAGE_SIZE = 25
 
 interface PagingProps {
@@ -23,19 +15,17 @@ export function Paging({ totalElements, currentPage, onPageChange }: PagingProps
   const hasMultiplePages = totalNumberOfPages > 1
 
   return (
-    <>
-      <Container>
-        {hasMultiplePages && (
-          <Pagination
-            count={totalNumberOfPages}
-            page={currentPage}
-            prevNextTexts={true}
-            size="small"
-            onPageChange={(page: number) => onPageChange(page)}
-          />
-        )}
-      </Container>
+    <VStack gap="2" marginBlock="6 0">
+      {hasMultiplePages && (
+        <Pagination
+          count={totalNumberOfPages}
+          page={currentPage}
+          prevNextTexts={true}
+          size="small"
+          onPageChange={(page: number) => onPageChange(page)}
+        />
+      )}
       <PageCounter pageSize={PAGE_SIZE} currentPage={currentPage} totalElements={totalElements} />
-    </>
+    </VStack>
   )
 }
diff --git a/client/src/types/experimentalTypes.ts b/client/src/types/experimentalTypes.ts
@@ -63,16 +63,16 @@ export const OppgavetemaLabel = new Map<string, string>([
   [OppgaveGjelderFilter.HASTESØKNAD, 'Hastesøknad'],
 ])
 
-export enum OppgaverFilter {
+export enum TildeltFilter {
   ALLE = 'ALLE',
-  UFORDELTE = 'UFORDELTE',
-  MINE = 'MINE',
+  INGEN = 'INGEN',
+  MEG = 'MEG',
 }
 
 export const SakerFilterLabel = new Map<string, string>([
-  [OppgaverFilter.ALLE, 'Alle'],
-  [OppgaverFilter.MINE, 'Mine saker'],
-  [OppgaverFilter.UFORDELTE, 'Ufordelte'],
+  [TildeltFilter.ALLE, 'Alle'],
+  [TildeltFilter.MEG, 'Mine oppgaver'],
+  [TildeltFilter.INGEN, 'Ufordelte'],
 ])
 /*