Shelf In Navigation Update on Shared Components

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-edit/pickup-shelf-edit.component.html

@@ -1,3 +1,6 @@
 <ng-container *ngIf="items$ | async; let items">
-  <shared-goods-in-out-order-edit (navigation)="navigateToDetailsPage($event)" [items]="items"></shared-goods-in-out-order-edit>
+  <shared-goods-in-out-order-edit
+    (navigation)="store.processId ? navigateToShelfOutDetailsPage($event) : navigateToShelfInDetailsPage($event)"
+    [items]="items"
+  ></shared-goods-in-out-order-edit>
 </ng-container>

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-edit/pickup-shelf-edit.component.ts

@@ -1,14 +1,15 @@
 import { AsyncPipe, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { PickupShelfIOService } from '@domain/pickup-shelf';
 import { SharedGoodsInOutOrderEditModule } from '@shared/components/goods-in-out';
-import { PickUpShelfOutNavigationService } from '@shared/services';
+import { PickUpShelfOutNavigationService, PickupShelfInNavigationService } from '@shared/services';
 import { DBHOrderItemListItemDTO } from '@swagger/oms';
 import { UiMessageModalComponent, UiModalService } from '@ui/modal';
 import { Observable, combineLatest } from 'rxjs';
 import { first, map, switchMap, tap, withLatestFrom } from 'rxjs/operators';
+import { PickupShelfStore } from '../../store';
 
 @Component({
   selector: 'page-pickup-shelf-edit',
@@ -20,11 +21,7 @@ import { first, map, switchMap, tap, withLatestFrom } from 'rxjs/operators';
   imports: [ReactiveFormsModule, NgIf, AsyncPipe, SharedGoodsInOutOrderEditModule],
 })
 export class PickUpShelfEditComponent implements OnInit {
-  get processId() {
-    return +this._activatedRoute.snapshot.parent.data.processId;
-  }
-
-  processId$ = this._activatedRoute.parent.data.pipe(map((params) => +params.processId));
+  store = inject(PickupShelfStore);
 
   orderItemProcessingStatus$ = this._activatedRoute.params.pipe(map((params) => params?.orderItemProcessingStatus || undefined));
 
@@ -56,7 +53,8 @@ export class PickUpShelfEditComponent implements OnInit {
   constructor(
     private _activatedRoute: ActivatedRoute,
     private _router: Router,
-    private _navigation: PickUpShelfOutNavigationService,
+    private _shelfOutNavigation: PickUpShelfOutNavigationService,
+    private _shelfInNavigation: PickupShelfInNavigationService,
     private _uiModal: UiModalService,
     private _pickupShelfIOService: PickupShelfIOService
   ) {}
@@ -76,7 +74,7 @@ export class PickUpShelfEditComponent implements OnInit {
     }
   }
 
-  async navigateToDetailsPage({ options }: { options?: { processingStatus?: number } }) {
+  async navigateToShelfOutDetailsPage({ options }: { options?: { processingStatus?: number } }) {
     const orderId = (await this.items$.pipe(first()).toPromise())?.find((_) => true)?.orderId;
     const compartmentCode = this._activatedRoute?.snapshot?.params?.compartmentCode;
     const orderNumber = this._activatedRoute?.snapshot?.params?.orderNumber;
@@ -84,8 +82,28 @@ export class PickUpShelfEditComponent implements OnInit {
       ? options.processingStatus
       : this._activatedRoute.snapshot.params.orderItemProcessingStatus;
     await this._router.navigate(
-      this._navigation.detailRoute({
-        processId: this.processId,
+      this._shelfOutNavigation.detailRoute({
+        processId: this.store.processId,
+        item: {
+          orderId: orderId ? Number(orderId) : undefined,
+          orderNumber,
+          compartmentCode,
+          processingStatus,
+        },
+      }).path,
+      { queryParamsHandling: 'preserve' }
+    );
+  }
+
+  async navigateToShelfInDetailsPage({ options }: { options?: { processingStatus?: number } }) {
+    const orderId = (await this.items$.pipe(first()).toPromise())?.find((_) => true)?.orderId;
+    const compartmentCode = this._activatedRoute?.snapshot?.params?.compartmentCode;
+    const orderNumber = this._activatedRoute?.snapshot?.params?.orderNumber;
+    const processingStatus = options?.processingStatus
+      ? options.processingStatus
+      : this._activatedRoute.snapshot.params.orderItemProcessingStatus;
+    await this._router.navigate(
+      this._shelfInNavigation.detailRoute({
         item: {
           orderId: orderId ? Number(orderId) : undefined,
           orderNumber,

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-filter/pickup-shelf-filter.component.html

@@ -6,7 +6,7 @@
         *ngIf="showFilterClose$ | async"
         (click)="showFilter.emit()"
         class="text-black p-4 outline-none border-none bg-transparent"
-        [routerLink]="closeFilterRoute"
+        [routerLink]="processId ? closeShelfOutFilterRoute : closeShelfInFilterRoute"
         queryParamsHandling="preserve"
       >
         <shared-icon icon="close" [size]="25"></shared-icon>

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-filter/pickup-shelf-filter.component.ts

@@ -5,7 +5,7 @@ import { AsyncPipe, NgIf } from '@angular/common';
 import { EnvironmentService } from '@core/environment';
 import { map } from 'rxjs/operators';
 import { ActivatedRoute, RouterLink } from '@angular/router';
-import { PickUpShelfOutNavigationService } from '@shared/services';
+import { PickUpShelfOutNavigationService, PickupShelfInNavigationService } from '@shared/services';
 import { IconModule } from '@shared/components/icon';
 import { UiSpinnerModule } from '@ui/spinner';
 import { Observable } from 'rxjs';
@@ -49,15 +49,15 @@ export class PickupShelfFilterComponent {
     return this.detailsStore?.order;
   }
 
-  get closeFilterRoute() {
+  get closeShelfOutFilterRoute() {
     if (!this.order) {
       if (this.sideOutlet === 'search') {
-        return this._navigation.defaultRoute({ processId: this.processId }).path;
+        return this._shelfOutNavigation.defaultRoute({ processId: this.processId }).path;
       } else if (this.primaryOutlet === 'list/filter' || this.sideOutlet === 'list') {
-        return this._navigation.listRoute({ processId: this.processId }).path;
+        return this._shelfOutNavigation.listRoute({ processId: this.processId }).path;
       }
     } else {
-      return this._navigation.detailRoute({
+      return this._shelfOutNavigation.detailRoute({
         processId: this.processId,
         item: {
           orderId: this.order?.id,
@@ -69,12 +69,32 @@ export class PickupShelfFilterComponent {
     }
   }
 
+  get closeShelfInFilterRoute() {
+    if (!this.order) {
+      if (this.sideOutlet === 'search') {
+        return this._shelfInNavigation.defaultRoute().path;
+      } else if (this.primaryOutlet === 'list/filter' || this.sideOutlet === 'list') {
+        return this._shelfInNavigation.listRoute().path;
+      }
+    } else {
+      return this._shelfInNavigation.detailRoute({
+        item: {
+          orderId: this.order?.id,
+          orderNumber: this.order?.orderNumber,
+          compartmentCode: this.detailsStore?.compartmentCode,
+          processingStatus: this.detailsStore?.processingStatus,
+        },
+      }).path;
+    }
+  }
+
   @Output() showFilter = new EventEmitter<void>();
 
   constructor(
     private _environment: EnvironmentService,
     private _activatedRoute: ActivatedRoute,
-    private _navigation: PickUpShelfOutNavigationService
+    private _shelfOutNavigation: PickUpShelfOutNavigationService,
+    private _shelfInNavigation: PickupShelfInNavigationService
   ) {}
 
   resetFilter() {

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-history/pickup-shelf-history.component.html

@@ -1,6 +1,11 @@
 <div class="bg-[#f5f7fa]">
   <div class="bg-white px-7 flex flex-col py-5">
-    <button *ngIf="historyItem$ | async; let item" class="self-end" type="button" (click)="navigateToDetailsPage(item)">
+    <button
+      *ngIf="historyItem$ | async; let item"
+      class="self-end"
+      type="button"
+      (click)="store.processId ? navigateToShelfOutDetailsPage(item) : navigateToShelfInDetailsPage(item)"
+    >
       <shared-icon icon="close" [size]="26"></shared-icon>
     </button>
 

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-history/pickup-shelf-history.component.ts

@@ -1,14 +1,15 @@
 import { AsyncPipe, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DomainOmsService } from '@domain/oms';
 import { PickupShelfIOService } from '@domain/pickup-shelf';
 import { SharedHistoryListModule } from '@shared/components/history';
 import { IconModule } from '@shared/components/icon';
-import { PickUpShelfOutNavigationService } from '@shared/services';
+import { PickUpShelfOutNavigationService, PickupShelfInNavigationService } from '@shared/services';
 import { DBHOrderItemListItemDTO } from '@swagger/oms';
 import { Observable, combineLatest } from 'rxjs';
 import { map, shareReplay, switchMap, take } from 'rxjs/operators';
+import { PickupShelfStore } from '../../store';
 
 @Component({
   selector: 'page-pickup-shelf-history',
@@ -20,11 +21,7 @@ import { map, shareReplay, switchMap, take } from 'rxjs/operators';
   imports: [AsyncPipe, NgIf, SharedHistoryListModule, IconModule],
 })
 export class PickUpShelfHistoryComponent {
-  get processId() {
-    return +this._activatedRoute.snapshot.parent.data.processId;
-  }
-
-  processId$ = this._activatedRoute.parent.data.pipe(map((params) => +params.processId));
+  store = inject(PickupShelfStore);
 
   compartmentCode$: Observable<string> = this._activatedRoute.params.pipe(
     map((params) => decodeURIComponent(params?.compartmentCode ?? '') || undefined)
@@ -60,15 +57,30 @@ export class PickUpShelfHistoryComponent {
   constructor(
     private _activatedRoute: ActivatedRoute,
     private _router: Router,
-    private _navigation: PickUpShelfOutNavigationService,
+    private _shelfOutNavigation: PickUpShelfOutNavigationService,
+    private _shelfInNavigation: PickupShelfInNavigationService,
     private _omsService: DomainOmsService,
     private _pickupShelfIOService: PickupShelfIOService
   ) {}
 
-  async navigateToDetailsPage(item: DBHOrderItemListItemDTO) {
+  async navigateToShelfOutDetailsPage(item: DBHOrderItemListItemDTO) {
     await this._router.navigate(
-      this._navigation.detailRoute({
-        processId: this.processId,
+      this._shelfOutNavigation.detailRoute({
+        processId: this.store.processId,
+        item: {
+          compartmentCode: item.compartmentCode,
+          orderId: item.orderId,
+          orderNumber: item.orderNumber,
+          processingStatus: item.processingStatus,
+        },
+      }).path,
+      { queryParamsHandling: 'preserve' }
+    );
+  }
+
+  async navigateToShelfInDetailsPage(item: DBHOrderItemListItemDTO) {
+    await this._router.navigate(
+      this._shelfInNavigation.detailRoute({
         item: {
           compartmentCode: item.compartmentCode,
           orderId: item.orderId,

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.ts

@@ -42,7 +42,7 @@ export class PickUpShelfListItemComponent {
 
   @Input() itemDetailsLink: any[] = [];
 
-  @Input() isItemSelectable?: boolean;
+  @Input() isItemSelectable?: boolean = undefined;
 
   @Input() selectedItem?: DBHOrderItemListItemDTO;