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

Clean and re-organize post table refactoring (#1000)

Browse Source 
* Clean and re-organize post table refactoring

* Fix tests
This commit is contained in:
Charles Bochet
2023-07-30 18:26:32 -07:00
committed by GitHub
parent 86a2d67efd
commit ade5e52e55
336 changed files with 638 additions and 2757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
front/src/modules/people/table/components/EditablePeopleCityCell.tsx
View File

@ -1,32 +0,0 @@
import { useRecoilValue } from 'recoil';
import { peopleCityFamilyState } from '@/people/states/peopleCityFamilyState';
import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdateOnePersonMutation } from '~/generated/graphql';
export function EditablePeopleCityCell() {
const currentRowEntityId = useCurrentRowEntityId();
const [updatePerson] = useUpdateOnePersonMutation();
const city = useRecoilValue(peopleCityFamilyState(currentRowEntityId ?? ''));
return (
<EditableCellText
value={city ?? ''}
onSubmit={(newText) =>
updatePerson({
variables: {
where: {
id: currentRowEntityId,
},
data: {
city: newText,
},
},
})
}
/>
);
}

26
front/src/modules/people/table/components/EditablePeopleCompanyCell.tsx
View File

@ -1,26 +0,0 @@
import { useRecoilValue } from 'recoil';
import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
import { peopleCompanyFamilyState } from '@/people/states/peopleCompanyFamilyState';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
export function EditablePeopleCompanyCell() {
const currentRowEntityId = useCurrentRowEntityId();
const company = useRecoilValue(
peopleCompanyFamilyState(currentRowEntityId ?? ''),
);
return (
<PeopleCompanyCell
people={{
id: currentRowEntityId ?? '',
company: {
domainName: company?.domainName ?? '',
name: company?.name ?? '',
id: company?.id ?? '',
},
}}
/>
);
}

37
front/src/modules/people/table/components/EditablePeopleCreatedAtCell.tsx
View File

@ -1,37 +0,0 @@
import { DateTime } from 'luxon';
import { useRecoilValue } from 'recoil';
import { peopleCreatedAtFamilyState } from '@/people/states/peopleCreatedAtFamilyState';
import { EditableCellDate } from '@/ui/table/editable-cell/types/EditableCellDate';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdateOnePersonMutation } from '~/generated/graphql';
export function EditablePeopleCreatedAtCell() {
const currentRowEntityId = useCurrentRowEntityId();
const createdAt = useRecoilValue(
peopleCreatedAtFamilyState(currentRowEntityId ?? ''),
);
const [updatePerson] = useUpdateOnePersonMutation();
return (
<EditableCellDate
onChange={async (newDate: Date) => {
if (!currentRowEntityId) return;
await updatePerson({
variables: {
where: {
id: currentRowEntityId,
},
data: {
createdAt: newDate.toISOString(),
},
},
});
}}
value={createdAt ? DateTime.fromISO(createdAt).toJSDate() : new Date()}
/>
);
}

34
front/src/modules/people/table/components/EditablePeopleEmailCell.tsx
View File

@ -1,34 +0,0 @@
import { useRecoilValue } from 'recoil';
import { peopleEmailFamilyState } from '@/people/states/peopleEmailFamilyState';
import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdateOnePersonMutation } from '~/generated/graphql';
export function EditablePeopleEmailCell() {
const currentRowEntityId = useCurrentRowEntityId();
const [updatePerson] = useUpdateOnePersonMutation();
const email = useRecoilValue(
peopleEmailFamilyState(currentRowEntityId ?? ''),
);
return (
<EditableCellText
value={email || ''}
onSubmit={(newEmail: string) =>
updatePerson({
variables: {
where: {
id: currentRowEntityId,
},
data: {
email: newEmail,
},
},
})
}
/>
);
}

45
front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx
View File

@ -1,45 +0,0 @@
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilValue } from 'recoil';
import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
import { peopleNameCellFamilyState } from '@/people/states/peopleNamesFamilyState';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdateOnePersonMutation } from '~/generated/graphql';
import { GET_PERSON } from '../../queries';
export function EditablePeopleFullNameCell() {
const currentRowEntityId = useCurrentRowEntityId();
const [updatePerson] = useUpdateOnePersonMutation();
const { commentCount, firstName, lastName, displayName, avatarUrl } =
useRecoilValue(peopleNameCellFamilyState(currentRowEntityId ?? ''));
return (
<EditablePeopleFullName
person={{
id: currentRowEntityId ?? undefined,
_activityCount: commentCount ?? undefined,
firstName,
lastName,
displayName: displayName ?? undefined,
avatarUrl: avatarUrl,
}}
onSubmit={(newFirstValue, newSecondValue) =>
updatePerson({
variables: {
where: {
id: currentRowEntityId,
},
data: {
firstName: newFirstValue,
lastName: newSecondValue,
},
},
refetchQueries: [getOperationName(GET_PERSON) ?? ''],
})
}
/>
);
}

34
front/src/modules/people/table/components/EditablePeopleJobTitleCell.tsx
View File

@ -1,34 +0,0 @@
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 ?? ''),
);
return (
<EditableCellText
value={jobTitle ?? ''}
onSubmit={(newText) =>
updatePerson({
variables: {
where: {
id: currentRowEntityId,
},
data: {
jobTitle: newText,
},
},
})
}
/>
);
}

35
front/src/modules/people/table/components/EditablePeopleLinkedinUrlCell.tsx
View File

@ -1,35 +0,0 @@
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 ?? ''),
);
return (
<EditableCellURL
url={linkedinUrl ?? ''}
onSubmit={(newURL) =>
updatePerson({
variables: {
where: {
id: currentRowEntityId,
},
data: {
linkedinUrl: newURL,
},
},
})
}
/>
);
}

34
front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx
View File

@ -1,34 +0,0 @@
import { useRecoilValue } from 'recoil';
import { peoplePhoneFamilyState } from '@/people/states/peoplePhoneFamilyState';
import { EditableCellPhone } from '@/ui/table/editable-cell/types/EditableCellPhone';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdateOnePersonMutation } from '~/generated/graphql';
export function EditablePeoplePhoneCell() {
const currentRowEntityId = useCurrentRowEntityId();
const [updatePerson] = useUpdateOnePersonMutation();
const phone = useRecoilValue(
peoplePhoneFamilyState(currentRowEntityId ?? ''),
);
return (
<EditableCellPhone
value={phone?.toString() ?? ''}
onSubmit={(newPhone) =>
updatePerson({
variables: {
where: {
id: currentRowEntityId,
},
data: {
phone: newPhone,
},
},
})
}
/>
);
}

24
front/src/modules/people/table/components/PeopleTable.tsx
View File

@ -1,17 +1,22 @@
import { useCallback, useMemo, useState } from 'react';
import { defaultOrderBy } from '@/companies/queries';
import { PeopleEntityTableData } from '@/people/components/PeopleEntityTableData';
import { peopleViewFields } from '@/people/constants/peopleViewFields';
import { PeopleSelectedSortType } from '@/people/queries';
import { peopleColumns } from '@/people/table/components/peopleColumns';
import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
import { IconList } from '@/ui/icon';
import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
import { EntityTable } from '@/ui/table/components/EntityTable';
import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
import { TableContext } from '@/ui/table/states/TableContext';
import { PersonOrderByWithRelationInput } from '~/generated/graphql';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import {
PersonOrderByWithRelationInput,
useGetPeopleQuery,
useUpdateOnePersonMutation,
} from '~/generated/graphql';
import { peopleFilters } from '~/pages/people/people-filters';
import { availableSorts } from '~/pages/people/people-sorts';
export function PeopleTable() {
@ -30,13 +35,20 @@ export function PeopleTable() {
return (
<>
<PeopleEntityTableData orderBy={orderBy} whereFilters={whereFilters} />
<GenericEntityTableData
getRequestResultKey="people"
useGetRequest={useGetPeopleQuery}
orderBy={orderBy}
whereFilters={whereFilters}
viewFields={peopleViewFields}
filterDefinitionArray={peopleFilters}
/>
<EntityTable
columns={peopleColumns}
viewName="All People"
viewIcon={<IconList size={16} />}
availableSorts={availableSorts}
onSortsUpdate={updateSorts}
useUpdateEntityMutation={useUpdateOnePersonMutation}
/>
</>
);

55
front/src/modules/people/table/components/PeopleTableV2.tsx
View File

@ -1,55 +0,0 @@
import { useCallback, useMemo, useState } from 'react';
import { defaultOrderBy } from '@/companies/queries';
import { peopleViewFields } from '@/people/constants/peopleViewFields';
import { PeopleSelectedSortType } from '@/people/queries';
import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
import { IconList } from '@/ui/icon';
import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
import { EntityTable } from '@/ui/table/components/EntityTableV2';
import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
import { TableContext } from '@/ui/table/states/TableContext';
import {
PersonOrderByWithRelationInput,
useGetPeopleQuery,
useUpdateOnePersonMutation,
} from '~/generated/graphql';
import { peopleFilters } from '~/pages/people/people-filters';
import { availableSorts } from '~/pages/people/people-sorts';
export function PeopleTable() {
const [orderBy, setOrderBy] =
useState<PersonOrderByWithRelationInput[]>(defaultOrderBy);
const updateSorts = useCallback((sorts: Array<PeopleSelectedSortType>) => {
setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
}, []);
const filters = useRecoilScopedValue(filtersScopedState, TableContext);
const whereFilters = useMemo(() => {
return { AND: filters.map(turnFilterIntoWhereClause) };
}, [filters]) as any;
return (
<>
<GenericEntityTableData
getRequestResultKey="people"
useGetRequest={useGetPeopleQuery}
orderBy={orderBy}
whereFilters={whereFilters}
viewFields={peopleViewFields}
filterDefinitionArray={peopleFilters}
/>
<EntityTable
viewName="All People"
viewIcon={<IconList size={16} />}
availableSorts={availableSorts}
onSortsUpdate={updateSorts}
useUpdateEntityMutation={useUpdateOnePersonMutation}
/>
</>
);
}

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

@ -1,86 +0,0 @@
import {
IconBrandLinkedin,
IconBriefcase,
IconBuildingSkyscraper,
IconCalendarEvent,
IconMail,
IconMap,
IconPhone,
IconUser,
} from '@/ui/icon/index';
import { EditablePeopleCityCell } from './EditablePeopleCityCell';
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 = {
id: string;
title: string;
icon: JSX.Element;
size: number;
cellComponent: JSX.Element;
};
export const peopleColumns: TableColumn[] = [
{
id: 'fullName',
title: 'People',
icon: <IconUser size={16} />,
size: 210,
cellComponent: <EditablePeopleFullNameCell />,
},
{
id: 'email',
title: 'Email',
icon: <IconMail size={16} />,
size: 150,
cellComponent: <EditablePeopleEmailCell />,
},
{
id: 'company',
title: 'Company',
icon: <IconBuildingSkyscraper size={16} />,
size: 150,
cellComponent: <EditablePeopleCompanyCell />,
},
{
id: 'phone',
title: 'Phone',
icon: <IconPhone size={16} />,
size: 150,
cellComponent: <EditablePeoplePhoneCell />,
},
{
id: 'createdAt',
title: 'Creation',
icon: <IconCalendarEvent size={16} />,
size: 150,
cellComponent: <EditablePeopleCreatedAtCell />,
},
{
id: 'city',
title: 'City',
icon: <IconMap size={16} />,
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 />,
},
];