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

Format phone number

Browse Source
This commit is contained in:
Anders Borch
2023-04-13 17:27:33 +02:00
parent a58735925f
commit caf7c168aa
1 changed files with 25 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@ import styled from '@emotion/styled';
import CellLink from '../../components/cell-link/CellLink'; import CellLink from '../../components/cell-link/CellLink';
import TableHeader from '../../components/table/TableHeader'; import TableHeader from '../../components/table/TableHeader';
import personPlaceholder from './placeholder.png'; import personPlaceholder from './placeholder.png';
import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
type Person = { type Person = {
fullName: string; fullName: string;
@ -25,6 +26,7 @@ type Person = {
creationDate: string; creationDate: string;
pipe: Pipe; pipe: Pipe;
city: string; city: string;
countryCode: string;
}; };
const StyledPeopleContainer = styled.div` const StyledPeopleContainer = styled.div`
@ -34,6 +36,11 @@ const StyledPeopleContainer = styled.div`
table { table {
margin-top: 8px; margin-top: 8px;
} }
a {
color: inherit;
text-decoration: none;
}
`; `;
const defaultData: Array<Person> = [ const defaultData: Array<Person> = [
@ -46,6 +53,7 @@ const defaultData: Array<Person> = [
creationDate: 'Feb 23, 2018', creationDate: 'Feb 23, 2018',
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' }, pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris', city: 'Paris',
countryCode: 'FR',
}, },
{ {
fullName: 'Alexandre Prot', fullName: 'Alexandre Prot',
@ -56,6 +64,7 @@ const defaultData: Array<Person> = [
creationDate: 'Feb 23, 2018', creationDate: 'Feb 23, 2018',
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' }, pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris', city: 'Paris',
countryCode: 'FR',
}, },
{ {
fullName: 'Alexandre Prot', fullName: 'Alexandre Prot',
@ -66,6 +75,7 @@ const defaultData: Array<Person> = [
creationDate: 'Feb 23, 2018', creationDate: 'Feb 23, 2018',
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' }, pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris', city: 'Paris',
countryCode: 'FR',
}, },
{ {
fullName: 'Alexandre Prot', fullName: 'Alexandre Prot',
@ -76,6 +86,7 @@ const defaultData: Array<Person> = [
creationDate: 'Feb 23, 2018', creationDate: 'Feb 23, 2018',
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' }, pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris', city: 'Paris',
countryCode: 'FR',
}, },
{ {
fullName: 'Alexandre Prot', fullName: 'Alexandre Prot',
@ -86,6 +97,7 @@ const defaultData: Array<Person> = [
creationDate: 'Feb 23, 2018', creationDate: 'Feb 23, 2018',
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' }, pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris', city: 'Paris',
countryCode: 'FR',
}, },
]; ];
@ -117,6 +129,19 @@ const columns = [
}), }),
columnHelper.accessor('phone', { columnHelper.accessor('phone', {
header: () => <TableHeader viewName="Phone" viewIcon={faPhone} />, header: () => <TableHeader viewName="Phone" viewIcon={faPhone} />,
cell: (props) => (
<a
href={parsePhoneNumber(
props.row.original.phone,
props.row.original.countryCode as CountryCode,
)?.getURI()}
>
{parsePhoneNumber(
props.row.original.phone,
props.row.original.countryCode as CountryCode,
)?.formatInternational() || props.row.original.phone}
</a>
),
}), }),
columnHelper.accessor('creationDate', { columnHelper.accessor('creationDate', {
header: () => <TableHeader viewName="Creation" viewIcon={faCalendar} />, header: () => <TableHeader viewName="Creation" viewIcon={faCalendar} />,