mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: create custom object field (#2225)

Browse Source 
Closes #2171
This commit is contained in:
Thaïs
2023-10-26 11:34:26 +02:00
committed by GitHub
parent fc4075b372
commit 00dd046798
15 changed files with 91 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
View File

@ -1,12 +1,13 @@
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsObjectFieldFormSection } from '@/settings/data-model/components/SettingsObjectFieldFormSection';
import { SettingsObjectFieldTypeSelectSection } from '@/settings/data-model/components/SettingsObjectFieldTypeSelectSection';
import { activeObjectItems } from '@/settings/data-model/constants/mockObjects';
import { ObjectFieldDataType } from '@/settings/data-model/types/ObjectFieldDataType';
import { AppPath } from '@/types/AppPath';
import { IconSettings } from '@/ui/display/icon';
@ -16,23 +17,30 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsObjectNewFieldStep2 = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const activeObject = activeObjectItems.find(
(activeObject) => activeObject.name.toLowerCase() === objectSlug,
);
const { findActiveObjectBySlug } = useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
const { createField } = useFieldMetadata();
useEffect(() => {
if (!activeObject) navigate(AppPath.NotFound);
}, [activeObject, navigate]);
const [formValues, setFormValues] = useState<
Partial<{
iconKey: string;
name: string;
description: string;
}> & { type: ObjectFieldDataType }
>({ type: 'number' });
const [formValues, setFormValues] = useState<{
description?: string;
icon: string;
label: string;
type: ObjectFieldDataType;
}>({ icon: 'IconUsers', label: '', type: 'number' });
const canSave = !!formValues.name;
const canSave = !!formValues.label;
const handleSave = async () => {
if (!activeObject) return;
await createField({ ...formValues, objectId: activeObject.id });
navigate(`/settings/objects/${objectSlug}`);
};
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@ -42,7 +50,7 @@ export const SettingsObjectNewFieldStep2 = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject?.name ?? '',
children: activeObject?.labelPlural ?? '',
href: `/settings/objects/${objectSlug}`,
},
{ children: 'New Field' },
@ -51,14 +59,14 @@ export const SettingsObjectNewFieldStep2 = () => {
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => {
navigate('/settings/objects');
navigate(`/settings/objects/${objectSlug}`);
}}
onSave={() => undefined}
onSave={handleSave}
/>
</SettingsHeaderContainer>
<SettingsObjectFieldFormSection
iconKey={formValues.iconKey}
name={formValues.name}
iconKey={formValues.icon}
name={formValues.label}
description={formValues.description}
onChange={(values) =>
setFormValues((previousValues) => ({