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

58
front/src/modules/people/components/EditablePeopleFullName.tsx
View File

@ -1,58 +0,0 @@
import styled from '@emotion/styled';
import { EditableCellDoubleText } from '@/ui/table/editable-cell/types/EditableCellDoubleText';
import { Person } from '~/generated/graphql';
import { PersonChip } from './PersonChip';
type OwnProps = {
person:
| Partial<
Pick<
Person,
| 'id'
| 'firstName'
| 'lastName'
| 'displayName'
| 'avatarUrl'
| '_activityCount'
>
>
| null
| undefined;
onSubmit?: (firstName: string, lastName: string) => void;
onCancel?: () => void;
};
const NoEditModeContainer = styled.div`
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
`;
export function EditablePeopleFullName({
person,
onSubmit,
onCancel,
}: OwnProps) {
return (
<EditableCellDoubleText
firstValue={person?.firstName ?? ''}
secondValue={person?.lastName ?? ''}
firstValuePlaceholder="First name"
secondValuePlaceholder="Last name"
onSubmit={onSubmit}
onCancel={onCancel}
nonEditModeContent={
<NoEditModeContainer>
<PersonChip
name={`${person?.firstName ?? ''} ${person?.lastName ?? ''}`}
id={person?.id ?? ''}
pictureUrl={person?.avatarUrl ?? ''}
/>
</NoEditModeContainer>
}
/>
);
}

4
front/src/modules/people/components/FilterDropdownPeopleSearchSelect.tsx
View File

@ -4,8 +4,8 @@ import { useFilteredSearchPeopleQuery } from '@/people/queries';
import { FilterDropdownEntitySearchSelect } from '@/ui/filter-n-sort/components/FilterDropdownEntitySearchSelect';
import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
export function FilterDropdownPeopleSearchSelect({
context,

46
front/src/modules/people/components/PeopleCompanyCell.tsx
View File

@ -1,46 +0,0 @@
import { CompanyChip } from '@/companies/components/CompanyChip';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
import { Company, Person } from '~/generated/graphql';
import { getLogoUrlFromDomainName } from '~/utils';
import { PeopleCompanyCreateCell } from './PeopleCompanyCreateCell';
import { PeopleCompanyPicker } from './PeopleCompanyPicker';
export type PeopleWithCompany = Pick<Person, 'id'> & {
company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;
};
export type OwnProps = {
people: Pick<Person, 'id'> & {
company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;
};
};
export function PeopleCompanyCell({ people }: OwnProps) {
const [isCreating] = useRecoilScopedState(isCreateModeScopedState);
return (
<EditableCell
transparent
maxContentWidth={160}
editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
editModeContent={
isCreating ? (
<PeopleCompanyCreateCell people={people} />
) : (
<PeopleCompanyPicker people={people} />
)
}
nonEditModeContent={
<CompanyChip
id={people.company?.id ?? ''}
name={people.company?.name ?? ''}
pictureUrl={getLogoUrlFromDomainName(people.company?.domainName)}
/>
}
/>
);
}

91
front/src/modules/people/components/PeopleCompanyCreateCell.tsx
View File

@ -1,91 +0,0 @@
import { useState } from 'react';
import { getOperationName } from '@apollo/client/utilities';
import { v4 } from 'uuid';
import { GET_COMPANIES } from '@/companies/queries';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
import { EditableCellDoubleTextEditMode } from '@/ui/table/editable-cell/types/EditableCellDoubleTextEditMode';
import {
Person,
useInsertOneCompanyMutation,
useUpdateOnePersonMutation,
} from '~/generated/graphql';
import { logError } from '~/utils/logError';
import { SEARCH_COMPANY_QUERY } from '../../search/queries/search';
type OwnProps = {
people: Pick<Person, 'id'>;
};
export function PeopleCompanyCreateCell({ people }: OwnProps) {
const [, setIsCreating] = useRecoilScopedState(isCreateModeScopedState);
const [currentSearchFilter] = useRecoilScopedState(
relationPickerSearchFilterScopedState,
);
const [companyName, setCompanyName] = useState(currentSearchFilter);
const [companyDomainName, setCompanyDomainName] = useState('');
const [insertCompany] = useInsertOneCompanyMutation();
const [updatePerson] = useUpdateOnePersonMutation();
function handleDoubleTextChange(leftValue: string, rightValue: string): void {
setCompanyDomainName(leftValue);
setCompanyName(rightValue);
}
async function handleCompanyCreate(
companyName: string,
companyDomainName: string,
) {
const newCompanyId = v4();
try {
await insertCompany({
variables: {
data: {
id: newCompanyId,
name: companyName,
domainName: companyDomainName,
address: '',
},
},
refetchQueries: [
getOperationName(GET_COMPANIES) ?? '',
getOperationName(SEARCH_COMPANY_QUERY) ?? '',
],
});
await updatePerson({
variables: {
where: {
id: people.id,
},
data: {
company: { connect: { id: newCompanyId } },
},
},
});
} catch (error) {
// TODO: handle error better
logError(error);
}
setIsCreating(false);
}
return (
<EditableCellDoubleTextEditMode
firstValue={companyDomainName}
secondValue={companyName}
firstValuePlaceholder="URL"
secondValuePlaceholder="Name"
onChange={handleDoubleTextChange}
onSubmit={() => handleCompanyCreate(companyName, companyDomainName)}
onCancel={() => setIsCreating(false)}
/>
);
}

11
front/src/modules/people/components/PeopleCompanyPicker.tsx
View File

@ -1,19 +1,18 @@
import { useFilteredSearchCompanyQuery } from '@/companies/queries';
import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell';
import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import {
Company,
Person,
useUpdateOnePersonMutation,
} from '~/generated/graphql';
import { EntityForSelect } from '../../ui/relation-picker/types/EntityForSelect';
export type OwnProps = {
people: Pick<Person, 'id'> & { company?: Pick<Company, 'id'> | null };
};

10
front/src/modules/people/components/PeoplePicker.tsx
View File

@ -1,9 +1,9 @@
import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useSearchPeopleQuery } from '~/generated/graphql';
export type OwnProps = {

2
front/src/modules/people/constants/peopleViewFields.tsx
View File

@ -8,7 +8,7 @@ import {
IconPhone,
IconUser,
} from '@/ui/icon/index';
import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
import {
ViewFieldDateMetadata,
ViewFieldDefinition,

4
front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx
View File

@ -3,8 +3,8 @@ import { IconBuildingSkyscraper } from '@tabler/icons-react';
import { CompanyChip } from '@/companies/components/CompanyChip';
import { EditableField } from '@/ui/editable-field/components/EditableField';
import { FieldContext } from '@/ui/editable-field/states/FieldContext';
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { Company, Person } from '~/generated/graphql';
import { getLogoUrlFromDomainName } from '~/utils';

8
front/src/modules/people/editable-field/components/PeopleCompanyEditableFieldEditMode.tsx
View File

@ -2,10 +2,10 @@ import styled from '@emotion/styled';
import { useFilteredSearchCompanyQuery } from '@/companies/queries';
import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import {
Company,
Person,

7
front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx
View File

@ -1,11 +1,10 @@
import { useState } from 'react';
import { FieldContext } from '@/ui/editable-field/states/FieldContext';
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
import { DoubleTextInputEdit } from '@/ui/input/double-text/components/DoubleTextInputEdit';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { Person, useUpdateOnePersonMutation } from '~/generated/graphql';
import { InplaceInputDoubleText } from '../../../ui/inplace-input/components/InplaceInputDoubleText';
type OwnProps = {
people: Pick<Person, 'id' | 'firstName' | 'lastName'>;
};
@ -48,7 +47,7 @@ export function PeopleFullNameEditableField({ people }: OwnProps) {
return (
<RecoilScope SpecificContext={FieldContext}>
<InplaceInputDoubleText
<DoubleTextInputEdit
firstValuePlaceholder={'First name'}
secondValuePlaceholder={'Last name'}
firstValue={internalValueFirstName ?? ''}

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

@ -1,12 +1,12 @@
import { useLocation } from 'react-router-dom';
import { useRecoilCallback } from 'recoil';
import { currentPageLocationState } from '@/ui/utilities/loading-state/states/currentPageLocationState';
import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
import { GetPeopleQuery } from '~/generated/graphql';
import { peopleFilters } from '../../../pages/people/people-filters';
import { availableFiltersScopedState } from '../../ui/filter-n-sort/states/availableFiltersScopedState';
import { useContextScopeId } from '../../ui/recoil-scope/hooks/useContextScopeId';
import { currentPageLocationState } from '../../ui/states/currentPageLocationState';
import { useResetTableRowSelection } from '../../ui/table/hooks/useResetTableRowSelection';
import { entityTableDimensionsState } from '../../ui/table/states/entityTableDimensionsState';
import { isFetchingEntityTableDataState } from '../../ui/table/states/isFetchingEntityTableDataState';
@ -20,7 +20,6 @@ import { peopleJobTitleFamilyState } from '../states/peopleJobTitleFamilyState';
import { peopleLinkedinUrlFamilyState } from '../states/peopleLinkedinUrlFamilyState';
import { peopleNameCellFamilyState } from '../states/peopleNamesFamilyState';
import { peoplePhoneFamilyState } from '../states/peoplePhoneFamilyState';
import { peopleColumns } from '../table/components/peopleColumns';
export function useSetPeopleEntityTable() {
const resetTableRowSelection = useResetTableRowSelection();
@ -126,7 +125,7 @@ export function useSetPeopleEntityTable() {
resetTableRowSelection();
set(entityTableDimensionsState, {
numberOfColumns: peopleColumns.length,
numberOfColumns: 10,
numberOfRows: peopleIds.length,
});

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 />,
},
];