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,