feat(admin-ui): Support custom field controls in OrderTable

Relates to #887

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

@@ -56,29 +56,17 @@
                     </ng-container>
                 </td>
             </tr>
-            <ng-container *ngIf="getLineCustomFields(line) as customFields">
+            <ng-container *ngIf="customFieldsForLine[line.id] as customFields">
                 <tr *ngIf="customFields.length">
                     <td colspan="6" class="custom-fields-row">
                         <div class="order-line-custom-fields">
                             <div class="custom-field" *ngFor="let field of customFields">
-                                <vdr-labeled-data [label]="field.config | customFieldLabel">
-                                    <div class="mt2" [ngSwitch]="field.config.type">
-                                        <ng-template [ngSwitchCase]="'datetime'">
-                                            <span [title]="field.value">{{ field.value }}</span>
-                                        </ng-template>
-                                        <ng-template [ngSwitchCase]="'boolean'">
-                                            <ng-template [ngIf]="field.value === true">
-                                                <clr-icon shape="check"></clr-icon>
-                                            </ng-template>
-                                            <ng-template [ngIf]="field.value === false">
-                                                <clr-icon shape="times"></clr-icon>
-                                            </ng-template>
-                                        </ng-template>
-                                        <ng-template ngSwitchDefault>
-                                            {{ field.value }}
-                                        </ng-template>
-                                    </div>
-                                </vdr-labeled-data>
+                                <vdr-custom-field-control
+                                    [compact]="true"
+                                    [readonly]="true"
+                                    [customField]="field.config"
+                                    [customFieldsFormGroup]="field.formGroup"
+                                ></vdr-custom-field-control>
                             </div>
                         </div>
                     </td>

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

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import { AdjustmentType, CustomFieldConfig, OrderDetail } from '@vendure/admin-ui/core';
 
 @Component({
@@ -11,6 +12,9 @@ export class OrderTableComponent implements OnInit {
     @Input() order: OrderDetail.Fragment;
     @Input() orderLineCustomFields: CustomFieldConfig[];
     orderLineCustomFieldsVisible = false;
+    customFieldsForLine: {
+        [lineId: string]: Array<{ config: CustomFieldConfig; formGroup: FormGroup; value: any }>;
+    } = {};
 
     get visibleOrderLineCustomFields(): CustomFieldConfig[] {
         return this.orderLineCustomFieldsVisible ? this.orderLineCustomFields : [];
@@ -22,6 +26,7 @@ export class OrderTableComponent implements OnInit {
 
     ngOnInit(): void {
         this.orderLineCustomFieldsVisible = this.orderLineCustomFields.length < 2;
+        this.getLineCustomFields();
     }
 
     toggleOrderLineCustomFields() {
@@ -32,18 +37,24 @@ export class OrderTableComponent implements OnInit {
         return line.discounts.filter(a => a.type === AdjustmentType.PROMOTION);
     }
 
-    getLineCustomFields(line: OrderDetail.Lines): Array<{ config: CustomFieldConfig; value: any }> {
-        return this.orderLineCustomFields
-            .map(config => {
-                const value = (line as any).customFields[config.name];
-                return {
-                    config,
-                    value,
-                };
-            })
-            .filter(field => {
-                return this.orderLineCustomFieldsVisible ? true : field.value != null;
-            });
+    private getLineCustomFields() {
+        const formGroup = new FormGroup({});
+        for (const line of this.order.lines) {
+            const result = this.orderLineCustomFields
+                .map(config => {
+                    const value = (line as any).customFields[config.name];
+                    formGroup.addControl(config.name, new FormControl(value));
+                    return {
+                        config,
+                        formGroup,
+                        value,
+                    };
+                })
+                .filter(field => {
+                    return this.orderLineCustomFieldsVisible ? true : field.value != null;
+                });
+            this.customFieldsForLine[line.id] = result;
+        }
     }
 
     getPromotionLink(promotion: OrderDetail.Discounts): any[] {