refactor(admin-ui): Update config for order modification route

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

@@ -72,6 +72,7 @@ export type PageLocationId =
     | 'job-list'
     | 'order-detail'
     | 'order-list'
+    | 'modify-order'
     | 'payment-method-detail'
     | 'payment-method-list'
     | 'product-detail'

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

@@ -1,12 +1,4 @@
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    Input,
-    OnChanges,
-    OnInit,
-    SimpleChanges,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { titleSetter } from '../../../common/title-setter';
@@ -24,7 +16,7 @@ export class PageTitleComponent implements OnInit, OnChanges {
     protected title$: Observable<string>;
     readonly setTitle = titleSetter();
 
-    constructor(private changeDetector: ChangeDetectorRef, private breadcrumbService: BreadcrumbService) {}
+    constructor(private breadcrumbService: BreadcrumbService) {}
 
     ngOnInit() {
         this.title$ = combineLatest(this.titleChange$, this.breadcrumbService.breadcrumbs$).pipe(

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

@@ -1,9 +1,7 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { UntypedFormArray, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
 import {
     AddItemInput,
-    BaseDetailComponent,
     CustomFieldConfig,
     DataService,
     ErrorResult,
@@ -15,12 +13,13 @@ import {
     NotificationService,
     OrderAddressFragment,
     OrderDetailFragment,
+    OrderDetailQueryDocument,
     OrderLineInput,
     ProductSelectorSearchQuery,
-    ServerConfigService,
     SortOrder,
     SurchargeInput,
     transformRelationCustomFieldInputs,
+    TypedBaseDetailComponent,
 } from '@vendure/admin-ui/core';
 import { assertNever, notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import { simpleDeepClone } from '@vendure/common/lib/simple-deep-clone';
@@ -57,7 +56,7 @@ type ModifyOrderData = Omit<ModifyOrderInput, 'addItems' | 'adjustOrderLines'> &
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OrderEditorComponent
-    extends BaseDetailComponent<OrderDetailFragment>
+    extends TypedBaseDetailComponent<typeof OrderDetailQueryDocument, 'order'>
     implements OnInit, OnDestroy
 {
     availableCountries$: Observable<GetAvailableCountriesQuery['countries']['items']>;
@@ -88,16 +87,12 @@ export class OrderEditorComponent
     private addedVariants = new Map<string, ProductSelectorItem>();
 
     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();
     }
 
     get addedLines(): AddedLine[] {

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

@@ -165,6 +165,27 @@ export class OrderModule {
                 ],
             }),
         });
+        pageService.registerPageTab({
+            priority: 0,
+            location: 'modify-order',
+            tab: _('order.order'),
+            route: '',
+            component: detailComponentWithResolver({
+                component: OrderEditorComponent,
+                query: OrderDetailQueryDocument,
+                entityKey: 'order',
+                getBreadcrumbs: entity => [
+                    {
+                        label: entity?.code || 'order',
+                        link: ['/orders/', entity?.id],
+                    },
+                    {
+                        label: _('order.modify-order'),
+                        link: [entity?.id],
+                    },
+                ],
+            }),
+        });
         OrderModule.hasRegisteredTabsAndBulkActions = true;
     }
 }

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

@@ -1,14 +1,6 @@
 import { Route } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import {
-    BreadcrumbLabelLinkPair,
-    OrderDetailFragment,
-    PageComponent,
-    PageService,
-} from '@vendure/admin-ui/core';
-import { map } from 'rxjs/operators';
-import { OrderEditorComponent } from './components/order-editor/order-editor.component';
-import { OrderResolver } from './providers/routing/order-resolver';
+import { PageComponent, PageService } from '@vendure/admin-ui/core';
 import { OrderGuard } from './providers/routing/order.guard';
 
 export const createRoutes = (pageService: PageService): Route[] => [
@@ -54,60 +46,12 @@ export const createRoutes = (pageService: PageService): Route[] => [
     },
     {
         path: ':id/modify',
-        component: OrderEditorComponent,
-        resolve: {
-            entity: OrderResolver,
-        },
+        component: PageComponent,
+        canActivate: [OrderGuard],
         data: {
-            breadcrumb: modifyingOrderBreadcrumb,
+            locationId: 'modify-order',
+            breadcrumb: { label: _('breadcrumb.orders'), link: ['../'] },
         },
+        children: pageService.getPageTabRoutes('modify-order'),
     },
 ];
-
-export function orderBreadcrumb(data: any, params: any) {
-    return data.entity.pipe(
-        map((entity: OrderDetailFragment) => {
-            if (entity.aggregateOrder) {
-                return [
-                    {
-                        label: 'breadcrumb.orders',
-                        link: ['../'],
-                    },
-                    {
-                        label: entity.aggregateOrder.code,
-                        link: ['../', entity.aggregateOrder.id],
-                    },
-                    {
-                        label: _('breadcrumb.seller-orders'),
-                        link: ['../', entity.aggregateOrder.id],
-                    },
-                    {
-                        label: entity.code,
-                        link: [entity.id],
-                    },
-                ];
-            } else {
-                return [
-                    {
-                        label: 'breadcrumb.orders',
-                        link: ['../'],
-                    },
-                    {
-                        label: entity.code,
-                        link: [entity.id],
-                    },
-                ];
-            }
-        }),
-    );
-}
-
-export function modifyingOrderBreadcrumb(data: any, params: any) {
-    return orderBreadcrumb(data, params).pipe(
-        map((breadcrumbs: BreadcrumbLabelLinkPair[]) => {
-            const modifiedBreadcrumbs = breadcrumbs.slice();
-            modifiedBreadcrumbs[1].link = ['../', breadcrumbs[1].link[0]];
-            return modifiedBreadcrumbs.concat({ label: _('breadcrumb.modifying'), link: [''] });
-        }) as any,
-    );
-}

packages/admin-ui/src/lib/order/src/providers/routing/order-resolver.ts

@@ -1,53 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, ActivationStart, Router, RouterStateSnapshot } from '@angular/router';
-import { DataService, OrderDetailFragment } from '@vendure/admin-ui/core';
-import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
-import { EMPTY, Observable } from 'rxjs';
-import { filter, map, shareReplay, switchMap, take, takeUntil } from 'rxjs/operators';
-
-import { DraftOrderDetailComponent } from '../../components/draft-order-detail/draft-order-detail.component';
-
-/**
- * Resolves the id from the path into a Customer entity.
- */
-@Injectable({
-    providedIn: 'root',
-})
-export class OrderResolver  {
-    constructor(private router: Router, private dataService: DataService) {}
-
-    /** @internal */
-    resolve(
-        route: ActivatedRouteSnapshot,
-        state: RouterStateSnapshot,
-    ): Observable<Observable<OrderDetailFragment>> {
-        const id = route.paramMap.get('id');
-
-        // Complete the entity stream upon navigating away
-        const navigateAway$ = this.router.events.pipe(filter(event => event instanceof ActivationStart));
-
-        const stream = this.dataService.order
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            .getOrder(id!)
-            .mapStream(data => data.order)
-            .pipe(
-                switchMap(order => {
-                    if (order?.state === 'Draft' && route.component !== DraftOrderDetailComponent) {
-                        // Make sure Draft orders only get displayed with the DraftOrderDetailComponent
-                        this.router.navigate(['/orders/draft', id]);
-                        return EMPTY;
-                    } else {
-                        return [order];
-                    }
-                }),
-                takeUntil(navigateAway$),
-                filter(notNullOrUndefined),
-                shareReplay(1),
-            );
-
-        return stream.pipe(
-            take(1),
-            map(() => stream),
-        );
-    }
-}

packages/admin-ui/src/lib/order/src/providers/routing/order.guard.ts

@@ -1,13 +1,23 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
-import { DataService } from '@vendure/admin-ui/core';
-import { EMPTY, Observable } from 'rxjs';
-import { map, mergeMapTo, tap } from 'rxjs/operators';
+import { DataService, GetOrderStateQuery, GetOrderStateQueryVariables } from '@vendure/admin-ui/core';
+import { gql } from 'apollo-angular';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export const GET_ORDER_STATE = gql`
+    query GetOrderState($id: ID!) {
+        order(id: $id) {
+            id
+            state
+        }
+    }
+`;
 
 @Injectable({
     providedIn: 'root',
 })
-export class OrderGuard  {
+export class OrderGuard {
     constructor(private dataService: DataService, private router: Router) {}
 
     canActivate(
@@ -15,6 +25,7 @@ export class OrderGuard  {
         state: RouterStateSnapshot,
     ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
         const isDraft = state.url.includes('orders/draft');
+        const isModifying = state.url.includes('/modify');
         const id = route.paramMap.get('id');
         if (isDraft) {
             if (id === 'create') {
@@ -29,7 +40,20 @@ export class OrderGuard  {
                 return true;
             }
         } else {
-            return true;
+            return (
+                this.dataService
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    .query<GetOrderStateQuery, GetOrderStateQueryVariables>(GET_ORDER_STATE, { id: id! })
+                    .single$.pipe(
+                        map(({ order }) => {
+                            if (order?.state === 'Modifying' && !isModifying) {
+                                return this.router.parseUrl(`/orders/${id}/modify`);
+                            } else {
+                                return true;
+                            }
+                        }),
+                    )
+            );
         }
     }
 }

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

@@ -44,5 +44,4 @@ export * from './components/simple-item-list/simple-item-list.component';
 export * from './order.module';
 export * from './order.routes';
 export * from './providers/order-transition.service';
-export * from './providers/routing/order-resolver';
 export * from './providers/routing/order.guard';