Skip to content

Commit

Permalink
Fix sort with Email and FullName field types and add sort/filter to l…
Browse files Browse the repository at this point in the history
…abelIdentifier column (#6132)

Fixes #5958

<img width="1088" alt="Screenshot 2024-07-04 at 16 23 25"
src="https://github.com/twentyhq/twenty/assets/1834158/746c45a4-7112-4322-8c26-04f3e98add06">

<img width="1280" alt="Screenshot 2024-07-04 at 16 15 39"
src="https://github.com/twentyhq/twenty/assets/1834158/9b9ecc60-9787-44a3-9ba7-0b33ec378e6f">
  • Loading branch information
Weiko authored Jul 5, 2024
1 parent b33b468 commit cc6ce14
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ export const formatFieldMetadataItemsAsSortDefinitions = ({
FieldMetadataType.Boolean,
FieldMetadataType.Select,
FieldMetadataType.Phone,
FieldMetadataType.Email,
FieldMetadataType.FullName,
].includes(field.type)
) {
return acc;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -13,7 +13,8 @@ export const turnSortsIntoOrderBy = (
objectMetadataItem: ObjectMetadataItem,
sorts: Sort[],
): RecordGqlOperationOrderBy => {
const fields: Pick<Field, 'id' | 'name'>[] = objectMetadataItem?.fields ?? [];
const fields: Pick<Field, 'id' | 'name' | 'type'>[] =
objectMetadataItem?.fields ?? [];
const fieldsById = mapArrayToObject(fields, ({ id }) => id);
const sortsOrderBy = sorts
.map((sort) => {
Expand All @@ -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);

Expand All @@ -36,3 +37,21 @@ export const turnSortsIntoOrderBy = (

return sortsOrderBy;
};

const getOrderByForFieldMetadataType = (
field: Pick<Field, 'id' | 'name' | 'type'>,
direction: OrderBy,
) => {
switch (field.type) {
case FieldMetadataType.FullName:
return {
[field.name]: {
firstName: direction,
lastName: direction,
},
};

default:
return { [field.name]: direction };
}
};
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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 (
<DropdownMenuItemsContainer>
Expand Down Expand Up @@ -116,11 +119,13 @@ export const RecordTableColumnDropdownMenu = ({
text="Move right"
/>
)}
<MenuItem
LeftIcon={IconEyeOff}
onClick={handleColumnVisibility}
text="Hide"
/>
{canHide && (
<MenuItem
LeftIcon={IconEyeOff}
onClick={handleColumnVisibility}
text="Hide"
/>
)}
</DropdownMenuItemsContainer>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -186,11 +185,7 @@ export const RecordTableHeaderCell = ({
onMouseLeave={() => setIconVisibility(false)}
>
<StyledColumnHeadContainer>
{column.isLabelIdentifier ? (
<ColumnHead column={column} />
) : (
<ColumnHeadWithDropdown column={column} />
)}
<ColumnHeadWithDropdown column={column} />
{(useIsMobile() || iconVisibility) && !!column.isLabelIdentifier && (
<StyledHeaderIcon>
<LightIconButton
Expand Down

0 comments on commit cc6ce14

Please sign in to comment.