feat(admin-ui): Display customer & shipping data in Order list/detail

admin-ui/src/app/data/definitions/order-definitions.ts

@@ -9,6 +9,20 @@ export const ADJUSTMENT_FRAGMENT = gql`
     }
 `;
 
+export const SHIPPING_ADDRESS_FRAGMENT = gql`
+    fragment ShippingAddress on ShippingAddress {
+        fullName
+        company
+        streetLine1
+        streetLine2
+        city
+        province
+        postalCode
+        country
+        phoneNumber
+    }
+`;
+
 export const ORDER_FRAGMENT = gql`
     fragment Order on Order {
         id
@@ -18,6 +32,7 @@ export const ORDER_FRAGMENT = gql`
         state
         total
         customer {
+            id
             firstName
             lastName
         }
@@ -32,6 +47,7 @@ export const ORDER_WITH_LINES_FRAGMENT = gql`
         code
         state
         customer {
+            id
             firstName
             lastName
         }
@@ -63,9 +79,15 @@ export const ORDER_WITH_LINES_FRAGMENT = gql`
         subTotal
         subTotalBeforeTax
         totalBeforeTax
+        shipping
+        shippingMethod
+        shippingAddress {
+            ...ShippingAddress
+        }
         total
     }
     ${ADJUSTMENT_FRAGMENT}
+    ${SHIPPING_ADDRESS_FRAGMENT}
 `;
 
 export const GET_ORDERS_LIST = gql`

admin-ui/src/app/order/components/order-detail/order-detail.component.html

@@ -31,6 +31,26 @@
                 </tbody>
             </table>
         </div>
+        <div class="clr-col-md-4">
+            <table class="table table-vertical">
+                <tbody>
+                <tr>
+                    <th>{{ 'order.customer' | translate }}</th>
+                    <td>
+                        <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
+                    </td>
+                </tr>
+                <tr>
+                    <th>{{ 'order.shipping-address' | translate }}</th>
+                    <td>
+                        <div class="address-line" *ngFor="let line of getShippingAddressLines(order.shippingAddress)">
+                            {{ line }}
+                        </div>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
     </div>
 
 
@@ -46,7 +66,7 @@
         </tr>
         </thead>
         <tr *ngFor="let line of order.lines"
-             class="order-line">
+            class="order-line">
             <td class="thumb">
                 <img [src]="line.featuredAsset.preview + '?preset=tiny'">
             </td>
@@ -78,6 +98,12 @@
             <td colspan="5" class="left">{{ adjustment.description  }}</td>
             <td>{{ adjustment.amount / 100 | currency }}</td>
         </tr>
+        <tr class="shipping">
+            <td class="left">{{ 'order.shipping' | translate }}</td>
+            <td>{{ order.shippingMethod }}</td>
+            <td colspan="3"></td>
+            <td>{{ order.shipping / 100 | currency }}</td>
+        </tr>
         <tr class="total">
             <td class="left">{{ 'order.total' | translate }}</td>
             <td></td>

admin-ui/src/app/order/components/order-detail/order-detail.component.ts

@@ -25,6 +25,13 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderWithLines.Fra
         this.destroy();
     }
 
+    getShippingAddressLines(shippingAddress?: { [key: string]: string }): string[] {
+        if (!shippingAddress) {
+            return [];
+        }
+        return Object.values(shippingAddress).filter(val => val !== 'ShippingAddress');
+    }
+
     protected setFormValues(entity: Order.Fragment): void {
         // empty
     }

admin-ui/src/app/order/components/order-list/order-list.component.html

@@ -15,17 +15,19 @@
                 (itemsPerPageChange)="setItemsPerPage($event)">
     <vdr-dt-column>{{ 'common.ID' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
+    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>
-    <vdr-dt-column>{{ 'common.created-at' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-order="item">
         <td class="left">{{ order.id }}</td>
         <td class="left">{{ order.code }}</td>
+        <td class="left">
+            <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
+        </td>
         <td class="left">{{ order.state }}</td>
         <td class="left">{{ order.total / 100 | currency }}</td>
-        <td class="left">{{ order.createdAt | date:'medium' }}</td>
         <td class="left">{{ order.updatedAt | date:'medium' }}</td>
         <td class="right">
             <vdr-table-row-action iconShape="edit"

admin-ui/src/app/shared/components/customer-label/customer-label.component.html

@@ -0,0 +1,7 @@
+<clr-icon shape="user" [class.is-solid]="customer"></clr-icon>
+<div *ngIf="customer">
+    <a [routerLink]="['/customer', 'customers', customer.id]">
+        {{ customer.firstName }} {{ customer.lastName }}
+    </a>
+</div>
+<div *ngIf="!customer">{{ 'common.guest' | translate }}</div>

admin-ui/src/app/shared/components/customer-label/customer-label.component.scss

@@ -0,0 +1,10 @@
+@import "variables";
+
+:host {
+    display: flex;
+    align-items: center;
+}
+
+clr-icon {
+    margin-right: 6px;
+}

admin-ui/src/app/shared/components/customer-label/customer-label.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Customer } from 'shared/generated-types';
+
+@Component({
+    selector: 'vdr-customer-label',
+    templateUrl: './customer-label.component.html',
+    styleUrls: ['./customer-label.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomerLabelComponent {
+    @Input() customer: Customer.Fragment;
+}

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

@@ -18,6 +18,7 @@ import { PercentageSuffixInputComponent } from './components/affixed-input/perce
 import { ChipComponent } from './components/chip/chip.component';
 import { CurrencyInputComponent } from './components/currency-input/currency-input.component';
 import { CustomFieldControlComponent } from './components/custom-field-control/custom-field-control.component';
+import { CustomerLabelComponent } from './components/customer-label/customer-label.component';
 import { DataTableColumnComponent } from './components/data-table/data-table-column.component';
 import { DataTableComponent } from './components/data-table/data-table.component';
 import { FormFieldControlDirective } from './components/form-field/form-field-control.directive';
@@ -57,6 +58,7 @@ const DECLARATIONS = [
     BackgroundColorFromDirective,
     ChipComponent,
     CurrencyInputComponent,
+    CustomerLabelComponent,
     CustomFieldControlComponent,
     DataTableComponent,
     DataTableColumnComponent,

admin-ui/src/i18n-messages/en.json

@@ -82,6 +82,7 @@
     "edit-field": "Edit field",
     "enabled": "Enabled",
     "finish": "Finish",
+    "guest": "Guest",
     "items-per-page-option": "{ count } per page",
     "language": "Language",
     "log-out": "Log out",
@@ -150,10 +151,13 @@
   },
   "order": {
     "create-new-order": "Create new order",
+    "customer": "Customer",
     "order-code": "Order code",
     "product-name": "Product name",
     "product-sku": "SKU",
     "quantity": "Quantity",
+    "shipping": "Shipping",
+    "shipping-address": "Shipping address",
     "state": "State",
     "sub-total": "Sub total",
     "total": "Total",
@@ -199,4 +203,4 @@
     "update": "Update",
     "zone": "Zone"
   }
-}
+}

server/src/api/resolvers/order.resolver.ts

@@ -2,7 +2,6 @@ import { Args, Mutation, Query, Resolver } from '@nestjs/graphql';
 import {
     AddItemToOrderMutationArgs,
     AdjustItemQuantityMutationArgs,
-    CreateAddressInput,
     OrderQueryArgs,
     OrdersQueryArgs,
     Permission,

server/src/service/services/order.service.ts

@@ -52,6 +52,7 @@ export class OrderService {
     async findOne(ctx: RequestContext, orderId: ID): Promise<Order | undefined> {
         const order = await this.connection.getRepository(Order).findOne(orderId, {
             relations: [
+                'customer',
                 'lines',
                 'lines.productVariant',
                 'lines.productVariant.taxCategory',

shared/generated-types.ts

@@ -5505,6 +5505,21 @@ export namespace Adjustment {
     };
 }
 
+export namespace ShippingAddress {
+    export type Fragment = {
+        __typename?: 'ShippingAddress';
+        fullName?: string | null;
+        company?: string | null;
+        streetLine1?: string | null;
+        streetLine2?: string | null;
+        city?: string | null;
+        province?: string | null;
+        postalCode?: string | null;
+        country?: string | null;
+        phoneNumber?: string | null;
+    };
+}
+
 export namespace Order {
     export type Fragment = {
         __typename?: 'Order';
@@ -5538,11 +5553,15 @@ export namespace OrderWithLines {
         subTotal: number;
         subTotalBeforeTax: number;
         totalBeforeTax: number;
+        shipping: number;
+        shippingMethod?: string | null;
+        shippingAddress?: ShippingAddress | null;
         total: number;
     };
 
     export type Customer = {
         __typename?: 'Customer';
+        id: string;
         firstName: string;
         lastName: string;
     };
@@ -5581,6 +5600,8 @@ export namespace OrderWithLines {
     };
 
     export type Adjustments = Adjustment.Fragment;
+
+    export type ShippingAddress = ShippingAddress.Fragment;
 }
 
 export namespace Asset {