diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx index 1cbe6f6c5..35a6ef792 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import styled from '@emotion/styled'; -import { useSetRecoilState } from 'recoil'; +import { useRecoilCallback, useSetRecoilState } from 'recoil'; import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; @@ -18,10 +18,12 @@ import { recordIndexSortsState } from '@/object-record/record-index/states/recor import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider'; import { ViewBar } from '@/views/components/ViewBar'; +import { ViewField } from '@/views/types/ViewField'; import { ViewType } from '@/views/types/ViewType'; import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions'; import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters'; import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts'; +import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; const StyledContainer = styled.div` display: flex; @@ -58,9 +60,6 @@ export const RecordIndexContainer = ({ const { columnDefinitions } = useColumnDefinitionsFromFieldMetadata(objectMetadataItem); - const setRecordIndexFieldDefinitions = useSetRecoilState( - recordIndexFieldDefinitionsState, - ); const setRecordIndexFilters = useSetRecoilState(recordIndexFiltersState); const setRecordIndexSorts = useSetRecoilState(recordIndexSortsState); @@ -68,6 +67,32 @@ export const RecordIndexContainer = ({ recordTableId: recordIndexId, }); + const onViewFieldsChange = useRecoilCallback( + ({ set, snapshot }) => + (viewFields: ViewField[]) => { + setTableColumns( + mapViewFieldsToColumnDefinitions(viewFields, columnDefinitions), + ); + + const existingRecordIndexFieldDefinitions = snapshot + .getLoadable(recordIndexFieldDefinitionsState) + .getValue(); + + const newFieldDefinitions = mapViewFieldsToColumnDefinitions( + viewFields, + columnDefinitions, + ); + if ( + !isDeeplyEqual( + existingRecordIndexFieldDefinitions, + newFieldDefinitions, + ) + ) + set(recordIndexFieldDefinitionsState, newFieldDefinitions); + }, + [columnDefinitions, setTableColumns], + ); + return ( @@ -81,14 +106,7 @@ export const RecordIndexContainer = ({ /> } optionsDropdownScopeId={RECORD_INDEX_OPTIONS_DROPDOWN_ID} - onViewFieldsChange={(viewFields) => { - setTableColumns( - mapViewFieldsToColumnDefinitions(viewFields, columnDefinitions), - ); - setRecordIndexFieldDefinitions( - mapViewFieldsToColumnDefinitions(viewFields, columnDefinitions), - ); - }} + onViewFieldsChange={onViewFieldsChange} onViewFiltersChange={(viewFilters) => { setTableFilters(mapViewFiltersToFilters(viewFilters)); setRecordIndexFilters(mapViewFiltersToFilters(viewFilters)); diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts index 027ca3caf..d4e5d9f73 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts @@ -144,13 +144,14 @@ export const useRecordIndexOptionsForBoard = ({ updatedFieldDefinition.fieldMetadataId ? { ...exitingFieldDefinition, - isVisible: !updatedFieldDefinition.isVisible, + isVisible: !exitingFieldDefinition.isVisible, } : exitingFieldDefinition, ); } setRecordIndexFieldDefinitions(updatedFieldsDefinitions); + persistViewFields( mapBoardFieldDefinitionsToViewFields(updatedFieldsDefinitions), ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx index fa0c7cb5e..afdeb9c3b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx @@ -18,10 +18,6 @@ type RecordTableRowProps = { rowIndex: number; }; -const StyledPlaceholder = styled.td` - height: 30px; -`; - const StyledTd = styled.td` background-color: ${({ theme }) => theme.background.primary}; `; @@ -56,31 +52,27 @@ export const RecordTableRow = ({ recordId, rowIndex }: RecordTableRowProps) => { data-testid={`row-id-${recordId}`} data-selectable-id={recordId} > - {inView ? ( - <> - - - - {[...visibleTableColumns] - .sort((columnA, columnB) => columnA.position - columnB.position) - .map((column, columnIndex) => { - return ( - - - - ); - })} - - - ) : ( - - )} + + + + {[...visibleTableColumns] + .sort((columnA, columnB) => columnA.position - columnB.position) + .map((column, columnIndex) => { + return inView ? ( + + + + ) : ( + + ); + })} + );