Merge pull request #2867 from navikt/fjern-less-tabell-kode

Fjernet less-tabell-avhengighet for _Se beboere_ under samliv-vilkåret
navikt · Aug 14, 2024 · e2de0d3 · e2de0d3
2 parents 9b49abc + 08022a1
commit e2de0d3
Show file tree

Hide file tree

Showing 25 changed files with 344 additions and 684 deletions.
diff --git a/src/frontend/App/hooks/felles/useSorteringState.tsx b/src/frontend/App/hooks/felles/useSorteringState.tsx
@@ -1,13 +1,12 @@
 import { useMemo, useState } from 'react';
 import { compareAsc, compareDesc, isValid } from 'date-fns';
-
-export type OrNothing<T> = T | undefined | null;
+import { OrNothing } from '../../typer/common';
 
 export type Rekkefolge = 'descending' | 'ascending';
 
 export interface SorteringConfig<T> {
-    rekkefolge: Rekkefolge;
-    sorteringsfelt: keyof T;
+    direction: Rekkefolge;
+    orderBy: keyof T;
 }
 
 interface ISortering<T> {
@@ -26,41 +25,37 @@ export function useSorteringState<T>(
         const listeKopi = [...liste];
         if (sortConfig) {
             listeKopi.sort((a, b) => {
-                if (a[sortConfig?.sorteringsfelt] === undefined) {
-                    return sortConfig?.rekkefolge === 'ascending' ? -1 : 1;
+                if (a[sortConfig?.orderBy] === undefined) {
+                    return sortConfig?.direction === 'ascending' ? -1 : 1;
                 }
-                if (b[sortConfig?.sorteringsfelt] === undefined) {
-                    return sortConfig?.rekkefolge === 'ascending' ? 1 : -1;
+                if (b[sortConfig?.orderBy] === undefined) {
+                    return sortConfig?.direction === 'ascending' ? 1 : -1;
                 }
-                if (erEttDatoFelt(a[sortConfig?.sorteringsfelt], b[sortConfig?.sorteringsfelt])) {
-                    const dateStringA = a[sortConfig?.sorteringsfelt] as unknown as string;
-                    const dateStringB = b[sortConfig?.sorteringsfelt] as unknown as string;
-                    return sortConfig?.rekkefolge === 'ascending'
+                if (erEttDatoFelt(a[sortConfig?.orderBy], b[sortConfig?.orderBy])) {
+                    const dateStringA = a[sortConfig?.orderBy] as unknown as string;
+                    const dateStringB = b[sortConfig?.orderBy] as unknown as string;
+                    return sortConfig?.direction === 'ascending'
                         ? compareAsc(new Date(dateStringA), new Date(dateStringB))
                         : compareDesc(new Date(dateStringA), new Date(dateStringB));
                 }
-                if (a[sortConfig?.sorteringsfelt] < b[sortConfig?.sorteringsfelt]) {
-                    return sortConfig?.rekkefolge === 'ascending' ? -1 : 1;
+                if (a[sortConfig?.orderBy] < b[sortConfig?.orderBy]) {
+                    return sortConfig?.direction === 'ascending' ? -1 : 1;
                 }
-                if (a[sortConfig?.sorteringsfelt] > b[sortConfig?.sorteringsfelt]) {
-                    return sortConfig?.rekkefolge === 'ascending' ? 1 : -1;
+                if (a[sortConfig?.orderBy] > b[sortConfig?.orderBy]) {
+                    return sortConfig?.direction === 'ascending' ? 1 : -1;
                 }
                 return 0;
             });
         }
         return listeKopi;
     }, [liste, sortConfig]);
 
-    const settSortering = (sorteringsfelt: keyof T) => {
-        let rekkefolge: Rekkefolge = 'ascending';
-        if (
-            sortConfig &&
-            sortConfig.sorteringsfelt === sorteringsfelt &&
-            sortConfig.rekkefolge === 'ascending'
-        ) {
-            rekkefolge = 'descending';
+    const settSortering = (orderBy: keyof T) => {
+        let direction: Rekkefolge = 'ascending';
+        if (sortConfig && sortConfig.orderBy === orderBy && sortConfig.direction === 'ascending') {
+            direction = 'descending';
         }
-        setSortConfig({ sorteringsfelt, rekkefolge });
+        setSortConfig({ orderBy, direction });
     };
 
     return { sortertListe, settSortering, sortConfig };

diff --git a/src/frontend/App/hooks/useHentJournalpost.ts b/src/frontend/App/hooks/useHentJournalpost.ts
@@ -3,7 +3,7 @@ import { useApp } from '../context/AppContext';
 import { useCallback, useMemo, useState } from 'react';
 import { IJournalpostResponse } from '../typer/journalføring';
 import { AxiosRequestConfig } from 'axios';
-import { OrNothing } from './felles/useSorteringState';
+import { OrNothing } from '../typer/common';
 
 interface HentJournalpostResponse {
     hentJournalPost: () => void;

diff --git a/src/frontend/App/typer/common.ts b/src/frontend/App/typer/common.ts
@@ -2,3 +2,5 @@
 export type PartialRecord<K extends keyof any, T> = {
     [P in K]?: T;
 };
+
+export type OrNothing<T> = T | undefined | null;
diff --git a/src/frontend/App/utils/utils.ts b/src/frontend/App/utils/utils.ts
@@ -1,8 +1,8 @@
 import { KeyboardEvent } from 'react';
-import { OrNothing } from '../hooks/felles/useSorteringState';
 import { isAfter, isBefore } from 'date-fns';
 import { IOppgaveRequest } from '../../Komponenter/Oppgavebenk/typer/oppgaverequest';
 import { validate } from 'uuid';
+import { OrNothing } from '../typer/common';
 
 export const datoFeil = (valgtDatoFra?: string, valgtDatoTil?: string): OrNothing<string> => {
     if (!valgtDatoFra || !valgtDatoTil) {

diff --git a/src/frontend/Felles/Personopplysninger/Beboere.tsx b/src/frontend/Felles/Personopplysninger/Beboere.tsx
@@ -3,14 +3,8 @@ import { ISøkeresultatPerson } from '../../App/typer/personopplysninger';
 import { useApp } from '../../App/context/AppContext';
 import { byggTomRessurs, Ressurs, RessursFeilet, RessursStatus } from '../../App/typer/ressurs';
 import DataViewer from '../DataViewer/DataViewer';
-import { BredTd, KolonneTitler, TabellWrapper } from './TabellWrapper';
-import styled from 'styled-components';
 import SystemetLaster from '../SystemetLaster/SystemetLaster';
-
-const StyledModalTabellWrapper = styled(TabellWrapper)`
-    margin-bottom: 1rem;
-    grid-template-columns: max-content;
-`;
+import { Table } from '@navikt/ds-react';
 
 const Beboere: React.FC<{ fagsakPersonId: string }> = ({ fagsakPersonId }) => {
     const { axiosRequest } = useApp();
@@ -38,22 +32,36 @@ const Beboere: React.FC<{ fagsakPersonId: string }> = ({ fagsakPersonId }) => {
             <DataViewer response={{ søkResultat }}>
                 {({ søkResultat }) => {
                     return (
-                        <StyledModalTabellWrapper>
-                            <table className="tabell">
-                                <KolonneTitler titler={['Navn', 'Fødselsnummer', 'Adresse']} />
-                                <tbody>
-                                    {søkResultat.hits.map((beboer, indeks) => {
-                                        return (
-                                            <tr key={indeks}>
-                                                <BredTd>{beboer.visningsnavn}</BredTd>
-                                                <BredTd>{beboer.personIdent}</BredTd>
-                                                <BredTd>{beboer.visningsadresse}</BredTd>
-                                            </tr>
-                                        );
-                                    })}
-                                </tbody>
-                            </table>
-                        </StyledModalTabellWrapper>
+                        <Table>
+                            <Table.Header>
+                                <Table.Row>
+                                    <Table.ColumnHeader textSize={'small'}>Navn</Table.ColumnHeader>
+                                    <Table.ColumnHeader textSize={'small'}>
+                                        Fødselsnummer
+                                    </Table.ColumnHeader>
+                                    <Table.ColumnHeader textSize={'small'}>
+                                        Adresse
+                                    </Table.ColumnHeader>
+                                </Table.Row>
+                            </Table.Header>
+                            <Table.Body>
+                                {søkResultat.hits.map((beboer) => {
+                                    return (
+                                        <Table.Row key={beboer.personIdent}>
+                                            <Table.DataCell textSize={'small'}>
+                                                {beboer.visningsnavn}
+                                            </Table.DataCell>
+                                            <Table.DataCell textSize={'small'}>
+                                                {beboer.personIdent}
+                                            </Table.DataCell>
+                                            <Table.DataCell textSize={'small'}>
+                                                {beboer.visningsadresse}
+                                            </Table.DataCell>
+                                        </Table.Row>
+                                    );
+                                })}
+                            </Table.Body>
+                        </Table>
                     );
                 }}
             </DataViewer>

diff --git a/src/frontend/Felles/Personopplysninger/TabellWrapper.tsx b/src/frontend/Felles/Personopplysninger/TabellWrapper.tsx
@@ -2,44 +2,6 @@ import styled from 'styled-components';
 import React from 'react';
 import { Table } from '@navikt/ds-react';
 
-export const BredTd = styled.td`
-    width: ${(props) => props.width ?? '25%'};
-    padding-left: 0;
-`;
-
-export const Td = styled.td`
-    padding-left: 0;
-`;
-
-export const TabellWrapper = styled.div<{ $erDobbelTabell?: boolean }>`
-    display: grid;
-    padding-top: 1rem;
-    grid-template-columns: 32px 40px auto 72px;
-    grid-template-rows: repeat(${(props) => (props.$erDobbelTabell ? 3 : 2)}, max-content);
-    grid-template-areas: ${(props) =>
-        props.$erDobbelTabell
-            ? "'. ikon tittel .' '. . første-tabell .' '. . andre-tabell .'"
-            : "'. ikon tittel .' '. . innhold .'"};
-    .tabell {
-        .columnHeader {
-            font-weight: bold;
-        }
-        grid-area: innhold;
-        th,
-        td {
-            padding: 0.25rem;
-            padding-left: 0;
-        }
-        table-layout: fixed;
-    }
-    .første-tabell {
-        grid-area: første-tabell;
-    }
-    .andre-tabell {
-        grid-area: andre-tabell;
-    }
-`;
-
 export const SmallTable = styled(Table).attrs({ size: 'small' })`
     max-width: max-content;
     th,

diff --git a/src/frontend/Komponenter/Behandling/GamleBehandlinger/GamleBehandlingerTabell.tsx b/src/frontend/Komponenter/Behandling/GamleBehandlinger/GamleBehandlingerTabell.tsx
@@ -3,17 +3,11 @@ import { behandlingstypeTilTekst } from '../../../App/typer/behandlingstype';
 import { behandlingsårsakTilTekst } from '../../../App/typer/Behandlingsårsak';
 import { PartialRecord } from '../../../App/typer/common';
 import { Behandling, behandlingResultatTilTekst } from '../../../App/typer/fagsak';
-import { Table } from '@navikt/ds-react';
+import { SortState, Table } from '@navikt/ds-react';
 import { formaterIsoDato } from '../../../App/utils/formatter';
 import { Link } from 'react-router-dom';
-import SorteringsHeader from '../../Oppgavebenk/OppgaveSorteringHeader';
-import { useSorteringState } from '../../../App/hooks/felles/useSorteringState';
-import styled from 'styled-components';
 import { stønadstypeTilTekst } from '../../../App/typer/behandlingstema';
-
-const StyledTable = styled(Table)`
-    padding: 2rem;
-`;
+import { useSorteringState } from '../../../App/hooks/felles/useSorteringState';
 
 const TabellData: PartialRecord<keyof Behandling, string> = {
     opprettet: 'Behandling opprettetdato',
@@ -27,25 +21,22 @@ export const GamleBehandlingerTabell: React.FC<{
     gamleBehandlinger: Behandling[];
 }> = ({ gamleBehandlinger }) => {
     const { sortertListe, settSortering, sortConfig } = useSorteringState(gamleBehandlinger, {
-        sorteringsfelt: 'opprettet',
-        rekkefolge: 'ascending',
+        orderBy: 'opprettet',
+        direction: 'ascending',
     });
 
     return (
-        <StyledTable className="tabell" size="medium" zebraStripes={true}>
+        <Table
+            zebraStripes={true}
+            sort={sortConfig as SortState}
+            onSortChange={(sortKey) => settSortering(sortKey as keyof Behandling)}
+        >
             <Table.Header>
                 <Table.Row>
                     {Object.entries(TabellData).map(([felt, tekst], index) => (
-                        <SorteringsHeader
-                            rekkefolge={
-                                sortConfig?.sorteringsfelt === felt
-                                    ? sortConfig?.rekkefolge
-                                    : undefined
-                            }
-                            tekst={tekst}
-                            onClick={() => settSortering(felt as keyof Behandling)}
-                            key={`${index}${felt}`}
-                        />
+                        <Table.ColumnHeader key={`${index}${felt}`} sortKey={felt} sortable={true}>
+                            {tekst}
+                        </Table.ColumnHeader>
                     ))}
                 </Table.Row>
             </Table.Header>
@@ -79,6 +70,6 @@ export const GamleBehandlingerTabell: React.FC<{
                     );
                 })}
             </Table.Body>
-        </StyledTable>
+        </Table>
     );
 };
diff --git a/src/frontend/Komponenter/Behandling/Inngangsvilkår/NyttBarnSammePartner/Tabell.tsx b/src/frontend/Komponenter/Behandling/Inngangsvilkår/NyttBarnSammePartner/Tabell.tsx