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

feat: add Object Field Edit page sections (#2243)

Browse Source 
Closes #2160, Closes #2163
This commit is contained in:
Thaïs
2023-10-27 12:13:01 +02:00
committed by GitHub
parent d02dd69613
commit d7b0c1190a
12 changed files with 206 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,7 @@ export const SettingsObjectEdit = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { activeObjects, disableObject, editObject, findActiveObjectBySlug } =
const { disableObject, editObject, findActiveObjectBySlug, loading } =
useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
@ -34,7 +34,7 @@ export const SettingsObjectEdit = () => {
>({});
useEffect(() => {
if (!activeObjects.length) return;
if (loading) return;
if (!activeObject) {
navigate(AppPath.NotFound);
@ -49,22 +49,22 @@ export const SettingsObjectEdit = () => {
description: activeObject.description ?? undefined,
});
}
}, [activeObject, activeObjects.length, formValues, navigate]);
}, [activeObject, formValues, loading, navigate]);
if (!activeObject) return null;
const areRequiredFieldsFilled =
!!formValues.labelSingular && !!formValues.labelPlural;
const hasChanges =
formValues.description !== activeObject?.description ||
formValues.icon !== activeObject?.icon ||
formValues.labelPlural !== activeObject?.labelPlural ||
formValues.labelSingular !== activeObject?.labelSingular;
formValues.description !== activeObject.description ||
formValues.icon !== activeObject.icon ||
formValues.labelPlural !== activeObject.labelPlural ||
formValues.labelSingular !== activeObject.labelSingular;
const canSave = areRequiredFieldsFilled && hasChanges;
const handleSave = async () => {
if (!activeObject) return;
const editedObject = { ...activeObject, ...formValues };
await editObject(editedObject);
@ -72,6 +72,11 @@ export const SettingsObjectEdit = () => {
navigate(`/settings/objects/${getObjectSlug(editedObject)}`);
};
const handleDisable = async () => {
await disableObject(activeObject);
navigate('/settings/objects');
};
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
@ -80,61 +85,52 @@ export const SettingsObjectEdit = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject?.labelPlural ?? '',
children: activeObject.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'Edit' },
]}
/>
{!!activeObject?.isCustom && (
{!!activeObject.isCustom && (
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => {
navigate(`/settings/objects/${objectSlug}`);
}}
onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
onSave={handleSave}
/>
)}
</SettingsHeaderContainer>
{activeObject && (
<>
<SettingsObjectIconSection
disabled={!activeObject.isCustom}
iconKey={formValues.icon}
label={formValues.labelPlural}
onChange={({ iconKey }) =>
setFormValues((previousFormValues) => ({
...previousFormValues,
icon: iconKey,
}))
}
/>
<SettingsObjectFormSection
disabled={!activeObject.isCustom}
singularName={formValues.labelSingular}
pluralName={formValues.labelPlural}
description={formValues.description}
onChange={(values) =>
setFormValues((previousFormValues) => ({
...previousFormValues,
...values,
}))
}
/>
<Section>
<H2Title title="Danger zone" description="Disable object" />
<Button
Icon={IconArchive}
title="Disable"
size="small"
onClick={() => {
disableObject(activeObject);
navigate('/settings/objects');
}}
/>
</Section>
</>
)}
<SettingsObjectIconSection
disabled={!activeObject.isCustom}
iconKey={formValues.icon}
label={formValues.labelPlural}
onChange={({ iconKey }) =>
setFormValues((previousFormValues) => ({
...previousFormValues,
icon: iconKey,
}))
}
/>
<SettingsObjectFormSection
disabled={!activeObject.isCustom}
singularName={formValues.labelSingular}
pluralName={formValues.labelPlural}
description={formValues.description}
onChange={(values) =>
setFormValues((previousFormValues) => ({
...previousFormValues,
...values,
}))
}
/>
<Section>
<H2Title title="Danger zone" description="Disable object" />
<Button
Icon={IconArchive}
title="Disable"
size="small"
onClick={handleDisable}
/>
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);