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

feat: get object metadata from backend in Object Detail and New Field… (#2122)

Browse Source 
* feat: get object metadata from backend in Object Detail and New Field - Step 1

Closes #2008

* refactor: add useLazyLoadIcon hook
This commit is contained in:
Thaïs
2023-10-19 16:58:18 +02:00
committed by GitHub
parent bea9d0835b
commit f35ea19f4d
12 changed files with 133 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,14 +2,10 @@ import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
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';
import {
activeFieldItems,
activeObjectItems,
disabledFieldItems,
} from '@/settings/data-model/constants/mockObjects';
import {
SettingsObjectFieldItemTableRow,
StyledObjectFieldTableRow,
@ -37,14 +33,25 @@ const StyledAddCustomFieldButton = styled(Button)`
export const SettingsObjectNewFieldStep1 = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
const activeObject = activeObjectItems.find(
(activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
const { activeObjects } = useObjectMetadata();
const activeObject = activeObjects.find(
(activeObject) => activeObject.namePlural === pluralObjectName,
);
useEffect(() => {
if (!activeObject) navigate(AppPath.NotFound);
}, [activeObject, navigate]);
if (activeObjects.length && !activeObject) {
navigate(AppPath.NotFound);
}
}, [activeObject, activeObjects.length, navigate]);
const activeFields = activeObject?.fields.filter(
(fieldItem) => fieldItem.isActive,
);
const disabledFields = activeObject?.fields.filter(
(fieldItem) => !fieldItem.isActive,
);
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@ -54,7 +61,7 @@ export const SettingsObjectNewFieldStep1 = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject?.name ?? '',
children: activeObject?.labelPlural ?? '',
href: `/settings/objects/${pluralObjectName}`,
},
{ children: 'New Field' },
@ -65,7 +72,7 @@ export const SettingsObjectNewFieldStep1 = () => {
onCancel={() => {
navigate(`/settings/objects/${pluralObjectName}`);
}}
onSave={() => {}}
onSave={() => undefined}
/>
</SettingsHeaderContainer>
<StyledSection>
@ -81,21 +88,21 @@ export const SettingsObjectNewFieldStep1 = () => {
<TableHeader></TableHeader>
</StyledObjectFieldTableRow>
<TableSection isInitiallyExpanded={false} title="Active">
{activeFieldItems.map((fieldItem) => (
{activeFields?.map((fieldItem) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
ActionIcon={IconMinus}
key={fieldItem.id}
fieldItem={fieldItem}
ActionIcon={IconMinus}
/>
))}
</TableSection>
{!!disabledFieldItems.length && (
{!!disabledFields?.length && (
<TableSection title="Disabled">
{disabledFieldItems.map((fieldItem) => (
{disabledFields.map((fieldItem) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
ActionIcon={IconPlus}
fieldItem={fieldItem}
ActionIcon={IconPlus}
/>
))}
</TableSection>