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

Make all fields optional on entities (#121)

Browse Source 
* Make all fields optional on entities

* Rewrite tests

* Add test on TableHeader Cancel button
This commit is contained in:
Charles Bochet
2023-05-17 14:50:49 +02:00
committed by GitHub
parent 2facb383a2
commit bc49815ff0
31 changed files with 541 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
front/src/pages/companies/Companies.tsx
View File

@ -11,7 +11,7 @@ import {
useCompaniesQuery,
} from '../../services/companies';
import Table from '../../components/table/Table';
import { Company, mapCompany } from '../../interfaces/company.interface';
import { Company, mapToCompany } from '../../interfaces/company.interface';
import {
useCompaniesColumns,
availableFilters,
@ -61,7 +61,7 @@ function Companies() {
useEffect(() => {
if (!loading) {
if (data) {
setInternalData(data.companies.map(mapCompany));
setInternalData(data.companies.map(mapToCompany));
}
}
}, [loading, setInternalData, data]);
@ -70,10 +70,10 @@ function Companies() {
const newCompany: Company = {
id: uuidv4(),
name: '',
domain_name: '',
employees: 0,
domainName: '',
employees: '0',
address: '',
opportunities: [],
pipes: [],
creationDate: new Date(),
accountOwner: null,
};

2
front/src/pages/companies/__tests__/Companies.test.tsx
View File

@ -18,7 +18,7 @@ jest.mock('../../../apollo', () => {
variables: GraphqlMutationCompany;
}) => {
const gqlCompany = arg.variables as unknown as GraphqlQueryCompany;
return { data: companyInterface.mapCompany(gqlCompany) };
return { data: companyInterface.mapToCompany(gqlCompany) };
},
},
};

38
front/src/pages/companies/companies-table.tsx
View File

@ -1,5 +1,5 @@
import { CellContext, createColumnHelper } from '@tanstack/react-table';
import { Company, mapCompany } from '../../interfaces/company.interface';
import { Company, mapToCompany } from '../../interfaces/company.interface';
import { updateCompany } from '../../services/companies';
import ColumnHead from '../../components/table/ColumnHead';
import CompanyChip from '../../components/chips/CompanyChip';
@ -29,7 +29,7 @@ import {
} from '../../services/search/search';
import EditableDate from '../../components/table/editable-cell/EditableDate';
import EditableRelation from '../../components/table/editable-cell/EditableRelation';
import { User, mapUser } from '../../interfaces/user.interface';
import { User, mapToUser } from '../../interfaces/user.interface';
import { useMemo } from 'react';
import { SelectAllCheckbox } from '../../components/table/SelectAllCheckbox';
import Checkbox from '../../components/form/Checkbox';
@ -79,7 +79,7 @@ export const availableFilters = [
}),
resultMapper: (company) => ({
render: (company) => company.name,
value: mapCompany(company),
value: mapToCompany(company),
}),
},
selectedValueRender: (company) => company.name,
@ -110,24 +110,24 @@ export const availableFilters = [
name: { _ilike: `%${searchInput}%` },
}),
resultMapper: (company) => ({
render: (company) => company.domain_name,
value: mapCompany(company),
render: (company) => company.domainName,
value: mapToCompany(company),
}),
},
selectedValueRender: (company) => company.domain_name,
selectedValueRender: (company) => company.domainName,
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (company) => ({
domain_name: { _eq: company.domain_name },
domain_name: { _eq: company.domainName },
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (company) => ({
_not: { domain_name: { _eq: company.domain_name } },
_not: { domain_name: { _eq: company.domainName } },
}),
},
],
@ -163,9 +163,9 @@ export const useCompaniesColumns = () => {
),
cell: (props) => (
<EditableChip
value={props.row.original.name}
value={props.row.original.name || ''}
placeholder="Name"
picture={`https://www.google.com/s2/favicons?domain=${props.row.original.domain_name}&sz=256`}
picture={`https://www.google.com/s2/favicons?domain=${props.row.original.domainName}&sz=256`}
changeHandler={(value: string) => {
const company = props.row.original;
company.name = value;
@ -181,23 +181,23 @@ export const useCompaniesColumns = () => {
),
cell: (props) => (
<EditableText
content={props.row.original.employees.toFixed(0)}
content={props.row.original.employees || ''}
changeHandler={(value) => {
const company = props.row.original;
company.employees = parseInt(value);
company.employees = value;
updateCompany(company);
}}
/>
),
}),
columnHelper.accessor('domain_name', {
columnHelper.accessor('domainName', {
header: () => <ColumnHead viewName="URL" viewIcon={<FaLink />} />,
cell: (props) => (
<EditableText
content={props.row.original.domain_name}
content={props.row.original.domainName || ''}
changeHandler={(value) => {
const company = props.row.original;
company.domain_name = value;
company.domainName = value;
updateCompany(company);
}}
/>
@ -207,7 +207,7 @@ export const useCompaniesColumns = () => {
header: () => <ColumnHead viewName="Address" viewIcon={<FaMapPin />} />,
cell: (props) => (
<EditableText
content={props.row.original.address}
content={props.row.original.address || ''}
changeHandler={(value) => {
const company = props.row.original;
company.address = value;
@ -222,7 +222,7 @@ export const useCompaniesColumns = () => {
),
cell: (props) => (
<EditableDate
value={props.row.original.creationDate}
value={props.row.original.creationDate || new Date()}
changeHandler={(value: Date) => {
const company = props.row.original;
company.creationDate = value;
@ -244,7 +244,7 @@ export const useCompaniesColumns = () => {
accountOwner: User,
): PersonChipPropsType => {
return {
name: accountOwner.displayName,
name: accountOwner.displayName || '',
};
}}
changeHandler={(relation: User) => {
@ -268,7 +268,7 @@ export const useCompaniesColumns = () => {
}),
resultMapper: (accountOwner) => ({
render: (accountOwner) => accountOwner.displayName,
value: mapUser(accountOwner),
value: mapToUser(accountOwner),
}),
} satisfies SearchConfigType<User>
}

6
front/src/pages/people/People.tsx
View File

@ -8,7 +8,7 @@ import {
availableSorts,
usePeopleColumns,
} from './people-table';
import { Person, mapPerson } from '../../interfaces/person.interface';
import { Person, mapToPerson } from '../../interfaces/person.interface';
import { useCallback, useEffect, useRef, useState } from 'react';
import {
PeopleSelectedSortType,
@ -58,7 +58,7 @@ function People() {
useEffect(() => {
if (!loading) {
if (data) {
setInternalData(data.people.map(mapPerson));
setInternalData(data.people.map(mapToPerson));
}
}
}, [loading, setInternalData, data]);
@ -71,7 +71,7 @@ function People() {
email: '',
phone: '',
company: null,
pipe: null,
pipes: [],
creationDate: new Date(),
city: '',
};

2
front/src/pages/people/__tests__/People.test.tsx
View File

@ -18,7 +18,7 @@ jest.mock('../../../apollo', () => {
variables: GraphqlMutationPerson;
}) => {
const gqlPerson = arg.variables as unknown as GraphqlQueryPerson;
return { data: personInterface.mapPerson(gqlPerson) };
return { data: personInterface.mapToPerson(gqlPerson) };
},
},
};

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

@ -14,7 +14,7 @@ import Checkbox from '../../components/form/Checkbox';
import CompanyChip, {
CompanyChipPropsType,
} from '../../components/chips/CompanyChip';
import { Person, mapPerson } from '../../interfaces/person.interface';
import { Person, mapToPerson } from '../../interfaces/person.interface';
import EditableText from '../../components/table/editable-cell/EditableText';
import {
FilterConfigType,
@ -26,7 +26,7 @@ import {
SEARCH_COMPANY_QUERY,
SEARCH_PEOPLE_QUERY,
} from '../../services/search/search';
import { Company, mapCompany } from '../../interfaces/company.interface';
import { Company, mapToCompany } from '../../interfaces/company.interface';
import EditablePhone from '../../components/table/editable-cell/EditablePhone';
import EditableFullName from '../../components/table/editable-cell/EditableFullName';
import EditableDate from '../../components/table/editable-cell/EditableDate';
@ -93,7 +93,7 @@ export const fullnameFilter = {
}),
resultMapper: (person) => ({
render: (person) => `${person.firstname} ${person.lastname}`,
value: mapPerson(person),
value: mapToPerson(person),
}),
},
selectedValueRender: (person) => `${person.firstname} ${person.lastname}`,
@ -133,11 +133,11 @@ export const companyFilter = {
name: { _ilike: `%${searchInput}%` },
}),
resultMapper: (data) => ({
value: mapCompany(data),
value: mapToCompany(data),
render: (company) => company.name,
}),
},
selectedValueRender: (company) => company.name,
selectedValueRender: (company) => company.name || '',
operands: [
{
label: 'Equal',
@ -167,7 +167,7 @@ export const emailFilter = {
}),
resultMapper: (person) => ({
render: (person) => person.email,
value: mapPerson(person),
value: mapToPerson(person),
}),
},
operands: [
@ -186,7 +186,7 @@ export const emailFilter = {
}),
},
],
selectedValueRender: (person) => person.email,
selectedValueRender: (person) => person.email || '',
} satisfies FilterConfigType<Person, Person>;
export const cityFilter = {
@ -200,7 +200,7 @@ export const cityFilter = {
}),
resultMapper: (person) => ({
render: (person) => person.city,
value: mapPerson(person),
value: mapToPerson(person),
}),
},
operands: [
@ -219,7 +219,7 @@ export const cityFilter = {
}),
},
],
selectedValueRender: (person) => person.email,
selectedValueRender: (person) => person.email || '',
} satisfies FilterConfigType<Person, Person>;
export const availableFilters = [
@ -256,8 +256,8 @@ export const usePeopleColumns = () => {
header: () => <ColumnHead viewName="People" viewIcon={<FaRegUser />} />,
cell: (props) => (
<EditableFullName
firstname={props.row.original.firstname}
lastname={props.row.original.lastname}
firstname={props.row.original.firstname || ''}
lastname={props.row.original.lastname || ''}
changeHandler={(firstName: string, lastName: string) => {
const person = props.row.original;
person.firstname = firstName;
@ -272,7 +272,7 @@ export const usePeopleColumns = () => {
cell: (props) => (
<EditableText
placeholder="Email"
content={props.row.original.email}
content={props.row.original.email || ''}
changeHandler={(value: string) => {
const person = props.row.original;
person.email = value;
@ -292,8 +292,8 @@ export const usePeopleColumns = () => {
ChipComponent={CompanyChip}
chipComponentPropsMapper={(company): CompanyChipPropsType => {
return {
name: company.name,
picture: `https://www.google.com/s2/favicons?domain=${company.domain_name}&sz=256`,
name: company.name || '',
picture: `https://www.google.com/s2/favicons?domain=${company.domainName}&sz=256`,
};
}}
changeHandler={(relation) => {
@ -313,7 +313,7 @@ export const usePeopleColumns = () => {
}),
resultMapper: (company) => ({
render: (company) => company.name,
value: mapCompany(company),
value: mapToCompany(company),
}),
} satisfies SearchConfigType<Company>
}
@ -325,7 +325,7 @@ export const usePeopleColumns = () => {
cell: (props) => (
<EditablePhone
placeholder="Phone"
value={props.row.original.phone}
value={props.row.original.phone || ''}
changeHandler={(value: string) => {
const person = props.row.original;
person.phone = value;
@ -340,7 +340,7 @@ export const usePeopleColumns = () => {
),
cell: (props) => (
<EditableDate
value={props.row.original.creationDate}
value={props.row.original.creationDate || new Date()}
changeHandler={(value: Date) => {
const person = props.row.original;
person.creationDate = value;
@ -355,7 +355,7 @@ export const usePeopleColumns = () => {
<EditableText
editModeHorizontalAlign="right"
placeholder="City"
content={props.row.original.city}
content={props.row.original.city || ''}
changeHandler={(value: string) => {
const person = props.row.original;
person.city = value;