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

Add new line on Table Views (#110)

Browse Source 
Add addition on Companies table
This commit is contained in:
Charles Bochet
2023-05-07 23:41:22 +02:00
committed by GitHub
parent 8c7815af79
commit 50a4a97145
15 changed files with 329 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
front/package-lock.json generated
View File

@ -24,6 +24,7 @@
"react-dom": "^18.2.0",
"react-icons": "^4.8.0",
"react-router-dom": "^6.4.4",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4"
},
"devDependencies": {
@ -45,6 +46,7 @@
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/react-datepicker": "^4.11.2",
"@types/uuid": "^9.0.1",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"babel-plugin-named-exports-order": "^0.0.2",
"eslint": "^8.28.0",
@ -8883,6 +8885,12 @@
"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
"dev": true
},
"node_modules/@types/uuid": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
"integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
"dev": true
},
"node_modules/@types/ws": {
"version": "8.5.4",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
@ -28338,7 +28346,6 @@
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
"integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
"dev": true,
"bin": {
"uuid": "dist/bin/uuid"
}

2
front/package.json
View File

@ -19,6 +19,7 @@
"react-dom": "^18.2.0",
"react-icons": "^4.8.0",
"react-router-dom": "^6.4.4",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
@ -103,6 +104,7 @@
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/react-datepicker": "^4.11.2",
"@types/uuid": "^9.0.1",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"babel-plugin-named-exports-order": "^0.0.2",
"eslint": "^8.28.0",

2
front/src/components/table/Table.tsx
View File

@ -99,7 +99,7 @@ function Table<TData extends { id: string }, SortField, FilterProperies>({
onFiltersUpdate,
onFilterSearch,
}: OwnProps<TData, SortField, FilterProperies>) {
const table = useReactTable({
const table = useReactTable<TData>({
data,
columns,
getCoreRowModel: getCoreRowModel(),

2
front/src/components/table/editable-cell/EditableRelation.tsx
View File

@ -49,7 +49,7 @@ const StyledEditModeResultItem = styled.div`
`;
export type EditableRelationProps<RelationType, ChipComponentPropsType> = {
relation?: RelationType;
relation?: RelationType | null;
searchPlaceholder: string;
searchFilter: FilterType<People_Bool_Exp>;
changeHandler: (relation: RelationType) => void;

19
front/src/interfaces/company.interface.ts
View File

@ -13,7 +13,7 @@ export type Company = {
employees: number;
address: string;
opportunities: Opportunity[];
accountOwner?: User;
accountOwner?: User | null;
creationDate: Date;
};
@ -39,11 +39,14 @@ export type GraphqlMutationCompany = {
employees: number;
address: string;
created_at: string;
account_owner?: GraphqlQueryUser | null;
};
export const mapCompany = (company: GraphqlQueryCompany): Company => ({
...company,
id: company.id,
employees: company.employees,
name: company.name,
address: company.address,
domain_name: company.domain_name,
accountOwner: company.account_owner
? {
@ -57,9 +60,19 @@ export const mapCompany = (company: GraphqlQueryCompany): Company => ({
});
export const mapGqlCompany = (company: Company): GraphqlMutationCompany => ({
...company,
name: company.name,
domain_name: company.domain_name,
created_at: company.creationDate.toUTCString(),
account_owner_id: company.accountOwner?.id,
address: company.address,
employees: company.employees,
id: company.id,
account_owner: company.accountOwner
? {
id: company.accountOwner?.id,
email: company.accountOwner?.email,
displayName: company.accountOwner?.displayName,
__typename: 'users',
}
: null,
});

10
front/src/layout/containers/WithTopBarContainer.tsx
View File

@ -6,6 +6,7 @@ type OwnProps = {
children: JSX.Element;
title: string;
icon: ReactNode;
onAddButtonClick?: () => void;
};
const StyledContainer = styled.div`
@ -34,10 +35,15 @@ const ContentSubContainer = styled.div`
flex: 1;
`;
function FullWidthContainer({ children, title, icon }: OwnProps) {
function FullWidthContainer({
children,
title,
icon,
onAddButtonClick,
}: OwnProps) {
return (
<StyledContainer>
<TopBar title={title} icon={icon} />
<TopBar title={title} icon={icon} onAddButtonClick={onAddButtonClick} />
<ContentContainer>
<ContentSubContainer>{children}</ContentSubContainer>
</ContentContainer>

28
front/src/layout/top-bar/TopBar.tsx
View File

@ -1,5 +1,6 @@
import styled from '@emotion/styled';
import { ReactNode } from 'react';
import { TbPlus } from 'react-icons/tb';
const TopBarContainer = styled.div`
display: flex;
@ -17,19 +18,44 @@ const TitleContainer = styled.div`
font-family: 'Inter';
margin-left: 4px;
font-size: 14px;
display: flex;
width: 100%;
`;
const AddButtonContainer = styled.div`
display: flex;
justify-self: flex-end;
border: 1px solid ${(props) => props.theme.primaryBorder};
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
border-radius: 4px;
color: ${(props) => props.theme.text60};
cursor: pointer;
margin-right: ${(props) => props.theme.spacing(1)};
`;
type OwnProps = {
title: string;
icon: ReactNode;
onAddButtonClick?: () => void;
};
function TopBar({ title, icon }: OwnProps) {
function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
return (
<>
<TopBarContainer>
{icon}
<TitleContainer data-testid="top-bar-title">{title}</TitleContainer>
{onAddButtonClick && (
<AddButtonContainer
data-testid="add-button"
onClick={onAddButtonClick}
>
<TbPlus />
</AddButtonContainer>
)}
</TopBarContainer>
</>
);

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

@ -1,16 +1,18 @@
import { FaRegBuilding, FaList } from 'react-icons/fa';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
import styled from '@emotion/styled';
import { useState, useCallback } from 'react';
import { useState, useCallback, useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';
import {
CompaniesSelectedSortType,
defaultOrderBy,
insertCompany,
useCompaniesQuery,
} from '../../services/companies';
import Table from '../../components/table/Table';
import { mapCompany } from '../../interfaces/company.interface';
import { Company, mapCompany } from '../../interfaces/company.interface';
import {
companiesColumns,
useCompaniesColumns,
availableFilters,
availableSorts,
} from './companies-table';
@ -33,6 +35,7 @@ const StyledCompaniesContainer = styled.div`
function Companies() {
const [orderBy, setOrderBy] = useState<Companies_Order_By[]>(defaultOrderBy);
const [where, setWhere] = useState<Companies_Bool_Exp>({});
const [internalData, setInternalData] = useState<Array<Company>>([]);
const [filterSearchResults, setSearhInput, setFilterSearch] = useSearch();
@ -47,13 +50,43 @@ function Companies() {
[],
);
const { data } = useCompaniesQuery(orderBy, where);
const { data, loading, refetch } = useCompaniesQuery(orderBy, where);
useEffect(() => {
if (!loading) {
if (data) {
setInternalData(data.companies.map(mapCompany));
}
}
}, [loading, setInternalData, data]);
const addEmptyRow = useCallback(() => {
const newCompany: Company = {
id: uuidv4(),
name: '',
domain_name: '',
employees: 0,
address: '',
opportunities: [],
creationDate: new Date(),
accountOwner: null,
};
insertCompany(newCompany);
setInternalData([newCompany, ...internalData]);
refetch();
}, [internalData, setInternalData, refetch]);
const companiesColumns = useCompaniesColumns();
return (
<WithTopBarContainer title="Companies" icon={<FaRegBuilding />}>
<WithTopBarContainer
title="Companies"
icon={<FaRegBuilding />}
onAddButtonClick={addEmptyRow}
>
<StyledCompaniesContainer>
<Table
data={data ? data.companies.map(mapCompany) : []}
data={internalData}
columns={companiesColumns}
viewName="All Companies"
viewIcon={<FaList />}

2
front/src/pages/companies/__stories__/Companies.stories.tsx
View File

@ -18,7 +18,7 @@ const mocks = [
request: {
query: GET_COMPANIES,
variables: {
orderBy: [{ name: 'asc' }],
orderBy: [{ created_at: 'desc' }],
where: {},
},
},

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

@ -115,3 +115,24 @@ it('Checks company address edit is updating data', async () => {
expect(getByText('21 rue de clignancourt')).toBeInTheDocument();
});
});
it('Checks insert data is appending a new line', async () => {
const { getByText, getByTestId, container } = render(<CompaniesDefault />);
await waitFor(() => {
expect(getByText('Airbnb')).toBeDefined();
});
const tableRows = container.querySelectorAll<HTMLElement>('table tbody tr');
expect(tableRows.length).toBe(6);
act(() => {
fireEvent.click(getByTestId('add-button'));
});
await waitFor(() => {
const tableRows = container.querySelectorAll<HTMLElement>('table tbody tr');
expect(tableRows.length).toBe(7);
});
});

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

@ -38,6 +38,7 @@ import {
import EditableDate from '../../components/table/editable-cell/EditableDate';
import EditableRelation from '../../components/table/editable-cell/EditableRelation';
import { GraphqlQueryUser, PartialUser } from '../../interfaces/user.interface';
import { useMemo } from 'react';
export const availableSorts = [
{
@ -136,139 +137,150 @@ export const availableFilters = [
] satisfies Array<FilterType<Companies_Bool_Exp>>;
const columnHelper = createColumnHelper<Company>();
export const companiesColumns = [
columnHelper.accessor('id', {
header: () => (
<Checkbox id="company-select-all" name="company-select-all" />
),
cell: (props) => (
<Checkbox
id={`company-selected-${props.row.original.id}`}
name={`company-selected-${props.row.original.id}`}
/>
),
}),
columnHelper.accessor('name', {
header: () => <ColumnHead viewName="Name" viewIcon={<FaRegBuilding />} />,
cell: (props) => (
<EditableChip
value={props.row.original.name}
placeholder="Name"
picture={`https://www.google.com/s2/favicons?domain=${props.row.original.domain_name}&sz=256`}
changeHandler={(value: string) => {
const company = props.row.original;
company.name = value;
updateCompany(company);
}}
ChipComponent={CompanyChip}
/>
),
}),
columnHelper.accessor('employees', {
header: () => <ColumnHead viewName="Employees" viewIcon={<FaUsers />} />,
cell: (props) => (
<EditableText
content={props.row.original.employees.toFixed(0)}
changeHandler={(value) => {
const company = props.row.original;
company.employees = parseInt(value);
updateCompany(company);
}}
/>
),
}),
columnHelper.accessor('domain_name', {
header: () => <ColumnHead viewName="URL" viewIcon={<FaLink />} />,
cell: (props) => (
<EditableText
content={props.row.original.domain_name}
changeHandler={(value) => {
const company = props.row.original;
company.domain_name = value;
updateCompany(company);
}}
/>
),
}),
columnHelper.accessor('address', {
header: () => <ColumnHead viewName="Address" viewIcon={<FaMapPin />} />,
cell: (props) => (
<EditableText
content={props.row.original.address}
changeHandler={(value) => {
const company = props.row.original;
company.address = value;
updateCompany(company);
}}
/>
),
}),
columnHelper.accessor('creationDate', {
header: () => <ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />,
cell: (props) => (
<EditableDate
value={props.row.original.creationDate}
changeHandler={(value: Date) => {
const company = props.row.original;
company.creationDate = value;
updateCompany(company);
}}
/>
),
}),
columnHelper.accessor('accountOwner', {
header: () => (
<ColumnHead viewName="Account Owner" viewIcon={<FaRegUser />} />
),
cell: (props) => (
<EditableRelation<PartialUser, PersonChipPropsType>
relation={props.row.original.accountOwner}
searchPlaceholder="Account Owner"
ChipComponent={PersonChip}
chipComponentPropsMapper={(
accountOwner: PartialUser,
): PersonChipPropsType => {
return {
name: accountOwner.displayName,
};
}}
changeHandler={(relation: PartialUser) => {
const company = props.row.original;
if (company.accountOwner) {
company.accountOwner.id = relation.id;
} else {
company.accountOwner = {
id: relation.id,
email: relation.email,
displayName: relation.displayName,
};
}
updateCompany(company);
}}
searchFilter={
{
key: 'account_owner_name',
label: 'Account Owner',
icon: <FaUser />,
whereTemplate: () => {
return {};
},
searchQuery: SEARCH_USER_QUERY,
searchTemplate: (searchInput: string) => ({
displayName: { _ilike: `%${searchInput}%` },
}),
searchResultMapper: (accountOwner: GraphqlQueryUser) => ({
displayValue: accountOwner.displayName,
value: {
id: accountOwner.id,
email: accountOwner.email,
displayName: accountOwner.displayName,
},
}),
operands: [],
} satisfies FilterType<Users_Bool_Exp>
}
/>
),
}),
];
export const useCompaniesColumns = () => {
return useMemo(() => {
return [
columnHelper.accessor('id', {
header: () => (
<Checkbox id="company-select-all" name="company-select-all" />
),
cell: (props) => (
<Checkbox
id={`company-selected-${props.row.original.id}`}
name={`company-selected-${props.row.original.id}`}
/>
),
}),
columnHelper.accessor('name', {
header: () => (
<ColumnHead viewName="Name" viewIcon={<FaRegBuilding />} />
),
cell: (props) => (
<EditableChip
value={props.row.original.name}
placeholder="Name"
picture={`https://www.google.com/s2/favicons?domain=${props.row.original.domain_name}&sz=256`}
changeHandler={(value: string) => {
const company = props.row.original;
company.name = value;
updateCompany(company);
}}
ChipComponent={CompanyChip}
/>
),
}),
columnHelper.accessor('employees', {
header: () => (
<ColumnHead viewName="Employees" viewIcon={<FaUsers />} />
),
cell: (props) => (
<EditableText
content={props.row.original.employees.toFixed(0)}
changeHandler={(value) => {
const company = props.row.original;
company.employees = parseInt(value);
updateCompany(company);
}}
/>
),
}),
columnHelper.accessor('domain_name', {
header: () => <ColumnHead viewName="URL" viewIcon={<FaLink />} />,
cell: (props) => (
<EditableText
content={props.row.original.domain_name}
changeHandler={(value) => {
const company = props.row.original;
company.domain_name = value;
updateCompany(company);
}}
/>
),
}),
columnHelper.accessor('address', {
header: () => <ColumnHead viewName="Address" viewIcon={<FaMapPin />} />,
cell: (props) => (
<EditableText
content={props.row.original.address}
changeHandler={(value) => {
const company = props.row.original;
company.address = value;
updateCompany(company);
}}
/>
),
}),
columnHelper.accessor('creationDate', {
header: () => (
<ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />
),
cell: (props) => (
<EditableDate
value={props.row.original.creationDate}
changeHandler={(value: Date) => {
const company = props.row.original;
company.creationDate = value;
updateCompany(company);
}}
/>
),
}),
columnHelper.accessor('accountOwner', {
header: () => (
<ColumnHead viewName="Account Owner" viewIcon={<FaRegUser />} />
),
cell: (props) => (
<EditableRelation<PartialUser, PersonChipPropsType>
relation={props.row.original.accountOwner}
searchPlaceholder="Account Owner"
ChipComponent={PersonChip}
chipComponentPropsMapper={(
accountOwner: PartialUser,
): PersonChipPropsType => {
return {
name: accountOwner.displayName,
};
}}
changeHandler={(relation: PartialUser) => {
const company = props.row.original;
if (company.accountOwner) {
company.accountOwner.id = relation.id;
} else {
company.accountOwner = {
id: relation.id,
email: relation.email,
displayName: relation.displayName,
};
}
updateCompany(company);
}}
searchFilter={
{
key: 'account_owner_name',
label: 'Account Owner',
icon: <FaUser />,
whereTemplate: () => {
return {};
},
searchQuery: SEARCH_USER_QUERY,
searchTemplate: (searchInput: string) => ({
displayName: { _ilike: `%${searchInput}%` },
}),
searchResultMapper: (accountOwner: GraphqlQueryUser) => ({
displayValue: accountOwner.displayName,
value: {
id: accountOwner.id,
email: accountOwner.email,
displayName: accountOwner.displayName,
},
}),
operands: [],
} satisfies FilterType<Users_Bool_Exp>
}
/>
),
}),
];
}, []);
};

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

@ -44,10 +44,18 @@ function People() {
[],
);
const addEmptyRow = useCallback(() => {
console.log('add row');
}, []);
const { data } = usePeopleQuery(orderBy, where);
return (
<WithTopBarContainer title="People" icon={<FaRegUser />}>
<WithTopBarContainer
title="People"
icon={<FaRegUser />}
onAddButtonClick={addEmptyRow}
>
<StyledPeopleContainer>
{
<Table

2
front/src/services/companies/select.ts
View File

@ -41,6 +41,6 @@ export function useCompaniesQuery(
export const defaultOrderBy: Companies_Order_By[] = [
{
name: Order_By.Asc,
created_at: Order_By.Desc,
},
];

45
front/src/services/companies/update.ts
View File

@ -41,6 +41,40 @@ export const UPDATE_COMPANY = gql`
}
`;
export const INSERT_COMPANY = gql`
mutation InsertCompany(
$id: uuid
$name: String
$domain_name: String
$account_owner_id: uuid
$created_at: timestamptz
$address: String
$employees: Int
) {
insert_companies(
objects: {
id: $id
name: $name
domain_name: $domain_name
account_owner_id: $account_owner_id
created_at: $created_at
address: $address
employees: $employees
}
) {
affected_rows
returning {
address
created_at
domain_name
employees
id
name
}
}
}
`;
export async function updateCompany(
company: Company,
): Promise<FetchResult<Company>> {
@ -50,3 +84,14 @@ export async function updateCompany(
});
return result;
}
export async function insertCompany(
company: Company,
): Promise<FetchResult<Company>> {
const result = await apiClient.mutate({
mutation: INSERT_COMPANY,
variables: mapGqlCompany(company),
});
return result;
}

2
hasura/metadata/databases/default/tables/public_companies.yaml
View File

@ -20,6 +20,8 @@ insert_permissions:
check:
workspace_id:
_eq: x-hasura-workspace-id
set:
workspace_id: x-hasura-Workspace-Id
columns:
- id
- workspace_id