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

Add linkedinUrl and job titles to table views (#809)

Browse Source 
* Add linedinUrl and job titles to table views

* Keep address in the end

* Add mock data
This commit is contained in:
Emilien Chauvet
2023-07-21 15:18:19 -07:00
committed by GitHub
parent 56cff63c4b
commit 73e9104b16
22 changed files with 301 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
front/src/generated/graphql.tsx
View File

@ -481,6 +481,7 @@ export type Company = {
domainName: Scalars['String'];
employees?: Maybe<Scalars['Int']>;
id: Scalars['ID'];
linkedinUrl?: Maybe<Scalars['String']>;
name: Scalars['String'];
people?: Maybe<Array<Person>>;
updatedAt: Scalars['DateTime'];
@ -493,6 +494,7 @@ export type CompanyCreateInput = {
domainName: Scalars['String'];
employees?: InputMaybe<Scalars['Int']>;
id?: InputMaybe<Scalars['String']>;
linkedinUrl?: InputMaybe<Scalars['String']>;
name: Scalars['String'];
people?: InputMaybe<PersonCreateNestedManyWithoutCompanyInput>;
updatedAt?: InputMaybe<Scalars['DateTime']>;
@ -520,6 +522,7 @@ export type CompanyOrderByWithRelationInput = {
domainName?: InputMaybe<SortOrder>;
employees?: InputMaybe<SortOrder>;
id?: InputMaybe<SortOrder>;
linkedinUrl?: InputMaybe<SortOrder>;
name?: InputMaybe<SortOrder>;
people?: InputMaybe<PersonOrderByRelationAggregateInput>;
updatedAt?: InputMaybe<SortOrder>;
@ -538,6 +541,7 @@ export enum CompanyScalarFieldEnum {
DomainName = 'domainName',
Employees = 'employees',
Id = 'id',
LinkedinUrl = 'linkedinUrl',
Name = 'name',
UpdatedAt = 'updatedAt',
WorkspaceId = 'workspaceId'
@ -550,6 +554,7 @@ export type CompanyUpdateInput = {
domainName?: InputMaybe<Scalars['String']>;
employees?: InputMaybe<Scalars['Int']>;
id?: InputMaybe<Scalars['String']>;
linkedinUrl?: InputMaybe<Scalars['String']>;
name?: InputMaybe<Scalars['String']>;
people?: InputMaybe<PersonUpdateManyWithoutCompanyNestedInput>;
updatedAt?: InputMaybe<Scalars['DateTime']>;
@ -583,6 +588,7 @@ export type CompanyWhereInput = {
domainName?: InputMaybe<StringFilter>;
employees?: InputMaybe<IntNullableFilter>;
id?: InputMaybe<StringFilter>;
linkedinUrl?: InputMaybe<StringNullableFilter>;
name?: InputMaybe<StringFilter>;
people?: InputMaybe<PersonListRelationFilter>;
updatedAt?: InputMaybe<DateTimeFilter>;
@ -980,7 +986,9 @@ export type Person = {
email?: Maybe<Scalars['String']>;
firstName?: Maybe<Scalars['String']>;
id: Scalars['ID'];
jobTitle?: Maybe<Scalars['String']>;
lastName?: Maybe<Scalars['String']>;
linkedinUrl?: Maybe<Scalars['String']>;
phone?: Maybe<Scalars['String']>;
pipelineProgresses?: Maybe<Array<PipelineProgress>>;
updatedAt: Scalars['DateTime'];
@ -993,7 +1001,9 @@ export type PersonCreateInput = {
email?: InputMaybe<Scalars['String']>;
firstName?: InputMaybe<Scalars['String']>;
id?: InputMaybe<Scalars['String']>;
jobTitle?: InputMaybe<Scalars['String']>;
lastName?: InputMaybe<Scalars['String']>;
linkedinUrl?: InputMaybe<Scalars['String']>;
phone?: InputMaybe<Scalars['String']>;
pipelineProgresses?: InputMaybe<PipelineProgressCreateNestedManyWithoutPointOfContactInput>;
updatedAt?: InputMaybe<Scalars['DateTime']>;
@ -1025,7 +1035,9 @@ export type PersonOrderByWithRelationInput = {
email?: InputMaybe<SortOrder>;
firstName?: InputMaybe<SortOrder>;
id?: InputMaybe<SortOrder>;
jobTitle?: InputMaybe<SortOrder>;
lastName?: InputMaybe<SortOrder>;
linkedinUrl?: InputMaybe<SortOrder>;
phone?: InputMaybe<SortOrder>;
pipelineProgresses?: InputMaybe<PipelineProgressOrderByRelationAggregateInput>;
updatedAt?: InputMaybe<SortOrder>;
@ -1044,7 +1056,9 @@ export enum PersonScalarFieldEnum {
Email = 'email',
FirstName = 'firstName',
Id = 'id',
JobTitle = 'jobTitle',
LastName = 'lastName',
LinkedinUrl = 'linkedinUrl',
Phone = 'phone',
UpdatedAt = 'updatedAt',
WorkspaceId = 'workspaceId'
@ -1057,7 +1071,9 @@ export type PersonUpdateInput = {
email?: InputMaybe<Scalars['String']>;
firstName?: InputMaybe<Scalars['String']>;
id?: InputMaybe<Scalars['String']>;
jobTitle?: InputMaybe<Scalars['String']>;
lastName?: InputMaybe<Scalars['String']>;
linkedinUrl?: InputMaybe<Scalars['String']>;
phone?: InputMaybe<Scalars['String']>;
pipelineProgresses?: InputMaybe<PipelineProgressUpdateManyWithoutPointOfContactNestedInput>;
updatedAt?: InputMaybe<Scalars['DateTime']>;
@ -1091,7 +1107,9 @@ export type PersonWhereInput = {
email?: InputMaybe<StringNullableFilter>;
firstName?: InputMaybe<StringNullableFilter>;
id?: InputMaybe<StringFilter>;
jobTitle?: InputMaybe<StringNullableFilter>;
lastName?: InputMaybe<StringNullableFilter>;
linkedinUrl?: InputMaybe<StringNullableFilter>;
phone?: InputMaybe<StringNullableFilter>;
pipelineProgresses?: InputMaybe<PipelineProgressListRelationFilter>;
updatedAt?: InputMaybe<DateTimeFilter>;
@ -2026,14 +2044,14 @@ export type GetCompaniesQueryVariables = Exact<{
}>;
export type GetCompaniesQuery = { __typename?: 'Query', companies: Array<{ __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, employees?: number | null, _commentThreadCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } | null }> };
export type GetCompaniesQuery = { __typename?: 'Query', companies: Array<{ __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, linkedinUrl?: string | null, employees?: number | null, _commentThreadCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } | null }> };
export type GetCompanyQueryVariables = Exact<{
id: Scalars['String'];
}>;
export type GetCompanyQuery = { __typename?: 'Query', findUniqueCompany: { __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, employees?: number | null, _commentThreadCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, avatarUrl?: string | null } | null } };
export type GetCompanyQuery = { __typename?: 'Query', findUniqueCompany: { __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, linkedinUrl?: string | null, employees?: number | null, _commentThreadCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, avatarUrl?: string | null } | null } };
export type UpdateOneCompanyMutationVariables = Exact<{
where: CompanyWhereUniqueInput;
@ -2041,14 +2059,14 @@ export type UpdateOneCompanyMutationVariables = Exact<{
}>;
export type UpdateOneCompanyMutation = { __typename?: 'Mutation', updateOneCompany?: { __typename?: 'Company', address: string, createdAt: string, domainName: string, employees?: number | null, id: string, name: string, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null } | null } | null };
export type UpdateOneCompanyMutation = { __typename?: 'Mutation', updateOneCompany?: { __typename?: 'Company', address: string, createdAt: string, domainName: string, employees?: number | null, linkedinUrl?: string | null, id: string, name: string, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null } | null } | null };
export type InsertOneCompanyMutationVariables = Exact<{
data: CompanyCreateInput;
}>;
export type InsertOneCompanyMutation = { __typename?: 'Mutation', createOneCompany: { __typename?: 'Company', address: string, createdAt: string, domainName: string, employees?: number | null, id: string, name: string } };
export type InsertOneCompanyMutation = { __typename?: 'Mutation', createOneCompany: { __typename?: 'Company', address: string, createdAt: string, domainName: string, linkedinUrl?: string | null, employees?: number | null, id: string, name: string } };
export type DeleteManyCompaniesMutationVariables = Exact<{
ids?: InputMaybe<Array<Scalars['String']> | Scalars['String']>;
@ -2064,7 +2082,7 @@ export type GetPeopleQueryVariables = Exact<{
}>;
export type GetPeopleQuery = { __typename?: 'Query', people: Array<{ __typename?: 'Person', id: string, phone?: string | null, email?: string | null, city?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, createdAt: string, _commentThreadCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null }> };
export type GetPeopleQuery = { __typename?: 'Query', people: Array<{ __typename?: 'Person', id: string, phone?: string | null, email?: string | null, city?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, jobTitle?: string | null, linkedinUrl?: string | null, createdAt: string, _commentThreadCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null }> };
export type GetPersonPhoneByIdQueryVariables = Exact<{
id: Scalars['String'];
@ -2120,7 +2138,7 @@ export type GetPersonQueryVariables = Exact<{
}>;
export type GetPersonQuery = { __typename?: 'Query', findUniquePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, email?: string | null, createdAt: string, city?: string | null, phone?: string | null, _commentThreadCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null } };
export type GetPersonQuery = { __typename?: 'Query', findUniquePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, email?: string | null, createdAt: string, city?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, phone?: string | null, _commentThreadCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null } };
export type UpdateOnePersonMutationVariables = Exact<{
where: PersonWhereUniqueInput;
@ -2128,14 +2146,14 @@ export type UpdateOnePersonMutationVariables = Exact<{
}>;
export type UpdateOnePersonMutation = { __typename?: 'Mutation', updateOnePerson?: { __typename?: 'Person', id: string, city?: string | null, email?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, phone?: string | null, createdAt: string, company?: { __typename?: 'Company', domainName: string, name: string, id: string } | null } | null };
export type UpdateOnePersonMutation = { __typename?: 'Mutation', updateOnePerson?: { __typename?: 'Person', id: string, city?: string | null, email?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, phone?: string | null, createdAt: string, company?: { __typename?: 'Company', domainName: string, name: string, id: string } | null } | null };
export type InsertOnePersonMutationVariables = Exact<{
data: PersonCreateInput;
}>;
export type InsertOnePersonMutation = { __typename?: 'Mutation', createOnePerson: { __typename?: 'Person', id: string, city?: string | null, email?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, phone?: string | null, createdAt: string, company?: { __typename?: 'Company', domainName: string, name: string, id: string } | null } };
export type InsertOnePersonMutation = { __typename?: 'Mutation', createOnePerson: { __typename?: 'Person', id: string, city?: string | null, email?: string | null, firstName?: string | null, lastName?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, displayName: string, phone?: string | null, createdAt: string, company?: { __typename?: 'Company', domainName: string, name: string, id: string } | null } };
export type DeleteManyPersonMutationVariables = Exact<{
ids?: InputMaybe<Array<Scalars['String']> | Scalars['String']>;
@ -3039,6 +3057,7 @@ export const GetCompaniesDocument = gql`
name
createdAt
address
linkedinUrl
employees
_commentThreadCount
accountOwner {
@ -3089,6 +3108,7 @@ export const GetCompanyDocument = gql`
name
createdAt
address
linkedinUrl
employees
_commentThreadCount
accountOwner {
@ -3142,6 +3162,7 @@ export const UpdateOneCompanyDocument = gql`
createdAt
domainName
employees
linkedinUrl
id
name
}
@ -3180,6 +3201,7 @@ export const InsertOneCompanyDocument = gql`
address
createdAt
domainName
linkedinUrl
employees
id
name
@ -3255,6 +3277,8 @@ export const GetPeopleDocument = gql`
firstName
lastName
displayName
jobTitle
linkedinUrl
createdAt
_commentThreadCount
company {
@ -3564,6 +3588,8 @@ export const GetPersonDocument = gql`
email
createdAt
city
jobTitle
linkedinUrl
phone
_commentThreadCount
company {
@ -3613,6 +3639,8 @@ export const UpdateOnePersonDocument = gql`
id
}
email
jobTitle
linkedinUrl
firstName
lastName
displayName
@ -3661,6 +3689,8 @@ export const InsertOnePersonDocument = gql`
email
firstName
lastName
jobTitle
linkedinUrl
displayName
phone
createdAt

1
front/src/modules/companies/queries/select.ts
View File

@ -26,6 +26,7 @@ export const GET_COMPANIES = gql`
name
createdAt
address
linkedinUrl
employees
_commentThreadCount
accountOwner {

1
front/src/modules/companies/queries/show.ts
View File

@ -10,6 +10,7 @@ export const GET_COMPANY = gql`
name
createdAt
address
linkedinUrl
employees
_commentThreadCount
accountOwner {

2
front/src/modules/companies/queries/update.ts
View File

@ -17,6 +17,7 @@ export const UPDATE_ONE_COMPANY = gql`
createdAt
domainName
employees
linkedinUrl
id
name
}
@ -29,6 +30,7 @@ export const INSERT_ONE_COMPANY = gql`
address
createdAt
domainName
linkedinUrl
employees
id
name

6
front/src/modules/companies/states/companyLinkedinUrlFamilyState.ts Normal file
View File

@ -0,0 +1,6 @@
import { atomFamily } from 'recoil';
export const companyLinkedinUrlFamilyState = atomFamily<string | null, string>({
key: 'companyLinkedinUrlFamilyState',
default: null,
});

42
front/src/modules/companies/table/components/EditableCompanyLinkedinUrlCell.tsx Normal file
View File

@ -0,0 +1,42 @@
import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdateOneCompanyMutation } from '~/generated/graphql';
import { EditableCellURL } from '../../../ui/table/editable-cell/types/EditableCellURL';
import { companyLinkedinUrlFamilyState } from '../../states/companyLinkedinUrlFamilyState';
export function EditableCompanyLinkedinUrlCell() {
const currentRowEntityId = useCurrentRowEntityId();
const [updateCompany] = useUpdateOneCompanyMutation();
const linkedinUrl = useRecoilValue(
companyLinkedinUrlFamilyState(currentRowEntityId ?? ''),
);
const [internalValue, setInternalValue] = useState(linkedinUrl ?? '');
useEffect(() => {
setInternalValue(linkedinUrl ?? '');
}, [linkedinUrl]);
return (
<EditableCellURL
url={internalValue}
onChange={setInternalValue}
onSubmit={() =>
updateCompany({
variables: {
where: {
id: currentRowEntityId,
},
data: {
linkedinUrl: internalValue,
},
},
})
}
onCancel={() => setInternalValue(linkedinUrl ?? '')}
/>
);
}

6
front/src/modules/companies/table/components/companies-mock-data.ts
View File

@ -9,6 +9,7 @@ type MockedCompany = Pick<
| 'createdAt'
| 'address'
| 'employees'
| 'linkedinUrl'
| '_commentThreadCount'
> & {
accountOwner: Pick<
@ -28,6 +29,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
id: '89bb825c-171e-4bcc-9cf7-43448d6fb278',
domainName: 'airbnb.com',
name: 'Airbnb',
linkedinUrl: 'https://www.linkedin.com/company/airbnb/',
createdAt: '2023-04-26T10:08:54.724515+00:00',
address: 'San Francisco, CA',
employees: 5000,
@ -47,6 +49,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
id: 'b396e6b9-dc5c-4643-bcff-61b6cf7523ae',
domainName: 'qonto.com',
name: 'Qonto',
linkedinUrl: 'https://www.linkedin.com/company/qonto/',
createdAt: '2023-04-26T10:12:42.33625+00:00',
address: 'Paris, France',
employees: 800,
@ -58,6 +61,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
id: 'a674fa6c-1455-4c57-afaf-dd5dc086361d',
domainName: 'stripe.com',
name: 'Stripe',
linkedinUrl: 'https://www.linkedin.com/company/stripe/',
createdAt: '2023-04-26T10:10:32.530184+00:00',
address: 'San Francisco, CA',
employees: 8000,
@ -68,6 +72,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
{
id: 'b1cfd51b-a831-455f-ba07-4e30671e1dc3',
domainName: 'figma.com',
linkedinUrl: 'https://www.linkedin.com/company/figma/',
name: 'Figma',
createdAt: '2023-03-21T06:30:25.39474+00:00',
address: 'San Francisco, CA',
@ -79,6 +84,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
{
id: '5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
domainName: 'notion.com',
linkedinUrl: 'https://www.linkedin.com/company/notion/',
name: 'Notion',
createdAt: '2023-04-26T10:13:29.712485+00:00',
address: 'San Francisco, CA',

9
front/src/modules/companies/table/components/companyColumns.tsx
View File

@ -1,5 +1,6 @@
import { TableColumn } from '@/people/table/components/peopleColumns';
import {
IconBrandLinkedin,
IconBuildingSkyscraper,
IconCalendarEvent,
IconLink,
@ -13,6 +14,7 @@ import { EditableCompanyAddressCell } from './EditableCompanyAddressCell';
import { EditableCompanyCreatedAtCell } from './EditableCompanyCreatedAtCell';
import { EditableCompanyDomainNameCell } from './EditableCompanyDomainNameCell';
import { EditableCompanyEmployeesCell } from './EditableCompanyEmployeesCell';
import { EditableCompanyLinkedinUrlCell } from './EditableCompanyLinkedinUrlCell';
import { EditableCompanyNameCell } from './EditableCompanyNameCell';
export const companyColumns: TableColumn[] = [
@ -51,6 +53,13 @@ export const companyColumns: TableColumn[] = [
size: 150,
cellComponent: <EditableCompanyEmployeesCell />,
},
{
id: 'linkedinUrl',
title: 'Linkedin',
icon: <IconBrandLinkedin size={16} />,
size: 170,
cellComponent: <EditableCompanyLinkedinUrlCell />,
},
{
id: 'address',
title: 'Address',

12
front/src/modules/companies/table/hooks/useSetCompanyEntityTable.ts
View File

@ -6,6 +6,7 @@ import { companyCommentCountFamilyState } from '@/companies/states/companyCommen
import { companyCreatedAtFamilyState } from '@/companies/states/companyCreatedAtFamilyState';
import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState';
import { companyLinkedinUrlFamilyState } from '@/companies/states/companyLinkedinUrlFamilyState';
import { companyNameFamilyState } from '@/companies/states/companyNameFamilyState';
import { GetCompaniesQuery } from '~/generated/graphql';
@ -30,6 +31,17 @@ export function useSetCompanyEntityTable() {
set(companyDomainNameFamilyState(company.id), company.domainName);
}
const currentLinkedinUrl = snapshot
.getLoadable(companyLinkedinUrlFamilyState(company.id))
.valueOrThrow();
if (currentLinkedinUrl !== company.linkedinUrl) {
set(
companyLinkedinUrlFamilyState(company.id),
company.linkedinUrl ?? '',
);
}
const currentEmployees = snapshot
.getLoadable(companyEmployeesFamilyState(company.id))
.valueOrThrow();

21
front/src/modules/people/hooks/useSetPeopleEntityTable.ts
View File

@ -6,6 +6,8 @@ import { peopleCityFamilyState } from '../states/peopleCityFamilyState';
import { peopleCompanyFamilyState } from '../states/peopleCompanyFamilyState';
import { peopleCreatedAtFamilyState } from '../states/peopleCreatedAtFamilyState';
import { peopleEmailFamilyState } from '../states/peopleEmailFamilyState';
import { peopleJobTitleFamilyState } from '../states/peopleJobTitleFamilyState';
import { peopleLinkedinUrlFamilyState } from '../states/peopleLinkedinUrlFamilyState';
import { peopleNameCellFamilyState } from '../states/peopleNamesFamilyState';
import { peoplePhoneFamilyState } from '../states/peoplePhoneFamilyState';
@ -56,6 +58,25 @@ export function useSetPeopleEntityTable() {
set(peopleCreatedAtFamilyState(person.id), person.createdAt);
}
const currentJobTitle = snapshot
.getLoadable(peopleJobTitleFamilyState(person.id))
.valueOrThrow();
if (currentJobTitle !== person.jobTitle) {
set(peopleJobTitleFamilyState(person.id), person.jobTitle ?? null);
}
const currentLinkedinUrl = snapshot
.getLoadable(peopleLinkedinUrlFamilyState(person.id))
.valueOrThrow();
if (currentLinkedinUrl !== person.linkedinUrl) {
set(
peopleLinkedinUrlFamilyState(person.id),
person.linkedinUrl ?? null,
);
}
const currentNameCell = snapshot
.getLoadable(peopleNameCellFamilyState(person.id))
.valueOrThrow();

2
front/src/modules/people/queries/select.ts
View File

@ -28,6 +28,8 @@ export const GET_PEOPLE = gql`
firstName
lastName
displayName
jobTitle
linkedinUrl
createdAt
_commentThreadCount
company {

2
front/src/modules/people/queries/show.ts
View File

@ -12,6 +12,8 @@ export const GET_PERSON = gql`
email
createdAt
city
jobTitle
linkedinUrl
phone
_commentThreadCount
company {

4
front/src/modules/people/queries/update.ts
View File

@ -14,6 +14,8 @@ export const UPDATE_ONE_PERSON = gql`
id
}
email
jobTitle
linkedinUrl
firstName
lastName
displayName
@ -36,6 +38,8 @@ export const INSERT_ONE_PERSON = gql`
email
firstName
lastName
jobTitle
linkedinUrl
displayName
phone
createdAt

6
front/src/modules/people/states/peopleJobTitleFamilyState.ts Normal file
View File

@ -0,0 +1,6 @@
import { atomFamily } from 'recoil';
export const peopleJobTitleFamilyState = atomFamily<string | null, string>({
key: 'peopleJobTitleFamilyState',
default: null,
});

6
front/src/modules/people/states/peopleLinkedinUrlFamilyState.ts Normal file
View File

@ -0,0 +1,6 @@
import { atomFamily } from 'recoil';
export const peopleLinkedinUrlFamilyState = atomFamily<string | null, string>({
key: 'peopleLinkedinUrlFamilyState',
default: null,
});

43
front/src/modules/people/table/components/EditablePeopleJobTitleCell.tsx Normal file
View File

@ -0,0 +1,43 @@
import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { peopleJobTitleFamilyState } from '@/people/states/peopleJobTitleFamilyState';
import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdateOnePersonMutation } from '~/generated/graphql';
export function EditablePeopleJobTitleCell() {
const currentRowEntityId = useCurrentRowEntityId();
const [updatePerson] = useUpdateOnePersonMutation();
const jobTitle = useRecoilValue(
peopleJobTitleFamilyState(currentRowEntityId ?? ''),
);
const [internalValue, setInternalValue] = useState(jobTitle ?? '');
useEffect(() => {
setInternalValue(jobTitle ?? '');
}, [jobTitle]);
return (
<EditableCellText
value={internalValue}
onChange={setInternalValue}
onSubmit={() =>
updatePerson({
variables: {
where: {
id: currentRowEntityId,
},
data: {
jobTitle: internalValue,
},
},
})
}
onCancel={() => setInternalValue(jobTitle ?? '')}
/>
);
}

44
front/src/modules/people/table/components/EditablePeopleLinkedinUrlCell.tsx Normal file
View File

@ -0,0 +1,44 @@
import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { peopleLinkedinUrlFamilyState } from '@/people/states/peopleLinkedinUrlFamilyState';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdateOnePersonMutation } from '~/generated/graphql';
import { EditableCellURL } from '../../../ui/table/editable-cell/types/EditableCellURL';
export function EditablePeopleLinkedinUrlCell() {
const currentRowEntityId = useCurrentRowEntityId();
const [updatePerson] = useUpdateOnePersonMutation();
const linkedinUrl = useRecoilValue(
peopleLinkedinUrlFamilyState(currentRowEntityId ?? ''),
);
const [internalValue, setInternalValue] = useState(linkedinUrl ?? '');
useEffect(() => {
setInternalValue(linkedinUrl ?? '');
}, [linkedinUrl]);
return (
<EditableCellURL
url={internalValue}
onChange={setInternalValue}
onSubmit={() =>
updatePerson({
variables: {
where: {
id: currentRowEntityId,
},
data: {
linkedinUrl: internalValue,
},
},
})
}
onCancel={() => setInternalValue(linkedinUrl ?? '')}
/>
);
}

18
front/src/modules/people/table/components/peopleColumns.tsx
View File

@ -1,4 +1,6 @@
import {
IconBrandLinkedin,
IconBriefcase,
IconBuildingSkyscraper,
IconCalendarEvent,
IconMail,
@ -12,6 +14,8 @@ import { EditablePeopleCompanyCell } from './EditablePeopleCompanyCell';
import { EditablePeopleCreatedAtCell } from './EditablePeopleCreatedAtCell';
import { EditablePeopleEmailCell } from './EditablePeopleEmailCell';
import { EditablePeopleFullNameCell } from './EditablePeopleFullNameCell';
import { EditablePeopleJobTitleCell } from './EditablePeopleJobTitleCell';
import { EditablePeopleLinkedinUrlCell } from './EditablePeopleLinkedinUrlCell';
import { EditablePeoplePhoneCell } from './EditablePeoplePhoneCell';
export type TableColumn = {
@ -65,4 +69,18 @@ export const peopleColumns: TableColumn[] = [
size: 150,
cellComponent: <EditablePeopleCityCell />,
},
{
id: 'jobTitle',
title: 'Job title',
icon: <IconBriefcase size={16} />,
size: 150,
cellComponent: <EditablePeopleJobTitleCell />,
},
{
id: 'linkedinUrl',
title: 'Linkedin',
icon: <IconBrandLinkedin size={16} />,
size: 150,
cellComponent: <EditablePeopleLinkedinUrlCell />,
},
];

2
front/src/modules/ui/icon/index.ts
View File

@ -15,9 +15,11 @@ export { IconColorSwatch } from '@tabler/icons-react';
export { IconProgressCheck } from '@tabler/icons-react';
export { IconX } from '@tabler/icons-react';
export { IconChevronLeft } from '@tabler/icons-react';
export { IconBriefcase } from '@tabler/icons-react';
export { IconPlus } from '@tabler/icons-react';
export { IconMinus } from '@tabler/icons-react';
export { IconLink } from '@tabler/icons-react';
export { IconBrandLinkedin } from '@tabler/icons-react';
export { IconUsers } from '@tabler/icons-react';
export { IconCalendarEvent } from '@tabler/icons-react';
export { IconMap } from '@tabler/icons-react';

10
front/src/testing/mock-data/people.ts
View File

@ -11,6 +11,8 @@ type MockedPerson = RequiredAndNotNull<
| 'firstName'
| 'lastName'
| 'displayName'
| 'linkedinUrl'
| 'jobTitle'
| 'email'
| '__typename'
| 'phone'
@ -30,6 +32,8 @@ export const mockedPeopleData: MockedPerson[] = [
lastName: 'Prot',
displayName: 'Alexandre Prot',
email: 'alexandre@qonto.com',
linkedinUrl: 'https://www.linkedin.com/in/alexandreprot/',
jobTitle: 'CEO',
company: {
id: '5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
name: 'Qonto',
@ -48,6 +52,8 @@ export const mockedPeopleData: MockedPerson[] = [
firstName: 'John',
lastName: 'Doe',
displayName: 'John Doe',
linkedinUrl: 'https://www.linkedin.com/in/johndoe/',
jobTitle: 'CTO',
email: 'john@linkedin.com',
company: {
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6e',
@ -67,6 +73,8 @@ export const mockedPeopleData: MockedPerson[] = [
firstName: 'Jane',
lastName: 'Doe',
displayName: 'Jane Doe',
linkedinUrl: 'https://www.linkedin.com/in/janedoe/',
jobTitle: 'Investor',
email: 'jane@sequoiacap.com',
company: {
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6g',
@ -87,6 +95,8 @@ export const mockedPeopleData: MockedPerson[] = [
lastName: 'Dane',
displayName: 'Janice Dane',
email: 'janice@facebook.com',
linkedinUrl: 'https://www.linkedin.com/in/janicedane/',
jobTitle: 'CEO',
company: {
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6i',
name: 'Facebook',

6
server/src/database/migrations/20230721210543_add_linkedin_url_and_job_title_fields/migration.sql Normal file
View File

@ -0,0 +1,6 @@
-- AlterTable
ALTER TABLE "companies" ADD COLUMN "linkedinUrl" TEXT;
-- AlterTable
ALTER TABLE "people" ADD COLUMN "jobTitle" TEXT,
ADD COLUMN "linkedinUrl" TEXT;

31
server/src/database/schema.prisma
View File

@ -203,19 +203,22 @@ model WorkspaceMember {
model Company {
/// @Validator.IsString()
/// @Validator.IsOptional()
id String @id @default(uuid())
id String @id @default(uuid())
/// @Validator.IsString()
/// @Validator.IsOptional()
name String
name String
/// @Validator.IsString()
/// @Validator.IsOptional()
domainName String
domainName String
/// @Validator.IsString()
/// @Validator.IsOptional()
address String
linkedinUrl String?
/// @Validator.IsString()
/// @Validator.IsOptional()
address String
/// @Validator.IsNumber()
/// @Validator.IsOptional()
employees Int?
employees Int?
people Person[]
accountOwner User? @relation(fields: [accountOwnerId], references: [id])
@ -237,22 +240,28 @@ model Company {
model Person {
/// @Validator.IsString()
/// @Validator.IsOptional()
id String @id @default(uuid())
id String @id @default(uuid())
/// @Validator.IsString()
/// @Validator.IsOptional()
firstName String?
firstName String?
/// @Validator.IsString()
/// @Validator.IsOptional()
lastName String?
lastName String?
/// @Validator.IsString()
/// @Validator.IsOptional()
email String?
email String?
/// @Validator.IsString()
/// @Validator.IsOptional()
phone String?
linkedinUrl String?
/// @Validator.IsString()
/// @Validator.IsOptional()
city String?
jobTitle String?
/// @Validator.IsString()
/// @Validator.IsOptional()
phone String?
/// @Validator.IsString()
/// @Validator.IsOptional()
city String?
company Company? @relation(fields: [companyId], references: [id])
companyId String?