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

search in settings phones (#9228)

Browse Source 
tiny PR to add the search feature in the  phones settings dropdown

was a request from @Bonapara a month ago :)
This commit is contained in:
Guillim
2024-12-24 16:36:18 +01:00
committed by GitHub
parent cba38ab496
commit 1f789a8b95
2 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/twenty-front/src/modules/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm.tsx
View File

@ -31,19 +31,22 @@ export const SettingsDataModelFieldAddressForm = ({
fieldMetadataItem,
}: SettingsDataModelFieldAddressFormProps) => {
const { control } = useFormContext<SettingsDataModelFieldTextFormValues>();
const countries = useCountries()
.sort((a, b) => a.countryName.localeCompare(b.countryName))
.map<SelectOption<string>>(({ countryName, Flag }) => ({
label: countryName,
value: countryName,
Icon: (props: IconComponentProps) =>
Flag({ width: props.size, height: props.size }),
}));
countries.unshift({
label: 'No country',
value: '',
Icon: IconCircleOff,
});
const countries = [
{
label: 'No country',
value: '',
Icon: IconCircleOff,
},
...useCountries()
.sort((a, b) => a.countryName.localeCompare(b.countryName))
.map<SelectOption<string>>(({ countryName, Flag }) => ({
label: countryName,
value: countryName,
Icon: (props: IconComponentProps) =>
Flag({ width: props.size, height: props.size }),
})),
];
const defaultDefaultValue = {
addressStreet1: "''",
addressStreet2: null,

7
packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx
View File

@ -7,7 +7,7 @@ import { countryCodeToCallingCode } from '@/settings/data-model/fields/preview/u
import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
import { Select } from '@/ui/input/components/Select';
import { CountryCode } from 'libphonenumber-js';
import { IconMap } from 'twenty-ui';
import { IconCircleOff, IconComponentProps, IconMap } from 'twenty-ui';
import { z } from 'zod';
import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
@ -38,12 +38,14 @@ export const SettingsDataModelFieldPhonesForm = ({
const { control } = useFormContext<SettingsDataModelFieldTextFormValues>();
const countries = [
{ label: 'No country', value: '' },
{ label: 'No country', value: '', Icon: IconCircleOff },
...useCountries()
.sort((a, b) => a.countryName.localeCompare(b.countryName))
.map((country) => ({
label: `${country.countryName} (+${country.callingCode})`,
value: country.countryCode as CountryCodeOrEmpty,
Icon: (props: IconComponentProps) =>
country.Flag({ width: props.size, height: props.size }),
})),
];
const defaultDefaultValue = {
@ -88,6 +90,7 @@ export const SettingsDataModelFieldPhonesForm = ({
disabled={disabled}
options={countries}
selectSizeVariant="small"
withSearchInput={true}
/>
</SettingsOptionCardContentSelect>
);