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`) + } + /> +
);