TreeView for ProductGroups inital implementation

buildtime/client/material-editor/src/App.tsx

@@ -7,6 +7,7 @@ const Layout = lazy(() => import('./Layout.tsx'))
 const HomePage = lazy(() => import('./pages/HomePage.tsx'))
 const LanguagesPage = lazy(() => import('./pages/LanguagesPage.tsx'))
 const PropertyPage = lazy(() => import('./pages/PropertyPage.tsx'))
+const ProductPage = lazy(() => import('./pages/ProductPage.tsx'))
 const NotFoundPage = lazy(() => import('./pages/NotFoundPage.tsx'))
 
 const renderLazyRoute = (Component: ComponentType) => (
@@ -24,6 +25,7 @@ const router = createBrowserRouter([
       { index: true, element: renderLazyRoute(HomePage) },
       { path: 'language', element: renderLazyRoute(LanguagesPage) },
       { path: 'propertypool', element: renderLazyRoute(PropertyPage) },
+      { path: 'product', element: renderLazyRoute(ProductPage) },
       { path: '*', element: renderLazyRoute(NotFoundPage) },
     ],
   },

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

@@ -0,0 +1,22 @@
+import ky from 'ky'
+import type { ProductGroup } from '../../data/productGroup'
+
+export const getProductGroups = async (): Promise<ProductGroup[]> => {
+  return ky.get(`http://localhost:8088/productgroups`).json<ProductGroup[]>()
+}   
+
+export const getProductGroupById = async (id: number): Promise<ProductGroup> => {
+  return ky.get(`http://localhost:8088/productgroup/${id}`).json<ProductGroup>()
+}
+
+export const createProductGroup = async (productGroup: ProductGroup): Promise<ProductGroup> => {
+  return ky.post(`http://localhost:8088/productgroup`, { json: productGroup }).json<ProductGroup>()
+}
+
+export const updateProductGroup = async (productGroup: ProductGroup): Promise<void> => {
+  await ky.put(`http://localhost:8088/productgroup`, { json: productGroup })
+}   
+
+export const deleteProductGroup = async (id: number): Promise<void> => {
+  await ky.delete(`http://localhost:8088/productgroup/${id}`)
+}

buildtime/client/material-editor/src/components/NavBar.tsx

@@ -18,7 +18,7 @@ function NavBar() {
             </Typography>
             <Stack direction="row" spacing={2}>
                 <Button color="inherit" onClick={() => navigate('/propertypool')}>Property Pool</Button>
-                <Button color="inherit">Products</Button>
+                <Button color="inherit" onClick={() => navigate('/product')}>Products</Button>
                 <Button color="inherit">Conditions</Button>
                 <Button color="inherit" onClick={() => navigate('/language')}>Languages</Button>
                 <Button color="inherit" onClick={() => navigate('/')}>Home</Button>

buildtime/client/material-editor/src/components/ProductGroupTreeView.tsx

@@ -0,0 +1,27 @@
+import type { ProductGroup } from '../data/productGroup';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+
+type ProductGroupTreeViewProps = {
+  ProductGroups?: ProductGroup[];
+};
+
+export default function ProductGroupTreeView({ ProductGroups = [] }: ProductGroupTreeViewProps) {
+
+  const renderTree = (node: ProductGroup) => (
+    <TreeItem key={node.id} itemId={node.id.toString()} label={node.label}>
+      {node.childProductGroups && node.childProductGroups.map((ProductGroup) => (
+        renderTree(ProductGroup)
+      ))}
+    </TreeItem>
+  );
+
+  return (
+    <SimpleTreeView
+      aria-label="Product Group Tree View"
+      sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+    >
+      {ProductGroups.map((productGroup) => renderTree(productGroup))}
+    </SimpleTreeView>
+  );
+}

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

@@ -0,0 +1,9 @@
+export type Product = {
+	id: number;
+	label: string;
+	product_identifier: string;
+	properties: unknown[];
+	products: Product[];
+	productStructureNodes: unknown[];
+	isEqualPropertiesEqualValues: boolean;
+};

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

@@ -7,7 +7,7 @@ export type ProductGroup = {
   parentGroupId: number | null;
   isVisible: boolean;
   path: string;
-  SubGroups: ProductGroup[];
+  childProductGroups: ProductGroup[];
   PropertyTypes: PropertyType[];
   Products: Product[];
 };

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

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import ProductGroupTreeView from '../components/ProductGroupTreeView';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import type { ProductGroup } from '../data/productGroup';
+import { getProductGroupById } from '../api/language/productGroup.api';
+
+const ProductPage: React.FC = () => {
+  const [productGroup, setProductGroup] = useState<ProductGroup | null>(null);
+
+  const loadProductGroup = React.useCallback(async () => {
+    const loadedProductGroup = await getProductGroupById(3); // Assuming 3 is the ID for product groups
+    setProductGroup(loadedProductGroup);
+  }, []);
+
+  useEffect(() => {
+    loadProductGroup();  
+  }, [loadProductGroup]);
+
+    return (
+          <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
+              <Typography variant="h3">
+                  Property Type Management
+              </Typography>
+              <Box
+                sx={{
+                  display: "flex",           // Arrange children in a row
+                  flexDirection: "row",
+                  width: "100vw",             // Full width of the parent
+                  p: 2,                       // Padding around the flex container
+                  bgcolor: "#f5f5f5"
+                }}
+              >
+                <ProductGroupTreeView ProductGroups={productGroup ? [productGroup] : []} />
+              </Box>
+          </Box>
+      );
+  };
+
+export default ProductPage;