From 01e46b5f21c312a603f97131f76c402a2f4a7dd9 Mon Sep 17 00:00:00 2001 From: matsbyfl Date: Thu, 12 Dec 2024 15:50:23 +0100 Subject: [PATCH] =?UTF-8?q?Paging=20p=C3=A5=20oppgavebenken.=20Endrer=20p?= =?UTF-8?q?=C3=A5=20query=20params=20for=20tildeling.=20Fjerner=20custom?= =?UTF-8?q?=20Container=20komponent=20til=20fordel=20for=20Vstack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/oppgavebenk/Oppgavebenk.tsx | 40 ++++++++----------- client/src/oppgavebenk/useOppgavelisteV2.ts | 18 ++++----- .../src/oppgaveliste/paging/PageCounter.tsx | 2 +- client/src/oppgaveliste/paging/Paging.tsx | 34 ++++++---------- client/src/types/experimentalTypes.ts | 12 +++--- 5 files changed, 45 insertions(+), 61 deletions(-) diff --git a/client/src/oppgavebenk/Oppgavebenk.tsx b/client/src/oppgavebenk/Oppgavebenk.tsx index 1c2aca72..c27930b0 100644 --- 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('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() { { - handleFilter(setOppgaverFilter, filterValue) + handleFilter(setTildeltFilter, filterValue) }} style={{ background: 'var(--a-bg-default)' }} > - - - + + + { @@ -262,14 +263,7 @@ export function Oppgavebenk() { {oppgaver.map((oppgave: OppgaveApiOppgave) => ( - + {kolonner.map(({ render, width, key }) => ( - {/* setCurrentPage(page)} - />*/} + /> ) : ( Ingen oppgaver funnet diff --git a/client/src/oppgavebenk/useOppgavelisteV2.ts b/client/src/oppgavebenk/useOppgavelisteV2.ts index 5a1d95ee..f0e51c64 100644 --- 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,11 +36,11 @@ 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 = {} @@ -48,13 +48,13 @@ const pathConfig = (/*currentPage: number,*/ sort: SortState, filters: Filters): 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) => { } 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 index 3a8643b0..edfafe53 100644 --- 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 {`Viser ${førsteSynligeOppgave} - ${ sisteOppgave > totalElements ? totalElements : sisteOppgave - } av ${totalElements} saker`} + } av ${totalElements} oppgaver`} diff --git a/client/src/oppgaveliste/paging/Paging.tsx b/client/src/oppgaveliste/paging/Paging.tsx index 945d4e6d..b22892d6 100644 --- 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 ( - <> - - {hasMultiplePages && ( - onPageChange(page)} - /> - )} - + + {hasMultiplePages && ( + onPageChange(page)} + /> + )} - + ) } diff --git a/client/src/types/experimentalTypes.ts b/client/src/types/experimentalTypes.ts index 96e91722..af5ea90a 100644 --- a/client/src/types/experimentalTypes.ts +++ b/client/src/types/experimentalTypes.ts @@ -63,16 +63,16 @@ export const OppgavetemaLabel = new Map([ [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([ - [OppgaverFilter.ALLE, 'Alle'], - [OppgaverFilter.MINE, 'Mine saker'], - [OppgaverFilter.UFORDELTE, 'Ufordelte'], + [TildeltFilter.ALLE, 'Alle'], + [TildeltFilter.MEG, 'Mine oppgaver'], + [TildeltFilter.INGEN, 'Ufordelte'], ]) /*