From c4ae7c7432ac4254eebe222e7f9c37d0452f1acc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20H=C3=A4hnlein?= Date: Wed, 11 Mar 2020 14:40:46 +0100 Subject: [PATCH] refactor: routing & breadcrumb of account orders (history/detail) --- .../core/store/orders/orders.effects.spec.ts | 29 +++++++++++++ src/app/core/store/orders/orders.effects.ts | 41 +++++++++++++++++-- .../account-order-history-page.module.ts | 12 +++++- src/app/pages/account/account-page.module.ts | 10 ----- 4 files changed, 78 insertions(+), 14 deletions(-) diff --git a/src/app/core/store/orders/orders.effects.spec.ts b/src/app/core/store/orders/orders.effects.spec.ts index 12d7c7b043..e4a4ed855e 100644 --- a/src/app/core/store/orders/orders.effects.spec.ts +++ b/src/app/core/store/orders/orders.effects.spec.ts @@ -4,6 +4,7 @@ import { TestBed, fakeAsync, tick } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { provideMockActions } from '@ngrx/effects/testing'; import { Action, Store, combineReducers } from '@ngrx/store'; +import { TranslateModule } from '@ngx-translate/core'; import { cold, hot } from 'jest-marbles'; import { RouteNavigation } from 'ngrx-router'; import { Observable, noop, of, throwError } from 'rxjs'; @@ -53,6 +54,7 @@ describe('Orders Effects', () => { children: [{ path: 'receipt', component: DummyComponent }, { path: 'payment', component: DummyComponent }], }, ]), + TranslateModule.forRoot(), ngrxTesting({ reducers: { ...coreReducers, @@ -411,4 +413,31 @@ describe('Orders Effects', () => { expect(effects.resetOrdersAfterLogout$).toBeObservable(expected$); }); }); + + describe('setOrderBreadcrumb$', () => { + beforeEach(() => { + store$.dispatch(new orderActions.LoadOrdersSuccess({ orders })); + store$.dispatch(new orderActions.SelectOrder({ orderId: orders[0].id })); + }); + + it('should set the breadcrumb of the selected order', done => { + actions$ = of(new RouteNavigation({ path: 'any', params: { orderId: orders[0].id } })); + effects.setOrderBreadcrumb$.subscribe(action => { + expect(action.payload).toMatchInlineSnapshot(` + Object { + "breadcrumbData": Array [ + Object { + "key": "account.order_history.link", + "link": "/account/orders", + }, + Object { + "text": "account.orderdetails.breadcrumb - 00000001", + }, + ], + } + `); + done(); + }); + }); + }); }); diff --git a/src/app/core/store/orders/orders.effects.ts b/src/app/core/store/orders/orders.effects.ts index 39764ca73d..a0bd8bd648 100644 --- a/src/app/core/store/orders/orders.effects.ts +++ b/src/app/core/store/orders/orders.effects.ts @@ -2,19 +2,33 @@ import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import { Actions, Effect, ofType } from '@ngrx/effects'; import { Store, select } from '@ngrx/store'; +import { TranslateService } from '@ngx-translate/core'; import { mapToParam, ofRoute } from 'ngrx-router'; import { race } from 'rxjs'; -import { concatMap, filter, map, mapTo, mergeMap, switchMap, take, tap, withLatestFrom } from 'rxjs/operators'; +import { + concatMap, + debounceTime, + filter, + map, + mapTo, + mergeMap, + switchMap, + switchMapTo, + take, + tap, + withLatestFrom, +} from 'rxjs/operators'; import { ProductCompletenessLevel } from 'ish-core/models/product/product.model'; import { OrderService } from 'ish-core/services/order/order.service'; import { ContinueCheckoutWithIssues, LoadBasket } from 'ish-core/store/checkout/basket'; import { LoadProductIfNotLoaded } from 'ish-core/store/shopping/products'; import { UserActionTypes, getLoggedInUser } from 'ish-core/store/user'; +import { SetBreadcrumbData } from 'ish-core/store/viewconf'; import { mapErrorToAction, mapToPayload, mapToPayloadProperty, whenTruthy } from 'ish-core/utils/operators'; import * as ordersActions from './orders.actions'; -import { getOrder, getSelectedOrderId } from './orders.selectors'; +import { getOrder, getSelectedOrder, getSelectedOrderId } from './orders.selectors'; @Injectable() export class OrdersEffects { @@ -22,7 +36,8 @@ export class OrdersEffects { private actions$: Actions, private orderService: OrderService, private router: Router, - private store: Store<{}> + private store: Store<{}>, + private translateService: TranslateService ) {} /** @@ -216,4 +231,24 @@ export class OrdersEffects { ofType(UserActionTypes.LogoutUser), mapTo(new ordersActions.ResetOrders()) ); + + @Effect() + setOrderBreadcrumb$ = this.actions$.pipe( + ofRoute(), + mapToParam('orderId'), + whenTruthy(), + switchMapTo(this.store.pipe(select(getSelectedOrder))), + whenTruthy(), + debounceTime(0), + withLatestFrom(this.translateService.get('account.orderdetails.breadcrumb')), + map( + ([order, x]) => + new SetBreadcrumbData({ + breadcrumbData: [ + { key: 'account.order_history.link', link: '/account/orders' }, + { text: `${x} - ${order.documentNo}` }, + ], + }) + ) + ); } diff --git a/src/app/pages/account-order-history/account-order-history-page.module.ts b/src/app/pages/account-order-history/account-order-history-page.module.ts index 9bffe3aa4f..b4c3a6adbd 100644 --- a/src/app/pages/account-order-history/account-order-history-page.module.ts +++ b/src/app/pages/account-order-history/account-order-history-page.module.ts @@ -5,9 +5,19 @@ import { SharedModule } from 'ish-shared/shared.module'; import { AccountOrderHistoryPageComponent } from './account-order-history-page.component'; -const routes: Routes = [{ path: '', component: AccountOrderHistoryPageComponent }]; +const routes: Routes = [ + { path: '', component: AccountOrderHistoryPageComponent }, + { + path: ':orderId', + data: { + breadcrumbData: [{ key: 'account.order_history.link', link: '/account/orders' }], + }, + loadChildren: () => import('../account-order/account-order-page.module').then(m => m.AccountOrderPageModule), + }, +]; @NgModule({ imports: [RouterModule.forChild(routes), SharedModule], + exports: [RouterModule], declarations: [AccountOrderHistoryPageComponent], }) export class AccountOrderHistoryPageModule {} diff --git a/src/app/pages/account/account-page.module.ts b/src/app/pages/account/account-page.module.ts index 99f20ecb50..9d0959df73 100644 --- a/src/app/pages/account/account-page.module.ts +++ b/src/app/pages/account/account-page.module.ts @@ -27,16 +27,6 @@ const accountPageRoutes: Routes = [ m => m.AccountOrderHistoryPageModule ), }, - { - path: 'orders/:orderId', - data: { - breadcrumbData: [ - { key: 'account.order_history.link', link: '/account/orders' }, - { key: 'account.orderdetails.breadcrumb' }, - ], - }, - loadChildren: () => import('../account-order/account-order-page.module').then(m => m.AccountOrderPageModule), - }, { path: 'payment', data: { breadcrumbData: [{ key: 'account.payment.link' }] },