added all the changes requested

asyncapi · Apr 12, 2024 · dadc00d · dadc00d
1 parent 2ceb3c6
commit dadc00d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 21 deletions.
diff --git a/packages/ui/components/VisualEditor.tsx b/packages/ui/components/VisualEditor.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import SchemaObject from './VisualEditor/SchemaObject';
 import _ from 'lodash';
+import { getColorForType } from './VisualEditor/SchemaProperty';
 
 interface VisualEditorProps {
     schema: string;
@@ -15,14 +16,7 @@ interface SchemaObjectInterface {
 }
 
 export const VisualEditor: React.FC<VisualEditorProps> = ({ schema, onSchemaChange }) => {
-  const selectStyle = {
-    backgroundColor: '#0F172A',
-    color: 'blue',
-    borderRadius: '3px',
-    fontSize: '12px',
-    fontFamily: 'Inter, sans-serif'
-  };
-
+
   const [schemaObject, setSchemaObject] = useState<SchemaObjectInterface>({});
 
   useEffect(() => {
@@ -43,6 +37,14 @@ export const VisualEditor: React.FC<VisualEditorProps> = ({ schema, onSchemaChan
     onSchemaChange(newSchemaString);
   };
 
+  const selectStyle = {
+    backgroundColor: '#0F172A',
+    color: getColorForType(schemaObject.type || 'white', schemaObject.items?.type || 'red'),
+    borderRadius: '3px',
+    fontSize: '12px',
+    fontFamily: 'Inter, sans-serif'
+  };
+
   const renderRootTypeSelector = () => (
     <div>
       <select

diff --git a/packages/ui/components/VisualEditor/SchemaObject.tsx b/packages/ui/components/VisualEditor/SchemaObject.tsx
@@ -23,17 +23,16 @@ const SchemaObject: React.FC<SchemaObjectProps> = ({
     const normalizedPath = fullPath.startsWith('.') ? fullPath.slice(1) : fullPath;
     console.log('Normalised path',normalizedPath);
     _.set(updatedSchema, normalizedPath, propertySchema);
-
     console.log(`Property added at ${normalizedPath}`, updatedSchema);
     onSchemaChange(updatedSchema);
   };
 
   const handleRemoveProperty = (propertyPath: string) => {
     const updatedSchema = _.cloneDeep(schema);
     const normalizedPath = propertyPath.startsWith('.') ? propertyPath.slice(1) : propertyPath;
-    console.log("fullPath: ",normalizedPath)
+    console.log("normalizedPath: ",normalizedPath)
     console.log("propertyPath: ",propertyPath)
-    _.unset(updatedSchema, normalizedPath);
+      _.unset(updatedSchema, normalizedPath);
     onSchemaChange(updatedSchema);
   };
 

diff --git a/packages/ui/components/VisualEditor/SchemaProperty.tsx b/packages/ui/components/VisualEditor/SchemaProperty.tsx
@@ -87,16 +87,25 @@ const SchemaProperty: React.FC<SchemaPropertyProps> = ({
   const renderArrayItemsProperties = () => {
     if (schema.type === 'array' && schema.items && schema.items.type === 'object') {
       return (
-        <SchemaObject
-          schema={schema.items}
-          onSchemaChange={(newItemsSchema) => {
-            const updatedSchema = { ...schema, items: newItemsSchema };
-            onTypeChange(path, name, updatedSchema);
-            //Need to updated schema from local schema
-          }}
-          path={''}
-          level={level + 1}
-        />
+        <div>
+        <strong style={{ marginLeft: `${level * 20 + 20}px` }} className='text-sm'>Array Items</strong>
+        {_.map(schema.items.properties, (nestedSchema, nestedName) => (
+          <SchemaProperty
+            key={nestedName}
+            name={nestedName}
+            schema={nestedSchema}
+            onRemove={onRemove}
+            onToggleRequired={onToggleNestedRequired}
+            isRequired={_.includes(schema.items.required, nestedName)}
+            onTypeChange={onTypeChange}
+            onAddNestedProperty={onAddNestedProperty}
+            onRemoveNestedProperty={onRemoveNestedProperty}
+            onToggleNestedRequired={onToggleNestedRequired}
+            path={`${path}.items.properties.${nestedName}`}
+            level={level + 1}            
+          />
+        ))}
+      </div>
       );
     }
     return null;