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

Refactor settings > data model section (#2031)

Browse Source
This commit is contained in:
Charles Bochet
2023-10-15 19:00:07 +02:00
committed by GitHub
parent e9d0c8a928
commit b128d53b58
21 changed files with 160 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
front/src/pages/settings/constants/mockObjects.ts
View File

@ -1,40 +0,0 @@
import {
IconBuildingSkyscraper,
IconLuggage,
IconPlane,
IconUser,
} from '@/ui/display/icon';
export const activeObjectItems = [
{
name: 'Companies',
Icon: IconBuildingSkyscraper,
type: 'standard',
fields: 23,
instances: 165,
},
{
name: 'People',
Icon: IconUser,
type: 'standard',
fields: 16,
instances: 462,
},
];
export const disabledObjectItems = [
{
name: 'Travels',
Icon: IconLuggage,
type: 'custom',
fields: 23,
instances: 165,
},
{
name: 'Flights',
Icon: IconPlane,
type: 'custom',
fields: 23,
instances: 165,
},
];

6
front/src/pages/settings/SettingsNewObject.tsx → front/src/pages/settings/data-model/SettingsNewObject.tsx
View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { NewObjectType } from '@/settings/objects/components/NewObjectType';
import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings';
import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
import { SettingsNewObjectType } from '@/settings/data-model/new-object/components/SettingsNewObjectType';
import { IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
@ -33,8 +33,8 @@ export const SettingsNewObject = () => {
title="Object Type"
description="The type of object you want to add"
/>
<SettingsNewObjectType />
</Section>
<NewObjectType></NewObjectType>
</StyledContainer>
</SubMenuTopBarContainer>
);

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

@ -1,28 +1,25 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import {
ObjectFieldItemTableRow,
StyledObjectFieldTableRow,
} from '@/settings/objects/components/ObjectFieldItemTableRow';
import {
activeFieldItems,
activeObjectItems,
disabledFieldItems,
} from '@/settings/objects/constants/mockObjects';
import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings';
} from '@/settings/data-model/constants/mockObjects';
import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection';
import {
SettingsObjectFieldItemTableRow,
StyledObjectFieldTableRow,
} from '@/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow';
import { AppPath } from '@/types/AppPath';
import { IconDotsVertical, IconPlus, IconSettings } from '@/ui/display/icon';
import { Tag } from '@/ui/display/tag/components/Tag';
import { IconPlus, 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 { Table } from '@/ui/layout/table/components/Table';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import { TableSection } from '@/ui/layout/table/components/TableSection';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
@ -34,11 +31,6 @@ const StyledContainer = styled.div`
width: ${objectSettingsWidth};
`;
const StyledFlexContainer = styled.div`
display: flex;
justify-content: flex-end;
`;
const StyledBreadcrumb = styled(Breadcrumb)`
margin-bottom: ${({ theme }) => theme.spacing(8)};
`;
@ -47,33 +39,9 @@ const StyledAddFieldButton = styled(Button)`
align-self: flex-end;
margin-top: ${({ theme }) => theme.spacing(2)};
`;
const StyledIconTableCell = styled(TableCell)`
justify-content: center;
padding-right: ${({ theme }) => theme.spacing(1)};
`;
const StyledTableRow = styled(TableRow)`
background-color: ${({ theme }) => theme.background.secondary};
border: ${({ theme }) => theme.border.color.medium};
`;
const StyledNameTableCell = styled(TableCell)`
color: ${({ theme }) => theme.font.color.primary};
gap: ${({ theme }) => theme.spacing(2)};
`;
const StyledTag = styled(Tag)`
box-sizing: border-box;
height: ${({ theme }) => theme.spacing(4)};
`;
const StyledIconDotsVertical = styled(IconDotsVertical)`
color: ${({ theme }) => theme.font.color.tertiary};
`;
export const SettingsObjectDetail = () => {
const navigate = useNavigate();
const theme = useTheme();
const { pluralObjectName = '' } = useParams();
const activeObject = activeObjectItems.find(
@ -93,35 +61,13 @@ export const SettingsObjectDetail = () => {
{ children: activeObject?.name ?? '' },
]}
/>
<H2Title title="About" description={`Manage you object`} />
<StyledTableRow key={activeObject?.name}>
<StyledNameTableCell>
{activeObject ? (
<activeObject.Icon size={theme.icon.size.md} />
) : (
''
)}
{activeObject?.name}
</StyledNameTableCell>
<StyledFlexContainer>
<TableCell>
{activeObject?.type === 'standard' ? (
<StyledTag color="blue" text="Standard" />
) : (
<StyledTag color="orange" text="Custom" />
)}
</TableCell>
<StyledIconTableCell>
<StyledIconDotsVertical
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
onClick={() =>
navigate(`/settings/objects/${pluralObjectName}/edit`)
}
/>
</StyledIconTableCell>
</StyledFlexContainer>
</StyledTableRow>
{activeObject && (
<SettingsAboutSection
Icon={activeObject?.Icon}
name={activeObject.name}
type={activeObject.type}
/>
)}
<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.`}
@ -135,7 +81,7 @@ export const SettingsObjectDetail = () => {
</StyledObjectFieldTableRow>
<TableSection title="Active">
{activeFieldItems.map((fieldItem) => (
<ObjectFieldItemTableRow
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
fieldItem={fieldItem}
/>
@ -144,7 +90,7 @@ export const SettingsObjectDetail = () => {
{!!disabledFieldItems.length && (
<TableSection isInitiallyExpanded={false} title="Disabled">
{disabledFieldItems.map((fieldItem) => (
<ObjectFieldItemTableRow
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
fieldItem={fieldItem}
/>

11
front/src/pages/settings/SettingsObjectEdit.tsx → front/src/pages/settings/data-model/SettingsObjectEdit.tsx
View File

@ -2,8 +2,9 @@ import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
import { activeObjectItems } from '@/settings/objects/constants/mockObjects';
import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings';
import { activeObjectItems } from '@/settings/data-model/constants/mockObjects';
import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection';
import { AppPath } from '@/types/AppPath';
import { IconSettings } from '@/ui/display/icon';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
@ -39,6 +40,12 @@ export const SettingsObjectEdit = () => {
{ children: 'Edit' },
]}
/>
{activeObject && (
<SettingsObjectIconSection
Icon={activeObject.Icon}
iconKey={activeObject.Icon.name}
/>
)}
</StyledContainer>
</SubMenuTopBarContainer>
);

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

@ -2,7 +2,11 @@ import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings';
import {
activeObjectItems,
disabledObjectItems,
} from '@/settings/data-model/constants/mockObjects';
import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
import {
IconChevronRight,
IconDotsVertical,
@ -20,11 +24,6 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import { TableSection } from '@/ui/layout/table/components/TableSection';
import {
activeObjectItems,
disabledObjectItems,
} from './constants/mockObjects';
const StyledContainer = styled.div`
height: fit-content;
padding: ${({ theme }) => theme.spacing(8)};

0
front/src/pages/settings/__stories__/SettingsNewObject.stories.tsx → front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx
View File

0
front/src/pages/settings/__stories__/SettingsObjectDetail.stories.tsx → front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx
View File

0
front/src/pages/settings/__stories__/SettingsObjectEdit.stories.tsx → front/src/pages/settings/data-model/__stories__/SettingsObjectEdit.stories.tsx
View File

0
front/src/pages/settings/__stories__/SettingsObjects.stories.tsx → front/src/pages/settings/data-model/__stories__/SettingsObjects.stories.tsx
View File