EDELIVERY-11590 SMP UI Improvements Breadcrumbs

Refactor existing code.

smp-angular/src/app/window/breadcrumb/breadcrumb-item/breadcrumb-item.component.html

-<a
-  class="smp-breadcrumb-item"
+<a *ngIf="clickable" class="smp-breadcrumb-item"
    (click)="triggerClickEvent()" [matTooltip]="description">
+  <ng-container [ngTemplateOutlet]="content"></ng-container>
+</a>
+
+<div *ngIf="!clickable" class="smp-breadcrumb-item non-clickable">
+  <ng-container [ngTemplateOutlet]="content"></ng-container>
+</div>
+
+<ng-template #content>
   <div class="smp-breadcrumb-arrow top" [ngClass]="{'smp-breadcrumb-item-selected': value.selected}"></div>
   <div class="smp-breadcrumb-arrow bottom" [ngClass]="{'smp-breadcrumb-item-selected': value.selected}"></div>
-  <div class="smp-breadcrumb-content" >
+  <div class="smp-breadcrumb-content">
     <mat-icon *ngIf="icon" style="vertical-align: middle;">{{icon}}</mat-icon>
     <span>{{name}}</span>
   </div>
-</a>
+</ng-template>

smp-angular/src/app/window/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts

@@ -3,7 +3,7 @@ import {NavigationNode} from "../../sidenav/navigation-model.service";
 
 
 /**
- * Top page navigation bar  Breadcrumb-  side navigation panel of the DomiSMP. The component shows all tools/pages according to user role and permissions
+ * Top page navigation bar  Breadcrumbs - side navigation panel of the DomiSMP. The component shows all tools/pages according to user role and permissions
  *
  * @author Joze Rihtarsic
  * @since 5.0
@@ -18,23 +18,23 @@ export class BreadcrumbItemComponent {
   @Output() onClickEvent: EventEmitter<NavigationNode> = new EventEmitter();
   @Input() value : NavigationNode;
 
-
-  constructor() {
-  }
-
-  get icon(){
+  get icon() {
     return this.value.icon;
   }
-  get name(){
+
+  get name() {
     return this.value.name;
   }
 
-  get description(){
+  get description() {
     return this.value.code;
   }
 
   triggerClickEvent() {
-    this.onClickEvent.emit(this.value);
+    this.clickable && this.onClickEvent.emit(this.value);
   }
 
+  get clickable(): boolean {
+    return this.value.clickable;
+  }
 }

smp-angular/src/app/window/sidenav/navigation-model.service.ts

@@ -32,7 +32,6 @@ let PUBLIC_NAVIGATION_TREE: NavigationNode = {
           icon: "find_in_page",
           tooltip: "Search registered resources",
           routerLink: "search-resources",
-
         }
       ]
     }
@@ -51,6 +50,7 @@ export interface NavigationNode {
   tooltip?: string;
   routerLink?: string;
   children?: NavigationNode[];
+  clickable?: boolean;
   selected?: boolean;
   transient?: boolean; // if true then node must be ignored
 }
@@ -107,8 +107,8 @@ export class NavigationService extends MatTreeNestedDataSource<NavigationNode> {
   }
 
   select(node: NavigationNode) {
-
     let targetNode = this.findLeaf(node);
+
     if (targetNode === this.selected) {
       console.log("Already selected skip");
       return
@@ -122,29 +122,53 @@ export class NavigationService extends MatTreeNestedDataSource<NavigationNode> {
       this.selected = targetNode
       this.selected.selected = true;
       this.selectedPath = this.findPathForNode(this.selected, this.rootNode);
+      this.markNodesAsClickable(this.selectedPath);
       this.selectedPathSubject.next(this.selectedPath);
-      let navigationPath: string[] = this.getNavigationPath(this.selectedPath);
-      // navigate to selected path
 
+      // navigate to selected path
+      let navigationPath: string[] = this.getNavigationPath(this.selectedPath);
       this.router.navigate(navigationPath);
     } else {
       this.selectedPathSubject.next(null);
     }
   }
 
+  private markNodesAsClickable(selectedPath: NavigationNode[]) {
+    if (selectedPath) {
+      // reset all  nodes (maybe some previously marked as non-clickable)
+      selectedPath.forEach(value => value.clickable = true);
+
+      if (selectedPath.length) {
+        let leafIndex = selectedPath.length - 1;
+
+        // mark the selected leaf as non-clickable
+        selectedPath[leafIndex].clickable = false;
+
+        // mark the parent of the first leaf in a menu as non-clickable
+        let parent = this.findParent(selectedPath[leafIndex]);
+        if (parent && parent.children && parent.children[0] == selectedPath[leafIndex]) {
+          parent.clickable = false;
+        }
+
+        // mark the root parent as non-clickable when selecting the very first leaf in a three level tree
+        let userRootLeaf = this.getDeepestLeaf(this.rootNode);
+        if (userRootLeaf == selectedPath[leafIndex] && selectedPath.length == 3) {
+          this.rootNode.clickable = false;
+        }
+      }
+    }
+  }
+
   selectPreviousNode() {
     this.select(this.previousSelected)
   }
 
-
   public reset() {
     this.rootNode = PUBLIC_NAVIGATION_TREE;
     this.data = this.rootNode.children;
     this.select(this.rootNode)
-
   }
 
-
   protected getNavigationPath(path: NavigationNode[]): string [] {
     return path.map(node => node.routerLink);
   }
@@ -159,12 +183,31 @@ export class NavigationService extends MatTreeNestedDataSource<NavigationNode> {
   }
 
   protected noTargetChildren(targetNode: NavigationNode): boolean {
-    if (!targetNode || !targetNode.children || targetNode.children.length == 0) {
-      return true;
+    return this.findSiblings(targetNode).length == 0;
+  }
+
+  protected findSiblings(node:NavigationNode): NavigationNode[] {
+    if (!node || !node.children || node.children.length == 0) {
+      return [];
+    }
+
+    return node.children.filter(node => !node.transient);
+  }
+
+  protected findParent(node: NavigationNode): NavigationNode {
+    let path = this.findPathForNode(node, this.rootNode);
+    if (path) {
+      let parentIndex = path.indexOf(node) - 1;
+      return path[parentIndex];
     }
+    return null;
+  }
 
-    let nonTransient = targetNode.children.filter(node => !node.transient);
-    return nonTransient.length == 0;
+  private getDeepestLeaf(currentNode: NavigationNode): NavigationNode {
+    if (this.noTargetChildren(currentNode)) {
+      return currentNode;
+    }
+    return this.getDeepestLeaf(currentNode.children[0]);
   }
 
   /**
@@ -235,10 +278,13 @@ export class NavigationService extends MatTreeNestedDataSource<NavigationNode> {
   }
 
   setNavigationTreeByPath(path: string[], userRootNode: NavigationNode) {
-    // find the node by the navigation
+    this.rootNode = userRootNode;
+    this.data = this.rootNode?.children;
+    this.selectStartNode(path, userRootNode);
+  }
 
+  private selectStartNode(path: string[], userRootNode: NavigationNode) {
     let startNode = userRootNode;
-
     for (let index in path) {
       let pathSegment = path[index];
       // the first node is empty - skip all empty nodes
@@ -249,18 +295,13 @@ export class NavigationService extends MatTreeNestedDataSource<NavigationNode> {
         }
       }
     }
-
-    this.rootNode = userRootNode;
-    this.data = this.rootNode?.children;
     this.select(startNode);
   }
 
-
   getSelectedPathObservable(): Observable<NavigationNode[]> {
     return this.selectedPathSubject.asObservable();
   }
 
-
   /** Add node as child of parent */
   public add(node: NavigationNode, parent: NavigationNode) {
     // add root node
@@ -362,9 +403,11 @@ export class NavigationService extends MatTreeNestedDataSource<NavigationNode> {
       icon: "login",
       name: "Login",
       routerLink: "login",
+      clickable: true,
       selected: true,
       tooltip: "",
       transient: true,
     }
   }
+
 }