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

feature: wrap all elements in a cell

Browse Source
This commit is contained in:
Sammy Teillet
2023-04-19 15:13:26 +02:00
parent a843d7d76e
commit 0844490c13
2 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/layout/containers/HorizontalyAlignedContainer.tsx
View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
type OwnProps = { type OwnProps = {
children: JSX.Element[]; children: JSX.Element[] | JSX.Element;
}; };
const StyledContainer = styled.div` const StyledContainer = styled.div`

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

@ -123,9 +123,11 @@ const columns = [
columnHelper.accessor('email', { columnHelper.accessor('email', {
header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />, header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
cell: (props) => ( cell: (props) => (
<ClickableCell 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>
</ClickableCell>
), ),
}), }),
columnHelper.accessor('company', { columnHelper.accessor('company', {
@ -142,6 +144,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="#">
<a <a
href={parsePhoneNumber( href={parsePhoneNumber(
props.row.original.phone, props.row.original.phone,
@ -153,30 +156,32 @@ const columns = [
props.row.original.countryCode as CountryCode, props.row.original.countryCode as CountryCode,
)?.formatInternational() || props.row.original.phone} )?.formatInternational() || props.row.original.phone}
</a> </a>
</ClickableCell>
), ),
}), }),
columnHelper.accessor('creationDate', { columnHelper.accessor('creationDate', {
header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />, header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
cell: (props) => cell: (props) => (
new Intl.DateTimeFormat(undefined, { <ClickableCell href="#">
{new Intl.DateTimeFormat(undefined, {
month: 'short', month: 'short',
day: 'numeric', day: 'numeric',
year: 'numeric', year: 'numeric',
}).format(props.row.original.creationDate), }).format(props.row.original.creationDate)}
</ClickableCell>
),
}), }),
columnHelper.accessor('pipe', { columnHelper.accessor('pipe', {
header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleList} />, header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleList} />,
cell: (props) => ( cell: (props) => (
<ClickableCell href="#"> <ClickableCell href="#">{props.row.original.pipe.name}</ClickableCell>
<CompanyChip
name={props.row.original.pipe.name}
picture={props.row.original.pipe.icon}
/>
</ClickableCell>
), ),
}), }),
columnHelper.accessor('city', { columnHelper.accessor('city', {
header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />, header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />,
cell: (props) => (
<ClickableCell href="#">{props.row.original.city}</ClickableCell>
),
}), }),
]; ];