From d57ce85f1f130d969b2f5f8fb346ccdd40481cf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20K=C3=B6berl?=
 <christian.koeberl@porscheinformatik.com>
Date: Wed, 5 Aug 2020 02:40:24 +0200
Subject: [PATCH] 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 +-
 src/clr-addons/history/history-pinned.ts   |  6 +-----
 src/clr-addons/history/history.html        |  2 +-
 src/clr-addons/history/history.ts          |  1 +
 src/dev/src/app/app.component.html         | 18 ++++++++++-------
 src/dev/src/app/app.component.ts           | 12 ++++++++---
 src/dev/src/app/app.module.ts              |  7 ++++---
 src/dev/src/app/route-history.service.ts   | 23 ++++++++++++++++++++++
 8 files changed, 51 insertions(+), 20 deletions(-)
 create mode 100644 src/dev/src/app/route-history.service.ts

diff --git a/src/clr-addons/history/history-pinned.html b/src/clr-addons/history/history-pinned.html
index 3a8ec4ed8..273720b1d 100644
--- a/src/clr-addons/history/history-pinned.html
+++ b/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>
diff --git a/src/clr-addons/history/history-pinned.ts b/src/clr-addons/history/history-pinned.ts
index 8f0f9227a..283ae5ab8 100644
--- a/src/clr-addons/history/history-pinned.ts
+++ b/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;
-  }
 }
diff --git a/src/clr-addons/history/history.html b/src/clr-addons/history/history.html
index b85d18a02..5be099a11 100644
--- a/src/clr-addons/history/history.html
+++ b/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}}
diff --git a/src/clr-addons/history/history.ts b/src/clr-addons/history/history.ts
index 64276978e..bac4164c4 100644
--- a/src/clr-addons/history/history.ts
+++ b/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.
diff --git a/src/dev/src/app/app.component.html b/src/dev/src/app/app.component.html
index bff6187b5..ea24eb6ad 100644
--- a/src/dev/src/app/app.component.html
+++ b/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>
diff --git a/src/dev/src/app/app.component.ts b/src/dev/src/app/app.component.ts
index 023802a48..fc0b8672e 100644
--- a/src/dev/src/app/app.component.ts
+++ b/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;
   }
diff --git a/src/dev/src/app/app.module.ts b/src/dev/src/app/app.module.ts
index dda7556a9..0219a7fa5 100644
--- a/src/dev/src/app/app.module.ts
+++ b/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 {}
diff --git a/src/dev/src/app/route-history.service.ts b/src/dev/src/app/route-history.service.ts
new file mode 100644
index 000000000..3767e929c
--- /dev/null
+++ b/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',
+        })
+      );
+  }
+}