Produktmanagement hinzugefügt und kleinere Bug behoben

buildtime/client/material-editor/node_modules/.tmp/tsconfig.app.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["../../src/app.tsx","../../src/layout.tsx","../../src/keycloak.ts","../../src/main.tsx","../../src/api/propertytype.api.ts","../../src/api/propertytypegroup.api.ts","../../src/api/value.api.ts","../../src/components/footer.tsx","../../src/components/navbar.tsx","../../src/components/properties/entityformdialog.tsx","../../src/components/properties/properties.tsx","../../src/components/properties/propertytypegrid.tsx","../../src/components/properties/propertytypegrouptree.tsx","../../src/components/properties/valuegrid.tsx","../../src/data/propertytype.ts","../../src/data/propertytypegrouptable.ts","../../src/data/value.ts","../../src/pages/homepage.tsx","../../src/pages/notfoundpage.tsx"],"errors":true,"version":"6.0.3"}

buildtime/client/material-editor/node_modules/.tmp/tsconfig.node.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["../../vite.config.ts"],"version":"6.0.3"}

buildtime/client/material-editor/src/api/product.api.ts

@@ -0,0 +1,56 @@
+import ky from 'ky'
+import type { Product } from '../data/product'
+import type { Property } from '../data/property';
+
+const API_BASE_URL = 'http://localhost:8088'
+
+export async function createProduct(product: Product): Promise<Product> {
+    const response = await ky
+        .post(`${API_BASE_URL}/createProduct`, { json: product })
+        .json<{ status: string; data: Product }>()
+
+    return response.data
+}
+
+export async function updateProduct(product: Product): Promise<void> {
+    await ky.put(`${API_BASE_URL}/updateProduct`, { json: product })
+}
+
+export async function deleteProduct(id: number): Promise<void> {
+    await ky.delete(`${API_BASE_URL}/deleteProduct/${id}`)
+}
+
+export async function getProduct(id: number): Promise<Product> {
+    const response = await ky
+        .get(`${API_BASE_URL}/getProduct/${id}`)
+        .json<{ status: string; product: Product }>()
+
+    return response.product
+}
+
+export async function getProductsByGroupId(groupId: number): Promise<Product[]> {
+    const response = await ky
+        .get(`${API_BASE_URL}/getProductsByGroupId/${groupId}`)
+        .json<{ status: string; groupId: number; products: Product[] }>()
+
+    // the backend returns null instead of [] when there are no matching products
+    return response.products ?? []
+}
+
+// note: the registered route only carries :productId, propertyId is sent in the body
+export async function addPropertyToProductId(productId: number, propertyId: number): Promise<void> {
+    await ky.post(`${API_BASE_URL}/addPropertyToProductId/${productId}`, { json: { propertyId } })
+}
+
+// note: the registered route only carries :productId, propertyId is sent in the body
+export async function deletePropertyFromProductId(productId: number, propertyId: number): Promise<void> {
+    await ky.delete(`${API_BASE_URL}/deletePropertyFromProductId/${productId}`, { json: { propertyId } })
+}
+
+export async function getPropertiesFromProductId(productId: number): Promise<Property[]> {
+    const response = await ky
+        .get(`${API_BASE_URL}/getPropertiesFromProductId/${productId}`)
+        .json<{ status: string; productId: number; properties: Property[] }>()
+    return response.properties ?? []
+}
+

buildtime/client/material-editor/src/api/productGroup.api.ts

@@ -0,0 +1,73 @@
+import ky from 'ky'
+import type { ProductGroup } from '../data/productGroup'
+import type { Property } from '../data/property'
+
+type ApiResponse<T> = {
+    message: string;
+    data: T;
+}
+
+const API_BASE_URL = 'http://localhost:8088'
+
+export async function createProductGroup(productGroup: ProductGroup): Promise<ProductGroup> {
+    const response = await ky
+        .post(`${API_BASE_URL}/createProductGroup`, { json: productGroup })
+        .json<ApiResponse<ProductGroup>>()
+
+    return response.data
+}
+
+export async function updateProductGroup(productGroup: ProductGroup): Promise<ProductGroup> {
+    const response = await ky
+        .put(`${API_BASE_URL}/updateProductGroup`, { json: productGroup })
+        .json<ApiResponse<ProductGroup>>()
+
+    return response.data
+}
+
+export async function deleteProductGroup(id: number): Promise<void> {
+    await ky.delete(`${API_BASE_URL}/deleteProductGroup/${id}`)
+}
+
+export async function getProductGroup(id: number): Promise<ProductGroup> {
+    const response = await ky
+        .get(`${API_BASE_URL}/getProductGroup/${id}`)
+        .json<ApiResponse<ProductGroup>>()
+
+    return response.data
+}
+
+export async function getProductGroupsByParentId(parentId: number): Promise<ProductGroup[]> {
+    const response = await ky
+        .get(`${API_BASE_URL}/getProductGroupsByParentId/${parentId}`)
+        .json<ApiResponse<ProductGroup[]>>()
+
+    // the backend returns null instead of [] when there are no matching product groups
+    return response.data ?? []
+}
+
+export async function deleteProductFromProductGroupId(productId: number): Promise<void> {
+    await ky.delete(`${API_BASE_URL}/deleteProductFromProductGroupId/${productId}`)
+}
+
+export async function getPropertiesFromProductGroupId(productGroupId: number): Promise<Property[]> {
+    const response = await ky
+        .post(`${API_BASE_URL}/getPropertiesFromProductGroupId/${productGroupId}`)
+        .json<ApiResponse<Property[]>>()
+
+    // the backend returns null instead of [] when there are no matching properties
+    return response.data ?? []
+}
+
+export async function deletePropertyFromProductGroupId(propertyId: number, productGroupId: number): Promise<void> {
+    await ky.delete(`${API_BASE_URL}/deletePropertyFromProductGroupId/${propertyId}/${productGroupId}`)
+}
+
+export async function createPropertyToProductGroupId(propertyTypeId: number, productGroupId: number): Promise<Property> {
+    const response = await ky
+        .get(`${API_BASE_URL}/createPropertyToProductGroupId/${propertyTypeId}/${productGroupId}`)
+        .json<ApiResponse<Property>>()
+
+    return response.data
+}
+

buildtime/client/material-editor/src/components/products/ProductFormDialog.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+
+export type ProductFormValues = {
+  label: string;
+  externalId: string;
+  description: string;
+};
+
+type ProductFormDialogProps = {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (values: ProductFormValues) => Promise<void> | void;
+};
+
+const ProductFormDialog = ({ open, onClose, onSubmit }: ProductFormDialogProps) => {
+  const [label, setLabel] = useState('');
+  const [externalId, setExternalId] = useState('');
+  const [description, setDescription] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setLabel('');
+      setExternalId('');
+      setDescription('');
+    }
+  }, [open]);
+
+  const handleSubmit = async () => {
+    if (!label.trim()) return;
+    setSubmitting(true);
+    try {
+      await onSubmit({ label: label.trim(), externalId: externalId.trim(), description: description.trim() });
+      onClose();
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="xs">
+      <DialogTitle>Add Product</DialogTitle>
+      <DialogContent>
+        <Stack spacing={2} sx={{ mt: 1 }}>
+          <TextField label="Label" value={label} onChange={(e) => setLabel(e.target.value)} autoFocus required fullWidth />
+          <TextField label="External ID" value={externalId} onChange={(e) => setExternalId(e.target.value)} fullWidth />
+          <TextField
+            label="Description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            fullWidth
+            multiline
+            minRows={2}
+          />
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} disabled={submitting}>Cancel</Button>
+        <Button onClick={handleSubmit} variant="contained" disabled={submitting || !label.trim()}>
+          Add
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ProductFormDialog;

buildtime/client/material-editor/src/components/products/ProductGrid.tsx

@@ -0,0 +1,230 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import InputAdornment from '@mui/material/InputAdornment';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import SearchIcon from '@mui/icons-material/Search';
+import { DataGrid } from '@mui/x-data-grid';
+import type { GridColDef, GridRowSelectionModel } from '@mui/x-data-grid';
+
+import { createProduct, deleteProduct, getProductsByGroupId } from '../../api/product.api';
+import { getPropertiesFromProductGroupId } from '../../api/productGroup.api';
+import { getPropertyType } from '../../api/propertyType.api';
+import { getValuesFromPropertyId } from '../../api/value.api';
+import ProductFormDialog, { type ProductFormValues } from './ProductFormDialog';
+
+const EMPTY_SELECTION: GridRowSelectionModel = { type: 'include', ids: new Set() };
+
+function toSelectionModel(id: number | null): GridRowSelectionModel {
+  return id == null ? EMPTY_SELECTION : { type: 'include', ids: new Set([id]) };
+}
+
+function fromSelectionModel(model: GridRowSelectionModel): number | null {
+  const [id] = Array.from(model.ids);
+  return id == null ? null : Number(id);
+}
+
+const propertyTypeField = (propertyTypeId: number) => `propertyType_${propertyTypeId}`;
+
+type PropertyTypeColumn = {
+  propertyTypeId: number;
+  label: string;
+};
+
+type ProductRow = {
+  id: number;
+  externalId: string;
+  label: string;
+  description: string;
+  [propertyTypeField: string]: string | number;
+};
+
+async function loadProductRows(groupId: number): Promise<{ rows: ProductRow[]; propertyTypeColumns: PropertyTypeColumn[] }> {
+  const [allProperties, products] = await Promise.all([
+    getPropertiesFromProductGroupId(groupId), // Assuming this function fetches properties for all products in the group
+    getProductsByGroupId(groupId),
+  ]);
+
+  // properties without a productId are the group-level templates that define the assigned property types
+  const templatePropertyTypeIds = Array.from(
+    new Set(allProperties.filter((property) => !property.productId).map((property) => property.propertyTypeId)),
+  );
+
+  const propertyTypeColumns = await Promise.all(
+    templatePropertyTypeIds.map(async (propertyTypeId) => ({
+      propertyTypeId,
+      label: (await getPropertyType(propertyTypeId)).label,
+    })),
+  );
+
+  const rows = await Promise.all(
+    products.map(async (product) => {
+      const row: ProductRow = {
+        id: product.id,
+        externalId: product.externalId,
+        label: product.label,
+        description: product.description,
+      };
+
+      const ownProperties = allProperties.filter((property) => property.productId === product.id);
+      await Promise.all(
+        ownProperties.map(async (property) => {
+          const values = await getValuesFromPropertyId(property.id);
+          row[propertyTypeField(property.propertyTypeId)] = values.map((value) => value.label).join(',');
+        }),
+      );
+
+      return row;
+    }),
+  );
+
+  return { rows, propertyTypeColumns };
+}
+
+type ProductGridProps = {
+  groupId: number | null;
+  groupLabel: string | null;
+};
+
+const ProductGrid = ({ groupId, groupLabel }: ProductGridProps) => {
+  const [rows, setRows] = useState<ProductRow[]>([]);
+  const [propertyTypeColumns, setPropertyTypeColumns] = useState<PropertyTypeColumn[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+  const [selectedProductId, setSelectedProductId] = useState<number | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const reload = useCallback(async () => {
+    if (groupId == null) {
+      setRows([]);
+      setPropertyTypeColumns([]);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const { rows: nextRows, propertyTypeColumns: nextColumns } = await loadProductRows(groupId);
+      setRows(nextRows);
+      setPropertyTypeColumns(nextColumns);
+    } catch {
+      setError('Failed to load products.');
+    } finally {
+      setLoading(false);
+    }
+  }, [groupId]);
+
+  useEffect(() => {
+    setSelectedProductId(null);
+    reload();
+  }, [groupId, reload]);
+
+  const columns = useMemo<GridColDef<ProductRow>[]>(
+    () => [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'externalId', headerName: 'External ID', width: 140 },
+      { field: 'label', headerName: 'Label', flex: 1 },
+      { field: 'description', headerName: 'Description', flex: 1 },
+      ...propertyTypeColumns.map<GridColDef<ProductRow>>((column) => ({
+        field: propertyTypeField(column.propertyTypeId),
+        headerName: column.label,
+        flex: 1,
+      })),
+    ],
+    [propertyTypeColumns],
+  );
+
+  const filteredRows = useMemo(() => {
+    const normalizedQuery = search.trim().toLowerCase();
+    if (!normalizedQuery) return rows;
+    return rows.filter(
+      (row) =>
+        row.label.toLowerCase().includes(normalizedQuery) ||
+        row.externalId.toLowerCase().includes(normalizedQuery) ||
+        row.description.toLowerCase().includes(normalizedQuery),
+    );
+  }, [rows, search]);
+
+  const handleAddProduct = async ({ label, externalId, description }: ProductFormValues) => {
+    if (groupId == null) return;
+    await createProduct({ id: 0, label, externalId, description, productGroupId: groupId });
+    await reload();
+  };
+
+  const handleRemoveProduct = async () => {
+    if (selectedProductId == null) return;
+    if (!window.confirm('Remove selected product?')) return;
+    await deleteProduct(selectedProductId);
+    setSelectedProductId(null);
+    await reload();
+  };
+
+  return (
+    <Stack sx={{ flex: 1, minWidth: 320, p: 1 }} spacing={1}>
+      <Typography variant="subtitle1">Products{groupLabel ? ` - ${groupLabel}` : ''}</Typography>
+      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+        <TextField
+          size="small"
+          placeholder="Search products"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          fullWidth
+          disabled={groupId == null}
+          slotProps={{
+            input: {
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon fontSize="small" />
+                </InputAdornment>
+              ),
+            },
+          }}
+        />
+        <Tooltip title="Add product">
+          <span>
+            <IconButton size="small" onClick={() => setDialogOpen(true)} disabled={groupId == null}>
+              <AddIcon fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
+        <Tooltip title="Remove selected product">
+          <span>
+            <IconButton size="small" onClick={handleRemoveProduct} disabled={selectedProductId == null}>
+              <DeleteIcon fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </Stack>
+      {error && (
+        <Typography color="error" variant="body2">
+          {error}
+        </Typography>
+      )}
+      {groupId == null ? (
+        <Typography variant="body2" sx={{ p: 2 }}>
+          Select a product group to view its products.
+        </Typography>
+      ) : (
+        <Box sx={{ flexGrow: 1, minHeight: 300 }}>
+          <DataGrid
+            rows={filteredRows}
+            columns={columns}
+            loading={loading}
+            density="compact"
+            rowSelectionModel={toSelectionModel(selectedProductId)}
+            onRowSelectionModelChange={(model) => setSelectedProductId(fromSelectionModel(model))}
+            disableMultipleRowSelection
+          />
+        </Box>
+      )}
+      <ProductFormDialog open={dialogOpen} onClose={() => setDialogOpen(false)} onSubmit={handleAddProduct} />
+    </Stack>
+  );
+};
+
+export default ProductGrid;

buildtime/client/material-editor/src/components/products/ProductGroupTree.tsx

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { SyntheticEvent } from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import InputAdornment from '@mui/material/InputAdornment';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import SearchIcon from '@mui/icons-material/Search';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+
+import { createProductGroup, deleteProductGroup, getProductGroupsByParentId } from '../../api/productGroup.api';
+import EntityFormDialog, { type EntityFormValues } from '../properties/EntityFormDialog';
+
+const ROOT_PARENT_GROUP_ID = 0;
+
+export type GroupTreeItem = {
+  id: string;
+  label: string;
+  children?: GroupTreeItem[];
+};
+
+async function buildGroupTree(parentId: number): Promise<GroupTreeItem[]> {
+  const groups = await getProductGroupsByParentId(parentId);
+  return Promise.all(
+    groups.map(async (group) => {
+      const children = await buildGroupTree(group.id);
+      return {
+        id: String(group.id),
+        label: group.label,
+        children: children.length > 0 ? children : undefined,
+      };
+    }),
+  );
+}
+
+function filterGroupTree(items: GroupTreeItem[], query: string): GroupTreeItem[] {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) return items;
+
+  const filterNodes = (nodes: GroupTreeItem[]): GroupTreeItem[] =>
+    nodes.reduce<GroupTreeItem[]>((matches, node) => {
+      const filteredChildren = node.children ? filterNodes(node.children) : [];
+      const selfMatches = node.label.toLowerCase().includes(normalizedQuery);
+      if (selfMatches || filteredChildren.length > 0) {
+        matches.push({ ...node, children: selfMatches ? node.children : filteredChildren });
+      }
+      return matches;
+    }, []);
+
+  return filterNodes(items);
+}
+
+function collectIds(items: GroupTreeItem[]): string[] {
+  return items.flatMap((item) => [item.id, ...(item.children ? collectIds(item.children) : [])]);
+}
+
+function findLabel(items: GroupTreeItem[], id: string): string | null {
+  for (const item of items) {
+    if (item.id === id) return item.label;
+    const childLabel = item.children ? findLabel(item.children, id) : null;
+    if (childLabel != null) return childLabel;
+  }
+  return null;
+}
+
+type ProductGroupTreeProps = {
+  selectedGroupId: number | null;
+  onSelectedGroupChange: (groupId: number | null, groupLabel: string | null) => void;
+};
+
+const ProductGroupTree = ({ selectedGroupId, onSelectedGroupChange }: ProductGroupTreeProps) => {
+  const [tree, setTree] = useState<GroupTreeItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+  const [expandedItems, setExpandedItems] = useState<string[]>([]);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const reloadTree = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      setTree(await buildGroupTree(ROOT_PARENT_GROUP_ID));
+    } catch {
+      setError('Failed to load product groups.');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    reloadTree();
+  }, [reloadTree]);
+
+  const filteredTree = useMemo(() => filterGroupTree(tree, search), [tree, search]);
+
+  useEffect(() => {
+    if (search.trim()) {
+      setExpandedItems(collectIds(filteredTree));
+    }
+  }, [search, filteredTree]);
+
+  const handleSelectedItemsChange = (_event: SyntheticEvent | null, itemId: string | null) => {
+    onSelectedGroupChange(itemId ? Number(itemId) : null, itemId ? findLabel(tree, itemId) : null);
+  };
+
+  const handleAddGroup = async ({ label, description }: EntityFormValues) => {
+    await createProductGroup({
+      id: 0,
+      label,
+      description,
+      parentGroupId: selectedGroupId ?? ROOT_PARENT_GROUP_ID,
+    });
+    await reloadTree();
+  };
+
+  const handleRemoveGroup = async () => {
+    if (selectedGroupId == null) return;
+    if (!window.confirm('Remove selected product group?')) return;
+    await deleteProductGroup(selectedGroupId);
+    onSelectedGroupChange(null, null);
+    await reloadTree();
+  };
+
+  return (
+    <Stack sx={{ width: '33%', minWidth: 280, borderRight: '1px solid #e0e0e0', p: 1 }} spacing={1}>
+      <Typography variant="subtitle1">Product Groups</Typography>
+      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+        <TextField
+          size="small"
+          placeholder="Search groups"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          fullWidth
+          slotProps={{
+            input: {
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon fontSize="small" />
+                </InputAdornment>
+              ),
+            },
+          }}
+        />
+        <Tooltip title="Add group">
+          <IconButton size="small" onClick={() => setDialogOpen(true)}>
+            <AddIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Remove selected group">
+          <span>
+            <IconButton size="small" onClick={handleRemoveGroup} disabled={selectedGroupId == null}>
+              <DeleteIcon fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </Stack>
+      {error && (
+        <Typography color="error" variant="body2">
+          {error}
+        </Typography>
+      )}
+      <Box sx={{ flexGrow: 1, overflowY: 'auto', minHeight: 300 }}>
+        <RichTreeView
+          items={filteredTree}
+          selectedItems={selectedGroupId != null ? String(selectedGroupId) : null}
+          onSelectedItemsChange={handleSelectedItemsChange}
+          expandedItems={expandedItems}
+          onExpandedItemsChange={(_event, itemIds) => setExpandedItems(itemIds)}
+        />
+      </Box>
+      {loading && <Typography variant="body2">Loading...</Typography>}
+      <EntityFormDialog
+        open={dialogOpen}
+        title="Add Product Group"
+        onClose={() => setDialogOpen(false)}
+        onSubmit={handleAddGroup}
+      />
+    </Stack>
+  );
+};
+
+export default ProductGroupTree;

buildtime/client/material-editor/src/components/products/Products.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback, useState } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+import ProductGroupTree from './ProductGroupTree';
+import ProductGrid from './ProductGrid';
+
+const Products: React.FC = () => {
+  const [selectedGroupId, setSelectedGroupId] = useState<number | null>(null);
+  const [selectedGroupLabel, setSelectedGroupLabel] = useState<string | null>(null);
+
+  const handleSelectedGroupChange = useCallback((groupId: number | null, groupLabel: string | null) => {
+    setSelectedGroupId(groupId);
+    setSelectedGroupLabel(groupLabel);
+  }, []);
+
+  return (
+    <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
+      <Typography variant="body1" gutterBottom>
+        Product Management
+      </Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          width: '100%',
+          minHeight: 500,
+          bgcolor: '#f5f5f5',
+        }}
+      >
+        <ProductGroupTree selectedGroupId={selectedGroupId} onSelectedGroupChange={handleSelectedGroupChange} />
+        <ProductGrid groupId={selectedGroupId} groupLabel={selectedGroupLabel} />
+      </Box>
+    </Box>
+  );
+};
+
+export default Products;

buildtime/client/material-editor/src/data/product.ts

@@ -0,0 +1,7 @@
+export type Product = {
+    id: number; 
+    label: string;
+    externalId: string;
+    description: string;
+    productGroupId: number;
+}

buildtime/client/material-editor/src/data/productGroup.ts

@@ -0,0 +1,6 @@
+export type ProductGroup = {
+    id: number; 
+    label: string;
+    description: string;
+    parentGroupId: number;
+}; 

buildtime/client/material-editor/src/data/property.ts

@@ -0,0 +1,8 @@
+export type Property = {
+    id: number;
+    label: string;
+    description: string;
+    propertyTypeId: number;
+    productId: number;
+    productGroupId: number;
+};

buildtime/client/material-editor/src/pages/HomePage.tsx

@@ -7,6 +7,7 @@ import TabList from '@mui/lab/TabList';
 import TabPanel from '@mui/lab/TabPanel';
 
 import Properties from '../components/properties/Properties';
+import Products from '../components/products/Products';
 
 const HomePage: React.FC = () => {
   const [value, setValue] = React.useState('1');
@@ -26,7 +27,7 @@ const HomePage: React.FC = () => {
             <Tab value="5" label="Calculations" />
           </TabList>
           <TabPanel value="1"><Properties /></TabPanel>
-          <TabPanel value="2">Item Two</TabPanel>
+          <TabPanel value="2"><Products /></TabPanel>
           <TabPanel value="3">Item Three</TabPanel>
           <TabPanel value="4">Item Three</TabPanel>
           <TabPanel value="5">Item Three</TabPanel>

buildtime/server/repositories/productRepository.go

@@ -34,7 +34,7 @@ func (pr *ProductRepository) CreateProduct(product *models.Product) (*models.Pro
 	}
 
 	for _, property := range properties {
-		_, err := pr.valueRepository.createPropertyFromProperty(0, product.ID, property)
+		_, err := pr.valueRepository.createPropertyFromProperty(product.ProductGroupID, product.ID, property)
 		if err != nil {
 			return nil, err
 		}

buildtime/server/server/httpServer.go

@@ -85,6 +85,7 @@ func InitHttpServer(config *viper.Viper, dbHandler *sql.DB) HttpServer {
 	router.DELETE("/deleteProduct/:id", productController.DeleteProduct)                                    // delete Product
 	router.GET("/getProduct/:id", productController.GetProduct)                                             // get Product by id
 	router.GET("/getProductsByGroupId/:groupId", productController.GetProductsByGroupId)                    // get all Products by group ID
+	router.GET("/getPropertiesFromProductId/:productId", productController.GetPropertiesFromProductId)      // get Properties from ProductGroup by ID
 	router.POST("/addPropertyToProductId/:productId", productController.AddPropertyToProductId)             // add Property to Product by ID
 	router.DELETE("/deletePropertyFromProductId/:productId", productController.DeletePropertyFromProductId) // delete Property from Product by ID