Fleksible kolonner på neste 10 oppgaver (#3648)

Author: mbolstad

src/client/app/api/queries/saksbehandlerQueries.ts

@@ -9,8 +9,8 @@ import { OppgaveStatus } from 'saksbehandler/oppgaveStatusTsType';
 import Oppgave from 'saksbehandler/oppgaveTsType';
 import { SøkeboksOppgaveDto } from 'saksbehandler/sokeboks/SøkeboksOppgaveDto';
 import EndreOppgaveType from 'types/EndreOppgaveType';
+import { NesteOppgaverFraKoDto } from 'types/NesteOppgaverFraKoDto';
 import { OppgaveNøkkel } from 'types/OppgaveNøkkel';
-import OppgaveV3 from 'types/OppgaveV3';
 import { OppgavekøV3 } from 'types/OppgavekøV3Type';
 import { axiosInstance } from 'utils/reactQueryConfig';
 
@@ -45,11 +45,11 @@ export const useAlleSaksbehandlerKoerV3 = (options?: Omit<UseQueryOptions<Oppgav
 		...options,
 	});
 
-export const useSaksbehandlerNesteTiV3 = (
+export const useNesteOppgaverFraKø = (
 	id: string,
-	options?: Omit<UseQueryOptions<OppgaveV3[], Error>, 'queryKey'>,
+	options?: Omit<UseQueryOptions<NesteOppgaverFraKoDto, Error>, 'queryKey'>,
 ) =>
-	useQuery<OppgaveV3[], Error, OppgaveV3[]>({
+	useQuery<NesteOppgaverFraKoDto, Error, NesteOppgaverFraKoDto>({
 		queryKey: [apiPaths.hentTiNesteIKoV3(id)],
 		...options,
 	});

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

@@ -15,15 +15,12 @@ import { erKoV3, getKoId } from '../utils';
 import OppgavekoVelgerForm from './OppgavekoVelgerForm';
 import * as styles from './oppgavekoPanel.css';
 import OppgaverTabell from './oppgavetabeller/OppgaverTabell';
-import { OppgavetabellV3Container } from './oppgavetabeller/OppgavetabellV3Container';
+import { OppgavetabellV3 } from './oppgavetabeller/OppgavetabellV3';
 
 interface OwnProps {
 	apneOppgave: (oppgave: Oppgave) => void;
 }
 
-/**
- * OppgavekoPanel
- */
 const OppgavekoPanel: FunctionComponent<OwnProps> = ({ apneOppgave }) => {
 	const [visBehandlingerIKo, setVisBehandlingerIKo] = useState<boolean>(false);
 	const [loadingOppgaveFraKo, setLoadingOppgaveFraKo] = useState<boolean>(false);
@@ -126,7 +123,11 @@ const OppgavekoPanel: FunctionComponent<OwnProps> = ({ apneOppgave }) => {
 
 				{visBehandlingerIKo &&
 					valgtOppgaveko &&
-					(erKoV3(valgtOppgaveko.id) ? <OppgavetabellV3Container /> : <OppgaverTabell valgtKo={valgtOppgaveko} />)}
+					(erKoV3(valgtOppgaveko.id) ? (
+						<OppgavetabellV3 køId={valgtOppgavekoId} />
+					) : (
+						<OppgaverTabell valgtKo={valgtOppgaveko} />
+					))}
 			</div>
 		</div>
 	);

src/client/app/saksbehandler/behandlingskoer/components/oppgavetabeller/OppgaverTabellV3.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import dayjs from 'dayjs';
+import { BodyShort, ErrorMessage, Loader, Table } from '@navikt/ds-react';
+import { useNesteOppgaverFraKø } from 'api/queries/saksbehandlerQueries';
+import * as styles from 'saksbehandler/behandlingskoer/components/oppgavetabeller/oppgaverTabell.css';
+import { getKoId } from 'saksbehandler/behandlingskoer/utils';
+import VerticalSpacer from 'sharedComponents/VerticalSpacer';
+
+export const OppgavetabellV3 = ({ køId }: { køId: string }) => {
+	const { data: { rader, kolonner } = {}, error, isLoading, isSuccess } = useNesteOppgaverFraKø(getKoId(køId));
+
+	if (isLoading) {
+		return <Loader size="2xlarge" className={styles.spinner} />;
+	}
+	if (error) {
+		return (
+			<ErrorMessage>
+				<FormattedMessage id="OppgaverTabell.KunneIkkeHenteOppgaver" />
+			</ErrorMessage>
+		);
+	}
+
+	if (isSuccess && rader.length === 0) {
+		return (
+			<>
+				<VerticalSpacer eightPx />
+				<BodyShort size="small">
+					<FormattedMessage id="OppgaverTabell.IngenOppgaver" />
+				</BodyShort>
+			</>
+		);
+	}
+
+	const kolonnekoder = Object.keys(kolonner);
+
+	return (
+		<Table>
+			<Table.Header>
+				<Table.Row>
+					{kolonnekoder.map((kode) => (
+						<Table.HeaderCell key={kode}>{kolonner[kode]}</Table.HeaderCell>
+					))}
+				</Table.Row>
+			</Table.Header>
+			<Table.Body>
+				{rader.map((rad) => {
+					const { id } = rad;
+					return (
+						<Table.Row key={id}>
+							{kolonnekoder.map((kode) => {
+								const verdi = rad[kode] ?? '';
+								if (/^\d{4}-\d{2}-\d{2}/.test(verdi)) {
+									const dato = dayjs(verdi).format('DD.MM.YYYY');
+									const tidspunkt = dayjs(verdi).format('DD.MM.YYYY kl. HH:mm:ss');
+									return (
+										<Table.DataCell key={kode} title={tidspunkt}>
+											{dato}
+										</Table.DataCell>
+									);
+								}
+								return <Table.DataCell key={kode}>{verdi}</Table.DataCell>;
+							})}
+						</Table.Row>
+					);
+				})}
+			</Table.Body>
+		</Table>
+	);
+};

src/client/app/saksbehandler/behandlingskoer/components/oppgavetabeller/OppgavetabellV3.tsx

@@ -0,0 +1,4 @@
+export type NesteOppgaverFraKoDto = {
+	kolonner: Record<string, string>;
+	rader: Record<string, string>[];
+};