Customer Order Splitscreen Navigation Update

2025-12-31 09:37:15 +01:00 · 2023-04-06 16:12:29 +02:00
parent bff10cb2ff
commit 2144ec838c
5 changed files with 206 additions and 35 deletions
--- a/apps/page/customer-order/src/lib/customer-order-details/customer-order-details.component.ts
+++ b/apps/page/customer-order/src/lib/customer-order-details/customer-order-details.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
+import { EnvironmentService } from '@core/environment';
 import { DomainCustomerOrderService, DomainGoodsService, DomainOmsService, OrderItemsContext } from '@domain/oms';
 import { ComponentStore, tapResponse } from '@ngrx/component-store';
 import { ListResponseArgsOfOrderItemListItemDTO, OrderItemListItemDTO, OrderItemProcessingStatusValue } from '@swagger/oms';
@@ -63,13 +64,18 @@ export class CustomerOrderDetailsComponent extends ComponentStore<CustomerOrderD

  private _onDestroy$ = new Subject();

+  get isTablet() {
+    return this._environment.isTablet();
+  }
+
  constructor(
    private _activatedRoute: ActivatedRoute,
    private _domainGoodsInService: DomainCustomerOrderService,
    private _omsService: DomainOmsService,
    private _breadcrumb: BreadcrumbService,
    private _router: Router,
-    private _uiModal: UiModalService
+    private _uiModal: UiModalService,
+    private _environment: EnvironmentService
  ) {
    super({
      fetching: false,
@@ -187,19 +193,37 @@ export class CustomerOrderDetailsComponent extends ComponentStore<CustomerOrderD
  }

  navigateToEditPage(orderItem: OrderItemListItemDTO) {
-    this._router.navigate([this.getEditPath(orderItem)], {
-      queryParams: { buyerNumber: orderItem.buyerNumber, archive: this.archive },
-    });
+    if (this.isTablet) {
+      this._router.navigate([this.getEditPath(orderItem)], {
+        queryParams: { buyerNumber: orderItem.buyerNumber, archive: this.archive },
+      });
+    } else {
+      this._router.navigate(this.getEditPathDesktop(orderItem), {
+        queryParamsHandling: 'preserve',
+        queryParams: { buyerNumber: orderItem.buyerNumber, archive: this.archive },
+      });
+    }
  }

  navigateToDetailsPage(item: OrderItemListItemDTO) {
-    this._router.navigate([this.getDetailsPath(item)], {
-      queryParams: { buyerNumber: item.buyerNumber, archive: this.archive },
-    });
+    if (this.isTablet) {
+      this._router.navigate([this.getDetailsPath(item)], {
+        queryParams: { buyerNumber: item.buyerNumber, archive: this.archive },
+      });
+    } else {
+      this._router.navigate(this.getDetailsPathDesktop(item), {
+        queryParamsHandling: 'preserve',
+        queryParams: { buyerNumber: item.buyerNumber, archive: this.archive },
+      });
+    }
  }

  navigateToLandingPage() {
-    this._router.navigate([`/kunde/${this.processId}/order`]);
+    if (this.isTablet) {
+      this._router.navigate([`/kunde/${this.processId}/order`]);
+    } else {
+      this._router.navigate(['/kunde', this.processId, 'order', { outlets: { main: null, left: 'search', right: 'filter' } }]);
+    }
  }

  async actionHandled(handler: { orderItemsContext: OrderItemsContext; command: string; navigation: 'details' | 'main' | 'reservation' }) {
@@ -218,9 +242,65 @@ export class CustomerOrderDetailsComponent extends ComponentStore<CustomerOrderD
      : `/kunde/${this.processId}/order/details/order/${encodeURIComponent(item?.orderNumber)}/${item?.processingStatus}`;
  }

+  getDetailsPathDesktop(item: OrderItemListItemDTO) {
+    return item?.compartmentCode
+      ? [
+          '/kunde',
+          this.processId,
+          'order',
+          {
+            outlets: {
+              main: null,
+              left: 'results',
+              right: ['details', 'compartment', encodeURIComponent(item?.compartmentCode), item?.processingStatus],
+            },
+          },
+        ]
+      : [
+          '/kunde',
+          this.processId,
+          'order',
+          {
+            outlets: {
+              main: null,
+              left: 'results',
+              right: ['details', 'order', encodeURIComponent(item?.orderNumber), item?.processingStatus],
+            },
+          },
+        ];
+  }
+
  getEditPath(item: OrderItemListItemDTO) {
    return item?.compartmentCode
      ? `/kunde/${this.processId}/order/details/compartment/${encodeURIComponent(item?.compartmentCode)}/${item?.processingStatus}/edit`
      : `/kunde/${this.processId}/order/details/order/${encodeURIComponent(item?.orderNumber)}/${item?.processingStatus}/edit`;
  }
+
+  getEditPathDesktop(item: OrderItemListItemDTO) {
+    return item?.compartmentCode
+      ? [
+          '/kunde',
+          this.processId,
+          'order',
+          {
+            outlets: {
+              main: null,
+              left: 'results',
+              right: ['details', 'compartment', encodeURIComponent(item?.compartmentCode), item?.processingStatus, 'edit'],
+            },
+          },
+        ]
+      : [
+          '/kunde',
+          this.processId,
+          'order',
+          {
+            outlets: {
+              main: null,
+              left: 'results',
+              right: ['details', 'order', encodeURIComponent(item?.orderNumber), item?.processingStatus, 'edit'],
+            },
+          },
+        ];
+  }
 }
--- a/apps/page/customer-order/src/lib/customer-order-edit/customer-order-edit.component.ts
+++ b/apps/page/customer-order/src/lib/customer-order-edit/customer-order-edit.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
+import { EnvironmentService } from '@core/environment';
 import { DomainCustomerOrderService, DomainGoodsService, DomainOmsService } from '@domain/oms';
 import { OrderItemListItemDTO } from '@swagger/oms';
 import { UiMessageModalComponent, UiModalService } from '@ui/modal';
@@ -51,12 +52,17 @@ export class CustomerOrderEditComponent implements OnInit {
    shareReplay()
  );

+  get isTablet() {
+    return this._environment.isTablet();
+  }
+
  constructor(
    private _activatedRoute: ActivatedRoute,
    private _breadcrumb: BreadcrumbService,
    private _domainGoodsInService: DomainCustomerOrderService,
    private _router: Router,
-    private _uiModal: UiModalService
+    private _uiModal: UiModalService,
+    private _environment: EnvironmentService
  ) {}

  ngOnInit() {
@@ -87,14 +93,52 @@ export class CustomerOrderEditComponent implements OnInit {
    const processingStatus = options?.processingStatus ? options.processingStatus : this._activatedRoute.snapshot.params.processingStatus;
    const buyerNumber = this._activatedRoute.snapshot.queryParams.buyerNumber;
    const archive = this._activatedRoute.snapshot.queryParams.archive;
-    compartmentCode
-      ? this._router.navigate(
-          [`/kunde/${this.processId}/order/details/compartment/${encodeURIComponent(compartmentCode)}/${processingStatus}`],
-          { queryParams: { buyerNumber, archive } }
-        )
-      : this._router.navigate([`/kunde/${this.processId}/order/details/order/${encodeURIComponent(orderNumber)}/${processingStatus}`], {
-          queryParams: { buyerNumber, archive },
-        });
+
+    if (this.isTablet) {
+      compartmentCode
+        ? this._router.navigate(
+            [`/kunde/${this.processId}/order/details/compartment/${encodeURIComponent(compartmentCode)}/${processingStatus}`],
+            { queryParams: { buyerNumber, archive } }
+          )
+        : this._router.navigate([`/kunde/${this.processId}/order/details/order/${encodeURIComponent(orderNumber)}/${processingStatus}`], {
+            queryParams: { buyerNumber, archive },
+          });
+    } else {
+      compartmentCode
+        ? this._router.navigate(
+            [
+              '/kunde',
+              this.processId,
+              'order',
+              {
+                outlets: {
+                  main: null,
+                  left: 'results',
+                  right: ['details', 'compartment', encodeURIComponent(compartmentCode), processingStatus],
+                },
+              },
+            ],
+            { queryParamsHandling: 'preserve', queryParams: { buyerNumber, archive } }
+          )
+        : this._router.navigate(
+            [
+              '/kunde',
+              this.processId,
+              'order',
+              {
+                outlets: {
+                  main: null,
+                  left: 'results',
+                  right: ['details', 'order', encodeURIComponent(orderNumber), processingStatus],
+                },
+              },
+            ],
+            {
+              queryParamsHandling: 'preserve',
+              queryParams: { buyerNumber, archive },
+            }
+          );
+    }
  }

  openModalIfItemsHaveDifferentCustomers(items: OrderItemListItemDTO[]) {
--- a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts
+++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts
@@ -11,6 +11,7 @@ import { OrderItemsContext } from '@domain/oms';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
 import { UiScrollContainerComponent } from '@ui/scroll-container';
 import { UiFilter } from '@ui/filter';
+import { EnvironmentService } from '@core/environment';

 export interface CustomerOrderSearchResultsState {
  selectedOrderItemSubsetIds: number[];
@@ -80,13 +81,18 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer

  scrollTo: number;

+  get isTablet() {
+    return this._environment.isTablet();
+  }
+
  constructor(
    private _goodsOutSearchStore: CustomerOrderSearchStore,
    private _router: Router,
    private _activatedRoute: ActivatedRoute,
    private _breadcrumb: BreadcrumbService,
    private _commandService: CommandService,
-    private _modal: UiModalService
+    private _modal: UiModalService,
+    private _environment: EnvironmentService
  ) {
    super({
      selectedOrderItemSubsetIds: [],
@@ -263,19 +269,63 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
    const compartmentCode = orderItem.compartmentCode;
    const archive = !!this._goodsOutSearchStore.filter?.getQueryParams()?.main_archive || false;

-    if (compartmentCode) {
-      this._router.navigate([`/kunde/${processId}/order/details/compartment/${encodeURIComponent(compartmentCode)}/${processingStatus}`], {
-        queryParams: {
-          buyerNumber: orderItem.buyerNumber,
-          archive,
-        },
-      });
+    if (this.isTablet) {
+      if (compartmentCode) {
+        this._router.navigate(
+          [`/kunde/${processId}/order/details/compartment/${encodeURIComponent(compartmentCode)}/${processingStatus}`],
+          {
+            queryParams: {
+              buyerNumber: orderItem.buyerNumber,
+              archive,
+            },
+          }
+        );
+      } else {
+        this._router.navigate([`/kunde/${processId}/order/details/order/${encodeURIComponent(orderNumber)}/${processingStatus}`], {
+          queryParams: {
+            archive,
+          },
+        });
+      }
    } else {
-      this._router.navigate([`/kunde/${processId}/order/details/order/${encodeURIComponent(orderNumber)}/${processingStatus}`], {
-        queryParams: {
-          archive,
-        },
-      });
+      if (compartmentCode) {
+        this._router.navigate(
+          [
+            '/kunde',
+            processId,
+            'order',
+            {
+              outlets: {
+                main: null,
+                left: 'results',
+                right: ['details', 'compartment', encodeURIComponent(compartmentCode), processingStatus],
+              },
+            },
+          ],
+          {
+            queryParamsHandling: 'preserve',
+            queryParams: {
+              buyerNumber: orderItem.buyerNumber,
+              archive,
+            },
+          }
+        );
+      } else {
+        this._router.navigate(
+          [
+            '/kunde',
+            processId,
+            'order',
+            { outlets: { main: null, left: 'results', right: ['details', 'order', encodeURIComponent(orderNumber), processingStatus] } },
+          ],
+          {
+            queryParamsHandling: 'preserve',
+            queryParams: {
+              archive,
+            },
+          }
+        );
+      }
    }
  }

--- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details.component.scss
+++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details.component.scss
@@ -11,10 +11,7 @@
 }

 .goods-in-out-order-details-action-wrapper {
-  @apply fixed bottom-28 inline-flex flex-row-reverse flex-wrap justify-center items-center;
-  width: 80%;
-  left: 50%;
-  transform: translateX(-50%);
+  @apply fixed bottom-28 left-[50%] inline-flex desktop:flex translate-x-[-50%] desktop:translate-x-[15%] w-[80%] desktop:w-fit flex-row-reverse flex-wrap justify-center items-center;

  .cta-action {
    @apply border-2 border-solid border-brand rounded-full py-3 px-6 font-bold text-lg outline-none self-end whitespace-nowrap m-2;
--- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-edit/goods-in-out-order-edit.component.scss
+++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-edit/goods-in-out-order-edit.component.scss
@@ -64,7 +64,7 @@ input {
 }

 .actions {
-  @apply flex justify-center items-center fixed left-0 right-0;
+  @apply flex justify-center items-center desktop:translate-x-[60%] desktop:w-fit fixed left-0 right-0 desktop:left-[unset] desktop:right-[unset];
  bottom: 110px;

  .cta-close {