fix(admin-ui): Fix error when modifying Order with custom field relation

Fixes #1792

packages/admin-ui/src/lib/core/src/data/utils/remove-readonly-custom-fields.ts

@@ -32,6 +32,9 @@ export function isEntityCreateOrUpdateMutation(documentNode: DocumentNode): stri
             if (inputTypeName === 'UpdateActiveAdministratorInput') {
                 return 'Administrator';
             }
+            if (inputTypeName === 'ModifyOrderInput') {
+                return 'Order';
+            }
 
             const createMatch = inputTypeName.match(CREATE_ENTITY_REGEX);
             if (createMatch) {

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

@@ -63,14 +63,12 @@
                             ></vdr-line-fulfillment>
                         </td>
                         <td *ngIf="orderLineCustomFields.length" class="order-line-custom-field align-middle">
-                            <ng-container *ngFor="let customField of orderLineCustomFields">
-                                <vdr-custom-field-control
-                                    [customField]="customField"
-                                    [customFieldsFormGroup]="orderLineCustomFieldsFormArray.get([i])"
-                                    entityName="OrderLine"
-                                    [compact]="true"
-                                ></vdr-custom-field-control>
-                            </ng-container>
+                            <vdr-tabbed-custom-fields
+                                entityName="OrderLine"
+                                [customFields]="orderLineCustomFields"
+                                [customFieldsFormGroup]="orderLineCustomFieldsFormArray.get([i])"
+                                [compact]="true"
+                            ></vdr-tabbed-custom-fields>
                         </td>
                         <td class="align-middle total">
                             {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}
@@ -241,7 +239,8 @@
                             [formControl]="couponCodesControl"
                         >
                             <ng-template ng-option-tmp let-item="item">
-                                <vdr-chip>{{ item.code }}</vdr-chip> {{ item.promotionName }}
+                                <vdr-chip>{{ item.code }}</vdr-chip>
+                                {{ item.promotionName }}
                             </ng-template>
                         </ng-select>
                     </clr-accordion-content>
@@ -257,13 +256,13 @@
                             <vdr-form-field [label]="'order.product-sku' | translate" for="sku"
                                 ><input id="sku" type="text" formControlName="sku"
                             /></vdr-form-field>
-                            <vdr-form-field [label]="'common.price' | translate" for="price"
-                                ><vdr-currency-input
+                            <vdr-form-field [label]="'common.price' | translate" for="price">
+                                <vdr-currency-input
                                     [currencyCode]="order.currencyCode"
                                     id="price"
                                     formControlName="price"
-                                ></vdr-currency-input
-                            ></vdr-form-field>
+                                ></vdr-currency-input>
+                            </vdr-form-field>
                             <vdr-form-field
                                 [label]="
                                     'catalog.price-includes-tax-at'
@@ -276,15 +275,16 @@
                                     clrCheckbox
                                     formControlName="priceIncludesTax"
                             /></vdr-form-field>
-                            <vdr-form-field [label]="'order.tax-rate' | translate" for="taxRate"
-                                ><vdr-affixed-input suffix="%"
+                            <vdr-form-field [label]="'order.tax-rate' | translate" for="taxRate">
+                                <vdr-affixed-input suffix="%"
                                     ><input
                                         id="taxRate"
                                         type="number"
                                         min="0"
                                         max="100"
-                                        formControlName="taxRate" /></vdr-affixed-input
-                            ></vdr-form-field>
+                                        formControlName="taxRate"
+                                /></vdr-affixed-input>
+                            </vdr-form-field>
                             <vdr-form-field [label]="'order.tax-description' | translate" for="taxDescription"
                                 ><input id="taxDescription" type="text" formControlName="taxDescription"
                             /></vdr-form-field>

packages/admin-ui/src/lib/order/src/components/order-editor/order-editor.component.scss

@@ -6,4 +6,8 @@
     tr.modified td {
         background-color: var(--color-warning-100);
     }
+
+    .order-line-custom-field {
+        text-align: start;
+    }
 }

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

@@ -20,8 +20,10 @@ import {
     ServerConfigService,
     SortOrder,
     SurchargeInput,
+    transformRelationCustomFieldInputs,
 } from '@vendure/admin-ui/core';
 import { assertNever, notNullOrUndefined } from '@vendure/common/lib/shared-utils';
+import { simpleDeepClone } from '@vendure/common/lib/simple-deep-clone';
 import { concat, EMPTY, Observable, of, Subject } from 'rxjs';
 import {
     distinctUntilChanged,
@@ -378,8 +380,14 @@ export class OrderEditorComponent
     }
 
     previewAndModify(order: OrderDetail.Fragment) {
-        const input: ModifyOrderInput = {
+        const modifyOrderInput: ModifyOrderData = {
             ...this.modifyOrderInput,
+            adjustOrderLines: this.modifyOrderInput.adjustOrderLines.map(line => {
+                return transformRelationCustomFieldInputs(simpleDeepClone(line), this.orderLineCustomFields);
+            }),
+        };
+        const input: ModifyOrderInput = {
+            ...modifyOrderInput,
             ...(this.billingAddressForm.dirty ? { updateBillingAddress: this.billingAddressForm.value } : {}),
             ...(this.shippingAddressForm.dirty
                 ? { updateShippingAddress: this.shippingAddressForm.value }