From e5a2194c23537234701dda814d138ec8ccde2f49 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 14 Feb 2022 12:42:45 -0800
Subject: [PATCH] #176 - `Fields` field support

---
 .../components/DataBlock/DataBlockField.tsx   | 32 +++++++++++++++++--
 src/panelWebView/components/Metadata.tsx      | 10 ++++--
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx
index 16762fae..c3478584 100644
--- a/src/panelWebView/components/DataBlock/DataBlockField.tsx
+++ b/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
       });
 
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index f4a990ce..ed9c5584 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/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>
           );