fix(admin-ui): Better display Fulfillment customFields in Order detail

Relates to #816

packages/admin-ui/src/lib/order/src/components/fulfillment-detail/fulfillment-detail.component.html

@@ -10,6 +10,14 @@
 <vdr-labeled-data [label]="'order.contents' | translate">
     <vdr-simple-item-list [items]="items"></vdr-simple-item-list>
 </vdr-labeled-data>
-<ng-container *ngFor="let customField of getCustomFields()">
-    <vdr-labeled-data [label]="customField.key">{{ customField.value }}</vdr-labeled-data>
+<ng-container *ngFor="let customField of customFields">
+    <vdr-labeled-data [label]="customField.key">
+        <vdr-object-tree
+            *ngIf="customFieldIsObject(customField.value); else primitive"
+            [value]="{ object: customField.value }"
+        ></vdr-object-tree>
+        <ng-template #primitive>
+            {{ customField.value }}
+        </ng-template>
+    </vdr-labeled-data>
 </ng-container>

packages/admin-ui/src/lib/order/src/components/fulfillment-detail/fulfillment-detail.component.ts

@@ -1,5 +1,6 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { OrderDetail } from '@vendure/admin-ui/core';
+import { isObject } from '@vendure/common/lib/shared-utils';
 
 @Component({
     selector: 'vdr-fulfillment-detail',
@@ -7,10 +8,16 @@ import { OrderDetail } from '@vendure/admin-ui/core';
     styleUrls: ['./fulfillment-detail.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FulfillmentDetailComponent {
+export class FulfillmentDetailComponent implements OnChanges {
     @Input() fulfillmentId: string;
     @Input() order: OrderDetail.Fragment;
 
+    customFields: Array<{ key: string; value: any }> = [];
+
+    ngOnChanges(changes: SimpleChanges) {
+        this.customFields = this.getCustomFields();
+    }
+
     get fulfillment(): OrderDetail.Fulfillments | undefined | null {
         return this.order.fulfillments && this.order.fulfillments.find(f => f.id === this.fulfillmentId);
     }
@@ -38,9 +45,16 @@ export class FulfillmentDetailComponent {
         if (customFields) {
             return Object.entries(customFields)
                 .filter(([key]) => key !== '__typename')
-                .map(([key, value]) => ({ key, value: (value as any)?.toString() ?? '-' }));
+                .map(([key, val]) => {
+                    const value = Array.isArray(val) || isObject(val) ? val : (val as any).toString();
+                    return { key, value };
+                });
         } else {
             return [];
         }
     }
+
+    customFieldIsObject(customField: unknown) {
+        return Array.isArray(customField) || isObject(customField);
+    }
 }