admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feature: move TD creation to cells

Browse Source
This commit is contained in:
Sammy Teillet
2023-04-19 17:10:37 +02:00
parent 05c5272c93
commit 71c18e864f
3 changed files with 39 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
front/src/components/table/ClickableCell.tsx
View File

@ -4,18 +4,25 @@ import { Link } from 'react-router-dom';
type OwnProps = { type OwnProps = {
href: string; href: string;
id: string;
children?: React.ReactNode; children?: React.ReactNode;
}; };
const TD = styled.td`
position: relative;
`;
const Container = styled.span` const Container = styled.span`
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${(props) => props.theme.spacing(2)};
`; `;
function ClickableCell({ href, children }: OwnProps) { function ClickableCell({ href, children, id }: OwnProps) {
return ( return (
<Link to={href}> <TD key={id}>
<Container>{children}</Container> <Link to={href}>
</Link> <Container>{children}</Container>
</Link>
</TD>
); );
} }

11
front/src/components/table/Table.tsx
View File

@ -88,11 +88,12 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) {
<tbody> <tbody>
{table.getRowModel().rows.map((row) => ( {table.getRowModel().rows.map((row) => (
<tr key={row.id}> <tr key={row.id}>
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => {
<td key={cell.id}> return flexRender(
{flexRender(cell.column.columnDef.cell, cell.getContext())} cell.column.columnDef.cell,
</td> cell.getContext(),
))} );
})}
</tr> </tr>
))} ))}
</tbody> </tbody>

38
front/src/pages/people/People.tsx
View File

@ -108,22 +108,24 @@ const columns = [
columnHelper.accessor('fullName', { columnHelper.accessor('fullName', {
header: () => <ColumnHead viewName="People" viewIcon={faUser} />, header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
cell: (props) => ( cell: (props) => (
<HorizontalyAlignedContainer> <td key={props.cell.id}>
<Checkbox <HorizontalyAlignedContainer>
id={`person-selected-${props.row.original.email}`} <Checkbox
name={`person-selected${props.row.original.email}`} id={`person-selected-${props.row.original.email}`}
/> name={`person-selected${props.row.original.email}`}
<PersonChip />
name={props.row.original.fullName} <PersonChip
picture={props.row.original.picture} name={props.row.original.fullName}
/> picture={props.row.original.picture}
</HorizontalyAlignedContainer> />
</HorizontalyAlignedContainer>
</td>
), ),
}), }),
columnHelper.accessor('email', { columnHelper.accessor('email', {
header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />, header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
cell: (props) => ( cell: (props) => (
<ClickableCell href="#"> <ClickableCell id={props.cell.id} href="#">
<a href={`mailto:${props.row.original.email}`}> <a href={`mailto:${props.row.original.email}`}>
{props.row.original.email} {props.row.original.email}
</a> </a>
@ -133,7 +135,7 @@ const columns = [
columnHelper.accessor('company', { columnHelper.accessor('company', {
header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />, header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
cell: (props) => ( cell: (props) => (
<ClickableCell href="#"> <ClickableCell id={props.cell.id} href="#">
<CompanyChip <CompanyChip
name={props.row.original.company.name} name={props.row.original.company.name}
picture={`https://www.google.com/s2/favicons?domain=${props.row.original.company.domain}&sz=256`} picture={`https://www.google.com/s2/favicons?domain=${props.row.original.company.domain}&sz=256`}
@ -144,7 +146,7 @@ const columns = [
columnHelper.accessor('phone', { columnHelper.accessor('phone', {
header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />, header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
cell: (props) => ( cell: (props) => (
<ClickableCell href="#"> <ClickableCell id={props.cell.id} href="#">
<a <a
href={parsePhoneNumber( href={parsePhoneNumber(
props.row.original.phone, props.row.original.phone,
@ -162,7 +164,7 @@ const columns = [
columnHelper.accessor('creationDate', { columnHelper.accessor('creationDate', {
header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />, header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
cell: (props) => ( cell: (props) => (
<ClickableCell href="#"> <ClickableCell id={props.cell.id} href="#">
{new Intl.DateTimeFormat(undefined, { {new Intl.DateTimeFormat(undefined, {
month: 'short', month: 'short',
day: 'numeric', day: 'numeric',
@ -174,13 +176,17 @@ const columns = [
columnHelper.accessor('pipe', { columnHelper.accessor('pipe', {
header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleHistory} />, header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleHistory} />,
cell: (props) => ( cell: (props) => (
<ClickableCell href="#">{props.row.original.pipe.name}</ClickableCell> <ClickableCell id={props.cell.id} href="#">
{props.row.original.pipe.name}
</ClickableCell>
), ),
}), }),
columnHelper.accessor('city', { columnHelper.accessor('city', {
header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />, header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />,
cell: (props) => ( cell: (props) => (
<ClickableCell href="#">{props.row.original.city}</ClickableCell> <ClickableCell id={props.cell.id} href="#">
{props.row.original.city}
</ClickableCell>
), ),
}), }),
]; ];