Skip to content

Commit

Permalink
Filtere i post request og sokId (#1170)
Browse files Browse the repository at this point in the history 
* mye virk

* rydding

* trolig mye vrik nå

* litt rydding

* bruker currentPage fra context og bruker nettressurs ku i avtaleoversikt

* rydding av ubrukt og utkommentert kode

* fikser sammenligning av søk fra backend og filtere slik at ting kan legges til i useEffect dep array

* Rettet opp i useEffects som klaget på manglende dependencies. lagt til alle deps den ber om og håndtert at den trigger ved flere ting

* rydding

* støtte for arbeidsgivervisning. setter bedriftNr på filter når man endrer i menyen i stedet for magisk queryparam lytting

* flytter ut hjelpefunksjon

* fikser arbeidsgiver bedriftvelger inn i filteret og fikset håndtering av ugyldig sokId

* skriveleif

* fjerner unødvendig bedrift-mapping i rest-service og fikset bedrift filteret

* ryddet opp i rest-kallene

* 95% virk

* rydding

* masse virk

* alt virker

* mye arbeidsgiver virk

* oppgradert bedriftsmenyen, skrudd av automatisk setting av bedrift i quertparametere og håndterer litt div sånt selv

* Litt mer virk

* ryddet kommentar

* mer rydding

* tesy

* ny testt

* fjerner test som feiler - den gir uansett ingen verdi pt.

* lagt til useEffect dependency og fjernet ubrukt variabel

* Fiks logikk dersom sok er ugyldig

* Ved initiell POST, nullstill page

* Initiell last + sorteringskolonne

* Bevare sorteringskolonne ved initiell last

* replacer url for å muliggjøre navigering

* rydding

---------

Co-authored-by: Odd Andreas Sørsæther <[email protected]>
  • Loading branch information
@sindredl @Oddsor
sindredl and Oddsor authored Oct 17, 2023
1 parent 0e92625 commit 1caf7a5
Show file tree
Hide file tree
Showing 15 changed files with 334 additions and 123 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"@formatjs/intl-pluralrules": "^4.1.3",
"@formatjs/intl-relativetimeformat": "^9.2.3",
"@navikt/arbeidsgiver-notifikasjon-widget": "^6.3.9",
"@navikt/bedriftsmeny": "^6.4.3",
"@navikt/bedriftsmeny": "^6.11.0",
"@navikt/ds-css": "^5.2.1",
"@navikt/ds-icons": "^3.4.3",
"@navikt/ds-react": "^5.2.1",
Expand Down
126 changes: 96 additions & 30 deletions src/AvtaleOversikt/AvtaleOversikt.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,34 @@
import { ReactComponent as PlussIkon } from '@/assets/ikoner/pluss-tegn.svg';
import AvtaleOversiktArbeidsgiverInformasjon from '@/AvtaleOversikt/AvtaleOversiktArbeidsgiverInformasjon';
import Avtaler from '@/AvtaleOversikt/Avtaler';
import ArbeidsgiverFiltrering from '@/AvtaleOversikt/Filtrering/ArbeidsgiverFiltrering';
import VeilederFiltrering from '@/AvtaleOversikt/Filtrering/VeilederFiltrering';
import { useFilter } from '@/AvtaleOversikt/Filtrering/useFilter';
import LesMerOmLøsningen from '@/AvtaleOversikt/LesMerOmLøsningen/LesMerOmLøsningen';
import useAvtaleOversiktLayout from '@/AvtaleOversikt/useAvtaleOversiktLayout';
import { InnloggetBrukerContext } from '@/InnloggingBoundary/InnloggingBoundary';
import { ReactComponent as PlussIkon } from '@/assets/ikoner/pluss-tegn.svg';
import Banner from '@/komponenter/Banner/Banner';
import BannerNAVAnsatt from '@/komponenter/Banner/BannerNAVAnsatt';
import Dokumenttittel from '@/komponenter/Dokumenttittel';
import VerticalSpacer from '@/komponenter/layout/VerticalSpacer';
import LenkeKnapp from '@/komponenter/lenkeknapp/LenkeKnapp';
import { pathTilOpprettAvtale, pathTilOpprettAvtaleArbeidsgiver } from '@/paths';
import { hentAvtalerForInnloggetBruker, hentUlesteVarsler } from '@/services/rest-service';
import {
hentAvtalerForInnloggetBrukerMedPost,
hentAvtalerForInnloggetBrukerMedSokId,
hentUlesteVarsler,
} from '@/services/rest-service';
import { Avtale, PageableAvtale } from '@/types/avtale';
import { Status } from '@/types/nettressurs';
import { Varsel } from '@/types/varsel';
import BEMHelper from '@/utils/bem';
import { fjernTommeFelterFraObjekt } from '@/utils/stringUtils';
import { Pagination } from '@navikt/ds-react';
import React, { FunctionComponent, useContext, useEffect, useState } from 'react';
import { useFilter } from '@/AvtaleOversikt/Filtrering/useFilter';
import Banner from '@/komponenter/Banner/Banner';
import ArbeidsgiverFiltrering from '@/AvtaleOversikt/Filtrering/ArbeidsgiverFiltrering';
import LenkeKnapp from '@/komponenter/lenkeknapp/LenkeKnapp';
import _ from 'lodash';
import { FunctionComponent, useContext, useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import './AvtaleOversikt.less';
import { Status } from '@/types/nettressurs';
import { AvtalelisteRessurs, PageableAvtale } from '@/types/avtale';
import AvtaleOversiktArbeidsgiverInformasjon from '@/AvtaleOversikt/AvtaleOversiktArbeidsgiverInformasjon';
import { FiltreringContext } from './Filtrering/FiltreringProvider';

const cls = BEMHelper('avtaleoversikt');
const clsPagination = BEMHelper('avtaleoversikt-pagination');
Expand All @@ -30,17 +38,74 @@ const AvtaleOversikt: FunctionComponent = () => {

const [varsler, setVarsler] = useState<Varsel[]>([]);
const { filtre, endreFilter } = useFilter();
const [currentPage, setCurrentPage] = useState<PageableAvtale>();
const [nettressurs, setNettressurs] = useState<AvtalelisteRessurs>({ status: Status.IkkeLastet });
const [searchParams, setSearchParams] = useSearchParams();
const [, , nettressursCtx, setNettressursCtx] = useContext(FiltreringContext);


useEffect(() => {
setNettressurs({ status: Status.LasterInn });
const page = parseInt(filtre.page ? filtre.page : '1', 10)
hentAvtalerForInnloggetBruker(filtre, 10, page - 1).then((pagableAvtale: PageableAvtale) => {
setCurrentPage(pagableAvtale);
setNettressurs({ status: Status.Lastet, data: pagableAvtale.avtaler });
});
}, [filtre]);
if (nettressursCtx.status !== Status.Lastet) return;

const filtreUtenPage = _.omit(filtre, 'page', 'sorteringskolonne');
const erFiltreLikeNettressursFiltre = _.isEqual(fjernTommeFelterFraObjekt(nettressursCtx.data.sokeParametere), fjernTommeFelterFraObjekt(filtreUtenPage));

const filterPage = parseInt(filtre.page ? filtre.page : '1');
const sammePageIDataOgFilter = nettressursCtx.data.currentPage === (filterPage - 1);
const sammeSorteringIUrlOgFilter = searchParams.get('sorteringskolonne') === filtre.sorteringskolonne;
const sammeSokId = searchParams.get('sokId') === nettressursCtx.data.sokId;
const sammePageIUrlOgFilter = searchParams.get('page') === '' + (filterPage);
const sammeSorteringIDataOgFilter = nettressursCtx.data.sorteringskolonne === filtre.sorteringskolonne;

// console.log('\nsorteringIData:', nettressursCtx.data.sorteringskolonne, '\nsorteringFilter:', filtre.sorteringskolonne, '\nsorteringUrl:', searchParams.get('sorteringskolonne'), '\nsammeSorteringIUrlOgFilter:', sammeSorteringIUrlOgFilter,
// "\nsammeSokId", sammeSokId);
// console.log('innloggetBruker.rolle:', innloggetBruker.rolle);

// Hvis alt er likt i url, filter og data fra backend - ikke gjør noe.
if (sammePageIDataOgFilter && erFiltreLikeNettressursFiltre && sammeSorteringIDataOgFilter && sammeSokId && sammePageIUrlOgFilter && sammeSorteringIUrlOgFilter) return;

setNettressursCtx({ status: Status.LasterInn });
if (!erFiltreLikeNettressursFiltre) {
// Filteret er endret - Nytt POST-søk
hentAvtalerForInnloggetBrukerMedPost(filtre, 3, filterPage - 1).then((pagableAvtale: PageableAvtale) => {
if (innloggetBruker.rolle === 'ARBEIDSGIVER') {
// Håndtering valg i bedriftsmyen som arbeidsgiver
setSearchParams(fjernTommeFelterFraObjekt({ sokId: pagableAvtale.sokId, page: '' + (pagableAvtale.currentPage + 1), sorteringskolonne: filtre.sorteringskolonne, bedrift: pagableAvtale.sokeParametere.bedriftNr }));
} else {
setSearchParams(fjernTommeFelterFraObjekt({ sokId: pagableAvtale.sokId, page: '' + (pagableAvtale.currentPage + 1), sorteringskolonne: filtre.sorteringskolonne }));
}
setNettressursCtx({ status: Status.Lastet, data: pagableAvtale });
});
} else if (!sammePageIDataOgFilter || !sammeSorteringIDataOgFilter) {
// page/sortering er endret - Nytt GET-søk
hentAvtalerForInnloggetBrukerMedSokId(searchParams.get('sokId')!, 3, filterPage - 1, filtre.sorteringskolonne || undefined).then(
(pagableAvtale: PageableAvtale) => {
if (innloggetBruker.rolle === 'ARBEIDSGIVER') {
setSearchParams(fjernTommeFelterFraObjekt({ sokId: pagableAvtale.sokId, page: '' + (pagableAvtale.currentPage + 1), sorteringskolonne: pagableAvtale.sorteringskolonne, bedrift: pagableAvtale.sokeParametere.bedriftNr }));
} else {
setSearchParams(fjernTommeFelterFraObjekt({ sokId: pagableAvtale.sokId, page: '' + (pagableAvtale.currentPage + 1), sorteringskolonne: pagableAvtale.sorteringskolonne }));
}
setNettressursCtx({ status: Status.Lastet, data: pagableAvtale });
}
);
} else if (!sammeSokId || !sammePageIUrlOgFilter || !sammeSorteringIUrlOgFilter) {
// sokId/page/sortering endret i en navigering - Nytt GET-søk
// vi må da gjøre GET med sokId/page/sortering fra url, ikke fra filteret
// Vi setter heller ingenting i searchParams her, da det er her endringen skjer via en frem/tilbake navigering, vi må derimot sette filter, da endringen ikke kommer herfra, men fra url'en.
const sokIdFraUrl = searchParams.get('sokId')!;
const pageFraUrl = parseInt(searchParams.get('page') || '1');
const sorteringFraUrl = searchParams.get('sorteringskolonne') as keyof Avtale || '';
hentAvtalerForInnloggetBrukerMedSokId(sokIdFraUrl, 3, pageFraUrl - 1, sorteringFraUrl || undefined).then(
(pagableAvtale: PageableAvtale) => {
// const eksisterendeSearchParams = lagObjektAvSearchParams(searchParams);
// if (eksisterendeSearchParams.bedrift) setSearchParams({...eksisterendeSearchParams, bedrift: pagableAvtale.sokeParametere.bedriftNr});

setNettressursCtx({ status: Status.Lastet, data: pagableAvtale });
endreFilter({ page: '' + (pagableAvtale.currentPage + 1), sorteringskolonne: pagableAvtale.sorteringskolonne, ...pagableAvtale.sokeParametere});
}
);
}

}, [filtre, nettressursCtx, setNettressursCtx, searchParams, setSearchParams, endreFilter, innloggetBruker.rolle]);


useEffect(() => {
hentUlesteVarsler()
Expand All @@ -52,12 +117,12 @@ const AvtaleOversikt: FunctionComponent = () => {

const harTilgangerSomArbeidsgiver =
innloggetBruker.rolle === 'ARBEIDSGIVER' &&
filtre.bedrift &&
innloggetBruker.tilganger[filtre.bedrift]?.length > 0;
filtre.bedriftNr &&
innloggetBruker.tilganger[filtre.bedriftNr]?.length > 0;

const antallAvtalerSuffiks =
currentPage && (currentPage?.totalItems > 1 || currentPage?.totalItems === 0) ? ' avtaler' : ' avtale';
const antallAvtalerTekst = currentPage?.totalItems ? `(${currentPage?.totalItems} ${antallAvtalerSuffiks})` : ''
nettressursCtx.status === Status.Lastet && (nettressursCtx.data.totalItems > 1 || nettressursCtx.data.totalItems === 0) ? ' avtaler' : ' avtale';
const antallAvtalerTekst = nettressursCtx.status === Status.Lastet && nettressursCtx.data.totalItems ? `(${nettressursCtx.data.totalItems} ${antallAvtalerSuffiks})` : '';
const oversiktTekst = `Tiltaksoversikt ${antallAvtalerTekst}`;

const pageNumber = parseInt(filtre.page || '1');
Expand All @@ -66,8 +131,8 @@ const AvtaleOversikt: FunctionComponent = () => {
<>
<Dokumenttittel tittel={oversiktTekst} />
<Banner
byttetOrg={() => {
//parseWindowLocationSearch();
byttetOrg={(org) => {
endreFilter({bedriftNr: org});
}}
tekst={oversiktTekst}
/>
Expand All @@ -93,7 +158,7 @@ const AvtaleOversikt: FunctionComponent = () => {
)}
{innloggetBruker.rolle === 'ARBEIDSGIVER' &&
innloggetBruker.altinnOrganisasjoner.length > 0 &&
innloggetBruker.tilganger[filtre.bedrift!] && (
innloggetBruker.tilganger[filtre.bedriftNr!] && (
<aside style={layout.stylingAvFilter}>
{harTilgangerSomArbeidsgiver && (
<div style={{ margin: '0.2rem 0 1rem 0' }}>
Expand All @@ -106,17 +171,18 @@ const AvtaleOversikt: FunctionComponent = () => {
</aside>
)}
<section style={layout.stylingAvTabell}>
<Avtaler avtalelisteRessurs={nettressurs} innloggetBruker={innloggetBruker} varsler={varsler} />
<Avtaler avtalelisteRessurs={nettressursCtx} innloggetBruker={innloggetBruker} varsler={varsler} />
<AvtaleOversiktArbeidsgiverInformasjon rolle={innloggetBruker.rolle} cls={cls} />
<div className={clsPagination.className}>
{nettressurs.status === Status.LasterInn && <VerticalSpacer rem={3.9} />}
{pageNumber && nettressurs.status === Status.Lastet && currentPage!.totalPages > 0 && (
{nettressursCtx.status === Status.LasterInn && <VerticalSpacer rem={3.9} />}
{pageNumber && nettressursCtx.status === Status.Lastet && nettressursCtx.data.totalPages > 0 && (
<Pagination
page={pageNumber}
onPageChange={(x) => {
endreFilter({ page: '' + x });

}}
count={currentPage!.totalPages}
count={nettressursCtx.data.totalPages}
boundaryCount={1}
siblingCount={1}
/>
Expand Down
12 changes: 6 additions & 6 deletions src/AvtaleOversikt/Avtaler.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import AvtaleTabell from '@/AvtaleOversikt/AvtaleTabell';
import IngenAvtaler from '@/AvtaleOversikt/IngenAvtaler/IngenAvtaler';
import useAvtaleOversiktLayout from '@/AvtaleOversikt/useAvtaleOversiktLayout';
import { FeilVarselContext } from '@/FeilVarselProvider';
import { AvtalelisteRessurs } from '@/types/avtale';
import { PageableAvtalelisteRessurs } from '@/types/avtale';
import { InnloggetBruker } from '@/types/innlogget-bruker';
import { Status } from '@/types/nettressurs';
import { Varsel } from '@/types/varsel';
import { handterFeil } from '@/utils/apiFeilUtils';
import React, { FunctionComponent, useContext } from 'react';
import { FunctionComponent, useContext } from 'react';

type Props = {
avtalelisteRessurs: AvtalelisteRessurs;
avtalelisteRessurs: PageableAvtalelisteRessurs;
innloggetBruker: InnloggetBruker;
varsler: Varsel[];
};
Expand All @@ -23,18 +23,18 @@ export const Avtaler: FunctionComponent<Props> = (props) => {

if (props.avtalelisteRessurs.status === Status.LasterInn) {
return <AvtaleOversiktSkeleton erNavAnsatt={props.innloggetBruker.erNavAnsatt} />;
} else if (props.avtalelisteRessurs.status === Status.Lastet && props.avtalelisteRessurs.data.length === 0) {
} else if (props.avtalelisteRessurs.status === Status.Lastet && props.avtalelisteRessurs.data.avtaler.length === 0) {
return <IngenAvtaler />;
} else if (props.avtalelisteRessurs.status === Status.Lastet) {
return layout.erNokPlassTilTabell ? (
<AvtaleTabell
avtaler={props.avtalelisteRessurs.data}
avtaler={props.avtalelisteRessurs.data.avtaler}
varsler={props.varsler}
innloggetBruker={props.innloggetBruker}
/>
) : (
<AvtalekortMobil
avtaler={props.avtalelisteRessurs.data}
avtaler={props.avtalelisteRessurs.data.avtaler}
varsler={props.varsler}
innloggetBruker={props.innloggetBruker}
/>
Expand Down
32 changes: 21 additions & 11 deletions src/AvtaleOversikt/Filtrering/DeltakerOgBedriftFilter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { Filter } from '@/AvtaleOversikt/Filtrering/Filter';
import { SøkeInput } from '@/AvtaleOversikt/Filtrering/SøkeInput';
import { useFilter } from '@/AvtaleOversikt/Filtrering/useFilter';
import { InnloggetBrukerContext } from '@/InnloggingBoundary/InnloggingBoundary';
import { validerFnr } from '@/utils/fnrUtils';
import { validerOrgnr } from '@/utils/orgnrUtils';
import { Radio, RadioGroup, Select } from '@navikt/ds-react';
import React, { FormEvent, Fragment, FunctionComponent, useContext, useState } from 'react';
import { useFilter } from '@/AvtaleOversikt/Filtrering/useFilter';
import { isNil } from 'lodash';
import { FormEvent, Fragment, FunctionComponent, useCallback, useContext, useEffect, useState } from 'react';

type Validering = (verdi: string) => string | undefined;

Expand All @@ -21,29 +22,38 @@ export const DeltakerOgBedriftFilter: FunctionComponent = () => {
const innloggetBruker = useContext(InnloggetBrukerContext);
const { endreFilter, filtre } = useFilter();

const aktivSøketypeFraFiltre = (): Søketype => {
if (filtre.veilederNavIdent !== undefined && filtre.veilederNavIdent !== innloggetBruker.identifikator) {
const aktivSøketypeFraFiltre = useCallback((): Søketype => {

if (!isNil(filtre.veilederNavIdent) && filtre.veilederNavIdent !== innloggetBruker.identifikator) {
return 'veileder';
}
if (filtre.erUfordelt !== undefined) {
if (!isNil(filtre.erUfordelt)) {
return 'ufordelte';
}
if (filtre.deltakerFnr !== undefined) {
if (!isNil(filtre.deltakerFnr)) {
return 'deltaker';
}
if (filtre.navEnhet !== undefined) {
if (!isNil(filtre.navEnhet)) {
return 'avtaleVedEnhet';
}
if (filtre.bedriftNr !== undefined) {
if (!isNil(filtre.bedriftNr)) {
return 'bedrift';
}
if (filtre.avtaleNr !== undefined) {
if (!isNil(filtre.avtaleNr)) {
return 'avtaleNr';
}
return innloggetBruker.rolle === 'BESLUTTER' ? 'alle' : 'egne';
};
}, [filtre, innloggetBruker]);


const [aktivSøketype, setAktivSøkeType] = useState<Søketype>(aktivSøketypeFraFiltre());

useEffect(() => {
setAktivSøkeType(aktivSøketypeFraFiltre());
}, [filtre, aktivSøketypeFraFiltre])



const tomt = {
avtaleNr: undefined,
deltakerFnr: '',
Expand Down Expand Up @@ -97,7 +107,7 @@ export const DeltakerOgBedriftFilter: FunctionComponent = () => {
maxLength: 6,
validering: () => void 0,
søkeinput: filtre.avtaleNr,
utførSøk: (søkeord: number) => endreFilter({ ...tomt, avtaleNr: søkeord }),
utførSøk: (søkeord: string) => endreFilter({ ...tomt, avtaleNr: parseInt(søkeord) }),
},
avtaleVedEnhet: {
placeholder: '',
Expand Down
Loading

0 comments on commit 1caf7a5

Please sign in to comment.