forbedringer i responsivitet (#2866)

src/client/app/api/apiPaths.ts

@@ -41,7 +41,7 @@ const apiPaths = {
 	saksbehandlerReservasjoner: '/api/k9-los-api/saksbehandler/oppgaver/reserverte',
 	slettOppgaveko: '/api/k9-los-api/ny-oppgavestyring/ko/',
 	sok: '/api/k9-los-api/fagsak/sok',
-	valider: '/api/k9-los-api/ny-oppgavestyring/oppgave/validate',
+	validerQuery: '/api/k9-los-api/ny-oppgavestyring/oppgave/validate',
 };
 
 export default apiPaths;

src/client/app/filter/AntallOppgaver.tsx

@@ -8,12 +8,13 @@ import { antallTreffOppgaver } from './utils';
 import { FilterContext } from './FilterContext';
 
 interface OwnProps {
-	validateOppgaveQuery: () => Promise<boolean>;
+	validateOppgaveQuery: (validateFunc: (isValidating: boolean) => void) => Promise<boolean>;
 	setQueryError: (error: string) => void;
 }
 
 export const AntallOppgaver = ({ validateOppgaveQuery, setQueryError }: OwnProps) => {
 	const { oppgaveQuery } = useContext(FilterContext);
+	const [isValidating, setIsValidating] = useState(false);
 
 	const [antallOppgaver, setAntallOppgaver] = useState('');
 	const { mutate, isLoading } = useMutation<unknown, unknown, { url: string; body: OppgaveQuery }>({
@@ -24,8 +25,10 @@ export const AntallOppgaver = ({ validateOppgaveQuery, setQueryError }: OwnProps
 		},
 	});
 
+	const loading = isLoading || isValidating;
+
 	const hentOppgaver = async () => {
-		const oppgaveQueryIsValid = await validateOppgaveQuery();
+		const oppgaveQueryIsValid = await validateOppgaveQuery(setIsValidating);
 		if (oppgaveQueryIsValid) {
 			mutate({ url: apiPaths.hentOppgaver, body: oppgaveQuery });
 			setQueryError('');
@@ -37,16 +40,17 @@ export const AntallOppgaver = ({ validateOppgaveQuery, setQueryError }: OwnProps
 	return (
 		<div className="flex flex-col m-auto">
 			<Label size="small">
-				Antall oppgaver: {isLoading ? <Skeleton className="inline-block w-12" /> : antallOppgaver}
+				Antall oppgaver: {loading ? <Skeleton className="inline-block w-12" /> : antallOppgaver}
 			</Label>
 			<Button
 				variant="tertiary"
-				icon={<ArrowsCirclepathIcon aria-hidden className={`${isLoading ? 'animate-spin' : ' '}`} />}
+				icon={<ArrowsCirclepathIcon aria-hidden />}
 				size="small"
 				onClick={hentOppgaver}
-				disabled={isLoading}
+				loading={loading}
+				disabled={loading}
 			>
-				{isLoading ? 'Oppdaterer antall...' : 'Oppdater antall'}
+				Oppdater antall
 			</Button>
 		</div>
 	);

src/client/app/filter/FilterIndex.tsx

@@ -61,6 +61,7 @@ const FilterIndex = ({ initialQuery, lagre, avbryt, tittel, visningV3, køvisnin
 	const [loading, setLoading] = useState(false);
 	const [loadingDownload, setLoadingDownload] = useState(false);
 	const [koId, setKoId] = useState(null);
+	const [isValidating, setIsValidating] = useState(false);
 	const [oppgaveQuery, setOppgaveQuery] = useState(
 		initialQuery ? new OppgaveQueryModel(initialQuery).toOppgaveQuery() : new OppgaveQueryModel().toOppgaveQuery(),
 	);
@@ -105,13 +106,21 @@ const FilterIndex = ({ initialQuery, lagre, avbryt, tittel, visningV3, køvisnin
 		},
 	});
 
-	const validateOppgaveQuery = (): Promise<boolean> =>
-		post(apiPaths.valider, oppgaveQuery)
-			.then((data: boolean) => data)
-			.catch(() => false);
+	const validateOppgaveQuery = async (isValidatingFunc: (validating: boolean) => void): Promise<boolean> => {
+		isValidatingFunc(true);
+		return post(apiPaths.validerQuery, oppgaveQuery)
+			.then((data: boolean) => {
+				isValidatingFunc(false);
+				return data;
+			})
+			.catch(() => {
+				isValidatingFunc(false);
+				return false;
+			});
+	};
 
 	const validerOgLagre = async () => {
-		const valideringOK = await validateOppgaveQuery();
+		const valideringOK = await validateOppgaveQuery(setIsValidating);
 		if (valideringOK) {
 			setQueryError(null);
 			lagre(oppgaveQuery);
@@ -271,10 +280,10 @@ const FilterIndex = ({ initialQuery, lagre, avbryt, tittel, visningV3, køvisnin
 					<div className={styles.filterButtonGroup}>
 						{lagre && (
 							<div className="ml-auto">
-								<Button className="mr-2" variant="secondary" onClick={avbryt}>
+								<Button className="mr-2" variant="secondary" onClick={avbryt} disabled={isValidating || loading}>
 									Avbryt
 								</Button>
-								<Button onClick={validerOgLagre} loading={loading}>
+								<Button onClick={validerOgLagre} loading={isValidating || loading} disabled={isValidating || loading}>
 									Lagre
 								</Button>
 							</div>

src/client/app/saksbehandler/behandlingskoer/components/OppgavekoPanel.tsx

@@ -27,6 +27,7 @@ interface OwnProps {
  */
 const OppgavekoPanel: FunctionComponent<OwnProps> = ({ apneOppgave }) => {
 	const [visBehandlingerIKo, setVisBehandlingerIKo] = useState<boolean>(false);
+	const [loadingOppgaveFraKo, setLoadingOppgaveFraKo] = useState<boolean>(false);
 	const { valgtOppgavekoId, oppgavekoer } = useContext(BehandlingskoerContext);
 	const [visFinnesIngenBehandlingerIKoModal, setVisFinnesIngenBehandlingerIKoModal] = useState<boolean>(false);
 	const { startRequest: leggTilBehandletOppgave } = useRestApiRunner(K9LosApiKeys.LEGG_TIL_BEHANDLET_OPPGAVE);
@@ -41,6 +42,7 @@ const OppgavekoPanel: FunctionComponent<OwnProps> = ({ apneOppgave }) => {
 		leggTilBehandletOppgave(oppgave.oppgaveNøkkelDto);
 		window.location.assign(oppgave.oppgavebehandlingsUrl);
 	});
+	console.log(restApiState);
 
 	useEffect(() => {
 		if (
@@ -62,10 +64,16 @@ const OppgavekoPanel: FunctionComponent<OwnProps> = ({ apneOppgave }) => {
 
 	const plukkNyOppgave = () => {
 		if (!erKoV3(valgtOppgavekoId)) {
-			fåOppgaveFraKo({ oppgaveKøId: getKoId(valgtOppgavekoId) }).then((reservertOppgave) => {
-				resetRequestData();
-				apneOppgave(reservertOppgave);
-			});
+			setLoadingOppgaveFraKo(true);
+			fåOppgaveFraKo({ oppgaveKøId: getKoId(valgtOppgavekoId) })
+				.then((reservertOppgave) => {
+					resetRequestData();
+					setLoadingOppgaveFraKo(false);
+					apneOppgave(reservertOppgave);
+				})
+				.catch(() => {
+					setLoadingOppgaveFraKo(false);
+				});
 			return;
 		}
 
@@ -79,10 +87,7 @@ const OppgavekoPanel: FunctionComponent<OwnProps> = ({ apneOppgave }) => {
 				<FormattedMessage id="OppgavekoPanel.StartBehandling" />
 			</Undertittel>
 			<VerticalSpacer sixteenPx />
-			<OppgavekoVelgerForm
-				plukkNyOppgave={plukkNyOppgave}
-				erRestApiKallLoading={restApiState === RestApiState.LOADING}
-			/>
+			<OppgavekoVelgerForm plukkNyOppgave={plukkNyOppgave} loadingOppgaveFraKo={loadingOppgaveFraKo} />
 			<VerticalSpacer twentyPx />
 			<div className={styles.behandlingskoerContainer}>
 				<ReserverteOppgaverTabell gjelderHastesaker apneOppgave={apneOppgave} />

src/client/app/saksbehandler/behandlingskoer/components/OppgavekoVelgerForm.tsx

@@ -24,7 +24,7 @@ import * as styles from './oppgavekoVelgerForm.css';
 
 interface OwnProps {
 	plukkNyOppgave: () => void;
-	erRestApiKallLoading: boolean;
+	loadingOppgaveFraKo: boolean;
 }
 
 const createTooltip = (saksbehandlere: Saksbehandler[]): ReactNode | undefined => {
@@ -65,7 +65,7 @@ const getDefaultOppgaveko = (oppgavekoer: Array<OppgavekøV1 | OppgavekøV3MedNa
  * OppgavekoVelgerForm
  *
  */
-export const OppgavekoVelgerForm: FunctionComponent<OwnProps> = ({ plukkNyOppgave, erRestApiKallLoading }) => {
+export const OppgavekoVelgerForm: FunctionComponent<OwnProps> = ({ plukkNyOppgave, loadingOppgaveFraKo }) => {
 	const { oppgavekoer, valgtOppgavekoId, setValgtOppgavekoId } = useContext(BehandlingskoerContext);
 	const queryClient = useQueryClient();
 	const intl = useIntl();
@@ -120,7 +120,6 @@ export const OppgavekoVelgerForm: FunctionComponent<OwnProps> = ({ plukkNyOppgav
 		);
 	}
 
-
 	return (
 		<div className={styles.oppgavevelgerform_container}>
 			<div className="flex">
@@ -148,8 +147,8 @@ export const OppgavekoVelgerForm: FunctionComponent<OwnProps> = ({ plukkNyOppgav
 					<Button
 						id="frode sin knapp"
 						className="mt-4 max-w-sm"
-						loading={erRestApiKallLoading}
-						disabled={erRestApiKallLoading}
+						loading={loadingOppgaveFraKo}
+						disabled={loadingOppgaveFraKo}
 						onClick={() => plukkNyOppgave()}
 					>
 						{intl.formatMessage({ id: 'OppgavekoVelgerForm.PlukkNyOppgave' })}