adding the frontend settings option to select countries by default

This commit is contained in:
guillim
2024-11-19 17:42:29 +01:00
parent 6291ca5b17
commit 1352706785
3 changed files with 139 additions and 0 deletions

View File

@@ -0,0 +1,76 @@
import { Controller, useFormContext } from 'react-hook-form';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
import { Select } from '@/ui/input/components/Select';
import styled from '@emotion/styled';
import { CardContent } from 'twenty-ui';
import { z } from 'zod';
const StyledFormCardTitle = styled.div`
color: ${({ theme }) => theme.font.color.light};
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-bottom: ${({ theme }) => theme.spacing(1)};
`;
type SettingsDataModelFieldAddressFormProps = {
disabled?: boolean;
defaultCountry?: string;
fieldMetadataItem: Pick<
FieldMetadataItem,
'icon' | 'label' | 'type' | 'defaultValue' | 'settings'
>;
};
export const addressFieldDefaultValueSchema = z.object({
defaultCountry: z.string().nullable(),
});
export const settingsDataModelFieldAddressFormSchema = z.object({
settings: addressFieldDefaultValueSchema,
});
export type SettingsDataModelFieldTextFormValues = z.infer<
typeof settingsDataModelFieldAddressFormSchema
>;
export const SettingsDataModelFieldAddressForm = ({
disabled,
fieldMetadataItem,
}: SettingsDataModelFieldAddressFormProps) => {
const { control } = useFormContext<SettingsDataModelFieldTextFormValues>();
const countries = useCountries().map(country => ({
label: country.countryName,
value: country.countryName
}))
return (
<CardContent>
<Controller
name="settings"
defaultValue={{
defaultCountry: fieldMetadataItem?.settings?.defaultCountry || 'United States',
}}
control={control}
render={({ field: { onChange, value } }) => {
const defaultCountry = value?.defaultCountry ?? 0;
return (
<>
<StyledFormCardTitle>Default Country</StyledFormCardTitle>
<Select
disabled={disabled}
dropdownId="selectDefaultCountry"
options={countries}
value={defaultCountry}
onChange={(value) => onChange({ defaultCountry: value })}
withSearchInput={true}
dropdownWidthAuto={true}
/>
</>
);
}}
/>
</CardContent>
);
};

View File

@@ -0,0 +1,45 @@
import styled from '@emotion/styled';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
import { SettingsDataModelFieldAddressForm } from '@/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm';
import {
SettingsDataModelFieldPreviewCard,
SettingsDataModelFieldPreviewCardProps,
} from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
type SettingsDataModelFieldAddressSettingsFormCardProps = {
disabled?: boolean;
fieldMetadataItem: Pick<
FieldMetadataItem,
'icon' | 'label' | 'type' | 'defaultValue'
>;
} & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)`
flex: 1 1 100%;
`;
export const SettingsDataModelFieldAddressSettingsFormCard = ({
disabled,
fieldMetadataItem,
objectMetadataItem,
}: SettingsDataModelFieldAddressSettingsFormCardProps) => {
return (
<SettingsDataModelPreviewFormCard
preview={
<StyledFieldPreviewCard
fieldMetadataItem={fieldMetadataItem}
objectMetadataItem={objectMetadataItem}
/>
}
form={
<SettingsDataModelFieldAddressForm
disabled={disabled}
fieldMetadataItem={fieldMetadataItem}
/>
}
/>
);
};

View File

@@ -5,6 +5,8 @@ import { z } from 'zod';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsFieldTypeConfigs';
import { settingsDataModelFieldAddressFormSchema } from '@/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm';
import { SettingsDataModelFieldAddressSettingsFormCard } from '@/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressSettingsFormCard';
import { settingsDataModelFieldBooleanFormSchema } from '@/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm';
import { SettingsDataModelFieldBooleanSettingsFormCard } from '@/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanSettingsFormCard';
import { settingsDataModelFieldtextFormSchema } from '@/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextForm';
@@ -64,6 +66,10 @@ const textFieldFormSchema = z
.object({ type: z.literal(FieldMetadataType.Text) })
.merge(settingsDataModelFieldtextFormSchema);
const addressFieldFormSchema = z
.object({ type: z.literal(FieldMetadataType.Address) })
.merge(settingsDataModelFieldAddressFormSchema);
const otherFieldsFormSchema = z.object({
type: z.enum(
Object.keys(
@@ -76,6 +82,7 @@ const otherFieldsFormSchema = z.object({
FieldMetadataType.Date,
FieldMetadataType.DateTime,
FieldMetadataType.Number,
FieldMetadataType.Address,
FieldMetadataType.Text,
]),
) as [FieldMetadataType, ...FieldMetadataType[]],
@@ -94,6 +101,7 @@ export const settingsDataModelFieldSettingsFormSchema = z.discriminatedUnion(
multiSelectFieldFormSchema,
numberFieldFormSchema,
textFieldFormSchema,
addressFieldFormSchema,
otherFieldsFormSchema,
],
);
@@ -200,6 +208,16 @@ export const SettingsDataModelFieldSettingsFormCard = ({
);
}
if (fieldMetadataItem.type === FieldMetadataType.Address) {
console.log('fieldMetadataItem', fieldMetadataItem);
return (
<SettingsDataModelFieldAddressSettingsFormCard
fieldMetadataItem={fieldMetadataItem}
objectMetadataItem={objectMetadataItem}
/>
);
}
if (
fieldMetadataItem.type === FieldMetadataType.Select ||
fieldMetadataItem.type === FieldMetadataType.MultiSelect