feat(journey): tracking/history user lib

.release-it.json

@@ -25,7 +25,8 @@
       "dist/libs/support/*.tgz",
       "dist/libs/http-url/*.tgz",
       "dist/libs/http-script/*.tgz",
-      "dist/libs/layout/*.tgz"
+      "dist/libs/layout/*.tgz",
+      "dist/libs/journey/*.tgz"
     ]
   },
   "npm": {

README.md

@@ -41,6 +41,7 @@ First check each package describe or just navigate to demo app for more informat
 | @ng-lab/http-url     | Service to define/get routes for http services      | ![npm (scoped)](https://img.shields.io/npm/v/@ng-lab/http-url.svg?color=green&style=flat)     |
 | @ng-lab/http-script  | Service to load scripts and define them on body     | ![npm (scoped)](https://img.shields.io/npm/v/@ng-lab/http-script.svg?color=green&style=flat)  |
 | @ng-lab/layout       | Create flexbox areas for any layout type            | ![npm (scoped)](https://img.shields.io/npm/v/@ng-lab/layout.svg?color=green&style=flat)       |
+| @ng-lab/journey      | Log user journey thru your app                      | ![npm (scoped)](https://img.shields.io/npm/v/@ng-lab/journey.svg?color=green&style=flat)      |
 
 #### For Development
 

angular.json

@@ -482,6 +482,38 @@
           "styleext": "scss"
         }
       }
+    },
+    "journey": {
+      "projectType": "library",
+      "root": "libs/journey",
+      "sourceRoot": "libs/journey/src",
+      "prefix": "ui",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/journey/tsconfig.lib.json",
+              "libs/journey/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!libs/journey/**"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/journey/jest.config.js",
+            "tsConfig": "libs/journey/tsconfig.spec.json",
+            "passWithNoTests": true,
+            "setupFile": "libs/journey/src/test-setup.ts"
+          }
+        }
+      },
+      "schematics": {
+        "@nrwl/angular:component": {
+          "styleext": "scss"
+        }
+      }
     }
   },
   "cli": {

apps/ng-lab-demo/src/app/app.component.html

@@ -18,11 +18,14 @@
   [width]="'300px'"
   class="ui-sidebar"
   [uiLayoutResizer]="edgeSettings"
+  [resizeMinimalWidth]="150"
+  #sidebarReferece
 >
-  <header class="ui-sidebar__header">
+  <span style="position: absolute; top: 0; right: 0; height: 20px; cursor: pointer; font-size: small;" uiLayoutExpand (collapseOutsideClick)="whenCollapse($event)" >Experimental(WIP)</span>
+  <header class="ui-sidebar__header" *ngIf="sidebarVisible">
     <h3 class="ui-sidebar__title">Packages</h3>
   </header>
-  <nav class="ui-sidebar__nav">
+  <nav class="ui-sidebar__nav" *ngIf="sidebarVisible">
     <ul>
       <li>
         <a>Configurator</a>
@@ -48,6 +51,9 @@ <h3 class="ui-sidebar__title">Packages</h3>
       <li>
         <a>Support</a>
       </li>
+      <li>
+        <a>Journey</a>
+      </li>
     </ul>
   </nav>
 </ui-layout-area>

apps/ng-lab-demo/src/app/app.component.ts

@@ -1,16 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { EDGES } from '@ng-lab/layout';
 import { Snippet } from './components/code/code-snipet';
 
 import { ResponsiveChangeInterface } from '@ng-lab/responsive';
 import { of, Observable } from 'rxjs';
+import { Router, RouterEvent, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
+import { TrackingNavigation } from '@ng-lab/journey';
 
 @Component({
   selector: 'ng-lab-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'ng-lab-demo';
 
   edgeSettings = {
@@ -41,7 +43,29 @@ export class AppComponent {
 
   responsive$: Observable<ResponsiveChangeInterface>;
 
+  sidebarVisible = true;
+
+  constructor(
+    private router: Router
+  ) {}
+
   public handlerResponsiveChange(change: ResponsiveChangeInterface): void {
     this.responsive$ = of(change);
   }
+
+  public whenCollapse(visible: boolean) {
+    this.sidebarVisible = !visible;
+  }
+
+  ngOnInit() {
+    this.router.events.subscribe((event: RouterEvent) => {
+      this.navigationInterceptor(event);
+    });
+  }
+
+  navigationInterceptor(event: RouterEvent) {
+    if (event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
+      TrackingNavigation(event.url);
+    }
+  }
 }

apps/ng-lab-demo/src/app/app.provision.ts

@@ -1,12 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
 
 import { HttpUrlModule } from '@ng-lab/http/url';
 import { ResponsiveModule } from '@ng-lab/responsive';
 import { ConfiguratorModule } from '@ng-lab/configurator';
 import { LayoutModule } from '@ng-lab/layout';
 import { MarkdownModule } from 'ngx-markdown';
+import { JourneyModule, TrackingHttpRequest } from '@ng-lab/journey';
 
 import { CONFIG } from './app.config';
 import { CodeModule } from './components/code/code.module';
@@ -20,14 +21,18 @@ import { CodeModule } from './components/code/code.module';
     ResponsiveModule,
     CodeModule,
     LayoutModule,
-    MarkdownModule.forRoot({ loader: HttpClient })
+    MarkdownModule.forRoot({ loader: HttpClient }),
+    JourneyModule.forRoot(true)
   ],
   exports: [
     ConfiguratorModule,
     HttpUrlModule,
     ResponsiveModule,
     CodeModule,
     LayoutModule
+  ],
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: TrackingHttpRequest, multi: true }
   ]
 })
 export class ApplicationProvisionModule {}