diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableColumnWidthEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableColumnWidthEffect.tsx index 9ba135cde1..78798ad02d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableColumnWidthEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableColumnWidthEffect.tsx @@ -1,4 +1,5 @@ import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthVariableName'; +import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { useRecordTableLastColumnWidthToFill } from '@/object-record/record-table/hooks/useRecordTableLastColumnWidthToFill'; import { resizedFieldMetadataIdComponentState } from '@/object-record/record-table/states/resizedFieldMetadataIdComponentState'; @@ -28,6 +29,11 @@ export const RecordTableColumnWidthEffect = () => { `${lastColumnWidth}px`, ); + updateRecordTableCSSVariable( + RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME, + `${lastColumnWidth}px`, + ); + for (const [index, recordField] of visibleRecordFields.entries()) { updateRecordTableCSSVariable( getRecordTableColumnFieldWidthCSSVariableName(index), diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx index 4328f0afcd..35e0da454c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx @@ -7,6 +7,8 @@ import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record- import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidthClassName'; import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthClassName'; import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthVariableName'; +import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthClassName'; +import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName'; import { RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE } from '@/object-record/record-table/constants/RecordTableLabelIdentifierColumnWidthOnMobile'; import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex'; @@ -150,6 +152,7 @@ const StyledTable = styled.div<{ } returnedCSS += `${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}: ${lastColumnWidth}px;`; + returnedCSS += `${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}: ${lastColumnWidth}px;`; return returnedCSS; }}; @@ -163,6 +166,18 @@ const StyledTable = styled.div<{ ${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME} ); } + + div.${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME} { + width: var( + ${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME} + ); + min-width: var( + ${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME} + ); + max-width: var( + ${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME} + ); + } `; export const RecordTableStyleWrapper = StyledTable; diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthClassName.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthClassName.ts new file mode 100644 index 0000000000..2ab8256d08 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthClassName.ts @@ -0,0 +1,2 @@ +export const RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME = + 'record-table-column-with-group-last-empty-column'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName.ts new file mode 100644 index 0000000000..f2fec23feb --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName.ts @@ -0,0 +1,2 @@ +export const RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME = + '--record-table-column-with-group-last-empty-column'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useResizeTableHeader.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useResizeTableHeader.ts index 2a9f4262a6..d30d2821fb 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useResizeTableHeader.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useResizeTableHeader.ts @@ -2,6 +2,7 @@ import { useUpdateRecordField } from '@/object-record/record-field/hooks/useUpda import { COLUMN_MIN_WIDTH } from '@/object-record/record-table/constants/ColumnMinWidth'; import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthVariableName'; +import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; import { useRecordTableLastColumnWidthToFill } from '@/object-record/record-table/hooks/useRecordTableLastColumnWidthToFill'; @@ -96,6 +97,16 @@ export const useResizeTableHeader = () => { `${newLastColumnWidth}px`, ); + const newGroupSectionLastColumnWidth = Math.max( + lastColumnWidth, + lastColumnWidth + newResizeOffset, + ); + + updateRecordTableCSSVariable( + RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME, + `${newGroupSectionLastColumnWidth}px`, + ); + setResizeFieldOffset(x - initialPointerPositionX); }, [ diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx index f2f7bfb8d0..3660dab119 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx @@ -6,7 +6,7 @@ import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/ import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableAddButtonPlaceholderCell } from '@/object-record/record-table/record-table-row/components/RecordTableAddButtonPlaceholderCell'; import { RecordTableDragAndDropPlaceholderCell } from '@/object-record/record-table/record-table-row/components/RecordTableDragAndDropPlaceholderCell'; -import { RecordTableLastDynamicFillingCell } from '@/object-record/record-table/record-table-row/components/RecordTableLastDynamicFillingCell'; +import { RecordTableGroupSectionLastDynamicFillingCell } from '@/object-record/record-table/record-table-row/components/RecordTableGroupSectionLastDynamicFillingCell'; import { useTheme } from '@emotion/react'; import { filterOutByProperty, @@ -142,7 +142,7 @@ export const RecordTableActionRow = ({ } /> - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableGroupSectionLastDynamicFillingCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableGroupSectionLastDynamicFillingCell.tsx new file mode 100644 index 0000000000..a2b4dedd6a --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableGroupSectionLastDynamicFillingCell.tsx @@ -0,0 +1,23 @@ +import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthClassName'; +import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; +import styled from '@emotion/styled'; +import { cx } from '@linaria/core'; + +const StyledPlaceholderLastDynamicFillingCell = styled.div` + height: ${RECORD_TABLE_ROW_HEIGHT}px; +`; + +export const RecordTableGroupSectionLastDynamicFillingCell = ({ + className, +}: { + className?: string; +}) => { + return ( + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx index 72ac0b6cf3..95eb2a0393 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx @@ -15,8 +15,8 @@ import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/ import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableAddButtonPlaceholderCell } from '@/object-record/record-table/record-table-row/components/RecordTableAddButtonPlaceholderCell'; -import { RecordTableLastDynamicFillingCell } from '@/object-record/record-table/record-table-row/components/RecordTableLastDynamicFillingCell'; -import { RecordTableRecordGroupStickyEffect } from '@/object-record/record-table/record-table-section/components/RecordTableRecordGroupStickyEffect'; +import { RecordTableGroupSectionLastDynamicFillingCell } from '@/object-record/record-table/record-table-row/components/RecordTableGroupSectionLastDynamicFillingCell'; + import { useAggregateRecordsForRecordTableSection } from '@/object-record/record-table/record-table-section/hooks/useAggregateRecordsForRecordTableSection'; import { isRecordGroupTableSectionToggledComponentState } from '@/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState'; import { isRecordTableRowActiveComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowActiveComponentFamilyState'; @@ -167,8 +167,7 @@ export const RecordTableRecordGroupSection = () => { const sumOfWidthOfVisibleRecordFieldsAfterLabelIdentifierField = visibleRecordFieldsWithoutLabelIdentifier.reduce(sumByProperty('size'), 0); - const sumOfBorderWidthForFields = - visibleRecordFieldsWithoutLabelIdentifier.length; + const sumOfBorderWidthForFields = visibleRecordFields.length; const fieldsPlaceholderWidth = sumOfWidthOfVisibleRecordFieldsAfterLabelIdentifierField + @@ -246,11 +245,10 @@ export const RecordTableRecordGroupSection = () => { objectMetadataItem={objectMetadataItem} aggregateLabel={aggregateLabel} /> - - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupStickyEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupStickyEffect.tsx deleted file mode 100644 index 513b10f049..0000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupStickyEffect.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { useEffect } from 'react'; - -import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId'; -import { isRecordTableScrolledHorizontallyComponentState } from '@/object-record/record-table/states/isRecordTableScrolledHorizontallyComponentState'; -import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollLeftComponentState'; -import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState'; - -export const RecordTableRecordGroupStickyEffect = () => { - const scrollLeft = useRecoilComponentValue( - scrollWrapperScrollLeftComponentState, - ); - - const setIsRecordTableScrolledHorizontally = useSetRecoilComponentState( - isRecordTableScrolledHorizontallyComponentState, - ); - - const currentRecordGroupId = useCurrentRecordGroupId(); - - useEffect(() => { - setIsRecordTableScrolledHorizontally(scrollLeft > 0); - // TODO: see if we need to reimplement setting classes here. - }, [currentRecordGroupId, scrollLeft, setIsRecordTableScrolledHorizontally]); - - return <>; -};