fix(admin-ui): Fix address dialog issues

Closes #463

packages/admin-ui/src/lib/customer/src/components/address-card/address-card.component.ts

@@ -4,11 +4,15 @@ import {
     Component,
     EventEmitter,
     Input,
+    OnChanges,
     OnInit,
     Output,
+    SimpleChanges,
 } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { CustomFieldConfig, GetAvailableCountries, ModalService } from '@vendure/admin-ui/core';
+import { BehaviorSubject } from 'rxjs';
+import { filter, take } from 'rxjs/operators';
 
 import { AddressDetailDialogComponent } from '../address-detail-dialog/address-detail-dialog.component';
 
@@ -18,21 +22,37 @@ import { AddressDetailDialogComponent } from '../address-detail-dialog/address-d
     styleUrls: ['./address-card.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AddressCardComponent implements OnInit {
+export class AddressCardComponent implements OnInit, OnChanges {
     @Input() addressForm: FormGroup;
     @Input() customFields: CustomFieldConfig;
     @Input() availableCountries: GetAvailableCountries.Items[] = [];
     @Input() isDefaultBilling: string;
     @Input() isDefaultShipping: string;
     @Output() setAsDefaultShipping = new EventEmitter<string>();
     @Output() setAsDefaultBilling = new EventEmitter<string>();
+    private dataDependenciesPopulated = new BehaviorSubject<boolean>(false);
 
     constructor(private modalService: ModalService, private changeDetector: ChangeDetectorRef) {}
 
     ngOnInit(): void {
         const streetLine1 = this.addressForm.get('streetLine1') as FormControl;
+        // Make the address dialog display automatically if there is no address line
+        // as is the case when adding a new address.
         if (!streetLine1.value) {
-            this.editAddress();
+            this.dataDependenciesPopulated
+                .pipe(
+                    filter(value => value),
+                    take(1),
+                )
+                .subscribe(() => {
+                    this.editAddress();
+                });
+        }
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (this.customFields != null && this.availableCountries != null) {
+            this.dataDependenciesPopulated.next(true);
         }
     }
 

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

@@ -155,6 +155,13 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
             defaultShippingAddress: false,
             defaultBillingAddress: false,
         });
+        if (this.addressCustomFields.length) {
+            const customFieldsGroup = this.formBuilder.group({});
+            for (const fieldDef of this.addressCustomFields) {
+                customFieldsGroup.addControl(fieldDef.name, new FormControl(''));
+            }
+            newAddress.addControl('customFields', customFieldsGroup);
+        }
         addressFormArray.push(newAddress);
     }