Improve label handling in MasterListComponent

packages/angular-material/src/other/master-detail/master.ts

@@ -34,6 +34,7 @@ import {
   ControlElement,
   createDefaultValue,
   findUISchema,
+  getFirstPrimitiveProp,
   JsonFormsState,
   mapDispatchToArrayControlProps,
   mapStateToArrayControlProps,
@@ -169,22 +170,22 @@ export class MasterListComponent extends JsonFormsArrayControl {
     const { data, path, schema, uischema } = props;
     const controlElement = uischema as ControlElement;
     this.propsPath = props.path;
-    const detailUISchema =
-      controlElement.options.detail ||
-      findUISchema(
+    const detailUISchema = findUISchema(
         props.uischemas,
         schema,
         `${controlElement.scope}/items`,
         props.path,
-        'VerticalLayout'
+        'VerticalLayout',
+        controlElement
       );
 
     const masterItems = (data || []).map((d: any, index: number) => {
-      const labelRefInstancePath = removeSchemaKeywords(
+      const labelRefInstancePath = controlElement.options?.labelRef && removeSchemaKeywords(
         controlElement.options.labelRef
       );
+      const isPrimitive = d && typeof d !== 'object';
       const masterItem = {
-        label: get(d, labelRefInstancePath),
+        label: isPrimitive ? d.toString() : get(d, labelRefInstancePath ?? getFirstPrimitiveProp(schema)),
         data: d,
         path: `${path}.${index}`,
         schema,

packages/examples/src/1779.ts

@@ -0,0 +1,83 @@
+/*
+  The MIT License
+
+  Copyright (c) 2017-2021 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from './register';
+
+const data = {
+    'an-array-of-strings': ['foo', 'bar', 'foobar']
+};
+const schema = {
+    type: 'object',
+    properties: {
+        'an-array-of-strings': {
+            type: 'array',
+            items: {
+                type: 'string'
+            }
+        }
+    }
+};
+const uischema = {
+    "type": "ListWithDetail",
+    "scope": "#/properties/an-array-of-strings"
+};
+
+registerExamples([
+    {
+        name: '1779',
+        label: 'List With Detail primitive (string)',
+        data,
+        schema,
+        uischema
+    }
+]);
+
+const data_number = {
+    'an-array-of-numbers': [1, 2, 3]
+};
+const schema_number = {
+    type: 'object',
+    properties: {
+        'an-array-of-numbers': {
+            type: 'array',
+            items: {
+                type: 'number'
+            }
+        }
+    }
+};
+const uischema_number = {
+    "type": "ListWithDetail",
+    "scope": "#/properties/an-array-of-numbers"
+};
+
+registerExamples([
+    {
+        name: '1779',
+        label: 'List With Detail primitive (string)',
+        data: data_number,
+        schema: schema_number,
+        uischema: uischema_number
+    }
+]);

packages/examples/src/index.ts

@@ -74,6 +74,7 @@ import * as booleanToggle from './booleanToggle';
 import * as multiEnum from './multi-enum';
 import * as enumInArray from './enumInArray';
 import * as readonly from './readonly';
+import * as bug_1779 from './1779';
 export * from './register';
 export * from './example';
 
@@ -132,5 +133,6 @@ export {
   booleanToggle,
   multiEnum,
   enumInArray,
-  readonly
+  readonly,
+  bug_1779
 };

packages/examples/src/list-with-detail.ts

@@ -195,6 +195,95 @@ const uischema = {
   }
 };
 
+const uischemaNoLabelRef = {
+  type: 'ListWithDetail',
+  scope: '#/properties/orders',
+  options: {
+    detail: {
+      type: 'VerticalLayout',
+      elements: [
+        {
+          type: 'HorizontalLayout',
+          elements: [
+            {
+              type: 'Control',
+              scope: '#/properties/title'
+            },
+            {
+              type: 'Control',
+              scope: '#/properties/processId'
+            }
+          ]
+        },
+        {
+          type: 'Group',
+          label: 'Customer',
+          elements: [
+            {
+              type: 'Control',
+              label: 'ID',
+              scope: '#/properties/customer/properties/id'
+            },
+            {
+              type: 'Control',
+              label: 'Name',
+              scope: '#/properties/customer/properties/name'
+            },
+            {
+              type: 'Control',
+              label: 'Department',
+              scope: '#/properties/customer/properties/department'
+            }
+          ]
+        },
+        {
+          type: 'VerticalLayout',
+          elements: [
+            {
+              type: 'VerticalLayout',
+              elements: [
+                {
+                  type: 'HorizontalLayout',
+                  elements: [
+                    {
+                      type: 'Control',
+                      scope: '#/properties/ordered',
+                      options: {
+                        toggle: true
+                      }
+                    },
+                    {
+                      type: 'Control',
+                      scope: '#/properties/assignee'
+                    }
+                  ]
+                },
+                {
+                  type: 'HorizontalLayout',
+                  elements: [
+                    {
+                      type: 'Control',
+                      scope: '#/properties/startDate'
+                    },
+                    {
+                      type: 'Control',
+                      scope: '#/properties/endDate'
+                    }
+                  ]
+                },
+                {
+                  type: 'Control',
+                  scope: '#/properties/status'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+};
+
 registerExamples([
   {
     name: 'list-with-detail',
@@ -204,3 +293,13 @@ registerExamples([
     uischema
   }
 ]);
+
+registerExamples([
+  {
+    name: 'list-with-detail-no-labelref',
+    label: 'List With Detail (No Label Ref)',
+    data,
+    schema,
+    uischema:uischemaNoLabelRef
+  }
+]);