twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-24 12:34:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: Set field type icon as the default icon for new fields (#7352) (#7579)

Browse Source 
Closes #7352

**Summary**

Moved the `defaultIconsByFieldType` mapping from the
`SettingsObjectNewFieldConfigure` component to a separate constants
file. This change improves code organization and maintainability without
changing functionality.

**Changes Made**

- **Created a new constants file:** Added `FieldTypeIcons.ts`, located
in `src/pages/settings/data-model/constants/`, to store the mapping of
`FieldMetadataType` to default icons.
    
```
    // FieldTypeIcons.ts
    
    import { FieldMetadataType } from '~/generated-metadata/graphql';
    
    export const defaultIconsByFieldType: Record<FieldMetadataType, string> = {
      [FieldMetadataType.Address]: 'IconLocation',
      [FieldMetadataType.Boolean]: 'IconCheckbox',
      [FieldMetadataType.Currency]: 'IconCurrency',
      [FieldMetadataType.Date]: 'IconCalendar',
      [FieldMetadataType.DateTime]: 'IconClock',
      [FieldMetadataType.Email]: 'IconMail',
      [FieldMetadataType.FullName]: 'IconUser',
      [FieldMetadataType.Link]: 'IconLink',
      [FieldMetadataType.MultiSelect]: 'IconList',
      [FieldMetadataType.Number]: 'IconNumber',
      [FieldMetadataType.Phone]: 'IconPhone',
      [FieldMetadataType.Rating]: 'IconStar',
      [FieldMetadataType.RawJson]: 'IconCode',
      [FieldMetadataType.Relation]: 'IconRelationOneToMany',
      [FieldMetadataType.Select]: 'IconSelect',
      [FieldMetadataType.Text]: 'IconTypography',
      [FieldMetadataType.Uuid]: 'IconKey',
      [FieldMetadataType.Array]: 'IconCodeDots',
      [FieldMetadataType.Emails]: 'IconMail',
      [FieldMetadataType.Links]: 'IconLink',
      [FieldMetadataType.Phones]: 'IconPhone',
      [FieldMetadataType.Actor]: 'IconUsers',
      [FieldMetadataType.Numeric]: 'IconUsers',
      [FieldMetadataType.Position]: 'IconUsers',
      [FieldMetadataType.RichText]: 'IconUsers',
      [FieldMetadataType.TsVector]: 'IconUsers',
      // Add other field types as needed
    };
```
    
- **Updated the import in the component:** In the file
`SettingsObjectNewFieldConfigure.tsx`, imported the mapping from the new
constants file.
    
    
    ```// SettingsObjectNewFieldConfigure.tsx
    
import { defaultIconsByFieldType } from
'~/pages/settings/data-model/constants/FieldTypeIcons';
    
- **Adjusted form configuration:** Modified `defaultValues` in `useForm`
and `useEffect` to use the imported mapping.
    
```
    `const formConfig = useForm<SettingsDataModelNewFieldFormValues>({
      mode: 'onTouched',
      resolver: zodResolver(
        settingsFieldFormSchema(
          activeObjectMetadataItem?.fields.map((value) => value.name),
        ),
      ),
      defaultValues: {
        type: fieldType,
        icon: defaultIconsByFieldType[fieldType] || 'IconUsers',
        label: '',
        description: '',
      },
    });
    
    useEffect(() => {
      formConfig.setValue('icon', defaultIconsByFieldType[fieldType] || 'IconUsers');
    }, [fieldType, formConfig]);`

---------

Co-authored-by: Your Name <you@example.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
dostavic 2024-10-11 15:55:33 +02:00 committed by GitHub
parent ac380f183f
commit 4cc95d4794
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 43 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
View File

@ -2,7 +2,6 @@ import { useCreateOneRelationMetadataItem } from '@/object-metadata/hooks/useCre
import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
@ -30,6 +29,7 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { H2Title } from 'twenty-ui';
import { z } from 'zod';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { DEFAULT_ICONS_BY_FIELD_TYPE } from '~/pages/settings/data-model/constants/DefaultIconsByFieldType';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
type SettingsDataModelNewFieldFormValues = z.infer<
@ -37,6 +37,8 @@ type SettingsDataModelNewFieldFormValues = z.infer<
> &
any;
const DEFAULT_ICON_FOR_NEW_FIELD = 'IconUsers';
export const SettingsObjectNewFieldConfigure = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
@ -48,7 +50,6 @@ export const SettingsObjectNewFieldConfigure = () => {
const { findActiveObjectMetadataItemBySlug } =
useFilteredObjectMetadataItems();
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const { createMetadataField } = useFieldMetadataItem();
@ -63,18 +64,19 @@ export const SettingsObjectNewFieldConfigure = () => {
),
defaultValues: {
type: fieldType,
icon: 'IconUsers',
icon:
DEFAULT_ICONS_BY_FIELD_TYPE[fieldType] ?? DEFAULT_ICON_FOR_NEW_FIELD,
label: '',
description: '',
},
});
const fieldMetadataItem: Pick<FieldMetadataItem, 'icon' | 'label' | 'type'> =
{
icon: formConfig.watch('icon'),
label: formConfig.watch('label') || 'Employees',
type: formConfig.watch('type'),
};
useEffect(() => {
formConfig.setValue(
'icon',
DEFAULT_ICONS_BY_FIELD_TYPE[fieldType] ?? DEFAULT_ICON_FOR_NEW_FIELD,
);
}, [fieldType, formConfig]);
const [, setObjectViews] = useState<View[]>([]);
const [, setRelationObjectViews] = useState<View[]>([]);
@ -209,7 +211,11 @@ export const SettingsObjectNewFieldConfigure = () => {
<H2Title title="Values" description="The values of this field" />
<SettingsDataModelFieldSettingsFormCard
isCreatingField
fieldMetadataItem={fieldMetadataItem}
fieldMetadataItem={{
icon: formConfig.watch('icon'),
label: formConfig.watch('label') || 'New Field',
type: fieldType as FieldMetadataType,
}}
objectMetadataItem={activeObjectMetadataItem}
/>
</Section>

27
packages/twenty-front/src/pages/settings/data-model/constants/DefaultIconsByFieldType.ts Normal file
View File

@ -0,0 +1,27 @@
import { FieldMetadataType } from '~/generated-metadata/graphql';
export const DEFAULT_ICONS_BY_FIELD_TYPE: Record<FieldMetadataType, string> = {
[FieldMetadataType.Address]: 'IconMap',
[FieldMetadataType.Boolean]: 'IconToggleLeft',
[FieldMetadataType.Currency]: 'IconMoneybag',
[FieldMetadataType.Date]: 'IconCalendarEvent',
[FieldMetadataType.DateTime]: 'IconCalendarClock',
[FieldMetadataType.FullName]: 'IconUserCircle',
[FieldMetadataType.MultiSelect]: 'IconTags',
[FieldMetadataType.Number]: 'IconNumber9',
[FieldMetadataType.Rating]: 'IconStar',
[FieldMetadataType.RawJson]: 'IconBraces',
[FieldMetadataType.Relation]: 'IconRelationOneToMany',
[FieldMetadataType.Select]: 'IconTag',
[FieldMetadataType.Text]: 'IconTypography',
[FieldMetadataType.Uuid]: 'IconId',
[FieldMetadataType.Array]: 'IconBracketsContain',
[FieldMetadataType.Emails]: 'IconMail',
[FieldMetadataType.Links]: 'IconWorld',
[FieldMetadataType.Phones]: 'IconPhone',
[FieldMetadataType.Actor]: 'IconUsers',
[FieldMetadataType.Numeric]: 'IconUsers',
[FieldMetadataType.Position]: 'IconUsers',
[FieldMetadataType.RichText]: 'IconUsers',
[FieldMetadataType.TsVector]: 'IconUsers',
};