fix(history): use links in pinned history, fix dropdown position

- Pinned history should use default links (using href).
- History dropdown menu should have a configurable position with 'bottom-right' as the default

src/clr-addons/history/history-pinned.html

@@ -2,7 +2,7 @@
   <ol class="history">
     <ng-container *ngFor="let historyItem of historyElements">
       <li *ngIf="historyItem.url" class="history-item">
-        <a (click)="select(historyItem)">{{historyItem.title}}</a>
+        <a [href]="historyItem.url">{{historyItem.title}}</a>
       </li>
     </ng-container>
   </ol>

src/clr-addons/history/history-pinned.ts

@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { ClrHistoryModel } from './history-model.interface';
 import { ClrHistoryService } from './history.service';
 import { Subscription } from 'rxjs';
@@ -46,8 +46,4 @@ export class ClrHistoryPinned implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.settingsSubscription.unsubscribe();
   }
-
-  select(history: ClrHistoryModel): void {
-    window.location.href = history.url;
-  }
 }

src/clr-addons/history/history.html

@@ -3,7 +3,7 @@
     <clr-icon shape="history" size="24"></clr-icon>
     <clr-icon shape="caret down" size="12"></clr-icon>
   </button>
-  <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
+  <clr-dropdown-menu [clrPosition]="position" *clrIfOpen>
     <label class="dropdown-header" aria-hidden="true">{{dropdownHeader}}</label>
     <button type="button" clrDropdownItem *ngFor="let history of historyElements" (click)="select(history)">
       {{history.title}}

src/clr-addons/history/history.ts

@@ -21,6 +21,7 @@ export class ClrHistory implements OnInit {
   @Input('clrDropdownUnpin') dropdownUnpin = 'Unpin History';
   @Input('clrHideLast') hideLast: true;
   @Input('clrDomain') domain: string;
+  @Input('clrPosition') position = 'bottom-right';
 
   /**
    * The array of history elements to be displayed.

src/dev/src/app/app.component.html

@@ -17,9 +17,9 @@
         <a class="nav-link" href="#"><span class="nav-text">Menu2</span></a>
         <clr-main-nav-group clrTitle="Main Nav Group" routerLinkActive="active">
           <a class="nav-link" routerLink="/cards" routerLinkActive="active" clrMainNavGroupItem>Cards</a>
-          <a class="nav-link" routerLink="/view-edit-section" routerLinkActive="active" clrMainNavGroupItem
-            >ViewEdit Section</a
-          >
+          <a class="nav-link" routerLink="/view-edit-section" routerLinkActive="active" clrMainNavGroupItem>
+            ViewEdit Section
+          </a>
           <a class="nav-link" href="#" onClick="return false;" clrMainNavGroupItem>Submenu 3 3</a>
         </clr-main-nav-group>
         <clr-main-nav-group clrTitle="Main Nav Group 2" routerLinkActive="active">
@@ -42,13 +42,17 @@
       </clr-dropdown>
     </div>
   </clr-header>
+  <clr-history-pinned [clrUsername]="'me'" [clrContext]="{ tenantId: '1' }"></clr-history-pinned>
   <div class="content-header">
     <clr-back-button></clr-back-button>
     <h2>Content Header</h2>
-    <clr-button-group class="command-bar" [clrMenuPosition]="'bottom-right'">
-      <clr-button>Command 1</clr-button>
-      <clr-button [clrInMenu]="true">Command2</clr-button>
-    </clr-button-group>
+    <div class="command-bar">
+      <clr-history [clrUsername]="'me'" [clrContext]="{ tenantId: '1' }"></clr-history>
+      <clr-button-group [clrMenuPosition]="'bottom-right'">
+        <clr-button>Command 1</clr-button>
+        <clr-button [clrInMenu]="true">Command2</clr-button>
+      </clr-button-group>
+    </div>
   </div>
   <my-app-content-container class="content-container"></my-app-content-container>
 </clr-main-container>

src/dev/src/app/app.component.ts

@@ -3,13 +3,14 @@
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-import { Component, PLATFORM_ID, Inject } from '@angular/core';
+import { Component, PLATFORM_ID, Inject, OnInit } from '@angular/core';
 import { Route } from '@angular/router';
 import { APP_ROUTES } from './app.routing';
 import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { RouteHistoryService } from './route-history.service';
 
 @Component({ selector: 'app-root', templateUrl: './app.component.html' })
-export class AppComponent {
+export class AppComponent implements OnInit {
   public routes: Route[] = APP_ROUTES;
   linkRef: HTMLLinkElement;
 
@@ -21,7 +22,8 @@ export class AppComponent {
 
   constructor(
     @Inject(DOCUMENT) private document: Document,
-    @Inject(PLATFORM_ID) private platformId: Record<string, any>
+    @Inject(PLATFORM_ID) private platformId: Record<string, any>,
+    private routeHistoryService: RouteHistoryService
   ) {
     if (isPlatformBrowser(this.platformId)) {
       this.linkRef = this.document.createElement('link');
@@ -31,6 +33,10 @@ export class AppComponent {
     }
   }
 
+  ngOnInit(): void {
+    this.routeHistoryService.init();
+  }
+
   setTheme(theme: { href: string }): void {
     this.linkRef.href = theme.href;
   }

src/dev/src/app/app.module.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -8,16 +8,17 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ClarityModule } from '@clr/angular';
-import { ClrAddonsModule, ClrNotificationService } from '@porscheinformatik/clr-addons';
+import { ClrAddonsModule, ClrHistoryService, ClrNotificationService } from '@porscheinformatik/clr-addons';
 import { AppComponent } from './app.component';
 import { ROUTING } from './app.routing';
 import { AppContentContainerComponent } from './content-container.component';
 import { LandingComponent } from './landing.component';
+import { RouteHistoryService } from './route-history.service';
 
 @NgModule({
   declarations: [AppComponent, LandingComponent, AppContentContainerComponent],
   imports: [BrowserAnimationsModule, CommonModule, FormsModule, ClarityModule, ClrAddonsModule, ROUTING],
   bootstrap: [AppComponent],
-  providers: [ClrNotificationService],
+  providers: [ClrNotificationService, ClrHistoryService, RouteHistoryService],
 })
 export class AppModule {}

src/dev/src/app/route-history.service.ts

@@ -0,0 +1,23 @@
+import { NavigationStart, Router, RouterEvent } from '@angular/router';
+import { ClrHistoryService } from '@porscheinformatik/clr-addons';
+import { filter } from 'rxjs/operators';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class RouteHistoryService {
+  constructor(private router: Router, private historyService: ClrHistoryService) {}
+
+  init(): void {
+    this.router.events
+      .pipe(filter((event): event is NavigationStart => event instanceof NavigationStart))
+      .subscribe((event: RouterEvent) =>
+        this.historyService.addHistoryEntry({
+          context: { tenantId: '1' },
+          pageName: event.url.substr(1),
+          title: event.url.substr(1),
+          url: event.url,
+          username: 'me',
+        })
+      );
+  }
+}