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

feat: create custom object and update edited object names (#2220)

Browse Source 
Closes #2155, Closes #2153
This commit is contained in:
Thaïs
2023-10-26 11:04:16 +02:00
committed by GitHub
parent 0b33880cc9
commit 2b1945a3e1
22 changed files with 214 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
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';
@ -21,19 +22,33 @@ export const SettingsNewObject = () => {
const [selectedObjectType, setSelectedObjectType] =
useState<NewObjectType>('Standard');
const [customFormValues, setCustomFormValues] = useState<
Partial<{
labelPlural: string;
labelSingular: string;
description: string;
}>
>({});
const { createObject } = useObjectMetadata();
const [customFormValues, setCustomFormValues] = useState<{
description?: string;
icon?: string;
labelPlural: string;
labelSingular: string;
}>({ labelPlural: '', labelSingular: '' });
const canSave =
selectedObjectType === 'Custom' &&
!!customFormValues.labelPlural &&
!!customFormValues.labelSingular;
const handleSave = async () => {
if (selectedObjectType === 'Custom') {
await createObject({
labelPlural: customFormValues.labelPlural,
labelSingular: customFormValues.labelSingular,
description: customFormValues.description,
icon: customFormValues.icon,
});
}
navigate('/settings/objects');
};
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
@ -49,7 +64,7 @@ export const SettingsNewObject = () => {
onCancel={() => {
navigate('/settings/objects');
}}
onSave={() => undefined}
onSave={handleSave}
/>
</SettingsHeaderContainer>
<Section>
@ -64,7 +79,16 @@ export const SettingsNewObject = () => {
</Section>
{selectedObjectType === 'Custom' && (
<>
<SettingsObjectIconSection label={customFormValues.labelPlural} />
<SettingsObjectIconSection
label={customFormValues.labelPlural}
iconKey={customFormValues.icon}
onChange={({ iconKey }) => {
setCustomFormValues((previousValues) => ({
...previousValues,
icon: iconKey,
}));
}}
/>
<SettingsObjectFormSection
singularName={customFormValues.labelSingular}
pluralName={customFormValues.labelPlural}

19
front/src/pages/settings/data-model/SettingsObjectDetail.tsx
View File

@ -32,11 +32,10 @@ const StyledDiv = styled.div`
export const SettingsObjectDetail = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
const { activeObjects, disableObject } = useObjectMetadata();
const activeObject = activeObjects.find(
(activeObject) => activeObject.namePlural === pluralObjectName,
);
const { objectSlug = '' } = useParams();
const { activeObjects, disableObject, findActiveObjectBySlug } =
useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
useEffect(() => {
if (activeObjects.length && !activeObject) {
@ -70,9 +69,7 @@ export const SettingsObjectDetail = () => {
disableObject(activeObject);
navigate('/settings/objects');
}}
onEdit={() =>
navigate(`/settings/objects/${pluralObjectName}/edit`)
}
onEdit={() => navigate('./edit')}
/>
)}
<Section>
@ -97,11 +94,7 @@ export const SettingsObjectDetail = () => {
<SettingsObjectFieldActiveActionDropdown
isCustomField={fieldItem.isCustom}
scopeKey={fieldItem.id}
onEdit={() =>
navigate(
`/settings/objects/${pluralObjectName}/${fieldItem.name}`,
)
}
onEdit={() => navigate(`./${fieldItem.name}`)}
onDisable={() => disableField(fieldItem)}
/>
}

29
front/src/pages/settings/data-model/SettingsObjectEdit.tsx
View File

@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { getObjectSlug } from '@/metadata/utils/getObjectSlug';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@ -18,11 +19,10 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsObjectEdit = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
const { activeObjects, disableObject, editObject } = useObjectMetadata();
const activeObject = activeObjects.find(
(activeObject) => activeObject.namePlural === pluralObjectName,
);
const { objectSlug = '' } = useParams();
const { activeObjects, disableObject, editObject, findActiveObjectBySlug } =
useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
const [formValues, setFormValues] = useState<
Partial<{
@ -62,6 +62,16 @@ export const SettingsObjectEdit = () => {
const canSave = areRequiredFieldsFilled && hasChanges;
const handleSave = async () => {
if (!activeObject) return;
const editedObject = { ...activeObject, ...formValues };
await editObject(editedObject);
navigate(`/settings/objects/${getObjectSlug(editedObject)}`);
};
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
@ -71,7 +81,7 @@ export const SettingsObjectEdit = () => {
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject?.labelPlural ?? '',
href: `/settings/objects/${pluralObjectName}`,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'Edit' },
]}
@ -80,12 +90,9 @@ export const SettingsObjectEdit = () => {
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => {
navigate(`/settings/objects/${pluralObjectName}`);
}}
onSave={() => {
editObject({ ...activeObject, ...formValues });
navigate(`/settings/objects/${pluralObjectName}`);
navigate(`/settings/objects/${objectSlug}`);
}}
onSave={handleSave}
/>
)}
</SettingsHeaderContainer>

6
front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
View File

@ -7,7 +7,7 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsObjectFieldEdit = () => {
const { pluralObjectName = '', fieldName = '' } = useParams();
const { objectSlug = '', fieldName = '' } = useParams();
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
@ -16,8 +16,8 @@ export const SettingsObjectFieldEdit = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: `${pluralObjectName}`,
href: `/settings/objects/${pluralObjectName}`,
children: `${objectSlug}`,
href: `/settings/objects/${objectSlug}`,
},
{
children: `${fieldName}`,

14
front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
View File

@ -35,11 +35,9 @@ const StyledAddCustomFieldButton = styled(Button)`
export const SettingsObjectNewFieldStep1 = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
const { activeObjects } = useObjectMetadata();
const activeObject = activeObjects.find(
(activeObject) => activeObject.namePlural === pluralObjectName,
);
const { objectSlug = '' } = useParams();
const { activeObjects, findActiveObjectBySlug } = useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
useEffect(() => {
if (activeObjects.length && !activeObject) {
@ -63,7 +61,7 @@ export const SettingsObjectNewFieldStep1 = () => {
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject?.labelPlural ?? '',
href: `/settings/objects/${pluralObjectName}`,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'New Field' },
]}
@ -71,7 +69,7 @@ export const SettingsObjectNewFieldStep1 = () => {
<SaveAndCancelButtons
isSaveDisabled
onCancel={() => {
navigate(`/settings/objects/${pluralObjectName}`);
navigate(`/settings/objects/${objectSlug}`);
}}
onSave={() => undefined}
/>
@ -121,7 +119,7 @@ export const SettingsObjectNewFieldStep1 = () => {
size="small"
variant="secondary"
onClick={() =>
navigate(`/settings/objects/${pluralObjectName}/new-field/step-2`)
navigate(`/settings/objects/${objectSlug}/new-field/step-2`)
}
/>
</StyledSection>

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

@ -15,9 +15,9 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsObjectNewFieldStep2 = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
const { objectSlug = '' } = useParams();
const activeObject = activeObjectItems.find(
(activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
(activeObject) => activeObject.name.toLowerCase() === objectSlug,
);
useEffect(() => {
@ -43,7 +43,7 @@ export const SettingsObjectNewFieldStep2 = () => {
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject?.name ?? '',
href: `/settings/objects/${pluralObjectName}`,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'New Field' },
]}

5
front/src/pages/settings/data-model/SettingsObjects.tsx
View File

@ -3,6 +3,7 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { getObjectSlug } from '@/metadata/utils/getObjectSlug';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import {
@ -76,7 +77,9 @@ export const SettingsObjects = () => {
/>
}
onClick={() =>
navigate(`/settings/objects/${objectItem.namePlural}`)
navigate(
`/settings/objects/${getObjectSlug(objectItem)}`,
)
}
/>
))}

4
front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx
View File

@ -14,8 +14,8 @@ const meta: Meta<PageDecoratorArgs> = {
component: SettingsObjectDetail,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:pluralObjectName',
routeParams: { ':pluralObjectName': 'companies' },
routePath: '/settings/objects/:objectSlug',
routeParams: { ':objectSlug': 'companies' },
},
parameters: {
msw: graphqlMocks,

4
front/src/pages/settings/data-model/__stories__/SettingsObjectEdit.stories.tsx
View File

@ -14,8 +14,8 @@ const meta: Meta<PageDecoratorArgs> = {
component: SettingsObjectEdit,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:pluralObjectName/edit',
routeParams: { ':pluralObjectName': 'companies' },
routePath: '/settings/objects/:objectSlug/edit',
routeParams: { ':objectSlug': 'companies' },
},
parameters: {
msw: graphqlMocks,

4
front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx
View File

@ -15,8 +15,8 @@ const meta: Meta<PageDecoratorArgs> = {
component: SettingsObjectNewFieldStep1,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:pluralObjectName/new-field/step-1',
routeParams: { ':pluralObjectName': 'companies' },
routePath: '/settings/objects/:objectSlug/new-field/step-1',
routeParams: { ':objectSlug': 'companies' },
},
parameters: {
msw: graphqlMocks,

4
front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep2.stories.tsx
View File

@ -15,8 +15,8 @@ const meta: Meta<PageDecoratorArgs> = {
component: SettingsObjectNewFieldStep2,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:pluralObjectName/new-field/step-2',
routeParams: { ':pluralObjectName': 'companies' },
routePath: '/settings/objects/:objectSlug/new-field/step-2',
routeParams: { ':objectSlug': 'companies' },
},
parameters: {
msw: graphqlMocks,