refactor(admin-ui): Extract FormattedAddressComponent

admin-ui/src/app/customer/components/address-card/address-card.component.html

@@ -17,22 +17,7 @@
     </div>
     <div class="card-block">
         <div class="card-text">
-            <ul class="address-lines" *ngIf="!editing">
-                <li *ngIf="address.fullName">{{ address.fullName }}</li>
-                <li *ngIf="address.streetLine1">{{ address.streetLine1 }}</li>
-                <li *ngIf="address.streetLine2">{{ address.streetLine2 }}</li>
-                <li *ngIf="address.city">{{ address.city }}</li>
-                <li *ngIf="address.province">{{ address.province }}</li>
-                <li *ngIf="address.postalCode">{{ address.postalCode }}</li>
-                <li *ngIf="address.country">
-                    <clr-icon shape="world" size="12"></clr-icon>
-                    {{ address.country.name }}
-                </li>
-                <li *ngIf="address.phoneNumber">
-                    <clr-icon shape="phone-handset" size="12"></clr-icon>
-                    {{ address.phoneNumber }}
-                </li>
-            </ul>
+            <vdr-formatted-address [address]="address" *ngIf="!editing"></vdr-formatted-address>
             <form [formGroup]="addressForm" *ngIf="editing">
                 <clr-input-container>
                     <label>{{ 'customer.full-name' | translate }}</label>

admin-ui/src/app/customer/components/address-card/address-card.component.scss

@@ -5,11 +5,6 @@
     max-width: 360px;
 }
 
-.address-lines {
-    list-style-type: none;
-    line-height: 1.2em;
-}
-
 clr-input-container {
     margin-bottom: 12px;
 }

admin-ui/src/app/shared/components/formatted-address/formatted-address.component.html

@@ -0,0 +1,16 @@
+<ul class="address-lines">
+    <li *ngIf="address.fullName">{{ address.fullName }}</li>
+    <li *ngIf="address.streetLine1">{{ address.streetLine1 }}</li>
+    <li *ngIf="address.streetLine2">{{ address.streetLine2 }}</li>
+    <li *ngIf="address.city">{{ address.city }}</li>
+    <li *ngIf="address.province">{{ address.province }}</li>
+    <li *ngIf="address.postalCode">{{ address.postalCode }}</li>
+    <li *ngIf="address.country">
+        <clr-icon shape="world" size="12"></clr-icon>
+        {{ address.country.name ? address.country.name : address.country }}
+    </li>
+    <li *ngIf="address.phoneNumber">
+        <clr-icon shape="phone-handset" size="12"></clr-icon>
+        {{ address.phoneNumber }}
+    </li>
+</ul>

admin-ui/src/app/shared/components/formatted-address/formatted-address.component.scss

@@ -0,0 +1,6 @@
+@import "variables";
+
+.address-lines {
+    list-style-type: none;
+    line-height: 1.2em;
+}

admin-ui/src/app/shared/components/formatted-address/formatted-address.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { AddressFragment, OrderAddress } from '../../../common/generated-types';
+
+@Component({
+    selector: 'vdr-formatted-address',
+    templateUrl: './formatted-address.component.html',
+    styleUrls: ['./formatted-address.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormattedAddressComponent {
+    @Input() address: AddressFragment | OrderAddress;
+}

admin-ui/src/app/shared/shared.module.ts

@@ -31,6 +31,7 @@ import { FacetValueSelectorComponent } from './components/facet-value-selector/f
 import { FormFieldControlDirective } from './components/form-field/form-field-control.directive';
 import { FormFieldComponent } from './components/form-field/form-field.component';
 import { FormItemComponent } from './components/form-item/form-item.component';
+import { FormattedAddressComponent } from './components/formatted-address/formatted-address.component';
 import { ItemsPerPageControlsComponent } from './components/items-per-page-controls/items-per-page-controls.component';
 import { LanguageSelectorComponent } from './components/language-selector/language-selector.component';
 import { DialogButtonsDirective } from './components/modal-dialog/dialog-buttons.directive';
@@ -102,6 +103,7 @@ const DECLARATIONS = [
     DropdownTriggerDirective,
     DropdownItemDirective,
     OrderStateLabelComponent,
+    FormattedAddressComponent,
 ];
 
 @NgModule({