mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-11 23:37:21 +03:00
refactor: use react-hook-form in Settings Data Model Object pages (#4271)
Related issue: #3836
This commit is contained in:
parent
caa4dcf893
commit
91e5e7598b
@ -56,6 +56,7 @@
|
||||
"@types/facepaint": "^1.2.5",
|
||||
"@types/lodash.camelcase": "^4.3.7",
|
||||
"@types/lodash.merge": "^4.6.7",
|
||||
"@types/lodash.pick": "^4.3.7",
|
||||
"@types/mailparser": "^3.4.4",
|
||||
"@types/nodemailer": "^6.4.14",
|
||||
"add": "^2.0.6",
|
||||
@ -112,6 +113,7 @@
|
||||
"lodash.kebabcase": "^4.1.1",
|
||||
"lodash.merge": "^4.6.2",
|
||||
"lodash.omit": "^4.5.0",
|
||||
"lodash.pick": "^4.4.0",
|
||||
"lodash.snakecase": "^4.1.1",
|
||||
"lodash.upperfirst": "^4.3.1",
|
||||
"luxon": "^3.3.0",
|
||||
|
@ -1,103 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { validateMetadataLabel } from '@/object-metadata/utils/validateMetadataLabel';
|
||||
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
||||
import { IconPicker } from '@/ui/input/components/IconPicker';
|
||||
import { TextArea } from '@/ui/input/components/TextArea';
|
||||
import { TextInput } from '@/ui/input/components/TextInput';
|
||||
import { Section } from '@/ui/layout/section/components/Section';
|
||||
|
||||
type SettingsObjectFormSectionProps = {
|
||||
disabled?: boolean;
|
||||
icon?: string;
|
||||
singularName?: string;
|
||||
pluralName?: string;
|
||||
description?: string;
|
||||
onChange?: (
|
||||
formValues: Partial<{
|
||||
icon: string;
|
||||
labelSingular: string;
|
||||
labelPlural: string;
|
||||
description: string;
|
||||
}>,
|
||||
) => void;
|
||||
};
|
||||
|
||||
const StyledInputsContainer = styled.div`
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
margin-bottom: ${({ theme }) => theme.spacing(2)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledLabel = styled.span`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
font-size: ${({ theme }) => theme.font.size.xs};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
margin-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
text-transform: uppercase;
|
||||
`;
|
||||
|
||||
const StyledInputContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
export const SettingsObjectFormSection = ({
|
||||
disabled,
|
||||
icon = 'IconListNumbers',
|
||||
singularName = '',
|
||||
pluralName = '',
|
||||
description = '',
|
||||
onChange,
|
||||
}: SettingsObjectFormSectionProps) => (
|
||||
<Section>
|
||||
<H2Title
|
||||
title="About"
|
||||
description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
|
||||
/>
|
||||
<StyledInputsContainer>
|
||||
<StyledInputContainer>
|
||||
<StyledLabel>Icon</StyledLabel>
|
||||
<IconPicker
|
||||
disabled={disabled}
|
||||
selectedIconKey={icon}
|
||||
onChange={(icon) => {
|
||||
onChange?.({ icon: icon.iconKey });
|
||||
}}
|
||||
/>
|
||||
</StyledInputContainer>
|
||||
<TextInput
|
||||
label="Singular"
|
||||
placeholder="Listing"
|
||||
value={singularName}
|
||||
onChange={(value) => {
|
||||
if (!value || validateMetadataLabel(value)) {
|
||||
onChange?.({ labelSingular: value });
|
||||
}
|
||||
}}
|
||||
disabled={disabled}
|
||||
fullWidth
|
||||
/>
|
||||
<TextInput
|
||||
label="Plural"
|
||||
placeholder="Listings"
|
||||
value={pluralName}
|
||||
onChange={(value) => {
|
||||
if (!value || validateMetadataLabel(value)) {
|
||||
onChange?.({ labelPlural: value });
|
||||
}
|
||||
}}
|
||||
disabled={disabled}
|
||||
fullWidth
|
||||
/>
|
||||
</StyledInputsContainer>
|
||||
<TextArea
|
||||
placeholder="Write a description"
|
||||
minRows={4}
|
||||
value={description}
|
||||
onChange={(value) => onChange?.({ description: value })}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</Section>
|
||||
);
|
@ -1,24 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { SettingsObjectFormSection } from '../SettingsObjectFormSection';
|
||||
|
||||
const meta: Meta<typeof SettingsObjectFormSection> = {
|
||||
title: 'Modules/Settings/DataModel/SettingsObjectFormSection',
|
||||
component: SettingsObjectFormSection,
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SettingsObjectFormSection>;
|
||||
|
||||
export const Default: Story = {};
|
||||
|
||||
export const WithDefaultValues: Story = {
|
||||
args: {
|
||||
singularName: 'Company',
|
||||
pluralName: 'Companies',
|
||||
description: 'Lorem ipsum',
|
||||
},
|
||||
};
|
@ -0,0 +1,120 @@
|
||||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
import styled from '@emotion/styled';
|
||||
import { z } from 'zod';
|
||||
|
||||
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
|
||||
import { objectMetadataItemSchema } from '@/object-metadata/validation-schemas/objectMetadataItemSchema';
|
||||
import { IconPicker } from '@/ui/input/components/IconPicker';
|
||||
import { TextArea } from '@/ui/input/components/TextArea';
|
||||
import { TextInput } from '@/ui/input/components/TextInput';
|
||||
|
||||
export const settingsDataModelObjectAboutFormSchema =
|
||||
objectMetadataItemSchema.pick({
|
||||
description: true,
|
||||
icon: true,
|
||||
labelPlural: true,
|
||||
labelSingular: true,
|
||||
});
|
||||
|
||||
type SettingsDataModelObjectAboutFormValues = z.infer<
|
||||
typeof settingsDataModelObjectAboutFormSchema
|
||||
>;
|
||||
|
||||
type SettingsDataModelObjectAboutFormProps = {
|
||||
disabled?: boolean;
|
||||
objectMetadataItem?: ObjectMetadataItem;
|
||||
};
|
||||
|
||||
const StyledInputsContainer = styled.div`
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
margin-bottom: ${({ theme }) => theme.spacing(2)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledLabel = styled.span`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
font-size: ${({ theme }) => theme.font.size.xs};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
margin-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
text-transform: uppercase;
|
||||
`;
|
||||
|
||||
const StyledInputContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
export const SettingsDataModelObjectAboutForm = ({
|
||||
disabled,
|
||||
objectMetadataItem,
|
||||
}: SettingsDataModelObjectAboutFormProps) => {
|
||||
const { control } = useFormContext<SettingsDataModelObjectAboutFormValues>();
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledInputsContainer>
|
||||
<StyledInputContainer>
|
||||
<StyledLabel>Icon</StyledLabel>
|
||||
<Controller
|
||||
name="icon"
|
||||
control={control}
|
||||
defaultValue={objectMetadataItem?.icon ?? 'IconListNumbers'}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<IconPicker
|
||||
disabled={disabled}
|
||||
selectedIconKey={value}
|
||||
onChange={({ iconKey }) => onChange(iconKey)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</StyledInputContainer>
|
||||
{[
|
||||
{
|
||||
label: 'Singular',
|
||||
fieldName: 'labelSingular' as const,
|
||||
placeholder: 'Listing',
|
||||
defaultValue: objectMetadataItem?.labelSingular,
|
||||
},
|
||||
{
|
||||
label: 'Plural',
|
||||
fieldName: 'labelPlural' as const,
|
||||
placeholder: 'Listings',
|
||||
defaultValue: objectMetadataItem?.labelPlural,
|
||||
},
|
||||
].map(({ defaultValue, fieldName, label, placeholder }) => (
|
||||
<Controller
|
||||
key={`object-${fieldName}-text-input`}
|
||||
name={fieldName}
|
||||
control={control}
|
||||
defaultValue={defaultValue}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<TextInput
|
||||
label={label}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
fullWidth
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</StyledInputsContainer>
|
||||
<Controller
|
||||
name="description"
|
||||
control={control}
|
||||
defaultValue={objectMetadataItem?.description ?? null}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<TextArea
|
||||
placeholder="Write a description"
|
||||
minRows={4}
|
||||
value={value ?? undefined}
|
||||
onChange={(nextValue) => onChange(nextValue ?? null)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
@ -0,0 +1,43 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { mockedCompanyObjectMetadataItem } from '@/object-record/record-field/__mocks__/fieldDefinitions';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
|
||||
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
|
||||
|
||||
import { SettingsDataModelObjectAboutForm } from '../SettingsDataModelObjectAboutForm';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
flex: 1;
|
||||
`;
|
||||
|
||||
const meta: Meta<typeof SettingsDataModelObjectAboutForm> = {
|
||||
title:
|
||||
'Modules/Settings/DataModel/Objects/Forms/SettingsDataModelObjectAboutForm',
|
||||
component: SettingsDataModelObjectAboutForm,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<StyledContainer>
|
||||
<Story />
|
||||
</StyledContainer>
|
||||
),
|
||||
FormProviderDecorator,
|
||||
IconsProviderDecorator,
|
||||
ComponentDecorator,
|
||||
],
|
||||
parameters: {
|
||||
container: { width: 520 },
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SettingsDataModelObjectAboutForm>;
|
||||
|
||||
export const Default: Story = {};
|
||||
|
||||
export const WithDefaultValues: Story = {
|
||||
args: {
|
||||
objectMetadataItem: mockedCompanyObjectMetadataItem,
|
||||
},
|
||||
};
|
@ -1,47 +1,60 @@
|
||||
import { useState } from 'react';
|
||||
import { FormProvider, useForm } from 'react-hook-form';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
|
||||
import { useCreateOneObjectMetadataItem } from '@/object-metadata/hooks/useCreateOneObjectMetadataItem';
|
||||
import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
|
||||
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
|
||||
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
|
||||
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
||||
import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection';
|
||||
import {
|
||||
SettingsDataModelObjectAboutForm,
|
||||
settingsDataModelObjectAboutFormSchema,
|
||||
} from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm';
|
||||
import { settingsCreateObjectInputSchema } from '@/settings/data-model/validation-schemas/settingsCreateObjectInputSchema';
|
||||
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
|
||||
import { SettingsPath } from '@/types/SettingsPath';
|
||||
import { IconSettings } from '@/ui/display/icon';
|
||||
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
||||
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';
|
||||
|
||||
const newObjectFormSchema = settingsDataModelObjectAboutFormSchema;
|
||||
|
||||
type SettingsDataModelNewObjectFormValues = z.infer<typeof newObjectFormSchema>;
|
||||
|
||||
export const SettingsNewObject = () => {
|
||||
const navigate = useNavigate();
|
||||
const { enqueueSnackBar } = useSnackBar();
|
||||
|
||||
const { createOneObjectMetadataItem } = useCreateOneObjectMetadataItem();
|
||||
|
||||
const [formValues, setFormValues] = useState<{
|
||||
description?: string;
|
||||
icon: string;
|
||||
labelPlural: string;
|
||||
labelSingular: string;
|
||||
}>({ icon: 'IconListNumbers', labelPlural: '', labelSingular: '' });
|
||||
const settingsObjectsPagePath = getSettingsPagePath(SettingsPath.Objects);
|
||||
|
||||
const canSave = !!formValues.labelPlural && !!formValues.labelSingular;
|
||||
const formConfig = useForm<SettingsDataModelNewObjectFormValues>({
|
||||
mode: 'onTouched',
|
||||
resolver: zodResolver(newObjectFormSchema),
|
||||
});
|
||||
|
||||
const canSave = formConfig.formState.isValid;
|
||||
|
||||
const handleSave = async () => {
|
||||
const formValues = formConfig.getValues();
|
||||
|
||||
try {
|
||||
const createdObject = await createOneObjectMetadataItem(
|
||||
const { data: response } = await createOneObjectMetadataItem(
|
||||
settingsCreateObjectInputSchema.parse(formValues),
|
||||
);
|
||||
|
||||
navigate(
|
||||
createdObject.data?.createOneObject.isActive
|
||||
? `/settings/objects/${getObjectSlug(
|
||||
createdObject.data.createOneObject,
|
||||
response
|
||||
? `${settingsObjectsPagePath}/${getObjectSlug(
|
||||
response.createOneObject,
|
||||
)}`
|
||||
: '/settings/objects',
|
||||
: settingsObjectsPagePath,
|
||||
);
|
||||
} catch (error) {
|
||||
enqueueSnackBar((error as Error).message, {
|
||||
@ -51,37 +64,35 @@ export const SettingsNewObject = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
||||
<SettingsPageContainer>
|
||||
<SettingsHeaderContainer>
|
||||
<Breadcrumb
|
||||
links={[
|
||||
{
|
||||
children: 'Objects',
|
||||
href: getSettingsPagePath(SettingsPath.Objects),
|
||||
},
|
||||
{ children: 'New' },
|
||||
]}
|
||||
/>
|
||||
<SaveAndCancelButtons
|
||||
isSaveDisabled={!canSave}
|
||||
onCancel={() => navigate(getSettingsPagePath(SettingsPath.Objects))}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
</SettingsHeaderContainer>
|
||||
<SettingsObjectFormSection
|
||||
icon={formValues.icon}
|
||||
singularName={formValues.labelSingular}
|
||||
pluralName={formValues.labelPlural}
|
||||
description={formValues.description}
|
||||
onChange={(formValues) => {
|
||||
setFormValues((previousValues) => ({
|
||||
...previousValues,
|
||||
...formValues,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
<FormProvider {...formConfig}>
|
||||
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
||||
<SettingsPageContainer>
|
||||
<SettingsHeaderContainer>
|
||||
<Breadcrumb
|
||||
links={[
|
||||
{
|
||||
children: 'Objects',
|
||||
href: settingsObjectsPagePath,
|
||||
},
|
||||
{ children: 'New' },
|
||||
]}
|
||||
/>
|
||||
<SaveAndCancelButtons
|
||||
isSaveDisabled={!canSave}
|
||||
onCancel={() => navigate(settingsObjectsPagePath)}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
</SettingsHeaderContainer>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="About"
|
||||
description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
|
||||
/>
|
||||
<SettingsDataModelObjectAboutForm />
|
||||
</Section>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
@ -1,5 +1,9 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import { FormProvider, useForm } from 'react-hook-form';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import pick from 'lodash.pick';
|
||||
import { z } from 'zod';
|
||||
|
||||
import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
|
||||
import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
|
||||
@ -7,7 +11,10 @@ import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
|
||||
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
|
||||
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
|
||||
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
||||
import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection';
|
||||
import {
|
||||
SettingsDataModelObjectAboutForm,
|
||||
settingsDataModelObjectAboutFormSchema,
|
||||
} from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm';
|
||||
import { SettingsDataModelObjectSettingsFormCard } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard';
|
||||
import { settingsUpdateObjectInputSchema } from '@/settings/data-model/validation-schemas/settingsUpdateObjectInputSchema';
|
||||
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
|
||||
@ -21,6 +28,12 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
|
||||
import { Section } from '@/ui/layout/section/components/Section';
|
||||
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
|
||||
|
||||
const objectEditFormSchema = settingsDataModelObjectAboutFormSchema;
|
||||
|
||||
type SettingsDataModelObjectEditFormValues = z.infer<
|
||||
typeof objectEditFormSchema
|
||||
>;
|
||||
|
||||
export const SettingsObjectEdit = () => {
|
||||
const navigate = useNavigate();
|
||||
const { enqueueSnackBar } = useSnackBar();
|
||||
@ -33,57 +46,37 @@ export const SettingsObjectEdit = () => {
|
||||
const activeObjectMetadataItem =
|
||||
findActiveObjectMetadataItemBySlug(objectSlug);
|
||||
|
||||
const [formValues, setFormValues] = useState<
|
||||
Partial<{
|
||||
icon: string;
|
||||
labelSingular: string;
|
||||
labelPlural: string;
|
||||
description: string;
|
||||
}>
|
||||
>({});
|
||||
const settingsObjectsPagePath = getSettingsPagePath(SettingsPath.Objects);
|
||||
|
||||
const formConfig = useForm<SettingsDataModelObjectEditFormValues>({
|
||||
mode: 'onTouched',
|
||||
resolver: zodResolver(objectEditFormSchema),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeObjectMetadataItem) {
|
||||
navigate(AppPath.NotFound);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!Object.keys(formValues).length) {
|
||||
setFormValues({
|
||||
icon: activeObjectMetadataItem.icon ?? undefined,
|
||||
labelSingular: activeObjectMetadataItem.labelSingular,
|
||||
labelPlural: activeObjectMetadataItem.labelPlural,
|
||||
description: activeObjectMetadataItem.description ?? undefined,
|
||||
});
|
||||
}
|
||||
}, [activeObjectMetadataItem, formValues, navigate]);
|
||||
if (!activeObjectMetadataItem) navigate(AppPath.NotFound);
|
||||
}, [activeObjectMetadataItem, navigate]);
|
||||
|
||||
if (!activeObjectMetadataItem) return null;
|
||||
|
||||
const areRequiredFieldsFilled =
|
||||
!!formValues.labelSingular && !!formValues.labelPlural;
|
||||
|
||||
const hasChanges =
|
||||
formValues.description !== activeObjectMetadataItem.description ||
|
||||
formValues.icon !== activeObjectMetadataItem.icon ||
|
||||
formValues.labelPlural !== activeObjectMetadataItem.labelPlural ||
|
||||
formValues.labelSingular !== activeObjectMetadataItem.labelSingular;
|
||||
|
||||
const canSave = areRequiredFieldsFilled && hasChanges;
|
||||
const { isDirty, isValid } = formConfig.formState;
|
||||
const canSave = isDirty && isValid;
|
||||
|
||||
const handleSave = async () => {
|
||||
const editedObjectMetadataItem = {
|
||||
...activeObjectMetadataItem,
|
||||
...formValues,
|
||||
};
|
||||
const formValues = formConfig.getValues();
|
||||
const dirtyFieldKeys = Object.keys(
|
||||
formConfig.formState.dirtyFields,
|
||||
) as (keyof SettingsDataModelObjectEditFormValues)[];
|
||||
|
||||
try {
|
||||
await updateOneObjectMetadataItem({
|
||||
idToUpdate: activeObjectMetadataItem.id,
|
||||
updatePayload: settingsUpdateObjectInputSchema.parse(formValues),
|
||||
updatePayload: settingsUpdateObjectInputSchema.parse(
|
||||
pick(formValues, dirtyFieldKeys),
|
||||
),
|
||||
});
|
||||
|
||||
navigate(`/settings/objects/${getObjectSlug(editedObjectMetadataItem)}`);
|
||||
navigate(`${settingsObjectsPagePath}/${getObjectSlug(formValues)}`);
|
||||
} catch (error) {
|
||||
enqueueSnackBar((error as Error).message, {
|
||||
variant: 'error',
|
||||
@ -96,63 +89,68 @@ export const SettingsObjectEdit = () => {
|
||||
idToUpdate: activeObjectMetadataItem.id,
|
||||
updatePayload: { isActive: false },
|
||||
});
|
||||
navigate(getSettingsPagePath(SettingsPath.Objects));
|
||||
navigate(settingsObjectsPagePath);
|
||||
};
|
||||
|
||||
return (
|
||||
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
||||
<SettingsPageContainer>
|
||||
<SettingsHeaderContainer>
|
||||
<Breadcrumb
|
||||
links={[
|
||||
{ children: 'Objects', href: '/settings/objects' },
|
||||
{
|
||||
children: activeObjectMetadataItem.labelPlural,
|
||||
href: `/settings/objects/${objectSlug}`,
|
||||
},
|
||||
{ children: 'Edit' },
|
||||
]}
|
||||
/>
|
||||
{activeObjectMetadataItem.isCustom && (
|
||||
<SaveAndCancelButtons
|
||||
isSaveDisabled={!canSave}
|
||||
onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
|
||||
onSave={handleSave}
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
<FormProvider {...formConfig}>
|
||||
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
||||
<SettingsPageContainer>
|
||||
<SettingsHeaderContainer>
|
||||
<Breadcrumb
|
||||
links={[
|
||||
{
|
||||
children: 'Objects',
|
||||
href: settingsObjectsPagePath,
|
||||
},
|
||||
{
|
||||
children: activeObjectMetadataItem.labelPlural,
|
||||
href: `${settingsObjectsPagePath}/${objectSlug}`,
|
||||
},
|
||||
{ children: 'Edit' },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</SettingsHeaderContainer>
|
||||
<SettingsObjectFormSection
|
||||
disabled={!activeObjectMetadataItem.isCustom}
|
||||
icon={formValues.icon}
|
||||
singularName={formValues.labelSingular}
|
||||
pluralName={formValues.labelPlural}
|
||||
description={formValues.description}
|
||||
onChange={(values) =>
|
||||
setFormValues((previousFormValues) => ({
|
||||
...previousFormValues,
|
||||
...values,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Settings"
|
||||
description="Choose the fields that will identify your records"
|
||||
/>
|
||||
<SettingsDataModelObjectSettingsFormCard
|
||||
objectMetadataItem={activeObjectMetadataItem}
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title title="Danger zone" description="Disable object" />
|
||||
<Button
|
||||
Icon={IconArchive}
|
||||
title="Disable"
|
||||
size="small"
|
||||
onClick={handleDisable}
|
||||
/>
|
||||
</Section>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
{activeObjectMetadataItem.isCustom && (
|
||||
<SaveAndCancelButtons
|
||||
isSaveDisabled={!canSave}
|
||||
onCancel={() =>
|
||||
navigate(`${settingsObjectsPagePath}/${objectSlug}`)
|
||||
}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
)}
|
||||
</SettingsHeaderContainer>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="About"
|
||||
description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
|
||||
/>
|
||||
<SettingsDataModelObjectAboutForm
|
||||
disabled={!activeObjectMetadataItem.isCustom}
|
||||
objectMetadataItem={activeObjectMetadataItem}
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Settings"
|
||||
description="Choose the fields that will identify your records"
|
||||
/>
|
||||
<SettingsDataModelObjectSettingsFormCard
|
||||
objectMetadataItem={activeObjectMetadataItem}
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title title="Danger zone" description="Disable object" />
|
||||
<Button
|
||||
Icon={IconArchive}
|
||||
title="Disable"
|
||||
size="small"
|
||||
onClick={handleDisable}
|
||||
/>
|
||||
</Section>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
@ -0,0 +1,13 @@
|
||||
import { FormProvider, useForm } from 'react-hook-form';
|
||||
import { Decorator } from '@storybook/react';
|
||||
|
||||
export const FormProviderDecorator: Decorator = (Story) => {
|
||||
const formConfig = useForm();
|
||||
|
||||
return (
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
<FormProvider {...formConfig}>
|
||||
<Story />
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
11
yarn.lock
11
yarn.lock
@ -15636,6 +15636,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/lodash.pick@npm:^4.3.7":
|
||||
version: 4.4.9
|
||||
resolution: "@types/lodash.pick@npm:4.4.9"
|
||||
dependencies:
|
||||
"@types/lodash": "npm:*"
|
||||
checksum: 61ae2fb9fe817a2f398863d10dc57e3cb864ebadefb7f3554d8d0c189448e08a174d6bfdd6e0220988ea084a2d47c3377908cf037e2b3ce552aa79ce0f36bc9f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/lodash.snakecase@npm:^4.1.7":
|
||||
version: 4.1.9
|
||||
resolution: "@types/lodash.snakecase@npm:4.1.9"
|
||||
@ -44428,6 +44437,7 @@ __metadata:
|
||||
"@types/lodash.isobject": "npm:^3.0.7"
|
||||
"@types/lodash.kebabcase": "npm:^4.1.7"
|
||||
"@types/lodash.merge": "npm:^4.6.7"
|
||||
"@types/lodash.pick": "npm:^4.3.7"
|
||||
"@types/lodash.snakecase": "npm:^4.1.7"
|
||||
"@types/lodash.upperfirst": "npm:^4.3.7"
|
||||
"@types/luxon": "npm:^3.3.0"
|
||||
@ -44525,6 +44535,7 @@ __metadata:
|
||||
lodash.kebabcase: "npm:^4.1.1"
|
||||
lodash.merge: "npm:^4.6.2"
|
||||
lodash.omit: "npm:^4.5.0"
|
||||
lodash.pick: "npm:^4.4.0"
|
||||
lodash.snakecase: "npm:^4.1.1"
|
||||
lodash.upperfirst: "npm:^4.3.1"
|
||||
luxon: "npm:^3.3.0"
|
||||
|
Loading…
Reference in New Issue
Block a user