feat(admin-ui): Display Order custom fields

This is a read-only implementation, since there is currently no way via the Admin API to persist changes to Order custom fields.
Closes #164

packages/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html

@@ -53,7 +53,7 @@
             ></vdr-rich-text-editor>
 
             <section formGroupName="customFields" *ngIf="customFields.length">
-                <label>{{ 'catalog.custom-fields' }}</label>
+                <label>{{ 'common.custom-fields' | translate }}</label>
                 <ng-container *ngFor="let customField of customFields">
                     <vdr-custom-field-control
                         *ngIf="customFieldIsSet(customField.name)"

packages/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html

@@ -56,7 +56,7 @@
         </vdr-form-field>
 
         <section formGroupName="customFields" *ngIf="customFields.length">
-            <label>{{ 'catalog.custom-fields' }}</label>
+            <label>{{ 'common.custom-fields' | translate }}</label>
             <ng-container *ngFor="let customField of customFields">
                 <vdr-custom-field-control
                     *ngIf="customFieldIsSet(customField.name)"

packages/admin-ui/src/app/order/components/order-custom-fields-card/order-custom-fields-card.component.html

@@ -0,0 +1,17 @@
+<div class="card" *ngIf="customFieldsConfig.length">
+    <div class="card-header">
+        {{ 'common.custom-fields' | translate }}
+    </div>
+    <div class="card-block">
+        <div class="card-text custom-field-form" >
+            <ng-container *ngFor="let customField of customFieldsConfig">
+                <vdr-custom-field-control
+                    [customFieldsFormGroup]="customFieldForm"
+                    [compact]="true"
+                    [readonly]="true"
+                    [customField]="customField"
+                ></vdr-custom-field-control>
+            </ng-container>
+        </div>
+    </div>
+</div>

packages/admin-ui/src/app/order/components/order-custom-fields-card/order-custom-fields-card.component.scss

@@ -0,0 +1,5 @@
+@import "variables";
+
+.custom-field-form {
+    padding-bottom: 24px;
+}

packages/admin-ui/src/app/order/components/order-custom-fields-card/order-custom-fields-card.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+import { CustomFieldConfig } from '../../../common/generated-types';
+
+@Component({
+    selector: 'vdr-order-custom-fields-card',
+    templateUrl: './order-custom-fields-card.component.html',
+    styleUrls: ['./order-custom-fields-card.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrderCustomFieldsCardComponent implements OnInit {
+    @Input() customFieldsConfig: CustomFieldConfig[] = [];
+    @Input() customFieldValues: { [name: string]: any } = {};
+    customFieldForm: FormGroup;
+    constructor(private formBuilder: FormBuilder) {}
+
+    ngOnInit() {
+        this.customFieldForm = this.formBuilder.group({});
+        for (const field of this.customFieldsConfig) {
+            this.customFieldForm.addControl(
+                field.name,
+                this.formBuilder.control(this.customFieldValues[field.name]),
+            );
+        }
+    }
+}

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

@@ -49,14 +49,14 @@
         <div class="clr-col-lg-8">
             <table class="order-lines table">
                 <thead>
-                    <tr>
-                        <th></th>
-                        <th>{{ 'order.product-name' | translate }}</th>
-                        <th>{{ 'order.product-sku' | translate }}</th>
-                        <th>{{ 'order.unit-price' | translate }}</th>
-                        <th>{{ 'order.quantity' | translate }}</th>
-                        <th>{{ 'order.total' | translate }}</th>
-                    </tr>
+                <tr>
+                    <th></th>
+                    <th>{{ 'order.product-name' | translate }}</th>
+                    <th>{{ 'order.product-sku' | translate }}</th>
+                    <th>{{ 'order.unit-price' | translate }}</th>
+                    <th>{{ 'order.quantity' | translate }}</th>
+                    <th>{{ 'order.total' | translate }}</th>
+                </tr>
                 </thead>
                 <tr
                     *ngFor="let line of order.lines"
@@ -115,6 +115,8 @@
             ></vdr-order-history>
         </div>
         <div class="clr-col-lg-4 order-cards">
+            <vdr-order-custom-fields-card [customFieldsConfig]="customFields"
+                                          [customFieldValues]="order.customFields"></vdr-order-custom-fields-card>
             <div class="card">
                 <div class="card-header">
                     {{ 'order.customer' | translate }}

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

@@ -7,7 +7,13 @@ import { omit } from 'shared/omit';
 import { _ } from 'src/app/core/providers/i18n/mark-for-extraction';
 
 import { BaseDetailComponent } from '../../../common/base-detail.component';
-import { GetOrderHistory, Order, OrderDetail, SortOrder } from '../../../common/generated-types';
+import {
+    CustomFieldConfig,
+    GetOrderHistory,
+    Order,
+    OrderDetail,
+    SortOrder,
+} from '../../../common/generated-types';
 import { NotificationService } from '../../../core/providers/notification/notification.service';
 import { DataService } from '../../../data/providers/data.service';
 import { ServerConfigService } from '../../../data/server-config';
@@ -28,6 +34,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
     detailForm = new FormGroup({});
     history$: Observable<GetOrderHistory.Items[] | null>;
     fetchHistory = new Subject<void>();
+    customFields: CustomFieldConfig[];
     constructor(
         router: Router,
         route: ActivatedRoute,
@@ -42,6 +49,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
 
     ngOnInit() {
         this.init();
+        this.customFields = this.getCustomFieldConfig('Order');
         this.history$ = this.fetchHistory.pipe(
             startWith(null),
             switchMap(() => {

packages/admin-ui/src/app/order/order.module.ts

@@ -9,6 +9,7 @@ import { FulfillmentDetailComponent } from './components/fulfillment-detail/fulf
 import { HistoryEntryDetailComponent } from './components/history-entry-detail/history-entry-detail.component';
 import { LineFulfillmentComponent } from './components/line-fulfillment/line-fulfillment.component';
 import { LineRefundsComponent } from './components/line-refunds/line-refunds.component';
+import { OrderCustomFieldsCardComponent } from './components/order-custom-fields-card/order-custom-fields-card.component';
 import { OrderDetailComponent } from './components/order-detail/order-detail.component';
 import { OrderHistoryComponent } from './components/order-history/order-history.component';
 import { OrderListComponent } from './components/order-list/order-list.component';
@@ -41,6 +42,7 @@ import { OrderResolver } from './providers/routing/order-resolver';
         PaymentDetailComponent,
         HistoryEntryDetailComponent,
         SimpleItemListComponent,
+        OrderCustomFieldsCardComponent,
     ],
     entryComponents: [
         FulfillOrderDialogComponent,

packages/admin-ui/src/app/shared/components/custom-field-control/custom-field-control.component.html

@@ -16,8 +16,14 @@
         [id]="customField.name"
         [pattern]="customField.pattern"
         [formControl]="formGroup.get(customField.name)"
+        [readonly]="readonly"
     />
-    <select *ngIf="isSelectInput" clrSelect [formControl]="formGroup.get(customField.name)">
+    <select
+        *ngIf="isSelectInput"
+        clrSelect
+        [formControl]="formGroup.get(customField.name)"
+        [disabled]="readonly"
+    >
         <option *ngFor="let option of stringOptions" [value]="option.value">
             {{ getLabel(option.value, option.label) }}
         </option>
@@ -30,6 +36,7 @@
         [max]="max"
         [step]="step"
         [formControl]="formGroup.get(customField.name)"
+        [readonly]="readonly"
     />
     <clr-toggle-wrapper *ngIf="customField.type === 'boolean'">
         <input
@@ -37,6 +44,7 @@
             clrToggle
             [id]="customField.name"
             [formControl]="formGroup.get(customField.name)"
+            [readonly]="readonly"
         />
     </clr-toggle-wrapper>
     <input
@@ -48,5 +56,6 @@
         [id]="customField.name"
         [value]="formGroup.get(customField.name).value | date: 'yyyy-MM-ddTHH:mm:ss'"
         (change)="updateDateTime(formGroup.get(customField.name), $event)"
+        [readonly]="readonly"
     />
 </ng-template>

packages/admin-ui/src/app/shared/components/custom-field-control/custom-field-control.component.ts

@@ -25,6 +25,7 @@ export class CustomFieldControlComponent implements OnInit, OnDestroy {
     @Input() customField: CustomFieldsFragment;
     @Input() compact = false;
     @Input() showLabel = true;
+    @Input() readonly = false;
     private uiLanguageCode: LanguageCode;
     private sub: Subscription;