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`

57
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) => (
<a href={`mailto:${props.row.original.email}`}> <ClickableCell href="#">
{props.row.original.email} <a href={`mailto:${props.row.original.email}`}>
</a> {props.row.original.email}
</a>
</ClickableCell>
), ),
}), }),
columnHelper.accessor('company', { columnHelper.accessor('company', {
@ -142,41 +144,44 @@ const columns = [
columnHelper.accessor('phone', { columnHelper.accessor('phone', {
header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />, header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
cell: (props) => ( cell: (props) => (
<a <ClickableCell href="#">
href={parsePhoneNumber( <a
props.row.original.phone, href={parsePhoneNumber(
props.row.original.countryCode as CountryCode, props.row.original.phone,
)?.getURI()} props.row.original.countryCode as CountryCode,
> )?.getURI()}
{parsePhoneNumber( >
props.row.original.phone, {parsePhoneNumber(
props.row.original.countryCode as CountryCode, props.row.original.phone,
)?.formatInternational() || props.row.original.phone} props.row.original.countryCode as CountryCode,
</a> )?.formatInternational() || props.row.original.phone}
</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="#">
month: 'short', {new Intl.DateTimeFormat(undefined, {
day: 'numeric', month: 'short',
year: 'numeric', day: 'numeric',
}).format(props.row.original.creationDate), year: 'numeric',
}).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>
),
}), }),
]; ];