fix: my account overview breadcrumb should not have parent / child st…

…ructure (#43)
intershop · Jan 9, 2020 · 25ce59a · 25ce59a
1 parent 34bbd04
commit 25ce59a
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/src/app/pages/account/account-navigation/account-navigation.component.html b/src/app/pages/account/account-navigation/account-navigation.component.html
@@ -1,13 +1,13 @@
 <ng-container *ngIf="!isMobileView; else mobileNavigation">
   <ul id="AccountNav" class="account-navigation list-unstyled" data-testing-id="myaccount-navigation">
-    <ng-container *ngFor="let item of navigationItems">
+    <ng-container *ngFor="let item of navigationItems; let first = first">
       <ng-container *ngIf="item.feature; else unrestricted">
         <li *ishFeature="item.feature" routerLinkActive="active">
           <a [routerLink]="item.link">{{ item.localizationKey | translate }}</a>
         </li>
       </ng-container>
       <ng-template #unrestricted>
-        <li routerLinkActive="active">
+        <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: first }">
           <a [routerLink]="item.link" [attr.data-testing-id]="item.dataTestingId">{{
             item.localizationKey | translate
           }}</a>

diff --git a/src/app/pages/account/account-navigation/account-navigation.component.ts b/src/app/pages/account/account-navigation/account-navigation.component.ts
@@ -17,7 +17,7 @@ export class AccountNavigationComponent implements OnInit, OnChanges {
    * Manages the Account Navigation items.
    */
   navigationItems: { link: string; localizationKey: string; dataTestingId?: string; feature?: string }[] = [
-    { link: '/account/overview', localizationKey: 'account.my_account.link' },
+    { link: '/account', localizationKey: 'account.my_account.link' },
     { link: '/account/orders', localizationKey: 'account.order_history.link' },
     { link: '/account/addresses', localizationKey: 'account.saved_addresses.link', dataTestingId: 'addresses-link' },
     { link: '/account/profile', localizationKey: 'account.profile.link' },

diff --git a/src/app/pages/account/account-page.module.ts b/src/app/pages/account/account-page.module.ts
@@ -37,11 +37,6 @@ const accountPageRoutes: Routes = [
         },
         loadChildren: () => import('../account-order/account-order-page.module').then(m => m.AccountOrderPageModule),
       },
-      {
-        path: 'overview',
-        data: { breadcrumbData: [{ key: 'account.overview.link' }] },
-        component: AccountOverviewPageModule.component,
-      },
       {
         path: 'profile',
         data: { breadcrumbData: [{ key: 'account.profile.link' }] },
@@ -75,8 +70,8 @@ const accountPageRoutes: Routes = [
       },
       {
         path: '',
-        pathMatch: 'full',
-        redirectTo: 'overview',
+        data: { breadcrumbData: [] },
+        component: AccountOverviewPageModule.component,
       },
     ],
   },

diff --git a/src/app/shared/components/common/breadcrumb/breadcrumb.component.html b/src/app/shared/components/common/breadcrumb/breadcrumb.component.html
@@ -13,8 +13,13 @@
     >
 
     <li *ngIf="account" class="breadcrumbs-list">
-      <a class="breadcrumbs-list-link" routerLink="/account">{{ 'account.my_account.link' | translate }}</a
-      ><span class="breadcrumb-list-separator">{{ separator }}</span>
+      <ng-container *ngIf="trail.length; else AccountOverview">
+        <a class="breadcrumbs-list-link" routerLink="/account">{{ 'account.my_account.link' | translate }}</a
+        ><span class="breadcrumb-list-separator">{{ separator }}</span>
+      </ng-container>
+      <ng-template #AccountOverview>
+        {{ 'account.my_account.link' | translate }}
+      </ng-template>
     </li>
 
     <li