diff --git a/front/src/modules/settings/data-model/constants/mockObjects.ts b/front/src/modules/settings/data-model/constants/mockObjects.ts index 5d42ac39e..bf1543809 100644 --- a/front/src/modules/settings/data-model/constants/mockObjects.ts +++ b/front/src/modules/settings/data-model/constants/mockObjects.ts @@ -8,6 +8,7 @@ import { IconHeadphones, IconLink, IconLuggage, + IconMouse2, IconPlane, IconTarget, IconUser, @@ -37,6 +38,21 @@ export const activeObjectItems = [ }, ]; +export const standardObjects = [ + { + name: 'Users', + Icon: IconMouse2, + fields: 6, + description: 'Individuals who interact with your website', + }, + { + name: 'Users', + Icon: IconMouse2, + fields: 8, + description: 'Individuals who interact with your website', + }, +]; + export const disabledObjectItems = [ { name: 'Travels', diff --git a/front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx b/front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx index 6b0437058..0b6f0ad78 100644 --- a/front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx +++ b/front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx @@ -4,6 +4,7 @@ import styled from '@emotion/styled'; import { IconBox, IconDatabase, IconFileCheck } from '@/ui/display/icon'; import { SettingsObjectTypeCard } from './SettingsObjectTypeCard'; +import { SettingsStandardObjects } from './SettingsStandardObjects'; export type NewObjectType = 'Standard' | 'Custom' | 'Remote'; @@ -16,6 +17,7 @@ const StyledContainer = styled.div` display: flex; flex-direction: row; gap: ${({ theme }) => theme.spacing(2)}; + margin-bottom: ${({ theme }) => theme.spacing(8)}; width: 100%; `; @@ -25,47 +27,50 @@ export const SettingsNewObjectType = ({ }: SettingsNewObjectTypeProps) => { const theme = useTheme(); return ( - - - } - onClick={() => onTypeSelect?.('Standard')} - /> - - } - onClick={() => onTypeSelect?.('Custom')} - /> - - } - /> - + <> + + + } + onClick={() => onTypeSelect?.('Standard')} + /> + + } + onClick={() => onTypeSelect?.('Custom')} + /> + + } + /> + + {selectedType === 'Standard' && } + ); }; diff --git a/front/src/modules/settings/data-model/new-object/components/SettingsStandardObjects.tsx b/front/src/modules/settings/data-model/new-object/components/SettingsStandardObjects.tsx new file mode 100644 index 000000000..31e1c2b4e --- /dev/null +++ b/front/src/modules/settings/data-model/new-object/components/SettingsStandardObjects.tsx @@ -0,0 +1,107 @@ +import { useState } from 'react'; +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; + +import { H2Title } from '@/ui/display/typography/components/H2Title'; +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 { standardObjects } from '../../constants/mockObjects'; + +const StyledTableRow = styled(TableRow)<{ + selectedRows?: number[]; + rowNumber?: number; +}>` + align-items: center; + background: ${({ selectedRows, rowNumber, theme }) => + selectedRows?.includes(rowNumber!) + ? theme.accent.quaternary + : theme.background.primary}; + grid-template-columns: 36px 132px 240px 98.7px; +`; + +const StyledCheckboxCell = styled(TableCell)` + padding: 0 ${({ theme }) => theme.spacing(2)} 0 + ${({ theme }) => theme.spacing(1)}; +`; + +const StyledNameTableCell = styled(TableCell)` + gap: ${({ theme }) => theme.spacing(1)}; +`; + +const StyledDescriptionCell = styled.div<{ + align?: 'left' | 'center' | 'right'; +}>` + color: ${({ theme }) => theme.font.color.secondary}; + justify-content: ${({ align }) => + align === 'right' + ? 'flex-end' + : align === 'center' + ? 'center' + : 'flex-start'}; + overflow: hidden; + padding: 0 ${({ theme }) => theme.spacing(2)}; + padding: 0 ${({ theme }) => theme.spacing(2)}; + text-align: ${({ align }) => align ?? 'left'}; + text-overflow: ellipsis; + white-space: nowrap; +`; + +const StyledTable = styled(Table)` + display: grid; + gap: ${({ theme }) => theme.spacing(2)}; +`; + +export const SettingsStandardObjects = () => { + const theme = useTheme(); + const [selectedRows, setSelectedRows] = useState([]); + + return ( + <> + + + + + Name + Description + Fields + + {standardObjects.map((object, rowNumber) => ( + { + const indexOfRowClicked = selectedRows.indexOf(rowNumber); + if (indexOfRowClicked === -1) { + setSelectedRows([...selectedRows, rowNumber]); + } else { + const newSelectedRows = [...selectedRows]; + newSelectedRows.splice(indexOfRowClicked, 1); + setSelectedRows(newSelectedRows); + } + }} + key={object.name} + > + + + + + + {object.name} + + {object.description} + {object.fields} + + ))} + + + ); +}; diff --git a/front/src/modules/ui/display/icon/index.ts b/front/src/modules/ui/display/icon/index.ts index a8cc30e09..982e32b9a 100644 --- a/front/src/modules/ui/display/icon/index.ts +++ b/front/src/modules/ui/display/icon/index.ts @@ -65,6 +65,7 @@ export { IconMap, IconMinus, IconMoneybag, + IconMouse2, IconNotes, IconNumbers, IconPencil,