feat(docs): Added history and back button to demonstrate replaceUrl

Author: Airblader

projects/ngqp-demo/src/app/demo-browser/demo-browser.component.html

@@ -1,8 +1,13 @@
 <div class="demo-browser__toolbar">
+    <button class="demo-browser__button" title="{{ routerAdapter.history.length }} previous routes"
+            (click)="routerAdapter.goBack()" [disabled]="routerAdapter.history.length === 0">
+        <fa-icon [icon]="faArrowLeft" size="sm"></fa-icon>
+    </button>
+
     <div class="demo-browser__url">
         <span class="demo-browser__url__domain" (click)="urlInput.focus()">https://www.app.io</span>
         <input #urlInput type="text" class="demo-browser__url__input"
-               [ngModel]="routerAdapter.url" (keyup.enter)="updateQueryParams($event.target.value)" />
+               [ngModel]="routerAdapter.url" (keyup.enter)="routerAdapter.navigateToQueryParamString($event.target.value)" />
     </div>
 </div>
 

projects/ngqp-demo/src/app/demo-browser/demo-browser.component.scss

@@ -32,6 +32,10 @@
         padding: 4px 8px;
     }
 
+    &__button {
+        flex-grow: 0;
+    }
+
     &__url {
         flex-grow: 1;
 
@@ -80,4 +84,33 @@
         display: flex;
         justify-content: space-between;
     }
+}
+
+button.demo-browser__button {
+    @include btn-reset();
+    outline: 0;
+    cursor: pointer;
+    margin-right: 8px;
+
+    width: 24px;
+    height: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: transparent;
+    border-radius: 50%;
+
+    &:not(:disabled) {
+        &:hover {
+            background: #e0e0e0;
+        }
+
+        &:active {
+            background: #bdbdbd;
+        }
+    }
+
+    &:disabled {
+        color: #9e9e9e;
+    }
 }

projects/ngqp-demo/src/app/demo-browser/demo-browser.component.ts

@@ -1,9 +1,10 @@
 import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
 import { Params } from '@angular/router';
 import { Subject } from 'rxjs';
-import { NGQP_ROUTER_ADAPTER, QueryParamGroup, RouterAdapter } from '@ngqp/core';
-import { TestRouterAdapter } from '../test-router-adapter.service';
 import { takeUntil } from 'rxjs/operators';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { NGQP_ROUTER_ADAPTER, QueryParamGroup } from '@ngqp/core';
+import { TestRouterAdapter } from '../test-router-adapter.service';
 
 @Component({
     selector: 'demo-browser',
@@ -15,10 +16,10 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class DemoBrowserComponent implements OnInit, OnDestroy {
 
+    public faArrowLeft = faArrowLeft;
+
     @Input()
-    public set initialQueryParams(value: string) {
-        this.updateQueryParams(value);
-    }
+    public initialQueryParams: string;
 
     @Input()
     public group: QueryParamGroup;
@@ -28,7 +29,7 @@ export class DemoBrowserComponent implements OnInit, OnDestroy {
 
     private destroy$ = new Subject<void>();
 
-    constructor(@Inject(NGQP_ROUTER_ADAPTER) public routerAdapter: RouterAdapter) {
+    constructor(@Inject(NGQP_ROUTER_ADAPTER) public routerAdapter: TestRouterAdapter) {
     }
 
     public ngOnInit() {
@@ -38,26 +39,13 @@ export class DemoBrowserComponent implements OnInit, OnDestroy {
                 this.lastChange = JSON.stringify(value);
             });
         }
+
+        this.routerAdapter.navigateToQueryParamString(this.initialQueryParams);
     }
 
     public ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
     }
 
-    public updateQueryParams(value: string) {
-        const params: Params = {};
-
-        const searchParams = new URLSearchParams(value);
-        const it = (<any>searchParams).keys();
-        let current = it.next();
-        while (!current.done) {
-            const paramName = current.value;
-            params[ paramName ] = searchParams.getAll(paramName);
-            current = it.next();
-        }
-
-        return this.routerAdapter.navigate(params);
-    }
-
 }

projects/ngqp-demo/src/app/test-router-adapter.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { convertToParamMap, ParamMap, Params } from '@angular/router';
 import { ReplaySubject } from 'rxjs';
 import { RouterAdapter } from '@ngqp/core';
+import { RouterAdapterOptions } from '../../../ngqp/core/src/lib/router-adapter/router-adapter.interface';
 
 @Injectable()
 export class TestRouterAdapter implements RouterAdapter {
@@ -10,25 +11,63 @@ export class TestRouterAdapter implements RouterAdapter {
     public readonly queryParamMap = this._queryParamMap.asObservable();
 
     public url: string;
+    public history: string[] = [];
 
     private _params: Params;
 
-    constructor() {
-        this.params = {};
-        this.emitQueryParamMap();
-    }
+    public navigate(queryParams: Params, extras: RouterAdapterOptions = {}): Promise<boolean> {
+        const previousUrl = this.url;
 
-    public navigate(queryParams: Params): Promise<boolean> {
         const newParams = {
             ...this.params,
             ...queryParams,
         };
 
         this.params = newParams;
+        if (previousUrl && extras.replaceUrl !== true) {
+            this.history.push(previousUrl);
+        }
+
         this.emitQueryParamMap();
         return Promise.resolve(true);
     }
 
+    public navigateToQueryParamString(value: string) {
+        const params: Params = {};
+
+        const searchParams = new URLSearchParams(value);
+        const it = (<any>searchParams).keys();
+        let current = it.next();
+        while (!current.done) {
+            const paramName = current.value;
+            params[ paramName ] = searchParams.getAll(paramName);
+            current = it.next();
+        }
+
+        return this.navigate(params);
+    }
+
+    public goBack(): Promise<boolean> {
+        if (this.history.length === 0) {
+            return Promise.resolve(false);
+        }
+
+        // Get the previous URL
+        const previous = this.history.pop();
+
+        // We need this to not be a "queryParamsHandling: merge" navigation,
+        // so we fake this by removing the currently set params first.
+        this._params = {};
+
+        const result = this.navigateToQueryParamString(previous);
+
+        // Since this navigation added another state to the history, we
+        // have to remove it again
+        this.history.pop();
+
+        return result;
+    }
+
     private set params(params: Params) {
         this._params = params;