fix: mainNavigationMaxSubCategoriesDepth configuration with '0' fails…

… to disable main navigation hover menu (#850)
intershop · Aug 31, 2021 · 725cfb8 · 725cfb8
1 parent 30a724d
commit 725cfb8
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 35 deletions.
diff --git a/src/app/shell/header/header-navigation/header-navigation.component.html b/src/app/shell/header/header-navigation/header-navigation.component.html
@@ -1,8 +1,4 @@
 <ul class="navbar-nav main-navigation-list">
-  <ng-container *ngTemplateOutlet="categoryTemplate"></ng-container>
-</ul>
-<!--- Category Template -->
-<ng-template #categoryTemplate>
   <li
     *ngFor="let category of categories$ | async"
     #subMenu
@@ -15,11 +11,11 @@
     <a
       [routerLink]="category.url"
       [attr.data-testing-id]="category.uniqueId + '-link'"
-      [ngStyle]="{ width: !category.hasChildren ? '100%' : '' }"
+      [ngStyle]="{ width: !(0 < mainNavigationMaxSubCategoriesDepth && category.hasChildren) ? '100%' : '' }"
     >
       {{ category.name }}
     </a>
-    <ng-container *ngIf="category.hasChildren">
+    <ng-container *ngIf="0 < mainNavigationMaxSubCategoriesDepth && category.hasChildren">
       <a class="dropdown-toggle" (click)="toggleOpen(category.uniqueId)">
         <fa-icon *ngIf="isOpened(category.uniqueId); else closed" [icon]="['fas', 'minus']"></fa-icon>
         <ng-template #closed> <fa-icon [icon]="['fas', 'plus']"></fa-icon> </ng-template>
@@ -31,4 +27,4 @@
       ></ish-sub-category-navigation>
     </ng-container>
   </li>
-</ng-template>
+</ul>
diff --git a/src/app/shell/header/header-navigation/header-navigation.component.spec.ts b/src/app/shell/header/header-navigation/header-navigation.component.spec.ts
@@ -51,13 +51,9 @@ describe('Header Navigation Component', () => {
     expect(element).toMatchInlineSnapshot(`
       <ul class="navbar-nav main-navigation-list">
         <li class="dropdown">
-          <a ng-reflect-router-link="/cat/A" data-testing-id="A-link" href="/cat/A"> CAT_A </a
-          ><a class="dropdown-toggle"><fa-icon ng-reflect-icon="fas,plus"></fa-icon></a
-          ><ish-sub-category-navigation
-            ng-reflect-view="auto"
-            ng-reflect-category-unique-id="A"
-            ng-reflect-sub-categories-depth="1"
-          ></ish-sub-category-navigation>
+          <a style="width: 100%" ng-reflect-router-link="/cat/A" data-testing-id="A-link" href="/cat/A">
+            CAT_A
+          </a>
         </li>
         <li class="dropdown">
           <a style="width: 100%" ng-reflect-router-link="/cat/B" data-testing-id="B-link" href="/cat/B">

diff --git a/src/app/shell/header/header-navigation/header-navigation.component.ts b/src/app/shell/header/header-navigation/header-navigation.component.ts
@@ -1,6 +1,7 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 
+import { MAIN_NAVIGATION_MAX_SUB_CATEGORIES_DEPTH } from 'ish-core/configurations/injection-keys';
 import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
 import { NavigationCategory } from 'ish-core/models/navigation-category/navigation-category.model';
 
@@ -16,7 +17,10 @@ export class HeaderNavigationComponent implements OnInit {
 
   private openedCategories: string[] = [];
 
-  constructor(private shoppingFacade: ShoppingFacade) {}
+  constructor(
+    private shoppingFacade: ShoppingFacade,
+    @Inject(MAIN_NAVIGATION_MAX_SUB_CATEGORIES_DEPTH) public mainNavigationMaxSubCategoriesDepth: number
+  ) {}
 
   ngOnInit() {
     this.categories$ = this.shoppingFacade.navigationCategories$();

diff --git a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html
@@ -8,22 +8,22 @@
     class="main-navigation-level{{ subCategoriesDepth }}-item"
     [ngClass]="{ open: isOpened(subcategory.uniqueId) }"
   >
-    <a [routerLink]="subcategory.url" [ngStyle]="{ width: !subcategory.hasChildren ? '100%' : '' }">{{
-      subcategory.name
-    }}</a>
     <a
-      *ngIf="subcategory.hasChildren"
-      class="dropdown-toggle"
-      [ngClass]="{ 'd-none': view === 'full' }"
-      (click)="toggleOpen(subcategory.uniqueId)"
+      [routerLink]="subcategory.url"
+      [ngStyle]="{
+        width: !(subCategoriesDepth < mainNavigationMaxSubCategoriesDepth && subcategory.hasChildren) ? '100%' : ''
+      }"
+      >{{ subcategory.name }}</a
     >
-      <fa-icon *ngIf="isOpened(subcategory.uniqueId); else closed" [icon]="['fas', 'minus']"></fa-icon>
-      <ng-template #closed> <fa-icon [icon]="['fas', 'plus']"></fa-icon> </ng-template>
-    </a>
-    <ish-sub-category-navigation
-      *ngIf="subCategoriesDepth < mainNavigationMaxSubCategoriesDepth && subcategory.hasChildren"
-      [categoryUniqueId]="subcategory.uniqueId"
-      [subCategoriesDepth]="subCategoriesDepth + 1"
-    ></ish-sub-category-navigation>
+    <ng-container *ngIf="subCategoriesDepth < mainNavigationMaxSubCategoriesDepth && subcategory.hasChildren">
+      <a class="dropdown-toggle" [ngClass]="{ 'd-none': view === 'full' }" (click)="toggleOpen(subcategory.uniqueId)">
+        <fa-icon *ngIf="isOpened(subcategory.uniqueId); else closed" [icon]="['fas', 'minus']"></fa-icon>
+        <ng-template #closed> <fa-icon [icon]="['fas', 'plus']"></fa-icon> </ng-template>
+      </a>
+      <ish-sub-category-navigation
+        [categoryUniqueId]="subcategory.uniqueId"
+        [subCategoriesDepth]="subCategoriesDepth + 1"
+      ></ish-sub-category-navigation>
+    </ng-container>
   </li>
 </ul>
diff --git a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts
@@ -67,10 +67,12 @@ describe('Sub Category Navigation Component', () => {
             ng-reflect-sub-categories-depth="2"
             ><ul class="category-level2">
               <li class="main-navigation-level2-item">
-                <a ng-reflect-router-link="/CAT_A1a-catA.1.a" href="/CAT_A1a-catA.1.a">CAT_A1a</a
-                ><a class="dropdown-toggle"><fa-icon ng-reflect-icon="fas,plus"></fa-icon></a>
-              </li></ul
-          ></ish-sub-category-navigation>
+                <a style="width: 100%" ng-reflect-router-link="/CAT_A1a-catA.1.a" href="/CAT_A1a-catA.1.a"
+                  >CAT_A1a</a
+                >
+              </li>
+            </ul></ish-sub-category-navigation
+          >
         </li>
         <li class="main-navigation-level1-item">
           <a style="width: 100%" ng-reflect-router-link="/CAT_A2-catA.2" href="/CAT_A2-catA.2">CAT_A2</a>