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

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

@ -4,6 +4,7 @@ import styled from '@emotion/styled';
import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { getFieldSlug } from '@/metadata/utils/getFieldSlug';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection';
import { SettingsObjectFieldActiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown';
@ -33,49 +34,51 @@ export const SettingsObjectDetail = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { activeObjects, disableObject, findActiveObjectBySlug } =
const { disableObject, findActiveObjectBySlug, loading } =
useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
useEffect(() => {
if (activeObjects.length && !activeObject) {
navigate(AppPath.NotFound);
}
}, [activeObject, activeObjects.length, navigate]);
if (loading) return;
if (!activeObject) navigate(AppPath.NotFound);
}, [activeObject, loading, navigate]);
const { activateField, disableField, eraseField } = useFieldMetadata();
const activeFields = activeObject?.fields.filter(
if (!activeObject) return null;
const activeFields = activeObject.fields.filter(
(fieldItem) => fieldItem.isActive,
);
const disabledFields = activeObject?.fields.filter(
const disabledFields = activeObject.fields.filter(
(fieldItem) => !fieldItem.isActive,
);
const handleDisable = async () => {
await disableObject(activeObject);
navigate('/settings/objects');
};
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<Breadcrumb
links={[
{ children: 'Objects', href: '/settings/objects' },
{ children: activeObject?.labelPlural ?? '' },
{ children: activeObject.labelPlural },
]}
/>
{activeObject && (
<SettingsAboutSection
iconKey={activeObject.icon ?? undefined}
name={activeObject.labelPlural || ''}
isCustom={activeObject.isCustom}
onDisable={() => {
disableObject(activeObject);
navigate('/settings/objects');
}}
onEdit={() => navigate('./edit')}
/>
)}
<SettingsAboutSection
iconKey={activeObject.icon ?? undefined}
name={activeObject.labelPlural || ''}
isCustom={activeObject.isCustom}
onDisable={handleDisable}
onEdit={() => navigate('./edit')}
/>
<Section>
<H2Title
title="Fields"
description={`Customise the fields available in the ${activeObject?.labelSingular} views and their display order in the ${activeObject?.labelSingular} detail view and menus.`}
description={`Customise the fields available in the ${activeObject.labelSingular} views and their display order in the ${activeObject.labelSingular} detail view and menus.`}
/>
<Table>
<StyledObjectFieldTableRow>
@ -84,7 +87,7 @@ export const SettingsObjectDetail = () => {
<TableHeader>Data type</TableHeader>
<TableHeader></TableHeader>
</StyledObjectFieldTableRow>
{!!activeFields?.length && (
{!!activeFields.length && (
<TableSection title="Active">
{activeFields.map((fieldItem) => (
<SettingsObjectFieldItemTableRow
@ -94,7 +97,7 @@ export const SettingsObjectDetail = () => {
<SettingsObjectFieldActiveActionDropdown
isCustomField={fieldItem.isCustom}
scopeKey={fieldItem.id}
onEdit={() => navigate(`./${fieldItem.name}`)}
onEdit={() => navigate(`./${getFieldSlug(fieldItem)}`)}
onDisable={() => disableField(fieldItem)}
/>
}
@ -102,7 +105,7 @@ export const SettingsObjectDetail = () => {
))}
</TableSection>
)}
{!!disabledFields?.length && (
{!!disabledFields.length && (
<TableSection isInitiallyExpanded={false} title="Disabled">
{disabledFields.map((fieldItem) => (
<SettingsObjectFieldItemTableRow
@ -129,7 +132,7 @@ export const SettingsObjectDetail = () => {
variant="secondary"
onClick={() =>
navigate(
disabledFields?.length
disabledFields.length
? './new-field/step-1'
: './new-field/step-2',
)