diff --git a/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
index 112c33ebf..a63a7275f 100644
--- a/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
+++ b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
@@ -1,7 +1,8 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-import { IconDotsVertical } from '@/ui/display/icon';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
@@ -9,6 +10,11 @@ import { ObjectFieldItem } from '../../types/ObjectFieldItem';
import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
+type SettingsObjectFieldItemTableRowProps = {
+ ActionIcon: IconComponent;
+ fieldItem: ObjectFieldItem;
+};
+
export const StyledObjectFieldTableRow = styled(TableRow)`
grid-template-columns: 180px 148px 148px 36px;
`;
@@ -23,15 +29,10 @@ const StyledIconTableCell = styled(TableCell)`
padding-right: ${({ theme }) => theme.spacing(1)};
`;
-const StyledIconDotsVertical = styled(IconDotsVertical)`
- color: ${({ theme }) => theme.font.color.tertiary};
-`;
-
export const SettingsObjectFieldItemTableRow = ({
+ ActionIcon,
fieldItem,
-}: {
- fieldItem: ObjectFieldItem;
-}) => {
+}: SettingsObjectFieldItemTableRowProps) => {
const theme = useTheme();
return (
@@ -47,10 +48,7 @@ export const SettingsObjectFieldItemTableRow = ({
-
+
);
diff --git a/front/src/modules/ui/input/button/components/LightIconButton.tsx b/front/src/modules/ui/input/button/components/LightIconButton.tsx
index f8e1727a3..33198bf0c 100644
--- a/front/src/modules/ui/input/button/components/LightIconButton.tsx
+++ b/front/src/modules/ui/input/button/components/LightIconButton.tsx
@@ -104,7 +104,7 @@ export const LightIconButton = ({
size={size}
active={active}
>
- {Icon && }
+ {Icon && }
);
};
diff --git a/front/src/modules/ui/layout/section/components/Section.tsx b/front/src/modules/ui/layout/section/components/Section.tsx
index 1923f701d..858f58490 100644
--- a/front/src/modules/ui/layout/section/components/Section.tsx
+++ b/front/src/modules/ui/layout/section/components/Section.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
type SectionProps = {
children: ReactNode;
+ className?: string;
alignment?: SectionAlignment;
fullWidth?: boolean;
fontColor?: SectionFontColor;
@@ -31,11 +32,13 @@ const StyledSection = styled.div<{
export const Section = ({
children,
+ className,
alignment = SectionAlignment.Left,
fullWidth = true,
fontColor = SectionFontColor.Primary,
}: SectionProps) => (
{
{activeFieldItems.map((fieldItem) => (
))}
@@ -83,6 +84,7 @@ export const SettingsObjectDetail = () => {
{disabledFieldItems.map((fieldItem) => (
))}
diff --git a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
index 780bce335..9aaccc490 100644
--- a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
@@ -1,13 +1,38 @@
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 {
+ activeFieldItems,
+ activeObjectItems,
+ disabledFieldItems,
+} from '@/settings/data-model/constants/mockObjects';
+import {
+ SettingsObjectFieldItemTableRow,
+ StyledObjectFieldTableRow,
+} from '@/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow';
import { AppPath } from '@/types/AppPath';
-import { IconSettings } from '@/ui/display/icon';
+import { IconMinus, 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 StyledSection = styled(Section)`
+ display: flex;
+ flex-direction: column;
+`;
+
+const StyledAddCustomFieldButton = styled(Button)`
+ align-self: flex-end;
+ margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+
export const SettingsObjectNewFieldStep1 = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
@@ -32,6 +57,49 @@ export const SettingsObjectNewFieldStep1 = () => {
{ children: 'New Field' },
]}
/>
+
+
+
+
+ Name
+ Field type
+ Data type
+
+
+
+ {activeFieldItems.map((fieldItem) => (
+
+ ))}
+
+ {!!disabledFieldItems.length && (
+
+ {disabledFieldItems.map((fieldItem) => (
+
+ ))}
+
+ )}
+
+
+ navigate(`/settings/objects/${pluralObjectName}/new-field/step-2`)
+ }
+ />
+
);