added option to add property to the array<object> type, in the UI…

… removed "Array Items", fixed changing of type for array types
asyncapi · Apr 15, 2024 · 04648c8 · 04648c8
1 parent 4334c14
commit 04648c8
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 18 deletions.
diff --git a/packages/ui/components/VisualEditor/PropertyControls.tsx b/packages/ui/components/VisualEditor/PropertyControls.tsx
@@ -35,14 +35,7 @@ const PropertyControls: React.FC<PropertyControlsProps> = ({ onAdd, schemaPath,
     onAdd(fullPath, {
       type, 
       ...(type === 'object' && { properties: {} }), 
-      ...(type === 'array' && { 
-        items: (itemType !== 'object')
-          ? { type: itemType }
-          : { 
-            type: 'object',
-            properties: {},
-           }
-       }) 
+      ...(type === 'array' && { items: { type: itemType }}),
     } as any); 
 
     setKey('');

diff --git a/packages/ui/components/VisualEditor/SchemaObject.tsx b/packages/ui/components/VisualEditor/SchemaObject.tsx
@@ -22,7 +22,15 @@ const SchemaObject: React.FC<SchemaObjectProps> = ({
     const updatedSchema = _.cloneDeep(schema);
     const normalizedPath = fullPath.startsWith('.') ? fullPath.slice(1) : fullPath;
     console.log('Normalised path',normalizedPath);
-    _.set(updatedSchema, normalizedPath, propertySchema);
+
+    if (normalizedPath.startsWith('items.properties')) {
+      const itemsPath = normalizedPath.split('.properties')[0];
+      const propertyName = normalizedPath.split('.').pop();
+      _.set(updatedSchema, `${itemsPath}.properties.${propertyName}`, propertySchema);
+    } else {
+      _.set(updatedSchema, normalizedPath, propertySchema);
+    }
+
     console.log(`Property added at ${normalizedPath}`, updatedSchema);
     onSchemaChange(updatedSchema);
   };
@@ -32,17 +40,28 @@ const SchemaObject: React.FC<SchemaObjectProps> = ({
     const normalizedPath = propertyPath.startsWith('.') ? propertyPath.slice(1) : propertyPath;
     console.log("normalizedPath: ",normalizedPath)
     console.log("propertyPath: ",propertyPath)
-      _.unset(updatedSchema, normalizedPath);
+    _.unset(updatedSchema, normalizedPath);
     onSchemaChange(updatedSchema);
   };
 
   const handleTypeChange = (propertyPath: string, newSchema: any, newType: any) => { // Added types to resolve TS7006
     console.log(`handleTypeChange called with path: ${propertyPath}, newType: ${newType}`);
     const normalizedPath = propertyPath.startsWith('.') ? propertyPath.slice(1) : propertyPath;
-    const typePath = `${normalizedPath}.type`;
-    const newTypeValue = newType.type;
     const currentSchema = _.cloneDeep(schema);
-    _.set(currentSchema, typePath , newTypeValue);
+    const typePath = `${normalizedPath}.type`;
+
+    if(newType.type == "array") {
+      const itemType = newType.items;
+      console.log("itemType",itemType)
+      _.set(currentSchema, typePath, 'array');
+      _.set(currentSchema, `${normalizedPath}.items`, itemType);
+    } else {
+      const newTypeValue = newType.type;
+      _.set(currentSchema, typePath , newTypeValue);
+      const itemsPath = `${normalizedPath}.items`;
+      _.unset(currentSchema, itemsPath);
+    }
+
     console.log(`Type changed at ${propertyPath}`, newSchema);
     onSchemaChange(currentSchema);
   };

diff --git a/packages/ui/components/VisualEditor/SchemaProperty.tsx b/packages/ui/components/VisualEditor/SchemaProperty.tsx
@@ -63,10 +63,18 @@ const SchemaProperty: React.FC<SchemaPropertyProps> = ({
     const updatedSchema = _.cloneDeep(schema);
     updatedSchema.type = newType;
 
-    if (newType === 'array') {
-      updatedSchema.items = updatedSchema.items || { type: 'string' };
-    } else if (newType === 'object') {
-      updatedSchema.properties = updatedSchema.properties || {};
+    if (newType.startsWith('array<')) {
+      const itemType = newType.slice(6, -1);
+      console.log(`Array type detected: ${itemType}`);
+      updatedSchema.type = 'array';
+      updatedSchema.items = { type: itemType };
+      console.log("updatedSchema",updatedSchema)
+    } else {
+      updatedSchema.items = newType;
+
+      if (newType === 'object') {
+        updatedSchema.properties = updatedSchema.properties || {};
+      } 
     }
 
     console.log(`Type changed for ${name} at ${path} to ${newType}`);
@@ -85,9 +93,9 @@ const SchemaProperty: React.FC<SchemaPropertyProps> = ({
 
   const renderArrayItemsProperties = () => {
     if (schema.type === 'array' && schema.items && schema.items.type === 'object') {
+      const itemsProperties = schema.items.properties || {};
       return (
         <div>
-        <strong style={{ marginLeft: `${level * 20 + 20}px` }} className='text-sm'>Array Items</strong>
         {_.map(schema.items.properties, (nestedSchema, nestedName) => (
           <SchemaProperty
             key={nestedName}
@@ -104,6 +112,11 @@ const SchemaProperty: React.FC<SchemaPropertyProps> = ({
             level={level + 1}            
           />
         ))}
+        <PropertyControls
+          onAdd={onAddNestedProperty}
+          schemaPath={`${path}.items`}
+          level={level + 1}
+        />
       </div>
       );
     }