feat(admin-ui): Allow OrderLine customFields to be modified

Relates to #314

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

@@ -30,7 +30,7 @@
                 </thead>
                 <tbody>
                     <tr
-                        *ngFor="let line of order.lines"
+                        *ngFor="let line of order.lines; let i = index"
                         class="order-line"
                         [class.is-cancelled]="line.quantity === 0"
                         [class.modified]="isLineModified(line)"
@@ -65,9 +65,11 @@
                         </td>
                         <td *ngIf="orderLineCustomFields.length" class="order-line-custom-field align-middle">
                             <ng-container *ngFor="let customField of orderLineCustomFields">
-                                <vdr-labeled-data [label]="customField | customFieldLabel">{{
-                                    line.customFields[customField.name] || '-'
-                                }}</vdr-labeled-data>
+                                <vdr-custom-field-control [customField]="customField"
+                                                          [customFieldsFormGroup]="orderLineCustomFieldsForm.get([i])"
+                                                          entityName="OrderLine"
+                                                          [compact]="true"
+                                ></vdr-custom-field-control>
                             </ng-container>
                         </td>
                         <td class="align-middle total">

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

@@ -1,7 +1,9 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import {
+    AddItemInput,
+    AdjustOrderLineInput,
     BaseDetailComponent,
     CustomFieldConfig,
     DataService,
@@ -38,6 +40,11 @@ interface AddedLine {
     quantity: number;
 }
 
+type ModifyOrderData = Omit<ModifyOrderInput, 'addItems' | 'adjustOrderLines'> & {
+    addItems: Array<AddItemInput & { customFields?: any }>;
+    adjustOrderLines: Array<AdjustOrderLineInput & { customFields?: any }>;
+};
+
 @Component({
     selector: 'vdr-order-editor',
     templateUrl: './order-editor.component.html',
@@ -50,8 +57,9 @@ export class OrderEditorComponent
     availableCountries$: Observable<GetAvailableCountries.Items[]>;
     addressCustomFields: CustomFieldConfig[];
     detailForm = new FormGroup({});
+    orderLineCustomFieldsForm: FormArray;
     orderLineCustomFields: CustomFieldConfig[];
-    modifyOrderInput: ModifyOrderInput = {
+    modifyOrderInput: ModifyOrderData = {
         dryRun: true,
         orderId: '',
         addItems: [],
@@ -135,6 +143,27 @@ export class OrderEditorComponent
                 countryCode: new FormControl(order.billingAddress?.countryCode),
                 phoneNumber: new FormControl(order.billingAddress?.phoneNumber),
             });
+            this.orderLineCustomFieldsForm = new FormArray([]);
+            for (const line of order.lines) {
+                const formGroup = new FormGroup({});
+                for (const { name } of this.orderLineCustomFields) {
+                    formGroup.addControl(name, new FormControl((line as any).customFields[name]));
+                }
+                formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
+                    let modifyRow = this.modifyOrderInput.adjustOrderLines.find(
+                        l => l.orderLineId === line.id,
+                    );
+                    if (!modifyRow) {
+                        modifyRow = {
+                            orderLineId: line.id,
+                            quantity: line.quantity,
+                        };
+                        this.modifyOrderInput.adjustOrderLines.push(modifyRow);
+                    }
+                    modifyRow.customFields = value;
+                });
+                this.orderLineCustomFieldsForm.push(formGroup);
+            }
         });
         this.availableCountries$ = this.dataService.settings
             .getAvailableCountries()