From b9ef06945ad747fcf95880615e24200651d8af85 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Wed, 26 Jul 2023 12:01:33 -0700 Subject: [PATCH 1/7] Removed isSomeInputInEditMode --- .../people/table/components/PeopleTable.tsx | 1 + .../editable-cell/hooks/useEditableCell.ts | 41 ++++++------------- .../ui/table/hooks/useClearCellInEditMode.ts | 6 --- .../ui/table/hooks/useLeaveTableFocus.ts | 11 +---- .../table/hooks/useMapKeyboardToSoftFocus.ts | 28 ++++--------- .../states/isSomeInputInEditModeState.ts | 6 --- 6 files changed, 22 insertions(+), 71 deletions(-) delete mode 100644 front/src/modules/ui/table/states/isSomeInputInEditModeState.ts diff --git a/front/src/modules/people/table/components/PeopleTable.tsx b/front/src/modules/people/table/components/PeopleTable.tsx index da072cf858d9..4e5621b3220a 100644 --- a/front/src/modules/people/table/components/PeopleTable.tsx +++ b/front/src/modules/people/table/components/PeopleTable.tsx @@ -15,6 +15,7 @@ import { PersonOrderByWithRelationInput } from '~/generated/graphql'; import { availableSorts } from '~/pages/people/people-sorts'; export function PeopleTable() { + console.log('PeopleTable'); const [orderBy, setOrderBy] = useState(defaultOrderBy); diff --git a/front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts b/front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts index 5a2347ddb77d..165a0c156c70 100644 --- a/front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts +++ b/front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts @@ -1,12 +1,10 @@ import { useContext } from 'react'; -import { useRecoilCallback } from 'recoil'; import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope'; import { useCloseCurrentCellInEditMode } from '../../hooks/useClearCellInEditMode'; import { CellHotkeyScopeContext } from '../../states/CellHotkeyScopeContext'; -import { isSomeInputInEditModeState } from '../../states/isSomeInputInEditModeState'; import { TableHotkeyScope } from '../../types/TableHotkeyScope'; import { useCurrentCellEditMode } from './useCurrentCellEditMode'; @@ -29,33 +27,18 @@ export function useEditableCell() { setHotkeyScope(TableHotkeyScope.TableSoftFocus); } - const openEditableCell = useRecoilCallback( - ({ snapshot, set }) => - () => { - const isSomeInputInEditMode = snapshot - .getLoadable(isSomeInputInEditModeState) - .valueOrThrow(); - - if (!isSomeInputInEditMode) { - set(isSomeInputInEditModeState, true); - - setCurrentCellInEditMode(); - - if (customCellHotkeyScope) { - setHotkeyScope( - customCellHotkeyScope.scope, - customCellHotkeyScope.customScopes, - ); - } else { - setHotkeyScope( - DEFAULT_CELL_SCOPE.scope, - DEFAULT_CELL_SCOPE.customScopes, - ); - } - } - }, - [setCurrentCellInEditMode, setHotkeyScope, customCellHotkeyScope], - ); + function openEditableCell() { + setCurrentCellInEditMode(); + + if (customCellHotkeyScope) { + setHotkeyScope( + customCellHotkeyScope.scope, + customCellHotkeyScope.customScopes, + ); + } else { + setHotkeyScope(DEFAULT_CELL_SCOPE.scope, DEFAULT_CELL_SCOPE.customScopes); + } + } return { closeEditableCell, diff --git a/front/src/modules/ui/table/hooks/useClearCellInEditMode.ts b/front/src/modules/ui/table/hooks/useClearCellInEditMode.ts index 129b885d8bff..d55f3098dc50 100644 --- a/front/src/modules/ui/table/hooks/useClearCellInEditMode.ts +++ b/front/src/modules/ui/table/hooks/useClearCellInEditMode.ts @@ -2,7 +2,6 @@ import { useRecoilCallback } from 'recoil'; import { currentCellInEditModePositionState } from '../states/currentCellInEditModePositionState'; import { isCellInEditModeFamilyState } from '../states/isCellInEditModeFamilyState'; -import { isSomeInputInEditModeState } from '../states/isSomeInputInEditModeState'; export function useCloseCurrentCellInEditMode() { return useRecoilCallback(({ set, snapshot }) => { @@ -12,11 +11,6 @@ export function useCloseCurrentCellInEditMode() { ); set(isCellInEditModeFamilyState(currentCellInEditModePosition), false); - - // TODO: find a way to remove this - await new Promise((resolve) => setTimeout(resolve, 20)); - - set(isSomeInputInEditModeState, false); }; }, []); } diff --git a/front/src/modules/ui/table/hooks/useLeaveTableFocus.ts b/front/src/modules/ui/table/hooks/useLeaveTableFocus.ts index e858f2c1f260..defb46cdd577 100644 --- a/front/src/modules/ui/table/hooks/useLeaveTableFocus.ts +++ b/front/src/modules/ui/table/hooks/useLeaveTableFocus.ts @@ -4,7 +4,6 @@ import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; import { currentHotkeyScopeState } from '@/ui/hotkey/states/internal/currentHotkeyScopeState'; import { isSoftFocusActiveState } from '../states/isSoftFocusActiveState'; -import { isSomeInputInEditModeState } from '../states/isSomeInputInEditModeState'; import { TableHotkeyScope } from '../types/TableHotkeyScope'; import { useCloseCurrentCellInEditMode } from './useClearCellInEditMode'; @@ -23,19 +22,11 @@ export function useLeaveTableFocus() { .getLoadable(isSoftFocusActiveState) .valueOrThrow(); - const isSomeInputInEditMode = snapshot - .getLoadable(isSomeInputInEditModeState) - .valueOrThrow(); - const currentHotkeyScope = snapshot .getLoadable(currentHotkeyScopeState) .valueOrThrow(); - if (isSomeInputInEditMode) { - return; - } - - if (!isSoftFocusActive && !isSomeInputInEditMode) { + if (!isSoftFocusActive) { return; } diff --git a/front/src/modules/ui/table/hooks/useMapKeyboardToSoftFocus.ts b/front/src/modules/ui/table/hooks/useMapKeyboardToSoftFocus.ts index 840313eac54d..ddc330cb3d9b 100644 --- a/front/src/modules/ui/table/hooks/useMapKeyboardToSoftFocus.ts +++ b/front/src/modules/ui/table/hooks/useMapKeyboardToSoftFocus.ts @@ -1,10 +1,8 @@ -import { useRecoilState } from 'recoil'; import { Key } from 'ts-key-enum'; import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; -import { isSomeInputInEditModeState } from '../states/isSomeInputInEditModeState'; import { TableHotkeyScope } from '../types/TableHotkeyScope'; import { useDisableSoftFocus } from './useDisableSoftFocus'; @@ -16,50 +14,40 @@ export function useMapKeyboardToSoftFocus() { const disableSoftFocus = useDisableSoftFocus(); const setHotkeyScope = useSetHotkeyScope(); - const [isSomeInputInEditMode] = useRecoilState(isSomeInputInEditModeState); - useScopedHotkeys( [Key.ArrowUp, `${Key.Shift}+${Key.Enter}`], () => { - if (!isSomeInputInEditMode) { - moveUp(); - } + moveUp(); }, TableHotkeyScope.TableSoftFocus, - [moveUp, isSomeInputInEditMode], + [moveUp], ); useScopedHotkeys( Key.ArrowDown, () => { - if (!isSomeInputInEditMode) { - moveDown(); - } + moveDown(); }, TableHotkeyScope.TableSoftFocus, - [moveDown, isSomeInputInEditMode], + [moveDown], ); useScopedHotkeys( [Key.ArrowLeft, `${Key.Shift}+${Key.Tab}`], () => { - if (!isSomeInputInEditMode) { - moveLeft(); - } + moveLeft(); }, TableHotkeyScope.TableSoftFocus, - [moveLeft, isSomeInputInEditMode], + [moveLeft], ); useScopedHotkeys( [Key.ArrowRight, Key.Tab], () => { - if (!isSomeInputInEditMode) { - moveRight(); - } + moveRight(); }, TableHotkeyScope.TableSoftFocus, - [moveRight, isSomeInputInEditMode], + [moveRight], ); useScopedHotkeys( diff --git a/front/src/modules/ui/table/states/isSomeInputInEditModeState.ts b/front/src/modules/ui/table/states/isSomeInputInEditModeState.ts deleted file mode 100644 index 71fdb01723d8..000000000000 --- a/front/src/modules/ui/table/states/isSomeInputInEditModeState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const isSomeInputInEditModeState = atom({ - key: 'isSomeInputInEditModeState', - default: false, -}); From 77b4ff401421500b40331b599cef026b6e05ceee Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Wed, 26 Jul 2023 12:03:44 -0700 Subject: [PATCH 2/7] Removed console.log --- front/src/modules/people/table/components/PeopleTable.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/front/src/modules/people/table/components/PeopleTable.tsx b/front/src/modules/people/table/components/PeopleTable.tsx index 4e5621b3220a..da072cf858d9 100644 --- a/front/src/modules/people/table/components/PeopleTable.tsx +++ b/front/src/modules/people/table/components/PeopleTable.tsx @@ -15,7 +15,6 @@ import { PersonOrderByWithRelationInput } from '~/generated/graphql'; import { availableSorts } from '~/pages/people/people-sorts'; export function PeopleTable() { - console.log('PeopleTable'); const [orderBy, setOrderBy] = useState(defaultOrderBy); From f31e2aef875cfeb7ff4db546cf54720cd0f8aad6 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Wed, 26 Jul 2023 19:48:50 -0700 Subject: [PATCH 3/7] Added a first version of generic cell text --- .../table/components/CompanyTable.tsx | 3 + .../table/components/CompanyTableMockMode.tsx | 3 + .../components/GenericEntityTableData.tsx | 31 ++++ .../components/PeopleEntityTableData.tsx | 22 --- .../constants/peopleFieldMetadataArray.tsx | 20 +++ .../people/hooks/useSetEntityTableData.ts | 72 ++++++++++ .../people/hooks/useSetPeopleEntityTable.ts | 9 ++ .../people/hooks/useUpdatePeopleField.ts | 18 +++ .../components/EditablePeopleCityCell.tsx | 9 +- .../table/components/GenericEditableCell.tsx | 23 +++ .../components/GenericEditableTextCell.tsx | 44 ++++++ .../GenericEditableTextCellEditMode.tsx | 47 ++++++ .../people/table/components/PeopleTable.tsx | 2 + .../people/table/components/PeopleTableV2.tsx | 53 +++++++ .../people/table/components/peopleColumns.tsx | 11 +- .../ui/table/components/EntityTable.tsx | 38 ++--- .../ui/table/components/EntityTableBodyV2.tsx | 36 +++++ .../ui/table/components/EntityTableCellV2.tsx | 50 +++++++ .../table/components/EntityTableHeaderV2.tsx | 42 ++++++ .../ui/table/components/EntityTableRowV2.tsx | 38 +++++ .../ui/table/components/EntityTableV2.tsx | 136 ++++++++++++++++++ .../ui/table/hooks/useCellUpdateFieldHook.ts | 7 + .../states/EntityFieldMetadataContext.ts | 6 + .../states/EntityUpdateFieldHookContext.ts | 6 + .../states/entityFieldMetadataArrayState.ts | 8 ++ .../table/states/tableEntitiesFamilyState.ts | 9 ++ .../states/tableEntityFieldFamilySelector.ts | 18 +++ .../ui/table/types/CellUpdateFieldHook.ts | 5 + .../ui/table/types/EntityFieldMetadata.ts | 16 +++ 29 files changed, 738 insertions(+), 44 deletions(-) create mode 100644 front/src/modules/people/components/GenericEntityTableData.tsx create mode 100644 front/src/modules/people/constants/peopleFieldMetadataArray.tsx create mode 100644 front/src/modules/people/hooks/useSetEntityTableData.ts create mode 100644 front/src/modules/people/hooks/useUpdatePeopleField.ts create mode 100644 front/src/modules/people/table/components/GenericEditableCell.tsx create mode 100644 front/src/modules/people/table/components/GenericEditableTextCell.tsx create mode 100644 front/src/modules/people/table/components/GenericEditableTextCellEditMode.tsx create mode 100644 front/src/modules/people/table/components/PeopleTableV2.tsx create mode 100644 front/src/modules/ui/table/components/EntityTableBodyV2.tsx create mode 100644 front/src/modules/ui/table/components/EntityTableCellV2.tsx create mode 100644 front/src/modules/ui/table/components/EntityTableHeaderV2.tsx create mode 100644 front/src/modules/ui/table/components/EntityTableRowV2.tsx create mode 100644 front/src/modules/ui/table/components/EntityTableV2.tsx create mode 100644 front/src/modules/ui/table/hooks/useCellUpdateFieldHook.ts create mode 100644 front/src/modules/ui/table/states/EntityFieldMetadataContext.ts create mode 100644 front/src/modules/ui/table/states/EntityUpdateFieldHookContext.ts create mode 100644 front/src/modules/ui/table/states/entityFieldMetadataArrayState.ts create mode 100644 front/src/modules/ui/table/states/tableEntitiesFamilyState.ts create mode 100644 front/src/modules/ui/table/states/tableEntityFieldFamilySelector.ts create mode 100644 front/src/modules/ui/table/types/CellUpdateFieldHook.ts create mode 100644 front/src/modules/ui/table/types/EntityFieldMetadata.ts diff --git a/front/src/modules/companies/table/components/CompanyTable.tsx b/front/src/modules/companies/table/components/CompanyTable.tsx index 89aa55772c44..9a085eb1cff1 100644 --- a/front/src/modules/companies/table/components/CompanyTable.tsx +++ b/front/src/modules/companies/table/components/CompanyTable.tsx @@ -36,6 +36,9 @@ export function CompanyTable() { viewIcon={} availableSorts={availableSorts} onSortsUpdate={updateSorts} + useUpdateField={() => () => { + // + }} /> ); diff --git a/front/src/modules/companies/table/components/CompanyTableMockMode.tsx b/front/src/modules/companies/table/components/CompanyTableMockMode.tsx index 6339b09f8d3d..25d708d968e4 100644 --- a/front/src/modules/companies/table/components/CompanyTableMockMode.tsx +++ b/front/src/modules/companies/table/components/CompanyTableMockMode.tsx @@ -13,6 +13,9 @@ export function CompanyTableMockMode() { viewName="All Companies" viewIcon={} availableSorts={availableSorts} + useUpdateField={() => () => { + // + }} /> ); diff --git a/front/src/modules/people/components/GenericEntityTableData.tsx b/front/src/modules/people/components/GenericEntityTableData.tsx new file mode 100644 index 000000000000..b8689989864e --- /dev/null +++ b/front/src/modules/people/components/GenericEntityTableData.tsx @@ -0,0 +1,31 @@ +import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata'; + +import { useSetEntityTableData } from '../hooks/useSetEntityTableData'; +import { defaultOrderBy } from '../queries'; + +export function GenericEntityTableData({ + useGetRequest, + getRequestResultKey, + orderBy = defaultOrderBy, + whereFilters, + fieldMetadataArray, +}: { + useGetRequest: any; + getRequestResultKey: string; + orderBy?: any; + whereFilters?: any; + fieldMetadataArray: EntityFieldMetadata[]; +}) { + const setEntityTableData = useSetEntityTableData(); + + useGetRequest({ + variables: { orderBy, where: whereFilters }, + onCompleted: (data: any) => { + const entities = data[getRequestResultKey] ?? []; + + setEntityTableData(entities, fieldMetadataArray); + }, + }); + + return <>; +} diff --git a/front/src/modules/people/components/PeopleEntityTableData.tsx b/front/src/modules/people/components/PeopleEntityTableData.tsx index a2b31b0d18a0..29542c906c32 100644 --- a/front/src/modules/people/components/PeopleEntityTableData.tsx +++ b/front/src/modules/people/components/PeopleEntityTableData.tsx @@ -1,7 +1,3 @@ -import { useRecoilState } from 'recoil'; - -import { isFetchingEntityTableDataState } from '@/ui/table/states/isFetchingEntityTableDataState'; -import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; import { PersonOrderByWithRelationInput, useGetPeopleQuery, @@ -17,12 +13,6 @@ export function PeopleEntityTableData({ orderBy?: PersonOrderByWithRelationInput[]; whereFilters?: any; }) { - const [, setTableRowIds] = useRecoilState(tableRowIdsState); - - const [, setIsFetchingEntityTableData] = useRecoilState( - isFetchingEntityTableDataState, - ); - const setPeopleEntityTable = useSetPeopleEntityTable(); useGetPeopleQuery({ @@ -30,19 +20,7 @@ export function PeopleEntityTableData({ onCompleted: (data) => { const people = data.people ?? []; - const peopleIds = people.map((person) => person.id); - - setTableRowIds((currentRowIds) => { - if (JSON.stringify(currentRowIds) !== JSON.stringify(peopleIds)) { - return peopleIds; - } - - return currentRowIds; - }); - setPeopleEntityTable(people); - - setIsFetchingEntityTableData(false); }, }); diff --git a/front/src/modules/people/constants/peopleFieldMetadataArray.tsx b/front/src/modules/people/constants/peopleFieldMetadataArray.tsx new file mode 100644 index 000000000000..9549a6f9ab02 --- /dev/null +++ b/front/src/modules/people/constants/peopleFieldMetadataArray.tsx @@ -0,0 +1,20 @@ +import { IconBriefcase, IconMap } from '@tabler/icons-react'; + +import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata'; + +export const peopleFieldMetadataArray: EntityFieldMetadata[] = [ + { + fieldName: 'city', + label: 'City', + icon: , + columnSize: 150, + type: 'text', + }, + { + fieldName: 'jobTitle', + label: 'Job title', + icon: , + columnSize: 150, + type: 'text', + }, +]; diff --git a/front/src/modules/people/hooks/useSetEntityTableData.ts b/front/src/modules/people/hooks/useSetEntityTableData.ts new file mode 100644 index 000000000000..217b7efbae77 --- /dev/null +++ b/front/src/modules/people/hooks/useSetEntityTableData.ts @@ -0,0 +1,72 @@ +import { useRecoilCallback } from 'recoil'; + +import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition'; +import { entityFieldMetadataArrayState } from '@/ui/table/states/entityFieldMetadataArrayState'; +import { tableEntitiesFamilyState } from '@/ui/table/states/tableEntitiesFamilyState'; +import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata'; + +import { availableFiltersScopedState } from '../../ui/filter-n-sort/states/availableFiltersScopedState'; +import { useContextScopeId } from '../../ui/recoil-scope/hooks/useContextScopeId'; +import { useResetTableRowSelection } from '../../ui/table/hooks/useResetTableRowSelection'; +import { entityTableDimensionsState } from '../../ui/table/states/entityTableDimensionsState'; +import { isFetchingEntityTableDataState } from '../../ui/table/states/isFetchingEntityTableDataState'; +import { TableContext } from '../../ui/table/states/TableContext'; +import { tableRowIdsState } from '../../ui/table/states/tableRowIdsState'; + +export function useSetEntityTableData() { + const resetTableRowSelection = useResetTableRowSelection(); + + const tableContextScopeId = useContextScopeId(TableContext); + + return useRecoilCallback( + ({ set, snapshot }) => + ( + newEntityArray: T[], + entityFieldMetadataArray: EntityFieldMetadata[], + ) => { + for (const entity of newEntityArray) { + const currentEntity = snapshot + .getLoadable(tableEntitiesFamilyState(entity.id)) + .valueOrThrow(); + + if (JSON.stringify(currentEntity) !== JSON.stringify(entity)) { + set(tableEntitiesFamilyState(entity.id), entity); + } + } + + const entityIds = newEntityArray.map((entity) => entity.id); + + set(tableRowIdsState, (currentRowIds) => { + if (JSON.stringify(currentRowIds) !== JSON.stringify(entityIds)) { + return entityIds; + } + + return currentRowIds; + }); + + resetTableRowSelection(); + + set(entityTableDimensionsState, { + numberOfColumns: entityFieldMetadataArray.length, + numberOfRows: entityIds.length, + }); + + const filters = entityFieldMetadataArray.map( + (fieldMetadata) => + ({ + field: fieldMetadata.fieldName, + icon: fieldMetadata.filterIcon, + label: fieldMetadata.label, + type: fieldMetadata.type, + } as FilterDefinition), + ); + + set(availableFiltersScopedState(tableContextScopeId), filters); + + set(entityFieldMetadataArrayState, entityFieldMetadataArray); + + set(isFetchingEntityTableDataState, false); + }, + [], + ); +} diff --git a/front/src/modules/people/hooks/useSetPeopleEntityTable.ts b/front/src/modules/people/hooks/useSetPeopleEntityTable.ts index c6f2159838bf..0f512c620cc6 100644 --- a/front/src/modules/people/hooks/useSetPeopleEntityTable.ts +++ b/front/src/modules/people/hooks/useSetPeopleEntityTable.ts @@ -1,6 +1,7 @@ import { useLocation } from 'react-router-dom'; import { useRecoilCallback } from 'recoil'; +import { tableEntitiesFamilyState } from '@/ui/table/states/tableEntitiesFamilyState'; import { GetPeopleQuery } from '~/generated/graphql'; import { peopleFilters } from '../../../pages/people/people-filters'; @@ -33,6 +34,14 @@ export function useSetPeopleEntityTable() { ({ set, snapshot }) => (newPeopleArray: GetPeopleQuery['people']) => { for (const person of newPeopleArray) { + const currentEntity = snapshot + .getLoadable(tableEntitiesFamilyState(person.id)) + .valueOrThrow(); + + if (JSON.stringify(currentEntity) !== JSON.stringify(person)) { + set(tableEntitiesFamilyState(person.id), person); + } + const currentEmail = snapshot .getLoadable(peopleEmailFamilyState(person.id)) .valueOrThrow(); diff --git a/front/src/modules/people/hooks/useUpdatePeopleField.ts b/front/src/modules/people/hooks/useUpdatePeopleField.ts new file mode 100644 index 000000000000..eaaa3b372b4c --- /dev/null +++ b/front/src/modules/people/hooks/useUpdatePeopleField.ts @@ -0,0 +1,18 @@ +import { useUpdateOnePersonMutation } from '~/generated/graphql'; + +export function useUpdatePeopleField() { + const [updatePeople] = useUpdateOnePersonMutation(); + + return function updatePeopleField( + peopleId: string, + fieldName: string, + fieldValue: unknown, + ) { + updatePeople({ + variables: { + where: { id: peopleId }, + data: { [fieldName]: fieldValue }, + }, + }); + }; +} diff --git a/front/src/modules/people/table/components/EditablePeopleCityCell.tsx b/front/src/modules/people/table/components/EditablePeopleCityCell.tsx index db86ca44ef10..2254df0112a8 100644 --- a/front/src/modules/people/table/components/EditablePeopleCityCell.tsx +++ b/front/src/modules/people/table/components/EditablePeopleCityCell.tsx @@ -1,8 +1,8 @@ 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 { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; import { useUpdateOnePersonMutation } from '~/generated/graphql'; export function EditablePeopleCityCell() { @@ -10,7 +10,12 @@ export function EditablePeopleCityCell() { const [updatePerson] = useUpdateOnePersonMutation(); - const city = useRecoilValue(peopleCityFamilyState(currentRowEntityId ?? '')); + const city = useRecoilValue( + tableEntityFieldFamilySelector({ + entityId: currentRowEntityId ?? '', + fieldName: 'city', + }), + ); return ( + ); + + default: + return <>; + } +} diff --git a/front/src/modules/people/table/components/GenericEditableTextCell.tsx b/front/src/modules/people/table/components/GenericEditableTextCell.tsx new file mode 100644 index 000000000000..7d3406b28d57 --- /dev/null +++ b/front/src/modules/people/table/components/GenericEditableTextCell.tsx @@ -0,0 +1,44 @@ +import { useRecoilValue } from 'recoil'; + +import { InplaceInputTextDisplayMode } from '@/ui/display/component/InplaceInputTextDisplayMode'; +import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; +import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; + +import { GenericEditableTextCellEditMode } from './GenericEditableTextCellEditMode'; + +type OwnProps = { + fieldName: string; + editModeHorizontalAlign?: 'left' | 'right'; + placeholder?: string; +}; + +export function GenericEditableTextCell({ + fieldName, + editModeHorizontalAlign, + placeholder, +}: OwnProps) { + const currentRowEntityId = useCurrentRowEntityId(); + + const fieldValue = useRecoilValue( + tableEntityFieldFamilySelector({ + entityId: currentRowEntityId ?? '', + fieldName, + }), + ); + + return ( + + } + nonEditModeContent={ + {fieldValue} + } + > + ); +} diff --git a/front/src/modules/people/table/components/GenericEditableTextCellEditMode.tsx b/front/src/modules/people/table/components/GenericEditableTextCellEditMode.tsx new file mode 100644 index 000000000000..6f0010da9b5a --- /dev/null +++ b/front/src/modules/people/table/components/GenericEditableTextCellEditMode.tsx @@ -0,0 +1,47 @@ +import { useRecoilState } from 'recoil'; + +import { InplaceInputTextEditMode } from '@/ui/inplace-input/components/InplaceInputTextEditMode'; +import { useEntityUpdateFieldHook } from '@/ui/table/hooks/useCellUpdateFieldHook'; +import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; +import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; + +type OwnProps = { + fieldName: string; + placeholder?: string; +}; + +export function GenericEditableTextCellEditMode({ + fieldName, + placeholder, +}: OwnProps) { + const currentRowEntityId = useCurrentRowEntityId(); + + const [fieldValue, setFieldValue] = useRecoilState( + tableEntityFieldFamilySelector({ + entityId: currentRowEntityId ?? '', + fieldName, + }), + ); + + const useUpdateField = useEntityUpdateFieldHook(); + const updateField = useUpdateField?.(); + + function handleSubmit(newText: string) { + if (newText === fieldValue) return; + + setFieldValue(newText); + + if (currentRowEntityId && updateField) { + updateField(currentRowEntityId, fieldName, newText); + } + } + + return ( + + ); +} diff --git a/front/src/modules/people/table/components/PeopleTable.tsx b/front/src/modules/people/table/components/PeopleTable.tsx index da072cf858d9..e5c6c58a008a 100644 --- a/front/src/modules/people/table/components/PeopleTable.tsx +++ b/front/src/modules/people/table/components/PeopleTable.tsx @@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from 'react'; import { defaultOrderBy } from '@/companies/queries'; import { PeopleEntityTableData } from '@/people/components/PeopleEntityTableData'; +import { useUpdatePeopleField } from '@/people/hooks/useUpdatePeopleField'; import { PeopleSelectedSortType } from '@/people/queries'; import { peopleColumns } from '@/people/table/components/peopleColumns'; import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers'; @@ -37,6 +38,7 @@ export function PeopleTable() { viewIcon={} availableSorts={availableSorts} onSortsUpdate={updateSorts} + useUpdateField={useUpdatePeopleField} /> ); diff --git a/front/src/modules/people/table/components/PeopleTableV2.tsx b/front/src/modules/people/table/components/PeopleTableV2.tsx new file mode 100644 index 000000000000..fad160abde8a --- /dev/null +++ b/front/src/modules/people/table/components/PeopleTableV2.tsx @@ -0,0 +1,53 @@ +import { useCallback, useMemo, useState } from 'react'; + +import { defaultOrderBy } from '@/companies/queries'; +import { GenericEntityTableData } from '@/people/components/GenericEntityTableData'; +import { peopleFieldMetadataArray } from '@/people/constants/peopleFieldMetadataArray'; +import { useUpdatePeopleField } from '@/people/hooks/useUpdatePeopleField'; +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 { TableContext } from '@/ui/table/states/TableContext'; +import { + PersonOrderByWithRelationInput, + useGetPeopleQuery, +} from '~/generated/graphql'; +import { availableSorts } from '~/pages/people/people-sorts'; + +export function PeopleTable() { + const [orderBy, setOrderBy] = + useState(defaultOrderBy); + + const updateSorts = useCallback((sorts: Array) => { + setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy); + }, []); + + const filters = useRecoilScopedValue(filtersScopedState, TableContext); + + const whereFilters = useMemo(() => { + return { AND: filters.map(turnFilterIntoWhereClause) }; + }, [filters]) as any; + + return ( + <> + + } + availableSorts={availableSorts} + onSortsUpdate={updateSorts} + useUpdateField={useUpdatePeopleField} + /> + + ); +} diff --git a/front/src/modules/people/table/components/peopleColumns.tsx b/front/src/modules/people/table/components/peopleColumns.tsx index 3aaec0dc0f0a..71caf632f015 100644 --- a/front/src/modules/people/table/components/peopleColumns.tsx +++ b/front/src/modules/people/table/components/peopleColumns.tsx @@ -9,14 +9,13 @@ import { 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'; +import { GenericEditableTextCell } from './GenericEditableTextCell'; export type TableColumn = { id: string; @@ -67,14 +66,18 @@ export const peopleColumns: TableColumn[] = [ title: 'City', icon: , size: 150, - cellComponent: , + cellComponent: ( + + ), }, { id: 'jobTitle', title: 'Job title', icon: , size: 150, - cellComponent: , + cellComponent: ( + + ), }, { id: 'linkedinUrl', diff --git a/front/src/modules/ui/table/components/EntityTable.tsx b/front/src/modules/ui/table/components/EntityTable.tsx index 6ed158fba2b1..9b2dfadbecd9 100644 --- a/front/src/modules/ui/table/components/EntityTable.tsx +++ b/front/src/modules/ui/table/components/EntityTable.tsx @@ -8,7 +8,9 @@ import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside'; import { useIsPageLoading } from '../../hooks/useIsPageLoading'; import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus'; import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus'; +import { EntityUpdateFieldHookContext } from '../states/EntityUpdateFieldHookContext'; import { TableHeader } from '../table-header/components/TableHeader'; +import { EntityUpdateFieldHook } from '../types/CellUpdateFieldHook'; import { EntityTableBody } from './EntityTableBody'; import { EntityTableHeader } from './EntityTableHeader'; @@ -91,6 +93,7 @@ type OwnProps = { availableSorts?: Array>; onSortsUpdate?: (sorts: Array>) => void; onRowSelectionChange?: (rowSelection: string[]) => void; + useUpdateField: EntityUpdateFieldHook; }; export function EntityTable({ @@ -99,6 +102,7 @@ export function EntityTable({ viewIcon, availableSorts, onSortsUpdate, + useUpdateField, }: OwnProps) { const tableBodyRef = React.useRef(null); @@ -120,21 +124,23 @@ export function EntityTable({ } return ( - - - - - - - - - - - + + + + + + + + + + + + + ); } diff --git a/front/src/modules/ui/table/components/EntityTableBodyV2.tsx b/front/src/modules/ui/table/components/EntityTableBodyV2.tsx new file mode 100644 index 000000000000..819cede10c88 --- /dev/null +++ b/front/src/modules/ui/table/components/EntityTableBodyV2.tsx @@ -0,0 +1,36 @@ +import { useRecoilValue } from 'recoil'; + +import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState'; + +import { isFetchingEntityTableDataState } from '../states/isFetchingEntityTableDataState'; +import { RowIdContext } from '../states/RowIdContext'; +import { RowIndexContext } from '../states/RowIndexContext'; +import { tableRowIdsState } from '../states/tableRowIdsState'; + +import { EntityTableRow } from './EntityTableRowV2'; + +export function EntityTableBody() { + const rowIds = useRecoilValue(tableRowIdsState); + + const isNavbarSwitchingSize = useRecoilValue(isNavbarSwitchingSizeState); + + const isFetchingEntityTableData = useRecoilValue( + isFetchingEntityTableDataState, + ); + + if (isFetchingEntityTableData || isNavbarSwitchingSize) { + return null; + } + + return ( + + {rowIds.map((rowId, index) => ( + + + + + + ))} + + ); +} diff --git a/front/src/modules/ui/table/components/EntityTableCellV2.tsx b/front/src/modules/ui/table/components/EntityTableCellV2.tsx new file mode 100644 index 000000000000..52e95a559323 --- /dev/null +++ b/front/src/modules/ui/table/components/EntityTableCellV2.tsx @@ -0,0 +1,50 @@ +import { useContext } from 'react'; +import { useSetRecoilState } from 'recoil'; + +import { GenericEditableCell } from '@/people/table/components/GenericEditableCell'; + +import { RecoilScope } from '../../recoil-scope/components/RecoilScope'; +import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; +import { ColumnIndexContext } from '../states/ColumnIndexContext'; +import { contextMenuPositionState } from '../states/contextMenuPositionState'; +import { EntityFieldMetadataContext } from '../states/EntityFieldMetadataContext'; + +export function EntityTableCell({ cellIndex }: { cellIndex: number }) { + const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); + + const { setCurrentRowSelected } = useCurrentRowSelected(); + + function handleContextMenu(event: React.MouseEvent) { + event.preventDefault(); + + setCurrentRowSelected(true); + + setContextMenuPosition({ + x: event.clientX, + y: event.clientY, + }); + } + + const entityFieldMetadata = useContext(EntityFieldMetadataContext); + + if (!entityFieldMetadata) { + return null; + } + + return ( + + + handleContextMenu(event)} + style={{ + width: entityFieldMetadata.columnSize, + minWidth: entityFieldMetadata.columnSize, + maxWidth: entityFieldMetadata.columnSize, + }} + > + + + + + ); +} diff --git a/front/src/modules/ui/table/components/EntityTableHeaderV2.tsx b/front/src/modules/ui/table/components/EntityTableHeaderV2.tsx new file mode 100644 index 000000000000..5557008774ff --- /dev/null +++ b/front/src/modules/ui/table/components/EntityTableHeaderV2.tsx @@ -0,0 +1,42 @@ +import { useRecoilValue } from 'recoil'; + +import { entityFieldMetadataArrayState } from '../states/entityFieldMetadataArrayState'; + +import { ColumnHead } from './ColumnHead'; +import { SelectAllCheckbox } from './SelectAllCheckbox'; + +export function EntityTableHeader() { + const fieldMetadataArray = useRecoilValue(entityFieldMetadataArrayState); + + return ( + + + + + + {fieldMetadataArray.map((fieldMetadata) => ( + + + + ))} + + + + ); +} diff --git a/front/src/modules/ui/table/components/EntityTableRowV2.tsx b/front/src/modules/ui/table/components/EntityTableRowV2.tsx new file mode 100644 index 000000000000..cbe2b78e9263 --- /dev/null +++ b/front/src/modules/ui/table/components/EntityTableRowV2.tsx @@ -0,0 +1,38 @@ +import styled from '@emotion/styled'; +import { useRecoilValue } from 'recoil'; + +import { entityFieldMetadataArrayState } from '../states/entityFieldMetadataArrayState'; +import { EntityFieldMetadataContext } from '../states/EntityFieldMetadataContext'; + +import { CheckboxCell } from './CheckboxCell'; +import { EntityTableCell } from './EntityTableCellV2'; + +const StyledRow = styled.tr<{ selected: boolean }>` + background: ${(props) => + props.selected ? props.theme.background.secondary : 'none'}; +`; + +export function EntityTableRow({ rowId }: { rowId: string }) { + const entityFieldMetadataArray = useRecoilValue( + entityFieldMetadataArrayState, + ); + + return ( + + + + + {entityFieldMetadataArray.map((entityFieldMetadata, columnIndex) => { + return ( + + + + ); + })} + + + ); +} diff --git a/front/src/modules/ui/table/components/EntityTableV2.tsx b/front/src/modules/ui/table/components/EntityTableV2.tsx new file mode 100644 index 000000000000..f34c70f741e2 --- /dev/null +++ b/front/src/modules/ui/table/components/EntityTableV2.tsx @@ -0,0 +1,136 @@ +import * as React from 'react'; +import styled from '@emotion/styled'; + +import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface'; +import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside'; + +import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus'; +import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus'; +import { EntityUpdateFieldHookContext } from '../states/EntityUpdateFieldHookContext'; +import { TableHeader } from '../table-header/components/TableHeader'; +import { EntityUpdateFieldHook } from '../types/CellUpdateFieldHook'; + +import { EntityTableBody } from './EntityTableBodyV2'; +import { EntityTableHeader } from './EntityTableHeaderV2'; + +const StyledTable = styled.table` + border-collapse: collapse; + + border-radius: ${({ theme }) => theme.border.radius.sm}; + border-spacing: 0; + margin-left: ${({ theme }) => theme.table.horizontalCellMargin}; + margin-right: ${({ theme }) => theme.table.horizontalCellMargin}; + table-layout: fixed; + width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2); + + th { + border: 1px solid ${({ theme }) => theme.border.color.light}; + border-collapse: collapse; + color: ${({ theme }) => theme.font.color.tertiary}; + padding: 0; + text-align: left; + + :last-child { + border-right-color: transparent; + } + :first-of-type { + border-left-color: transparent; + border-right-color: transparent; + } + :last-of-type { + min-width: 0; + width: 100%; + } + } + + td { + border: 1px solid ${({ theme }) => theme.border.color.light}; + border-collapse: collapse; + color: ${({ theme }) => theme.font.color.primary}; + padding: 0; + + text-align: left; + + :last-child { + border-right-color: transparent; + } + :first-of-type { + border-left-color: transparent; + border-right-color: transparent; + } + :last-of-type { + min-width: 0; + width: 100%; + } + } +`; + +const StyledTableWithHeader = styled.div` + display: flex; + flex: 1; + flex-direction: column; + width: 100%; +`; + +const StyledTableContainer = styled.div` + display: flex; + flex-direction: column; + height: 100%; + overflow: auto; +`; + +const StyledTableWrapper = styled.div` + flex: 1; + overflow: auto; +`; + +type OwnProps = { + viewName: string; + viewIcon?: React.ReactNode; + availableSorts?: Array>; + onSortsUpdate?: (sorts: Array>) => void; + onRowSelectionChange?: (rowSelection: string[]) => void; + useUpdateField: EntityUpdateFieldHook; +}; + +export function EntityTable({ + viewName, + viewIcon, + availableSorts, + onSortsUpdate, + useUpdateField, +}: OwnProps) { + const tableBodyRef = React.useRef(null); + + useMapKeyboardToSoftFocus(); + + const leaveTableFocus = useLeaveTableFocus(); + + useListenClickOutside({ + refs: [tableBodyRef], + callback: () => { + leaveTableFocus(); + }, + }); + + return ( + + + + + + + + + + + + + + ); +} diff --git a/front/src/modules/ui/table/hooks/useCellUpdateFieldHook.ts b/front/src/modules/ui/table/hooks/useCellUpdateFieldHook.ts new file mode 100644 index 000000000000..9b0ba8d54ce9 --- /dev/null +++ b/front/src/modules/ui/table/hooks/useCellUpdateFieldHook.ts @@ -0,0 +1,7 @@ +import { useContext } from 'react'; + +import { EntityUpdateFieldHookContext } from '../states/EntityUpdateFieldHookContext'; + +export function useEntityUpdateFieldHook() { + return useContext(EntityUpdateFieldHookContext); +} diff --git a/front/src/modules/ui/table/states/EntityFieldMetadataContext.ts b/front/src/modules/ui/table/states/EntityFieldMetadataContext.ts new file mode 100644 index 000000000000..fea74eae8013 --- /dev/null +++ b/front/src/modules/ui/table/states/EntityFieldMetadataContext.ts @@ -0,0 +1,6 @@ +import { createContext } from 'react'; + +import { EntityFieldMetadata } from '../types/EntityFieldMetadata'; + +export const EntityFieldMetadataContext = + createContext(null); diff --git a/front/src/modules/ui/table/states/EntityUpdateFieldHookContext.ts b/front/src/modules/ui/table/states/EntityUpdateFieldHookContext.ts new file mode 100644 index 000000000000..2ed5eaf308d8 --- /dev/null +++ b/front/src/modules/ui/table/states/EntityUpdateFieldHookContext.ts @@ -0,0 +1,6 @@ +import { createContext } from 'react'; + +import { EntityUpdateFieldHook } from '../types/CellUpdateFieldHook'; + +export const EntityUpdateFieldHookContext = + createContext(null); diff --git a/front/src/modules/ui/table/states/entityFieldMetadataArrayState.ts b/front/src/modules/ui/table/states/entityFieldMetadataArrayState.ts new file mode 100644 index 000000000000..217adc0ad69b --- /dev/null +++ b/front/src/modules/ui/table/states/entityFieldMetadataArrayState.ts @@ -0,0 +1,8 @@ +import { atom } from 'recoil'; + +import { EntityFieldMetadata } from '../types/EntityFieldMetadata'; + +export const entityFieldMetadataArrayState = atom({ + key: 'entityFieldMetadataArrayState', + default: [], +}); diff --git a/front/src/modules/ui/table/states/tableEntitiesFamilyState.ts b/front/src/modules/ui/table/states/tableEntitiesFamilyState.ts new file mode 100644 index 000000000000..3a3f394e6474 --- /dev/null +++ b/front/src/modules/ui/table/states/tableEntitiesFamilyState.ts @@ -0,0 +1,9 @@ +import { atomFamily } from 'recoil'; + +export const tableEntitiesFamilyState = atomFamily< + Record | null, + string +>({ + key: 'tableEntitiesFamilyState', + default: null, +}); diff --git a/front/src/modules/ui/table/states/tableEntityFieldFamilySelector.ts b/front/src/modules/ui/table/states/tableEntityFieldFamilySelector.ts new file mode 100644 index 000000000000..4590118fbc73 --- /dev/null +++ b/front/src/modules/ui/table/states/tableEntityFieldFamilySelector.ts @@ -0,0 +1,18 @@ +import { selectorFamily } from 'recoil'; + +import { tableEntitiesFamilyState } from './tableEntitiesFamilyState'; + +export const tableEntityFieldFamilySelector = selectorFamily({ + key: 'tableEntityFieldFamilySelector', + get: + ({ fieldName, entityId }: { fieldName: string; entityId: string }) => + ({ get }) => + get(tableEntitiesFamilyState(entityId))?.[fieldName] as T, + set: + ({ fieldName, entityId }: { fieldName: string; entityId: string }) => + ({ set }, newValue: T) => + set(tableEntitiesFamilyState(entityId), (prevState) => ({ + ...prevState, + [fieldName]: newValue, + })), +}); diff --git a/front/src/modules/ui/table/types/CellUpdateFieldHook.ts b/front/src/modules/ui/table/types/CellUpdateFieldHook.ts new file mode 100644 index 000000000000..f861575c48d3 --- /dev/null +++ b/front/src/modules/ui/table/types/CellUpdateFieldHook.ts @@ -0,0 +1,5 @@ +export type EntityUpdateFieldHook = () => ( + entityId: string, + fieldName: string, + value: T, +) => void | Promise; diff --git a/front/src/modules/ui/table/types/EntityFieldMetadata.ts b/front/src/modules/ui/table/types/EntityFieldMetadata.ts new file mode 100644 index 000000000000..fa78483deb19 --- /dev/null +++ b/front/src/modules/ui/table/types/EntityFieldMetadata.ts @@ -0,0 +1,16 @@ +export type EntityFieldType = + | 'text' + | 'number' + | 'date' + | 'select' + | 'checkbox' + | 'icon'; + +export type EntityFieldMetadata = { + fieldName: string; + label: string; + type: EntityFieldType; + icon: JSX.Element; + columnSize: number; + filterIcon?: JSX.Element; +}; From 1027477994d6a0070c2326c05e55b00bf50fb9ac Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Wed, 26 Jul 2023 19:51:01 -0700 Subject: [PATCH 4/7] Removed metadata from entity table V1 --- .../table/components/CompanyTable.tsx | 3 -- .../ui/table/components/EntityTable.tsx | 38 ++++++++----------- 2 files changed, 16 insertions(+), 25 deletions(-) diff --git a/front/src/modules/companies/table/components/CompanyTable.tsx b/front/src/modules/companies/table/components/CompanyTable.tsx index 9a085eb1cff1..89aa55772c44 100644 --- a/front/src/modules/companies/table/components/CompanyTable.tsx +++ b/front/src/modules/companies/table/components/CompanyTable.tsx @@ -36,9 +36,6 @@ export function CompanyTable() { viewIcon={} availableSorts={availableSorts} onSortsUpdate={updateSorts} - useUpdateField={() => () => { - // - }} /> ); diff --git a/front/src/modules/ui/table/components/EntityTable.tsx b/front/src/modules/ui/table/components/EntityTable.tsx index 9b2dfadbecd9..6ed158fba2b1 100644 --- a/front/src/modules/ui/table/components/EntityTable.tsx +++ b/front/src/modules/ui/table/components/EntityTable.tsx @@ -8,9 +8,7 @@ import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside'; import { useIsPageLoading } from '../../hooks/useIsPageLoading'; import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus'; import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus'; -import { EntityUpdateFieldHookContext } from '../states/EntityUpdateFieldHookContext'; import { TableHeader } from '../table-header/components/TableHeader'; -import { EntityUpdateFieldHook } from '../types/CellUpdateFieldHook'; import { EntityTableBody } from './EntityTableBody'; import { EntityTableHeader } from './EntityTableHeader'; @@ -93,7 +91,6 @@ type OwnProps = { availableSorts?: Array>; onSortsUpdate?: (sorts: Array>) => void; onRowSelectionChange?: (rowSelection: string[]) => void; - useUpdateField: EntityUpdateFieldHook; }; export function EntityTable({ @@ -102,7 +99,6 @@ export function EntityTable({ viewIcon, availableSorts, onSortsUpdate, - useUpdateField, }: OwnProps) { const tableBodyRef = React.useRef(null); @@ -124,23 +120,21 @@ export function EntityTable({ } return ( - - - - - - - - - - - - - + + + + + + + + + + + ); } From df2caf743a6d3573af7d714e059cf6a2e90b5b01 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Wed, 26 Jul 2023 19:57:22 -0700 Subject: [PATCH 5/7] Fix --- .../src/modules/people/hooks/useSetPeopleEntityTable.ts | 9 --------- .../people/table/components/EditablePeopleCityCell.tsx | 9 ++------- .../src/modules/people/table/components/PeopleTable.tsx | 2 -- 3 files changed, 2 insertions(+), 18 deletions(-) diff --git a/front/src/modules/people/hooks/useSetPeopleEntityTable.ts b/front/src/modules/people/hooks/useSetPeopleEntityTable.ts index 0f512c620cc6..c6f2159838bf 100644 --- a/front/src/modules/people/hooks/useSetPeopleEntityTable.ts +++ b/front/src/modules/people/hooks/useSetPeopleEntityTable.ts @@ -1,7 +1,6 @@ import { useLocation } from 'react-router-dom'; import { useRecoilCallback } from 'recoil'; -import { tableEntitiesFamilyState } from '@/ui/table/states/tableEntitiesFamilyState'; import { GetPeopleQuery } from '~/generated/graphql'; import { peopleFilters } from '../../../pages/people/people-filters'; @@ -34,14 +33,6 @@ export function useSetPeopleEntityTable() { ({ set, snapshot }) => (newPeopleArray: GetPeopleQuery['people']) => { for (const person of newPeopleArray) { - const currentEntity = snapshot - .getLoadable(tableEntitiesFamilyState(person.id)) - .valueOrThrow(); - - if (JSON.stringify(currentEntity) !== JSON.stringify(person)) { - set(tableEntitiesFamilyState(person.id), person); - } - const currentEmail = snapshot .getLoadable(peopleEmailFamilyState(person.id)) .valueOrThrow(); diff --git a/front/src/modules/people/table/components/EditablePeopleCityCell.tsx b/front/src/modules/people/table/components/EditablePeopleCityCell.tsx index 2254df0112a8..db86ca44ef10 100644 --- a/front/src/modules/people/table/components/EditablePeopleCityCell.tsx +++ b/front/src/modules/people/table/components/EditablePeopleCityCell.tsx @@ -1,8 +1,8 @@ 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 { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; import { useUpdateOnePersonMutation } from '~/generated/graphql'; export function EditablePeopleCityCell() { @@ -10,12 +10,7 @@ export function EditablePeopleCityCell() { const [updatePerson] = useUpdateOnePersonMutation(); - const city = useRecoilValue( - tableEntityFieldFamilySelector({ - entityId: currentRowEntityId ?? '', - fieldName: 'city', - }), - ); + const city = useRecoilValue(peopleCityFamilyState(currentRowEntityId ?? '')); return ( } availableSorts={availableSorts} onSortsUpdate={updateSorts} - useUpdateField={useUpdatePeopleField} /> ); From bb6af13134841eded54201ccda3db1d2c5fa8c89 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Wed, 26 Jul 2023 19:57:32 -0700 Subject: [PATCH 6/7] Fix --- .../companies/table/components/CompanyTableMockMode.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/front/src/modules/companies/table/components/CompanyTableMockMode.tsx b/front/src/modules/companies/table/components/CompanyTableMockMode.tsx index 25d708d968e4..6339b09f8d3d 100644 --- a/front/src/modules/companies/table/components/CompanyTableMockMode.tsx +++ b/front/src/modules/companies/table/components/CompanyTableMockMode.tsx @@ -13,9 +13,6 @@ export function CompanyTableMockMode() { viewName="All Companies" viewIcon={} availableSorts={availableSorts} - useUpdateField={() => () => { - // - }} /> ); From 9e1bf7634d4e560107c5e323caadb63c77ce68d9 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Wed, 26 Jul 2023 19:58:24 -0700 Subject: [PATCH 7/7] Fix --- .../modules/people/table/components/peopleColumns.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/front/src/modules/people/table/components/peopleColumns.tsx b/front/src/modules/people/table/components/peopleColumns.tsx index 71caf632f015..3aaec0dc0f0a 100644 --- a/front/src/modules/people/table/components/peopleColumns.tsx +++ b/front/src/modules/people/table/components/peopleColumns.tsx @@ -9,13 +9,14 @@ import { 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'; -import { GenericEditableTextCell } from './GenericEditableTextCell'; export type TableColumn = { id: string; @@ -66,18 +67,14 @@ export const peopleColumns: TableColumn[] = [ title: 'City', icon: , size: 150, - cellComponent: ( - - ), + cellComponent: , }, { id: 'jobTitle', title: 'Job title', icon: , size: 150, - cellComponent: ( - - ), + cellComponent: , }, { id: 'linkedinUrl',