admin/twenty
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

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

@ -1,13 +1,46 @@
import { useParams } from 'react-router-dom';
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { getFieldSlug } from '@/metadata/utils/getFieldSlug';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { IconSettings } from '@/ui/display/icon';
import { SettingsObjectFieldFormSection } from '@/settings/data-model/components/SettingsObjectFieldFormSection';
import { SettingsObjectFieldTypeSelectSection } from '@/settings/data-model/components/SettingsObjectFieldTypeSelectSection';
import { ObjectFieldDataType } from '@/settings/data-model/types/ObjectFieldDataType';
import { AppPath } from '@/types/AppPath';
import { IconArchive, IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Button } from '@/ui/input/button/components/Button';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsObjectFieldEdit = () => {
const { objectSlug = '', fieldName = '' } = useParams();
const navigate = useNavigate();
const { objectSlug = '', fieldSlug = '' } = useParams();
const { findActiveObjectBySlug, loading } = useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
const { disableField } = useFieldMetadata();
const activeField = activeObject?.fields.find(
(field) => field.isActive && getFieldSlug(field) === fieldSlug,
);
useEffect(() => {
if (loading) return;
if (!activeObject || !activeField) navigate(AppPath.NotFound);
}, [activeField, activeObject, loading, navigate]);
if (!activeObject || !activeField) return null;
const handleDisable = async () => {
await disableField(activeField);
navigate(`/settings/objects/${objectSlug}`);
};
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
@ -16,15 +49,33 @@ export const SettingsObjectFieldEdit = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: `${objectSlug}`,
children: activeObject.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{
children: `${fieldName}`,
},
{ children: activeField.label },
]}
/>
</SettingsHeaderContainer>
<SettingsObjectFieldFormSection
disabled={!activeField.isCustom}
name={activeField.label}
description={activeField.description ?? undefined}
iconKey={activeField.icon ?? undefined}
onChange={() => undefined}
/>
<SettingsObjectFieldTypeSelectSection
disabled
type={activeField.type as ObjectFieldDataType}
/>
<Section>
<H2Title title="Danger zone" description="Disable this field" />
<Button
Icon={IconArchive}
title="Disable"
size="small"
onClick={handleDisable}
/>
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);