mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-23 03:51:36 +03:00
toggle Field on label between singular and plural based on relation type (#8817)
#7683   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
GitHub
parent
0527bc296e
commit
2b0f67191a
@ -1,5 +1,5 @@
|
||||
import { gql } from '@apollo/client';
|
||||
import * as Apollo from '@apollo/client';
|
||||
import { gql } from '@apollo/client';
|
||||
export type Maybe<T> = T | null;
|
||||
export type InputMaybe<T> = Maybe<T>;
|
||||
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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,
|
||||
};
|
||||
|
||||
@ -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<FieldJsonValue>,
|
||||
[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<FieldArrayValue>,
|
||||
};
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
}
|
||||
|
||||
@ -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) => (
|
||||
<StyledCard className={className} fullWidth>
|
||||
<StyledCardContent>
|
||||
<SettingsDataModelObjectSummary objectMetadataItem={objectMetadataItem} />
|
||||
<SettingsDataModelFieldPreview
|
||||
objectMetadataItem={objectMetadataItem}
|
||||
fieldMetadataItem={fieldMetadataItem}
|
||||
relationObjectMetadataItem={relationObjectMetadataItem}
|
||||
shrink={shrink}
|
||||
withFieldLabel={withFieldLabel}
|
||||
/>
|
||||
</StyledCardContent>
|
||||
</StyledCard>
|
||||
);
|
||||
pluralizeLabel = false,
|
||||
}: SettingsDataModelFieldPreviewCardProps) => {
|
||||
return (
|
||||
<StyledCard className={className} fullWidth>
|
||||
<StyledCardContent>
|
||||
<SettingsDataModelObjectSummary
|
||||
objectMetadataItem={objectMetadataItem}
|
||||
pluralizeLabel={pluralizeLabel}
|
||||
/>
|
||||
<SettingsDataModelFieldPreview
|
||||
objectMetadataItem={objectMetadataItem}
|
||||
fieldMetadataItem={fieldMetadataItem}
|
||||
relationObjectMetadataItem={relationObjectMetadataItem}
|
||||
shrink={shrink}
|
||||
withFieldLabel={withFieldLabel}
|
||||
/>
|
||||
</StyledCardContent>
|
||||
</StyledCard>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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 = ({
|
||||
<StyledIconContainer>
|
||||
<ObjectIcon size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
|
||||
</StyledIconContainer>
|
||||
<OverflowingTextWithTooltip text={objectMetadataItem.labelPlural} />
|
||||
<OverflowingTextWithTooltip
|
||||
text={
|
||||
pluralizeLabel
|
||||
? objectMetadataItem.labelPlural
|
||||
: objectMetadataItem.labelSingular
|
||||
}
|
||||
/>
|
||||
</StyledObjectName>
|
||||
<SettingsDataModelObjectTypeTag objectTypeLabel={objectTypeLabel} />
|
||||
</StyledObjectSummary>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user