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

toggle Field on label between singular and plural based on relation type (#8817)

Browse Source 
#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 <felix@twenty.com>
This commit is contained in:
Naifer
2024-12-02 14:14:21 +01:00
committed by GitHub
parent 0527bc296e
commit 2b0f67191a
8 changed files with 56 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx
View File

@ -107,6 +107,11 @@ export const SettingsDataModelFieldRelationForm = ({
),
);
const selectedRelationType = watchFormValue(
'relation.type',
initialRelationType,
);
const isMobile = useIsMobile();
return (
@ -152,7 +157,10 @@ export const SettingsDataModelFieldRelationForm = ({
/>
</StyledSelectsContainer>
<StyledInputsLabel>
Field on {selectedObjectMetadataItem?.labelPlural}
Field on{' '}
{selectedRelationType === RelationDefinitionType.ManyToOne
? selectedObjectMetadataItem?.labelSingular
: selectedObjectMetadataItem?.labelPlural}
</StyledInputsLabel>
<StyledInputsContainer>
<Controller

13
packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
View File

@ -15,7 +15,10 @@ import {
SettingsDataModelFieldPreviewCardProps,
} from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import {
FieldMetadataType,
RelationDefinitionType,
} from '~/generated-metadata/graphql';
type SettingsDataModelFieldRelationSettingsFormCardProps = {
fieldMetadataItem: Pick<FieldMetadataItem, 'icon' | 'label' | 'type'> &
Partial<Omit<FieldMetadataItem, 'icon' | 'label' | 'type'>>;
@ -86,6 +89,10 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
shrink
objectMetadataItem={objectMetadataItem}
relationObjectMetadataItem={relationObjectMetadataItem}
pluralizeLabel={
watchFormValue('relation.type') ===
RelationDefinitionType.ManyToOne
}
/>
<StyledRelationImage
src={relationTypeConfig.imageSrc}
@ -110,6 +117,10 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
shrink
objectMetadataItem={relationObjectMetadataItem}
relationObjectMetadataItem={objectMetadataItem}
pluralizeLabel={
watchFormValue('relation.type') !==
RelationDefinitionType.ManyToOne
}
/>
</StyledPreviewContent>
}