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',
)

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>

12
front/src/pages/settings/data-model/SettingsObjects.tsx
View File

@ -1,4 +1,3 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
@ -13,7 +12,6 @@ import {
import { SettingsObjectCoverImage } from '@/settings/data-model/objects/SettingsObjectCoverImage';
import { SettingsObjectDisabledMenuDropDown } from '@/settings/data-model/objects/SettingsObjectDisabledMenuDropDown';
import { IconChevronRight, IconPlus, IconSettings } from '@/ui/display/icon';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { H1Title } from '@/ui/display/typography/components/H1Title';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Button } from '@/ui/input/button/components/Button';
@ -37,14 +35,6 @@ export const SettingsObjects = () => {
const { activeObjects, disabledObjects } = useObjectMetadata();
const [icons, setIcons] = useState<Record<string, IconComponent>>({});
useEffect(() => {
import('@/ui/input/constants/icons').then((lazyLoadedIcons) => {
setIcons(lazyLoadedIcons);
});
}, []);
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
@ -76,7 +66,6 @@ export const SettingsObjects = () => {
{activeObjects.map((objectItem) => (
<SettingsObjectItemTableRow
key={objectItem.namePlural}
Icon={icons[objectItem.icon || '']}
objectItem={objectItem}
action={
<StyledIconChevronRight
@ -95,7 +84,6 @@ export const SettingsObjects = () => {
{disabledObjects.map((objectItem) => (
<SettingsObjectItemTableRow
key={objectItem.namePlural}
Icon={icons[objectItem.icon || '']}
objectItem={objectItem}
action={
<SettingsObjectDisabledMenuDropDown