From ab7e6a313fd1eb199d922b1ebb3f393294d1f0f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Thu, 28 Nov 2024 14:22:30 +0100 Subject: [PATCH 01/21] feat: table record group --- .../hiddenRecordGroupIdsComponentSelector.ts | 3 +- .../visibleRecordGroupIdsComponentSelector.ts | 2 +- .../utils/sortRecordGroupDefinitions.ts | 2 +- .../components/RecordTableRecordGroupRows.tsx | 49 ++++++-- .../components/RecordTableBody.tsx | 50 ++++++++ .../components/RecordTableBodyDroppable.tsx | 78 +++--------- ...ordTableBodyRecordGroupDragDropContext.tsx | 108 ++++++++++++++++ .../RecordTableRecordGroupsBody.tsx | 29 +++-- .../components/RecordTableRow.tsx | 13 +- .../components/RecordTableRowWrapper.tsx | 25 ++-- .../RecordTableRecordGroupSection.tsx | 115 ++++++++++++++++++ ...dGroupTableSectionToggledComponentState.ts | 10 ++ ...bleRowIdsByGroupComponentFamilySelector.ts | 19 +++ ...erOfVisibleTableColumnComponentSelector.ts | 18 +++ 14 files changed, 419 insertions(+), 102 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfVisibleTableColumnComponentSelector.ts diff --git a/packages/twenty-front/src/modules/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector.ts index 4c57886cbff8..8974472496bb 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector.ts @@ -1,12 +1,13 @@ import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState'; +import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition'; import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; import { isDefined } from '~/utils/isDefined'; export const hiddenRecordGroupIdsComponentSelector = createComponentSelectorV2< - string[] + RecordGroupDefinition['id'][] >({ key: 'hiddenRecordGroupIdsComponentSelector', componentInstanceContext: ViewComponentInstanceContext, diff --git a/packages/twenty-front/src/modules/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts index 4c2332ebbdde..848cebbad6e7 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts @@ -10,7 +10,7 @@ import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewCompon import { isDefined } from '~/utils/isDefined'; export const visibleRecordGroupIdsComponentSelector = createComponentSelectorV2< - string[] + RecordGroupDefinition['id'][] >({ key: 'visibleRecordGroupIdsComponentSelector', componentInstanceContext: ViewComponentInstanceContext, diff --git a/packages/twenty-front/src/modules/object-record/record-group/utils/sortRecordGroupDefinitions.ts b/packages/twenty-front/src/modules/object-record/record-group/utils/sortRecordGroupDefinitions.ts index afe2aa41a879..09fa73eb880c 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/utils/sortRecordGroupDefinitions.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/utils/sortRecordGroupDefinitions.ts @@ -6,7 +6,7 @@ export const sortRecordGroupDefinitions = ( recordGroupSort: RecordGroupSort, ) => { const visibleRecordGroups = recordGroupDefinitions.filter( - (boardGroup) => boardGroup.isVisible, + (recordGroup) => recordGroup.isVisible, ); const compareAlphabetical = (a: string, b: string, reverse = false) => { diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx index cc2bb5a7e975..7785625ef77f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx @@ -2,12 +2,17 @@ import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useC import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow'; +import { isRecordGroupTableSectionToggledComponentState } from '@/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState'; import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { AnimatePresence, motion } from 'framer-motion'; import { useMemo } from 'react'; +import { isDefined } from '~/utils/isDefined'; + +const MotionRecordTableRow = motion(RecordTableRow); export const RecordTableRecordGroupRows = () => { - const recordGroupId = useCurrentRecordGroupId(); + const currentRecordGroupId = useCurrentRecordGroupId(); const allRowIds = useRecoilComponentValueV2( recordIndexAllRowIdsComponentState, @@ -15,7 +20,12 @@ export const RecordTableRecordGroupRows = () => { const recordGroupRowIds = useRecoilComponentFamilyValueV2( recordIndexRowIdsByGroupComponentFamilyState, - recordGroupId, + currentRecordGroupId, + ); + + const isRecordGroupTableSectionToggled = useRecoilComponentFamilyValueV2( + isRecordGroupTableSectionToggledComponentState, + currentRecordGroupId, ); const rowIndexMap = useMemo( @@ -23,15 +33,32 @@ export const RecordTableRecordGroupRows = () => { [allRowIds], ); - return recordGroupRowIds.map((recordId) => { - const rowIndex = rowIndexMap.get(recordId); + // TODO: Animation is not working, find a way to make it works + const variants = { + hidden: { height: 0, opacity: 0 }, + visible: { height: 'auto', opacity: 1 }, + }; - if (!rowIndex) { - throw new Error(`Row index for record id ${recordId} not found`); - } + return ( + + {isRecordGroupTableSectionToggled && + recordGroupRowIds.map((recordId) => { + const rowIndex = rowIndexMap.get(recordId); - return ( - - ); - }); + if (!isDefined(rowIndex)) { + return null; + } + + return ( + + ); + })} + + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx new file mode 100644 index 000000000000..7a6dbe2975e6 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx @@ -0,0 +1,50 @@ +import styled from '@emotion/styled'; +import { MOBILE_VIEWPORT } from 'twenty-ui'; + +const StyledTbody = styled.tbody` + &.first-columns-sticky { + td:nth-of-type(1) { + position: sticky; + left: 0; + z-index: 5; + transition: 0.3s ease; + } + td:nth-of-type(2) { + position: sticky; + left: 11px; + z-index: 5; + transition: 0.3s ease; + } + td:nth-of-type(3) { + position: sticky; + left: 43px; + z-index: 5; + transition: 0.3s ease; + + @media (max-width: ${MOBILE_VIEWPORT}px) { + & [data-testid='editable-cell-display-mode'] { + [data-testid='tooltip'] { + display: none; + } + + [data-testid='chip'] { + gap: 0; + } + } + } + + &::after { + content: ''; + position: absolute; + top: -1px; + height: calc(100% + 2px); + width: 4px; + right: 0px; + box-shadow: ${({ theme }) => theme.boxShadow.light}; + clip-path: inset(0px -4px 0px 0px); + } + } + } +`; + +export const RecordTableBody = StyledTbody; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx index b78b74663618..c8a41ef953e2 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx @@ -1,80 +1,36 @@ -import { Theme } from '@emotion/react'; +import { RecordTableBody } from '@/object-record/record-table/record-table-body/components/RecordTableBody'; import { Droppable } from '@hello-pangea/dnd'; -import { styled } from '@linaria/react'; -import { ReactNode, useContext, useState } from 'react'; -import { MOBILE_VIEWPORT, ThemeContext } from 'twenty-ui'; +import { ReactNode, useState } from 'react'; import { v4 } from 'uuid'; -const StyledTbody = styled.tbody<{ - theme: Theme; -}>` - &.first-columns-sticky { - td:nth-of-type(1) { - position: sticky; - left: 0; - z-index: 5; - transition: 0.3s ease; - } - td:nth-of-type(2) { - position: sticky; - left: 11px; - z-index: 5; - transition: 0.3s ease; - } - td:nth-of-type(3) { - position: sticky; - left: 43px; - z-index: 5; - transition: 0.3s ease; - - @media (max-width: ${MOBILE_VIEWPORT}px) { - & [data-testid='editable-cell-display-mode'] { - [data-testid='tooltip'] { - display: none; - } - - [data-testid='chip'] { - gap: 0; - } - } - } - - &::after { - content: ''; - position: absolute; - top: -1px; - height: calc(100% + 2px); - width: 4px; - right: 0px; - box-shadow: ${({ theme }) => theme.boxShadow.light}; - clip-path: inset(0px -4px 0px 0px); - } - } - } -`; +type RecordTableBodyDroppableProps = { + children: ReactNode; + recordGroupId?: string; + isDropDisabled?: boolean; +}; export const RecordTableBodyDroppable = ({ children, -}: { - children: ReactNode; -}) => { + recordGroupId, + isDropDisabled, +}: RecordTableBodyDroppableProps) => { const [v4Persistable] = useState(v4()); - const { theme } = useContext(ThemeContext); - return ( - + {(provided) => ( - {children} {provided.placeholder} - + )} ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx new file mode 100644 index 000000000000..e6249a969240 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx @@ -0,0 +1,108 @@ +import { DragDropContext, DropResult } from '@hello-pangea/dnd'; +import { ReactNode, useContext } from 'react'; +import { useRecoilCallback, useSetRecoilState } from 'recoil'; + +import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; +import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; +import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext'; +import { useComputeNewRowPosition } from '@/object-record/record-table/hooks/useComputeNewRowPosition'; +import { isRemoveSortingModalOpenState } from '@/object-record/record-table/states/isRemoveSortingModalOpenState'; +import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; +import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; +import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; +import { isDefined } from '~/utils/isDefined'; + +export const RecordTableBodyRecordGroupDragDropContext = ({ + children, +}: { + children: ReactNode; +}) => { + const { objectNameSingular, recordTableId, objectMetadataItem } = + useContext(RecordTableContext); + + const { updateOneRecord: updateOneRow } = useUpdateOneRecord({ + objectNameSingular, + }); + + const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2( + recordIndexAllRowIdsComponentState, + ); + + const { currentViewWithCombinedFiltersAndSorts } = + useGetCurrentView(recordTableId); + + const viewSorts = currentViewWithCombinedFiltersAndSorts?.viewSorts || []; + + const setIsRemoveSortingModalOpenState = useSetRecoilState( + isRemoveSortingModalOpenState, + ); + + const computeNewRowPosition = useComputeNewRowPosition(); + + const handleDragEnd = useRecoilCallback( + ({ snapshot }) => + (result: DropResult) => { + const tableAllRowIds = getSnapshotValue( + snapshot, + recordIndexAllRowIdsState, + ); + + const recordGroupId = result.destination?.droppableId; + + if (!isDefined(recordGroupId)) { + throw new Error('Record group id is not defined'); + } + + const recordGroup = getSnapshotValue( + snapshot, + recordGroupDefinitionFamilyState(recordGroupId), + ); + + if (!isDefined(recordGroup)) { + throw new Error('Record group is not defined'); + } + + const fieldMetadata = objectMetadataItem.fields.find( + (field) => field.id === recordGroup.fieldMetadataId, + ); + + if (!isDefined(fieldMetadata)) { + throw new Error('Field metadata is not defined'); + } + + if (viewSorts.length > 0) { + setIsRemoveSortingModalOpenState(true); + return; + } + + console.log('DRAP - DROP: ', result, recordGroup); + + const computeResult = computeNewRowPosition(result, tableAllRowIds); + + if (!isDefined(computeResult)) { + return; + } + + updateOneRow({ + idToUpdate: computeResult.draggedRecordId, + updateOneRecordInput: { + position: computeResult.newPosition, + [fieldMetadata.name]: recordGroup.value, + }, + }); + }, + [ + objectMetadataItem, + computeNewRowPosition, + setIsRemoveSortingModalOpenState, + recordIndexAllRowIdsState, + updateOneRow, + viewSorts.length, + ], + ); + + return ( + {children} + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx index 5f1b2dc77162..084549c02cc9 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx @@ -2,10 +2,11 @@ import { RecordGroupContext } from '@/object-record/record-group/states/context/ import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector'; import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; import { RecordTableRecordGroupRows } from '@/object-record/record-table/components/RecordTableRecordGroupRows'; -import { RecordTableBodyDragDropContext } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext'; import { RecordTableBodyDroppable } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppable'; import { RecordTableBodyLoading } from '@/object-record/record-table/record-table-body/components/RecordTableBodyLoading'; +import { RecordTableBodyRecordGroupDragDropContext } from '@/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext'; import { RecordTablePendingRow } from '@/object-record/record-table/record-table-row/components/RecordTablePendingRow'; +import { RecordTableRecordGroupSection } from '@/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection'; import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; @@ -27,18 +28,22 @@ export const RecordTableRecordGroupsBody = () => { } return ( - - + + {/** */} + - {visibleRecordGroupIds.map((recordGroupId) => ( - - - - ))} - + {visibleRecordGroupIds.map((recordGroupId) => ( + + + + + + + ))} + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx index 382fdc230372..ffffcb6ba248 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx @@ -4,6 +4,7 @@ import { RecordTableCellGrip } from '@/object-record/record-table/record-table-c import { RecordTableLastEmptyCell } from '@/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell'; import { RecordTableCells } from '@/object-record/record-table/record-table-row/components/RecordTableCells'; import { RecordTableRowWrapper } from '@/object-record/record-table/record-table-row/components/RecordTableRowWrapper'; +import { forwardRef } from 'react'; type RecordTableRowProps = { recordId: string; @@ -11,13 +12,13 @@ type RecordTableRowProps = { isPendingRow?: boolean; }; -export const RecordTableRow = ({ - recordId, - rowIndex, - isPendingRow, -}: RecordTableRowProps) => { +export const RecordTableRow = forwardRef< + HTMLTableRowElement, + RecordTableRowProps +>(({ recordId, rowIndex, isPendingRow }, ref) => { return ( ); -}; +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx index 6c7def1b071e..6a7bb3daef1c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx @@ -1,6 +1,6 @@ import { useTheme } from '@emotion/react'; import { Draggable } from '@hello-pangea/dnd'; -import { ReactNode, useContext, useEffect, useRef } from 'react'; +import { forwardRef, ReactNode, useContext, useEffect, useRef } from 'react'; import { useInView } from 'react-intersection-observer'; import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage'; @@ -13,18 +13,19 @@ import { tableCellWidthsComponentState } from '@/object-record/record-table/stat import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts'; import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; +import { isDefined } from '~/utils/isDefined'; -export const RecordTableRowWrapper = ({ - recordId, - rowIndex, - isPendingRow, - children, -}: { +type RecordTableRowWrapperProps = { recordId: string; rowIndex: number; isPendingRow?: boolean; children: ReactNode; -}) => { +}; + +export const RecordTableRowWrapper = forwardRef< + HTMLTableRowElement, + RecordTableRowWrapperProps +>(({ recordId, rowIndex, isPendingRow, children }, ref) => { const trRef = useRef(null); const { objectMetadataItem } = useContext(RecordTableContext); @@ -82,6 +83,12 @@ export const RecordTableRowWrapper = ({ trRef.current = node; elementRef(node); draggableProvided.innerRef(node); + + if (typeof ref === 'function') { + ref(node); + } else if (isDefined(ref)) { + ref.current = node; + } }} // eslint-disable-next-line react/jsx-props-no-spreading {...draggableProvided.draggableProps} @@ -120,4 +127,4 @@ export const RecordTableRowWrapper = ({ )} ); -}; +}); 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 new file mode 100644 index 000000000000..558cc67f1737 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx @@ -0,0 +1,115 @@ +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; +import { motion } from 'framer-motion'; +import { useCallback } from 'react'; +import { IconChevronUp, isDefined, Tag } from 'twenty-ui'; + +import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId'; +import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; +import { RecordGroupDefinitionType } from '@/object-record/record-group/types/RecordGroupDefinition'; +import { isRecordGroupTableSectionToggledComponentState } from '@/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState'; +import { numberOfTableRowIdsByGroupComponentFamilySelector } from '@/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector'; +import { numberOfvisibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/numberOfVisibleTableColumnComponentSelector'; +import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyStateV2'; +import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { useRecoilValue } from 'recoil'; + +const StyledTrContainer = styled.tr` + cursor: pointer; +`; + +const StyledChevronContainer = styled.td` + border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; + color: ${({ theme }) => theme.font.color.secondary}; + text-align: center; + vertical-align: middle; +`; + +const StyledTotalRow = styled.span` + color: ${({ theme }) => theme.font.color.tertiary}; + margin-left: ${({ theme }) => theme.spacing(2)}; + text-align: center; + vertical-align: middle; +`; + +const StyledRecordGroupSection = styled.td` + border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; + padding-bottom: 6px; + padding-top: 6px; +`; + +const StyledEmptyTd = styled.td` + border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; +`; + +export const RecordTableRecordGroupSection = () => { + const theme = useTheme(); + + const currentRecordGroupId = useCurrentRecordGroupId(); + + const numberOfVisibleColumns = useRecoilComponentValueV2( + numberOfvisibleTableColumnsComponentSelector, + ); + + const numberOfRows = useRecoilComponentFamilyValueV2( + numberOfTableRowIdsByGroupComponentFamilySelector, + currentRecordGroupId, + ); + + const [ + isRecordGroupTableSectionToggled, + setIsRecordGroupTableSectionToggled, + ] = useRecoilComponentFamilyStateV2( + isRecordGroupTableSectionToggledComponentState, + currentRecordGroupId, + ); + + const recordGroup = useRecoilValue( + recordGroupDefinitionFamilyState(currentRecordGroupId), + ); + + const handleDropdownToggle = useCallback(() => { + setIsRecordGroupTableSectionToggled((prevState) => !prevState); + }, [setIsRecordGroupTableSectionToggled]); + + if (!isDefined(recordGroup)) { + return null; + } + + return ( + + + + + + + + + + {numberOfRows} + + + + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState.ts new file mode 100644 index 000000000000..c83dad1de70e --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState.ts @@ -0,0 +1,10 @@ +import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition'; +import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2'; +import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; + +export const isRecordGroupTableSectionToggledComponentState = + createComponentFamilyStateV2({ + key: 'isRecordGroupTableSectionToggledComponentState', + defaultValue: true, + componentInstanceContext: ViewComponentInstanceContext, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector.ts new file mode 100644 index 000000000000..9e8f4d85836b --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector.ts @@ -0,0 +1,19 @@ +import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition'; +import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { createComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilySelectorV2'; + +export const numberOfTableRowIdsByGroupComponentFamilySelector = + createComponentFamilySelectorV2({ + key: 'numberOfTableRowIdsByGroupComponentFamilySelector', + componentInstanceContext: RecordTableComponentInstanceContext, + get: + ({ instanceId, familyKey }) => + ({ get }) => + get( + recordIndexRowIdsByGroupComponentFamilyState.atomFamily({ + instanceId, + familyKey, + }), + ).length, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfVisibleTableColumnComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfVisibleTableColumnComponentSelector.ts new file mode 100644 index 000000000000..0c70a14261dc --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfVisibleTableColumnComponentSelector.ts @@ -0,0 +1,18 @@ +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector'; +import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; + +export const numberOfvisibleTableColumnsComponentSelector = + createComponentSelectorV2({ + key: 'numberOfvisibleTableColumnsComponentSelector', + componentInstanceContext: RecordTableComponentInstanceContext, + get: + ({ instanceId }) => + ({ get }) => { + const columns = get( + visibleTableColumnsComponentSelector.selectorFamily({ instanceId }), + ); + + return columns.length; + }, + }); From 8917b4afb8b93cf2862b3459a2029b81ee020ba2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Thu, 28 Nov 2024 14:44:10 +0100 Subject: [PATCH 02/21] feat: replace all records ids state by selector --- .../record-board/components/RecordBoard.tsx | 10 ++-- .../hooks/useSetRecordBoardRecordIds.ts | 27 --------- .../hooks/useSetRecordIdsForColumn.ts | 44 +------------- ...BoardSelectedRecordIdsComponentSelector.ts | 12 ++-- .../recordIndexAllRowIdsComponentState.ts | 10 ---- ...ecordIndexAllRecordIdsComponentSelector.ts | 60 +++++++++++++++++++ ...rdGroupIsDraggableSortComponentSelector.ts | 2 +- .../record-table/components/RecordTable.tsx | 8 +-- .../RecordTableNoRecordGroupRows.tsx | 8 +-- .../components/RecordTableRecordGroupRows.tsx | 10 ++-- .../components/RecordTableEmptyHandler.tsx | 8 +-- .../internal/useResetTableRowSelection.ts | 17 +++--- .../hooks/internal/useSelectAllRows.ts | 30 +++++----- .../hooks/internal/useSetRecordTableData.ts | 43 +++---------- .../hooks/useRecordTableMoveFocus.ts | 32 ++++++---- .../RecordTableBodyDragDropContext.tsx | 8 +-- ...ordTableBodyRecordGroupDragDropContext.tsx | 20 +++---- .../RecordTableNoRecordGroupBody.tsx | 8 +-- .../RecordTableRecordGroupsBody.tsx | 8 +-- .../allRowsSelectedStatusComponentSelector.ts | 8 +-- .../selectedRowIdsComponentSelector.ts | 12 ++-- .../unselectedRowIdsComponentSelector.ts | 12 ++-- .../utils/createComponentSelectorV2.ts | 1 + 23 files changed, 185 insertions(+), 213 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/record-index/states/recordIndexAllRowIdsComponentState.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx index a28c71b8ee02..5414e1760510 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx @@ -16,8 +16,8 @@ import { RecordBoardComponentInstanceContext } from '@/object-record/record-boar import { getDraggedRecordPosition } from '@/object-record/record-board/utils/getDraggedRecordPosition'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope'; import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; @@ -73,8 +73,8 @@ export const RecordBoard = () => { recordIndexRowIdsByGroupComponentFamilyState, ); - const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2( - recordIndexAllRowIdsComponentState, + const recordIndexAllRecordIdsState = useRecoilComponentCallbackStateV2( + recordIndexAllRecordIdsComponentSelector, ); const { resetRecordSelection, setRecordAsSelected } = @@ -97,14 +97,14 @@ export const RecordBoard = () => { () => { const allRecordIds = getSnapshotValue( snapshot, - recordIndexAllRowIdsState, + recordIndexAllRecordIdsState, ); for (const recordId of allRecordIds) { setRecordAsSelected(recordId, true); } }, - [recordIndexAllRowIdsState, setRecordAsSelected], + [recordIndexAllRecordIdsState, setRecordAsSelected], ); useScopedHotkeys('ctrl+a,meta+a', selectAll, TableHotkeyScope.Table); diff --git a/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordBoardRecordIds.ts b/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordBoardRecordIds.ts index 0194a5bf366a..6b26b02aed35 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordBoardRecordIds.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordBoardRecordIds.ts @@ -3,7 +3,6 @@ import { useRecoilCallback } from 'recoil'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState'; import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { sortRecordsByPosition } from '@/object-record/utils/sortRecordsByPosition'; @@ -22,11 +21,6 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => { recordBoardId, ); - const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2( - recordIndexAllRowIdsComponentState, - recordBoardId, - ); - const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2( recordIndexRowIdsByGroupComponentFamilyState, recordBoardId, @@ -35,11 +29,6 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => { const setRecordIds = useRecoilCallback( ({ set, snapshot }) => (records: ObjectRecord[]) => { - const existingAllRowIds = getSnapshotValue( - snapshot, - recordIndexAllRowIdsState, - ); - const recordGroupIds = getSnapshotValue( snapshot, visibleRecordGroupIdsSelector, @@ -80,27 +69,11 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => { ); } } - - const allRowIds: string[] = []; - - for (const recordGroupId of recordGroupIds) { - const tableRowIdsByGroup = getSnapshotValue( - snapshot, - recordIndexRowIdsByGroupFamilyState(recordGroupId), - ); - - allRowIds.push(...tableRowIdsByGroup); - } - - if (!isDeeplyEqual(existingAllRowIds, allRowIds)) { - set(recordIndexAllRowIdsState, allRowIds); - } }, [ visibleRecordGroupIdsSelector, recordIndexRowIdsByGroupFamilyState, recordGroupFieldMetadataState, - recordIndexAllRowIdsState, ], ); diff --git a/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts b/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts index 3ba7c3ee78a4..958ba37471e3 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts @@ -2,8 +2,6 @@ import { useRecoilCallback } from 'recoil'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState'; -import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { sortRecordsByPosition } from '@/object-record/utils/sortRecordsByPosition'; @@ -13,21 +11,11 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; import { isDefined } from '~/utils/isDefined'; export const useSetRecordIdsForColumn = (recordBoardId?: string) => { - const recordGroupIdsState = useRecoilComponentCallbackStateV2( - recordGroupIdsComponentState, - recordBoardId, - ); - const recordGroupFieldMetadataState = useRecoilComponentCallbackStateV2( recordGroupFieldMetadataComponentState, recordBoardId, ); - const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2( - recordIndexAllRowIdsComponentState, - recordBoardId, - ); - const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2( recordIndexRowIdsByGroupComponentFamilyState, recordBoardId, @@ -36,13 +24,6 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => { const setRecordIdsForColumn = useRecoilCallback( ({ set, snapshot }) => (currentRecordGroupId: string, records: ObjectRecord[]) => { - const existingAllRowIds = getSnapshotValue( - snapshot, - recordIndexAllRowIdsState, - ); - - const recordGroupIds = getSnapshotValue(snapshot, recordGroupIdsState); - const recordGroup = getSnapshotValue( snapshot, recordGroupDefinitionFamilyState(currentRecordGroupId), @@ -76,31 +57,8 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => { recordGroupRowIds, ); } - - const allRowIds: string[] = []; - - for (const recordGroupId of recordGroupIds) { - const tableRowIdsByGroup = - recordGroupId !== currentRecordGroupId - ? getSnapshotValue( - snapshot, - recordIndexRowIdsByGroupFamilyState(recordGroupId), - ) - : recordGroupRowIds; - - allRowIds.push(...tableRowIdsByGroup); - } - - if (!isDeeplyEqual(existingAllRowIds, allRowIds)) { - set(recordIndexAllRowIdsState, allRowIds); - } }, - [ - recordGroupIdsState, - recordIndexRowIdsByGroupFamilyState, - recordGroupFieldMetadataState, - recordIndexAllRowIdsState, - ], + [recordIndexRowIdsByGroupFamilyState, recordGroupFieldMetadataState], ); return { diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector.ts index 849d45735982..1a4be45f4f1d 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector.ts @@ -1,6 +1,6 @@ import { RecordBoardComponentInstanceContext } from '@/object-record/record-board/states/contexts/RecordBoardComponentInstanceContext'; import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; export const recordBoardSelectedRecordIdsComponentSelector = @@ -10,11 +10,15 @@ export const recordBoardSelectedRecordIdsComponentSelector = get: ({ instanceId }) => ({ get }) => { - const allRowIds = get( - recordIndexAllRowIdsComponentState.atomFamily({ instanceId }), + const allRecordIds = get( + // TODO: This selector use a context different from the one used in the snippet + // its working for now as the instanceId is the same but we should change this + recordIndexAllRecordIdsComponentSelector.selectorFamily({ + instanceId, + }), ); - return allRowIds.filter( + return allRecordIds.filter( (recordId) => get( isRecordBoardCardSelectedComponentFamilyState.atomFamily({ diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexAllRowIdsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexAllRowIdsComponentState.ts deleted file mode 100644 index 7e163fd08ea3..000000000000 --- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexAllRowIdsComponentState.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; -import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; - -export const recordIndexAllRowIdsComponentState = createComponentStateV2< - string[] ->({ - key: 'recordIndexAllRowIdsComponentState', - defaultValue: [], - componentInstanceContext: ViewComponentInstanceContext, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts new file mode 100644 index 000000000000..c7bab432b6c7 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts @@ -0,0 +1,60 @@ +import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState'; +import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { ObjectRecord } from '@/object-record/types/ObjectRecord'; +import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; +import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; +import { v4 } from 'uuid'; + +/** + * Do not use this key outside of this file. + * This is a temporary key to store the record ids for the default record group. + */ +const defaultFamilyKey = v4(); + +export const recordIndexAllRecordIdsComponentSelector = + createComponentSelectorV2({ + key: 'recordIndexAllRecordIdsComponentSelector', + componentInstanceContext: ViewComponentInstanceContext, + get: + ({ instanceId }) => + ({ get }) => { + const recordGroupIds = get( + recordGroupIdsComponentState.atomFamily({ + instanceId, + }), + ); + + if (recordGroupIds.length === 0) { + return get( + recordIndexRowIdsByGroupComponentFamilyState.atomFamily({ + instanceId, + familyKey: defaultFamilyKey, + }), + ); + } + + return recordGroupIds.reduce( + (acc, recordGroupId) => { + const rowIds = get( + recordIndexRowIdsByGroupComponentFamilyState.atomFamily({ + instanceId, + familyKey: recordGroupId, + }), + ); + + return [...acc, ...rowIds]; + }, + [], + ); + }, + set: + ({ instanceId }) => + ({ set }, recordIds) => + set( + recordIndexRowIdsByGroupComponentFamilyState.atomFamily({ + instanceId, + familyKey: defaultFamilyKey, + }), + recordIds, + ), + }); diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexRecordGroupIsDraggableSortComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexRecordGroupIsDraggableSortComponentSelector.ts index 077216691ccd..d1e1606eb710 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexRecordGroupIsDraggableSortComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexRecordGroupIsDraggableSortComponentSelector.ts @@ -4,7 +4,7 @@ import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/ import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; export const recordIndexRecordGroupIsDraggableSortComponentSelector = - createComponentSelectorV2({ + createComponentSelectorV2({ key: 'recordIndexRecordGroupIsDraggableSortComponentSelector', componentInstanceContext: ViewComponentInstanceContext, get: diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx index 834761638081..4d6f5331bccc 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import { isNonEmptyString, isNull } from '@sniptt/guards'; import { hasRecordGroupsComponentSelector } from '@/object-record/record-group/states/selectors/hasRecordGroupsComponentSelector'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance'; import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider'; import { RecordTableStickyEffect } from '@/object-record/record-table/components/RecordTableStickyEffect'; @@ -53,8 +53,8 @@ export const RecordTable = ({ recordTableId, ); - const allRowIds = useRecoilComponentValueV2( - recordIndexAllRowIdsComponentState, + const allRecordIds = useRecoilComponentValueV2( + recordIndexAllRecordIdsComponentSelector, recordTableId, ); @@ -70,7 +70,7 @@ export const RecordTable = ({ const recordTableIsEmpty = !isRecordTableInitialLoading && - allRowIds.length === 0 && + allRecordIds.length === 0 && isNull(pendingRecordId); const { resetTableRowSelection, setRowSelected } = useRecordTable({ diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx index 7febddcdfa36..35ef9bf2b1ad 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx @@ -1,16 +1,16 @@ -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader'; import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; export const RecordTableNoRecordGroupRows = () => { - const allRowIds = useRecoilComponentValueV2( - recordIndexAllRowIdsComponentState, + const allRecordIds = useRecoilComponentValueV2( + recordIndexAllRecordIdsComponentSelector, ); return ( <> - {allRowIds.map((recordId, rowIndex) => { + {allRecordIds.map((recordId, rowIndex) => { return ( { const currentRecordGroupId = useCurrentRecordGroupId(); - const allRowIds = useRecoilComponentValueV2( - recordIndexAllRowIdsComponentState, + const allRecordIds = useRecoilComponentValueV2( + recordIndexAllRecordIdsComponentSelector, ); const recordGroupRowIds = useRecoilComponentFamilyValueV2( @@ -29,8 +29,8 @@ export const RecordTableRecordGroupRows = () => { ); const rowIndexMap = useMemo( - () => new Map(allRowIds.map((id, index) => [id, index])), - [allRowIds], + () => new Map(allRecordIds.map((recordId, index) => [recordId, index])), + [allRecordIds], ); // TODO: Animation is not working, find a way to make it works diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyHandler.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyHandler.tsx index debedb73f53f..d0bb45047771 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyHandler.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyHandler.tsx @@ -1,6 +1,6 @@ import { isNull } from '@sniptt/guards'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { RecordTableEmptyState } from '@/object-record/record-table/empty-state/components/RecordTableEmptyState'; import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState'; import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState'; @@ -20,8 +20,8 @@ export const RecordTableEmptyHandler = ({ recordTableId, ); - const allRowIds = useRecoilComponentValueV2( - recordIndexAllRowIdsComponentState, + const allRecordIds = useRecoilComponentValueV2( + recordIndexAllRecordIdsComponentSelector, recordTableId, ); @@ -32,7 +32,7 @@ export const RecordTableEmptyHandler = ({ const recordTableIsEmpty = !isRecordTableInitialLoading && - allRowIds.length === 0 && + allRecordIds.length === 0 && isNull(pendingRecordId); if (recordTableIsEmpty) { diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts index 409c30a461a4..e3c1095ee11b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts @@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil'; import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId'; import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState'; import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; @@ -18,8 +18,8 @@ export const useResetTableRowSelection = (recordTableId?: string) => { recordTableId, ); - const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2( - recordIndexAllRowIdsComponentState, + const recordIndexAllRecordIdsSelector = useRecoilComponentCallbackStateV2( + recordIndexAllRecordIdsComponentSelector, recordTableIdFromContext, ); @@ -43,10 +43,13 @@ export const useResetTableRowSelection = (recordTableId?: string) => { return useRecoilCallback( ({ set, snapshot }) => () => { - const allRowIds = getSnapshotValue(snapshot, recordIndexAllRowIdsState); + const allRecordIds = getSnapshotValue( + snapshot, + recordIndexAllRecordIdsSelector, + ); - for (const rowId of allRowIds) { - set(isRowSelectedFamilyState(rowId), false); + for (const recordId of allRecordIds) { + set(isRowSelectedFamilyState(recordId), false); } set(hasUserSelectedAllRowsState, false); @@ -54,7 +57,7 @@ export const useResetTableRowSelection = (recordTableId?: string) => { set(isActionMenuDropdownOpenState, false); }, [ - recordIndexAllRowIdsState, + recordIndexAllRecordIdsSelector, hasUserSelectedAllRowsState, isActionMenuDropdownOpenState, isRowSelectedFamilyState, diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts index f715435c076e..45d20105baeb 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts @@ -1,6 +1,6 @@ import { useRecoilCallback } from 'recoil'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; @@ -15,8 +15,8 @@ export const useSelectAllRows = (recordTableId?: string) => { isRowSelectedComponentFamilyState, recordTableId, ); - const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2( - recordIndexAllRowIdsComponentState, + const recordIndexAllRecordIdsSelector = useRecoilComponentCallbackStateV2( + recordIndexAllRecordIdsComponentSelector, recordTableId, ); @@ -28,24 +28,22 @@ export const useSelectAllRows = (recordTableId?: string) => { allRowsSelectedStatusSelector, ); - const allRowIds = getSnapshotValue(snapshot, recordIndexAllRowIdsState); + const allRecordIds = getSnapshotValue( + snapshot, + recordIndexAllRecordIdsSelector, + ); + + for (const recordId of allRecordIds) { + const isSelected = + allRowsSelectedStatus === 'none' || + allRowsSelectedStatus === 'some'; - if ( - allRowsSelectedStatus === 'none' || - allRowsSelectedStatus === 'some' - ) { - for (const rowId of allRowIds) { - set(isRowSelectedFamilyState(rowId), true); - } - } else { - for (const rowId of allRowIds) { - set(isRowSelectedFamilyState(rowId), false); - } + set(isRowSelectedFamilyState(recordId), isSelected); } }, [ allRowsSelectedStatusSelector, - recordIndexAllRowIdsState, + recordIndexAllRecordIdsSelector, isRowSelectedFamilyState, ], ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts index dcfa9e6f5483..ac077fb3d441 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts @@ -1,8 +1,7 @@ import { useRecoilCallback } from 'recoil'; -import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState'; import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; @@ -25,22 +24,21 @@ export const useSetRecordTableData = ({ recordIndexRowIdsByGroupComponentFamilyState, recordTableId, ); - const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2( - recordIndexAllRowIdsComponentState, + + const recordIndexAllRecordIdsSelector = useRecoilComponentCallbackStateV2( + recordIndexAllRecordIdsComponentSelector, recordTableId, ); + const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2( isRowSelectedComponentFamilyState, recordTableId, ); + const hasUserSelectedAllRowsState = useRecoilComponentCallbackStateV2( hasUserSelectedAllRowsComponentState, recordTableId, ); - const recordIndexRecordGroupIdsState = useRecoilComponentCallbackStateV2( - recordGroupIdsComponentState, - recordTableId, - ); return useRecoilCallback( ({ set, snapshot }) => @@ -68,7 +66,7 @@ export const useSetRecordTableData = ({ snapshot, currentRecordGroupId ? recordIndexRowIdsByGroupFamilyState(currentRecordGroupId) - : recordIndexAllRowIdsState, + : recordIndexAllRecordIdsSelector, ); const hasUserSelectedAllRows = getSnapshotValue( @@ -76,11 +74,6 @@ export const useSetRecordTableData = ({ hasUserSelectedAllRowsState, ); - const recordGroupIds = getSnapshotValue( - snapshot, - recordIndexRecordGroupIdsState, - ); - const recordIds = records.map((record) => record.id); if (!isDeeplyEqual(currentRowIds, recordIds)) { @@ -91,29 +84,12 @@ export const useSetRecordTableData = ({ } if (isDefined(currentRecordGroupId)) { - // TODO: Hack to store all ids in the same order as the record group definitions - // Should be replaced by something more efficient - const allRowIds: string[] = []; - set( recordIndexRowIdsByGroupFamilyState(currentRecordGroupId), recordIds, ); - - for (const recordGroupId of recordGroupIds) { - const tableRowIdsByGroup = - recordGroupId !== currentRecordGroupId - ? getSnapshotValue( - snapshot, - recordIndexRowIdsByGroupFamilyState(recordGroupId), - ) - : recordIds; - - allRowIds.push(...tableRowIdsByGroup); - } - set(recordIndexAllRowIdsState, allRowIds); } else { - set(recordIndexAllRowIdsState, recordIds); + set(recordIndexAllRecordIdsSelector, recordIds); } onEntityCountChange(totalCount); @@ -121,9 +97,8 @@ export const useSetRecordTableData = ({ }, [ recordIndexRowIdsByGroupFamilyState, - recordIndexAllRowIdsState, + recordIndexAllRecordIdsSelector, hasUserSelectedAllRowsState, - recordIndexRecordGroupIdsState, onEntityCountChange, isRowSelectedFamilyState, ], diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTableMoveFocus.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTableMoveFocus.ts index bfbe8e0050a4..8e97bebe230e 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTableMoveFocus.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTableMoveFocus.ts @@ -3,7 +3,7 @@ import { useRecoilCallback } from 'recoil'; import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocusDirection'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { numberOfTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector'; import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; @@ -17,8 +17,8 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => { recordTableId, ); - const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2( - recordIndexAllRowIdsComponentState, + const recordIndexAllRecordIdsSelector = useRecoilComponentCallbackStateV2( + recordIndexAllRecordIdsComponentSelector, recordTableId, ); @@ -47,7 +47,10 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => { const moveDown = useRecoilCallback( ({ snapshot }) => () => { - const allRowIds = getSnapshotValue(snapshot, recordIndexAllRowIdsState); + const allRecordIds = getSnapshotValue( + snapshot, + recordIndexAllRecordIdsSelector, + ); const softFocusPosition = getSnapshotValue( snapshot, softFocusPositionState, @@ -55,8 +58,8 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => { let newRowIndex = softFocusPosition.row + 1; - if (newRowIndex >= allRowIds.length) { - newRowIndex = allRowIds.length - 1; + if (newRowIndex >= allRecordIds.length) { + newRowIndex = allRecordIds.length - 1; } setSoftFocusPosition({ @@ -64,7 +67,11 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => { row: newRowIndex, }); }, - [recordIndexAllRowIdsState, setSoftFocusPosition, softFocusPositionState], + [ + recordIndexAllRecordIdsSelector, + setSoftFocusPosition, + softFocusPositionState, + ], ); const numberOfTableColumnsSelector = useRecoilComponentCallbackStateV2( @@ -75,7 +82,10 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => { const moveRight = useRecoilCallback( ({ snapshot }) => () => { - const allRowIds = getSnapshotValue(snapshot, recordIndexAllRowIdsState); + const allRecordIds = getSnapshotValue( + snapshot, + recordIndexAllRecordIdsSelector, + ); const softFocusPosition = getSnapshotValue( snapshot, softFocusPositionState, @@ -91,11 +101,11 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => { const isLastRowAndLastColumn = currentColumnIndex === numberOfTableColumns - 1 && - currentRowIndex === allRowIds.length - 1; + currentRowIndex === allRecordIds.length - 1; const isLastColumnButNotLastRow = currentColumnIndex === numberOfTableColumns - 1 && - currentRowIndex !== allRowIds.length - 1; + currentRowIndex !== allRecordIds.length - 1; const isNotLastColumn = currentColumnIndex !== numberOfTableColumns - 1; @@ -116,7 +126,7 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => { } }, [ - recordIndexAllRowIdsState, + recordIndexAllRecordIdsSelector, softFocusPositionState, numberOfTableColumnsSelector, setSoftFocusPosition, diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext.tsx index cf3546e1d271..3f1bef92c582 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext.tsx @@ -3,7 +3,7 @@ import { ReactNode, useContext } from 'react'; import { useSetRecoilState } from 'recoil'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext'; import { useComputeNewRowPosition } from '@/object-record/record-table/hooks/useComputeNewRowPosition'; import { isRemoveSortingModalOpenState } from '@/object-record/record-table/states/isRemoveSortingModalOpenState'; @@ -22,8 +22,8 @@ export const RecordTableBodyDragDropContext = ({ objectNameSingular, }); - const allRowIds = useRecoilComponentValueV2( - recordIndexAllRowIdsComponentState, + const allRecordIds = useRecoilComponentValueV2( + recordIndexAllRecordIdsComponentSelector, ); const { currentViewWithCombinedFiltersAndSorts } = @@ -43,7 +43,7 @@ export const RecordTableBodyDragDropContext = ({ return; } - const computeResult = computeNewRowPosition(result, allRowIds); + const computeResult = computeNewRowPosition(result, allRecordIds); if (!isDefined(computeResult)) { return; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx index e6249a969240..a8d7ed8c409d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx @@ -4,7 +4,7 @@ import { useRecoilCallback, useSetRecoilState } from 'recoil'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext'; import { useComputeNewRowPosition } from '@/object-record/record-table/hooks/useComputeNewRowPosition'; import { isRemoveSortingModalOpenState } from '@/object-record/record-table/states/isRemoveSortingModalOpenState'; @@ -25,8 +25,8 @@ export const RecordTableBodyRecordGroupDragDropContext = ({ objectNameSingular, }); - const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2( - recordIndexAllRowIdsComponentState, + const recordIndexAllRecordIdsSelector = useRecoilComponentCallbackStateV2( + recordIndexAllRecordIdsComponentSelector, ); const { currentViewWithCombinedFiltersAndSorts } = @@ -43,9 +43,9 @@ export const RecordTableBodyRecordGroupDragDropContext = ({ const handleDragEnd = useRecoilCallback( ({ snapshot }) => (result: DropResult) => { - const tableAllRowIds = getSnapshotValue( + const tableAllRecordIds = getSnapshotValue( snapshot, - recordIndexAllRowIdsState, + recordIndexAllRecordIdsSelector, ); const recordGroupId = result.destination?.droppableId; @@ -78,7 +78,7 @@ export const RecordTableBodyRecordGroupDragDropContext = ({ console.log('DRAP - DROP: ', result, recordGroup); - const computeResult = computeNewRowPosition(result, tableAllRowIds); + const computeResult = computeNewRowPosition(result, tableAllRecordIds); if (!isDefined(computeResult)) { return; @@ -93,12 +93,12 @@ export const RecordTableBodyRecordGroupDragDropContext = ({ }); }, [ - objectMetadataItem, + recordIndexAllRecordIdsSelector, + objectMetadataItem.fields, + viewSorts.length, computeNewRowPosition, - setIsRemoveSortingModalOpenState, - recordIndexAllRowIdsState, updateOneRow, - viewSorts.length, + setIsRemoveSortingModalOpenState, ], ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableNoRecordGroupBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableNoRecordGroupBody.tsx index 19b13b6de290..4fcbea02fa69 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableNoRecordGroupBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableNoRecordGroupBody.tsx @@ -1,4 +1,4 @@ -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { RecordTableNoRecordGroupRows } from '@/object-record/record-table/components/RecordTableNoRecordGroupRows'; import { RecordTableBodyDragDropContext } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext'; import { RecordTableBodyDroppable } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppable'; @@ -8,15 +8,15 @@ import { isRecordTableInitialLoadingComponentState } from '@/object-record/recor import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; export const RecordTableNoRecordGroupBody = () => { - const allRowIds = useRecoilComponentValueV2( - recordIndexAllRowIdsComponentState, + const allRecordIds = useRecoilComponentValueV2( + recordIndexAllRecordIdsComponentSelector, ); const isRecordTableInitialLoading = useRecoilComponentValueV2( isRecordTableInitialLoadingComponentState, ); - if (isRecordTableInitialLoading && allRowIds.length === 0) { + if (isRecordTableInitialLoading && allRecordIds.length === 0) { return ; } diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx index 084549c02cc9..518987efa5a4 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx @@ -1,6 +1,6 @@ import { RecordGroupContext } from '@/object-record/record-group/states/context/RecordGroupContext'; import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { RecordTableRecordGroupRows } from '@/object-record/record-table/components/RecordTableRecordGroupRows'; import { RecordTableBodyDroppable } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppable'; import { RecordTableBodyLoading } from '@/object-record/record-table/record-table-body/components/RecordTableBodyLoading'; @@ -11,8 +11,8 @@ import { isRecordTableInitialLoadingComponentState } from '@/object-record/recor import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; export const RecordTableRecordGroupsBody = () => { - const allRowIds = useRecoilComponentValueV2( - recordIndexAllRowIdsComponentState, + const allRecordIds = useRecoilComponentValueV2( + recordIndexAllRecordIdsComponentSelector, ); const isRecordTableInitialLoading = useRecoilComponentValueV2( @@ -23,7 +23,7 @@ export const RecordTableRecordGroupsBody = () => { visibleRecordGroupIdsComponentSelector, ); - if (isRecordTableInitialLoading && allRowIds.length === 0) { + if (isRecordTableInitialLoading && allRecordIds.length === 0) { return ; } diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector.ts index c9d1db2d32ea..0ff98a92b5bb 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector.ts @@ -1,6 +1,6 @@ import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector'; -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus'; @@ -12,9 +12,9 @@ export const allRowsSelectedStatusComponentSelector = get: ({ instanceId }) => ({ get }) => { - const allRowIds = get( + const allRecordIds = get( // TODO: Working because instanceId is the same, but we're not in the same context, should be changed ! - recordIndexAllRowIdsComponentState.atomFamily({ + recordIndexAllRecordIdsComponentSelector.selectorFamily({ instanceId, }), ); @@ -30,7 +30,7 @@ export const allRowsSelectedStatusComponentSelector = const allRowsSelectedStatus = numberOfSelectedRows === 0 ? 'none' - : selectedRowIds.length === allRowIds.length + : selectedRowIds.length === allRecordIds.length ? 'all' : 'some'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsComponentSelector.ts index 734056d3fe7c..865ce83b1117 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsComponentSelector.ts @@ -1,4 +1,4 @@ -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; @@ -11,19 +11,19 @@ export const selectedRowIdsComponentSelector = createComponentSelectorV2< get: ({ instanceId }) => ({ get }) => { - const allRowIds = get( + const allRecordIds = get( // TODO: Working because instanceId is the same, but we're not in the same context, should be changed ! - recordIndexAllRowIdsComponentState.atomFamily({ + recordIndexAllRecordIdsComponentSelector.selectorFamily({ instanceId, }), ); - return allRowIds.filter( - (rowId) => + return allRecordIds.filter( + (recordId) => get( isRowSelectedComponentFamilyState.atomFamily({ instanceId, - familyKey: rowId, + familyKey: recordId, }), ) === true, ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector.ts index 00fcba743dc1..e8b82ec9f2e2 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector.ts @@ -1,4 +1,4 @@ -import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState'; +import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; @@ -11,19 +11,19 @@ export const unselectedRowIdsComponentSelector = createComponentSelectorV2< get: ({ instanceId }) => ({ get }) => { - const rowIds = get( + const allRecordIds = get( // TODO: Working because instanceId is the same, but we're not in the same context, should be changed ! - recordIndexAllRowIdsComponentState.atomFamily({ + recordIndexAllRecordIdsComponentSelector.selectorFamily({ instanceId, }), ); - return rowIds.filter( - (rowId) => + return allRecordIds.filter( + (recordId) => get( isRowSelectedComponentFamilyState.atomFamily({ instanceId, - familyKey: rowId, + familyKey: recordId, }), ) === false, ); diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts index 8f08559d7e25..d3a45dbfbe08 100644 --- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts @@ -14,6 +14,7 @@ import { isDefined } from 'twenty-ui'; export function createComponentSelectorV2(options: { key: string; get: SelectorGetter; + set?: never; componentInstanceContext: ComponentInstanceStateContext | null; }): ComponentReadOnlySelectorV2; From 2795f455072ed7a6b06f25fb0fd33f6bccba9b9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Thu, 28 Nov 2024 14:49:11 +0100 Subject: [PATCH 03/21] feat: rename row ids by group into record ids by group --- .../record-board/components/RecordBoard.tsx | 13 +++++++------ .../hooks/useSetRecordBoardRecordIds.ts | 17 +++++++++-------- .../hooks/useSetRecordIdsForColumn.ts | 17 +++++++++-------- .../components/RecordBoardColumn.tsx | 12 ++++++------ .../RecordBoardColumnHeaderWrapper.tsx | 10 +++++----- .../hooks/useRecordGroupVisibility.ts | 15 ++++++++------- ...ndexRecordIdsByGroupComponentFamilyState.ts} | 4 ++-- .../recordIndexAllRecordIdsComponentSelector.ts | 8 ++++---- .../components/RecordTableRecordGroupRows.tsx | 8 ++++---- .../hooks/internal/useSetRecordTableData.ts | 17 +++++++++-------- ...TableRowIdsByGroupComponentFamilySelector.ts | 4 ++-- 11 files changed, 65 insertions(+), 60 deletions(-) rename packages/twenty-front/src/modules/object-record/record-index/states/{recordIndexRowIdsByGroupComponentFamilyState.ts => recordIndexRecordIdsByGroupComponentFamilyState.ts} (79%) diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx index 5414e1760510..897a9fd91a3f 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx @@ -16,7 +16,7 @@ import { RecordBoardComponentInstanceContext } from '@/object-record/record-boar import { getDraggedRecordPosition } from '@/object-record/record-board/utils/getDraggedRecordPosition'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector'; -import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope'; @@ -69,9 +69,10 @@ export const RecordBoard = () => { visibleRecordGroupIdsComponentSelector, ); - const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2( - recordIndexRowIdsByGroupComponentFamilyState, - ); + const recordIndexRecordIdsByGroupFamilyState = + useRecoilComponentCallbackStateV2( + recordIndexRecordIdsByGroupComponentFamilyState, + ); const recordIndexAllRecordIdsState = useRecoilComponentCallbackStateV2( recordIndexAllRecordIdsComponentSelector, @@ -137,7 +138,7 @@ export const RecordBoard = () => { const destinationRecordByGroupIds = getSnapshotValue( snapshot, - recordIndexRowIdsByGroupFamilyState(destinationRecordGroupId), + recordIndexRecordIdsByGroupFamilyState(destinationRecordGroupId), ); const otherRecordIdsInDestinationColumn = sourceRecordGroupId === destinationRecordGroupId @@ -172,7 +173,7 @@ export const RecordBoard = () => { }); }, [ - recordIndexRowIdsByGroupFamilyState, + recordIndexRecordIdsByGroupFamilyState, selectFieldMetadataItem, updateOneRecord, ], diff --git a/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordBoardRecordIds.ts b/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordBoardRecordIds.ts index 6b26b02aed35..60916cfea64f 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordBoardRecordIds.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordBoardRecordIds.ts @@ -3,7 +3,7 @@ import { useRecoilCallback } from 'recoil'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState'; import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector'; -import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { sortRecordsByPosition } from '@/object-record/utils/sortRecordsByPosition'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; @@ -21,10 +21,11 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => { recordBoardId, ); - const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2( - recordIndexRowIdsByGroupComponentFamilyState, - recordBoardId, - ); + const recordIndexRecordIdsByGroupFamilyState = + useRecoilComponentCallbackStateV2( + recordIndexRecordIdsByGroupComponentFamilyState, + recordBoardId, + ); const setRecordIds = useRecoilCallback( ({ set, snapshot }) => @@ -42,7 +43,7 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => { const existingRecordGroupRowIds = getSnapshotValue( snapshot, - recordIndexRowIdsByGroupFamilyState(recordGroupId), + recordIndexRecordIdsByGroupFamilyState(recordGroupId), ); const recordGroupFieldMetadata = getSnapshotValue( @@ -64,7 +65,7 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => { if (!isDeeplyEqual(existingRecordGroupRowIds, recordGroupRowIds)) { set( - recordIndexRowIdsByGroupFamilyState(recordGroupId), + recordIndexRecordIdsByGroupFamilyState(recordGroupId), recordGroupRowIds, ); } @@ -72,7 +73,7 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => { }, [ visibleRecordGroupIdsSelector, - recordIndexRowIdsByGroupFamilyState, + recordIndexRecordIdsByGroupFamilyState, recordGroupFieldMetadataState, ], ); diff --git a/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts b/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts index 958ba37471e3..35a0dda049df 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts @@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState'; -import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { sortRecordsByPosition } from '@/object-record/utils/sortRecordsByPosition'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; @@ -16,10 +16,11 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => { recordBoardId, ); - const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2( - recordIndexRowIdsByGroupComponentFamilyState, - recordBoardId, - ); + const recordIndexRecordIdsByGroupFamilyState = + useRecoilComponentCallbackStateV2( + recordIndexRecordIdsByGroupComponentFamilyState, + recordBoardId, + ); const setRecordIdsForColumn = useRecoilCallback( ({ set, snapshot }) => @@ -31,7 +32,7 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => { const existingRecordGroupRowIds = getSnapshotValue( snapshot, - recordIndexRowIdsByGroupFamilyState(currentRecordGroupId), + recordIndexRecordIdsByGroupFamilyState(currentRecordGroupId), ); const recordGroupFieldMetadata = getSnapshotValue( @@ -53,12 +54,12 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => { if (!isDeeplyEqual(existingRecordGroupRowIds, recordGroupRowIds)) { set( - recordIndexRowIdsByGroupFamilyState(currentRecordGroupId), + recordIndexRecordIdsByGroupFamilyState(currentRecordGroupId), recordGroupRowIds, ); } }, - [recordIndexRowIdsByGroupFamilyState, recordGroupFieldMetadataState], + [recordIndexRecordIdsByGroupFamilyState, recordGroupFieldMetadataState], ); return { diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx index 1d850a8507fe..c76d85c2f976 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx @@ -4,7 +4,7 @@ import { Droppable } from '@hello-pangea/dnd'; import { RecordBoardColumnCardsContainer } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer'; import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; -import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; import { useRecoilValue } from 'recoil'; @@ -31,8 +31,8 @@ export const RecordBoardColumn = ({ recordGroupDefinitionFamilyState(recordBoardColumnId), ); - const recordRowIdsByGroup = useRecoilComponentFamilyValueV2( - recordIndexRowIdsByGroupComponentFamilyState, + const recordIdsByGroup = useRecoilComponentFamilyValueV2( + recordIndexRecordIdsByGroupComponentFamilyState, recordBoardColumnId, ); @@ -44,9 +44,9 @@ export const RecordBoardColumn = ({ @@ -54,7 +54,7 @@ export const RecordBoardColumn = ({ )} diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderWrapper.tsx index 68de7adb566d..c6873baa3340 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderWrapper.tsx @@ -3,7 +3,7 @@ import { isDefined } from 'twenty-ui'; import { RecordBoardColumnHeader } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeader'; import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; -import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; import { useRecoilValue } from 'recoil'; @@ -18,8 +18,8 @@ export const RecordBoardColumnHeaderWrapper = ({ recordGroupDefinitionFamilyState(columnId), ); - const recordRowIdsByGroup = useRecoilComponentFamilyValueV2( - recordIndexRowIdsByGroupComponentFamilyState, + const recordIdsByGroup = useRecoilComponentFamilyValueV2( + recordIndexRecordIdsByGroupComponentFamilyState, columnId, ); @@ -32,8 +32,8 @@ export const RecordBoardColumnHeaderWrapper = ({ value={{ columnId, columnDefinition: recordGroupDefinition, - recordCount: recordRowIdsByGroup.length, - recordIds: recordRowIdsByGroup, + recordCount: recordIdsByGroup.length, + recordIds: recordIdsByGroup, }} > diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts index aa26edec35b9..734dc61c86c9 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts @@ -2,7 +2,7 @@ import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/s import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState'; import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition'; import { recordIndexRecordGroupHideComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupHideComponentState'; -import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; import { useSaveCurrentViewGroups } from '@/views/hooks/useSaveCurrentViewGroups'; @@ -22,10 +22,11 @@ export const useRecordGroupVisibility = ({ recordGroupIdsComponentState, ); - const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2( - recordIndexRowIdsByGroupComponentFamilyState, - viewBarId, - ); + const recordIndexRecordIdsByGroupFamilyState = + useRecoilComponentCallbackStateV2( + recordIndexRecordIdsByGroupComponentFamilyState, + viewBarId, + ); const objectOptionsDropdownRecordGroupHideState = useRecoilComponentCallbackStateV2(recordIndexRecordGroupHideComponentState); @@ -79,7 +80,7 @@ export const useRecordGroupVisibility = ({ const recordGroupRowIds = getSnapshotValue( snapshot, - recordIndexRowIdsByGroupFamilyState(recordGroupId), + recordIndexRecordIdsByGroupFamilyState(recordGroupId), ); if (recordGroupRowIds.length > 0) { @@ -107,7 +108,7 @@ export const useRecordGroupVisibility = ({ recordIndexRecordGroupIdsState, objectOptionsDropdownRecordGroupHideState, saveViewGroups, - recordIndexRowIdsByGroupFamilyState, + recordIndexRecordIdsByGroupFamilyState, ], ); diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState.ts similarity index 79% rename from packages/twenty-front/src/modules/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState.ts rename to packages/twenty-front/src/modules/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState.ts index fe35021c6eb5..e8b1aa1cd0ff 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState.ts @@ -2,9 +2,9 @@ import { RecordGroupDefinition } from '@/object-record/record-group/types/Record import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2'; import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; -export const recordIndexRowIdsByGroupComponentFamilyState = +export const recordIndexRecordIdsByGroupComponentFamilyState = createComponentFamilyStateV2({ - key: 'recordIndexRowIdsByGroupComponentFamilyState', + key: 'recordIndexRecordIdsByGroupComponentFamilyState', defaultValue: [], componentInstanceContext: ViewComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts index c7bab432b6c7..61aa25df7ecc 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts @@ -1,5 +1,5 @@ import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState'; -import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; @@ -26,7 +26,7 @@ export const recordIndexAllRecordIdsComponentSelector = if (recordGroupIds.length === 0) { return get( - recordIndexRowIdsByGroupComponentFamilyState.atomFamily({ + recordIndexRecordIdsByGroupComponentFamilyState.atomFamily({ instanceId, familyKey: defaultFamilyKey, }), @@ -36,7 +36,7 @@ export const recordIndexAllRecordIdsComponentSelector = return recordGroupIds.reduce( (acc, recordGroupId) => { const rowIds = get( - recordIndexRowIdsByGroupComponentFamilyState.atomFamily({ + recordIndexRecordIdsByGroupComponentFamilyState.atomFamily({ instanceId, familyKey: recordGroupId, }), @@ -51,7 +51,7 @@ export const recordIndexAllRecordIdsComponentSelector = ({ instanceId }) => ({ set }, recordIds) => set( - recordIndexRowIdsByGroupComponentFamilyState.atomFamily({ + recordIndexRecordIdsByGroupComponentFamilyState.atomFamily({ instanceId, familyKey: defaultFamilyKey, }), diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx index 2193a244178e..4718e64c9e60 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx @@ -1,5 +1,5 @@ import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId'; -import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow'; import { isRecordGroupTableSectionToggledComponentState } from '@/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState'; @@ -18,8 +18,8 @@ export const RecordTableRecordGroupRows = () => { recordIndexAllRecordIdsComponentSelector, ); - const recordGroupRowIds = useRecoilComponentFamilyValueV2( - recordIndexRowIdsByGroupComponentFamilyState, + const recordIdsByGroup = useRecoilComponentFamilyValueV2( + recordIndexRecordIdsByGroupComponentFamilyState, currentRecordGroupId, ); @@ -42,7 +42,7 @@ export const RecordTableRecordGroupRows = () => { return ( {isRecordGroupTableSectionToggled && - recordGroupRowIds.map((recordId) => { + recordIdsByGroup.map((recordId) => { const rowIndex = rowIndexMap.get(recordId); if (!isDefined(rowIndex)) { diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts index ac077fb3d441..dc09fd20aa1c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts @@ -1,6 +1,6 @@ import { useRecoilCallback } from 'recoil'; -import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState'; @@ -20,10 +20,11 @@ export const useSetRecordTableData = ({ recordTableId, onEntityCountChange, }: useSetRecordTableDataProps) => { - const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2( - recordIndexRowIdsByGroupComponentFamilyState, - recordTableId, - ); + const recordIndexRecordIdsByGroupFamilyState = + useRecoilComponentCallbackStateV2( + recordIndexRecordIdsByGroupComponentFamilyState, + recordTableId, + ); const recordIndexAllRecordIdsSelector = useRecoilComponentCallbackStateV2( recordIndexAllRecordIdsComponentSelector, @@ -65,7 +66,7 @@ export const useSetRecordTableData = ({ const currentRowIds = getSnapshotValue( snapshot, currentRecordGroupId - ? recordIndexRowIdsByGroupFamilyState(currentRecordGroupId) + ? recordIndexRecordIdsByGroupFamilyState(currentRecordGroupId) : recordIndexAllRecordIdsSelector, ); @@ -85,7 +86,7 @@ export const useSetRecordTableData = ({ if (isDefined(currentRecordGroupId)) { set( - recordIndexRowIdsByGroupFamilyState(currentRecordGroupId), + recordIndexRecordIdsByGroupFamilyState(currentRecordGroupId), recordIds, ); } else { @@ -96,7 +97,7 @@ export const useSetRecordTableData = ({ } }, [ - recordIndexRowIdsByGroupFamilyState, + recordIndexRecordIdsByGroupFamilyState, recordIndexAllRecordIdsSelector, hasUserSelectedAllRowsState, onEntityCountChange, diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector.ts index 9e8f4d85836b..4c6828a21f9c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector.ts @@ -1,5 +1,5 @@ import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition'; -import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState'; +import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { createComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilySelectorV2'; @@ -11,7 +11,7 @@ export const numberOfTableRowIdsByGroupComponentFamilySelector = ({ instanceId, familyKey }) => ({ get }) => get( - recordIndexRowIdsByGroupComponentFamilyState.atomFamily({ + recordIndexRecordIdsByGroupComponentFamilyState.atomFamily({ instanceId, familyKey, }), From 9aaafb83d8da34b120e57a15c56dad8126d59901 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Thu, 28 Nov 2024 14:53:18 +0100 Subject: [PATCH 04/21] fix: remove console.log --- .../components/RecordTableBodyRecordGroupDragDropContext.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx index a8d7ed8c409d..1addcd56e2b1 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx @@ -76,8 +76,6 @@ export const RecordTableBodyRecordGroupDragDropContext = ({ return; } - console.log('DRAP - DROP: ', result, recordGroup); - const computeResult = computeNewRowPosition(result, tableAllRecordIds); if (!isDefined(computeResult)) { From 1f0d3f7c84b5fdccc41716fc834f4bb495e41996 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Thu, 28 Nov 2024 15:17:03 +0100 Subject: [PATCH 05/21] fix: hardcoded record group default id --- .../selectors/recordIndexAllRecordIdsComponentSelector.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts index 61aa25df7ecc..eb4239357fc4 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts @@ -3,13 +3,12 @@ import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; -import { v4 } from 'uuid'; /** * Do not use this key outside of this file. * This is a temporary key to store the record ids for the default record group. */ -const defaultFamilyKey = v4(); +const defaultFamilyKey = 'record-group-default-id'; export const recordIndexAllRecordIdsComponentSelector = createComponentSelectorV2({ From 932233ab31cd561d47a27e02c461d605d393bb86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Thu, 28 Nov 2024 15:19:51 +0100 Subject: [PATCH 06/21] fix: remove empty comment --- .../record-table-body/components/RecordTableRecordGroupsBody.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx index 518987efa5a4..55b888e3d2d1 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx @@ -29,7 +29,6 @@ export const RecordTableRecordGroupsBody = () => { return ( - {/** */} From b851e2eaa409b59922bf7d5ff46f91b39b61158f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Thu, 28 Nov 2024 15:22:20 +0100 Subject: [PATCH 07/21] fix: use theme animation duration --- .../components/RecordTableRecordGroupSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 558cc67f1737..2fda9694df1b 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 @@ -83,7 +83,7 @@ export const RecordTableRecordGroupSection = () => { Date: Thu, 28 Nov 2024 15:26:28 +0100 Subject: [PATCH 08/21] fix: remove number of table rows selector --- .../RecordTableRecordGroupSection.tsx | 8 ++++---- ...bleRowIdsByGroupComponentFamilySelector.ts | 19 ------------------- 2 files changed, 4 insertions(+), 23 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector.ts 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 2fda9694df1b..6d7b5b163254 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 @@ -7,8 +7,8 @@ import { IconChevronUp, isDefined, Tag } from 'twenty-ui'; import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; import { RecordGroupDefinitionType } from '@/object-record/record-group/types/RecordGroupDefinition'; +import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { isRecordGroupTableSectionToggledComponentState } from '@/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState'; -import { numberOfTableRowIdsByGroupComponentFamilySelector } from '@/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector'; import { numberOfvisibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/numberOfVisibleTableColumnComponentSelector'; import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyStateV2'; import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; @@ -52,8 +52,8 @@ export const RecordTableRecordGroupSection = () => { numberOfvisibleTableColumnsComponentSelector, ); - const numberOfRows = useRecoilComponentFamilyValueV2( - numberOfTableRowIdsByGroupComponentFamilySelector, + const recordIdsByGroup = useRecoilComponentFamilyValueV2( + recordIndexRecordIdsByGroupComponentFamilyState, currentRecordGroupId, ); @@ -106,7 +106,7 @@ export const RecordTableRecordGroupSection = () => { text={recordGroup.title} weight="medium" /> - {numberOfRows} + {recordIdsByGroup.length} diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector.ts deleted file mode 100644 index 4c6828a21f9c..000000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableRowIdsByGroupComponentFamilySelector.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition'; -import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; -import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; -import { createComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilySelectorV2'; - -export const numberOfTableRowIdsByGroupComponentFamilySelector = - createComponentFamilySelectorV2({ - key: 'numberOfTableRowIdsByGroupComponentFamilySelector', - componentInstanceContext: RecordTableComponentInstanceContext, - get: - ({ instanceId, familyKey }) => - ({ get }) => - get( - recordIndexRecordIdsByGroupComponentFamilyState.atomFamily({ - instanceId, - familyKey, - }), - ).length, - }); From 61b1bfada10ca6bb92926eab2bc382c0a0cb3289 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Thu, 28 Nov 2024 15:32:19 +0100 Subject: [PATCH 09/21] fix: remove number of visible table column selector --- .../RecordTableRecordGroupSection.tsx | 8 ++++---- ...berOfVisibleTableColumnComponentSelector.ts | 18 ------------------ 2 files changed, 4 insertions(+), 22 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfVisibleTableColumnComponentSelector.ts 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 6d7b5b163254..057ae383cc52 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 @@ -9,7 +9,7 @@ import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/s import { RecordGroupDefinitionType } from '@/object-record/record-group/types/RecordGroupDefinition'; import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { isRecordGroupTableSectionToggledComponentState } from '@/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState'; -import { numberOfvisibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/numberOfVisibleTableColumnComponentSelector'; +import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector'; import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyStateV2'; import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; @@ -48,8 +48,8 @@ export const RecordTableRecordGroupSection = () => { const currentRecordGroupId = useCurrentRecordGroupId(); - const numberOfVisibleColumns = useRecoilComponentValueV2( - numberOfvisibleTableColumnsComponentSelector, + const visibleColumns = useRecoilComponentValueV2( + visibleTableColumnsComponentSelector, ); const recordIdsByGroup = useRecoilComponentFamilyValueV2( @@ -91,7 +91,7 @@ export const RecordTableRecordGroupSection = () => { - + - ({ get }) => { - const columns = get( - visibleTableColumnsComponentSelector.selectorFamily({ instanceId }), - ); - - return columns.length; - }, - }); From 36d3516b30b7ffed32f128415f0d0a27811cd064 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Thu, 28 Nov 2024 15:40:26 +0100 Subject: [PATCH 10/21] fix: rename drag and drop context into drag and drop context provider --- ...ntext.tsx => RecordTableBodyDragDropContextProvider.tsx} | 2 +- ...> RecordTableBodyRecordGroupDragDropContextProvider.tsx} | 2 +- .../components/RecordTableNoRecordGroupBody.tsx | 6 +++--- .../components/RecordTableRecordGroupsBody.tsx | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) rename packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/{RecordTableBodyDragDropContext.tsx => RecordTableBodyDragDropContextProvider.tsx} (97%) rename packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/{RecordTableBodyRecordGroupDragDropContext.tsx => RecordTableBodyRecordGroupDragDropContextProvider.tsx} (98%) diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContextProvider.tsx similarity index 97% rename from packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext.tsx rename to packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContextProvider.tsx index 3f1bef92c582..4c5575fd00b9 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContextProvider.tsx @@ -11,7 +11,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/ import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; import { isDefined } from '~/utils/isDefined'; -export const RecordTableBodyDragDropContext = ({ +export const RecordTableBodyDragDropContextProvider = ({ children, }: { children: ReactNode; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContextProvider.tsx similarity index 98% rename from packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx rename to packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContextProvider.tsx index 1addcd56e2b1..5aaa38077673 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContextProvider.tsx @@ -13,7 +13,7 @@ import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; import { isDefined } from '~/utils/isDefined'; -export const RecordTableBodyRecordGroupDragDropContext = ({ +export const RecordTableBodyRecordGroupDragDropContextProvider = ({ children, }: { children: ReactNode; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableNoRecordGroupBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableNoRecordGroupBody.tsx index 4fcbea02fa69..47e7e5f8f171 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableNoRecordGroupBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableNoRecordGroupBody.tsx @@ -1,6 +1,6 @@ import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { RecordTableNoRecordGroupRows } from '@/object-record/record-table/components/RecordTableNoRecordGroupRows'; -import { RecordTableBodyDragDropContext } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext'; +import { RecordTableBodyDragDropContextProvider } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContextProvider'; import { RecordTableBodyDroppable } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppable'; import { RecordTableBodyLoading } from '@/object-record/record-table/record-table-body/components/RecordTableBodyLoading'; import { RecordTablePendingRow } from '@/object-record/record-table/record-table-row/components/RecordTablePendingRow'; @@ -21,11 +21,11 @@ export const RecordTableNoRecordGroupBody = () => { } return ( - + - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx index 55b888e3d2d1..e057d2cbd64a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx @@ -4,7 +4,7 @@ import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record import { RecordTableRecordGroupRows } from '@/object-record/record-table/components/RecordTableRecordGroupRows'; import { RecordTableBodyDroppable } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppable'; import { RecordTableBodyLoading } from '@/object-record/record-table/record-table-body/components/RecordTableBodyLoading'; -import { RecordTableBodyRecordGroupDragDropContext } from '@/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContext'; +import { RecordTableBodyRecordGroupDragDropContextProvider } from '@/object-record/record-table/record-table-body/components/RecordTableBodyRecordGroupDragDropContextProvider'; import { RecordTablePendingRow } from '@/object-record/record-table/record-table-row/components/RecordTablePendingRow'; import { RecordTableRecordGroupSection } from '@/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection'; import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState'; @@ -28,7 +28,7 @@ export const RecordTableRecordGroupsBody = () => { } return ( - + @@ -43,6 +43,6 @@ export const RecordTableRecordGroupsBody = () => { ))} - + ); }; From cb27ac98325d9a4d0ce66f7a21c55d850192d0be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Thu, 28 Nov 2024 16:57:32 +0100 Subject: [PATCH 11/21] fix: apollo update all the caches when adding a value --- .../object-record/hooks/useCreateOneRecord.ts | 10 +++- .../hooks/useUpsertRecord.ts | 7 +++ .../utils/addDefaultValueRecordInput.ts | 46 +++++++++++++++++++ 3 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/utils/addDefaultValueRecordInput.ts diff --git a/packages/twenty-front/src/modules/object-record/hooks/useCreateOneRecord.ts b/packages/twenty-front/src/modules/object-record/hooks/useCreateOneRecord.ts index 73c9cd9897d6..a4cdedd3849b 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useCreateOneRecord.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useCreateOneRecord.ts @@ -13,6 +13,7 @@ import { RecordGqlOperationGqlRecordFields } from '@/object-record/graphql/types import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields'; import { useCreateOneRecordMutation } from '@/object-record/hooks/useCreateOneRecordMutation'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; +import { addDefaultValueRecordInput } from '@/object-record/utils/addDefaultValueRecordInput'; import { getCreateOneRecordMutationResponseField } from '@/object-record/utils/getCreateOneRecordMutationResponseField'; import { sanitizeRecordInput } from '@/object-record/utils/sanitizeRecordInput'; import { isDefined } from '~/utils/isDefined'; @@ -60,16 +61,21 @@ export const useCreateOneRecord = < const idForCreation = input.id ?? v4(); + const inputWithDefaultValues = addDefaultValueRecordInput({ + objectMetadataItem, + recordInput: input, + }); + const sanitizedInput = { ...sanitizeRecordInput({ objectMetadataItem, - recordInput: input, + recordInput: inputWithDefaultValues, }), id: idForCreation, }; const recordCreatedInCache = createOneRecordInCache({ - ...input, + ...inputWithDefaultValues, id: idForCreation, __typename: getObjectTypename(objectMetadataItem.nameSingular), }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useUpsertRecord.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useUpsertRecord.ts index d1d454f93603..083f244fc58d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useUpsertRecord.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useUpsertRecord.ts @@ -4,10 +4,12 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem'; import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord'; import { recordFieldInputDraftValueComponentSelector } from '@/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector'; +import { hasRecordGroupsComponentSelector } from '@/object-record/record-group/states/selectors/hasRecordGroupsComponentSelector'; import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState'; import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { extractComponentSelector } from '@/ui/utilities/state/component-state/utils/extractComponentSelector'; import { isDefined } from '~/utils/isDefined'; @@ -18,8 +20,13 @@ export const useUpsertRecord = ({ objectNameSingular: string; recordTableId: string; }) => { + const hasRecordGroups = useRecoilComponentValueV2( + hasRecordGroupsComponentSelector, + ); + const { createOneRecord } = useCreateOneRecord({ objectNameSingular, + shouldMatchRootQueryFilter: hasRecordGroups, }); const recordTablePendingRecordIdState = useRecoilComponentCallbackStateV2( diff --git a/packages/twenty-front/src/modules/object-record/utils/addDefaultValueRecordInput.ts b/packages/twenty-front/src/modules/object-record/utils/addDefaultValueRecordInput.ts new file mode 100644 index 000000000000..88b5be284847 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/utils/addDefaultValueRecordInput.ts @@ -0,0 +1,46 @@ +import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; +import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation'; +import { ObjectRecord } from '@/object-record/types/ObjectRecord'; +import { isDefined } from '~/utils/isDefined'; + +export const addDefaultValueRecordInput = ({ + objectMetadataItem, + recordInput, +}: { + objectMetadataItem: ObjectMetadataItem; + recordInput: Partial; +}) => { + for (const fieldMetadataItem of objectMetadataItem.fields) { + if (isDefined(recordInput[fieldMetadataItem.name])) { + continue; + } + + if (isFieldRelation(fieldMetadataItem)) { + continue; + } + + const defaultValue = fieldMetadataItem.defaultValue; + + if (!isDefined(defaultValue)) { + continue; + } + + if (fieldMetadataItem.name === 'createdBy') { + continue; + } + + if (typeof defaultValue === 'string') { + if (/^'.*'$/.test(defaultValue)) { + recordInput[fieldMetadataItem.name] = defaultValue.slice(1, -1); + } + } else if (Array.isArray(defaultValue)) { + recordInput[fieldMetadataItem.name] = [...defaultValue]; + } else if (typeof defaultValue === 'object' && defaultValue !== null) { + recordInput[fieldMetadataItem.name] = { ...defaultValue }; + } else { + recordInput[fieldMetadataItem.name] = defaultValue; + } + } + + return recordInput; +}; From 4213915ed1c222f87dc713418eed3754b833ad94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Fri, 29 Nov 2024 11:31:12 +0100 Subject: [PATCH 12/21] fix: reset group by not working properly --- .../record-group/hooks/useSetRecordGroup.ts | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useSetRecordGroup.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useSetRecordGroup.ts index d84e393a08c7..7a0a81eece62 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/hooks/useSetRecordGroup.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/hooks/useSetRecordGroup.ts @@ -26,18 +26,16 @@ export const useSetRecordGroup = (viewId?: string) => { return useRecoilCallback( ({ snapshot, set }) => (recordGroups: RecordGroupDefinition[]) => { - if (recordGroups.length === 0) { - return; - } - const currentRecordGroupId = getSnapshotValue( snapshot, recordIndexRecordGroupIdsState, ); - const fieldMetadataId = recordGroups[0].fieldMetadataId; - const fieldMetadata = objectMetadataItem.fields.find( - (field) => field.id === fieldMetadataId, - ); + const fieldMetadataId = recordGroups?.[0]?.fieldMetadataId; + const fieldMetadata = fieldMetadataId + ? objectMetadataItem.fields.find( + (field) => field.id === fieldMetadataId, + ) + : undefined; const currentFieldMetadata = getSnapshotValue( snapshot, recordGroupFieldMetadataState, @@ -67,6 +65,16 @@ export const useSetRecordGroup = (viewId?: string) => { const recordGroupIds = recordGroups.map(({ id }) => id); + // Get ids that has been removed between the current and new record groups + const removedRecordGroupIds = currentRecordGroupId.filter( + (id) => !recordGroupIds.includes(id), + ); + + // Remove the record groups that has been removed + removedRecordGroupIds.forEach((id) => { + set(recordGroupDefinitionFamilyState(id), undefined); + }); + if (isDeeplyEqual(currentRecordGroupId, recordGroupIds)) { return; } From 70080f775fa87f734eed9a826b2bf2bf11207e19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Fri, 29 Nov 2024 11:35:43 +0100 Subject: [PATCH 13/21] fix: close dropdown when choosing a field --- ...tOptionsDropdownRecordGroupFieldsContent.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx index 238442058285..3103be44566c 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx @@ -9,6 +9,7 @@ import { import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular'; +import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { StyledInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect'; import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown'; import { useSearchRecordGroupField } from '@/object-record/object-options-dropdown/hooks/useSearchRecordGroupField'; @@ -66,6 +67,16 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => { navigationMemorizedUrlState, ); + const onResetRecordGroupField = () => { + resetRecordGroupField(); + closeDropdown(); + }; + + const onRecordGroupFieldChange = (fieldMetadataItem: FieldMetadataItem) => { + handleRecordGroupFieldChange(fieldMetadataItem); + closeDropdown(); + }; + useEffect(() => { if ( currentContentId === 'hiddenRecordGroups' && @@ -90,13 +101,11 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => { onChange={(event) => setRecordGroupFieldSearchInput(event.target.value)} /> - + {filteredRecordGroupFieldMetadataItems.map((fieldMetadataItem) => ( { - handleRecordGroupFieldChange(fieldMetadataItem); - }} + onClick={() => onRecordGroupFieldChange(fieldMetadataItem)} LeftIcon={getIcon(fieldMetadataItem.icon)} text={fieldMetadataItem.label} /> From 911a48de3055f12e142044f7f21d8004021bec0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Fri, 29 Nov 2024 11:54:54 +0100 Subject: [PATCH 14/21] fix: change menu item to menu item select for selected group by field --- ...ctOptionsDropdownRecordGroupFieldsContent.tsx | 16 ++++++++++++++-- .../menu-item/components/MenuItemSelect.tsx | 2 +- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx index 3103be44566c..452681ab5be9 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx @@ -3,6 +3,7 @@ import { IconChevronLeft, IconSettings, MenuItem, + MenuItemSelect, UndecoratedLink, useIcons, } from 'twenty-ui'; @@ -13,6 +14,7 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { StyledInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect'; import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown'; import { useSearchRecordGroupField } from '@/object-record/object-options-dropdown/hooks/useSearchRecordGroupField'; +import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState'; import { hiddenRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector'; import { useHandleRecordGroupField } from '@/object-record/record-index/hooks/useHandleRecordGroupField'; import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; @@ -24,6 +26,7 @@ import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMe import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useLocation } from 'react-router-dom'; import { useSetRecoilState } from 'recoil'; +import { isDefined } from '~/utils/isDefined'; export const ObjectOptionsDropdownRecordGroupFieldsContent = () => { const { getIcon } = useIcons(); @@ -44,6 +47,10 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => { hiddenRecordGroupIdsComponentSelector, ); + const recordGroupFieldMetadataItem = useRecoilComponentValueV2( + recordGroupFieldMetadataComponentState, + ); + const { recordGroupFieldSearchInput, setRecordGroupFieldSearchInput, @@ -101,10 +108,15 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => { onChange={(event) => setRecordGroupFieldSearchInput(event.target.value)} /> - + {filteredRecordGroupFieldMetadataItems.map((fieldMetadataItem) => ( - onRecordGroupFieldChange(fieldMetadataItem)} LeftIcon={getIcon(fieldMetadataItem.icon)} text={fieldMetadataItem.label} diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx index 3c91c42fbd4a..a90fe43890d4 100644 --- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx @@ -38,7 +38,7 @@ export const StyledMenuItemSelect = styled(StyledMenuItemBase)<{ `; type MenuItemSelectProps = { - LeftIcon: IconComponent | null | undefined; + LeftIcon?: IconComponent | null | undefined; selected: boolean; text: string; className?: string; From 364d514b13d22a34ae4396dbde23c0d840ed94db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Fri, 29 Nov 2024 12:04:44 +0100 Subject: [PATCH 15/21] fix: nullable select not shown properly --- .../record-index/hooks/useLoadRecordIndexTable.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts index d705ef14bc97..ccfec9af3a97 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts @@ -61,6 +61,10 @@ export const useFindManyParams = ( ); } + if (!isDefined(currentRecordGroupDefinition.value)) { + return { [fieldMetadataItem.name]: { is: 'NULL' } }; + } + return { [fieldMetadataItem.name]: { eq: currentRecordGroupDefinition.value, @@ -68,8 +72,6 @@ export const useFindManyParams = ( }; } - // TODO: Handle case when value is nullable - return {}; }, [objectMetadataItem.fields, currentRecordGroupDefinition]); From 5e21604293c633ce3708423a108441cdd3d51cd2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Fri, 29 Nov 2024 12:06:24 +0100 Subject: [PATCH 16/21] fix: allow to reset record group field metadata --- .../object-record/record-group/hooks/useSetRecordGroup.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useSetRecordGroup.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useSetRecordGroup.ts index 7a0a81eece62..934208dc5c82 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/hooks/useSetRecordGroup.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/hooks/useSetRecordGroup.ts @@ -8,7 +8,6 @@ import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; import { useContext } from 'react'; import { useRecoilCallback } from 'recoil'; import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; -import { isDefined } from '~/utils/isDefined'; export const useSetRecordGroup = (viewId?: string) => { const { objectMetadataItem } = useContext(RecordIndexRootPropsContext); @@ -42,10 +41,7 @@ export const useSetRecordGroup = (viewId?: string) => { ); // Set the field metadata linked to the record groups - if ( - isDefined(fieldMetadata) && - !isDeeplyEqual(fieldMetadata, currentFieldMetadata) - ) { + if (!isDeeplyEqual(fieldMetadata, currentFieldMetadata)) { set(recordGroupFieldMetadataState, fieldMetadata); } From 85d63959a08f14716ae224c51850e88de150faf5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Fri, 29 Nov 2024 12:10:44 +0100 Subject: [PATCH 17/21] fix: remove animation debug --- .../components/RecordTableRecordGroupRows.tsx | 46 +++++++------------ .../components/RecordTableRow.tsx | 13 +++--- .../components/RecordTableRowWrapper.tsx | 21 ++++----- 3 files changed, 31 insertions(+), 49 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx index 4718e64c9e60..a5487dcfeaa9 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx @@ -5,12 +5,9 @@ import { RecordTableRow } from '@/object-record/record-table/record-table-row/co import { isRecordGroupTableSectionToggledComponentState } from '@/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState'; import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { AnimatePresence, motion } from 'framer-motion'; import { useMemo } from 'react'; import { isDefined } from '~/utils/isDefined'; -const MotionRecordTableRow = motion(RecordTableRow); - export const RecordTableRecordGroupRows = () => { const currentRecordGroupId = useCurrentRecordGroupId(); @@ -33,32 +30,23 @@ export const RecordTableRecordGroupRows = () => { [allRecordIds], ); - // TODO: Animation is not working, find a way to make it works - const variants = { - hidden: { height: 0, opacity: 0 }, - visible: { height: 'auto', opacity: 1 }, - }; - return ( - - {isRecordGroupTableSectionToggled && - recordIdsByGroup.map((recordId) => { - const rowIndex = rowIndexMap.get(recordId); - - if (!isDefined(rowIndex)) { - return null; - } - - return ( - - ); - })} - + isRecordGroupTableSectionToggled && + recordIdsByGroup.map((recordId) => { + const rowIndex = rowIndexMap.get(recordId); + + if (!isDefined(rowIndex)) { + return null; + } + + return ( + + ); + }) ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx index ffffcb6ba248..382fdc230372 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx @@ -4,7 +4,6 @@ import { RecordTableCellGrip } from '@/object-record/record-table/record-table-c import { RecordTableLastEmptyCell } from '@/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell'; import { RecordTableCells } from '@/object-record/record-table/record-table-row/components/RecordTableCells'; import { RecordTableRowWrapper } from '@/object-record/record-table/record-table-row/components/RecordTableRowWrapper'; -import { forwardRef } from 'react'; type RecordTableRowProps = { recordId: string; @@ -12,13 +11,13 @@ type RecordTableRowProps = { isPendingRow?: boolean; }; -export const RecordTableRow = forwardRef< - HTMLTableRowElement, - RecordTableRowProps ->(({ recordId, rowIndex, isPendingRow }, ref) => { +export const RecordTableRow = ({ + recordId, + rowIndex, + isPendingRow, +}: RecordTableRowProps) => { return ( ); -}); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx index 6a7bb3daef1c..940398243e1c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx @@ -1,6 +1,6 @@ import { useTheme } from '@emotion/react'; import { Draggable } from '@hello-pangea/dnd'; -import { forwardRef, ReactNode, useContext, useEffect, useRef } from 'react'; +import { ReactNode, useContext, useEffect, useRef } from 'react'; import { useInView } from 'react-intersection-observer'; import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage'; @@ -13,7 +13,6 @@ import { tableCellWidthsComponentState } from '@/object-record/record-table/stat import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts'; import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; -import { isDefined } from '~/utils/isDefined'; type RecordTableRowWrapperProps = { recordId: string; @@ -22,10 +21,12 @@ type RecordTableRowWrapperProps = { children: ReactNode; }; -export const RecordTableRowWrapper = forwardRef< - HTMLTableRowElement, - RecordTableRowWrapperProps ->(({ recordId, rowIndex, isPendingRow, children }, ref) => { +export const RecordTableRowWrapper = ({ + recordId, + rowIndex, + isPendingRow, + children, +}: RecordTableRowWrapperProps) => { const trRef = useRef(null); const { objectMetadataItem } = useContext(RecordTableContext); @@ -83,12 +84,6 @@ export const RecordTableRowWrapper = forwardRef< trRef.current = node; elementRef(node); draggableProvided.innerRef(node); - - if (typeof ref === 'function') { - ref(node); - } else if (isDefined(ref)) { - ref.current = node; - } }} // eslint-disable-next-line react/jsx-props-no-spreading {...draggableProvided.draggableProps} @@ -127,4 +122,4 @@ export const RecordTableRowWrapper = forwardRef< )} ); -}); +}; From f9b0bff9e3e8c4d737d16f7f4dd8f89bef296e6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Fri, 29 Nov 2024 12:12:04 +0100 Subject: [PATCH 18/21] fix: remove addDefaultValueRecordInput --- .../object-record/hooks/useCreateOneRecord.ts | 10 +--- .../utils/addDefaultValueRecordInput.ts | 46 ------------------- 2 files changed, 2 insertions(+), 54 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/utils/addDefaultValueRecordInput.ts diff --git a/packages/twenty-front/src/modules/object-record/hooks/useCreateOneRecord.ts b/packages/twenty-front/src/modules/object-record/hooks/useCreateOneRecord.ts index a4cdedd3849b..73c9cd9897d6 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useCreateOneRecord.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useCreateOneRecord.ts @@ -13,7 +13,6 @@ import { RecordGqlOperationGqlRecordFields } from '@/object-record/graphql/types import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields'; import { useCreateOneRecordMutation } from '@/object-record/hooks/useCreateOneRecordMutation'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; -import { addDefaultValueRecordInput } from '@/object-record/utils/addDefaultValueRecordInput'; import { getCreateOneRecordMutationResponseField } from '@/object-record/utils/getCreateOneRecordMutationResponseField'; import { sanitizeRecordInput } from '@/object-record/utils/sanitizeRecordInput'; import { isDefined } from '~/utils/isDefined'; @@ -61,21 +60,16 @@ export const useCreateOneRecord = < const idForCreation = input.id ?? v4(); - const inputWithDefaultValues = addDefaultValueRecordInput({ - objectMetadataItem, - recordInput: input, - }); - const sanitizedInput = { ...sanitizeRecordInput({ objectMetadataItem, - recordInput: inputWithDefaultValues, + recordInput: input, }), id: idForCreation, }; const recordCreatedInCache = createOneRecordInCache({ - ...inputWithDefaultValues, + ...input, id: idForCreation, __typename: getObjectTypename(objectMetadataItem.nameSingular), }); diff --git a/packages/twenty-front/src/modules/object-record/utils/addDefaultValueRecordInput.ts b/packages/twenty-front/src/modules/object-record/utils/addDefaultValueRecordInput.ts deleted file mode 100644 index 88b5be284847..000000000000 --- a/packages/twenty-front/src/modules/object-record/utils/addDefaultValueRecordInput.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; -import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation'; -import { ObjectRecord } from '@/object-record/types/ObjectRecord'; -import { isDefined } from '~/utils/isDefined'; - -export const addDefaultValueRecordInput = ({ - objectMetadataItem, - recordInput, -}: { - objectMetadataItem: ObjectMetadataItem; - recordInput: Partial; -}) => { - for (const fieldMetadataItem of objectMetadataItem.fields) { - if (isDefined(recordInput[fieldMetadataItem.name])) { - continue; - } - - if (isFieldRelation(fieldMetadataItem)) { - continue; - } - - const defaultValue = fieldMetadataItem.defaultValue; - - if (!isDefined(defaultValue)) { - continue; - } - - if (fieldMetadataItem.name === 'createdBy') { - continue; - } - - if (typeof defaultValue === 'string') { - if (/^'.*'$/.test(defaultValue)) { - recordInput[fieldMetadataItem.name] = defaultValue.slice(1, -1); - } - } else if (Array.isArray(defaultValue)) { - recordInput[fieldMetadataItem.name] = [...defaultValue]; - } else if (typeof defaultValue === 'object' && defaultValue !== null) { - recordInput[fieldMetadataItem.name] = { ...defaultValue }; - } else { - recordInput[fieldMetadataItem.name] = defaultValue; - } - } - - return recordInput; -}; From 9d2254d61cb9641fcd9a6d5f95824c6f8b90d25c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Fri, 29 Nov 2024 12:13:50 +0100 Subject: [PATCH 19/21] fix: naming handle instead of on --- ...ptionsDropdownRecordGroupFieldsContent.tsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx index 452681ab5be9..d5fa0be6844f 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx @@ -57,10 +57,12 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => { filteredRecordGroupFieldMetadataItems, } = useSearchRecordGroupField(); - const { handleRecordGroupFieldChange, resetRecordGroupField } = - useHandleRecordGroupField({ - viewBarComponentId: recordIndexId, - }); + const { + handleRecordGroupFieldChange: setRecordGroupField, + resetRecordGroupField, + } = useHandleRecordGroupField({ + viewBarComponentId: recordIndexId, + }); const newFieldSettingsUrl = getSettingsPagePath( SettingsPath.ObjectNewFieldSelect, @@ -74,13 +76,15 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => { navigationMemorizedUrlState, ); - const onResetRecordGroupField = () => { + const handleResetRecordGroupField = () => { resetRecordGroupField(); closeDropdown(); }; - const onRecordGroupFieldChange = (fieldMetadataItem: FieldMetadataItem) => { - handleRecordGroupFieldChange(fieldMetadataItem); + const handleRecordGroupFieldChange = ( + fieldMetadataItem: FieldMetadataItem, + ) => { + setRecordGroupField(fieldMetadataItem); closeDropdown(); }; @@ -111,13 +115,13 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => { {filteredRecordGroupFieldMetadataItems.map((fieldMetadataItem) => ( onRecordGroupFieldChange(fieldMetadataItem)} + onClick={() => handleRecordGroupFieldChange(fieldMetadataItem)} LeftIcon={getIcon(fieldMetadataItem.icon)} text={fieldMetadataItem.label} /> From 4bc501382128651f2dd218c8eeae71dde4a1e587 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Fri, 29 Nov 2024 12:19:55 +0100 Subject: [PATCH 20/21] fix: td with aria-hidden true --- .../components/RecordTableRecordGroupSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 057ae383cc52..4e3058011d54 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 @@ -79,7 +79,7 @@ export const RecordTableRecordGroupSection = () => { return ( - + Date: Fri, 29 Nov 2024 12:35:02 +0100 Subject: [PATCH 21/21] fix: tests --- .../hooks/__tests__/useUpsertRecord.test.tsx | 36 +++++++++++-------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useUpsertRecord.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useUpsertRecord.test.tsx index da537f8012f6..779061ecd9c0 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useUpsertRecord.test.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useUpsertRecord.test.tsx @@ -4,12 +4,14 @@ import { RecoilRoot } from 'recoil'; import { createState } from 'twenty-ui'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; +import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord'; import { textfieldDefinition } from '@/object-record/record-field/__mocks__/fieldDefinitions'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { useUpsertRecord } from '@/object-record/record-table/record-table-cell/hooks/useUpsertRecord'; import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope'; +import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; const draftValue = 'updated Name'; @@ -62,22 +64,26 @@ const Wrapper = ({ snapshot.set(draftValueState, draftValueMockedValue); }} > - - {children} - + + {children} + + );