feat(admin-ui): Enable updating of Order custom fields

Relates to #404

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -1896,6 +1896,7 @@ export type Mutation = {
   setActiveChannel: UserStatus;
   setAsLoggedIn: UserStatus;
   setAsLoggedOut: UserStatus;
+  setOrderCustomFields?: Maybe<Order>;
   setUiLanguage?: Maybe<LanguageCode>;
   settlePayment: Payment;
   settleRefund: Refund;
@@ -2275,6 +2276,11 @@ export type MutationSetAsLoggedInArgs = {
 };
 
 
+export type MutationSetOrderCustomFieldsArgs = {
+  input: UpdateOrderInput;
+};
+
+
 export type MutationSetUiLanguageArgs = {
   languageCode?: Maybe<LanguageCode>;
 };
@@ -3713,6 +3719,11 @@ export type UpdateGlobalSettingsInput = {
   customFields?: Maybe<Scalars['JSON']>;
 };
 
+export type UpdateOrderInput = {
+  id: Scalars['ID'];
+  customFields?: Maybe<Scalars['JSON']>;
+};
+
 export type UpdateOrderNoteInput = {
   noteId: Scalars['ID'];
   note?: Maybe<Scalars['String']>;
@@ -5043,6 +5054,19 @@ export type TransitionOrderToStateMutation = (
   )> }
 );
 
+export type UpdateOrderCustomFieldsMutationVariables = {
+  input: UpdateOrderInput;
+};
+
+
+export type UpdateOrderCustomFieldsMutation = (
+  { __typename?: 'Mutation' }
+  & { setOrderCustomFields?: Maybe<(
+    { __typename?: 'Order' }
+    & OrderFragment
+  )> }
+);
+
 export type AssetFragment = (
   { __typename?: 'Asset' }
   & Pick<Asset, 'id' | 'createdAt' | 'updatedAt' | 'name' | 'fileSize' | 'mimeType' | 'type' | 'preview' | 'source' | 'width' | 'height'>
@@ -7359,6 +7383,12 @@ export namespace TransitionOrderToState {
   export type TransitionOrderToState = OrderFragment;
 }
 
+export namespace UpdateOrderCustomFields {
+  export type Variables = UpdateOrderCustomFieldsMutationVariables;
+  export type Mutation = UpdateOrderCustomFieldsMutation;
+  export type SetOrderCustomFields = OrderFragment;
+}
+
 export namespace Asset {
   export type Fragment = AssetFragment;
   export type FocalPoint = (NonNullable<AssetFragment['focalPoint']>);

packages/admin-ui/src/lib/core/src/data/definitions/order-definitions.ts

@@ -301,3 +301,12 @@ export const TRANSITION_ORDER_TO_STATE = gql`
     }
     ${ORDER_FRAGMENT}
 `;
+
+export const UPDATE_ORDER_CUSTOM_FIELDS = gql`
+    mutation UpdateOrderCustomFields($input: UpdateOrderInput!) {
+        setOrderCustomFields(input: $input) {
+            ...Order
+        }
+    }
+    ${ORDER_FRAGMENT}
+`;

packages/admin-ui/src/lib/core/src/data/providers/order-data.service.ts

@@ -16,6 +16,8 @@ import {
     SettleRefund,
     SettleRefundInput,
     TransitionOrderToState,
+    UpdateOrderCustomFields,
+    UpdateOrderInput,
     UpdateOrderNote,
     UpdateOrderNoteInput,
 } from '../../common/generated-types';
@@ -31,6 +33,7 @@ import {
     SETTLE_PAYMENT,
     SETTLE_REFUND,
     TRANSITION_ORDER_TO_STATE,
+    UPDATE_ORDER_CUSTOM_FIELDS,
     UPDATE_ORDER_NOTE,
 } from '../definitions/order-definitions';
 
@@ -131,4 +134,13 @@ export class OrderDataService {
             },
         );
     }
+
+    updateOrderCustomFields(input: UpdateOrderInput) {
+        return this.baseDataService.mutate<
+            UpdateOrderCustomFields.Mutation,
+            UpdateOrderCustomFields.Variables
+        >(UPDATE_ORDER_CUSTOM_FIELDS, {
+            input,
+        });
+    }
 }

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

@@ -54,7 +54,7 @@
             clrToggle
             [id]="customField.name"
             [formControl]="formGroup.get(customField.name)"
-            [readonly]="readonly || customField.readonly"
+            [attr.disabled]="readonly || customField.readonly"
         />
     </clr-toggle-wrapper>
     <vdr-datetime-picker

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

@@ -3,16 +3,31 @@
         {{ 'common.custom-fields' | translate }}
     </div>
     <div class="card-block">
-        <div class="card-text custom-field-form" >
+        <div class="card-text custom-field-form" [class.editable]="editable">
             <ng-container *ngFor="let customField of customFieldsConfig">
                 <vdr-custom-field-control
                     entityName="Order"
                     [customFieldsFormGroup]="customFieldForm"
                     [compact]="true"
-                    [readonly]="true"
+                    [readonly]="customField.readonly || !editable"
                     [customField]="customField"
                 ></vdr-custom-field-control>
             </ng-container>
         </div>
     </div>
+    <div class="card-footer">
+        <button class="btn btn-sm btn-secondary" (click)="editable = true" *ngIf="!editable">
+            <clr-icon shape="pencil"></clr-icon>
+            {{ 'common.edit' | translate }}
+        </button>
+        <button
+            class="btn btn-sm btn-primary"
+            (click)="onUpdateClick()"
+            *ngIf="editable"
+            [disabled]="customFieldForm.pristine || customFieldForm.invalid"
+        >
+            <clr-icon shape="check"></clr-icon>
+            {{ 'common.update' | translate }}
+        </button>
+    </div>
 </div>

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

@@ -1,5 +1,18 @@
 @import "variables";
 
+vdr-custom-field-control {
+    margin-bottom: 6px;
+    display: block;
+}
+
 .custom-field-form {
-    padding-bottom: 24px;
+    ::ng-deep .clr-control-label {
+        color: $color-grey-400;
+    }
+
+    &.editable {
+        ::ng-deep .clr-control-label {
+            color: inherit;
+        }
+    }
 }

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

@@ -1,6 +1,5 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-
 import { CustomFieldConfig } from '@vendure/admin-ui/core';
 
 @Component({
@@ -12,7 +11,9 @@ import { CustomFieldConfig } from '@vendure/admin-ui/core';
 export class OrderCustomFieldsCardComponent implements OnInit {
     @Input() customFieldsConfig: CustomFieldConfig[] = [];
     @Input() customFieldValues: { [name: string]: any } = {};
+    @Output() updateClick = new EventEmitter<any>();
     customFieldForm: FormGroup;
+    editable = false;
     constructor(private formBuilder: FormBuilder) {}
 
     ngOnInit() {
@@ -24,4 +25,10 @@ export class OrderCustomFieldsCardComponent implements OnInit {
             );
         }
     }
+
+    onUpdateClick() {
+        this.updateClick.emit(this.customFieldForm.value);
+        this.customFieldForm.markAsPristine();
+        this.editable = false;
+    }
 }

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

@@ -237,6 +237,7 @@
             <vdr-order-custom-fields-card
                 [customFieldsConfig]="customFields"
                 [customFieldValues]="order.customFields"
+                (updateClick)="updateCustomFields($event)"
             ></vdr-order-custom-fields-card>
             <div class="card">
                 <div class="card-header">

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

@@ -138,6 +138,17 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
         });
     }
 
+    updateCustomFields(customFieldsValue: any) {
+        this.dataService.order
+            .updateOrderCustomFields({
+                id: this.id,
+                customFields: customFieldsValue,
+            })
+            .subscribe(() => {
+                this.notificationService.success(_('common.notify-update-success'), { entity: 'Order' });
+            });
+    }
+
     getCouponCodeForAdjustment(
         order: OrderDetail.Fragment,
         promotionAdjustment: OrderDetail.Adjustments,