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

1997 new object field step 1 create page (#2054)

Browse Source 
* add ObjectNewField page

* add story

* refactored to include step1

* replaced step1 by step-1 and fix onCLick behavior

* refactor stories

* refactoring in progress

* refactor SettingsPageContainer

* refactor SettingsPageContainer
This commit is contained in:
bosiraphael
2023-10-16 17:11:09 +02:00
committed by GitHub
parent 525603227a
commit e147e7aebb
39 changed files with 254 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
front/src/App.tsx
View File

@ -29,6 +29,7 @@ import { Tasks } from '~/pages/tasks/Tasks';
import { getPageTitleFromPath } from '~/utils/title-utils';
import { ObjectTablePage } from './pages/companies/ObjectsTable';
import { SettingsObjectNewFieldStep1 } from './pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1';
export const App = () => {
const { pathname } = useLocation();
@ -102,6 +103,10 @@ export const App = () => {
path={SettingsPath.NewObject}
element={<SettingsNewObject />}
/>
<Route
path={SettingsPath.ObjectNewFieldStep1}
element={<SettingsObjectNewFieldStep1 />}
/>
</Routes>
}
/>

13
front/src/modules/settings/components/SettingsPageContainer.tsx Normal file
View File

@ -0,0 +1,13 @@
import styled from '@emotion/styled';
import { objectSettingsWidth } from '../data-model/constants/objectSettings';
const StyledSettingsPageContainer = styled.div<{ width?: number }>`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(8)};
padding: ${({ theme }) => theme.spacing(8)};
width: ${({ width }) => (width ? width + 'px' : objectSettingsWidth)};
`;
export { StyledSettingsPageContainer as SettingsPageContainer };

1
front/src/modules/types/SettingsPath.ts
View File

@ -4,6 +4,7 @@ export enum SettingsPath {
Objects = 'objects',
ObjectDetail = 'objects/:pluralObjectName',
ObjectEdit = 'objects/:pluralObjectName/edit',
ObjectNewFieldStep1 = 'objects/:pluralObjectName/new-field/step-1',
NewObject = 'objects/new',
WorkspaceMembersPage = 'workspace-members',
Workspace = 'workspace',

2
front/src/modules/ui/layout/section/components/Section.tsx
View File

@ -25,8 +25,6 @@ const StyledSection = styled.div<{
fontColor: SectionFontColor;
}>`
color: ${({ theme, fontColor }) => theme.font.color[fontColor]};
margin-bottom: ${({ theme }) => theme.spacing(4)};
margin-top: ${({ theme }) => theme.spacing(4)};
text-align: ${({ alignment }) => alignment};
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
`;

1
front/src/pages/auth/__stories__/CreateProfile.stories.tsx
View File

@ -19,7 +19,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.CreateProfile },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: [
graphql.query(
getOperationName(GET_CURRENT_USER) ?? '',

1
front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx
View File

@ -19,7 +19,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.CreateWorkspace },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: [
graphql.query(
getOperationName(GET_CURRENT_USER) ?? '',

1
front/src/pages/auth/__stories__/SignInUp.stories.tsx
View File

@ -16,7 +16,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.SignIn },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
cookie: {
tokenPair: '{}',

1
front/src/pages/companies/__stories__/Companies.add.stories.tsx
View File

@ -20,7 +20,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.CompaniesPage },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx
View File

@ -21,7 +21,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.CompaniesPage },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx
View File

@ -19,7 +19,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.CompaniesPage },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/companies/__stories__/Companies.stories.tsx
View File

@ -15,7 +15,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.CompaniesPage },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/companies/__stories__/Company.stories.tsx
View File

@ -29,7 +29,6 @@ const meta: Meta<PageDecoratorArgs> = {
routeParams: { ':companyId': mockedCompaniesData[0].id },
},
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: [
...graphqlMocks,
graphql.query(

1
front/src/pages/not-found/__stories__/NotFound.stories.tsx
View File

@ -14,7 +14,6 @@ const meta: Meta<PageDecoratorArgs> = {
routePath: 'toto-not-found',
},
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/opportunities/__stories__/Opportunities.stories.tsx
View File

@ -16,7 +16,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.OpportunitiesPage },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/people/__stories__/People.add.stories.tsx
View File

@ -20,7 +20,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.PeoplePage },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/people/__stories__/People.filterBy.stories.tsx
View File

@ -21,7 +21,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.PeoplePage },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/people/__stories__/People.inputs.stories.tsx
View File

@ -28,7 +28,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.PeoplePage },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/people/__stories__/People.sortBy.stories.tsx
View File

@ -20,7 +20,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.PeoplePage },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/people/__stories__/People.stories.tsx
View File

@ -15,7 +15,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.PeoplePage },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/people/__stories__/Person.stories.tsx
View File

@ -19,7 +19,6 @@ const meta: Meta<PageDecoratorArgs> = {
routeParams: { ':personId': mockedPeopleData[0].id },
},
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

15
front/src/pages/settings/SettingsExperience.tsx
View File

@ -1,5 +1,6 @@
import styled from '@emotion/styled';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { IconSettings } from '@/ui/display/icon';
import { H1Title } from '@/ui/display/typography/components/H1Title';
import { H2Title } from '@/ui/display/typography/components/H2Title';
@ -8,12 +9,8 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
import { Section } from '@/ui/layout/section/components/Section';
import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
padding: ${({ theme }) => theme.spacing(8)};
padding-bottom: ${({ theme }) => theme.spacing(10)};
width: 350px;
const StyledH1Title = styled(H1Title)`
margin-bottom: 0;
`;
export const SettingsExperience = () => {
@ -21,13 +18,13 @@ export const SettingsExperience = () => {
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<StyledContainer>
<H1Title title="Experience" />
<SettingsPageContainer width={350}>
<StyledH1Title title="Experience" />
<Section>
<H2Title title="Appearance" />
<ColorSchemePicker value={colorScheme} onChange={setColorScheme} />
</Section>
</StyledContainer>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);
};

72
front/src/pages/settings/SettingsProfile.tsx
View File

@ -1,5 +1,6 @@
import styled from '@emotion/styled';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { DeleteAccount } from '@/settings/profile/components/DeleteAccount';
import { EmailField } from '@/settings/profile/components/EmailField';
import { NameFields } from '@/settings/profile/components/NameFields';
@ -11,50 +12,39 @@ import { H2Title } from '@/ui/display/typography/components/H2Title';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
height: fit-content;
padding: ${({ theme }) => theme.spacing(8)};
padding-bottom: ${({ theme }) => theme.spacing(10)};
padding-bottom: 30px;
width: 350px;
const StyledH1Title = styled(H1Title)`
margin-bottom: 0;
`;
export const SettingsProfile = () => (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<>
<StyledContainer>
<H1Title title="Profile" />
<Section>
<H2Title title="Picture" />
<ProfilePictureUploader />
</Section>
<Section>
<H2Title
title="Name"
description="Your name as it will be displayed"
/>
<NameFields />
</Section>
<Section>
<H2Title
title="Email"
description="The email associated to your account"
/>
<EmailField />
</Section>
<Section>
<H2Title
title="Support"
addornment={<ToggleField />}
description="Grant Twenty support temporary access to your account so we can troubleshoot problems or recover content on your behalf. You can revoke access at any time."
/>
</Section>
<Section>
<DeleteAccount />
</Section>
</StyledContainer>
</>
<SettingsPageContainer width={350}>
<StyledH1Title title="Profile" />
<Section>
<H2Title title="Picture" />
<ProfilePictureUploader />
</Section>
<Section>
<H2Title title="Name" description="Your name as it will be displayed" />
<NameFields />
</Section>
<Section>
<H2Title
title="Email"
description="The email associated to your account"
/>
<EmailField />
</Section>
<Section>
<H2Title
title="Support"
addornment={<ToggleField />}
description="Grant Twenty support temporary access to your account so we can troubleshoot problems or recover content on your behalf. You can revoke access at any time."
/>
</Section>
<Section>
<DeleteAccount />
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);

38
front/src/pages/settings/SettingsWorkspace.tsx
View File

@ -1,5 +1,6 @@
import styled from '@emotion/styled';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
import { NameField } from '@/settings/workspace/components/NameField';
import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
@ -9,31 +10,26 @@ import { H2Title } from '@/ui/display/typography/components/H2Title';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
padding: ${({ theme }) => theme.spacing(8)};
width: 350px;
const StyledH1Title = styled(H1Title)`
margin-bottom: 0;
`;
export const SettingsWorkspace = () => (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<div>
<StyledContainer>
<H1Title title="General" />
<Section>
<H2Title title="Picture" />
<WorkspaceLogoUploader />
</Section>
<Section>
<H2Title title="Name" description="Name of your workspace" />
<NameField />
</Section>
<SettingsPageContainer width={350}>
<StyledH1Title title="General" />
<Section>
<H2Title title="Picture" />
<WorkspaceLogoUploader />
</Section>
<Section>
<H2Title title="Name" description="Name of your workspace" />
<NameField />
</Section>
<Section>
<DeleteWorkspace />
</Section>
</StyledContainer>
</div>
<Section>
<DeleteWorkspace />
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);

15
front/src/pages/settings/SettingsWorkspaceMembers.tsx
View File

@ -3,6 +3,7 @@ import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { currentUserState } from '@/auth/states/currentUserState';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { IconSettings, IconTrash } from '@/ui/display/icon';
import { H1Title } from '@/ui/display/typography/components/H1Title';
import { H2Title } from '@/ui/display/typography/components/H2Title';
@ -17,12 +18,8 @@ import {
useRemoveWorkspaceMemberMutation,
} from '~/generated/graphql';
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
height: fit-content;
padding: ${({ theme }) => theme.spacing(8)};
width: 350px;
const StyledH1Title = styled(H1Title)`
margin-bottom: 0;
`;
const StyledButtonContainer = styled.div`
@ -84,8 +81,8 @@ export const SettingsWorkspaceMembers = () => {
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<StyledContainer>
<H1Title title="Members" />
<SettingsPageContainer width={350}>
<StyledH1Title title="Members" />
{workspace?.inviteHash && (
<Section>
<H2Title
@ -124,7 +121,7 @@ export const SettingsWorkspaceMembers = () => {
/>
))}
</Section>
</StyledContainer>
</SettingsPageContainer>
<ConfirmationModal
isOpen={isConfirmationModalOpen}
setIsOpen={setIsConfirmationModalOpen}

1
front/src/pages/settings/__stories__/SettingsExperience.stories.tsx
View File

@ -14,7 +14,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: '/settings/experience' },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/settings/__stories__/SettingsProfile.stories.tsx
View File

@ -15,7 +15,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: '/settings/profile' },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/settings/__stories__/SettingsWorkspace.stories.tsx
View File

@ -14,7 +14,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: '/settings/workspace' },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx
View File

@ -16,7 +16,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: '/settings/workspace-members' },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

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

@ -1,6 +1,4 @@
import styled from '@emotion/styled';
import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsNewObjectType } from '@/settings/data-model/new-object/components/SettingsNewObjectType';
import { IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
@ -8,20 +6,10 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
const StyledContainer = styled.div`
align-items: flex-start;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(8)};
height: fit-content;
padding: ${({ theme }) => theme.spacing(8)};
width: ${objectSettingsWidth};
`;
export const SettingsNewObject = () => {
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<StyledContainer>
<SettingsPageContainer>
<Breadcrumb
links={[
{ children: 'Objects', href: '/settings/objects' },
@ -35,7 +23,7 @@ export const SettingsNewObject = () => {
/>
<SettingsNewObjectType />
</Section>
</StyledContainer>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);
};

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

@ -2,12 +2,12 @@ import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import {
activeFieldItems,
activeObjectItems,
disabledFieldItems,
} 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,
@ -18,26 +18,16 @@ 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 { Section } from '@/ui/layout/section/components/Section';
import { Table } from '@/ui/layout/table/components/Table';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableSection } from '@/ui/layout/table/components/TableSection';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
const StyledContainer = styled.div`
const StyledDiv = styled.div`
display: flex;
flex-direction: column;
height: fit-content;
padding: ${({ theme }) => theme.spacing(8)};
width: ${objectSettingsWidth};
`;
const StyledBreadcrumb = styled(Breadcrumb)`
margin-bottom: ${({ theme }) => theme.spacing(8)};
`;
const StyledAddFieldButton = styled(Button)`
align-self: flex-end;
margin-top: ${({ theme }) => theme.spacing(2)};
justify-content: flex-end;
padding-top: ${({ theme }) => theme.spacing(2)};
`;
export const SettingsObjectDetail = () => {
@ -54,8 +44,8 @@ export const SettingsObjectDetail = () => {
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<StyledContainer>
<StyledBreadcrumb
<SettingsPageContainer>
<Breadcrumb
links={[
{ children: 'Objects', href: '/settings/objects' },
{ children: activeObject?.name ?? '' },
@ -68,43 +58,54 @@ export const SettingsObjectDetail = () => {
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.`}
/>
<Table>
<StyledObjectFieldTableRow>
<TableHeader>Name</TableHeader>
<TableHeader>Field type</TableHeader>
<TableHeader>Data type</TableHeader>
<TableHeader></TableHeader>
</StyledObjectFieldTableRow>
<TableSection title="Active">
{activeFieldItems.map((fieldItem) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
fieldItem={fieldItem}
/>
))}
</TableSection>
{!!disabledFieldItems.length && (
<TableSection isInitiallyExpanded={false} title="Disabled">
{disabledFieldItems.map((fieldItem) => (
<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.`}
/>
<Table>
<StyledObjectFieldTableRow>
<TableHeader>Name</TableHeader>
<TableHeader>Field type</TableHeader>
<TableHeader>Data type</TableHeader>
<TableHeader></TableHeader>
</StyledObjectFieldTableRow>
<TableSection title="Active">
{activeFieldItems.map((fieldItem) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
fieldItem={fieldItem}
/>
))}
</TableSection>
)}
</Table>
<StyledAddFieldButton
Icon={IconPlus}
title="Add Field"
size="small"
variant="secondary"
/>
</StyledContainer>
{!!disabledFieldItems.length && (
<TableSection isInitiallyExpanded={false} title="Disabled">
{disabledFieldItems.map((fieldItem) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
fieldItem={fieldItem}
/>
))}
</TableSection>
)}
</Table>
<StyledDiv>
<Button
Icon={IconPlus}
title="Add Field"
size="small"
variant="secondary"
onClick={() =>
navigate(
disabledFieldItems.length
? './new-field/step-1'
: './new-field/step-2',
)
}
/>
</StyledDiv>
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);
};

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

@ -1,21 +1,14 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
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';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
const StyledContainer = styled.div`
height: fit-content;
padding: ${({ theme }) => theme.spacing(8)};
width: ${objectSettingsWidth};
`;
export const SettingsObjectEdit = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
@ -29,7 +22,7 @@ export const SettingsObjectEdit = () => {
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<StyledContainer>
<SettingsPageContainer>
<Breadcrumb
links={[
{ children: 'Objects', href: '/settings/objects' },
@ -46,7 +39,7 @@ export const SettingsObjectEdit = () => {
iconKey={activeObject.Icon.name}
/>
)}
</StyledContainer>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);
};

38
front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx Normal file
View File

@ -0,0 +1,38 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { activeObjectItems } from '@/settings/data-model/constants/mockObjects';
import { AppPath } from '@/types/AppPath';
import { IconSettings } from '@/ui/display/icon';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsObjectNewFieldStep1 = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
const activeObject = activeObjectItems.find(
(activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
);
useEffect(() => {
if (!activeObject) navigate(AppPath.NotFound);
}, [activeObject, navigate]);
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<Breadcrumb
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject?.name ?? '',
href: `/settings/objects/${pluralObjectName}`,
},
{ children: 'New Field' },
]}
/>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);
};

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

@ -2,11 +2,11 @@ import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import {
activeObjectItems,
disabledObjectItems,
} from '@/settings/data-model/constants/mockObjects';
import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
import {
IconChevronRight,
IconDotsVertical,
@ -18,18 +18,13 @@ import { H1Title } from '@/ui/display/typography/components/H1Title';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Button } from '@/ui/input/button/components/Button';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
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';
const StyledContainer = styled.div`
height: fit-content;
padding: ${({ theme }) => theme.spacing(8)};
width: ${objectSettingsWidth};
`;
const StyledTableRow = styled(TableRow)`
grid-template-columns: 180px 98.7px 98.7px 98.7px 36px;
`;
@ -61,7 +56,6 @@ const StyledHeader = styled.div`
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: ${({ theme }) => theme.spacing(8)};
`;
const StyledH1Title = styled(H1Title)`
@ -74,7 +68,7 @@ export const SettingsObjects = () => {
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<StyledContainer>
<SettingsPageContainer>
<StyledHeader>
<StyledH1Title title="Objects" />
<Button
@ -87,49 +81,26 @@ export const SettingsObjects = () => {
}}
/>
</StyledHeader>
<H2Title title="Existing objects" />
<Table>
<StyledTableRow>
<TableHeader>Name</TableHeader>
<TableHeader>Type</TableHeader>
<TableHeader align="right">Fields</TableHeader>
<TableHeader align="right">Instances</TableHeader>
<TableHeader></TableHeader>
</StyledTableRow>
<TableSection title="Active">
{activeObjectItems.map((objectItem) => (
<StyledTableRow
key={objectItem.name}
onClick={() =>
navigate(`/settings/objects/${objectItem.name.toLowerCase()}`)
}
>
<StyledNameTableCell>
<objectItem.Icon size={theme.icon.size.md} />
{objectItem.name}
</StyledNameTableCell>
<TableCell>
{objectItem.type === 'standard' ? (
<StyledTag color="blue" text="Standard" />
) : (
<StyledTag color="orange" text="Custom" />
)}
</TableCell>
<TableCell align="right">{objectItem.fields}</TableCell>
<TableCell align="right">{objectItem.instances}</TableCell>
<StyledIconTableCell>
<StyledIconChevronRight
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
</StyledIconTableCell>
</StyledTableRow>
))}
</TableSection>
{!!disabledObjectItems.length && (
<TableSection title="Disabled">
{disabledObjectItems.map((objectItem) => (
<StyledTableRow key={objectItem.name}>
<Section>
<H2Title title="Existing objects" />
<Table>
<StyledTableRow>
<TableHeader>Name</TableHeader>
<TableHeader>Type</TableHeader>
<TableHeader align="right">Fields</TableHeader>
<TableHeader align="right">Instances</TableHeader>
<TableHeader></TableHeader>
</StyledTableRow>
<TableSection title="Active">
{activeObjectItems.map((objectItem) => (
<StyledTableRow
key={objectItem.name}
onClick={() =>
navigate(
`/settings/objects/${objectItem.name.toLowerCase()}`,
)
}
>
<StyledNameTableCell>
<objectItem.Icon size={theme.icon.size.md} />
{objectItem.name}
@ -144,7 +115,7 @@ export const SettingsObjects = () => {
<TableCell align="right">{objectItem.fields}</TableCell>
<TableCell align="right">{objectItem.instances}</TableCell>
<StyledIconTableCell>
<StyledIconDotsVertical
<StyledIconChevronRight
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
@ -152,9 +123,36 @@ export const SettingsObjects = () => {
</StyledTableRow>
))}
</TableSection>
)}
</Table>
</StyledContainer>
{!!disabledObjectItems.length && (
<TableSection title="Disabled">
{disabledObjectItems.map((objectItem) => (
<StyledTableRow key={objectItem.name}>
<StyledNameTableCell>
<objectItem.Icon size={theme.icon.size.md} />
{objectItem.name}
</StyledNameTableCell>
<TableCell>
{objectItem.type === 'standard' ? (
<StyledTag color="blue" text="Standard" />
) : (
<StyledTag color="orange" text="Custom" />
)}
</TableCell>
<TableCell align="right">{objectItem.fields}</TableCell>
<TableCell align="right">{objectItem.instances}</TableCell>
<StyledIconTableCell>
<StyledIconDotsVertical
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
</StyledIconTableCell>
</StyledTableRow>
))}
</TableSection>
)}
</Table>
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);
};

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

@ -16,7 +16,6 @@ const meta: Meta<PageDecoratorArgs> = {
routePath: '/settings/objects/new',
},
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

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

@ -17,7 +17,6 @@ const meta: Meta<PageDecoratorArgs> = {
routeParams: { ':pluralObjectName': 'companies' },
},
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

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

@ -17,7 +17,6 @@ const meta: Meta<PageDecoratorArgs> = {
routeParams: { ':pluralObjectName': 'companies' },
},
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

28
front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Meta, StoryObj } from '@storybook/react';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { SettingsObjectNewFieldStep1 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep1';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/SettingsObjectNewField/SettingsObjectNewFieldStep1',
component: SettingsObjectNewFieldStep1,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:pluralObjectName/new-field/step-1',
routeParams: { ':pluralObjectName': 'companies' },
},
parameters: {
msw: graphqlMocks,
},
};
export default meta;
export type Story = StoryObj<typeof SettingsObjectNewFieldStep1>;
export const Default: Story = {};

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

@ -16,7 +16,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: '/settings/objects' },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};

1
front/src/pages/tasks/__stories__/Tasks.stories.tsx
View File

@ -15,7 +15,6 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.TasksPage },
parameters: {
docs: { story: 'inline', iframeHeight: '500px' },
msw: graphqlMocks,
},
};