From cc6ce142cec30be084d036f9709a9ebcdbabba62 Mon Sep 17 00:00:00 2001 From: Weiko Date: Fri, 5 Jul 2024 17:01:47 +0200 Subject: [PATCH] Fix sort with Email and FullName field types and add sort/filter to labelIdentifier column (#6132) Fixes https://github.com/twentyhq/twenty/issues/5958 Screenshot 2024-07-04 at 16 23 25 Screenshot 2024-07-04 at 16 15 39 --- ...rmatFieldMetadataItemsAsSortDefinitions.ts | 2 ++ .../utils/turnSortsIntoOrderBy.ts | 25 ++++++++++++++++--- .../RecordTableColumnDropdownMenu.tsx | 21 ++++++++++------ .../components/RecordTableHeaderCell.tsx | 7 +----- 4 files changed, 38 insertions(+), 17 deletions(-) diff --git a/packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions.ts b/packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions.ts index 56b84aec0..b62f7fb35 100644 --- a/packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions.ts +++ b/packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions.ts @@ -18,6 +18,8 @@ export const formatFieldMetadataItemsAsSortDefinitions = ({ FieldMetadataType.Boolean, FieldMetadataType.Select, FieldMetadataType.Phone, + FieldMetadataType.Email, + FieldMetadataType.FullName, ].includes(field.type) ) { return acc; diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy.ts index b33c7ea1e..04e877109 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy.ts @@ -2,7 +2,7 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { OrderBy } from '@/object-metadata/types/OrderBy'; import { hasPositionField } from '@/object-metadata/utils/hasPositionField'; import { RecordGqlOperationOrderBy } from '@/object-record/graphql/types/RecordGqlOperationOrderBy'; -import { Field } from '~/generated/graphql'; +import { Field, FieldMetadataType } from '~/generated/graphql'; import { mapArrayToObject } from '~/utils/array/mapArrayToObject'; import { isDefined } from '~/utils/isDefined'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; @@ -13,7 +13,8 @@ export const turnSortsIntoOrderBy = ( objectMetadataItem: ObjectMetadataItem, sorts: Sort[], ): RecordGqlOperationOrderBy => { - const fields: Pick[] = objectMetadataItem?.fields ?? []; + const fields: Pick[] = + objectMetadataItem?.fields ?? []; const fieldsById = mapArrayToObject(fields, ({ id }) => id); const sortsOrderBy = sorts .map((sort) => { @@ -26,7 +27,7 @@ export const turnSortsIntoOrderBy = ( const direction: OrderBy = sort.direction === 'asc' ? 'AscNullsFirst' : 'DescNullsLast'; - return { [correspondingField.name]: direction }; + return getOrderByForFieldMetadataType(correspondingField, direction); }) .filter(isDefined); @@ -36,3 +37,21 @@ export const turnSortsIntoOrderBy = ( return sortsOrderBy; }; + +const getOrderByForFieldMetadataType = ( + field: Pick, + direction: OrderBy, +) => { + switch (field.type) { + case FieldMetadataType.FullName: + return { + [field.name]: { + firstName: direction, + lastName: direction, + }, + }; + + default: + return { [field.name]: direction }; + } +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableColumnDropdownMenu.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableColumnDropdownMenu.tsx index 96a257041..bbd2f131c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableColumnDropdownMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableColumnDropdownMenu.tsx @@ -33,12 +33,13 @@ export const RecordTableColumnDropdownMenu = ({ const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector()); const secondVisibleColumn = visibleTableColumns[1]; + const canMove = column.isLabelIdentifier !== true; const canMoveLeft = - column.fieldMetadataId !== secondVisibleColumn?.fieldMetadataId; + column.fieldMetadataId !== secondVisibleColumn?.fieldMetadataId && canMove; const lastVisibleColumn = visibleTableColumns[visibleTableColumns.length - 1]; const canMoveRight = - column.fieldMetadataId !== lastVisibleColumn?.fieldMetadataId; + column.fieldMetadataId !== lastVisibleColumn?.fieldMetadataId && canMove; const { handleColumnVisibilityChange, handleMoveTableColumn } = useTableColumns(); @@ -83,7 +84,9 @@ export const RecordTableColumnDropdownMenu = ({ const isSortable = column.isSortable === true; const isFilterable = column.isFilterable === true; - const showSeparator = isFilterable || isSortable; + const showSeparator = + (isFilterable || isSortable) && column.isLabelIdentifier !== true; + const canHide = column.isLabelIdentifier !== true; return ( @@ -116,11 +119,13 @@ export const RecordTableColumnDropdownMenu = ({ text="Move right" /> )} - + {canHide && ( + + )} ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx index 9330ff2c5..702b644ff 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx @@ -4,7 +4,6 @@ import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil'; import { IconPlus } from 'twenty-ui'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { ColumnHead } from '@/object-record/record-table/components/ColumnHead'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns'; import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; @@ -186,11 +185,7 @@ export const RecordTableHeaderCell = ({ onMouseLeave={() => setIconVisibility(false)} > - {column.isLabelIdentifier ? ( - - ) : ( - - )} + {(useIsMobile() || iconVisibility) && !!column.isLabelIdentifier && (