From 900545a9b2c37e4e269bab663f3f49a17c0f6293 Mon Sep 17 00:00:00 2001 From: khuddite Date: Wed, 20 Nov 2024 10:51:12 -0500 Subject: [PATCH 1/2] Treat no value view group as normal & enable hide/dnd for no value --- .../hooks/useRecordGroupActions.ts | 21 +- .../ViewGroupsVisibilityDropdownSection.tsx | 184 +++++++----------- .../mapViewGroupsToRecordGroupDefinitions.ts | 31 ++- 3 files changed, 92 insertions(+), 144 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts index 2fa75b470fdb..15fc528173ce 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts @@ -5,7 +5,6 @@ import { RecordBoardColumnContext } from '@/object-record/record-board/record-bo import { useRecordGroups } from '@/object-record/record-group/hooks/useRecordGroups'; import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/useRecordGroupVisibility'; import { RecordGroupAction } from '@/object-record/record-group/types/RecordGroupActions'; -import { RecordGroupDefinitionType } from '@/object-record/record-group/types/RecordGroupDefinition'; import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext'; import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; import { useCallback, useContext, useMemo } from 'react'; @@ -73,17 +72,15 @@ export const useRecordGroupActions = () => { navigateToSelectSettings(); }, }, - recordGroupDefinition.type !== RecordGroupDefinitionType.NoValue - ? { - id: 'hide', - label: 'Hide', - icon: IconEyeOff, - position: 1, - callback: () => { - handleRecordGroupVisibilityChange(recordGroupDefinition); - }, - } - : undefined, + { + id: 'hide', + label: 'Hide', + icon: IconEyeOff, + position: 1, + callback: () => { + handleRecordGroupVisibilityChange(recordGroupDefinition); + }, + }, ].filter(isDefined), [ handleRecordGroupVisibilityChange, diff --git a/packages/twenty-front/src/modules/views/components/ViewGroupsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewGroupsVisibilityDropdownSection.tsx index 795639f51c43..7560886bb050 100644 --- a/packages/twenty-front/src/modules/views/components/ViewGroupsVisibilityDropdownSection.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewGroupsVisibilityDropdownSection.tsx @@ -50,15 +50,6 @@ export const ViewGroupsVisibilityDropdownSection = ({ return iconButtons.length ? iconButtons : undefined; }; - const noValueViewGroups = - viewGroups.filter( - (viewGroup) => viewGroup.type === RecordGroupDefinitionType.NoValue, - ) ?? []; - - const viewGroupsWithoutNoValueGroups = viewGroups.filter( - (viewGroup) => viewGroup.type !== RecordGroupDefinitionType.NoValue, - ); - const ref = useRef(null); return ( @@ -70,119 +61,86 @@ export const ViewGroupsVisibilityDropdownSection = ({ {!!viewGroups.length && ( <> {!isDraggable ? ( - viewGroupsWithoutNoValueGroups.map( - (viewGroup, viewGroupIndex) => ( - - } - iconButtons={getIconButtons(viewGroupIndex, viewGroup)} - accent={showDragGrip ? 'placeholder' : 'default'} - showGrip={showDragGrip} - isDragDisabled={!isDraggable} - /> - ), - ) + viewGroups.map((viewGroup, viewGroupIndex) => ( + + } + iconButtons={getIconButtons(viewGroupIndex, viewGroup)} + accent={showDragGrip ? 'placeholder' : 'default'} + showGrip={showDragGrip} + isDragDisabled={!isDraggable} + /> + )) ) : ( - {viewGroupsWithoutNoValueGroups.map( - (viewGroup, viewGroupIndex) => ( - - } - iconButtons={getIconButtons( - viewGroupIndex, - viewGroup, - )} - accent={showDragGrip ? 'placeholder' : 'default'} - showGrip={showDragGrip} - isDragDisabled={!isDraggable} - /> - } - /> - ), - )} + {viewGroups.map((viewGroup, viewGroupIndex) => ( + + } + iconButtons={getIconButtons( + viewGroupIndex, + viewGroup, + )} + accent={showDragGrip ? 'placeholder' : 'default'} + showGrip={showDragGrip} + isDragDisabled={!isDraggable} + /> + } + /> + ))} } /> )} - {noValueViewGroups.map((viewGroup) => ( - - } - accent={showDragGrip ? 'placeholder' : 'default'} - showGrip={true} - isDragDisabled={true} - isHoverDisabled - /> - ))} )} diff --git a/packages/twenty-front/src/modules/views/utils/mapViewGroupsToRecordGroupDefinitions.ts b/packages/twenty-front/src/modules/views/utils/mapViewGroupsToRecordGroupDefinitions.ts index 3767abe6a65d..7c7aba97abcf 100644 --- a/packages/twenty-front/src/modules/views/utils/mapViewGroupsToRecordGroupDefinitions.ts +++ b/packages/twenty-front/src/modules/views/utils/mapViewGroupsToRecordGroupDefinitions.ts @@ -41,7 +41,18 @@ export const mapViewGroupsToRecordGroupDefinitions = ({ (option) => option.value === viewGroup.fieldValue, ); - if (!selectedOption) return null; + if (!selectedOption) { + return { + id: 'no-value', + title: 'No Value', + type: RecordGroupDefinitionType.NoValue, + value: null, + position: viewGroup.position, + isVisible: viewGroup.isVisible, + fieldMetadataId: selectFieldMetadataItem.id, + color: 'transparent', + } satisfies RecordGroupDefinition; + } return { id: viewGroup.id, @@ -57,23 +68,5 @@ export const mapViewGroupsToRecordGroupDefinitions = ({ .filter(isDefined) .sort((a, b) => a.position - b.position); - if (selectFieldMetadataItem.isNullable === true) { - const noValueColumn = { - id: 'no-value', - title: 'No Value', - type: RecordGroupDefinitionType.NoValue, - value: null, - position: - recordGroupDefinitionsFromViewGroups - .map((option) => option.position) - .reduce((a, b) => Math.max(a, b), 0) + 1, - isVisible: true, - fieldMetadataId: selectFieldMetadataItem.id, - color: 'transparent', - } satisfies RecordGroupDefinition; - - return [...recordGroupDefinitionsFromViewGroups, noValueColumn]; - } - return recordGroupDefinitionsFromViewGroups; }; From 33ed9e849e2264848759947131a924db6d43abe4 Mon Sep 17 00:00:00 2001 From: khuddite Date: Wed, 20 Nov 2024 11:25:28 -0500 Subject: [PATCH 2/2] Make no value view group hoverable, draggable and invisible --- .../record-group/components/RecordGroupMenuItemDraggable.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupMenuItemDraggable.tsx b/packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupMenuItemDraggable.tsx index 8aa81fe1b21c..70bd645af243 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupMenuItemDraggable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupMenuItemDraggable.tsx @@ -56,10 +56,9 @@ export const RecordGroupMenuItemDraggable = ({ /> } accent={isNoValue || showDragGrip ? 'placeholder' : 'default'} - iconButtons={!isNoValue ? getIconButtons(recordGroup) : undefined} + iconButtons={getIconButtons(recordGroup)} showGrip={isNoValue ? true : showDragGrip} - isDragDisabled={isNoValue ? true : !isDraggable} - isHoverDisabled={isNoValue} + isDragDisabled={!isDraggable} /> ); };