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

feat: display label identifier table cell as chip with link to Record… (#3503)

Browse Source 
* feat: display label identifier table cell as chip with link to RecordShowPage

Closes #3502

* Fix test

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Thaïs
2024-01-17 13:44:36 -03:00
committed by GitHub
parent 4b7e42c38e
commit 2d929c3b91
32 changed files with 162 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/twenty-front/src/modules/object-record/relation-picker/components/RelationPicker.tsx
View File

@ -1,6 +1,5 @@
import { useEffect } from 'react';
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
import { FieldDefinition } from '@/object-record/field/types/FieldDefinition';
import { FieldRelationMetadata } from '@/object-record/field/types/FieldMetadata';
import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
@ -31,7 +30,6 @@ export const RelationPicker = ({
const {
relationPickerSearchFilter,
setRelationPickerSearchFilter,
identifiersMapper,
searchQuery,
} = useRelationPicker({ relationPickerScopeId: 'relation-picker' });
@ -39,12 +37,6 @@ export const RelationPicker = ({
setRelationPickerSearchFilter(initialSearchFilter ?? '');
}, [initialSearchFilter, setRelationPickerSearchFilter]);
const { objectNameSingular: relationObjectNameSingular } =
useObjectNameSingularFromPlural({
objectNamePlural:
fieldDefinition.metadata.relationObjectMetadataNamePlural,
});
const entities = useFilteredSearchEntityQuery({
filters: [
{
@ -56,18 +48,15 @@ export const RelationPicker = ({
},
],
orderByField: 'createdAt',
mappingFunction: (record: any) =>
identifiersMapper?.(
record,
fieldDefinition.metadata.relationObjectMetadataNameSingular,
),
selectedIds: recordId ? [recordId] : [],
excludeEntityIds: excludeRecordIds,
objectNameSingular: relationObjectNameSingular,
objectNameSingular:
fieldDefinition.metadata.relationObjectMetadataNameSingular,
});
const handleEntitySelected = (selectedEntity: any | null | undefined) =>
onSubmit(selectedEntity ?? null);
const handleEntitySelected = (
selectedEntity: EntityForSelect | null | undefined,
) => onSubmit(selectedEntity ?? null);
return (
<SingleEntitySelect

2
packages/twenty-front/src/modules/object-record/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx
View File

@ -14,6 +14,8 @@ import { SingleEntitySelect } from '../SingleEntitySelect';
const entities = mockedPeopleData.map<EntityForSelect>((person) => ({
id: person.id,
name: person.name.firstName + ' ' + person.name.lastName,
avatarUrl: person.avatarUrl,
avatarType: 'rounded',
record: person,
}));

2
packages/twenty-front/src/modules/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates.ts
View File

@ -13,7 +13,6 @@ export const useRelationPickerScopedStates = (args?: {
);
const {
identifiersMapperState,
relationPickerSearchFilterState,
relationPickerPreselectedIdState,
searchQueryState,
@ -23,7 +22,6 @@ export const useRelationPickerScopedStates = (args?: {
return {
scopeId,
identifiersMapperState,
relationPickerSearchFilterState,
relationPickerPreselectedIdState,
searchQueryState,

7
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useRelationPicker.ts
View File

@ -15,7 +15,6 @@ export const useRelationPicker = (props?: useRelationPickeProps) => {
);
const {
identifiersMapperState,
searchQueryState,
relationPickerSearchFilterState,
relationPickerPreselectedIdState,
@ -23,10 +22,6 @@ export const useRelationPicker = (props?: useRelationPickeProps) => {
relationPickerScopedId: scopeId,
});
const [identifiersMapper, setIdentifiersMapper] = useRecoilState(
identifiersMapperState,
);
const [searchQuery, setSearchQuery] = useRecoilState(searchQueryState);
const [relationPickerSearchFilter, setRelationPickerSearchFilter] =
@ -37,8 +32,6 @@ export const useRelationPicker = (props?: useRelationPickeProps) => {
return {
scopeId,
identifiersMapper,
setIdentifiersMapper,
searchQuery,
setSearchQuery,
relationPickerSearchFilter,

8
packages/twenty-front/src/modules/object-record/relation-picker/states/identifiersMapperScopedState.ts
View File

@ -1,8 +0,0 @@
import { IdentifiersMapper } from '@/object-record/relation-picker/types/IdentifiersMapper';
import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
export const identifiersMapperScopedState =
createStateScopeMap<IdentifiersMapper | null>({
key: 'identifiersMapperScopedState',
defaultValue: null,
});

11
packages/twenty-front/src/modules/object-record/relation-picker/types/EntityForSelect.ts
View File

@ -1,9 +1,4 @@
import { AvatarType } from '@/users/components/Avatar';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
export type EntityForSelect = {
id: string;
name: string;
avatarUrl?: string;
avatarType?: AvatarType;
record: any;
};
export type EntityForSelect = ObjectRecordIdentifier & { record: ObjectRecord };

14
packages/twenty-front/src/modules/object-record/relation-picker/types/IdentifiersMapper.tsx
View File

@ -1,14 +0,0 @@
import { AvatarType } from '@/users/components/Avatar';
type RecordMappedToIdentifiers = {
id: string;
name: string;
avatarUrl?: string;
avatarType: AvatarType;
record: any;
};
export type IdentifiersMapper = (
record: any,
relationPickerType: string,
) => RecordMappedToIdentifiers | undefined;

7
packages/twenty-front/src/modules/object-record/relation-picker/utils/getRelationPickerScopedStates.ts
View File

@ -1,4 +1,3 @@
import { identifiersMapperScopedState } from '@/object-record/relation-picker/states/identifiersMapperScopedState';
import { relationPickerPreselectedIdScopedState } from '@/object-record/relation-picker/states/relationPickerPreselectedIdScopedState';
import { relationPickerSearchFilterScopedState } from '@/object-record/relation-picker/states/relationPickerSearchFilterScopedState';
import { searchQueryScopedState } from '@/object-record/relation-picker/states/searchQueryScopedState';
@ -9,11 +8,6 @@ export const getRelationPickerScopedStates = ({
}: {
relationPickerScopeId: string;
}) => {
const identifiersMapperState = getScopedStateDeprecated(
identifiersMapperScopedState,
relationPickerScopeId,
);
const searchQueryState = getScopedStateDeprecated(
searchQueryScopedState,
relationPickerScopeId,
@ -30,7 +24,6 @@ export const getRelationPickerScopedStates = ({
);
return {
identifiersMapperState,
relationPickerSearchFilterState,
relationPickerPreselectedIdState,
searchQueryState,