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

refactor: move data types and table definition out of People component

Browse Source
This commit is contained in:
Sammy Teillet
2023-04-20 10:48:59 +02:00
parent 6fa71e12b5
commit f2dcffd8f0
4 changed files with 173 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,38 +1,9 @@
import {
faBuildings,
faCalendar,
faEnvelope,
faUser,
faMapPin,
faPhone,
faRectangleHistory,
faList,
} from '@fortawesome/pro-regular-svg-icons';
import { faUser, faList } from '@fortawesome/pro-regular-svg-icons';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
import Table from '../../components/table/Table';
import { Company } from '../../interfaces/company.interface';
import { Pipe } from '../../interfaces/pipe.interface';
import { createColumnHelper } from '@tanstack/react-table';
import styled from '@emotion/styled';
import ClickableCell from '../../components/table/ClickableCell';
import ColumnHead from '../../components/table/ColumnHead';
import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
import Checkbox from '../../components/form/Checkbox';
import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlignedContainer';
import CompanyChip from '../../components/chips/CompanyChip';
import PersonChip from '../../components/chips/PersonChip';
type Person = {
fullName: string;
picture?: string;
email: string;
company: Company;
phone: string;
creationDate: Date;
pipe: Pipe;
city: string;
countryCode: string;
};
import { peopleColumns } from './people-table';
import { defaultData } from './defaultData';
const StyledPeopleContainer = styled.div`
display: flex;
@ -44,150 +15,13 @@ const StyledPeopleContainer = styled.div`
}
`;
const defaultData: Array<Person> = [
{
fullName: 'Alexandre Prot',
picture: 'http://placekitten.com/256',
email: 'alexandre@qonto.com',
company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
phone: '06 12 34 56 78',
creationDate: new Date('Feb 23, 2018'),
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
countryCode: 'FR',
},
{
fullName: 'Alexandre Prot',
email: 'alexandre@qonto.com',
company: { id: 2, name: 'LinkedIn', domain: 'linkedin.com' },
phone: '06 12 34 56 78',
creationDate: new Date('Feb 23, 2018'),
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
countryCode: 'FR',
},
{
fullName: 'Alexandre Prot',
picture: 'http://placekitten.com/256',
email: 'alexandre@qonto.com',
company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
phone: '06 12 34 56 78',
creationDate: new Date('Feb 23, 2018'),
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
countryCode: 'FR',
},
{
fullName: 'Alexandre Prot',
picture: 'https://placekitten.com/g/256',
email: 'alexandre@qonto.com',
company: { id: 1, name: 'Slack', domain: 'slack.com' },
phone: '06 12 34 56 78',
creationDate: new Date('Feb 23, 2018'),
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
countryCode: 'FR',
},
{
fullName: 'Alexandre Prot',
email: 'alexandre@qonto.com',
company: { id: 2, name: 'Facebook', domain: 'facebook.com' },
phone: '06 12 34 56 78',
creationDate: new Date('Feb 23, 2018'),
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
countryCode: 'FR',
},
];
const columnHelper = createColumnHelper<Person>();
const columns = [
columnHelper.accessor('fullName', {
header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
cell: (props) => (
<>
<HorizontalyAlignedContainer>
<Checkbox
id={`person-selected-${props.row.original.email}`}
name={`person-selected-${props.row.original.email}`}
/>
<PersonChip
name={props.row.original.fullName}
picture={props.row.original.picture}
/>
</HorizontalyAlignedContainer>
</>
),
}),
columnHelper.accessor('email', {
header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
cell: (props) => (
<ClickableCell href={`mailto:${props.row.original.email}`}>
{props.row.original.email}
</ClickableCell>
),
}),
columnHelper.accessor('company', {
header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
cell: (props) => (
<ClickableCell href="#">
<CompanyChip
name={props.row.original.company.name}
picture={`https://www.google.com/s2/favicons?domain=${props.row.original.company.domain}&sz=256`}
/>
</ClickableCell>
),
}),
columnHelper.accessor('phone', {
header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
cell: (props) => (
<ClickableCell
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}
</ClickableCell>
),
}),
columnHelper.accessor('creationDate', {
header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
cell: (props) => (
<ClickableCell href="#">
{new Intl.DateTimeFormat(undefined, {
month: 'short',
day: 'numeric',
year: 'numeric',
}).format(props.row.original.creationDate)}
</ClickableCell>
),
}),
columnHelper.accessor('pipe', {
header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleHistory} />,
cell: (props) => (
<ClickableCell href="#">{props.row.original.pipe.name}</ClickableCell>
),
}),
columnHelper.accessor('city', {
header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />,
cell: (props) => (
<ClickableCell href="#">{props.row.original.city}</ClickableCell>
),
}),
];
function People() {
return (
<WithTopBarContainer title="People" icon={faUser}>
<StyledPeopleContainer>
<Table
data={defaultData}
columns={columns}
columns={peopleColumns}
viewName="All People"
viewIcon={faList}
/>

57
front/src/pages/people/defaultData.ts Normal file
View File

@ -0,0 +1,57 @@
import { Person } from './types';
export const defaultData: Array<Person> = [
{
fullName: 'Alexandre Prot',
picture: 'http://placekitten.com/256',
email: 'alexandre@qonto.com',
company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
phone: '06 12 34 56 78',
creationDate: new Date('Feb 23, 2018'),
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
countryCode: 'FR',
},
{
fullName: 'Alexandre Prot',
email: 'alexandre@qonto.com',
company: { id: 2, name: 'LinkedIn', domain: 'linkedin.com' },
phone: '06 12 34 56 78',
creationDate: new Date('Feb 23, 2018'),
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
countryCode: 'FR',
},
{
fullName: 'Alexandre Prot',
picture: 'http://placekitten.com/256',
email: 'alexandre@qonto.com',
company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
phone: '06 12 34 56 78',
creationDate: new Date('Feb 23, 2018'),
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
countryCode: 'FR',
},
{
fullName: 'Alexandre Prot',
picture: 'https://placekitten.com/g/256',
email: 'alexandre@qonto.com',
company: { id: 1, name: 'Slack', domain: 'slack.com' },
phone: '06 12 34 56 78',
creationDate: new Date('Feb 23, 2018'),
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
countryCode: 'FR',
},
{
fullName: 'Alexandre Prot',
email: 'alexandre@qonto.com',
company: { id: 2, name: 'Facebook', domain: 'facebook.com' },
phone: '06 12 34 56 78',
creationDate: new Date('Feb 23, 2018'),
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
countryCode: 'FR',
},
];

98
front/src/pages/people/people-table.tsx Normal file
View File

@ -0,0 +1,98 @@
import {
faBuildings,
faCalendar,
faEnvelope,
faUser,
faMapPin,
faPhone,
faRectangleHistory,
} from '@fortawesome/pro-regular-svg-icons';
import { createColumnHelper } from '@tanstack/react-table';
import ClickableCell from '../../components/table/ClickableCell';
import ColumnHead from '../../components/table/ColumnHead';
import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
import Checkbox from '../../components/form/Checkbox';
import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlignedContainer';
import CompanyChip from '../../components/chips/CompanyChip';
import PersonChip from '../../components/chips/PersonChip';
import { Person } from './types';
const columnHelper = createColumnHelper<Person>();
export const peopleColumns = [
columnHelper.accessor('fullName', {
header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
cell: (props) => (
<>
<HorizontalyAlignedContainer>
<Checkbox
id={`person-selected-${props.row.original.email}`}
name={`person-selected-${props.row.original.email}`}
/>
<PersonChip
name={props.row.original.fullName}
picture={props.row.original.picture}
/>
</HorizontalyAlignedContainer>
</>
),
}),
columnHelper.accessor('email', {
header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
cell: (props) => (
<ClickableCell href={`mailto:${props.row.original.email}`}>
{props.row.original.email}
</ClickableCell>
),
}),
columnHelper.accessor('company', {
header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
cell: (props) => (
<ClickableCell href="#">
<CompanyChip
name={props.row.original.company.name}
picture={`https://www.google.com/s2/favicons?domain=${props.row.original.company.domain}&sz=256`}
/>
</ClickableCell>
),
}),
columnHelper.accessor('phone', {
header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
cell: (props) => (
<ClickableCell
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}
</ClickableCell>
),
}),
columnHelper.accessor('creationDate', {
header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
cell: (props) => (
<ClickableCell href="#">
{new Intl.DateTimeFormat(undefined, {
month: 'short',
day: 'numeric',
year: 'numeric',
}).format(props.row.original.creationDate)}
</ClickableCell>
),
}),
columnHelper.accessor('pipe', {
header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleHistory} />,
cell: (props) => (
<ClickableCell href="#">{props.row.original.pipe.name}</ClickableCell>
),
}),
columnHelper.accessor('city', {
header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />,
cell: (props) => (
<ClickableCell href="#">{props.row.original.city}</ClickableCell>
),
}),
];

14
front/src/pages/people/types.ts Normal file
View File

@ -0,0 +1,14 @@
import { Company } from '../../interfaces/company.interface';
import { Pipe } from '../../interfaces/pipe.interface';
export type Person = {
fullName: string;
picture?: string;
email: string;
company: Company;
phone: string;
creationDate: Date;
pipe: Pipe;
city: string;
countryCode: string;
};