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

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

@ -2,12 +2,8 @@ import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import {
activeFieldItems,
activeObjectItems,
disabledFieldItems,
} from '@/settings/data-model/constants/mockObjects';
import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection';
import {
SettingsObjectFieldItemTableRow,
@ -34,13 +30,23 @@ export const SettingsObjectDetail = () => {
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">
@ -48,20 +54,20 @@ export const SettingsObjectDetail = () => {
<Breadcrumb
links={[
{ children: 'Objects', href: '/settings/objects' },
{ children: activeObject?.name ?? '' },
{ children: activeObject?.labelPlural ?? '' },
]}
/>
{activeObject && (
<SettingsAboutSection
Icon={activeObject?.Icon}
name={activeObject.name}
type={activeObject.type}
iconKey={activeObject.icon ?? undefined}
name={activeObject.labelPlural || ''}
isCustom={activeObject.isCustom}
/>
)}
<Section>
<H2Title
title="Fields"
description={`Customise the fields available in the ${activeObject?.singularName} views and their display order in the ${activeObject?.singularName} detail view and menus.`}
description={`Customise the fields available in the ${activeObject?.nameSingular} views and their display order in the ${activeObject?.nameSingular} detail view and menus.`}
/>
<Table>
<StyledObjectFieldTableRow>
@ -71,21 +77,21 @@ export const SettingsObjectDetail = () => {
<TableHeader></TableHeader>
</StyledObjectFieldTableRow>
<TableSection title="Active">
{activeFieldItems.map((fieldItem) => (
{activeFields?.map((fieldItem) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
ActionIcon={IconDotsVertical}
key={fieldItem.id}
fieldItem={fieldItem}
ActionIcon={IconDotsVertical}
/>
))}
</TableSection>
{!!disabledFieldItems.length && (
{!!disabledFields?.length && (
<TableSection isInitiallyExpanded={false} title="Disabled">
{disabledFieldItems.map((fieldItem) => (
{disabledFields.map((fieldItem) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
ActionIcon={IconDotsVertical}
key={fieldItem.id}
fieldItem={fieldItem}
ActionIcon={IconDotsVertical}
/>
))}
</TableSection>
@ -99,7 +105,7 @@ export const SettingsObjectDetail = () => {
variant="secondary"
onClick={() =>
navigate(
disabledFieldItems.length
disabledFields?.length
? './new-field/step-1'
: './new-field/step-2',
)