Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove padding from empty table cells and headers #809

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Remove padding from empty table cells and headers #809

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 62 additions & 56 deletions frontend/src/components/common-table-components/oppgave-rows/oppgave-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,91 +58,91 @@ const getColumns = (columnKeys: ColumnKeyEnum[], oppgave: IOppgave) =>
case ColumnKeyEnum.Type:
case ColumnKeyEnum.TypeWithAnkeITrygderetten:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<Type type={oppgave.typeId} size="medium" />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Ytelse:
case ColumnKeyEnum.RolYtelse:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<Ytelse ytelseId={oppgave.ytelseId} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Innsendingshjemler:
case ColumnKeyEnum.RolInnsendingshjemler:
case ColumnKeyEnum.EnhetInnsendingshjemler:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<Innsendingshjemler hjemmelIdList={oppgave.hjemmelIdList} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Registreringshjemler:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<Registreringshjemler hjemmelIdList={oppgave.registreringshjemmelIdList} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Navn:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<SakenGjelderName oppgaveId={oppgave.id} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Fnr:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<SakenGjelderFnr oppgaveId={oppgave.id} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Age:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<Age {...oppgave} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Deadline:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<Deadline {...oppgave} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.VarsletFrist:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<ReadOnlyDeadline frist={oppgave.varsletFrist} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Medunderskriver:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<Medunderskriver
oppgaveId={oppgave.id}
medunderskriverIdent={oppgave.medunderskriver.employee?.navIdent ?? null}
/>
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.FlowStates:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<FlowStateContainer>
<MedudunderskriverFlowStateLabel typeId={oppgave.typeId} medunderskriver={oppgave.medunderskriver} />
{oppgave.typeId === SaksTypeEnum.KLAGE || oppgave.typeId === SaksTypeEnum.ANKE ? (
<RolFlowStateLabel rol={oppgave.rol} />
) : null}
</FlowStateContainer>
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Rol:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<Rol oppgaveId={oppgave.id} rolIdent={oppgave.rol.employee?.navIdent ?? null} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Open:
case ColumnKeyEnum.OpenWithYtelseAccess:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<OpenOppgavebehandling
id={oppgave.id}
ytelseId={oppgave.ytelseId}
Expand All @@ -152,52 +152,52 @@ const getColumns = (columnKeys: ColumnKeyEnum[], oppgave: IOppgave) =>
rol={oppgave.rol}
applyYtelseAccess={key === ColumnKeyEnum.OpenWithYtelseAccess}
/>
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Oppgavestyring:
case ColumnKeyEnum.OppgavestyringNonFilterable:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<Oppgavestyring {...oppgave} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.TildelingWithFilter:
case ColumnKeyEnum.Tildeling:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<Name navIdent={oppgave.tildeltSaksbehandlerident} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Utfall:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<Utfall utfallId={oppgave.utfallId} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.PaaVentTil:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<PaaVentTil sattPaaVent={oppgave.sattPaaVent} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.PaaVentReason:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<PaaVentReason sattPaaVent={oppgave.sattPaaVent} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Finished:
return <Table.DataCell key={key}>{isoDateToPretty(oppgave.avsluttetAvSaksbehandlerDate)}</Table.DataCell>;
return <StyledDataCell key={key}>{isoDateToPretty(oppgave.avsluttetAvSaksbehandlerDate)}</StyledDataCell>;
case ColumnKeyEnum.Returnert:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
{oppgave.rol.flowState === FlowState.RETURNED ? isoDateToPretty(oppgave.rol.returnertDate) : null}
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Feilregistrering:
case ColumnKeyEnum.Feilregistrert:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<Feilregistrering
oppgaveId={oppgave.id}
feilregistrert={oppgave.feilregistrert}
Expand All @@ -207,57 +207,63 @@ const getColumns = (columnKeys: ColumnKeyEnum[], oppgave: IOppgave) =>
$position="below"
$align="right"
/>
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.Saksnummer:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<CopyButton text={oppgave.saksnummer} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.RolTildeling:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<RolTildeling oppgave={oppgave} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.RelevantOppgaver:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<RelevantOppgaver oppgaveId={oppgave.id} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.FradelingReason:
return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<FradelingReason oppgaveId={oppgave.id} />
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.PreviousSaksbehandler:
if (oppgave.previousSaksbehandler === null) {
return <Table.DataCell key={key} />;
return <StyledDataCell key={key} />;
}

return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
{oppgave.previousSaksbehandler.navn} ({oppgave.previousSaksbehandler.navIdent})
</Table.DataCell>
</StyledDataCell>
);
case ColumnKeyEnum.DatoSendtTilTr:
if (oppgave.datoSendtTilTR === null) {
return <Table.DataCell key={key} />;
return <StyledDataCell key={key} />;
}

return (
<Table.DataCell key={key}>
<StyledDataCell key={key}>
<time dateTime={oppgave.datoSendtTilTR}>{isoDateToPretty(oppgave.datoSendtTilTR)}</time>
</Table.DataCell>
</StyledDataCell>
);
}

return <Table.DataCell key={key} />;
return <StyledDataCell key={key} />;
});

const StyledDataCell = styled(Table.DataCell)`
&:empty {
padding: 0;
}
`;

const FlowStateContainer = styled.div`
display: flex;
flex-wrap: wrap;
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/components/common-table-components/oppgave-table/styled-components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,8 @@ import { styled } from 'styled-components';

export const StyledColumnHeader = styled(Table.ColumnHeader)`
white-space: nowrap;

&:empty {
padding: 0;
}
`;
Loading