#176 - Fields field support

src/panelWebView/components/DataBlock/DataBlockField.tsx

@@ -23,7 +23,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
   const [ selectedGroup, setSelectedGroup ] = useState<FieldGroup | undefined | null>(null);
   const [ selectedBlockData, setSelectedBlockData ] = useState<any | null>(null);
 
-  const onFieldUpdate = useCallback((crntField: string | undefined, crntValue: any) => {
+  const onFieldUpdate = useCallback((crntField: string | undefined, crntValue: any, parents: string[]) => {
     const dataClone: any[] = Object.assign([], value);
 
     if (!crntField) {
@@ -32,14 +32,40 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
     
     if (selectedIndex !== null && selectedIndex !== undefined) {
       const data = Object.assign({}, dataClone[selectedIndex]);
+
+      let parentObj: any = data;
+      if (parents.length > 1) {
+        parents.shift();
+        for (const parent of parents) {
+          if (!data[parent]) {
+            data[parent] = {};
+          }
+
+          parentObj = data[parent];
+        }
+      }
+
+      parentObj[crntField] = crntValue;
+
       dataClone[selectedIndex] = {
         ...data,
-        [crntField]: crntValue,
         fieldGroup: selectedGroup?.id
       };
     } else {
+      const data: any = {};
+      let parentObj: any = data;
+      if (parents.length > 1) {
+        parents.shift();
+        for (const parent of parents) {
+          data[parent] = {};
+          parentObj = data[parent];
+        }
+      }
+
+      parentObj[crntField] = crntValue;
+
       dataClone.push({
-        [crntField]: crntValue,
+        ...data,
         fieldGroup: selectedGroup?.id
       });
 

src/panelWebView/components/Metadata.tsx

@@ -225,8 +225,12 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               onChanged={(value: boolean | string) => onSendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );
-      } else if (field.type === 'fields') { 
-        if (field.fields && parent && parent[field.name]) {
+      } else if (field.type === 'fields') {
+        if (field.fields && parent) {
+          if (!parent[field.name]) {
+            parent[field.name] = {};
+          }
+
           const subMetadata = parent[field.name] as IMetadata;
           return (
             <FieldBoundary key={field.name} fieldName={field.title || field.name}>
@@ -237,7 +241,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
                   </div>
                 </VsLabel>
 
-                { renderFields(field.fields, subMetadata, [...parentFields, field.name]) }
+                { renderFields(field.fields, subMetadata, [...parentFields, field.name], onFieldUpdate) }
               </div>
             </FieldBoundary>
           );