Skip to content

Commit 703c08c

Browse files
lucasbordeaulucasbordeau
committed
Fix
1 parent d2dfc39 commit 703c08c

File tree

6 files changed

+127
-83
lines changed

6 files changed

+127
-83
lines changed

‎packages/twenty-front/src/modules/object-record/record-table-widget/components/RecordTableWidgetViewLoadEffect.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,20 @@ export const RecordTableWidgetViewLoadEffect = ({
4242
return;
4343
}
4444

45-
if (viewId === lastLoadedRecordTableWidgetViewId) {
45+
if (
46+
viewId === lastLoadedRecordTableWidgetViewId?.viewId &&
47+
objectMetadataItem.updatedAt ===
48+
lastLoadedRecordTableWidgetViewId?.objectMetadataItemUpdatedAt
49+
) {
4650
return;
4751
}
4852

4953
loadRecordIndexStates(viewFromViewId, objectMetadataItem);
5054

51-
setLastLoadedRecordTableWidgetViewId(viewId);
55+
setLastLoadedRecordTableWidgetViewId({
56+
viewId,
57+
objectMetadataItemUpdatedAt: objectMetadataItem.updatedAt,
58+
});
5259
}, [
5360
viewId,
5461
lastLoadedRecordTableWidgetViewId,

‎packages/twenty-front/src/modules/object-record/record-table-widget/states/lastLoadedRecordTableWidgetViewIdComponentState.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ import { ContextStoreComponentInstanceContext } from '@/context-store/states/con
22
import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
33

44
export const lastLoadedRecordTableWidgetViewIdComponentState =
5-
createAtomComponentState<string | null>({
5+
createAtomComponentState<{
6+
viewId: string;
7+
objectMetadataItemUpdatedAt: string;
8+
} | null>({
69
key: 'lastLoadedRecordTableWidgetViewIdComponentState',
710
defaultValue: null,
811
componentInstanceContext: ContextStoreComponentInstanceContext,

‎packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx‎

Lines changed: 10 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,7 @@
1-
import { RecordTableCellCheckbox } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox';
2-
import { RecordTableCellDragAndDrop } from '@/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop';
3-
import { RecordTableLastEmptyCell } from '@/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell';
4-
import { RecordTablePlusButtonCellPlaceholder } from '@/object-record/record-table/record-table-cell/components/RecordTablePlusButtonCellPlaceholder';
5-
6-
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
71
import { RecordTableDraggableTr } from '@/object-record/record-table/record-table-row/components/RecordTableDraggableTr';
8-
import { RecordTableFieldsCells } from '@/object-record/record-table/record-table-row/components/RecordTableFieldsCells';
9-
import { RecordTableRowArrowKeysEffect } from '@/object-record/record-table/record-table-row/components/RecordTableRowArrowKeysEffect';
10-
import { RecordTableRowHotkeyEffect } from '@/object-record/record-table/record-table-row/components/RecordTableRowHotkeyEffect';
11-
import { isRecordTableCheckboxColumnHiddenComponentState } from '@/object-record/record-table/states/isRecordTableCheckboxColumnHiddenComponentState';
2+
import { RecordTableRowCells } from '@/object-record/record-table/record-table-row/components/RecordTableRowCells';
3+
import { RecordTableStaticTr } from '@/object-record/record-table/record-table-row/components/RecordTableStaticTr';
124
import { isRecordTableDragColumnHiddenComponentState } from '@/object-record/record-table/states/isRecordTableDragColumnHiddenComponentState';
13-
import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState';
14-
import { isRecordTableRowFocusedComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowFocusedComponentFamilyState';
15-
import { useAtomComponentFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyStateValue';
165
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
176

187
type RecordTableRowProps = {
@@ -26,43 +15,25 @@ export const RecordTableRow = ({
2615
rowIndexForFocus,
2716
rowIndexForDrag,
2817
}: RecordTableRowProps) => {
29-
const { recordTableId } = useRecordTableContextOrThrow();
30-
31-
const isRecordTableRowFocused = useAtomComponentFamilyStateValue(
32-
isRecordTableRowFocusedComponentFamilyState,
33-
rowIndexForFocus,
34-
);
35-
36-
const isRecordTableRowFocusActive = useAtomComponentStateValue(
37-
isRecordTableRowFocusActiveComponentState,
38-
recordTableId,
39-
);
40-
4118
const isRecordTableDragColumnHidden = useAtomComponentStateValue(
4219
isRecordTableDragColumnHiddenComponentState,
4320
);
4421

45-
const isRecordTableCheckboxColumnHidden = useAtomComponentStateValue(
46-
isRecordTableCheckboxColumnHiddenComponentState,
47-
);
22+
if (isRecordTableDragColumnHidden) {
23+
return (
24+
<RecordTableStaticTr recordId={recordId} focusIndex={rowIndexForFocus}>
25+
<RecordTableRowCells rowIndexForFocus={rowIndexForFocus} />
26+
</RecordTableStaticTr>
27+
);
28+
}
4829

4930
return (
5031
<RecordTableDraggableTr
5132
recordId={recordId}
5233
draggableIndex={rowIndexForDrag}
5334
focusIndex={rowIndexForFocus}
5435
>
55-
{isRecordTableRowFocusActive && isRecordTableRowFocused && (
56-
<>
57-
<RecordTableRowHotkeyEffect />
58-
<RecordTableRowArrowKeysEffect />
59-
</>
60-
)}
61-
{!isRecordTableDragColumnHidden && <RecordTableCellDragAndDrop />}
62-
{!isRecordTableCheckboxColumnHidden && <RecordTableCellCheckbox />}
63-
<RecordTableFieldsCells />
64-
<RecordTablePlusButtonCellPlaceholder />
65-
<RecordTableLastEmptyCell />
36+
<RecordTableRowCells rowIndexForFocus={rowIndexForFocus} />
6637
</RecordTableDraggableTr>
6738
);
6839
};

‎packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowCells.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
2+
import { RecordTableCellCheckbox } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox';
3+
import { RecordTableCellDragAndDrop } from '@/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop';
4+
import { RecordTableLastEmptyCell } from '@/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell';
5+
import { RecordTablePlusButtonCellPlaceholder } from '@/object-record/record-table/record-table-cell/components/RecordTablePlusButtonCellPlaceholder';
6+
import { RecordTableFieldsCells } from '@/object-record/record-table/record-table-row/components/RecordTableFieldsCells';
7+
import { RecordTableRowArrowKeysEffect } from '@/object-record/record-table/record-table-row/components/RecordTableRowArrowKeysEffect';
8+
import { RecordTableRowHotkeyEffect } from '@/object-record/record-table/record-table-row/components/RecordTableRowHotkeyEffect';
9+
import { isRecordTableCheckboxColumnHiddenComponentState } from '@/object-record/record-table/states/isRecordTableCheckboxColumnHiddenComponentState';
10+
import { isRecordTableDragColumnHiddenComponentState } from '@/object-record/record-table/states/isRecordTableDragColumnHiddenComponentState';
11+
import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState';
12+
import { isRecordTableRowFocusedComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowFocusedComponentFamilyState';
13+
import { useAtomComponentFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyStateValue';
14+
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
15+
16+
type RecordTableRowCellsProps = {
17+
rowIndexForFocus: number;
18+
};
19+
20+
export const RecordTableRowCells = ({
21+
rowIndexForFocus,
22+
}: RecordTableRowCellsProps) => {
23+
const { recordTableId } = useRecordTableContextOrThrow();
24+
25+
const isRecordTableRowFocused = useAtomComponentFamilyStateValue(
26+
isRecordTableRowFocusedComponentFamilyState,
27+
rowIndexForFocus,
28+
);
29+
30+
const isRecordTableRowFocusActive = useAtomComponentStateValue(
31+
isRecordTableRowFocusActiveComponentState,
32+
recordTableId,
33+
);
34+
35+
const isRecordTableDragColumnHidden = useAtomComponentStateValue(
36+
isRecordTableDragColumnHiddenComponentState,
37+
);
38+
39+
const isRecordTableCheckboxColumnHidden = useAtomComponentStateValue(
40+
isRecordTableCheckboxColumnHiddenComponentState,
41+
);
42+
43+
return (
44+
<>
45+
{isRecordTableRowFocusActive && isRecordTableRowFocused && (
46+
<>
47+
<RecordTableRowHotkeyEffect />
48+
<RecordTableRowArrowKeysEffect />
49+
</>
50+
)}
51+
{!isRecordTableDragColumnHidden && <RecordTableCellDragAndDrop />}
52+
{!isRecordTableCheckboxColumnHidden && <RecordTableCellCheckbox />}
53+
<RecordTableFieldsCells />
54+
<RecordTablePlusButtonCellPlaceholder />
55+
<RecordTableLastEmptyCell />
56+
</>
57+
);
58+
};

‎packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableStaticTr.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { type ReactNode } from 'react';
2+
3+
import { RecordTableRowDraggableContextProvider } from '@/object-record/record-table/contexts/RecordTableRowDraggableContext';
4+
import { RecordTableTr } from '@/object-record/record-table/record-table-row/components/RecordTableTr';
5+
6+
type RecordTableStaticTrProps = {
7+
recordId: string;
8+
focusIndex: number;
9+
children: ReactNode;
10+
};
11+
12+
export const RecordTableStaticTr = ({
13+
recordId,
14+
focusIndex,
15+
children,
16+
}: RecordTableStaticTrProps) => {
17+
return (
18+
<RecordTableTr
19+
recordId={recordId}
20+
focusIndex={focusIndex}
21+
isDragging={false}
22+
data-testid={`row-id-${recordId}`}
23+
data-selectable-id={recordId}
24+
>
25+
<RecordTableRowDraggableContextProvider
26+
value={{
27+
isDragging: false,
28+
dragHandleProps: null,
29+
}}
30+
>
31+
{children}
32+
</RecordTableRowDraggableContextProvider>
33+
</RecordTableTr>
34+
);
35+
};

‎packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedFullData.tsx‎

Lines changed: 11 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,24 @@
1-
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
2-
import { RecordTableCellCheckbox } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox';
3-
import { RecordTableCellDragAndDrop } from '@/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop';
4-
import { RecordTableLastEmptyCell } from '@/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell';
5-
import { RecordTablePlusButtonCellPlaceholder } from '@/object-record/record-table/record-table-cell/components/RecordTablePlusButtonCellPlaceholder';
61
import { RecordTableDraggableTr } from '@/object-record/record-table/record-table-row/components/RecordTableDraggableTr';
7-
import { RecordTableFieldsCells } from '@/object-record/record-table/record-table-row/components/RecordTableFieldsCells';
8-
import { RecordTableRowArrowKeysEffect } from '@/object-record/record-table/record-table-row/components/RecordTableRowArrowKeysEffect';
9-
import { RecordTableRowHotkeyEffect } from '@/object-record/record-table/record-table-row/components/RecordTableRowHotkeyEffect';
10-
import { isRecordTableCheckboxColumnHiddenComponentState } from '@/object-record/record-table/states/isRecordTableCheckboxColumnHiddenComponentState';
2+
import { RecordTableRowCells } from '@/object-record/record-table/record-table-row/components/RecordTableRowCells';
3+
import { RecordTableStaticTr } from '@/object-record/record-table/record-table-row/components/RecordTableStaticTr';
114
import { isRecordTableDragColumnHiddenComponentState } from '@/object-record/record-table/states/isRecordTableDragColumnHiddenComponentState';
12-
import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState';
13-
import { isRecordTableRowFocusedComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowFocusedComponentFamilyState';
145
import { RecordTableRowVirtualizedSkeleton } from '@/object-record/record-table/virtualization/components/RecordTableRowVirtualizedSkeleton';
156
import { recordIdByRealIndexComponentFamilySelector } from '@/object-record/record-table/virtualization/states/recordIdByRealIndexComponentFamilySelector';
16-
177
import { useAtomComponentFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilySelectorValue';
18-
import { useAtomComponentFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyStateValue';
198
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
209
import { isDefined } from 'twenty-shared/utils';
2110

2211
type RecordTableRowVirtualizedFullDataProps = {
2312
realIndex: number;
2413
};
2514

26-
// TODO: Full Data will take its full meaning when we'll have different levels of data : with relations, only identifiers, etc.
2715
export const RecordTableRowVirtualizedFullData = ({
2816
realIndex,
2917
}: RecordTableRowVirtualizedFullDataProps) => {
30-
const { recordTableId } = useRecordTableContextOrThrow();
31-
32-
const isRecordTableRowFocused = useAtomComponentFamilyStateValue(
33-
isRecordTableRowFocusedComponentFamilyState,
34-
realIndex,
35-
);
36-
37-
const isRecordTableRowFocusActive = useAtomComponentStateValue(
38-
isRecordTableRowFocusActiveComponentState,
39-
recordTableId,
40-
);
41-
4218
const isRecordTableDragColumnHidden = useAtomComponentStateValue(
4319
isRecordTableDragColumnHiddenComponentState,
4420
);
4521

46-
const isRecordTableCheckboxColumnHidden = useAtomComponentStateValue(
47-
isRecordTableCheckboxColumnHiddenComponentState,
48-
);
49-
5022
const recordId = useAtomComponentFamilySelectorValue(
5123
recordIdByRealIndexComponentFamilySelector,
5224
realIndex,
@@ -56,23 +28,21 @@ export const RecordTableRowVirtualizedFullData = ({
5628
return <RecordTableRowVirtualizedSkeleton />;
5729
}
5830

31+
if (isRecordTableDragColumnHidden) {
32+
return (
33+
<RecordTableStaticTr recordId={recordId} focusIndex={realIndex}>
34+
<RecordTableRowCells rowIndexForFocus={realIndex} />
35+
</RecordTableStaticTr>
36+
);
37+
}
38+
5939
return (
6040
<RecordTableDraggableTr
6141
recordId={recordId}
6242
draggableIndex={realIndex}
6343
focusIndex={realIndex}
6444
>
65-
{!isRecordTableDragColumnHidden && <RecordTableCellDragAndDrop />}
66-
{!isRecordTableCheckboxColumnHidden && <RecordTableCellCheckbox />}
67-
<RecordTableFieldsCells />
68-
<RecordTablePlusButtonCellPlaceholder />
69-
<RecordTableLastEmptyCell />
70-
{isRecordTableRowFocusActive && isRecordTableRowFocused && (
71-
<>
72-
<RecordTableRowHotkeyEffect />
73-
<RecordTableRowArrowKeysEffect />
74-
</>
75-
)}
45+
<RecordTableRowCells rowIndexForFocus={realIndex} />
7646
</RecordTableDraggableTr>
7747
);
7848
};

0 commit comments

Comments
 (0)