From cb3a209380ad65012829dbcbfb8a3dcb0fdf9563 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Wed, 12 Apr 2023 11:39:46 +0200 Subject: [PATCH] Setting up first table in frontend --- .circleci/config.yml | 84 -------------------- front/src/components/table/Table.tsx | 76 ++++++++++++++++++ front/src/components/table/TableHeader.tsx | 15 ++++ front/src/interfaces/company.interface.ts | 5 ++ front/src/interfaces/pipe.interface.ts | 5 ++ front/src/pages/people/People.tsx | 92 +++++++++++++++++++++- 6 files changed, 192 insertions(+), 85 deletions(-) delete mode 100644 .circleci/config.yml create mode 100644 front/src/components/table/Table.tsx create mode 100644 front/src/components/table/TableHeader.tsx create mode 100644 front/src/interfaces/company.interface.ts create mode 100644 front/src/interfaces/pipe.interface.ts diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100644 index 095f78b6f..000000000 --- a/.circleci/config.yml +++ /dev/null @@ -1,84 +0,0 @@ -version: 2.1 - -orbs: - aws-ecr: circleci/aws-ecr@8.2.1 - aws-ecs: circleci/aws-ecs@03.2.0 - slack: circleci/slack@4.12.0 - node: circleci/node@5.0.3 - -jobs: - tests-front: - executor: node/default - steps: - - checkout - - run: - command: cd front && npm install - name: install node dependencies - - run: - command: cd front && npm run test - name: tests - -workflows: - build-and-deploy: - jobs: - - tests-front - - aws-ecr/build-and-push-image: - name: build-image - filters: - branches: - only: main - requires: - - tests-front - dockerfile: ./infra/prod/twenty/Dockerfile - registry-id: AWS_ACCOUNT_ID - aws-access-key-id: AWS_ACCESS_KEY_ID - aws-secret-access-key: AWS_SECRET_ACCESS_KEY - region: $AWS_REGION - repo: $AWS_ECR_REPO - tag: $CIRCLE_SHA1 - extra-build-args: > - --build-arg REACT_APP_API_URL=$REACT_APP_API_URL - - - aws-ecs/deploy-service-update: - name: deploy-canary - requires: - - build-image - family: $AWS_ECS_CONTAINER_NAME_CANARY - cluster: $AWS_ECS_CLUSTER - container-image-name-updates: "container=$AWS_ECS_CONTAINER_NAME_CANARY,tag=${CIRCLE_SHA1}" - - slack/on-hold: - name: slack-notification - context: slack-secrets - requires: - - deploy-canary - - hold: - type: approval - requires: - - slack-notification - - aws-ecs/deploy-service-update: - name: deploy-default - requires: - - hold - family: $AWS_ECS_CONTAINER_NAME_DEFAULT - cluster: $AWS_ECS_CLUSTER - container-image-name-updates: "container=$AWS_ECS_CONTAINER_NAME_DEFAULT,tag=${CIRCLE_SHA1}" - post-steps: - - slack/notify: - event: pass - template: basic_success_1 - - slack/notify: - event: fail - template: basic_fail_1 - - aws-ecr/build-and-push-image: - name: build-image-latest - requires: - - deploy-default - dockerfile: ./infra/prod/twenty/Dockerfile - registry-id: AWS_ACCOUNT_ID - aws-access-key-id: AWS_ACCESS_KEY_ID - aws-secret-access-key: AWS_SECRET_ACCESS_KEY - region: $AWS_REGION - repo: $AWS_ECR_REPO - tag: latest - extra-build-args: > - --build-arg REACT_APP_API_URL=$REACT_APP_API_URL diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx new file mode 100644 index 000000000..325b399cc --- /dev/null +++ b/front/src/components/table/Table.tsx @@ -0,0 +1,76 @@ +import * as React from 'react'; + +import { + ColumnDef, + flexRender, + getCoreRowModel, + useReactTable, +} from '@tanstack/react-table'; +import TableHeader from './TableHeader'; + +type OwnProps = { + data: Array; + columns: Array>; + viewName: string; +}; + +function Table({ data, columns, viewName }: OwnProps) { + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + }); + + return ( +
+ + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + ))} + + ))} + + + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + ))} + + ))} + + + {table.getFooterGroups().map((footerGroup) => ( + + {footerGroup.headers.map((header) => ( + + ))} + + ))} + +
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.footer, + header.getContext(), + )} +
+
+ ); +} + +export default Table; diff --git a/front/src/components/table/TableHeader.tsx b/front/src/components/table/TableHeader.tsx new file mode 100644 index 000000000..170ba573a --- /dev/null +++ b/front/src/components/table/TableHeader.tsx @@ -0,0 +1,15 @@ +import styled from '@emotion/styled'; + +type OwnProps = { + viewName: string; +}; + +const StyledTitle = styled.div` + display: flex; +`; + +function TableHeader({ viewName }: OwnProps) { + return {viewName}; +} + +export default TableHeader; diff --git a/front/src/interfaces/company.interface.ts b/front/src/interfaces/company.interface.ts new file mode 100644 index 000000000..05e76c2a9 --- /dev/null +++ b/front/src/interfaces/company.interface.ts @@ -0,0 +1,5 @@ +export interface Company { + id: number; + name: string; + logo: string; +} diff --git a/front/src/interfaces/pipe.interface.ts b/front/src/interfaces/pipe.interface.ts new file mode 100644 index 000000000..d80b58017 --- /dev/null +++ b/front/src/interfaces/pipe.interface.ts @@ -0,0 +1,5 @@ +export interface Pipe { + id: number; + name: string; + icon: string; +} diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index c3ec377e2..8bb9bd9fe 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -1,10 +1,100 @@ import { faUser } from '@fortawesome/free-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'; + +type People = { + fullName: string; + email: string; + company: Company; + phone: string; + creationDate: string; + pipe: Pipe; + city: string; +}; + +const defaultData: Array = [ + { + fullName: 'Alexandre Prot', + 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', + pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' }, + city: 'Paris', + }, + { + fullName: 'Alexandre Prot', + 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', + pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' }, + city: 'Paris', + }, + { + fullName: 'Alexandre Prot', + 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', + pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' }, + city: 'Paris', + }, + { + fullName: 'Alexandre Prot', + 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', + pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' }, + city: 'Paris', + }, + { + fullName: 'Alexandre Prot', + 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', + pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' }, + city: 'Paris', + }, +]; + +const columnHelper = createColumnHelper(); + +const columns = [ + columnHelper.accessor('fullName', { + header: () => 'People', + }), + columnHelper.accessor('email', { + header: () => Email, + }), + columnHelper.accessor('company', { + header: () => Company, + cell: (props) => {props.row.original.company.name}, + }), + columnHelper.accessor('phone', { + header: () => Phone, + }), + columnHelper.accessor('creationDate', { + header: () => Creation, + }), + columnHelper.accessor('pipe', { + header: () => Pipe, + cell: (props) => {props.row.original.pipe.name}, + }), + columnHelper.accessor('city', { + header: () => City, + }), +]; function People() { return ( - <> + ); }