Propertygroup Editor Anzeige

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

@@ -4,13 +4,14 @@
   padding: 16px;
   color: gray;
   display: flex;
+  flex-flow: row;
   background: var(--code-bg);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   height: 80px;
 }
 
 .navbar h1 {
-  font-size: 26px;
+  font-size: 32px;
   letter-spacing: -1.68px;
   margin: 4px 10px 0 0;
   @media (max-width: 1024px) {
@@ -31,7 +32,7 @@
   color: gray;
   text-decoration: none;
   margin-left: 16px;
-  font-size: 14px;
+  font-size: 20px;
   letter-spacing: -1px;
 }
 
@@ -56,7 +57,7 @@
 }
 
 .sidebar h1 {
-  font-size: 16px;
+  font-size: 24px;
   letter-spacing: -1.68px;
   margin: 4px 10px 0 0;
   @media (max-width: 1024px) {
@@ -107,4 +108,69 @@ footer {
 }
 
 
+.editor {
+  display: flex;
+  flex-flow: column;
+  padding: 16px;
+  margin: 16px;
+  color: gray;
+  background: whitesmoke;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  width: 100%;
+}
+
+.editor-title  {
+  font-size: 24px;
+  letter-spacing: -1.68px;
+  margin: 16px;
+  @media (max-width: 1024px) {
+    font-size: 14px;
+    margin: 20px 0;
+  }
+}
+
+input[type="text"] {
+  width: 100%; /* Full width */
+  padding: 2px; /* Inner spacing */
+  margin: 8px 0; /* Space around */
+  box-sizing: border-box; /* Include padding in width */
+  border: 2px solid #000000; /* Green border */
+  border-radius: 10px; /* Rounded corners */
+  background-color: #ffffff; /* Light background */
+  font-size: 16px; /* Text size */
+}
+
+input[type="text"]:focus {
+  border-color: #45a049; /* Darker green on focus */
+  outline: none; /* Remove default outline */
+}
+
+textarea {
+  width: 100%; /* Full width */
+  height: 150px;
+  padding: 2px; /* Inner spacing */
+  margin: 8px 0; /* Space around */
+  box-sizing: border-box; /* Include padding in width */
+  border: 2px solid #000000; /* Green border */
+  border-radius: 10px; /* Rounded corners */
+  background-color: #ffffff; /* Light background */
+  font-size: 16px; /* Text size */
+}
+
+textarea:focus {
+  border-color: #45a049; /* Darker green on focus */
+  outline: none; /* Remove default outline */
+}
+
+.main {
+  display: flex;
+  flex-flow: column;
+  padding: 16px;
+  margin: 16px;
+  color: gray;
+  background: whitesmoke;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  width: 100%;
+}
+
 @import "tailwindcss";

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

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+const EditPropertyGroup = ({ propertyGroup, onClose }) => {
+    const [labelTranslation, setLabelTranslation] = useState(propertyGroup.labelTranslation);
+    const [description, setDescription] = useState(propertyGroup.description);
+
+    return (
+        <div>
+            <h2 className="editor-title">Edit Property Group</h2>
+            <div className="editor">
+                <label>
+                <span className={`flex flex-row gap-2`}>
+                    <p>Name:</p>
+                    <input className='input_text' type="text" value={labelTranslation} onChange={(e) => setLabelTranslation(e.target.value)} />
+                </span>
+                </label>
+                <span>
+                <label>
+                    Description:
+                    <textarea className='input_area' value={description} onChange={(e) => setDescription(e.target.value)} />
+                </label>
+                </span> 
+            </div>
+            <button onClick={onClose}>Save</button>
+        </div>
+    );
+};
+
+export default EditPropertyGroup;

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

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import ReactDOM from "react-dom";
+
+function PropertyGroupContent({ children, onClose }) {
+
+    useEffect(() => {
+        const handleEsc = (e) => e.key === "Escape" && onClose();
+        window.addEventListener("keydown", handleEsc);
+        return () => window.removeEventListener("keydown", handleEsc);
+    }, [onClose]);
+
+    return ReactDOM.createPortal(
+        <div className="overlay" onClick={onClose}>
+            <div className="modal" onClick={(e) => e.stopPropagation()}>
+                {children}
+            </div>
+        </div>,
+
+        document.getElementById("property-content")
+
+    );
+}
+
+export default PropertyGroupContent;

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

@@ -1,5 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
-import { useState } from 'react';
 import PropertyTreeView from './PropertyTreeView';  
 
 const PropertySideBar = ({ properties }) => {
@@ -11,7 +10,7 @@ const PropertySideBar = ({ properties }) => {
             <div className="side-links">
                 <ul>
                     {properties.map((node) => (
-                        <PropertyTreeView node={node} />
+                        <PropertyTreeView node={node} key={node.id} />
                     ))}
                 </ul>
             </div><div className="spacer">...</div>

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { useState } from 'react';
+import PropertyGroupContent from './PropertyGroupContent';
-
+import EditPropertyGroup from './EditPropertyGroup';
-import { ChevronRightIcon } from '@heroicons/react/16/solid';
+import { ChevronRightIcon, DocumentIcon, FolderIcon, DocumentPlusIcon, FolderPlusIcon, PencilIcon } from '@heroicons/react/24/solid';
-import { DocumentIcon, FolderIcon } from '@heroicons/react/16/solid';
 
 const PropertyTreeView = ({ node, key }) => {
     const [expanded, setExpanded] = useState(true);
+    const [open, setOpen] = useState(false);
     return (
     <li key={node.id}>
       <span className="flex items-center gap-1 py-1">
@@ -16,9 +16,24 @@ const PropertyTreeView = ({ node, key }) => {
             />
           </button> 
         )}
-        <FolderIcon className={`size-3 text-gray-500`} />{node.labelTranslation}
+        <FolderIcon className={`size-4 text-gray-500`} />{node.labelTranslation}
-      </span>
+        <span className="flex items-center gap-1 mr-auto">
           
+          <button onClick={() => setOpen(true)} className="p-1 -m-1">
+            <PencilIcon className="size-4 text-gray-500 hover:bg-gray-300" />
+          </button>{open && (
+            <PropertyGroupContent onClose={() => setOpen(false)}>
+              <EditPropertyGroup propertyGroup={node} onClose={() => setOpen(false)} />
+            </PropertyGroupContent>  
+          )}
+          <button className="p-1 -m-1">
+            <FolderPlusIcon className="size-4 text-gray-500 hover:bg-gray-300" />
+          </button>
+          <button className="p-1 -m-1">
+            <DocumentPlusIcon className="size-4 text-gray-500 hover:bg-gray-300" />
+          </button>
+        </span>
+      </span>
       {expanded && (
         <ul className="ml-1 border-l border-gray-300 pl-8">
           {node.subPropertygroups?.map((node) => (

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

@@ -11,8 +11,9 @@ const PropertyPage = () => {
 
   return (
     <div className="content">
-      <div><PropertySideBar properties={[properties]} /></div>
+      <span className="flex flex-row size-full">
-      <div className="main"></div>
+        <div><PropertySideBar properties={[properties]} /></div><div id="property-content" className="main">Simply CPQ Data</div>
+      </span>
     </div>  
   );
 };