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

Complete labelIdentifer, relationPicker first implementation (#2618)

Browse Source 
* Fix first column main identifier

* Fixes
This commit is contained in:
Charles Bochet
2023-11-21 18:32:36 +01:00
committed by GitHub
parent dd125ddfcc
commit 726e375616
27 changed files with 165 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/modules/companies/components/CompanyBoardCard.tsx
View File

@ -239,7 +239,7 @@ export const CompanyBoardCard = () => {
value={{
entityId: boardCardId,
recoilScopeId: boardCardId + viewField.fieldMetadataId,
isMainIdentifier: false,
isLabelIdentifier: false,
fieldDefinition: {
fieldMetadataId: viewField.fieldMetadataId,
label: viewField.label,

36
front/src/modules/object-metadata/components/ObjectMetadataItemsRelationPickerEffect.tsx
View File

@ -2,9 +2,22 @@ import { useEffect } from 'react';
import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
import { IdentifiersMapper } from '@/ui/input/components/internal/relation-picker/types/IdentifiersMapper';
import { getLogoUrlFromDomainName } from '~/utils';
export const ObjectMetadataItemsRelationPickerEffect = () => {
const { setIdentifiersMapper } = useRelationPicker();
const { setIdentifiersMapper, setSearchQuery } = useRelationPicker();
const computeFilterFields = (relationPickerType: string) => {
if (relationPickerType === 'company') {
return ['name'];
}
if (['workspaceMember', 'person'].includes(relationPickerType)) {
return ['name.firstName', 'name.lastName'];
}
return ['name'];
};
const identifierMapper: IdentifiersMapper = (
record: any,
@ -18,13 +31,15 @@ export const ObjectMetadataItemsRelationPickerEffect = () => {
return {
id: record.id,
name: record.name,
avatarUrl: record.avatarUrl,
avatarUrl: getLogoUrlFromDomainName(record.domainName ?? ''),
avatarType: 'squared',
record: record,
};
}
if (objectMetadataItemSingularName === 'workspaceMember') {
if (
['workspaceMember', 'person'].includes(objectMetadataItemSingularName)
) {
return {
id: record.id,
name: record.name.firstName + ' ' + record.name.lastName,
@ -34,6 +49,16 @@ export const ObjectMetadataItemsRelationPickerEffect = () => {
};
}
if (['opportunity'].includes(objectMetadataItemSingularName)) {
return {
id: record.id,
name: record.company.name,
avatarUrl: record.avatarUrl,
avatarType: 'rounded',
record: record,
};
}
return {
id: record.id,
name: record.name,
@ -45,7 +70,10 @@ export const ObjectMetadataItemsRelationPickerEffect = () => {
useEffect(() => {
setIdentifiersMapper(() => identifierMapper);
}, [setIdentifiersMapper]);
setSearchQuery({
computeFilterFields,
});
}, [setIdentifiersMapper, setSearchQuery]);
return <></>;
};

17
front/src/modules/object-metadata/hooks/useComputeDefinitionsFromFieldMetadata.ts
View File

@ -22,13 +22,16 @@ export const useComputeDefinitionsFromFieldMetadata = (
const columnDefinitions: ColumnDefinition<FieldMetadata>[] = useMemo(
() =>
activeFieldMetadataItems.map((field, index) =>
formatFieldMetadataItemAsColumnDefinition({
position: index,
field,
}),
),
[activeFieldMetadataItems],
objectMetadataItem
? activeFieldMetadataItems.map((field, index) =>
formatFieldMetadataItemAsColumnDefinition({
position: index,
field,
objectMetadataItem,
}),
)
: [],
[activeFieldMetadataItems, objectMetadataItem],
);
const filterDefinitions = formatFieldMetadataItemsAsFilterDefinitions({

21
front/src/modules/object-metadata/hooks/useObjectMainIdentifier.ts
View File

@ -1,21 +0,0 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { Nullable } from '~/types/Nullable';
export const useObjectMainIdentifier = (
objectMetadataItem?: Nullable<ObjectMetadataItem>,
) => {
if (!objectMetadataItem) {
return {};
}
const labelIdentifierFieldMetadataId = objectMetadataItem.fields.find(
({ name }) => name === 'name',
)?.id;
const basePathToShowPage = `/object/${objectMetadataItem.nameSingular}/`;
return {
labelIdentifierFieldMetadataId,
basePathToShowPage,
};
};

8
front/src/modules/object-metadata/hooks/useObjectMetadataItem.ts
View File

@ -56,7 +56,15 @@ export const useObjectMetadataItem = ({
objectMetadataItem,
});
const labelIdentifierFieldMetadataId = objectMetadataItem?.fields.find(
({ name }) => name === 'name',
)?.id;
const basePathToShowPage = `/object/${objectMetadataItem?.nameSingular}/`;
return {
labelIdentifierFieldMetadataId,
basePathToShowPage,
objectMetadataItem,
objectNotFoundInMetadata,
findManyQuery,

9
front/src/modules/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition.ts
View File

@ -1,3 +1,4 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { parseFieldRelationType } from '@/object-metadata/utils/parseFieldRelationType';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { ColumnDefinition } from '@/ui/object/record-table/types/ColumnDefinition';
@ -9,9 +10,11 @@ import { parseFieldType } from './parseFieldType';
export const formatFieldMetadataItemAsColumnDefinition = ({
position,
field,
objectMetadataItem,
}: {
position: number;
field: FieldMetadataItem;
objectMetadataItem: ObjectMetadataItem;
}): ColumnDefinition<FieldMetadata> => {
const relationObjectMetadataItem =
field.toRelationMetadata?.fromObjectMetadata;
@ -26,9 +29,11 @@ export const formatFieldMetadataItemAsColumnDefinition = ({
fieldName: field.name,
placeHolder: field.label,
relationType: parseFieldRelationType(field),
objectMetadataNameSingular:
relationObjectMetadataNameSingular:
relationObjectMetadataItem?.nameSingular ?? '',
objectMetadataNamePlural: relationObjectMetadataItem?.namePlural ?? '',
relationObjectMetadataNamePlural:
relationObjectMetadataItem?.namePlural ?? '',
objectMetadataNameSingular: objectMetadataItem.nameSingular ?? '',
},
iconName: field.icon ?? 'Icon123',
isVisible: true,

3
front/src/modules/object-record/components/RecordShowPage.tsx
View File

@ -166,11 +166,12 @@ export const RecordShowPage = () => {
value={{
entityId: object.id,
recoilScopeId: object.id + metadataField.id,
isMainIdentifier: false,
isLabelIdentifier: false,
fieldDefinition:
formatFieldMetadataItemAsColumnDefinition({
field: metadataField,
position: index,
objectMetadataItem,
}),
useUpdateEntityMutation: useUpdateOneObjectMutation,
hotkeyScope: InlineCellHotkeyScope.InlineCell,

10
front/src/modules/object-record/components/RecordTableEffect.tsx
View File

@ -1,7 +1,6 @@
import { useEffect } from 'react';
import { useComputeDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useComputeDefinitionsFromFieldMetadata';
import { useObjectMainIdentifier } from '@/object-metadata/hooks/useObjectMainIdentifier';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useRecordTableContextMenuEntries } from '@/object-record/hooks/useRecordTableContextMenuEntries';
import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
@ -17,13 +16,14 @@ export const RecordTableEffect = () => {
setObjectMetadataConfig,
} = useRecordTable();
const { objectMetadataItem } = useObjectMetadataItem({
const {
objectMetadataItem,
basePathToShowPage,
labelIdentifierFieldMetadataId,
} = useObjectMetadataItem({
objectNamePlural,
});
const { basePathToShowPage, labelIdentifierFieldMetadataId } =
useObjectMainIdentifier(objectMetadataItem);
const { columnDefinitions, filterDefinitions, sortDefinitions } =
useComputeDefinitionsFromFieldMetadata(objectMetadataItem);

15
front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx
View File

@ -90,11 +90,12 @@ export const SettingsObjectFieldPreview = ({
objectMetadataId,
});
const { defaultValue: relationDefaultValue } = useRelationFieldPreview({
relationObjectMetadataId,
skipDefaultValue:
fieldMetadata.type !== FieldMetadataType.Relation || hasValue,
});
const { defaultValue: relationDefaultValue, relationObjectMetadataItem } =
useRelationFieldPreview({
relationObjectMetadataId,
skipDefaultValue:
fieldMetadata.type !== FieldMetadataType.Relation || hasValue,
});
const defaultValue =
fieldMetadata.type === FieldMetadataType.Relation
@ -137,7 +138,7 @@ export const SettingsObjectFieldPreview = ({
<FieldContext.Provider
value={{
entityId,
isMainIdentifier: false,
isLabelIdentifier: false,
fieldDefinition: {
type: parseFieldType(fieldMetadata.type),
iconName: 'FieldIcon',
@ -145,6 +146,8 @@ export const SettingsObjectFieldPreview = ({
label: fieldMetadata.label,
metadata: {
fieldName,
relationObjectMetadataNameSingular:
relationObjectMetadataItem?.nameSingular,
},
},
hotkeyScope: 'field-preview',

5
front/src/modules/settings/data-model/hooks/useFieldPreview.ts
View File

@ -26,7 +26,10 @@ export const useFieldPreview = ({
const fieldName = fieldMetadata.id
? objectMetadataItem?.fields.find(({ id }) => id === fieldMetadata.id)?.name
: undefined;
const value = fieldName ? firstRecord?.[fieldName] : undefined;
const value =
fieldMetadata.type !== 'RELATION' && fieldName
? firstRecord?.[fieldName]
: undefined;
return {
entityId: firstRecord?.id || `${objectMetadataId}-no-records`,

6
front/src/modules/settings/data-model/hooks/useRelationFieldPreview.ts
View File

@ -1,5 +1,6 @@
import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjectRecords';
import { capitalize } from '~/utils/string/capitalize';
export const useRelationFieldPreview = ({
relationObjectMetadataId,
@ -20,6 +21,9 @@ export const useRelationFieldPreview = ({
});
return {
defaultValue: relationObjects?.[0],
relationObjectMetadataItem,
defaultValue: relationObjects?.[0] ?? {
name: capitalize(relationObjectMetadataItem?.nameSingular ?? ''),
},
};
};

11
front/src/modules/ui/input/components/internal/relation-picker/RelationPicker.tsx
View File

@ -37,7 +37,8 @@ export const RelationPicker = ({
}, [initialSearchFilter, setRelationPickerSearchFilter]);
const { findManyQuery } = useObjectMetadataItem({
objectNameSingular: fieldDefinition.metadata.objectMetadataNameSingular,
objectNameSingular:
fieldDefinition.metadata.relationObjectMetadataNameSingular,
});
const useFindManyQuery = (options: any) => useQuery(findManyQuery, options);
@ -49,8 +50,8 @@ export const RelationPicker = ({
filters: [
{
fieldNames:
searchQuery?.filterFields?.(
fieldDefinition.metadata.objectMetadataNameSingular,
searchQuery?.computeFilterFields?.(
fieldDefinition.metadata.relationObjectMetadataNameSingular,
) ?? [],
filter: relationPickerSearchFilter,
},
@ -59,10 +60,10 @@ export const RelationPicker = ({
mappingFunction: (record: any) =>
identifiersMapper?.(
record,
fieldDefinition.metadata.objectMetadataNameSingular,
fieldDefinition.metadata.relationObjectMetadataNameSingular,
),
selectedIds: recordId ? [recordId] : [],
objectNamePlural: fieldDefinition.metadata.objectMetadataNamePlural,
objectNamePlural: fieldDefinition.metadata.relationObjectMetadataNamePlural,
});
const handleEntitySelected = async (selectedUser: any | null | undefined) => {

2
front/src/modules/ui/input/components/internal/relation-picker/types/SearchQuery.tsx
View File

@ -1,3 +1,3 @@
export type SearchQuery = {
filterFields: (relationPickerType: string) => string[];
computeFilterFields: (relationPickerType: string) => string[];
};

9
front/src/modules/ui/object/field/components/FieldDisplay.tsx
View File

@ -1,5 +1,6 @@
import { useContext } from 'react';
import { ChipFieldDisplay } from '@/ui/object/field/meta-types/display/components/ChipFieldDisplay';
import { FullNameFieldDisplay } from '@/ui/object/field/meta-types/display/components/FullNameFieldDisplay';
import { LinkFieldDisplay } from '@/ui/object/field/meta-types/display/components/LinkFieldDisplay';
import { RelationFieldDisplay } from '@/ui/object/field/meta-types/display/components/RelationFieldDisplay';
@ -24,8 +25,14 @@ import { isFieldRelation } from '../types/guards/isFieldRelation';
import { isFieldText } from '../types/guards/isFieldText';
export const FieldDisplay = () => {
const { fieldDefinition } = useContext(FieldContext);
const { fieldDefinition, isLabelIdentifier } = useContext(FieldContext);
if (
isLabelIdentifier &&
(isFieldText(fieldDefinition) || isFieldFullName(fieldDefinition))
) {
return <ChipFieldDisplay />;
}
return (
<>
{isFieldRelation(fieldDefinition) ? (

7
front/src/modules/ui/object/field/contexts/FieldContext.ts
View File

@ -10,12 +10,7 @@ export type GenericFieldContextType = {
entityId: string;
recoilScopeId?: string;
hotkeyScope: string;
isMainIdentifier: boolean;
mainIdentifierMapper?: (record: any) => {
name: string;
avatarUrl?: string;
avatarType: string;
};
isLabelIdentifier: boolean;
basePathToShowPage?: string;
};

2
front/src/modules/ui/object/field/meta-types/__stories__/FieldContextProvider.tsx
View File

@ -18,7 +18,7 @@ export const FieldContextProvider = ({
<FieldContext.Provider
value={{
entityId: entityId ?? '1',
isMainIdentifier: false,
isLabelIdentifier: false,
recoilScopeId: '1',
hotkeyScope: 'hotkey-scope',
fieldDefinition,

30
front/src/modules/ui/object/field/meta-types/display/components/ChipFieldDisplay.tsx
View File

@ -1,10 +1,24 @@
import { EntityChip } from '@/ui/display/chip/components/EntityChip';
import { useChipField } from '@/ui/object/field/meta-types/hooks/useChipField';
export const ChipFieldDisplay = () => {
// const { avatarFieldValue, contentFieldValue, entityId } = useChipField();
// return (
// <ChipDisplay
// displayName={contentFieldValue}
// avatarUrlValue={avatarFieldValue}
// entityId={entityId}
// />
// );
const {
record,
entityId,
identifiersMapper,
objectNameSingular,
basePathToShowPage,
} = useChipField();
const identifiers = identifiersMapper?.(record, objectNameSingular ?? '');
return (
<EntityChip
name={identifiers?.name ?? ''}
avatarUrl={identifiers?.avatarUrl}
avatarType={identifiers?.avatarType}
entityId={entityId}
linkToEntity={basePathToShowPage + entityId}
/>
);
};

11
front/src/modules/ui/object/field/meta-types/display/components/DoubleTextChipFieldDisplay.tsx
View File

@ -1,11 +0,0 @@
export const DoubleTextChipFieldDisplay = () => {
// const {} = useFullNameField();
// const content = [firstValue, secondValue].filter(Boolean).join(' ');
// return (
// <ChipDisplay
// displayName={content}
// avatarUrlValue={avatarUrl}
// entityId={entityId}
// />
// );
};

2
front/src/modules/ui/object/field/meta-types/display/components/RelationFieldDisplay.tsx
View File

@ -13,7 +13,7 @@ export const RelationFieldDisplay = () => {
const objectIdentifiers = identifiersMapper(
fieldValue,
fieldDefinition.metadata.objectMetadataNameSingular,
fieldDefinition.metadata.relationObjectMetadataNameSingular,
);
return (

2
front/src/modules/ui/object/field/meta-types/display/components/__stories__/DateFieldDisplay.stories.tsx
View File

@ -26,7 +26,7 @@ const meta: Meta = {
<FieldContext.Provider
value={{
entityId: '',
isMainIdentifier: false,
isLabelIdentifier: false,
fieldDefinition: {
fieldMetadataId: 'date',
label: 'Date',

2
front/src/modules/ui/object/field/meta-types/display/components/__stories__/EmailFieldDisplay.stories.tsx
View File

@ -25,7 +25,7 @@ const meta: Meta = {
<FieldContext.Provider
value={{
entityId: '',
isMainIdentifier: false,
isLabelIdentifier: false,
fieldDefinition: {
fieldMetadataId: 'email',
label: 'Email',

2
front/src/modules/ui/object/field/meta-types/display/components/__stories__/NumberFieldDisplay.stories.tsx
View File

@ -24,7 +24,7 @@ const meta: Meta = {
<FieldContext.Provider
value={{
entityId: '',
isMainIdentifier: false,
isLabelIdentifier: false,
fieldDefinition: {
fieldMetadataId: 'number',
label: 'Number',

2
front/src/modules/ui/object/field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx
View File

@ -25,7 +25,7 @@ const meta: Meta = {
<FieldContext.Provider
value={{
entityId: '',
isMainIdentifier: false,
isLabelIdentifier: false,
fieldDefinition: {
fieldMetadataId: 'phone',
label: 'Phone',

2
front/src/modules/ui/object/field/meta-types/display/components/__stories__/TextFieldDisplay.stories.tsx
View File

@ -24,7 +24,7 @@ const meta: Meta = {
<FieldContext.Provider
value={{
entityId: '',
isMainIdentifier: false,
isLabelIdentifier: false,
fieldDefinition: {
fieldMetadataId: 'text',
label: 'Text',

31
front/src/modules/ui/object/field/meta-types/hooks/useChipField.ts Normal file
View File

@ -0,0 +1,31 @@
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
import { entityFieldsFamilyState } from '@/ui/object/field/states/entityFieldsFamilyState';
import { isFieldFullName } from '@/ui/object/field/types/guards/isFieldFullName';
import { isFieldText } from '@/ui/object/field/types/guards/isFieldText';
import { FieldContext } from '../../contexts/FieldContext';
export const useChipField = () => {
const { entityId, fieldDefinition, basePathToShowPage } =
useContext(FieldContext);
const objectNameSingular =
isFieldText(fieldDefinition) || isFieldFullName(fieldDefinition)
? fieldDefinition.metadata.objectMetadataNameSingular
: undefined;
const record = useRecoilValue<any | null>(entityFieldsFamilyState(entityId));
const { identifiersMapper } = useRelationPicker();
return {
basePathToShowPage,
entityId,
objectNameSingular,
record,
identifiersMapper,
};
};

6
front/src/modules/ui/object/field/types/FieldMetadata.ts
View File

@ -9,6 +9,7 @@ export type FieldBooleanMetadata = {
};
export type FieldTextMetadata = {
objectMetadataNameSingular: string;
placeHolder: string;
fieldName: string;
};
@ -36,6 +37,7 @@ export type FieldCurrencyMetadata = {
};
export type FieldFullNameMetadata = {
objectMetadataNameSingular: string;
placeHolder: string;
fieldName: string;
};
@ -64,8 +66,8 @@ export type FieldRelationMetadata = {
fieldName: string;
useEditButton?: boolean;
relationType?: FieldDefinitionRelationType;
objectMetadataNameSingular: string;
objectMetadataNamePlural: string;
relationObjectMetadataNameSingular: string;
relationObjectMetadataNamePlural: string;
};
export type FieldMetadata =

3
front/src/modules/ui/object/record-table/components/RecordTableCell.tsx
View File

@ -60,7 +60,8 @@ export const RecordTableCell = ({ cellIndex }: { cellIndex: number }) => {
fieldDefinition: columnDefinition,
useUpdateEntityMutation: () => [updateEntityMutation, {}],
hotkeyScope: customHotkeyScope,
isMainIdentifier:
basePathToShowPage: objectMetadataConfig?.basePathToShowPage,
isLabelIdentifier:
columnDefinition.fieldMetadataId ===
objectMetadataConfig?.labelIdentifierFieldMetadataId,
}}