From 04648c864254a43cd0490bba24b44a33f6cb6d39 Mon Sep 17 00:00:00 2001
From: utnim2 <mintugogoi567@gmail.com>
Date: Mon, 15 Apr 2024 21:08:24 +0530
Subject: [PATCH] added option to `add property` to the `array<object>` type,
 in the UI removed "Array Items", fixed changing of type for array types

---
 .../VisualEditor/PropertyControls.tsx         |  9 +-----
 .../components/VisualEditor/SchemaObject.tsx  | 29 +++++++++++++++----
 .../VisualEditor/SchemaProperty.tsx           | 23 +++++++++++----
 3 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/packages/ui/components/VisualEditor/PropertyControls.tsx b/packages/ui/components/VisualEditor/PropertyControls.tsx
index 3d6767eb4..0ced303dc 100644
--- 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
index 0395b2384..f15539630 100644
--- 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
index 7eb9f5a39..58e3ca426 100644
--- 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>
       );
     }