mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-25 21:13:01 +03:00
Merge pull request #63 from twentyhq/anders/t-105-i-see-a-sales-pipeline-designed-with
Add pipe chip
This commit is contained in:
commit
1fdce4ee03
32
front/src/components/chips/PipeChip.tsx
Normal file
32
front/src/components/chips/PipeChip.tsx
Normal 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;
|
@ -32,7 +32,7 @@ export type GraphqlPerson = {
|
|||||||
export const mapPerson = (person: GraphqlPerson): Person => ({
|
export const mapPerson = (person: GraphqlPerson): Person => ({
|
||||||
fullName: `${person.firstname} ${person.lastname}`,
|
fullName: `${person.firstname} ${person.lastname}`,
|
||||||
creationDate: new Date(person.created_at),
|
creationDate: new Date(person.created_at),
|
||||||
pipe: { name: 'coucou', id: 1, icon: 'faUser' },
|
pipe: { name: 'coucou', id: 1, icon: '💰' },
|
||||||
...person,
|
...person,
|
||||||
company: {
|
company: {
|
||||||
id: 1,
|
id: 1,
|
||||||
|
@ -16,6 +16,7 @@ import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlig
|
|||||||
import CompanyChip from '../../components/chips/CompanyChip';
|
import CompanyChip from '../../components/chips/CompanyChip';
|
||||||
import PersonChip from '../../components/chips/PersonChip';
|
import PersonChip from '../../components/chips/PersonChip';
|
||||||
import { Person } from '../../interfaces/person.interface';
|
import { Person } from '../../interfaces/person.interface';
|
||||||
|
import PipeChip from '../../components/chips/PipeChip';
|
||||||
|
|
||||||
const columnHelper = createColumnHelper<Person>();
|
const columnHelper = createColumnHelper<Person>();
|
||||||
export const peopleColumns = [
|
export const peopleColumns = [
|
||||||
@ -86,7 +87,10 @@ export const peopleColumns = [
|
|||||||
columnHelper.accessor('pipe', {
|
columnHelper.accessor('pipe', {
|
||||||
header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleHistory} />,
|
header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleHistory} />,
|
||||||
cell: (props) => (
|
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', {
|
columnHelper.accessor('city', {
|
||||||
|
Loading…
Reference in New Issue
Block a user