fix(admin-ui): Fix routing & display of aggregate orders

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

@@ -122,13 +122,14 @@
             <tr class="surcharge" *ngFor="let surcharge of order.surcharges">
                 <td class="align-middle name left" colspan="2">{{ surcharge.description }}</td>
                 <td class="align-middle sku">{{ surcharge.sku }}</td>
-                <td class="align-middle" colspan="2"></td>
+                <td class="align-middle" [attr.colspan]="visibleSortedColumns.length - 4"></td>
                 <td class="align-middle total">
                     {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}
                     <div class="net-price" [title]="'order.net-price' | translate">
                         {{ surcharge.price | localeCurrency : order.currencyCode }}
                     </div>
                 </td>
+                <td><!-- column select --></td>
             </tr>
             <ng-container *ngFor="let discount of order.discounts">
                 <tr class="order-adjustment" *ngIf="discount.type !== 'OTHER'">
@@ -160,7 +161,11 @@
             </tr>
             <tr class="shipping">
                 <td class="">{{ 'order.shipping' | translate }}</td>
-                <td [attr.colspan]="visibleSortedColumns.length - 2">{{ getShippingNames(order) }}</td>
+                <td [attr.colspan]="visibleSortedColumns.length - 2">
+                    <vdr-chip *ngFor="let shippingLine of order.shippingLines" class="shipping-method-name">
+                        {{ shippingLine.shippingMethod.name }}
+                    </vdr-chip>
+                </td>
                 <td class="clr-align-middle">
                     {{ order.shippingWithTax | localeCurrency : order.currencyCode }}
                     <div class="net-price" [title]="'order.net-price' | translate">

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

@@ -146,6 +146,7 @@
 
     <vdr-page-block>
         <vdr-seller-orders-card
+            class="mb-2"
             *ngIf="order.sellerOrders.length"
             [orderId]="order.id"
         ></vdr-seller-orders-card>

packages/admin-ui/src/lib/order/src/components/order-table/order-table-mixin.scss

@@ -64,4 +64,8 @@
         width: 50px;
         height: 50px;
     }
+    .shipping-method-name {
+        font-size: var(--font-size-xs);
+        margin-right: 2px;
+    }
 }

packages/admin-ui/src/lib/order/src/components/seller-orders-card/seller-orders-card.component.html

@@ -1,22 +1,18 @@
-<div class="card">
-    <div class="card-header payment-header">
-        <div>
-            {{ 'order.seller-orders' | translate }}
+<vdr-card [title]="'order.seller-orders' | translate">
+    <div class="form-grid">
+        <div *ngFor="let order of sellerOrders$ | async">
+            <a [routerLink]="['seller-orders', order.id]" class="button-ghost mb-1"
+                >{{ order.code }} <clr-icon shape="arrow right"></clr-icon
+            ></a>
+            <vdr-labeled-data [label]="'order.state' | translate">
+                <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
+            </vdr-labeled-data>
+            <vdr-labeled-data *ngIf="getSeller(order) as seller" [label]="'common.seller' | translate">
+                {{ seller.name }}
+            </vdr-labeled-data>
+            <vdr-labeled-data *ngIf="getSeller(order) as seller" [label]="'order.total' | translate">
+                {{ order.totalWithTax | localeCurrency : order.currencyCode }}
+            </vdr-labeled-data>
         </div>
     </div>
-    <div class="card-block" *ngFor="let order of sellerOrders$ | async">
-
-        <vdr-labeled-data [label]="'common.code' | translate">
-            <a  [routerLink]="['seller-orders', order.id]">{{ order.code }}</a>
-        </vdr-labeled-data>
-        <vdr-labeled-data *ngIf="getSeller(order) as seller" [label]="'common.seller' | translate">
-            {{ seller.name }}
-        </vdr-labeled-data>
-        <vdr-labeled-data *ngIf="getSeller(order) as seller" [label]="'order.total' | translate">
-            {{ order.totalWithTax | localeCurrency:order.currencyCode }}
-        </vdr-labeled-data>
-        <vdr-labeled-data [label]="'order.state' | translate">
-            <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
-        </vdr-labeled-data>
-    </div>
-</div>
+</vdr-card>

packages/admin-ui/src/lib/order/src/components/seller-orders-card/seller-orders-card.component.scss

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

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

@@ -4,6 +4,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
     detailComponentWithResolver,
     OrderDetailQueryDocument,
+    OrderType,
     PageService,
     SharedModule,
 } from '@vendure/admin-ui/core';
@@ -116,12 +117,28 @@ export class OrderModule {
                 component: OrderDetailComponent,
                 query: OrderDetailQueryDocument,
                 entityKey: 'order',
-                getBreadcrumbs: entity => [
-                    {
-                        label: `${entity?.code}`,
-                        link: [entity?.id],
-                    },
-                ],
+                getBreadcrumbs: entity =>
+                    entity?.type !== OrderType.Seller || !entity?.aggregateOrder
+                        ? [
+                              {
+                                  label: `${entity?.code}`,
+                                  link: [entity?.id],
+                              },
+                          ]
+                        : [
+                              {
+                                  label: `${entity?.aggregateOrder?.code}`,
+                                  link: ['/orders/', entity?.aggregateOrder?.id],
+                              },
+                              {
+                                  label: _('breadcrumb.seller-orders'),
+                                  link: ['/orders/', entity?.aggregateOrder?.id],
+                              },
+                              {
+                                  label: `${entity?.code}`,
+                                  link: [entity?.id],
+                              },
+                          ],
             }),
         });
         pageService.registerPageTab({

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

@@ -50,15 +50,13 @@ export const createRoutes = (pageService: PageService): Route[] => [
     },
     {
         path: ':aggregateOrderId/seller-orders/:id',
-        component: OrderDetailComponent,
-        resolve: {
-            entity: OrderResolver,
-        },
+        component: PageComponent,
         canActivate: [OrderGuard],
-        canDeactivate: [CanDeactivateDetailGuard],
         data: {
-            breadcrumb: orderBreadcrumb,
+            locationId: 'order-detail',
+            breadcrumb: { label: _('breadcrumb.orders'), link: ['../'] },
         },
+        children: pageService.getPageTabRoutes('order-detail'),
     },
     {
         path: ':id/modify',