mirror of
https://github.com/twentyhq/twenty.git
synced 2024-08-17 09:51:03 +03:00
Fix sort with Email and FullName field types and add sort/filter to labelIdentifier column (#6132)
Fixes https://github.com/twentyhq/twenty/issues/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">
This commit is contained in:
parent
b33b468679
commit
cc6ce142ce
@ -18,6 +18,8 @@ export const formatFieldMetadataItemsAsSortDefinitions = ({
|
||||
FieldMetadataType.Boolean,
|
||||
FieldMetadataType.Select,
|
||||
FieldMetadataType.Phone,
|
||||
FieldMetadataType.Email,
|
||||
FieldMetadataType.FullName,
|
||||
].includes(field.type)
|
||||
) {
|
||||
return acc;
|
||||
|
@ -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<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) => {
|
||||
@ -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<Field, 'id' | 'name' | 'type'>,
|
||||
direction: OrderBy,
|
||||
) => {
|
||||
switch (field.type) {
|
||||
case FieldMetadataType.FullName:
|
||||
return {
|
||||
[field.name]: {
|
||||
firstName: direction,
|
||||
lastName: direction,
|
||||
},
|
||||
};
|
||||
|
||||
default:
|
||||
return { [field.name]: direction };
|
||||
}
|
||||
};
|
||||
|
@ -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 (
|
||||
<DropdownMenuItemsContainer>
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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)}
|
||||
>
|
||||
<StyledColumnHeadContainer>
|
||||
{column.isLabelIdentifier ? (
|
||||
<ColumnHead column={column} />
|
||||
) : (
|
||||
<ColumnHeadWithDropdown column={column} />
|
||||
)}
|
||||
<ColumnHeadWithDropdown column={column} />
|
||||
{(useIsMobile() || iconVisibility) && !!column.isLabelIdentifier && (
|
||||
<StyledHeaderIcon>
|
||||
<LightIconButton
|
||||
|
Loading…
Reference in New Issue
Block a user