chore(admin-ui): Update draft order page to new format

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

@@ -57,6 +57,7 @@ export type PageLocationId =
     | 'customer-list'
     | 'customer-group-list'
     | 'customer-group-detail'
+    | 'draft-order-detail'
     | 'facet-detail'
     | 'facet-list'
     | 'global-setting-detail'

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

@@ -1,37 +1,125 @@
-<vdr-action-bar *ngIf="entity$ | async as order">
-    <vdr-ab-left>
-        <div class="flex clr-align-items-center">
-            <vdr-entity-info [entity]="entity$ | async"></vdr-entity-info>
-            <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
-        </div>
-    </vdr-ab-left>
+<vdr-page-block>
+    <vdr-action-bar *ngIf="entity$ | async as order">
+        <vdr-ab-left>
+            <div class="flex clr-align-items-center">
+                <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
+            </div>
+        </vdr-ab-left>
 
-    <vdr-ab-right>
-        <button
-            class="btn btn-primary"
-            (click)="completeOrder()"
-            [disabled]="!order.customer || !order.lines.length || !order.shippingLines.length"
-        >
-            <clr-icon shape="check"></clr-icon>
-            {{ 'order.complete-draft-order' | translate }}
-        </button>
-        <vdr-dropdown>
-            <button class="icon-button" vdrDropdownTrigger>
-                <clr-icon shape="ellipsis-vertical"></clr-icon>
+        <vdr-ab-right>
+            <button
+                class="btn btn-primary"
+                (click)="completeOrder()"
+                [disabled]="!order.customer || !order.lines.length || !order.shippingLines.length"
+            >
+                <clr-icon shape="check"></clr-icon>
+                {{ 'order.complete-draft-order' | translate }}
             </button>
-            <vdr-dropdown-menu vdrPosition="bottom-right">
-                <button type="button" class="btn" vdrDropdownItem (click)="deleteOrder()">
-                    <clr-icon shape="trash" class="is-danger"></clr-icon>
-                    {{ 'order.delete-draft-order' | translate }}
+            <vdr-dropdown>
+                <button class="icon-button" vdrDropdownTrigger>
+                    <clr-icon shape="ellipsis-vertical"></clr-icon>
                 </button>
-            </vdr-dropdown-menu>
-        </vdr-dropdown>
-    </vdr-ab-right>
-</vdr-action-bar>
+                <vdr-dropdown-menu vdrPosition="bottom-right">
+                    <button type="button" vdrDropdownItem (click)="deleteOrder()">
+                        <clr-icon shape="trash" class="is-danger"></clr-icon>
+                        {{ 'order.delete-draft-order' | translate }}
+                    </button>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
+        </vdr-ab-right>
+    </vdr-action-bar>
+</vdr-page-block>
 
-<div *ngIf="entity$ | async as order">
-    <div class="clr-row">
-        <div class="clr-col-lg-8">
+<vdr-page-detail-layout *ngIf="entity$ | async as order">
+    <vdr-page-detail-sidebar>
+        <vdr-card [title]="'order.customer' | translate">
+            <ng-template vdrCardControls>
+                <clr-icon *ngIf="!order.customer" shape="unknown-status" class="is-warning"></clr-icon>
+                <clr-icon *ngIf="order.customer" shape="check" class="is-success"></clr-icon>
+            </ng-template>
+            <vdr-customer-label
+                class="block mb-2"
+                *ngIf="order.customer"
+                [customer]="order.customer"
+            ></vdr-customer-label>
+            <button class="button-small" (click)="setCustomer()">
+                {{ 'order.set-customer-for-order' | translate }}
+            </button>
+        </vdr-card>
+        <vdr-card [title]="'order.billing-address' | translate">
+            <ng-template vdrCardControls>
+                <clr-icon
+                    *ngIf="!order.billingAddress.streetLine1"
+                    shape="unknown-status"
+                    class="is-warning"
+                ></clr-icon>
+                <clr-icon
+                    *ngIf="order.billingAddress.streetLine1"
+                    shape="check"
+                    class="is-success"
+                ></clr-icon>
+            </ng-template>
+            <vdr-formatted-address
+                class="block mb-2"
+                *ngIf="order.billingAddress"
+                [address]="order.billingAddress"
+            ></vdr-formatted-address>
+            <button class="button-small" (click)="setBillingAddress()">
+                {{ 'order.set-billing-address' | translate }}
+            </button>
+        </vdr-card>
+        <vdr-card [title]="'order.shipping' | translate">
+            <ng-template vdrCardControls>
+                <clr-icon
+                    *ngIf="!order.shippingAddress.streetLine1 || !order.shippingLines.length"
+                    shape="unknown-status"
+                    class="is-warning"
+                ></clr-icon>
+                <clr-icon
+                    *ngIf="order.shippingAddress.streetLine1 && order.shippingLines.length"
+                    shape="check"
+                    class="is-success"
+                ></clr-icon>
+            </ng-template>
+            <vdr-formatted-address
+                class="block mb-2"
+                *ngIf="order.shippingAddress"
+                [address]="order.shippingAddress"
+            ></vdr-formatted-address>
+            <button class="button-small" (click)="setShippingAddress()">
+                {{ 'order.set-shipping-address' | translate }}
+            </button>
+
+            <div *ngFor="let shippingLine of order.shippingLines">
+                {{ shippingLine.shippingMethod.name }}
+            </div>
+            <button class="button-small" (click)="setShippingMethod()">
+                {{ 'order.set-shipping-method' | translate }}
+            </button>
+        </vdr-card>
+        <vdr-card>
+            <button
+                *ngIf="order.couponCodes.length === 0 && !displayCouponCodeInput"
+                class="button-small"
+                (click)="displayCouponCodeInput = !displayCouponCodeInput"
+            >
+                {{ 'order.set-coupon-codes' | translate }}
+            </button>
+            <div *ngIf="order.couponCodes.length || displayCouponCodeInput">
+                <label>{{ 'order.set-coupon-codes' | translate }}</label>
+                <vdr-coupon-code-selector
+                    [couponCodes]="order.couponCodes"
+                    (addCouponCode)="applyCouponCode($event)"
+                    (removeCouponCode)="removeCouponCode($event)"
+                ></vdr-coupon-code-selector>
+            </div>
+        </vdr-card>
+        <vdr-card>
+            <vdr-page-entity-info *ngIf="entity$ | async as entity" [entity]="entity" />
+        </vdr-card>
+    </vdr-page-detail-sidebar>
+    <vdr-page-block>
+        <vdr-card>
             <vdr-draft-order-variant-selector
                 [orderLineCustomFields]="orderLineCustomFields"
                 [currencyCode]="order.currencyCode"
@@ -44,25 +132,9 @@
                 (adjust)="adjustOrderLine($event)"
                 (remove)="removeOrderLine($event)"
             ></vdr-order-table>
-            <div class="flex">
-                <button
-                    *ngIf="order.couponCodes.length === 0 && !displayCouponCodeInput"
-                    class="btn btn-link btn-sm mr2"
-                    (click)="displayCouponCodeInput = !displayCouponCodeInput"
-                >
-                    {{ 'order.set-coupon-codes' | translate }}
-                </button>
-                <div *ngIf="order.couponCodes.length || displayCouponCodeInput">
-                    <label>{{ 'order.set-coupon-codes' | translate }}</label>
-                    <vdr-coupon-code-selector
-                        [couponCodes]="order.couponCodes"
-                        (addCouponCode)="applyCouponCode($event)"
-                        (removeCouponCode)="removeCouponCode($event)"
-                    ></vdr-coupon-code-selector>
-                </div>
-            </div>
+        </vdr-card>
+        <vdr-card [title]="'order.tax-summary' | translate">
             <ng-container *ngIf="order.taxSummary.length">
-                <h4>{{ 'order.tax-summary' | translate }}</h4>
                 <table class="table">
                     <thead>
                         <tr>
@@ -76,100 +148,18 @@
                         <tr *ngFor="let row of order.taxSummary">
                             <td>{{ row.description }}</td>
                             <td>{{ row.taxRate / 100 | percent }}</td>
-                            <td>{{ row.taxBase | localeCurrency: order.currencyCode }}</td>
-                            <td>{{ row.taxTotal | localeCurrency: order.currencyCode }}</td>
+                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>
+                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>
                         </tr>
                     </tbody>
                 </table>
             </ng-container>
-        </div>
-        <div class="clr-col-lg-4 order-cards">
-            <div class="card">
-                <div class="card-header">
-                    <clr-icon *ngIf="!order.customer" shape="unknown-status" class="is-warning"></clr-icon>
-                    <clr-icon *ngIf="order.customer" shape="check" class="is-success"></clr-icon>
-                    {{ 'order.customer' | translate }}
-                </div>
-                <div class="card-block">
-                    <div class="card-text">
-                        <vdr-customer-label
-                            class="block mb-2"
-                            *ngIf="order.customer"
-                            [customer]="order.customer"
-                        ></vdr-customer-label>
-                        <button class="btn btn-link btn-sm" (click)="setCustomer()">
-                            {{ 'order.set-customer-for-order' | translate }}
-                        </button>
-                    </div>
-                </div>
-                <div class="card-block">
-                    <h4 class="card-title">
-                        <clr-icon
-                            *ngIf="!order.billingAddress.streetLine1"
-                            shape="unknown-status"
-                            class="is-warning"
-                        ></clr-icon>
-                        <clr-icon
-                            *ngIf="order.billingAddress.streetLine1"
-                            shape="check"
-                            class="is-success"
-                        ></clr-icon>
-                        {{ 'order.billing-address' | translate }}
-                    </h4>
-                    <div class="card-text">
-                        <vdr-formatted-address
-                            class="block mb-2"
-                            *ngIf="order.billingAddress"
-                            [address]="order.billingAddress"
-                        ></vdr-formatted-address>
-                        <button class="btn btn-link btn-sm" (click)="setBillingAddress()">
-                            {{ 'order.set-billing-address' | translate }}
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="card">
-                <div class="card-header">
-                    <clr-icon
-                        *ngIf="!order.shippingAddress.streetLine1 || !order.shippingLines.length"
-                        shape="unknown-status"
-                        class="is-warning"
-                    ></clr-icon>
-                    <clr-icon
-                        *ngIf="order.shippingAddress.streetLine1 && order.shippingLines.length"
-                        shape="check"
-                        class="is-success"
-                    ></clr-icon>
-                    {{ 'order.shipping' | translate }}
-                </div>
-                <div class="card-block">
-                    <div class="card-text">
-                        <vdr-formatted-address
-                            class="block mb-2"
-                            *ngIf="order.shippingAddress"
-                            [address]="order.shippingAddress"
-                        ></vdr-formatted-address>
-                        <button class="btn btn-link btn-sm" (click)="setShippingAddress()">
-                            {{ 'order.set-shipping-address' | translate }}
-                        </button>
-                    </div>
-                </div>
-                <div class="card-block">
-                    <div class="card-text">
-                        <div *ngFor="let shippingLine of order.shippingLines">
-                            {{ shippingLine.shippingMethod.name }}
-                        </div>
-                        <button class="btn btn-link btn-sm" (click)="setShippingMethod()">
-                            {{ 'order.set-shipping-method' | translate }}
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <vdr-order-custom-fields-card
-                [customFieldsConfig]="customFields"
-                [customFieldValues]="order.customFields"
-                (updateClick)="updateCustomFields($event)"
-            ></vdr-order-custom-fields-card>
-        </div>
-    </div>
-</div>
+        </vdr-card>
+
+        <vdr-order-custom-fields-card
+            [customFieldsConfig]="customFields"
+            [customFieldValues]="order.customFields"
+            (updateClick)="updateCustomFields($event)"
+        ></vdr-order-custom-fields-card>
+    </vdr-page-block>
+</vdr-page-detail-layout>

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

@@ -1,10 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
-    BaseDetailComponent,
-    CustomFieldConfig,
     DataService,
     DeletionResult,
     DraftOrderEligibleShippingMethodsQuery,
@@ -12,7 +9,8 @@ import {
     NotificationService,
     Order,
     OrderDetailFragment,
-    ServerConfigService,
+    OrderDetailQueryDocument,
+    TypedBaseDetailComponent,
 } from '@vendure/admin-ui/core';
 import { combineLatest, Observable, Subject } from 'rxjs';
 import { switchMap, take } from 'rxjs/operators';
@@ -29,30 +27,27 @@ import { SelectShippingMethodDialogComponent } from '../select-shipping-method-d
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DraftOrderDetailComponent
-    extends BaseDetailComponent<OrderDetailFragment>
+    extends TypedBaseDetailComponent<typeof OrderDetailQueryDocument, 'order'>
     implements OnInit, OnDestroy
 {
+    customFields = this.getCustomFieldConfig('Order');
+    orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
     detailForm = new UntypedFormGroup({});
     eligibleShippingMethods$: Observable<
         DraftOrderEligibleShippingMethodsQuery['eligibleShippingMethodsForDraftOrder']
     >;
     nextStates$: Observable<string[]>;
     fetchHistory = new Subject<void>();
-    customFields: CustomFieldConfig[];
-    orderLineCustomFields: CustomFieldConfig[];
     displayCouponCodeInput = false;
 
     constructor(
-        router: Router,
-        route: ActivatedRoute,
-        serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
         protected dataService: DataService,
         private notificationService: NotificationService,
         private modalService: ModalService,
         private orderTransitionService: OrderTransitionService,
     ) {
-        super(route, router, serverConfigService, dataService);
+        super();
     }
 
     ngOnInit() {
@@ -67,8 +62,6 @@ export class DraftOrderDetailComponent
                     ),
             ),
         );
-        this.customFields = this.getCustomFieldConfig('Order');
-        this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
     }
 
     ngOnDestroy() {

packages/admin-ui/src/lib/order/src/components/draft-order-variant-selector/draft-order-variant-selector.component.html

@@ -7,12 +7,12 @@
     </div>
     <div class="card-block" *ngIf="selectedVariant$ | async as selectedVariant">
         <div class="variant-details">
-            <img class="mr2" [src]="selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32">
+            <img class="mr-2" [src]="selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32">
             <div class="details">
                 <div>{{ selectedVariant?.name }}</div>
                 <div class="small">{{ selectedVariant?.sku }}</div>
             </div>
-            <div class="details ml4">
+            <div class="details ml-4">
                 <div class="small">
                     {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}
                 </div>

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

@@ -43,7 +43,7 @@
     </vdr-dt2-column>
     <vdr-dt2-column [heading]="'common.code' | translate" [optional]="false">
         <ng-template let-order="item">
-            <a class="button-ghost" [routerLink]="['./', order.id]"
+            <a class="button-ghost" [routerLink]="order.state === 'Draft' ? ['./draft', order.id] : ['./', order.id]"
                 ><span>{{ order.code }}</span>
                 <clr-icon shape="arrow right"></clr-icon>
             </a>

packages/admin-ui/src/lib/order/src/order.module.ts

@@ -124,5 +124,21 @@ export class OrderModule {
                 ],
             }),
         });
+        pageService.registerPageTab({
+            location: 'draft-order-detail',
+            tab: _('order.order'),
+            route: '',
+            component: detailComponentWithResolver({
+                component: DraftOrderDetailComponent,
+                query: OrderDetailQueryDocument,
+                entityKey: 'order',
+                getBreadcrumbs: entity => [
+                    {
+                        label: _('order.draft-order'),
+                        link: [entity?.id],
+                    },
+                ],
+            }),
+        });
     }
 }

packages/admin-ui/src/lib/order/src/order.routes.ts

@@ -30,15 +30,13 @@ export const createRoutes = (pageService: PageService): Route[] => [
     },
     {
         path: 'draft/:id',
-        component: DraftOrderDetailComponent,
-        resolve: {
-            entity: OrderResolver,
-        },
+        component: PageComponent,
         canActivate: [OrderGuard],
-        canDeactivate: [CanDeactivateDetailGuard],
         data: {
-            breadcrumb: orderBreadcrumb,
+            locationId: 'draft-order-detail',
+            breadcrumb: { label: _('breadcrumb.orders'), link: ['../'] },
         },
+        children: pageService.getPageTabRoutes('draft-order-detail'),
     },
     {
         path: ':id',
@@ -68,7 +66,6 @@ export const createRoutes = (pageService: PageService): Route[] => [
         resolve: {
             entity: OrderResolver,
         },
-        // canDeactivate: [CanDeactivateDetailGuard],
         data: {
             breadcrumb: modifyingOrderBreadcrumb,
         },

packages/admin-ui/src/lib/static/i18n-messages/en.json

@@ -517,6 +517,7 @@
     "amount": "Amount",
     "arrange-additional-payment": "Arrange additional payment",
     "billing-address": "Billing address",
+    "draft-order": "Draft order",
     "cancel": "Cancel",
     "cancel-entire-order": "Cancel entire order",
     "cancel-fulfillment": "Cancel fulfillment",