test

buildtime/client/README.md

@@ -47,5 +47,33 @@ HeroIcon Lib mit der MIT Lizenz ([tailwindlabs/heroicons: A set of free MIT-lice
 npm install @heroicons/react
 ```
 
+#### CSS Helper Tailwind CSS
+Zur schnellen Erstellung von Layout: [tailwindlabs/tailwindcss: A utility-first CSS framework for rapid UI development.](https://github.com/tailwindlabs/tailwindcss)
+
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+Dann die Datei vite.config.ts editieren
+
+```javascript
+
+edit vite.config.ts
+
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({  
+    plugins: [    
+        tailwindcss(),  
+    ],
+})
+
+```
+In der Scriptdatei:
+```javascript
+@import "tailwindcss";
+```
+
+Dokumentation : 
 
 

buildtime/client/logical-editor/src/App.css

@@ -1,10 +1,12 @@
+
+
 .navbar {
   padding: 16px;
   color: gray;
   display: flex;
   background: var(--code-bg);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  height: 50px;
+  height: 80px;
 }
 
 .navbar h1 {
@@ -100,5 +102,8 @@ footer {
   display: flex;
   background: var(--code-bg);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  height: 20px;
-}
+  height: 40px;
+}
+
+
+@import "tailwindcss";

buildtime/client/logical-editor/src/components/PropertySideBar.jsx

@@ -1,18 +1,22 @@
 import React, { Component } from 'react';
 import { useState } from 'react';
-import { Tree } from 'react-arborist';
-import TreeView from './TreeView';  
+import PropertyTreeView from './PropertyTreeView';  
 
-const PropertySideBar = ({ properties, setUpdate }) => {
+const PropertySideBar = ({ properties }) => {
     return (
         <nav className="sidebar">
             <div>
                 <h1>Property Pool:</h1>
             </div>
             <div className="side-links">
-                <TreeView data={[properties]} setUpdate={setUpdate} />
-            </div>
-            <div className="spacer">...</div>
+                <ul>
+                    {properties.map((node) => (
+                        <li key={node.id}>
+                            {node.label}
+                        </li>
+                    ))}
+                </ul>
+            </div><div className="spacer">...</div>
         </nav>
     );
 };

buildtime/client/logical-editor/src/components/PropertyTreeView.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useState } from 'react';
+
+import { ChevronRightIcon } from '@heroicons/react/16/solid';
+import { DocumentIcon, FolderIcon } from '@heroicons/react/24/solid';
+
+const PropertyTreeView = ({ node, key }) => {
+    const [expanded, setExpanded] = useState(true);
+    console.log('node:', key, node.id, node.label, node.subPropertygroups);
+    return (
+    <li key={node.id}>
+      <span className="flex items-center gap-1.5 py-1">
+        {node.subPropertygroups && node.subPropertygroups.length > 0 && (
+          <button onClick={() => setExpanded(!expanded)} className="p-1 -m-1">
+            <ChevronRightIcon
+              className={`size-4 text-gray-500 ${expanded ? 'rotate-90' : ''}`}
+            />
+          </button>
+        )}
+
+        {node.subPropertygroups ? (
+          <FolderIcon
+            className={`size-6 text-sky-500 ${
+              node.subPropertygroups.length === 0 ? 'ml-[22px]' : ''
+            }`}
+          />
+        ) : (
+          <DocumentIcon className="ml-[22px] size-6 text-gray-900" />
+        )}
+        {node.label}
+      </span>
+
+      {expanded && (
+        <ul className="pl-6">
+          {node.subPropertygroups?.map((node) => (
+            <PropertyTreeView node={node} key={node.id} />
+          ))}
+        </ul>
+      )}
+    </li>
+
+    );
+};
+
+export default PropertyTreeView;
+
+

buildtime/client/logical-editor/src/components/TreeView.jsx

@@ -1,29 +0,0 @@
-import {Tree} from 'react-arborist';
-
-const TreeView = ({ data, setUpdate }) => {
-    return (
-        <Tree
-            initialData={data}
-            childrenAccessor="subPropertygroups"
-            width="200px"
-            openByDefault={true}
-        >
-            {Node}
-        </Tree>
-    );
-};
-
-const Node = ({ node, style, dragHandle, tree }) => {
-    console.log(node, tree);
-
-    return (
-        <div className="node-container" style={style} ref={dragHandle} onClick={() => {setUpdate(prev => !prev); node.toggle()}}>
-            {node.isLeaf ? "📄" : node.isOpen ? "📂" : "📁"}
-            {node.data.label}
-        </div>
-    );
-};
-
-export default TreeView;
-
-

buildtime/client/logical-editor/src/index.css

@@ -1,3 +1,4 @@
+
 :root {
   --text: #6b6375;
   --text-h: #08060d;

buildtime/client/logical-editor/src/main.jsx

@@ -1,6 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
+
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(

buildtime/client/logical-editor/src/pages/PropertyPage.jsx

@@ -5,15 +5,14 @@ import UseFetch from '../components/tools/UseFetch';
 
 const PropertyPage = () => {
   const { data: properties, isLoading, error } = UseFetch(`http://localhost:8088/propertygroup/1`)
-  const [update, setUpdate] = useState(false)
 
   if (isLoading) return <p>Loading profile...</p>  
   if (error) return <p>Error: {error}</p>
 
   return (
     <div className="content">
-      <div><PropertySideBar properties={properties} setUpdate={setUpdate} /></div>
-      <div className="main"></div>
+      <div><PropertySideBar properties={[properties]} /></div>
+      <div className="main">{JSON.stringify(properties)}</div>
     </div>  
   );
 };

buildtime/client/logical-editor/vite.config.js

@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 })