Breadcrumb Management & History State Management on Status Change (WiP)

2025-12-31 09:37:15 +01:00 · 2020-09-03 12:12:16 +02:00
parent cc69a0a24e
commit a3c53096ad
3 changed files with 188 additions and 44 deletions
--- a/apps/sales/src/app/modules/shelf/pages/shelf-edit-compartment/shelf-edit-compartment.component.ts
+++ b/apps/sales/src/app/modules/shelf/pages/shelf-edit-compartment/shelf-edit-compartment.component.ts
@@ -1,11 +1,28 @@
-import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, from } from 'rxjs';
-import { filter, map, distinctUntilChanged, shareReplay, take, withLatestFrom, first } from 'rxjs/operators';
+import {
+  filter,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  take,
+  withLatestFrom,
+  first,
+} from 'rxjs/operators';
 import { isNullOrUndefined } from 'util';
 import { ShelfEditFormService } from '../../services';
 import { FormGroup, FormArray } from '@angular/forms';
-import { ProcessingStatusPipe, PickUpDateOptionsToDisplayValuesPipe, ProcessingStatusOptionsPipe } from '../../pipes';
+import {
+  ProcessingStatusPipe,
+  PickUpDateOptionsToDisplayValuesPipe,
+  ProcessingStatusOptionsPipe,
+} from '../../pipes';
 import { DatePipe } from '@angular/common';
 import { ShelfNavigationService } from '../../shared/services';
 import { OrderItemProcessingStatusValue } from '@swagger/oms/lib';
@@ -46,7 +63,10 @@ export class ShelfEditCompartmentComponent implements OnInit {

  get processingStatus$() {
    return this.activatedRoute.params.pipe(
-      map((params) => Number(params.processingStatus) as OrderItemProcessingStatusValue),
+      map(
+        (params) =>
+          Number(params.processingStatus) as OrderItemProcessingStatusValue
+      ),
      distinctUntilChanged(),
      shareReplay()
    );
@@ -57,24 +77,35 @@ export class ShelfEditCompartmentComponent implements OnInit {
  }

  async loadCompartmentAndInitForm() {
-    const compartmentCode = await this.compartmentCode$.pipe(take(1)).toPromise();
-    const processingStatus = await this.processingStatus$.pipe(take(1)).toPromise();
+    const compartmentCode = await this.compartmentCode$
+      .pipe(take(1))
+      .toPromise();
+    const processingStatus = await this.processingStatus$
+      .pipe(take(1))
+      .toPromise();

    this.populateFormData(compartmentCode, processingStatus);
  }

  async onSubmit() {
-    console.log(this.form.valid);
-
-    const compartmentCode = await this.compartmentCode$.pipe(first()).toPromise();
-    const processingStatus = await this.processingStatus$.pipe(first()).toPromise();
-    const submitResult = await this.formService.submit(this.form, processingStatus);
+    const compartmentCode = await this.compartmentCode$
+      .pipe(first())
+      .toPromise();
+    const processingStatus = await this.processingStatus$
+      .pipe(first())
+      .toPromise();
+    const submitResult = await this.formService.submit(
+      this.form,
+      processingStatus
+    );

    let newValues;
    if (submitResult) {
      newValues = {
-        compartmentCode: this.form.get('compartmentCode').value || compartmentCode,
-        processingStatus: this.form.get('processingStatus').value || processingStatus,
+        compartmentCode:
+          this.form.get('compartmentCode').value || compartmentCode,
+        processingStatus:
+          this.form.get('processingStatus').value || processingStatus,
      };

      this.shelfNavigationService.navigateBackToDetails(newValues, {
@@ -85,16 +116,24 @@ export class ShelfEditCompartmentComponent implements OnInit {
  }

  onAbortEdit() {
-    return this.compartmentCode$.pipe(take(1), withLatestFrom(this.processingStatus$)).subscribe(([compartmentCode, processingStatus]) =>
-      this.shelfNavigationService.navigateBackToDetails({
-        compartmentCode,
-        processingStatus,
-      })
-    );
+    return this.compartmentCode$
+      .pipe(take(1), withLatestFrom(this.processingStatus$))
+      .subscribe(([compartmentCode, processingStatus]) =>
+        this.shelfNavigationService.navigateBackToDetails({
+          compartmentCode,
+          processingStatus,
+        })
+      );
  }

-  private async populateFormData(compartmentCode: string, processingStatus: OrderItemProcessingStatusValue) {
-    this.form = await this.formService.createFormByCompartmentCode(compartmentCode, processingStatus);
+  private async populateFormData(
+    compartmentCode: string,
+    processingStatus: OrderItemProcessingStatusValue
+  ) {
+    this.form = await this.formService.createFormByCompartmentCode(
+      compartmentCode,
+      processingStatus
+    );
    this.items = this.formService.getItemsForm(compartmentCode);
    this.customerName = this.formService.getCustomerName(compartmentCode);
    this.cdr.detectChanges();
--- a/apps/sales/src/app/modules/shelf/pages/shelf-edit-order/shelf-edit-order.component.ts
+++ b/apps/sales/src/app/modules/shelf/pages/shelf-edit-order/shelf-edit-order.component.ts
@@ -1,11 +1,28 @@
-import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { FormGroup, FormArray } from '@angular/forms';
 import { ShelfEditFormService } from '../../services';
 import { ShelfNavigationService } from '../../shared/services';
-import { filter, map, distinctUntilChanged, shareReplay, take, withLatestFrom, first } from 'rxjs/operators';
+import {
+  filter,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  take,
+  withLatestFrom,
+  first,
+} from 'rxjs/operators';
 import { isNullOrUndefined } from 'util';
-import { ProcessingStatusPipe, PickUpDateOptionsToDisplayValuesPipe, ProcessingStatusOptionsPipe } from '../../pipes';
+import {
+  ProcessingStatusPipe,
+  PickUpDateOptionsToDisplayValuesPipe,
+  ProcessingStatusOptionsPipe,
+} from '../../pipes';
 import { DatePipe } from '@angular/common';
 import { OrderItemProcessingStatusValue } from '@swagger/oms/lib';
 import { from } from 'rxjs';
@@ -45,7 +62,10 @@ export class ShelfEditOrderComponent implements OnInit {

  get processingStatus$() {
    return this.activatedRoute.params.pipe(
-      map((params) => Number(params.processingStatus) as OrderItemProcessingStatusValue),
+      map(
+        (params) =>
+          Number(params.processingStatus) as OrderItemProcessingStatusValue
+      ),
      distinctUntilChanged(),
      shareReplay()
    );
@@ -57,7 +77,9 @@ export class ShelfEditOrderComponent implements OnInit {

  async loadOrderNumberAndInitForm() {
    const orderNumber = await this.orderNumber$.pipe(take(1)).toPromise();
-    const processingStatus = await this.processingStatus$.pipe(take(1)).toPromise();
+    const processingStatus = await this.processingStatus$
+      .pipe(take(1))
+      .toPromise();
    console.log('loadOrderNumberAndInitForm', {
      orderNumber,
      processingStatus,
@@ -67,15 +89,27 @@ export class ShelfEditOrderComponent implements OnInit {

  async onSubmit() {
    const orderNumber = await this.orderNumber$.pipe(first()).toPromise();
-    const processingStatus = await this.processingStatus$.pipe(first()).toPromise();
+    const processingStatus = await this.processingStatus$
+      .pipe(first())
+      .toPromise();

-    const submitResult = await this.formService.submit(this.form, processingStatus);
+    const submitResult = await this.formService.submit(
+      this.form,
+      processingStatus
+    );

    if (submitResult) {
-      this.shelfNavigationService.navigateBackToDetails({
-        orderNumber,
-        processingStatus: this.form.get('processingStatus').value || processingStatus,
-      });
+      this.shelfNavigationService.navigateBackToDetails(
+        {
+          orderNumber,
+          processingStatus:
+            this.form.get('processingStatus').value || processingStatus,
+        },
+        {
+          orderNumber,
+          processingStatus,
+        }
+      );
    }
  }

@@ -91,8 +125,14 @@ export class ShelfEditOrderComponent implements OnInit {
      );
  }

-  private async populateFormData(orderNumber: string, processingStatus: OrderItemProcessingStatusValue) {
-    this.form = await this.formService.createFormByOrderNumber(orderNumber, processingStatus);
+  private async populateFormData(
+    orderNumber: string,
+    processingStatus: OrderItemProcessingStatusValue
+  ) {
+    this.form = await this.formService.createFormByOrderNumber(
+      orderNumber,
+      processingStatus
+    );
    console.log({ form: this.form });

    this.items = this.formService.getItemsForm(orderNumber);
--- a/apps/sales/src/app/modules/shelf/shared/services/shelf-navigation.service.ts
+++ b/apps/sales/src/app/modules/shelf/shared/services/shelf-navigation.service.ts
@@ -7,6 +7,7 @@ import {
  PopLastBreadcrumbs,
  ClearBreadcrumbs,
  DeleteBreadcrumbsForProcess,
+  DeleteLastPreviousPath,
 } from 'apps/sales/src/app/core/store/actions/breadcrumb.actions';
 import {
  ChangeCurrentRoute,
@@ -21,16 +22,23 @@ import { Process } from 'apps/sales/src/app/core/models/process.model';
 export class ShelfNavigationService {
  constructor(private store: Store, private router: Router) {}

-  navigateToDetails(order: {
-    orderNumber?: string;
-    compartmentCode?: string;
-    processingStatus?: number;
-  }) {
+  async navigateToDetails(
+    order: {
+      orderNumber?: string;
+      compartmentCode?: string;
+      processingStatus?: number;
+    },
+    options: { replaceLastVisited: boolean } = { replaceLastVisited: false }
+  ) {
    this.createTab();
    const path = this.getDetailsPath(order);
    const breadcrumb = this.getDetailsBreadcrumb(order);

-    this.navigateToRoute(path, breadcrumb);
+    await this.navigateToRoute(path, breadcrumb);
+
+    if (options.replaceLastVisited) {
+      this.removePreviousPath();
+    }
  }

  navigateToEdit(order: {
@@ -127,7 +135,10 @@ export class ShelfNavigationService {
    );
  }

-  private navigateToRoute(route: string, breadcrumbName: string) {
+  private async navigateToRoute(
+    route: string,
+    breadcrumbName: string
+  ): Promise<boolean> {
    this.store.dispatch(
      new AddBreadcrumb(
        <Breadcrumb>{
@@ -138,7 +149,7 @@ export class ShelfNavigationService {
      )
    );
    this.store.dispatch(new ChangeCurrentRoute(route));
-    this.router.navigate([route]);
+    return this.router.navigate([route]);
  }

  public navigateBackToDetails(
@@ -153,6 +164,8 @@ export class ShelfNavigationService {
      processingStatus?: number;
    }
  ) {
+    const replaceLastVisited = this.urlParamsHaveChanged(data, previous);
+    console.log({ replaceLastVisited, data, previous });
    this.store.dispatch(new PopLastBreadcrumbs(this.getEditBreadCrumb()));

    if (previous) {
@@ -160,7 +173,12 @@ export class ShelfNavigationService {
        new PopLastBreadcrumbs(this.getDetailsBreadcrumb(previous))
      );
    }
-    this.navigateToDetails(data);
+
+    if (replaceLastVisited) {
+      this.removePreviousPath();
+    }
+
+    this.navigateToDetails(data, { replaceLastVisited });
  }

  public updateDetails(
@@ -180,7 +198,11 @@ export class ShelfNavigationService {
        new PopLastBreadcrumbs(this.getDetailsBreadcrumb(previous))
      );
    }
-    this.navigateToDetails(data);
+    this.navigateToDetails(data, { replaceLastVisited: true });
+  }
+
+  private removePreviousPath() {
+    this.store.dispatch(new DeleteLastPreviousPath());
  }

  private getResultListBreadcrumb(
@@ -250,4 +272,47 @@ export class ShelfNavigationService {
      )
    );
  }
+
+  private urlParamsHaveChanged(
+    current: {
+      orderNumber?: string;
+      compartmentCode?: string;
+      processingStatus?: number;
+    },
+    previous?: {
+      orderNumber?: string;
+      compartmentCode?: string;
+      processingStatus?: number;
+    }
+  ): boolean {
+    if (!previous) {
+      return false;
+    }
+
+    if (
+      current.orderNumber &&
+      previous.orderNumber &&
+      current.orderNumber !== previous.orderNumber
+    ) {
+      return true;
+    }
+
+    if (
+      current.compartmentCode &&
+      previous.compartmentCode &&
+      current.compartmentCode !== previous.compartmentCode
+    ) {
+      return true;
+    }
+
+    if (
+      current.processingStatus &&
+      previous.processingStatus &&
+      current.processingStatus !== previous.processingStatus
+    ) {
+      return true;
+    }
+
+    return false;
+  }
 }