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

* 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

View File

@ -1,11 +1,9 @@
import { useEffect } from 'react';
import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
import { IdentifiersMapper } from '@/object-record/relation-picker/types/IdentifiersMapper';
import { getLogoUrlFromDomainName } from '~/utils';
export const ObjectMetadataItemsRelationPickerEffect = () => {
const { setIdentifiersMapper, setSearchQuery } = useRelationPicker({
const { setSearchQuery } = useRelationPicker({
relationPickerScopeId: 'relation-picker',
});
@ -21,62 +19,9 @@ export const ObjectMetadataItemsRelationPickerEffect = () => {
return ['name'];
};
const identifierMapper: IdentifiersMapper = (
record: any,
objectMetadataItemSingularName: string,
) => {
if (!record) {
return;
}
if (objectMetadataItemSingularName === 'company') {
return {
id: record.id,
name: record.name,
avatarUrl: getLogoUrlFromDomainName(record.domainName ?? ''),
avatarType: 'squared',
record: record,
};
}
if (
['workspaceMember', 'person'].includes(objectMetadataItemSingularName)
) {
return {
id: record.id,
name:
(record.name?.firstName ?? '') + ' ' + (record.name?.lastName ?? ''),
avatarUrl: record.avatarUrl,
avatarType: 'rounded',
record: record,
};
}
if (['opportunity'].includes(objectMetadataItemSingularName)) {
return {
id: record.id,
name: record?.company?.name ?? record.name,
avatarUrl: record.avatarUrl,
avatarType: 'rounded',
record: record,
};
}
return {
id: record.id,
name: record.name,
avatarUrl: record.avatarUrl,
avatarType: 'rounded',
record,
};
};
useEffect(() => {
setIdentifiersMapper(() => identifierMapper);
setSearchQuery({
computeFilterFields,
});
}, [setIdentifiersMapper, setSearchQuery]);
setSearchQuery({ computeFilterFields });
}, [setSearchQuery]);
return <></>;
};

View File

@ -1,16 +1,8 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
export const useMapToObjectRecordIdentifier = ({
objectMetadataItem,
}: {
objectMetadataItem: ObjectMetadataItem;
}): ((record: ObjectRecord) => ObjectRecordIdentifier) => {
return (record: ObjectRecord) =>
getObjectRecordIdentifier({
objectMetadataItem,
record,
});
};
export const useMapToObjectRecordIdentifier =
({ objectMetadataItem }: { objectMetadataItem: ObjectMetadataItem }) =>
(record: ObjectRecord) =>
getObjectRecordIdentifier({ objectMetadataItem, record });

View File

@ -14,34 +14,25 @@ export const getObjectRecordIdentifier = ({
objectMetadataItem: ObjectMetadataItem;
record: ObjectRecord;
}): ObjectRecordIdentifier => {
switch (objectMetadataItem.nameSingular) {
case CoreObjectNameSingular.Opportunity:
return {
id: record.id,
name: record?.company?.name ?? record.name,
avatarUrl: record.avatarUrl,
avatarType: 'rounded',
linkToShowPage: `/opportunities/${record.id}`,
};
if (objectMetadataItem.nameSingular === CoreObjectNameSingular.Opportunity) {
return {
id: record.id,
name: record?.company?.name ?? record.name,
avatarUrl: record.avatarUrl,
avatarType: 'rounded',
linkToShowPage: `/opportunities/${record.id}`,
};
}
const labelIdentifierFieldMetadataItem =
getLabelIdentifierFieldMetadataItem(objectMetadataItem);
let labelIdentifierFieldValue = '';
switch (labelIdentifierFieldMetadataItem?.type) {
case FieldMetadataType.FullName: {
labelIdentifierFieldValue = `${record.name?.firstName ?? ''} ${
record.name?.lastName ?? ''
}`;
break;
}
default:
labelIdentifierFieldValue = labelIdentifierFieldMetadataItem
? record[labelIdentifierFieldMetadataItem.name]
const labelIdentifierFieldValue =
labelIdentifierFieldMetadataItem?.type === FieldMetadataType.FullName
? `${record.name?.firstName ?? ''} ${record.name?.lastName ?? ''}`
: labelIdentifierFieldMetadataItem?.name
? (record[labelIdentifierFieldMetadataItem.name] as string | number)
: '';
}
const imageIdentifierFieldMetadata = objectMetadataItem.fields.find(
(field) => field.id === objectMetadataItem.imageIdentifierFieldMetadataId,
@ -57,9 +48,9 @@ export const getObjectRecordIdentifier = ({
: 'rounded';
const avatarUrl =
objectMetadataItem.nameSingular === CoreObjectNameSingular.Company
(objectMetadataItem.nameSingular === CoreObjectNameSingular.Company
? getLogoUrlFromDomainName(record['domainName'] ?? '')
: imageIdentifierFieldValue ?? null;
: imageIdentifierFieldValue) ?? '';
const basePathToShowPage = getBasePathToShowPage({
objectMetadataItem,
@ -69,7 +60,7 @@ export const getObjectRecordIdentifier = ({
return {
id: record.id,
name: labelIdentifierFieldValue,
name: `${labelIdentifierFieldValue}`,
avatarUrl,
avatarType,
linkToShowPage,