admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Added parallel code path to set new record sorts state (#10345)

Browse Source 
This PR implements a parallel code path to set record sorts without
impacting the actual sort, like we did on record filter.

We add a ViewBarRecordSortEffect which mirrors
ViewBarRecordFilterEffect.

It also adds availableFieldMetadataItemsForSortFamilySelector to replace
sortDefinitions progressively.
This commit is contained in:
Lucas Bordeau
2025-02-20 10:40:25 +01:00
committed by GitHub
parent 316876fcb5
commit 3f93aba5fc
31 changed files with 326 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/twenty-front/src/modules/object-metadata/states/availableFieldMetadataItemsForSortFamilySelector.ts Normal file
View File

@ -0,0 +1,26 @@
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { filterSortableFieldMetadataItems } from '@/object-metadata/utils/filterSortableFieldMetadataItems';
import { selectorFamily } from 'recoil';
import { isDefined } from 'twenty-shared';
export const availableFieldMetadataItemsForSortFamilySelector = selectorFamily({
key: 'availableFieldMetadataItemsForSortFamilySelector',
get:
({ objectMetadataItemId }: { objectMetadataItemId: string }) =>
({ get }) => {
const objectMetadataItems = get(objectMetadataItemsState);
const objectMetadataItem = objectMetadataItems.find(
(item) => item.id === objectMetadataItemId,
);
if (!isDefined(objectMetadataItem)) {
return [];
}
const availableFieldMetadataItemsForSort =
objectMetadataItem.fields.filter(filterSortableFieldMetadataItems);
return availableFieldMetadataItemsForSort;
},
});

13
packages/twenty-front/src/modules/object-metadata/utils/filterSortableFieldMetadataItems.ts Normal file
View File

@ -0,0 +1,13 @@
import { SORTABLE_FIELD_METADATA_TYPES } from '@/object-metadata/constants/SortableFieldMetadataTypes';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
export const filterSortableFieldMetadataItems = (field: FieldMetadataItem) => {
const isSystemField = field.isSystem;
const isFieldActive = field.isActive;
const isFieldTypeSortable = SORTABLE_FIELD_METADATA_TYPES.includes(
field.type,
);
return !isSystemField && isFieldActive && isFieldTypeSortable;
};

8
packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions.ts
View File

@ -11,14 +11,6 @@ export const getRelationObjectMetadataNameSingular = ({
return field.relationDefinition?.targetObjectMetadata.nameSingular;
};
export const getRelationObjectMetadataNamePlural = ({
field,
}: {
field: ObjectMetadataItem['fields'][0];
}): string | undefined => {
return field.relationDefinition?.targetObjectMetadata.namePlural;
};
export const getFilterTypeFromFieldType = (
fieldType: FieldMetadataType,
): FilterableFieldType => {

43
packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View File

@ -6,12 +6,16 @@ import { useCloseSortDropdown } from '@/object-record/object-sort-dropdown/hooks
import { useResetRecordSortDropdownSearchInput } from '@/object-record/object-sort-dropdown/hooks/useResetRecordSortDropdownSearchInput';
import { useResetSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useResetSortDropdown';
import { useToggleSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useToggleSortDropdown';
import { isSortDirectionMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState';
import { isRecordSortDirectionMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isRecordSortDirectionMenuUnfoldedComponentState';
import { objectSortDropdownSearchInputComponentState } from '@/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState';
import { onSortSelectComponentState } from '@/object-record/object-sort-dropdown/states/onSortSelectScopedState';
import { selectedSortDirectionComponentState } from '@/object-record/object-sort-dropdown/states/selectedSortDirectionState';
import { selectedRecordSortDirectionComponentState } from '@/object-record/object-sort-dropdown/states/selectedRecordSortDirectionComponentState';
import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import {
RECORD_SORT_DIRECTIONS,
RecordSortDirection,
} from '@/object-record/record-sort/types/RecordSortDirection';
import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@ -26,7 +30,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { availableSortDefinitionsComponentState } from '@/views/states/availableSortDefinitionsComponentState';
import { Trans, useLingui } from '@lingui/react/macro';
import { SORT_DIRECTIONS, SortDirection } from '../types/SortDirection';
import { v4 } from 'uuid';
export const StyledInput = styled.input`
background: transparent;
@ -79,8 +83,8 @@ export const ObjectSortDropdownButton = ({
objectSortDropdownSearchInputComponentState,
);
const isSortDirectionMenuUnfolded = useRecoilComponentValueV2(
isSortDirectionMenuUnfoldedComponentState,
const isRecordSortDirectionMenuUnfolded = useRecoilComponentValueV2(
isRecordSortDirectionMenuUnfoldedComponentState,
);
const { resetSortDropdown } = useResetSortDropdown();
@ -153,22 +157,23 @@ export const ObjectSortDropdownButton = ({
setObjectSortDropdownSearchInput('');
closeSortDropdown();
onSortSelect?.({
id: v4(),
fieldMetadataId: sortDefinition.fieldMetadataId,
direction: selectedSortDirection,
direction: selectedRecordSortDirection,
definition: sortDefinition,
});
};
const [selectedSortDirection, setSelectedSortDirection] =
useRecoilComponentStateV2(selectedSortDirectionComponentState);
const [selectedRecordSortDirection, setSelectedRecordSortDirection] =
useRecoilComponentStateV2(selectedRecordSortDirectionComponentState);
const setIsSortDirectionMenuUnfolded = useSetRecoilComponentStateV2(
isSortDirectionMenuUnfoldedComponentState,
const setIsRecordSortDirectionMenuUnfolded = useSetRecoilComponentStateV2(
isRecordSortDirectionMenuUnfoldedComponentState,
);
const handleSortDirectionClick = (sortDirection: SortDirection) => {
setSelectedSortDirection(sortDirection);
setIsSortDirectionMenuUnfolded(false);
const handleSortDirectionClick = (sortDirection: RecordSortDirection) => {
setSelectedRecordSortDirection(sortDirection);
setIsRecordSortDirectionMenuUnfolded(false);
};
const { isDropdownOpen } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
@ -190,10 +195,10 @@ export const ObjectSortDropdownButton = ({
}
dropdownComponents={
<>
{isSortDirectionMenuUnfolded && (
{isRecordSortDirectionMenuUnfolded && (
<StyledSelectedSortDirectionContainer>
<DropdownMenuItemsContainer>
{SORT_DIRECTIONS.map((sortDirection, index) => (
{RECORD_SORT_DIRECTIONS.map((sortDirection, index) => (
<MenuItem
key={index}
onClick={() => handleSortDirectionClick(sortDirection)}
@ -208,10 +213,14 @@ export const ObjectSortDropdownButton = ({
<DropdownMenuHeader
EndIcon={IconChevronDown}
onClick={() =>
setIsSortDirectionMenuUnfolded(!isSortDirectionMenuUnfolded)
setIsRecordSortDirectionMenuUnfolded(
!isRecordSortDirectionMenuUnfolded,
)
}
>
{selectedSortDirection === 'asc' ? t`Ascending` : t`Descending`}
{selectedRecordSortDirection === 'asc'
? t`Ascending`
: t`Descending`}
</DropdownMenuHeader>
<StyledInput
autoFocus

16
packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useResetSortDropdown.ts
View File

@ -1,19 +1,19 @@
import { isSortDirectionMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState';
import { selectedSortDirectionComponentState } from '@/object-record/object-sort-dropdown/states/selectedSortDirectionState';
import { isRecordSortDirectionMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isRecordSortDirectionMenuUnfoldedComponentState';
import { selectedRecordSortDirectionComponentState } from '@/object-record/object-sort-dropdown/states/selectedRecordSortDirectionComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
export const useResetSortDropdown = () => {
const setIsSortDirectionMenuUnfolded = useSetRecoilComponentStateV2(
isSortDirectionMenuUnfoldedComponentState,
const setIsRecordSortDirectionMenuUnfolded = useSetRecoilComponentStateV2(
isRecordSortDirectionMenuUnfoldedComponentState,
);
const setSelectedSortDirection = useSetRecoilComponentStateV2(
selectedSortDirectionComponentState,
const setSelectedRecordSortDirection = useSetRecoilComponentStateV2(
selectedRecordSortDirectionComponentState,
);
const resetSortDropdown = () => {
setIsSortDirectionMenuUnfolded(false);
setSelectedSortDirection('asc');
setIsRecordSortDirectionMenuUnfolded(false);
setSelectedRecordSortDirection('asc');
};
return {

24
packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useSortDropdownStates.ts
View File

@ -1,24 +0,0 @@
import { isSortSelectedComponentState } from '@/object-record/object-sort-dropdown/states/isSortSelectedScopedState';
import { objectSortDropdownSearchInputComponentState } from '@/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState';
import { onSortSelectComponentState } from '@/object-record/object-sort-dropdown/states/onSortSelectScopedState';
export const useSortDropdownStates = (scopeId: string) => {
const isSortSelectedState = isSortSelectedComponentState.atomFamily({
instanceId: scopeId,
});
const onSortSelectState = onSortSelectComponentState.atomFamily({
instanceId: scopeId,
});
const objectSortDropdownSearchInputState =
objectSortDropdownSearchInputComponentState.atomFamily({
instanceId: scopeId,
});
return {
isSortSelectedState,
onSortSelectState,
objectSortDropdownSearchInputState,
};
};

11
packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts → packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isRecordSortDirectionMenuUnfoldedComponentState.ts
View File

@ -1,8 +1,9 @@
import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const isSortSelectedComponentState = createComponentStateV2<boolean>({
key: 'isSortSelectedComponentState',
defaultValue: false,
componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
});
export const isRecordSortDirectionMenuUnfoldedComponentState =
createComponentStateV2<boolean>({
key: 'isRecordSortDirectionMenuUnfoldedComponentState',
defaultValue: false,
componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
});

4
packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState.ts → packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isRecordSortSelectedComponentState.ts
View File

@ -1,9 +1,9 @@
import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const isSortDirectionMenuUnfoldedComponentState =
export const isRecordSortSelectedComponentState =
createComponentStateV2<boolean>({
key: 'isSortDirectionMenuUnfoldedComponentState',
key: 'isRecordSortSelectedComponentState',
defaultValue: false,
componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
});

4
packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts
View File

@ -1,9 +1,9 @@
import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
import { Sort } from '../types/Sort';
export const onSortSelectComponentState = createComponentStateV2<
((sort: Sort) => void) | undefined
((sort: RecordSort) => void) | undefined
>({
key: 'onSortSelectComponentState',
defaultValue: undefined,

8
packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/selectedSortDirectionState.ts → packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/selectedRecordSortDirectionComponentState.ts
View File

@ -1,10 +1,10 @@
import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
import { SortDirection } from '@/object-record/object-sort-dropdown/types/SortDirection';
import { RecordSortDirection } from '@/object-record/record-sort/types/RecordSortDirection';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const selectedSortDirectionComponentState =
createComponentStateV2<SortDirection>({
key: 'selectedSortDirectionComponentState',
export const selectedRecordSortDirectionComponentState =
createComponentStateV2<RecordSortDirection>({
key: 'selectedRecordSortDirectionComponentState',
defaultValue: 'asc',
componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
});

8
packages/twenty-front/src/modules/object-record/object-sort-dropdown/types/Sort.ts
View File

@ -1,8 +0,0 @@
import { SortDefinition } from './SortDefinition';
import { SortDirection } from './SortDirection';
export type Sort = {
fieldMetadataId: string;
direction: SortDirection;
definition: SortDefinition;
};

3
packages/twenty-front/src/modules/object-record/object-sort-dropdown/types/SortDefinition.ts
View File

@ -1,8 +1,5 @@
import { SortDirection } from './SortDirection';
export type SortDefinition = {
fieldMetadataId: string;
label: string;
iconName: string;
getOrderByTemplate?: (direction: SortDirection) => any[];
};

3
packages/twenty-front/src/modules/object-record/object-sort-dropdown/types/SortDirection.ts
View File

@ -1,3 +0,0 @@
export const SORT_DIRECTIONS = ['asc', 'desc'] as const;
export type SortDirection = (typeof SORT_DIRECTIONS)[number];

15
packages/twenty-front/src/modules/object-record/object-sort-dropdown/utils/__tests__/turnSortsIntoOrderBy.test.ts
View File

@ -1,8 +1,8 @@
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
const sortDefinition: SortDefinition = {
fieldMetadataId: 'id',
@ -42,8 +42,9 @@ describe('turnSortsIntoOrderBy', () => {
});
it('should create OrderByField with single sort', () => {
const sorts: Sort[] = [
const sorts: RecordSort[] = [
{
id: 'id',
fieldMetadataId: 'field1',
direction: 'asc',
definition: sortDefinition,
@ -56,13 +57,15 @@ describe('turnSortsIntoOrderBy', () => {
});
it('should create OrderByField with multiple sorts', () => {
const sorts: Sort[] = [
const sorts: RecordSort[] = [
{
id: 'id',
fieldMetadataId: 'field1',
direction: 'asc',
definition: sortDefinition,
},
{
id: 'id',
fieldMetadataId: 'field2',
direction: 'desc',
definition: sortDefinition,
@ -82,8 +85,9 @@ describe('turnSortsIntoOrderBy', () => {
});
it('should ignore if field not found', () => {
const sorts: Sort[] = [
const sorts: RecordSort[] = [
{
id: 'id',
fieldMetadataId: 'invalidField',
direction: 'asc',
definition: sortDefinition,
@ -95,8 +99,9 @@ describe('turnSortsIntoOrderBy', () => {
});
it('should not return position for remotes', () => {
const sorts: Sort[] = [
const sorts: RecordSort[] = [
{
id: 'id',
fieldMetadataId: 'invalidField',
direction: 'asc',
definition: sortDefinition,

4
packages/twenty-front/src/modules/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy.ts
View File

@ -8,12 +8,12 @@ import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { getOrderByForFieldMetadataType } from '@/object-metadata/utils/getOrderByForFieldMetadataType';
import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
import { OrderBy } from '@/types/OrderBy';
import { Sort } from '../types/Sort';
export const turnSortsIntoOrderBy = (
objectMetadataItem: ObjectMetadataItem,
sorts: Sort[],
sorts: RecordSort[],
): RecordGqlOperationOrderBy => {
const fields: Pick<FieldMetadataItem, 'id' | 'name' | 'type'>[] =
objectMetadataItem?.fields ?? [];

12
packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnSort.ts
View File

@ -2,9 +2,11 @@ import { useCallback } from 'react';
import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
import { useUpsertRecordSort } from '@/object-record/record-sort/hooks/useUpsertRecordSort';
import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
import { useUpsertCombinedViewSorts } from '@/views/hooks/useUpsertCombinedViewSorts';
import { isDefined } from 'twenty-shared';
import { v4 } from 'uuid';
type UseHandleToggleColumnSortProps = {
objectNameSingular: string;
@ -24,6 +26,8 @@ export const useHandleToggleColumnSort = ({
const { upsertCombinedViewSort } = useUpsertCombinedViewSorts(viewBarId);
const { upsertRecordSort } = useUpsertRecordSort();
const handleToggleColumnSort = useCallback(
(fieldMetadataId: string) => {
const correspondingColumnDefinition = columnDefinitions.find(
@ -33,7 +37,8 @@ export const useHandleToggleColumnSort = ({
if (!isDefined(correspondingColumnDefinition)) return;
const newSort: Sort = {
const newSort: RecordSort = {
id: v4(),
fieldMetadataId,
definition: {
fieldMetadataId,
@ -44,8 +49,9 @@ export const useHandleToggleColumnSort = ({
};
upsertCombinedViewSort(newSort);
upsertRecordSort(newSort);
},
[columnDefinitions, upsertCombinedViewSort],
[columnDefinitions, upsertCombinedViewSort, upsertRecordSort],
);
return handleToggleColumnSort;

5
packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts
View File

@ -1,8 +1,7 @@
import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
import { createState } from '@ui/utilities/state/utils/createState';
import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
export const recordIndexSortsState = createState<Sort[]>({
export const recordIndexSortsState = createState<RecordSort[]>({
key: 'recordIndexSortsState',
defaultValue: [],
});

15
packages/twenty-front/src/modules/object-record/record-sort/hooks/useSortableFieldMetadataItemsInRecordIndexContext.ts Normal file
View File

@ -0,0 +1,15 @@
import { availableFieldMetadataItemsForSortFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForSortFamilySelector';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { useRecoilValue } from 'recoil';
export const useSortableFieldMetadataItemsInRecordIndexContext = () => {
const { objectMetadataItem } = useRecordIndexContextOrThrow();
const sortableFieldMetadataItems = useRecoilValue(
availableFieldMetadataItemsForSortFamilySelector({
objectMetadataItemId: objectMetadataItem.id,
}),
);
return { sortableFieldMetadataItems };
};

58
packages/twenty-front/src/modules/object-record/record-sort/hooks/useUpsertRecordSort.ts Normal file
View File

@ -0,0 +1,58 @@
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useRecoilCallback } from 'recoil';
export const useUpsertRecordSort = () => {
const currentRecordSortsCallbackState = useRecoilComponentCallbackStateV2(
currentRecordSortsComponentState,
);
const upsertRecordSort = useRecoilCallback(
({ set, snapshot }) =>
(recordSortToSet: RecordSort) => {
const currentRecordSorts = getSnapshotValue(
snapshot,
currentRecordSortsCallbackState,
);
const hasFoundRecordSortInCurrentRecordSorts = currentRecordSorts.some(
(existingSort) =>
existingSort.fieldMetadataId === recordSortToSet.fieldMetadataId,
);
if (!hasFoundRecordSortInCurrentRecordSorts) {
set(currentRecordSortsCallbackState, [
...currentRecordSorts,
recordSortToSet,
]);
} else {
set(currentRecordSortsCallbackState, (currentRecordSorts) => {
const newCurrentRecordSorts = [...currentRecordSorts];
const indexOfSortToUpdate = newCurrentRecordSorts.findIndex(
(existingSort) =>
existingSort.fieldMetadataId ===
recordSortToSet.fieldMetadataId,
);
if (indexOfSortToUpdate < 0) {
return newCurrentRecordSorts;
}
newCurrentRecordSorts[indexOfSortToUpdate] = {
...recordSortToSet,
};
return newCurrentRecordSorts;
});
}
},
[currentRecordSortsCallbackState],
);
return {
upsertRecordSort,
};
};

4
packages/twenty-front/src/modules/object-record/record-table/states/tableSortsComponentState.ts
View File

@ -1,8 +1,8 @@
import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
import { Sort } from '../../object-sort-dropdown/types/Sort';
export const tableSortsComponentState = createComponentStateV2<Sort[]>({
export const tableSortsComponentState = createComponentStateV2<RecordSort[]>({
key: 'tableSortsComponentState',
defaultValue: [],
componentInstanceContext: RecordTableComponentInstanceContext,

30
packages/twenty-front/src/modules/views/components/EditableSortChip.tsx
View File

@ -1,36 +1,42 @@
import { IconArrowDown, IconArrowUp } from 'twenty-ui';
import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
import { useUpsertRecordSort } from '@/object-record/record-sort/hooks/useUpsertRecordSort';
import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
import { useDeleteCombinedViewSorts } from '@/views/hooks/useDeleteCombinedViewSorts';
import { useUpsertCombinedViewSorts } from '@/views/hooks/useUpsertCombinedViewSorts';
type EditableSortChipProps = {
viewSort: Sort;
recordSort: RecordSort;
};
export const EditableSortChip = ({ viewSort }: EditableSortChipProps) => {
export const EditableSortChip = ({ recordSort }: EditableSortChipProps) => {
const { deleteCombinedViewSort } = useDeleteCombinedViewSorts();
const { upsertCombinedViewSort } = useUpsertCombinedViewSorts();
const { upsertRecordSort } = useUpsertRecordSort();
const handleRemoveClick = () => {
deleteCombinedViewSort(viewSort.fieldMetadataId);
deleteCombinedViewSort(recordSort.fieldMetadataId);
};
const handleClick = () => {
upsertCombinedViewSort({
...viewSort,
direction: viewSort.direction === 'asc' ? 'desc' : 'asc',
});
const newSort: RecordSort = {
...recordSort,
direction: recordSort.direction === 'asc' ? 'desc' : 'asc',
};
upsertCombinedViewSort(newSort);
upsertRecordSort(newSort);
};
return (
<SortOrFilterChip
key={viewSort.fieldMetadataId}
testId={viewSort.fieldMetadataId}
labelValue={viewSort.definition.label}
Icon={viewSort.direction === 'desc' ? IconArrowDown : IconArrowUp}
key={recordSort.fieldMetadataId}
testId={recordSort.fieldMetadataId}
labelValue={recordSort.definition.label}
Icon={recordSort.direction === 'desc' ? IconArrowDown : IconArrowUp}
onRemove={handleRemoveClick}
onClick={handleClick}
/>

2
packages/twenty-front/src/modules/views/components/ViewBar.tsx
View File

@ -19,6 +19,7 @@ import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types
import { VIEW_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ViewSortDropdownId';
import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
import { ViewBarRecordFilterEffect } from '@/views/components/ViewBarRecordFilterEffect';
import { ViewBarRecordSortEffect } from '@/views/components/ViewBarRecordSortEffect';
import { UpdateViewButtonGroup } from './UpdateViewButtonGroup';
import { ViewBarDetails } from './ViewBarDetails';
@ -48,6 +49,7 @@ export const ViewBar = ({
value={{ instanceId: VIEW_SORT_DROPDOWN_ID }}
>
<ViewBarRecordFilterEffect />
<ViewBarRecordSortEffect />
<ViewBarFilterEffect filterDropdownId={filterDropdownId} />
<ViewBarSortEffect />
<QueryParamsFiltersEffect />

7
packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
View File

@ -204,8 +204,11 @@ export const ViewBarDetails = ({
{mapViewSortsToSorts(
currentViewWithCombinedFiltersAndSorts?.viewSorts ?? [],
availableSortDefinitions,
).map((sort) => (
<EditableSortChip key={sort.fieldMetadataId} viewSort={sort} />
).map((recordSort) => (
<EditableSortChip
key={recordSort.fieldMetadataId}
recordSort={recordSort}
/>
))}
{isNonEmptyArray(recordFilters) &&
isNonEmptyArray(

12
packages/twenty-front/src/modules/views/components/ViewBarRecordFilterEffect.tsx
View File

@ -21,6 +21,12 @@ export const ViewBarRecordFilterEffect = () => {
contextStoreCurrentObjectMetadataItemComponentState,
);
const currentView = useRecoilValue(
prefetchViewFromViewIdFamilySelector({
viewId: currentViewId ?? '',
}),
);
const [
hasInitializedCurrentRecordFilters,
setHasInitializedCurrentRecordFilters,
@ -43,12 +49,6 @@ export const ViewBarRecordFilterEffect = () => {
contextStoreCurrentObjectMetadataItem?.id,
);
const currentView = useRecoilValue(
prefetchViewFromViewIdFamilySelector({
viewId: currentViewId ?? '',
}),
);
useEffect(() => {
if (isDefined(currentView) && !hasInitializedCurrentRecordFilters) {
if (

83
packages/twenty-front/src/modules/views/components/ViewBarRecordSortEffect.tsx Normal file
View File

@ -0,0 +1,83 @@
import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { availableFieldMetadataItemsForSortFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForSortFamilySelector';
import { formatFieldMetadataItemsAsSortDefinitions } from '@/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions';
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { hasInitializedCurrentRecordSortsComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordSortsComponentFamilyState';
import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared';
export const ViewBarRecordSortEffect = () => {
const currentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState,
);
const contextStoreCurrentObjectMetadataItem = useRecoilComponentValueV2(
contextStoreCurrentObjectMetadataItemComponentState,
);
const currentView = useRecoilValue(
prefetchViewFromViewIdFamilySelector({
viewId: currentViewId ?? '',
}),
);
const [
hasInitializedCurrentRecordSorts,
setHasInitializedCurrentRecordSorts,
] = useRecoilComponentFamilyStateV2(
hasInitializedCurrentRecordSortsComponentFamilyState,
{
viewId: currentViewId ?? undefined,
},
);
const setCurrentRecordSorts = useSetRecoilComponentStateV2(
currentRecordSortsComponentState,
);
const sortableFieldMetadataItems = useRecoilValue(
availableFieldMetadataItemsForSortFamilySelector({
objectMetadataItemId: contextStoreCurrentObjectMetadataItem?.id,
}),
);
useEffect(() => {
if (isDefined(currentView) && !hasInitializedCurrentRecordSorts) {
if (
currentView.objectMetadataId !==
contextStoreCurrentObjectMetadataItem?.id
) {
return;
}
const sortDefinitions = formatFieldMetadataItemsAsSortDefinitions({
fields: sortableFieldMetadataItems,
});
if (isDefined(currentView)) {
setCurrentRecordSorts(
mapViewSortsToSorts(currentView.viewSorts, sortDefinitions),
);
setHasInitializedCurrentRecordSorts(true);
}
}
}, [
hasInitializedCurrentRecordSorts,
currentView,
sortableFieldMetadataItems,
setCurrentRecordSorts,
contextStoreCurrentObjectMetadataItem,
setHasInitializedCurrentRecordSorts,
]);
return null;
};

9
packages/twenty-front/src/modules/views/components/ViewBarSortEffect.tsx
View File

@ -1,7 +1,8 @@
import { useEffect } from 'react';
import { onSortSelectComponentState } from '@/object-record/object-sort-dropdown/states/onSortSelectScopedState';
import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
import { useUpsertRecordSort } from '@/object-record/record-sort/hooks/useUpsertRecordSort';
import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useUpsertCombinedViewSorts } from '@/views/hooks/useUpsertCombinedViewSorts';
@ -16,6 +17,8 @@ export const ViewBarSortEffect = () => {
availableSortDefinitionsComponentState,
);
const { upsertRecordSort } = useUpsertRecordSort();
const setOnSortSelect = useSetRecoilComponentStateV2(
onSortSelectComponentState,
);
@ -28,9 +31,10 @@ export const ViewBarSortEffect = () => {
if (isDefined(availableSortDefinitions)) {
setAvailableSortDefinitionsInSortDropdown(availableSortDefinitions);
}
setOnSortSelect(() => (sort: Sort | null) => {
setOnSortSelect(() => (sort: RecordSort | null) => {
if (isDefined(sort)) {
upsertCombinedViewSort(sort);
upsertRecordSort(sort);
}
});
}, [
@ -38,6 +42,7 @@ export const ViewBarSortEffect = () => {
setAvailableSortDefinitionsInSortDropdown,
setOnSortSelect,
upsertCombinedViewSort,
upsertRecordSort,
]);
return <></>;

4
packages/twenty-front/src/modules/views/hooks/useUpsertCombinedViewSorts.ts
View File

@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil';
import { v4 } from 'uuid';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useGetViewFromPrefetchState } from '@/views/hooks/useGetViewFromPrefetchState';
@ -32,7 +32,7 @@ export const useUpsertCombinedViewSorts = (viewBarComponentId?: string) => {
const upsertCombinedViewSort = useRecoilCallback(
({ snapshot, set }) =>
async (upsertedSort: Sort) => {
async (upsertedSort: RecordSort) => {
const currentViewId = getSnapshotValue(
snapshot,
currentViewIdCallbackState,

9
packages/twenty-front/src/modules/views/states/hasInitializedCurrentRecordSortsComponentFamilyState.ts Normal file
View File

@ -0,0 +1,9 @@
import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2';
export const hasInitializedCurrentRecordSortsComponentFamilyState =
createComponentFamilyStateV2<boolean, { viewId?: string }>({
key: 'hasInitializedCurrentRecordSortsComponentFamilyState',
defaultValue: false,
componentInstanceContext: RecordSortsComponentInstanceContext,
});

4
packages/twenty-front/src/modules/views/types/ViewSort.ts
View File

@ -1,8 +1,8 @@
import { SortDirection } from '@/object-record/object-sort-dropdown/types/SortDirection';
import { RecordSortDirection } from '@/object-record/record-sort/types/RecordSortDirection';
export type ViewSort = {
__typename: 'ViewSort';
id: string;
fieldMetadataId: string;
direction: SortDirection;
direction: RecordSortDirection;
};

5
packages/twenty-front/src/modules/views/utils/__tests__/viewMapFunctions.test.ts
View File

@ -1,6 +1,6 @@
import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { ViewField } from '@/views/types/ViewField';
import { ViewFilter } from '@/views/types/ViewFilter';
@ -39,8 +39,9 @@ describe('mapViewSortsToSorts', () => {
direction: 'asc',
},
];
const expectedSorts: Sort[] = [
const expectedSorts: RecordSort[] = [
{
id: 'id',
fieldMetadataId: '05731f68-6e7a-4903-8374-c0b6a9063482',
direction: 'asc',
definition: baseDefinition,

6
packages/twenty-front/src/modules/views/utils/mapViewSortsToSorts.ts
View File

@ -1,13 +1,13 @@
import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
import { isDefined } from 'twenty-shared';
import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
import { ViewSort } from '../types/ViewSort';
export const mapViewSortsToSorts = (
viewSorts: ViewSort[],
availableSortDefinitions: SortDefinition[],
): Sort[] => {
): RecordSort[] => {
return viewSorts
.map((viewSort) => {
const availableSortDefinition = availableSortDefinitions.find(
@ -16,7 +16,9 @@ export const mapViewSortsToSorts = (
);
if (!availableSortDefinition) return null;
return {
id: viewSort.id,
fieldMetadataId: viewSort.fieldMetadataId,
direction: viewSort.direction,
definition: availableSortDefinition,