feat: add Relation field form (#2572)
* feat: add useCreateOneRelationMetadata and useRelationMetadata Closes #2423 * feat: add Relation field form Closes #2003 --------- Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Thaïs
@ -1,14 +1,16 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
|
||||
import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
|
||||
import { useRelationMetadata } from '@/object-metadata/hooks/useRelationMetadata';
|
||||
import { getFieldSlug } from '@/object-metadata/utils/getFieldSlug';
|
||||
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 { useFieldMetadataForm } from '@/settings/data-model/hooks/useFieldMetadataForm';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { IconArchive, IconSettings } from '@/ui/display/icon';
|
||||
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
||||
@ -34,13 +36,22 @@ export const SettingsObjectFieldEdit = () => {
|
||||
metadataField.isActive && getFieldSlug(metadataField) === fieldSlug,
|
||||
);
|
||||
|
||||
const [formValues, setFormValues] = useState<
|
||||
Partial<{
|
||||
icon: string;
|
||||
label: string;
|
||||
description: string;
|
||||
}>
|
||||
>({});
|
||||
const {
|
||||
relationFieldMetadataItem,
|
||||
relationObjectMetadataItem,
|
||||
relationType,
|
||||
} = useRelationMetadata({ fieldMetadataItem: activeMetadataField });
|
||||
|
||||
const {
|
||||
formValues,
|
||||
handleFormChange,
|
||||
hasFieldFormChanged,
|
||||
hasFormChanged,
|
||||
hasRelationFormChanged,
|
||||
initForm,
|
||||
isValid,
|
||||
validatedFormValues,
|
||||
} = useFieldMetadataForm();
|
||||
|
||||
useEffect(() => {
|
||||
if (loading) return;
|
||||
@ -50,36 +61,59 @@ export const SettingsObjectFieldEdit = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!Object.keys(formValues).length) {
|
||||
setFormValues({
|
||||
icon: activeMetadataField.icon ?? undefined,
|
||||
label: activeMetadataField.label,
|
||||
description: activeMetadataField.description ?? undefined,
|
||||
});
|
||||
}
|
||||
initForm({
|
||||
icon: activeMetadataField.icon ?? undefined,
|
||||
label: activeMetadataField.label,
|
||||
description: activeMetadataField.description ?? undefined,
|
||||
type: activeMetadataField.type,
|
||||
relation: {
|
||||
field: {
|
||||
icon: relationFieldMetadataItem?.icon,
|
||||
label: relationFieldMetadataItem?.label,
|
||||
},
|
||||
objectMetadataId: relationObjectMetadataItem?.id,
|
||||
type: relationType,
|
||||
},
|
||||
});
|
||||
}, [
|
||||
activeMetadataField,
|
||||
activeObjectMetadataItem,
|
||||
formValues,
|
||||
initForm,
|
||||
loading,
|
||||
navigate,
|
||||
relationFieldMetadataItem?.icon,
|
||||
relationFieldMetadataItem?.label,
|
||||
relationObjectMetadataItem?.id,
|
||||
relationType,
|
||||
]);
|
||||
|
||||
if (!activeObjectMetadataItem || !activeMetadataField) return null;
|
||||
|
||||
const areRequiredFieldsFilled = !!formValues.label;
|
||||
|
||||
const hasChanges =
|
||||
formValues.description !== activeMetadataField.description ||
|
||||
formValues.icon !== activeMetadataField.icon ||
|
||||
formValues.label !== activeMetadataField.label;
|
||||
|
||||
const canSave = areRequiredFieldsFilled && hasChanges;
|
||||
const canSave = isValid && hasFormChanged;
|
||||
|
||||
const handleSave = async () => {
|
||||
const editedField = { ...activeMetadataField, ...formValues };
|
||||
if (!validatedFormValues) return;
|
||||
|
||||
await editMetadataField(editedField);
|
||||
if (
|
||||
validatedFormValues.type === FieldMetadataType.Relation &&
|
||||
relationFieldMetadataItem?.id &&
|
||||
hasRelationFormChanged
|
||||
) {
|
||||
await editMetadataField({
|
||||
icon: validatedFormValues.relation.field.icon,
|
||||
id: relationFieldMetadataItem.id,
|
||||
label: validatedFormValues.relation.field.label,
|
||||
});
|
||||
}
|
||||
|
||||
if (hasFieldFormChanged) {
|
||||
await editMetadataField({
|
||||
description: validatedFormValues.description,
|
||||
icon: validatedFormValues.icon,
|
||||
id: activeMetadataField.id,
|
||||
label: validatedFormValues.label,
|
||||
});
|
||||
}
|
||||
|
||||
navigate(`/settings/objects/${objectSlug}`);
|
||||
};
|
||||
@ -116,23 +150,21 @@ export const SettingsObjectFieldEdit = () => {
|
||||
name={formValues.label}
|
||||
description={formValues.description}
|
||||
iconKey={formValues.icon}
|
||||
onChange={(values) =>
|
||||
setFormValues((previousFormValues) => ({
|
||||
...previousFormValues,
|
||||
...values,
|
||||
}))
|
||||
}
|
||||
onChange={handleFormChange}
|
||||
/>
|
||||
<SettingsObjectFieldTypeSelectSection
|
||||
disabled
|
||||
fieldIconKey={formValues.icon}
|
||||
fieldLabel={formValues.label || 'Employees'}
|
||||
fieldName={activeMetadataField.name}
|
||||
fieldType={activeMetadataField.type as FieldMetadataType}
|
||||
isObjectCustom={activeObjectMetadataItem.isCustom}
|
||||
objectIconKey={activeObjectMetadataItem.icon}
|
||||
objectLabelPlural={activeObjectMetadataItem.labelPlural}
|
||||
objectNamePlural={activeObjectMetadataItem.namePlural}
|
||||
fieldMetadata={{
|
||||
icon: formValues.icon,
|
||||
label: formValues.label || 'Employees',
|
||||
id: activeMetadataField.id,
|
||||
}}
|
||||
objectMetadataId={activeObjectMetadataItem.id}
|
||||
onChange={handleFormChange}
|
||||
relationFieldMetadataId={relationFieldMetadataItem?.id}
|
||||
values={{
|
||||
type: formValues.type,
|
||||
relation: formValues.relation,
|
||||
}}
|
||||
/>
|
||||
<Section>
|
||||
<H2Title title="Danger zone" description="Disable this field" />
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import { useCreateOneRelationMetadata } from '@/object-metadata/hooks/useCreateOneRelationMetadata';
|
||||
import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
|
||||
import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
|
||||
import { useCreateOneObjectRecord } from '@/object-record/hooks/useCreateOneObjectRecord';
|
||||
@ -11,6 +12,7 @@ import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderCon
|
||||
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
||||
import { SettingsObjectFieldFormSection } from '@/settings/data-model/components/SettingsObjectFieldFormSection';
|
||||
import { SettingsObjectFieldTypeSelectSection } from '@/settings/data-model/components/SettingsObjectFieldTypeSelectSection';
|
||||
import { useFieldMetadataForm } from '@/settings/data-model/hooks/useFieldMetadataForm';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { IconSettings } from '@/ui/display/icon';
|
||||
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
|
||||
@ -23,26 +25,48 @@ export const SettingsObjectNewFieldStep2 = () => {
|
||||
const navigate = useNavigate();
|
||||
const { objectSlug = '' } = useParams();
|
||||
|
||||
const { findActiveObjectMetadataItemBySlug, loading } =
|
||||
useObjectMetadataItemForSettings();
|
||||
const {
|
||||
findActiveObjectMetadataItemBySlug,
|
||||
findObjectMetadataItemById,
|
||||
findObjectMetadataItemByNamePlural,
|
||||
loading,
|
||||
} = useObjectMetadataItemForSettings();
|
||||
|
||||
const activeObjectMetadataItem =
|
||||
findActiveObjectMetadataItemBySlug(objectSlug);
|
||||
const { createMetadataField } = useFieldMetadataItem();
|
||||
|
||||
const {
|
||||
formValues,
|
||||
handleFormChange,
|
||||
initForm,
|
||||
isValid: canSave,
|
||||
validatedFormValues,
|
||||
} = useFieldMetadataForm();
|
||||
|
||||
useEffect(() => {
|
||||
if (loading) return;
|
||||
if (!activeObjectMetadataItem) navigate(AppPath.NotFound);
|
||||
}, [activeObjectMetadataItem, loading, navigate]);
|
||||
if (!activeObjectMetadataItem) {
|
||||
navigate(AppPath.NotFound);
|
||||
return;
|
||||
}
|
||||
|
||||
const [formValues, setFormValues] = useState<{
|
||||
description?: string;
|
||||
icon: string;
|
||||
label: string;
|
||||
type: FieldMetadataType;
|
||||
}>({ icon: 'IconUsers', label: '', type: FieldMetadataType.Number });
|
||||
initForm({
|
||||
relation: {
|
||||
field: { icon: activeObjectMetadataItem.icon },
|
||||
objectMetadataId: findObjectMetadataItemByNamePlural('peopleV2')?.id,
|
||||
},
|
||||
});
|
||||
}, [
|
||||
activeObjectMetadataItem,
|
||||
findObjectMetadataItemByNamePlural,
|
||||
initForm,
|
||||
loading,
|
||||
navigate,
|
||||
]);
|
||||
|
||||
const [objectViews, setObjectViews] = useState<View[]>([]);
|
||||
const [relationObjectViews, setRelationObjectViews] = useState<View[]>([]);
|
||||
|
||||
const { createOneObject: createOneViewField } = useCreateOneObjectRecord({
|
||||
objectNameSingular: 'viewFieldV2',
|
||||
@ -57,32 +81,100 @@ export const SettingsObjectNewFieldStep2 = () => {
|
||||
onCompleted: async (data: PaginatedObjectTypeResults<View>) => {
|
||||
const views = data.edges;
|
||||
|
||||
if (!views) {
|
||||
return;
|
||||
}
|
||||
if (!views) return;
|
||||
|
||||
setObjectViews(data.edges.map(({ node }) => node));
|
||||
},
|
||||
});
|
||||
|
||||
useFindManyObjectRecords({
|
||||
objectNamePlural: 'viewsV2',
|
||||
skip: !formValues.relation?.objectMetadataId,
|
||||
filter: {
|
||||
type: { eq: ViewType.Table },
|
||||
objectMetadataId: { eq: formValues.relation?.objectMetadataId },
|
||||
},
|
||||
onCompleted: async (data: PaginatedObjectTypeResults<View>) => {
|
||||
const views = data.edges;
|
||||
|
||||
if (!views) return;
|
||||
|
||||
setRelationObjectViews(data.edges.map(({ node }) => node));
|
||||
},
|
||||
});
|
||||
|
||||
const { createOneRelationMetadata } = useCreateOneRelationMetadata();
|
||||
|
||||
if (!activeObjectMetadataItem) return null;
|
||||
|
||||
const canSave = !!formValues.label;
|
||||
|
||||
const handleSave = async () => {
|
||||
const createdField = await createMetadataField({
|
||||
...formValues,
|
||||
objectMetadataId: activeObjectMetadataItem.id,
|
||||
});
|
||||
objectViews.forEach(async (view) => {
|
||||
await createOneViewField?.({
|
||||
view: view.id,
|
||||
fieldMetadataId: createdField.data?.createOneField.id,
|
||||
position: activeObjectMetadataItem.fields.length,
|
||||
isVisible: true,
|
||||
size: 100,
|
||||
if (!validatedFormValues) return;
|
||||
|
||||
if (validatedFormValues.type === FieldMetadataType.Relation) {
|
||||
const createdRelation = await createOneRelationMetadata({
|
||||
relationType: validatedFormValues.relation.type,
|
||||
field: {
|
||||
description: validatedFormValues.description,
|
||||
icon: validatedFormValues.icon,
|
||||
label: validatedFormValues.label,
|
||||
},
|
||||
objectMetadataId: activeObjectMetadataItem.id,
|
||||
connect: {
|
||||
field: {
|
||||
icon: validatedFormValues.relation.field.icon,
|
||||
label: validatedFormValues.relation.field.label,
|
||||
},
|
||||
objectMetadataId: validatedFormValues.relation.objectMetadataId,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const relationObjectMetadataItem = findObjectMetadataItemById(
|
||||
validatedFormValues.relation.objectMetadataId,
|
||||
);
|
||||
|
||||
objectViews.forEach(async (view) => {
|
||||
await createOneViewField?.({
|
||||
view: view.id,
|
||||
fieldMetadataId:
|
||||
validatedFormValues.relation.type === 'MANY_TO_ONE'
|
||||
? createdRelation.data?.createOneRelation.toFieldMetadataId
|
||||
: createdRelation.data?.createOneRelation.fromFieldMetadataId,
|
||||
position: activeObjectMetadataItem.fields.length,
|
||||
isVisible: true,
|
||||
size: 100,
|
||||
});
|
||||
});
|
||||
relationObjectViews.forEach(async (view) => {
|
||||
await createOneViewField?.({
|
||||
view: view.id,
|
||||
fieldMetadataId:
|
||||
validatedFormValues.relation.type === 'MANY_TO_ONE'
|
||||
? createdRelation.data?.createOneRelation.fromFieldMetadataId
|
||||
: createdRelation.data?.createOneRelation.toFieldMetadataId,
|
||||
position: relationObjectMetadataItem?.fields.length,
|
||||
isVisible: true,
|
||||
size: 100,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
const createdField = await createMetadataField({
|
||||
description: validatedFormValues.description,
|
||||
icon: validatedFormValues.icon,
|
||||
label: validatedFormValues.label,
|
||||
objectMetadataId: activeObjectMetadataItem.id,
|
||||
type: validatedFormValues.type,
|
||||
});
|
||||
objectViews.forEach(async (view) => {
|
||||
await createOneViewField?.({
|
||||
view: view.id,
|
||||
fieldMetadataId: createdField.data?.createOneField.id,
|
||||
position: activeObjectMetadataItem.fields.length,
|
||||
isVisible: true,
|
||||
size: 100,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
navigate(`/settings/objects/${objectSlug}`);
|
||||
};
|
||||
|
||||
@ -110,24 +202,19 @@ export const SettingsObjectNewFieldStep2 = () => {
|
||||
iconKey={formValues.icon}
|
||||
name={formValues.label}
|
||||
description={formValues.description}
|
||||
onChange={(values) =>
|
||||
setFormValues((previousValues) => ({
|
||||
...previousValues,
|
||||
...values,
|
||||
}))
|
||||
}
|
||||
onChange={handleFormChange}
|
||||
/>
|
||||
<SettingsObjectFieldTypeSelectSection
|
||||
fieldIconKey={formValues.icon}
|
||||
fieldLabel={formValues.label || 'Employees'}
|
||||
fieldType={formValues.type}
|
||||
isObjectCustom={activeObjectMetadataItem.isCustom}
|
||||
objectIconKey={activeObjectMetadataItem.icon}
|
||||
objectLabelPlural={activeObjectMetadataItem.labelPlural}
|
||||
objectNamePlural={activeObjectMetadataItem.namePlural}
|
||||
onChange={(type) =>
|
||||
setFormValues((previousValues) => ({ ...previousValues, type }))
|
||||
}
|
||||
fieldMetadata={{
|
||||
icon: formValues.icon,
|
||||
label: formValues.label || 'Employees',
|
||||
}}
|
||||
objectMetadataId={activeObjectMetadataItem.id}
|
||||
onChange={handleFormChange}
|
||||
values={{
|
||||
type: formValues.type,
|
||||
relation: formValues.relation,
|
||||
}}
|
||||
/>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
|
||||
Reference in New Issue
Block a user