From 2b0f67191ab50a91a66262b9a692c0a1cc305d07 Mon Sep 17 00:00:00 2001 From: Naifer <161821705+omarNaifer12@users.noreply.github.com> Date: Mon, 2 Dec 2024 14:14:21 +0100 Subject: [PATCH] toggle Field on label between singular and plural based on relation type (#8817) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #7683 ![labelPlural](https://github.com/user-attachments/assets/3e620d7e-dd51-4e4e-a9ba-289f2685ddf3) ![labelSingular](https://github.com/user-attachments/assets/84739ac5-29b4-48c8-8a71-3f8f2816641b) Hello, I’ve implemented the logic for dynamically toggling the Field on label between singular and plural based on the relation type selected by the user. Here's an overview of the changes: Added a variable selectedRelationType to store the user’s selected relation type. Based on this variable, I determine whether to use labelPlural or labelSingular from the selectedObjectMetadataItem. Please review my changes and let me know if there's anything that needs improvement . --------- Co-authored-by: Félix Malfait --- .../twenty-front/src/generated/graphql.tsx | 2 +- .../SettingsCompositeFieldTypeConfigs.ts | 2 +- .../constants/SettingsFieldTypeConfigs.ts | 2 +- .../SettingsNonCompositeFieldTypeConfigs.ts | 4 +-- .../SettingsDataModelFieldRelationForm.tsx | 10 +++++- ...DataModelFieldRelationSettingsFormCard.tsx | 13 ++++++- .../SettingsDataModelFieldPreviewCard.tsx | 35 +++++++++++-------- .../SettingsDataModelObjectSummary.tsx | 10 +++++- 8 files changed, 56 insertions(+), 22 deletions(-) diff --git a/packages/twenty-front/src/generated/graphql.tsx b/packages/twenty-front/src/generated/graphql.tsx index 513273ddd..f3a092a0f 100644 --- a/packages/twenty-front/src/generated/graphql.tsx +++ b/packages/twenty-front/src/generated/graphql.tsx @@ -1,5 +1,5 @@ -import { gql } from '@apollo/client'; import * as Apollo from '@apollo/client'; +import { gql } from '@apollo/client'; export type Maybe = T | null; export type InputMaybe = Maybe; export type Exact = { [K in keyof T]: T[K] }; diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsCompositeFieldTypeConfigs.ts b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsCompositeFieldTypeConfigs.ts index d139f634e..cd6c9a8b4 100644 --- a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsCompositeFieldTypeConfigs.ts +++ b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsCompositeFieldTypeConfigs.ts @@ -110,7 +110,7 @@ export const SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS = { label: 'Full Name', Icon: IllustrationIconUser, exampleValue: { firstName: 'John', lastName: 'Doe' }, - category: 'Advanced', + category: 'Basic', subFields: ['firstName', 'lastName'], filterableSubFields: ['firstName', 'lastName'], labelBySubField: { diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts index 1105be7ca..27304c611 100644 --- a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts +++ b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts @@ -2,6 +2,6 @@ import { SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS } from '@/settings/data-model/con import { SETTINGS_NON_COMPOSITE_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsNonCompositeFieldTypeConfigs'; export const SETTINGS_FIELD_TYPE_CONFIGS = { - ...SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS, ...SETTINGS_NON_COMPOSITE_FIELD_TYPE_CONFIGS, + ...SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS, }; diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsNonCompositeFieldTypeConfigs.ts b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsNonCompositeFieldTypeConfigs.ts index 1039646c4..0085c179b 100644 --- a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsNonCompositeFieldTypeConfigs.ts +++ b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsNonCompositeFieldTypeConfigs.ts @@ -120,7 +120,7 @@ export const SETTINGS_NON_COMPOSITE_FIELD_TYPE_CONFIGS: SettingsNonCompositeFiel label: 'JSON', Icon: IllustrationIconJson, exampleValue: { key: 'value' }, - category: 'Basic', + category: 'Advanced', } as const satisfies SettingsFieldTypeConfig, [FieldMetadataType.RichText]: { label: 'Rich Text', @@ -131,7 +131,7 @@ export const SETTINGS_NON_COMPOSITE_FIELD_TYPE_CONFIGS: SettingsNonCompositeFiel [FieldMetadataType.Array]: { label: 'Array', Icon: IllustrationIconArray, - category: 'Basic', + category: 'Advanced', exampleValue: ['value1', 'value2'], } as const satisfies SettingsFieldTypeConfig, }; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx index 1f1d2a111..dd3f1814f 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx @@ -107,6 +107,11 @@ export const SettingsDataModelFieldRelationForm = ({ ), ); + const selectedRelationType = watchFormValue( + 'relation.type', + initialRelationType, + ); + const isMobile = useIsMobile(); return ( @@ -152,7 +157,10 @@ export const SettingsDataModelFieldRelationForm = ({ /> - Field on {selectedObjectMetadataItem?.labelPlural} + Field on{' '} + {selectedRelationType === RelationDefinitionType.ManyToOne + ? selectedObjectMetadataItem?.labelSingular + : selectedObjectMetadataItem?.labelPlural} & Partial>; @@ -86,6 +89,10 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({ shrink objectMetadataItem={objectMetadataItem} relationObjectMetadataItem={relationObjectMetadataItem} + pluralizeLabel={ + watchFormValue('relation.type') === + RelationDefinitionType.ManyToOne + } /> } diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx index 6a75b9997..a8b742852 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx @@ -10,6 +10,7 @@ import { Card, CardContent } from 'twenty-ui'; export type SettingsDataModelFieldPreviewCardProps = SettingsDataModelFieldPreviewProps & { className?: string; + pluralizeLabel?: boolean; }; const StyledCard = styled(Card)` @@ -28,17 +29,23 @@ export const SettingsDataModelFieldPreviewCard = ({ relationObjectMetadataItem, shrink, withFieldLabel = true, -}: SettingsDataModelFieldPreviewCardProps) => ( - - - - - - -); + pluralizeLabel = false, +}: SettingsDataModelFieldPreviewCardProps) => { + return ( + + + + + + + ); +}; diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectSummary.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectSummary.tsx index 270ef7a28..451737142 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectSummary.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectSummary.tsx @@ -9,6 +9,7 @@ import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLab export type SettingsDataModelObjectSummaryProps = { className?: string; objectMetadataItem: ObjectMetadataItem; + pluralizeLabel?: boolean; }; const StyledObjectSummary = styled.div` @@ -30,6 +31,7 @@ const StyledIconContainer = styled.div` export const SettingsDataModelObjectSummary = ({ className, objectMetadataItem, + pluralizeLabel = true, }: SettingsDataModelObjectSummaryProps) => { const theme = useTheme(); @@ -43,7 +45,13 @@ export const SettingsDataModelObjectSummary = ({ - +