twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-25 04:55:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #63 from twentyhq/anders/t-105-i-see-a-sales-pipeline-designed-with

Browse Source 
Add pipe chip
This commit is contained in:
Charles Bochet 2023-04-21 17:32:26 +02:00 committed by GitHub
commit 1fdce4ee03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
front/src/components/chips/PipeChip.tsx Normal file
View File

@ -0,0 +1,32 @@
import * as React from 'react';
import styled from '@emotion/styled';
type OwnProps = {
name: string;
picture?: string;
};
const StyledContainer = styled.span`
background-color: ${(props) => props.theme.tertiaryBackground};
border-radius: ${(props) => props.theme.spacing(1)};
color: ${(props) => props.theme.text80};
display: inline-flex;
align-items: center;
padding: ${(props) => props.theme.spacing(1)};
gap: ${(props) => props.theme.spacing(1)};
:hover {
filter: brightness(95%);
}
`;
function PipeChip({ name, picture }: OwnProps) {
return (
<StyledContainer data-testid="company-chip">
{picture && <span>{picture}</span>}
<span>{name}</span>
</StyledContainer>
);
}
export default PipeChip;

2
front/src/interfaces/person.interface.ts
View File

@ -32,7 +32,7 @@ export type GraphqlPerson = {
export const mapPerson = (person: GraphqlPerson): Person => ({
fullName: `${person.firstname} ${person.lastname}`,
creationDate: new Date(person.created_at),
pipe: { name: 'coucou', id: 1, icon: 'faUser' },
pipe: { name: 'coucou', id: 1, icon: '💰' },
...person,
company: {
id: 1,

6
front/src/pages/people/people-table.tsx
View File

@ -16,6 +16,7 @@ import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlig
import CompanyChip from '../../components/chips/CompanyChip';
import PersonChip from '../../components/chips/PersonChip';
import { Person } from '../../interfaces/person.interface';
import PipeChip from '../../components/chips/PipeChip';
const columnHelper = createColumnHelper<Person>();
export const peopleColumns = [
@ -86,7 +87,10 @@ export const peopleColumns = [
columnHelper.accessor('pipe', {
header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleHistory} />,
cell: (props) => (
<ClickableCell href="#">{props.row.original.pipe.name}</ClickableCell>
<PipeChip
name={props.row.original.pipe.name}
picture={props.row.original.pipe.icon}
/>
),
}),
columnHelper.accessor('city', {