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

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';