Skip to content

Commit 3217b2b

Browse files
tor-navtor-nav
authored
TFP-5564 Lagt til statusbokser i LOS-avdelingsleder (#6897)
* TFP-5564 Lagt til statusbokser i LOS-avdelingsleder
1 parent 6462f02 commit 3217b2b

23 files changed

+330
-412
lines changed

‎apps/fp-avdelingsleder/i18n/nb_NO.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,6 @@
7979
"SletteSaksbehandlerModal.Ja": "Ja",
8080
"SletteSaksbehandlerModal.Nei": "Nei",
8181

82-
"FordelingAvBehandlingstypePanel.Fordeling": "Antall åpne oppgaver nå",
83-
"FordelingAvBehandlingstypePanel.Alle": "Alle",
84-
"FordelingAvBehandlingstypeGraf.TilBehandling": "Til behandling",
85-
"FordelingAvBehandlingstypeGraf.TilBeslutter": "Til beslutter",
86-
8782
"TilBehandlingPanel.TilBehandling": "Antall åpne oppgaver pr dato",
8883
"TilBehandlingPanel.ToSisteUker": "2 siste uker",
8984
"TilBehandlingPanel.FireSisteUker": "4 siste uker",
@@ -158,5 +153,10 @@
158153
"GruppeSaksbehandlere.ValgteSaksbehandlere": "Valgte saksbehandlere",
159154
"GruppeSaksbehandlere.Ingen": "Ingen valgte saksbehandlere",
160155
"GruppeSaksbehandlere.Navn": "Navn på gruppe",
161-
"GruppeSaksbehandlere.VelgSaksbehandlere": "Velg saksbehandlere"
156+
"GruppeSaksbehandlere.VelgSaksbehandlere": "Velg saksbehandlere",
157+
158+
"NøkkeltallbokserPanel.Status": "Status",
159+
"NøkkeltallbokserPanel.TilBeslutter": "{antall} til beslutter",
160+
"NøkkeltallbokserPanel.Resten": "Øvrige",
161+
"NøkkeltallbokserPanel.SistOppdatert": "Sist oppdatert: {tid}"
162162
}

‎apps/fp-avdelingsleder/src/app/AvdelingslederIndex.tsx‎

Lines changed: 73 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
22
import { FormattedMessage } from 'react-intl';
33
import { useNavigate } from 'react-router-dom';
44

5-
import { Box, Heading, HStack, Select, Tabs } from '@navikt/ds-react';
5+
import { Box, Heading, Select, Tabs, VStack } from '@navikt/ds-react';
66
import { LoadingPanel } from '@navikt/ft-ui-komponenter';
77
import { formatQueryString, parseQueryString } from '@navikt/ft-utils';
88
import { useQuery } from '@tanstack/react-query';
@@ -22,11 +22,10 @@ import { GrupperPanel } from '../grupper/GrupperPanel';
2222
import { NokkeltallPanel } from '../nokkeltall/NokkeltallPanel';
2323
import { ReservasjonerTabell } from '../reservasjoner/ReservasjonerTabell';
2424
import { SaksbehandlerePanel } from '../saksbehandlere/SaksbehandlerePanel';
25+
import { NøkkeltallbokserPanel } from '../status/NøkkeltallbokserPanel';
2526
import type { Avdeling } from '../typer/avdelingTsType';
2627
import { AvdelingslederPanels } from './avdelingslederPanels';
2728

28-
import styles from './avdelingslederIndex.module.css';
29-
3029
interface Props {
3130
initData: InitDataLos;
3231
}
@@ -62,78 +61,80 @@ export const AvdelingslederIndex = ({ initData }: Props) => {
6261
}
6362

6463
return (
65-
<div key={valgtAvdelingEnhet} className={styles['container']}>
66-
<HStack justify="end" padding="2">
67-
<Select
64+
<div>
65+
<VStack gap="space-16">
66+
<NøkkeltallbokserPanel valgtAvdelingEnhet={valgtAvdelingEnhet}>
67+
{/* TODO (TOR) Denne selecten bør flyttast til dekoratøren */}
68+
<Select
69+
size="small"
70+
hideLabel
71+
label=""
72+
onChange={e => {
73+
const index = e.target.value;
74+
setValueInLocalStorage('avdelingEnhet', index);
75+
setValgtAvdelingEnhet(index);
76+
}}
77+
value={valgtAvdelingEnhet}
78+
>
79+
{initData.avdelinger.map(avdeling => (
80+
<option key={avdeling.avdelingEnhet} value={avdeling.avdelingEnhet}>
81+
{`${avdeling.avdelingEnhet} ${avdeling.navn}`}
82+
</option>
83+
))}
84+
</Select>
85+
</NøkkeltallbokserPanel>
86+
<Tabs
6887
size="small"
69-
hideLabel
70-
label=""
71-
onChange={e => {
72-
const index = e.target.value;
73-
setValueInLocalStorage('avdelingEnhet', index);
74-
setValgtAvdelingEnhet(index);
88+
value={activeAvdelingslederPanel}
89+
onChange={(avdelingslederPanel: string) => {
90+
void navigate(getAvdelingslederPanelLocation(avdelingslederPanel));
7591
}}
76-
value={valgtAvdelingEnhet}
77-
className={styles['paddingSelect']}
7892
>
79-
{initData.avdelinger.map(avdeling => (
80-
<option key={avdeling.avdelingEnhet} value={avdeling.avdelingEnhet}>
81-
{`${avdeling.avdelingEnhet} ${avdeling.navn}`}
82-
</option>
83-
))}
84-
</Select>
85-
</HStack>
86-
<Tabs
87-
size="small"
88-
value={activeAvdelingslederPanel}
89-
onChange={(avdelingslederPanel: string) => {
90-
void navigate(getAvdelingslederPanelLocation(avdelingslederPanel));
91-
}}
92-
className={styles['paddingHeader']}
93-
>
94-
<Tabs.List>
95-
<Tabs.Tab
96-
value={AvdelingslederPanels.BEHANDLINGSKOER}
97-
label={
98-
<Heading size="small" level="2">
99-
<FormattedMessage id="AvdelingslederIndex.Behandlingskoer" />
100-
</Heading>
101-
}
102-
/>
103-
<Tabs.Tab
104-
value={AvdelingslederPanels.NOKKELTALL}
105-
label={
106-
<Heading size="small" level="2">
107-
<FormattedMessage id="AvdelingslederIndex.Nokkeltall" />
108-
</Heading>
109-
}
110-
/>
111-
<Tabs.Tab
112-
value={AvdelingslederPanels.SAKSBEHANDLERE}
113-
label={
114-
<Heading size="small" level="2">
115-
<FormattedMessage id="AvdelingslederIndex.Saksbehandlere" />
116-
</Heading>
117-
}
118-
/>
119-
<Tabs.Tab
120-
value={AvdelingslederPanels.GRUPPER}
121-
label={
122-
<Heading size="small" level="2">
123-
<FormattedMessage id="AvdelingslederIndex.Grupper" />
124-
</Heading>
125-
}
126-
/>
127-
<Tabs.Tab
128-
value={AvdelingslederPanels.RESERVASJONER}
129-
label={
130-
<Heading size="small" level="2">
131-
<FormattedMessage id="AvdelingslederIndex.Reservasjoner" />
132-
</Heading>
133-
}
134-
/>
135-
</Tabs.List>
136-
</Tabs>
93+
<Tabs.List>
94+
<Tabs.Tab
95+
value={AvdelingslederPanels.BEHANDLINGSKOER}
96+
label={
97+
<Heading size="small" level="2">
98+
<FormattedMessage id="AvdelingslederIndex.Behandlingskoer" />
99+
</Heading>
100+
}
101+
/>
102+
<Tabs.Tab
103+
value={AvdelingslederPanels.NOKKELTALL}
104+
label={
105+
<Heading size="small" level="2">
106+
<FormattedMessage id="AvdelingslederIndex.Nokkeltall" />
107+
</Heading>
108+
}
109+
/>
110+
<Tabs.Tab
111+
value={AvdelingslederPanels.SAKSBEHANDLERE}
112+
label={
113+
<Heading size="small" level="2">
114+
<FormattedMessage id="AvdelingslederIndex.Saksbehandlere" />
115+
</Heading>
116+
}
117+
/>
118+
<Tabs.Tab
119+
value={AvdelingslederPanels.GRUPPER}
120+
label={
121+
<Heading size="small" level="2">
122+
<FormattedMessage id="AvdelingslederIndex.Grupper" />
123+
</Heading>
124+
}
125+
/>
126+
<Tabs.Tab
127+
value={AvdelingslederPanels.RESERVASJONER}
128+
label={
129+
<Heading size="small" level="2">
130+
<FormattedMessage id="AvdelingslederIndex.Reservasjoner" />
131+
</Heading>
132+
}
133+
/>
134+
</Tabs.List>
135+
</Tabs>
136+
</VStack>
137+
137138
<Box.New background="default" padding="5">
138139
{activeAvdelingslederPanel === AvdelingslederPanels.BEHANDLINGSKOER && (
139140
<EndreSakslisterPanel

‎apps/fp-avdelingsleder/src/app/Home.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import { NotFoundPage } from '@navikt/fp-sak-infosider';
55
import type { InitDataLos } from '../data/fplosAvdelingslederApi';
66
import { AvdelingslederIndex } from './AvdelingslederIndex';
77

8-
import styles from './home.module.css';
9-
108
interface Props {
119
headerHeight: number;
1210
initData: InitDataLos;
@@ -19,7 +17,7 @@ interface Props {
1917
*/
2018
export const Home = ({ headerHeight, initData }: Props) => {
2119
return (
22-
<div className={styles['content']} style={{ margin: `${headerHeight}px auto 0` }}>
20+
<div style={{ margin: `${headerHeight}px auto 0` }}>
2321
<Routes>
2422
<Route path="/" element={<AvdelingslederIndex initData={initData} />} />
2523
<Route path="*" element={<NotFoundPage renderSomLenke={tekst => <Link to="/">{tekst}</Link>} />} />

‎apps/fp-avdelingsleder/src/app/avdelingslederIndex.module.css‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎apps/fp-avdelingsleder/src/app/home.module.css‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎apps/fp-avdelingsleder/src/data/StoreValuesInLocalStorage.tsx‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎apps/fp-avdelingsleder/src/data/localStorageHelper.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
1+
import { useEffect } from 'react';
2+
13
export const getValueFromLocalStorage = (key: string): string | undefined => {
24
const value = globalThis.localStorage.getItem(key);
35
return value !== 'undefined' && value !== null ? value : undefined;
46
};
57

8+
export const getParsedValueFromLocalStorage = <T>(key: string): T | undefined => {
9+
const stringFromStorage = getValueFromLocalStorage(key);
10+
return stringFromStorage ? (JSON.parse(stringFromStorage) as T) : undefined;
11+
};
12+
613
export const setValueInLocalStorage = (key: string, value: string): void => {
714
globalThis.localStorage.setItem(key, value);
815
};
916

1017
export const removeValueFromLocalStorage = (key: string): void => {
1118
globalThis.localStorage.removeItem(key);
1219
};
20+
21+
export const useStoreValuesInLocalStorage = <T>(stateKey: string, values: T) => {
22+
useEffect(() => {
23+
setValueInLocalStorage(stateKey, JSON.stringify(values));
24+
}, [values]);
25+
};

‎apps/fp-avdelingsleder/src/nokkeltall/NokkeltallPanel.tsx‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { VStack } from '@navikt/ds-react';
22

3-
import { getValueFromLocalStorage } from '../data/localStorageHelper';
43
import { OppgaverPerForsteStonadsdagPanel } from './antallBehandlingerPerForsteStonadsdag/OppgaverPerForsteStonadsdagPanel';
54
import { OppgaverSomErApneEllerPaVentPanel } from './apneOgPaVentBehandlinger/OppgaverSomErApneEllerPaVentPanel';
6-
import { FordelingAvBehandlingstypePanel } from './fordelingAvBehandlingstype/FordelingAvBehandlingstypePanel';
75
import { TilBehandlingPanel } from './tilBehandling/TilBehandlingPanel';
86
import { VentefristUtløperPanel } from './ventefristUtløper/VentefristUtløperPanel';
97

@@ -16,27 +14,10 @@ export const NokkeltallPanel = ({ valgtAvdelingEnhet }: Props) => {
1614

1715
return (
1816
<VStack gap="space-16">
19-
<TilBehandlingPanel
20-
height={height}
21-
valgtAvdelingEnhet={valgtAvdelingEnhet}
22-
getValueFromLocalStorage={getValueFromLocalStorage}
23-
/>
24-
<FordelingAvBehandlingstypePanel
25-
height={height}
26-
valgtAvdelingEnhet={valgtAvdelingEnhet}
27-
getValueFromLocalStorage={getValueFromLocalStorage}
28-
/>
29-
<VentefristUtløperPanel
30-
height={height}
31-
valgtAvdelingEnhet={valgtAvdelingEnhet}
32-
getValueFromLocalStorage={getValueFromLocalStorage}
33-
/>
17+
<TilBehandlingPanel height={height} valgtAvdelingEnhet={valgtAvdelingEnhet} />
18+
<VentefristUtløperPanel height={height} valgtAvdelingEnhet={valgtAvdelingEnhet} />
3419
<OppgaverPerForsteStonadsdagPanel height={height} valgtAvdelingEnhet={valgtAvdelingEnhet} />
35-
<OppgaverSomErApneEllerPaVentPanel
36-
height={height}
37-
valgtAvdelingEnhet={valgtAvdelingEnhet}
38-
getValueFromLocalStorage={getValueFromLocalStorage}
39-
/>
20+
<OppgaverSomErApneEllerPaVentPanel height={height} valgtAvdelingEnhet={valgtAvdelingEnhet} />
4021
</VStack>
4122
);
4223
};

‎apps/fp-avdelingsleder/src/nokkeltall/apneOgPaVentBehandlinger/OppgaverSomErApneEllerPaVentPanel.stories.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@ const meta = {
8181
args: {
8282
height: 300,
8383
valgtAvdelingEnhet: '1',
84-
getValueFromLocalStorage: () => '',
8584
},
8685
render: props => {
8786
//Må hente data til cache før testa komponent blir kalla

‎apps/fp-avdelingsleder/src/nokkeltall/apneOgPaVentBehandlinger/OppgaverSomErApneEllerPaVentPanel.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useQuery } from '@tanstack/react-query';
88
import type { BehandlingType } from '@navikt/fp-types';
99

1010
import { oppgaverÅpneEllerPåVentOptions } from '../../data/fplosAvdelingslederApi';
11-
import { StoreValuesInLocalStorage } from '../../data/StoreValuesInLocalStorage';
11+
import { getParsedValueFromLocalStorage, useStoreValuesInLocalStorage } from '../../data/localStorageHelper';
1212
import { useLosKodeverk } from '../../data/useLosKodeverk';
1313
import { OppgaverSomErApneEllerPaVentGraf } from './OppgaverSomErApneEllerPaVentGraf';
1414

@@ -21,15 +21,14 @@ type ValgteVerdier = {
2121
interface Props {
2222
height: number;
2323
valgtAvdelingEnhet: string;
24-
getValueFromLocalStorage: (key: string) => string | undefined;
2524
}
2625

27-
export const OppgaverSomErApneEllerPaVentPanel = ({ height, valgtAvdelingEnhet, getValueFromLocalStorage }: Props) => {
26+
export const OppgaverSomErApneEllerPaVentPanel = ({ height, valgtAvdelingEnhet }: Props) => {
2827
const { data: oppgaverApneEllerPaVent } = useQuery(oppgaverÅpneEllerPåVentOptions(valgtAvdelingEnhet));
2928

3029
const behandlingTyper = useLosKodeverk('BehandlingType');
31-
const stringFromStorage = getValueFromLocalStorage(formName);
32-
const lagredeVerdier = stringFromStorage ? (JSON.parse(stringFromStorage) as ValgteVerdier) : undefined;
30+
31+
const lagretFilter = getParsedValueFromLocalStorage<ValgteVerdier>(formName);
3332

3433
const filtrerteBehandlingstyper = behandlingTyper.filter(type => type.kode !== 'BT-007' && type.kode !== 'BT-009');
3534

@@ -42,14 +41,15 @@ export const OppgaverSomErApneEllerPaVentPanel = ({ height, valgtAvdelingEnhet,
4241
);
4342

4443
const formMethods = useForm<ValgteVerdier>({
45-
defaultValues: lagredeVerdier ?? formDefaultValues,
44+
defaultValues: lagretFilter ?? formDefaultValues,
4645
});
4746

4847
const values = formMethods.watch();
4948

49+
useStoreValuesInLocalStorage(formName, values);
50+
5051
return (
5152
<RhfForm formMethods={formMethods}>
52-
<StoreValuesInLocalStorage stateKey={formName} values={values} />
5353
<VStack gap="space-16">
5454
<Label size="small">
5555
<FormattedMessage id="OppgaverSomErApneEllerPaVentPanel.Apne" />

0 commit comments

Comments
 (0)