Merge pull request #31 from twentyhq/table-cell-styling

Table cell styling

front/package-lock.json

@@ -21,6 +21,7 @@
         "@types/react-dom": "^18.0.9",
         "graphql": "^16.6.0",
         "jwt-decode": "^3.1.2",
+        "libphonenumber-js": "^1.10.26",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.4.4",
@@ -19216,6 +19217,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/libphonenumber-js": {
+      "version": "1.10.26",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.26.tgz",
+      "integrity": "sha512-oB3l4J5gEhMV+ymmlIjWedsbCpsNRqbEZ/E/MpN2QVyinKNra6DcuXywxSk/72M3DZDoH/6kzurOq1erznBMwQ=="
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",

front/package.json

@@ -16,6 +16,7 @@
     "@types/react-dom": "^18.0.9",
     "graphql": "^16.6.0",
     "jwt-decode": "^3.1.2",
+    "libphonenumber-js": "^1.10.26",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.4",

front/src/components/cell-link/CellLink.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+
+type OwnProps = {
+  name: string;
+  picture?: string;
+  href: string;
+};
+
+const StyledContainer = styled.span`
+  background-color: ${(props) => props.theme.tertiaryBackground};
+  border-radius: 4px;
+  color: ${(props) => props.theme.text80};
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px 4px 4px;
+  gap: 4px;
+
+  img {
+    height: 1rem;
+    width: 1rem;
+    border-radius: 0.5rem;
+    object-fit: cover;
+  }
+`;
+
+function CellLink({ name, picture, href }: OwnProps) {
+  return (
+    <Link to={href}>
+      <StyledContainer>
+        {picture && <img src={picture?.toString()} alt="" />}
+        {name}
+      </StyledContainer>
+    </Link>
+  );
+}
+
+export default CellLink;

front/src/pages/people/People.tsx

@@ -12,16 +12,21 @@ import { Company } from '../../interfaces/company.interface';
 import { Pipe } from '../../interfaces/pipe.interface';
 import { createColumnHelper } from '@tanstack/react-table';
 import styled from '@emotion/styled';
+import CellLink from '../../components/cell-link/CellLink';
 import TableHeader from '../../components/table/TableHeader';
+import personPlaceholder from './placeholder.png';
+import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
 
-type People = {
+type Person = {
   fullName: string;
+  picture?: string;
   email: string;
   company: Company;
   phone: string;
-  creationDate: string;
+  creationDate: Date;
   pipe: Pipe;
   city: string;
+  countryCode: string;
 };
 
 const StyledPeopleContainer = styled.div`
@@ -31,78 +36,136 @@ const StyledPeopleContainer = styled.div`
   table {
     margin-top: 8px;
   }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
 `;
 
-const defaultData: Array<People> = [
+const defaultData: Array<Person> = [
   {
     fullName: 'Alexandre Prot',
+    picture: personPlaceholder,
     email: 'alexandre@qonto.com',
     company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
     phone: '06 12 34 56 78',
-    creationDate: 'Feb 23, 2018',
+    creationDate: new Date('Feb 23, 2018'),
     pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
     city: 'Paris',
+    countryCode: 'FR',
   },
   {
     fullName: 'Alexandre Prot',
+    picture: personPlaceholder,
     email: 'alexandre@qonto.com',
     company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
     phone: '06 12 34 56 78',
-    creationDate: 'Feb 23, 2018',
+    creationDate: new Date('Feb 23, 2018'),
     pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
     city: 'Paris',
+    countryCode: 'FR',
   },
   {
     fullName: 'Alexandre Prot',
+    picture: personPlaceholder,
     email: 'alexandre@qonto.com',
     company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
     phone: '06 12 34 56 78',
-    creationDate: 'Feb 23, 2018',
+    creationDate: new Date('Feb 23, 2018'),
     pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
     city: 'Paris',
+    countryCode: 'FR',
   },
   {
     fullName: 'Alexandre Prot',
+    picture: personPlaceholder,
     email: 'alexandre@qonto.com',
     company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
     phone: '06 12 34 56 78',
-    creationDate: 'Feb 23, 2018',
+    creationDate: new Date('Feb 23, 2018'),
     pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
     city: 'Paris',
+    countryCode: 'FR',
   },
   {
     fullName: 'Alexandre Prot',
+    picture: personPlaceholder,
     email: 'alexandre@qonto.com',
     company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
     phone: '06 12 34 56 78',
-    creationDate: 'Feb 23, 2018',
+    creationDate: new Date('Feb 23, 2018'),
     pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
     city: 'Paris',
+    countryCode: 'FR',
   },
 ];
 
-const columnHelper = createColumnHelper<People>();
+const columnHelper = createColumnHelper<Person>();
 
 const columns = [
   columnHelper.accessor('fullName', {
     header: () => <TableHeader viewName="People" viewIcon={faUser} />,
+    cell: (props) => (
+      <CellLink
+        name={props.row.original.fullName}
+        picture={props.row.original.picture}
+        href="#"
+      />
+    ),
   }),
   columnHelper.accessor('email', {
     header: () => <TableHeader viewName="Email" viewIcon={faEnvelope} />,
+    cell: (props) => (
+      <a href={`mailto:${props.row.original.email}`}>
+        {props.row.original.email}
+      </a>
+    ),
   }),
   columnHelper.accessor('company', {
-    cell: (props) => <span>{props.row.original.company.name}</span>,
     header: () => <TableHeader viewName="Company" viewIcon={faBuilding} />,
+    cell: (props) => (
+      <CellLink
+        name={props.row.original.company.name}
+        picture={props.row.original.company.logo}
+        href="#"
+      />
+    ),
   }),
   columnHelper.accessor('phone', {
     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', {
     header: () => <TableHeader viewName="Creation" viewIcon={faCalendar} />,
+    cell: (props) =>
+      new Intl.DateTimeFormat(undefined, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      }).format(props.row.original.creationDate),
   }),
   columnHelper.accessor('pipe', {
-    cell: (props) => <span>{props.row.original.pipe.name}</span>,
     header: () => <TableHeader viewName="Pipe" viewIcon={faRectangleList} />,
+    cell: (props) => (
+      <CellLink
+        name={props.row.original.pipe.name}
+        picture={props.row.original.pipe.icon}
+        href="#"
+      />
+    ),
   }),
   columnHelper.accessor('city', {
     header: () => <TableHeader viewName="City" viewIcon={faMapPin} />,