feat(admin-ui) Display shipping column in OrderList

* feat(admin-ui): Dropdown that keep open if its item clicked

* fix(server): Include shipping lines to order list

* feat(admin-ui): Shipping column in OrderList

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

@@ -1610,11 +1610,13 @@ export type ModifyOrderInput = {
 export type AddItemInput = {
   productVariantId: Scalars['ID'];
   quantity: Scalars['Int'];
+  customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type AdjustOrderLineInput = {
   orderLineId: Scalars['ID'];
   quantity: Scalars['Int'];
+  customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type SurchargeInput = {
@@ -3839,7 +3841,7 @@ export type OrderLine = Node & {
   discounts: Array<Adjustment>;
   taxLines: Array<TaxLine>;
   order: Order;
-  customFields?: Maybe<Scalars['JSON']>;
+  customFields?: Maybe<OrderLineCustomFields>;
 };
 
 export type Payment = Node & {
@@ -4584,6 +4586,17 @@ export type HistoryEntrySortParameter = {
   updatedAt?: Maybe<SortOrder>;
 };
 
+export type OrderLineCustomFields = {
+  __typename?: 'OrderLineCustomFields';
+  test?: Maybe<Scalars['String']>;
+  test2?: Maybe<Scalars['String']>;
+};
+
+export type OrderLineCustomFieldsInput = {
+  test?: Maybe<Scalars['String']>;
+  test2?: Maybe<Scalars['String']>;
+};
+
 export type AuthenticationInput = {
   native?: Maybe<NativeAuthInput>;
 };
@@ -5460,6 +5473,12 @@ export type OrderFragment = (
   & { customer?: Maybe<(
     { __typename?: 'Customer' }
     & Pick<Customer, 'id' | 'firstName' | 'lastName'>
+  )>, shippingLines: Array<(
+    { __typename?: 'ShippingLine' }
+    & { shippingMethod: (
+      { __typename?: 'ShippingMethod' }
+      & Pick<ShippingMethod, 'name'>
+    ) }
   )> }
 );
 
@@ -8136,6 +8155,8 @@ export namespace OrderAddress {
 export namespace Order {
   export type Fragment = OrderFragment;
   export type Customer = (NonNullable<OrderFragment['customer']>);
+  export type ShippingLines = NonNullable<(NonNullable<OrderFragment['shippingLines']>)[number]>;
+  export type ShippingMethod = (NonNullable<NonNullable<(NonNullable<OrderFragment['shippingLines']>)[number]>['shippingMethod']>);
 }
 
 export namespace Fulfillment {

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

@@ -54,6 +54,11 @@ export const ORDER_FRAGMENT = gql`
             firstName
             lastName
         }
+        shippingLines {
+            shippingMethod {
+                name
+            }
+        }
     }
 `;
 

packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-item.directive.ts

@@ -12,6 +12,6 @@ export class DropdownItemDirective {
 
     @HostListener('click', ['$event'])
     onDropdownItemClick(event: any): void {
-        this.dropdown.toggleOpen();
+        this.dropdown.onClick();
     }
 }

packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input } from '@angular/core';
 
 @Component({
     selector: 'vdr-dropdown',
@@ -10,6 +10,13 @@ export class DropdownComponent {
     private isOpen = false;
     private onOpenChangeCallbacks: Array<(isOpen: boolean) => void> = [];
     public trigger: ElementRef;
+    @Input() manualToggle = false;
+
+    onClick() {
+        if (!this.manualToggle) {
+            this.toggleOpen();
+        }
+    }
 
     toggleOpen() {
         this.isOpen = !this.isOpen;

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

@@ -88,6 +88,7 @@
     <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>
+    <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-order="item">
         <td class="left align-middle">{{ order.code }}</td>
@@ -100,6 +101,7 @@
         <td class="left align-middle">{{ order.total / 100 | currency: order.currencyCode }}</td>
         <td class="left align-middle">{{ order.updatedAt | timeAgo }}</td>
         <td class="left align-middle">{{ order.orderPlacedAt | date: 'medium' }}</td>
+        <td class="left align-middle">{{ getShippingNames(order) }}</td>
         <td class="right align-middle">
             <vdr-table-row-action
                 iconShape="shopping-cart"

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

@@ -10,6 +10,7 @@ import {
     ServerConfigService,
     SortOrder,
 } from '@vendure/admin-ui/core';
+import { Order } from '@vendure/common/lib/generated-types';
 import { merge, Observable } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, skip, takeUntil, tap } from 'rxjs/operators';
 
@@ -207,4 +208,12 @@ export class OrderListComponent
             },
         };
     }
+
+    getShippingNames(order: Order) {
+        if (order.shippingLines.length) {
+            return order.shippingLines.map(shippingLine => shippingLine.shippingMethod.name).join(', ');
+        } else {
+            return '';
+        }
+    }
 }

packages/asset-server-plugin/e2e/graphql/generated-e2e-asset-server-plugin-types.ts

@@ -1418,11 +1418,13 @@ export type ModifyOrderInput = {
 export type AddItemInput = {
     productVariantId: Scalars['ID'];
     quantity: Scalars['Int'];
+    customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type AdjustOrderLineInput = {
     orderLineId: Scalars['ID'];
     quantity: Scalars['Int'];
+    customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type SurchargeInput = {
@@ -3599,7 +3601,7 @@ export type OrderLine = Node & {
     discounts: Array<Adjustment>;
     taxLines: Array<TaxLine>;
     order: Order;
-    customFields?: Maybe<Scalars['JSON']>;
+    customFields?: Maybe<OrderLineCustomFields>;
 };
 
 export type Payment = Node & {
@@ -4315,6 +4317,16 @@ export type HistoryEntrySortParameter = {
     updatedAt?: Maybe<SortOrder>;
 };
 
+export type OrderLineCustomFields = {
+    test?: Maybe<Scalars['String']>;
+    test2?: Maybe<Scalars['String']>;
+};
+
+export type OrderLineCustomFieldsInput = {
+    test?: Maybe<Scalars['String']>;
+    test2?: Maybe<Scalars['String']>;
+};
+
 export type AuthenticationInput = {
     native?: Maybe<NativeAuthInput>;
 };

packages/common/src/generated-shop-types.ts

@@ -181,6 +181,7 @@ export type Mutation = {
 export type MutationAddItemToOrderArgs = {
     productVariantId: Scalars['ID'];
     quantity: Scalars['Int'];
+    customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type MutationRemoveOrderLineArgs = {
@@ -190,6 +191,7 @@ export type MutationRemoveOrderLineArgs = {
 export type MutationAdjustOrderLineArgs = {
     orderLineId: Scalars['ID'];
     quantity: Scalars['Int'];
+    customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type MutationApplyCouponCodeArgs = {
@@ -1924,7 +1926,7 @@ export type OrderLine = Node & {
     discounts: Array<Adjustment>;
     taxLines: Array<TaxLine>;
     order: Order;
-    customFields?: Maybe<Scalars['JSON']>;
+    customFields?: Maybe<OrderLineCustomFields>;
 };
 
 export type Payment = Node & {
@@ -2742,6 +2744,17 @@ export type UpdateOrderInput = {
     customFields?: Maybe<Scalars['JSON']>;
 };
 
+export type OrderLineCustomFields = {
+    __typename?: 'OrderLineCustomFields';
+    test?: Maybe<Scalars['String']>;
+    test2?: Maybe<Scalars['String']>;
+};
+
+export type OrderLineCustomFieldsInput = {
+    test?: Maybe<Scalars['String']>;
+    test2?: Maybe<Scalars['String']>;
+};
+
 export type AuthenticationInput = {
     native?: Maybe<NativeAuthInput>;
 };

packages/common/src/generated-types.ts

@@ -1579,11 +1579,13 @@ export type ModifyOrderInput = {
 export type AddItemInput = {
   productVariantId: Scalars['ID'];
   quantity: Scalars['Int'];
+  customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type AdjustOrderLineInput = {
   orderLineId: Scalars['ID'];
   quantity: Scalars['Int'];
+  customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type SurchargeInput = {
@@ -3807,7 +3809,7 @@ export type OrderLine = Node & {
   discounts: Array<Adjustment>;
   taxLines: Array<TaxLine>;
   order: Order;
-  customFields?: Maybe<Scalars['JSON']>;
+  customFields?: Maybe<OrderLineCustomFields>;
 };
 
 export type Payment = Node & {
@@ -4552,6 +4554,17 @@ export type HistoryEntrySortParameter = {
   updatedAt?: Maybe<SortOrder>;
 };
 
+export type OrderLineCustomFields = {
+  __typename?: 'OrderLineCustomFields';
+  test?: Maybe<Scalars['String']>;
+  test2?: Maybe<Scalars['String']>;
+};
+
+export type OrderLineCustomFieldsInput = {
+  test?: Maybe<Scalars['String']>;
+  test2?: Maybe<Scalars['String']>;
+};
+
 export type AuthenticationInput = {
   native?: Maybe<NativeAuthInput>;
 };

packages/core/e2e/graphql/generated-e2e-admin-types.ts

@@ -1418,11 +1418,13 @@ export type ModifyOrderInput = {
 export type AddItemInput = {
     productVariantId: Scalars['ID'];
     quantity: Scalars['Int'];
+    customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type AdjustOrderLineInput = {
     orderLineId: Scalars['ID'];
     quantity: Scalars['Int'];
+    customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type SurchargeInput = {
@@ -3599,7 +3601,7 @@ export type OrderLine = Node & {
     discounts: Array<Adjustment>;
     taxLines: Array<TaxLine>;
     order: Order;
-    customFields?: Maybe<Scalars['JSON']>;
+    customFields?: Maybe<OrderLineCustomFields>;
 };
 
 export type Payment = Node & {
@@ -4315,6 +4317,16 @@ export type HistoryEntrySortParameter = {
     updatedAt?: Maybe<SortOrder>;
 };
 
+export type OrderLineCustomFields = {
+    test?: Maybe<Scalars['String']>;
+    test2?: Maybe<Scalars['String']>;
+};
+
+export type OrderLineCustomFieldsInput = {
+    test?: Maybe<Scalars['String']>;
+    test2?: Maybe<Scalars['String']>;
+};
+
 export type AuthenticationInput = {
     native?: Maybe<NativeAuthInput>;
 };

packages/core/e2e/graphql/generated-e2e-shop-types.ts

@@ -179,6 +179,7 @@ export type Mutation = {
 export type MutationAddItemToOrderArgs = {
     productVariantId: Scalars['ID'];
     quantity: Scalars['Int'];
+    customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type MutationRemoveOrderLineArgs = {
@@ -188,6 +189,7 @@ export type MutationRemoveOrderLineArgs = {
 export type MutationAdjustOrderLineArgs = {
     orderLineId: Scalars['ID'];
     quantity: Scalars['Int'];
+    customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type MutationApplyCouponCodeArgs = {
@@ -1866,7 +1868,7 @@ export type OrderLine = Node & {
     discounts: Array<Adjustment>;
     taxLines: Array<TaxLine>;
     order: Order;
-    customFields?: Maybe<Scalars['JSON']>;
+    customFields?: Maybe<OrderLineCustomFields>;
 };
 
 export type Payment = Node & {
@@ -2632,6 +2634,16 @@ export type UpdateOrderInput = {
     customFields?: Maybe<Scalars['JSON']>;
 };
 
+export type OrderLineCustomFields = {
+    test?: Maybe<Scalars['String']>;
+    test2?: Maybe<Scalars['String']>;
+};
+
+export type OrderLineCustomFieldsInput = {
+    test?: Maybe<Scalars['String']>;
+    test2?: Maybe<Scalars['String']>;
+};
+
 export type AuthenticationInput = {
     native?: Maybe<NativeAuthInput>;
 };

packages/core/src/service/services/order.service.ts

@@ -152,7 +152,7 @@ export class OrderService {
     findAll(ctx: RequestContext, options?: ListQueryOptions<Order>): Promise<PaginatedList<Order>> {
         return this.listQueryBuilder
             .build(Order, options, {
-                relations: ['lines', 'customer', 'lines.productVariant', 'channels'],
+                relations: ['lines', 'customer', 'lines.productVariant', 'channels', 'shippingLines'],
                 channelId: ctx.channelId,
                 ctx,
             })

packages/elasticsearch-plugin/e2e/graphql/generated-e2e-elasticsearch-plugin-types.ts

@@ -1418,11 +1418,13 @@ export type ModifyOrderInput = {
 export type AddItemInput = {
     productVariantId: Scalars['ID'];
     quantity: Scalars['Int'];
+    customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type AdjustOrderLineInput = {
     orderLineId: Scalars['ID'];
     quantity: Scalars['Int'];
+    customFields?: Maybe<OrderLineCustomFieldsInput>;
 };
 
 export type SurchargeInput = {
@@ -3599,7 +3601,7 @@ export type OrderLine = Node & {
     discounts: Array<Adjustment>;
     taxLines: Array<TaxLine>;
     order: Order;
-    customFields?: Maybe<Scalars['JSON']>;
+    customFields?: Maybe<OrderLineCustomFields>;
 };
 
 export type Payment = Node & {
@@ -4315,6 +4317,16 @@ export type HistoryEntrySortParameter = {
     updatedAt?: Maybe<SortOrder>;
 };
 
+export type OrderLineCustomFields = {
+    test?: Maybe<Scalars['String']>;
+    test2?: Maybe<Scalars['String']>;
+};
+
+export type OrderLineCustomFieldsInput = {
+    test?: Maybe<Scalars['String']>;
+    test2?: Maybe<Scalars['String']>;
+};
+
 export type AuthenticationInput = {
     native?: Maybe<NativeAuthInput>;
 };