fix(admin-ui): Display custom fields in Address form

Fixes #455
vendure-ecommerce · Sep 8, 2020 · f074f65 · f074f65
1 parent 5587144
commit f074f65
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/packages/admin-ui/src/lib/customer/src/components/address-card/address-card.component.html b/packages/admin-ui/src/lib/customer/src/components/address-card/address-card.component.html
@@ -55,6 +55,16 @@
                     <label>{{ 'customer.phone-number' | translate }}</label>
                     <input formControlName="phoneNumber" type="text" clrInput />
                 </clr-input-container>
+                <section formGroupName="customFields" *ngIf="addressForm.get('customFields') as customFieldsGroup">
+                    <label>{{ 'common.custom-fields' | translate }}</label>
+                    <ng-container *ngFor="let customField of customFields">
+                        <vdr-custom-field-control
+                            entityName="Facet"
+                            [customFieldsFormGroup]="customFieldsGroup"
+                            [customField]="customField"
+                        ></vdr-custom-field-control>
+                    </ng-container>
+                </section>
             </form>
         </div>
     </div>

diff --git a/packages/admin-ui/src/lib/customer/src/components/address-card/address-card.component.ts b/packages/admin-ui/src/lib/customer/src/components/address-card/address-card.component.ts
@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-
-import { GetAvailableCountries } from '@vendure/admin-ui/core';
+import { CustomFieldConfig, GetAvailableCountries } from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-address-card',
@@ -12,6 +11,7 @@ import { GetAvailableCountries } from '@vendure/admin-ui/core';
 export class AddressCardComponent implements OnInit {
     editing = false;
     @Input() addressForm: FormGroup;
+    @Input() customFields: CustomFieldConfig;
     @Input() availableCountries: GetAvailableCountries.Items[] = [];
     @Input() isDefaultBilling: string;
     @Input() isDefaultShipping: string;

diff --git a/...s/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.html b/...s/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.html
@@ -111,6 +111,7 @@ <h3>{{ 'customer.addresses' | translate }}</h3>
             [isDefaultBilling]="defaultBillingAddressId === addressForm.value.id"
             [isDefaultShipping]="defaultShippingAddressId === addressForm.value.id"
             [addressForm]="addressForm"
+            [customFields]="addressCustomFields"
             (setAsDefaultBilling)="setDefaultBillingAddressId($event)"
             (setAsDefaultShipping)="setDefaultShippingAddressId($event)"
         ></vdr-address-card>

diff --git a/...ges/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.ts b/...ges/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.ts
@@ -49,6 +49,7 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
     implements OnInit, OnDestroy {
     detailForm: FormGroup;
     customFields: CustomFieldConfig[];
+    addressCustomFields: CustomFieldConfig[];
     availableCountries$: Observable<GetAvailableCountries.Items[]>;
     orders$: Observable<GetCustomer.Items[]>;
     ordersCount$: Observable<number>;
@@ -74,6 +75,7 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
         super(route, router, serverConfigService, dataService);
 
         this.customFields = this.getCustomFieldConfig('Customer');
+        this.addressCustomFields = this.getCustomFieldConfig('Address');
         this.detailForm = this.formBuilder.group({
             customer: this.formBuilder.group({
                 title: '',
@@ -245,6 +247,7 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
                                     phoneNumber: address.phoneNumber,
                                     defaultShippingAddress: this.defaultShippingAddressId === address.id,
                                     defaultBillingAddress: this.defaultBillingAddressId === address.id,
+                                    customFields: address.customFields,
                                 };
                                 if (!address.id) {
                                     saveOperations.push(
@@ -403,15 +406,29 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
         if (entity.addresses) {
             const addressesArray = new FormArray([]);
             for (const address of entity.addresses) {
-                addressesArray.push(
-                    this.formBuilder.group({ ...address, countryCode: address.country.code }),
-                );
+                const { customFields, ...rest } = address as any;
+                const addressGroup = this.formBuilder.group({
+                    ...rest,
+                    countryCode: address.country.code,
+                });
+                addressesArray.push(addressGroup);
                 if (address.defaultShippingAddress) {
                     this.defaultShippingAddressId = address.id;
                 }
                 if (address.defaultBillingAddress) {
                     this.defaultBillingAddressId = address.id;
                 }
+
+                if (this.addressCustomFields.length) {
+                    const customFieldsGroup = this.formBuilder.group({});
+                    for (const fieldDef of this.addressCustomFields) {
+                        const key = fieldDef.name;
+                        const value = (address as any).customFields?.[key];
+                        const control = new FormControl(value);
+                        customFieldsGroup.addControl(key, control);
+                    }
+                    addressGroup.addControl('customFields', customFieldsGroup);
+                }
             }
             this.detailForm.setControl('addresses', addressesArray);
         }