Comments (1)
To prevent creating a custom field with an existing name, follow these steps:
- Add validation logic in
SettingsObjectNewFieldStep2.tsx
:
import { useEffect, useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router-dom';
import { useApolloClient } from '@apollo/client';
import styled from '@emotion/styled';
import { zodResolver } from '@hookform/resolvers/zod';
import pick from 'lodash.pick';
import { H2Title, IconSettings } from 'twenty-ui';
import { z } from 'zod';
import { useCreateOneRelationMetadataItem } from '@/object-metadata/hooks/useCreateOneRelationMetadataItem';
import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsDataModelFieldAboutForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldAboutForm';
import { SettingsDataModelFieldSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard';
import { SettingsDataModelFieldTypeSelect } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect';
import { settingsFieldFormSchema } from '@/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema';
import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType';
import { AppPath } from '@/types/AppPath';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { View } from '@/views/types/View';
import { ViewType } from '@/views/types/ViewType';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { isDefined } from '~/utils/isDefined';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
const StyledSettingsObjectFieldTypeSelect = styled(
SettingsDataModelFieldTypeSelect,
)`
margin-bottom: ${({ theme }) => theme.spacing(4)};
`;
export const SettingsObjectNewFieldStep2 = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { enqueueSnackBar } = useSnackBar();
const { findActiveObjectMetadataItemBySlug } =
useFilteredObjectMetadataItems();
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const { createMetadataField } = useFieldMetadataItem();
const formConfig = useForm<SettingsDataModelNewFieldFormValues>({
mode: 'onTouched',
resolver: zodResolver(settingsFieldFormSchema),
});
useEffect(() => {
if (!activeObjectMetadataItem) {
navigate(AppPath.NotFound);
}
}, [activeObjectMetadataItem, navigate]);
const [existingFieldNames, setExistingFieldNames] = useState<string[]>([]);
useEffect(() => {
if (activeObjectMetadataItem) {
setExistingFieldNames(activeObjectMetadataItem.fields.map(field => field.label));
}
}, [activeObjectMetadataItem]);
const validateFieldName = (name: string) => {
return !existingFieldNames.includes(name) || 'This name is already taken';
};
const canSave =
formConfig.formState.isValid && !formConfig.formState.isSubmitting;
const handleSave = async (
formValues: SettingsDataModelNewFieldFormValues,
) => {
try {
if (
formValues.type === FieldMetadataType.Relation &&
'relation' in formValues
) {
const { relation: relationFormValues, ...fieldFormValues } = formValues;
await createOneRelationMetadata({
relationType: relationFormValues.type,
field: pick(fieldFormValues, ['icon', 'label', 'description']),
objectMetadataId: activeObjectMetadataItem.id,
connect: {
field: {
icon: relationFormValues.field.icon,
label: relationFormValues.field.label,
},
objectMetadataId: relationFormValues.objectMetadataId,
},
});
await apolloClient.refetchQueries({
include: ['FindManyViews', 'CombinedFindManyRecords'],
});
} else {
await createMetadataField({
...formValues,
objectMetadataId: activeObjectMetadataItem.id,
});
await apolloClient.refetchQueries({
include: ['FindManyViews', 'CombinedFindManyRecords'],
});
}
navigate(`/settings/objects/${objectSlug}`);
} catch (error) {
enqueueSnackBar((error as Error).message, {
variant: SnackBarVariant.Error,
});
}
};
const excludedFieldTypes: SettingsSupportedFieldType[] = (
[
FieldMetadataType.Numeric,
FieldMetadataType.Probability,
] as const
).filter(isDefined);
return (
<RecordFieldValueSelectorContextProvider>
<FormProvider {...formConfig}>
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<SettingsHeaderContainer>
<Breadcrumb
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObjectMetadataItem.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'New Field' },
]}
/>
{!activeObjectMetadataItem.isRemote && (
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
onSave={formConfig.handleSubmit(handleSave)}
/>
)}
</SettingsHeaderContainer>
<Section>
<H2Title
title="Name and description"
description="The name and description of this field"
/>
<SettingsDataModelFieldAboutForm
validateFieldName={validateFieldName}
/>
</Section>
<Section>
<H2Title
title="Type and values"
description="The field's type and values."
/>
<StyledSettingsObjectFieldTypeSelect
excludedFieldTypes={excludedFieldTypes}
/>
<SettingsDataModelFieldSettingsFormCard
fieldMetadataItem={{
icon: formConfig.watch('icon'),
label: formConfig.watch('label') || 'Employees',
type: formConfig.watch('type'),
}}
objectMetadataItem={activeObjectMetadataItem}
/>
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
</FormProvider>
</RecordFieldValueSelectorContextProvider>
);
};
- Update
SettingsDataModelFieldAboutForm
to acceptvalidateFieldName
prop and use it for validation:
import { useFormContext } from 'react-hook-form';
export const SettingsDataModelFieldAboutForm = ({ validateFieldName }) => {
const { register, formState: { errors } } = useFormContext();
return (
<div>
<input
{...register('label', { validate: validateFieldName })}
placeholder="Field Name"
/>
{errors.label && <span>{errors.label.message}</span>}
</div>
);
};
This will ensure that the form displays an error message if the field name already exists and disables the Save button to prevent submission.
References
/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField
/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx
About Greptile
This response provides a starting point for your research, not a precise solution.
Help us improve! Please leave a ๐ if this is helpful and ๐ if it is irrelevant.
from twenty.
Related Issues (20)
- Create a command to add a userVar in the key value pair table for every account which needs to reconnect
- SignInUp Modal misalignment for devices smaller than 400px width HOT 9
- Unify Label Styles Across App HOT 4
- [Workflow] I can and delete a workflow
- [Workflow] I can enable an internal event trigger
- [Workflow] I can execute a basic workflow
- [Workflow] I can run a workflow manually
- [Workflow] I can add a record mutation as an action
- [Workflow] I can execute a record mutation as an action
- [Workflow] When I receive a nest event, I trigger WorkflowEventJob
- Sporadic & Unusual Log-Outs While Active (Token Expired)
- Add box-shadow on column freeze
- Prevent contributors from opening a PR on a main branch of their fork HOT 1
- Fix total count in show page navigation bar when total count = 1 HOT 3
- Inconsistent behavior in record navigation HOT 7
- Explain Privacy of File Uploads
- Update yarn start command and doc for worker
- Redis cache store cannot be password protected HOT 2
- Enable Filtering by Sub-fields in Composite Fields HOT 6
- Clicking on the support dropdown immediately opens the support chat. HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from twenty.