Merge pull request #1356 from navikt/aksel-sortering-veilederoversikt

ingfo · web-flow · commit 5d4a35d8cbb9 · 2025-12-11T10:18:25.000+01:00
Rydd i sorteringa til Veilederoversikten
diff --git a/src/ducks/portefoljestorrelser.tsx b/src/ducks/portefoljestorrelser.tsx
@@ -6,7 +6,7 @@ const OK = 'veilarbportefolje/portefoljestorrelser/OK';
 const FEILET = 'veilarbportefolje/portefoljestorrelser/FEILET';
 const PENDING = 'veilarbportefolje/portefoljestorrelser/PENDING';
 
-interface FacetResults {
+export interface FacetResults {
     value: string;
     count: number;
 }
diff --git a/src/ducks/sortering.js b/src/ducks/sortering.js
diff --git a/src/ducks/sortering.ts b/src/ducks/sortering.ts
@@ -0,0 +1,56 @@
+export enum VeilederoversiktSorteringsfelt {
+    ETTERNAVN = 'etternavn',
+    PORTEFOLJESTORRELSE = 'portefoljestorrelse'
+}
+
+export enum SorteringsrekkefolgeVeilederoversikt {
+    STIGENDE = 'ascending',
+    SYNKENDE = 'decending',
+    NA = 'none'
+}
+
+export interface VeilederoversiktSortering {
+    property: VeilederoversiktSorteringsfelt;
+    direction: SorteringsrekkefolgeVeilederoversikt;
+}
+
+// Actions
+export const SORTERT_PA = 'veilarbportefoljeflatefs/sortering/SORTERT_PA';
+export const RESET = 'veilarbportefoljeflatefs/sortering/SETUP';
+
+const initialState: VeilederoversiktSortering = {
+    property: VeilederoversiktSorteringsfelt.ETTERNAVN,
+    direction: SorteringsrekkefolgeVeilederoversikt.STIGENDE
+};
+
+// Reducer
+export function sorteringReducer(state = initialState, action) {
+    switch (action.type) {
+        case SORTERT_PA: {
+            const {property} = action.data;
+
+            let direction = SorteringsrekkefolgeVeilederoversikt.STIGENDE;
+            if (property === state.property) {
+                direction =
+                    state.direction === SorteringsrekkefolgeVeilederoversikt.SYNKENDE
+                        ? SorteringsrekkefolgeVeilederoversikt.STIGENDE
+                        : SorteringsrekkefolgeVeilederoversikt.SYNKENDE;
+            }
+
+            return {property, direction};
+        }
+        case RESET:
+            return {...initialState};
+        default:
+            return state;
+    }
+}
+
+// Action Creators
+export function sortBy(property) {
+    return {type: SORTERT_PA, data: {property}};
+}
+
+export function resetSort() {
+    return {type: RESET};
+}
diff --git a/src/mocks/api/veilarbportefolje.ts b/src/mocks/api/veilarbportefolje.ts
@@ -6,7 +6,7 @@ import {tolkebehovSpraakMockData} from '../data/tolkebehovSpraak';
 import {geografiskBostedListMockData} from '../data/geografiskBosted';
 import {statustallEnhet, statustallVeileder} from '../data/statustall';
 import {brukere, hentHuskelappForBruker, hentMockPlan} from '../data/portefolje';
-import {lagPortefoljeStorrelser} from '../data/portefoljestorrelser';
+import {lagPortefoljestorrelserForVeiledere} from '../data/portefoljestorrelser';
 import {tiltak} from '../data/tiltak';
 import {FargekategoriModell} from '../../typer/bruker-modell';
 import {withAuth} from './auth';
@@ -84,7 +84,7 @@ export const veilarbportefoljeHandlers: RequestHandler[] = [
     http.get(
         '/veilarbportefolje/api/enhet/:enhetId/portefoljestorrelser',
         withAuth(async () => {
-            return HttpResponse.json(lagPortefoljeStorrelser());
+            return HttpResponse.json(lagPortefoljestorrelserForVeiledere());
         })
     ),
     http.post(
diff --git a/src/mocks/data/portefoljestorrelser.ts b/src/mocks/data/portefoljestorrelser.ts
@@ -1,17 +1,9 @@
-import {innloggetVeileder, lagTilfeldigVeilederId} from './veiledere';
+import {FacetResults} from '../../ducks/portefoljestorrelser';
+import {veiledere} from './veiledere';
 import {rnd} from '../utils';
 
-function lagPortefoljeStorrelse() {
+export function lagPortefoljestorrelserForVeiledere(): {facetResults: FacetResults[]} {
     return {
-        value: lagTilfeldigVeilederId(),
-        count: rnd(0, 50)
-    };
-}
-
-export function lagPortefoljeStorrelser() {
-    return {
-        facetResults: new Array(40)
-            .fill(lagPortefoljeStorrelse())
-            .concat(new Array(1).fill({value: innloggetVeileder.ident, count: rnd(0, 50)}))
+        facetResults: veiledere.map(veileder => ({value: veileder.ident, count: rnd(0, 120)}))
     };
 }
diff --git a/src/reducer.ts b/src/reducer.ts
@@ -1,9 +1,9 @@
 import {Action, combineReducers} from 'redux';
-import {persistentReducer, LocalStorageScope} from './utils/persistentReducer';
+import {LocalStorageScope, persistentReducer} from './utils/persistentReducer';
 import {valgtEnhetReducer, ValgtEnhetState} from './ducks/valgt-enhet';
 import {portefoljeReducer, PortefoljeState} from './ducks/portefolje';
 import {pagineringReducer} from './ducks/paginering';
-import {sorteringReducer} from './ducks/sortering';
+import {sorteringReducer, VeilederoversiktSortering} from './ducks/sortering';
 import {veiledereReducer, VeiledereState} from './ducks/veiledere';
 import {PortefoljeStorrelser, portefoljestorrelserReducer} from './ducks/portefoljestorrelser';
 import {filtreringReducer, initialState} from './ducks/filtrering';
@@ -74,7 +74,7 @@ export interface AppState {
     valgtEnhet: ValgtEnhetState;
     portefolje: PortefoljeState;
     paginering: any;
-    sortering: any;
+    sortering: VeilederoversiktSortering;
     veiledere: VeiledereState;
     portefoljestorrelser: PortefoljeStorrelser;
     statustallVeileder: StatustallVeilederState;
diff --git a/src/utils/sortering.js b/src/utils/sortering.js
diff --git a/src/veilederoversikt/sortering.ts b/src/veilederoversikt/sortering.ts
@@ -0,0 +1,25 @@
+import {SorteringsrekkefolgeVeilederoversikt, VeilederoversiktSorteringsfelt} from '../ducks/sortering';
+import {VeilederMedPortefoljestorrelse} from './veilederoversikt-sidevisning';
+
+type Sorteringsfunksjon = (a: VeilederMedPortefoljestorrelse, b: VeilederMedPortefoljestorrelse) => number;
+
+export function sorterVeilederoversikt(
+    sorteringsfelt: VeilederoversiktSorteringsfelt,
+    retning: SorteringsrekkefolgeVeilederoversikt
+): Sorteringsfunksjon {
+    const retningsBias = retning === SorteringsrekkefolgeVeilederoversikt.SYNKENDE ? -1 : 1;
+
+    if (sorteringsfelt === VeilederoversiktSorteringsfelt.ETTERNAVN) {
+        return (a, b): number => {
+            return a.etternavn.localeCompare(b.etternavn) * retningsBias;
+        };
+    } else if (sorteringsfelt === VeilederoversiktSorteringsfelt.PORTEFOLJESTORRELSE) {
+        return (a, b): number => {
+            return (a.portefoljestorrelse - b.portefoljestorrelse) * retningsBias;
+        };
+    } else {
+        throw new Error(
+            `Not implemented yet: Det manglar sorteringsfunksjon i veilederoversikt for sorteringsfelt "${sorteringsfelt}"`
+        );
+    }
+}
diff --git a/src/veilederoversikt/veilederoversikt-side.tsx b/src/veilederoversikt/veilederoversikt-side.tsx
@@ -39,7 +39,6 @@ export function VeilederoversiktSide() {
         return dispatch(slettEnkeltFilter(Filtervalg.veiledere, ident, oversiktType));
     };
     const veiledere = useSelector((state: AppState) => state.veiledere);
-    const portefoljestorrelser = useSelector((state: AppState) => state.portefoljestorrelser);
     const id = 'veileder-oversikt';
 
     useEffect(() => {
@@ -96,7 +95,6 @@ export function VeilederoversiktSide() {
                         />
                         <VeilederoversiktSidevisning
                             veiledere={veiledere.data.veilederListe}
-                            portefoljestorrelser={portefoljestorrelser}
                             veilederFilter={filtervalg.veiledere}
                         />
                     </div>
diff --git a/src/veilederoversikt/veilederoversikt-sidevisning.tsx b/src/veilederoversikt/veilederoversikt-sidevisning.tsx
@@ -2,62 +2,60 @@ import {useMemo} from 'react';
 import {useSelector} from 'react-redux';
 import {Toolbar} from '../components/toolbar/toolbar';
 import {VeilederoversiktTabell} from './veilederoversikt-tabell';
-import {sorter} from '../utils/sortering';
 import {selectFraIndex, selectSeFlere, selectSidestorrelse} from '../components/toolbar/paginering/paginering-selector';
 import {OversiktType} from '../ducks/ui/listevisning';
-import {PortefoljeStorrelser} from '../ducks/portefoljestorrelser';
 import {VeilederModell} from '../typer/enhet-og-veiledere-modeller';
 import {AppState} from '../reducer';
+import {sorterVeilederoversikt} from './sortering';
+import {FacetResults, PortefoljeStorrelser} from '../ducks/portefoljestorrelser';
 import './veilederoversikt.css';
 
-function erValgtHvisFiltrering(veiledere: string[]) {
-    if (veiledere?.length > 0) {
-        return veileder => veiledere.includes(veileder.ident);
+function finnValgteVeiledere(valgteVeiledere: string[]): (veileder: VeilederModell) => boolean {
+    if (valgteVeiledere?.length > 0) {
+        return veileder => valgteVeiledere.includes(veileder.ident);
     }
     return () => true; // Ikke valgt noe filter, så alle skal være med.
 }
 
-function medPortefoljestorrelse(portefoljeStorrelse) {
+export interface VeilederMedPortefoljestorrelse extends VeilederModell {
+    portefoljestorrelse: number;
+}
+
+function medPortefoljestorrelse(
+    portefoljeStorrelse: PortefoljeStorrelser
+): (veileder: VeilederModell) => VeilederMedPortefoljestorrelse {
     if (portefoljeStorrelse.status !== 'OK') {
         // Før vi har fått portefoljestorrele har alle 0
-        return veileder => ({...veileder, portefoljestorrelse: 0});
+        return (veileder: VeilederModell) => ({...veileder, portefoljestorrelse: 0});
     }
-    const storrelseMap = portefoljeStorrelse.data.facetResults.reduce(
-        (acc, {value: ident, count}) => ({...acc, [ident]: count}),
+    const mapIdentOgPortefoljestorrelser: {[ident: string]: number} = portefoljeStorrelse.data.facetResults.reduce(
+        (acc: {[ident: string]: number}, {value: ident, count}: FacetResults) => ({...acc, [ident]: count}),
         {}
     );
 
-    return veileder => ({
+    return (veileder: VeilederModell) => ({
         ...veileder,
-        portefoljestorrelse: storrelseMap[veileder.ident] || 0
+        portefoljestorrelse: mapIdentOgPortefoljestorrelser[veileder.ident] || 0
     });
 }
 
-function propertySort({property, direction}) {
-    return sorter(property, direction);
-}
-
 interface VeilederoversiktSidevisningProps {
     veilederFilter: string[];
     veiledere: VeilederModell[];
-    portefoljestorrelser: PortefoljeStorrelser;
 }
 
-export function VeilederoversiktSidevisning({
-    veilederFilter,
-    veiledere,
-    portefoljestorrelser
-}: VeilederoversiktSidevisningProps) {
+export function VeilederoversiktSidevisning({veilederFilter, veiledere}: VeilederoversiktSidevisningProps) {
     const fra = useSelector(selectFraIndex);
     const sidestorrelse = useSelector(selectSidestorrelse);
     const seAlle = useSelector(selectSeFlere);
     const sortering = useSelector((state: AppState) => state.sortering);
+    const portefoljestorrelser = useSelector((state: AppState) => state.portefoljestorrelser);
 
     const veilederListe = useMemo(() => {
         return veiledere
-            .filter(erValgtHvisFiltrering(veilederFilter))
+            .filter(finnValgteVeiledere(veilederFilter))
             .map(medPortefoljestorrelse(portefoljestorrelser))
-            .sort(propertySort(sortering));
+            .sort(sorterVeilederoversikt(sortering.property, sortering.direction));
     }, [veilederFilter, portefoljestorrelser, veiledere, sortering]);
 
     function getValgteVeiledere() {
diff --git a/src/veilederoversikt/veilederoversikt-tabell.tsx b/src/veilederoversikt/veilederoversikt-tabell.tsx
@@ -3,33 +3,37 @@ import {useDispatch} from 'react-redux';
 import {Button, Table} from '@navikt/ds-react';
 import {ArrowDownIcon, ArrowUpIcon} from '@navikt/aksel-icons';
 import {VeilederoversiktTabellrad} from './veilederoversikt-tabellrad';
-import {sortBy} from '../ducks/sortering';
+import {
+    sortBy,
+    SorteringsrekkefolgeVeilederoversikt,
+    VeilederoversiktSortering,
+    VeilederoversiktSorteringsfelt
+} from '../ducks/sortering';
+import {VeilederMedPortefoljestorrelse} from './veilederoversikt-sidevisning';
 import './veilederoversikt-tabell.css';
 
 interface VeiledereTabellProps {
-    veiledere: any;
-    currentSortering: {
-        property: string;
-        direction: string;
-    };
+    veiledere: VeilederMedPortefoljestorrelse[];
+    currentSortering: VeilederoversiktSortering;
 }
 
 export function VeilederoversiktTabell({veiledere, currentSortering}: VeiledereTabellProps) {
     const dispatch = useDispatch();
-    const sorterPaaEtternavn = () => dispatch(sortBy('etternavn'));
-    const sorterPaaPortefoljestorrelse = () => dispatch(sortBy('portefoljestorrelse'));
+    const sorterPaaEtternavn = () => dispatch(sortBy(VeilederoversiktSorteringsfelt.ETTERNAVN));
+    const sorterPaaPortefoljestorrelse = () => dispatch(sortBy(VeilederoversiktSorteringsfelt.PORTEFOLJESTORRELSE));
 
-    const gjeldendeSorteringErEtternavn = currentSortering.property === 'etternavn';
-    const gjeldendeSorteringErPortefoljestorrelse = currentSortering.property === 'portefoljestorrelse';
+    const gjeldendeSorteringErEtternavn = currentSortering.property === VeilederoversiktSorteringsfelt.ETTERNAVN;
+    const gjeldendeSorteringErPortefoljestorrelse =
+        currentSortering.property === VeilederoversiktSorteringsfelt.PORTEFOLJESTORRELSE;
 
     const sorteringspil = sorterPaa => {
         const className = 'tabellheader__pil';
         if (sorterPaa) {
-            if (currentSortering.direction === 'stigende') {
+            if (currentSortering.direction === SorteringsrekkefolgeVeilederoversikt.STIGENDE) {
                 return (
                     <ArrowUpIcon title="Sortert stigende" className={className} data-testid="sorteringspil_stigende" />
                 );
-            } else if (currentSortering.direction === 'synkende') {
+            } else if (currentSortering.direction === SorteringsrekkefolgeVeilederoversikt.SYNKENDE) {
                 return (
                     <ArrowDownIcon
                         title="Sortert synkende"
@@ -92,7 +96,7 @@ export function VeilederoversiktTabell({veiledere, currentSortering}: VeiledereT
                 </Table.Row>
             </Table.Header>
             <Table.Body data-testid="veilederoversikt_veilederliste_tbody">
-                {veiledere.map((veileder: any) => (
+                {veiledere.map(veileder => (
                     <VeilederoversiktTabellrad veileder={veileder} key={veileder.ident} />
                 ))}
             </Table.Body>
diff --git a/src/veilederoversikt/veilederoversikt-tabellrad.tsx b/src/veilederoversikt/veilederoversikt-tabellrad.tsx
@@ -1,8 +1,9 @@
 import {Link} from 'react-router-dom';
 import {BodyShort, Table} from '@navikt/ds-react';
+import {VeilederMedPortefoljestorrelse} from './veilederoversikt-sidevisning';
 
 interface Props {
-    veileder: any;
+    veileder: VeilederMedPortefoljestorrelse;
 }
 
 export const VeilederoversiktTabellrad = ({veileder}: Props) => {

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ const OK = 'veilarbportefolje/portefoljestorrelser/OK';`
`6`	`6`	`const FEILET = 'veilarbportefolje/portefoljestorrelser/FEILET';`
`7`	`7`	`const PENDING = 'veilarbportefolje/portefoljestorrelser/PENDING';`
`8`	`8`
`9`		`-interface FacetResults {`
	`9`	`+export interface FacetResults {`
`10`	`10`	`value: string;`
`11`	`11`	`count: number;`
`12`	`12`	`}`