Skip to content

Commit

Permalink
forbedringer i responsivitet (#2866)
Browse files Browse the repository at this point in the history
  • Loading branch information
vebnor committed May 3, 2024
1 parent 2cce132 commit 20ef4e6
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 27 deletions.
2 changes: 1 addition & 1 deletion src/client/app/api/apiPaths.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
16 changes: 10 additions & 6 deletions src/client/app/filter/AntallOppgaver.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }>({
Expand All @@ -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('');
Expand All @@ -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>
);
Expand Down
23 changes: 16 additions & 7 deletions src/client/app/filter/FilterIndex.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -41,6 +42,7 @@ const OppgavekoPanel: FunctionComponent<OwnProps> = ({ apneOppgave }) => {
leggTilBehandletOppgave(oppgave.oppgaveNøkkelDto);
window.location.assign(oppgave.oppgavebehandlingsUrl);
});
console.log(restApiState);

useEffect(() => {
if (
Expand All @@ -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;
}

Expand All @@ -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} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import * as styles from './oppgavekoVelgerForm.css';

interface OwnProps {
plukkNyOppgave: () => void;
erRestApiKallLoading: boolean;
loadingOppgaveFraKo: boolean;
}

const createTooltip = (saksbehandlere: Saksbehandler[]): ReactNode | undefined => {
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -120,7 +120,6 @@ export const OppgavekoVelgerForm: FunctionComponent<OwnProps> = ({ plukkNyOppgav
);
}


return (
<div className={styles.oppgavevelgerform_container}>
<div className="flex">
Expand Down Expand Up @@ -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' })}
Expand Down

0 comments on commit 20ef4e6

Please sign in to comment.