From 6dcd89e9cda52956a679cbea1bf49d076ad85497 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Tue, 15 Feb 2022 11:13:46 -0800
Subject: [PATCH] #176 - label field support added to block fields

---
 src/models/PanelSettings.ts                   |  1 +
 .../components/DataBlock/DataBlockField.tsx   |  1 +
 .../components/DataBlock/DataBlockRecords.tsx | 22 +++++++++++++++++--
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts
index 9e3ba636..16377739 100644
--- a/src/models/PanelSettings.ts
+++ b/src/models/PanelSettings.ts
@@ -31,6 +31,7 @@ export interface PanelSettings {
 
 export interface FieldGroup { 
   id: string;
+  labelField?: string;
   fields: Field[];
 }
 
diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx
index 13e3e943..898cc0b5 100644
--- a/src/panelWebView/components/DataBlock/DataBlockField.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockField.tsx
@@ -259,6 +259,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
       }
 
       <DataBlockRecords
+        fieldGroups={settings.fieldGroups}
         records={value}
         selectedIndex={selectedIndex}
         onAdd={onAdd}
diff --git a/src/panelWebView/components/DataBlock/DataBlockRecords.tsx b/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
index d56d6be4..10195aa0 100644
--- a/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
@@ -3,7 +3,10 @@ import * as React from 'react';
 import { VsLabel } from '../VscodeComponents';
 import { DataBlockRecord } from '.';
 import { SortableContainer, SortEnd } from 'react-sortable-hoc';
+import { useCallback } from 'react';
+import { FieldGroup } from '../../../models';
 export interface IDataBlockRecordsProps {
+  fieldGroups?: FieldGroup[];
   records: any[];
   selectedIndex: number | null;
   onAdd: () => void;
@@ -16,7 +19,22 @@ const Container = SortableContainer(({children}: React.PropsWithChildren<any>) =
   return <ul>{children}</ul>;
 });
 
-export const DataBlockRecords = ({ records, selectedIndex, onSort, onAdd, onEdit, onDelete }: React.PropsWithChildren<IDataBlockRecordsProps>) => {
+export const DataBlockRecords = ({ fieldGroups, records, selectedIndex, onSort, onAdd, onEdit, onDelete }: React.PropsWithChildren<IDataBlockRecordsProps>) => {
+
+  const getLabel = useCallback((record: any) => {
+    if (record.fieldGroup) {
+      if (fieldGroups) {
+        const fieldGroup = fieldGroups.find(f => f.id === record.fieldGroup);
+        if (fieldGroup && fieldGroup.labelField && record[fieldGroup.labelField]) {
+          return record[fieldGroup.labelField];
+        }
+      }
+
+      return record.fieldGroup;
+    }
+    
+    return 'Block';
+  }, []);
 
   if (!records || !records.length) {
     return null;
@@ -44,7 +62,7 @@ export const DataBlockRecords = ({ records, selectedIndex, onSort, onAdd, onEdit
             key={idx} 
             id={idx}
             index={idx}
-            label={v?.fieldGroup ?? 'Block'}
+            label={getLabel(v)}
             isSelected={idx === selectedIndex}
             onEdit={onEdit}
             onDelete={onDelete}  />