Added a service for the Loading Bar

Added FuseLoadingBarService docs
Renamed service docs files

src/@fuse/fuse.module.ts

@@ -2,6 +2,7 @@ import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core
 
 import { FUSE_CONFIG, FuseConfigService } from '@fuse/services/config.service';
 import { FuseCopierService } from '@fuse/services/copier.service';
+import { FuseLoadingBarService } from '@fuse/services/loading-bar.service';
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@@ -14,6 +15,7 @@ import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.
     providers      : [
         FuseConfigService,
         FuseCopierService,
+        FuseLoadingBarService,
         FuseMatchMediaService,
         FuseMatSidenavHelperService,
         FuseNavigationService,

src/@fuse/services/loading-bar.service.ts

@@ -0,0 +1,89 @@
+import { Injectable } from '@angular/core';
+import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+
+@Injectable()
+export class FuseLoadingBarService
+{
+    // Private
+    private _visible: BehaviorSubject<boolean>;
+
+    /**
+     * Constructor
+     *
+     * @param {Router} _router
+     */
+    constructor(
+        private _router: Router
+    )
+    {
+        // Initialize the service
+        this._init();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    get visible(): Observable
+    {
+        // Return the _visible as observable
+        return this._visible.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Initialize
+     *
+     * @private
+     */
+    private _init(): void
+    {
+        // Initialize the behavior subject
+        this._visible = new BehaviorSubject(false);
+
+        // Subscribe to the router events to show/hide the loading bar
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationStart)
+            )
+            .subscribe(() => {
+                this.showLoadingBar();
+            });
+
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd)
+            )
+            .subscribe(() => {
+                this.hideLoadingBar();
+            });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Show the loading bar
+     */
+    showLoadingBar(): void
+    {
+        // Show
+        this._visible.next(true);
+    }
+
+    /**
+     * Hide the loading bar
+     */
+    hideLoadingBar(): void
+    {
+        // Hide
+        this._visible.next(false);
+    }
+}
+

src/app/layout/components/toolbar/toolbar.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 import * as _ from 'lodash';
 
@@ -9,6 +8,7 @@ import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
 import { navigation } from 'app/navigation/navigation';
+import { FuseLoadingBarService } from '@fuse/services/loading-bar.service';
 
 @Component({
     selector   : 'toolbar',
@@ -34,14 +34,14 @@ export class ToolbarComponent implements OnInit, OnDestroy
      * Constructor
      *
      * @param {FuseConfigService} _fuseConfigService
+     * @param {FuseLoadingBarService} _fuseLoadingBarService
      * @param {FuseSidebarService} _fuseSidebarService
-     * @param {Router} _router
      * @param {TranslateService} _translateService
      */
     constructor(
         private _fuseConfigService: FuseConfigService,
+        private _fuseLoadingBarService: FuseLoadingBarService,
         private _fuseSidebarService: FuseSidebarService,
-        private _router: Router,
         private _translateService: TranslateService
     )
     {
@@ -102,22 +102,11 @@ export class ToolbarComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the router events to show/hide the loading bar
+        // Subscribe to the Fuse loading bar service
-        this._router.events
+        this._fuseLoadingBarService.visible
-            .pipe(
+            .pipe(takeUntil(this._unsubscribeAll))
-                filter((event) => event instanceof NavigationStart),
+            .subscribe((visible) => {
-                takeUntil(this._unsubscribeAll)
+                this.showLoadingBar = visible;
-            )
-            .subscribe((event) => {
-                this.showLoadingBar = true;
-            });
-
-        this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd)
-            )
-            .subscribe((event) => {
-                this.showLoadingBar = false;
             });
 
         // Subscribe to the config changes

src/app/main/documentation/services/config/config.component.ts

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'config-service-docs',
-    templateUrl: './config.component.html',
-    styleUrls  : ['./config.component.scss']
-})
-export class ConfigServiceDocsComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-
-    }
-}

src/app/main/documentation/services/fuse-config/fuse-config.component.html

@@ -1,4 +1,4 @@
-<div id="config" class="page-layout simple fullwidth docs">
+<div id="fuse-config" class="page-layout simple fullwidth docs">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@@ -10,7 +10,7 @@
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Services</span>
             </div>
-            <div class="h2 mt-16">Config</div>
+            <div class="h2 mt-16">Fuse Config</div>
         </div>
     </div>
     <!-- / HEADER -->

src/app/main/documentation/services/fuse-config/fuse-config.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-config-service-docs',
+    templateUrl: './fuse-config.component.html',
+    styleUrls  : ['./fuse-config.component.scss']
+})
+export class FuseConfigServiceDocsComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+
+    }
+}

src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.html

@@ -0,0 +1,66 @@
+<div id="fuse-loading-bar" class="page-layout simple fullwidth docs">
+
+    <!-- HEADER -->
+    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <mat-icon class="secondary-text s-18">home</mat-icon>
+                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+                <span class="secondary-text">Documentation</span>
+                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+                <span class="secondary-text">Services</span>
+            </div>
+            <div class="h2 mt-16">Fuse Loading Bar</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>Loading bar</code> is a custom Fuse service that allows to have a control on the loading bar that is
+            placed in the Toolbar by default.
+        </p>
+
+        <div class="section-title">Usage</div>
+        <p class="mat-grey-200-bg py-8">
+
+            <fuse-highlight lang="typescript">
+                <textarea #source>
+
+                    export class SomeComponent implements OnInit
+                    {
+                        constructor(
+                            private _fuseLoadingBarService: FuseLoadingBarService
+                        ) {}
+
+                        ngOnInit()
+                        {
+                            // Subscribe to the Fuse loading bar service
+                            this._fuseLoadingBarService.visible
+                                .subscribe((visible) => {
+                                    this.showLoadingBar = visible;
+                            });
+                        }
+
+                        showLoadingBar()
+                        {
+                            this._fuseLoadingBarService.showLoadingBar();
+                        }
+
+                        hideLoadingBar()
+                        {
+                            this._fuseLoadingBarService.hideLoadingBar();
+                        }
+                    }
+
+                </textarea>
+            </fuse-highlight>
+
+        </p>
+
+    </div>
+
+</div>
+

src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-loading-bar-service-docs',
+    templateUrl: './fuse-loading-bar.component.html',
+    styleUrls  : ['./fuse-loading-bar.component.scss']
+})
+export class FuseLoadingBarServiceDocsComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+
+    }
+}

src/app/main/documentation/services/fuse-splash-screen/fuse-splash-screen.component.html

@@ -10,7 +10,7 @@
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Services</span>
             </div>
-            <div class="h2 mt-16">Splash Screen</div>
+            <div class="h2 mt-16">Fuse Splash Screen</div>
         </div>
     </div>
     <!-- / HEADER -->
@@ -28,13 +28,13 @@
             <fuse-highlight lang="typescript">
                 <textarea #source>
 
-                    export class SomeComponent
+                    export class SomeComponent implements OnInit
                     {
                         constructor(
                             private _fuseSplashScreenService: FuseSplashScreenService
                         ) {}
 
-                        onInit()
+                        ngOnInit()
                         {
                             this._fuseSplashScreenService.show();
 

src/app/main/documentation/services/fuse-splash-screen/fuse-splash-screen.component.scss

@@ -0,0 +1,3 @@
+:host {
+
+}

src/app/main/documentation/services/fuse-splash-screen/fuse-splash-screen.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-splash-screen-service-docs',
+    templateUrl: './fuse-splash-screen.component.html',
+    styleUrls  : ['./fuse-splash-screen.component.scss']
+})
+export class FuseSplashScreenServiceDocsComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+
+    }
+}

src/app/main/documentation/services/services.module.ts

@@ -5,24 +5,30 @@ import { MatIconModule } from '@angular/material';
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseHighlightModule } from '@fuse/components/index';
 
-import { ConfigServiceDocsComponent } from 'app/main/documentation/services/config/config.component';
+import { FuseConfigServiceDocsComponent } from 'app/main/documentation/services/fuse-config/fuse-config.component';
-import { SplashScreenServiceDocsComponent } from 'app/main/documentation/services/splash-screen/splash-screen.component';
+import { FuseLoadingBarServiceDocsComponent } from 'app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component';
+import { FuseSplashScreenServiceDocsComponent } from 'app/main/documentation/services/fuse-splash-screen/fuse-splash-screen.component';
 
 const routes = [
     {
-        path     : 'config',
+        path     : 'fuse-config',
-        component: ConfigServiceDocsComponent
+        component: FuseConfigServiceDocsComponent
     },
     {
-        path     : 'splash-screen',
+        path     : 'fuse-loading-bar',
-        component: SplashScreenServiceDocsComponent
+        component: FuseLoadingBarServiceDocsComponent
+    },
+    {
+        path     : 'fuse-splash-screen',
+        component: FuseSplashScreenServiceDocsComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        ConfigServiceDocsComponent,
+        FuseConfigServiceDocsComponent,
-        SplashScreenServiceDocsComponent
+        FuseLoadingBarServiceDocsComponent,
+        FuseSplashScreenServiceDocsComponent
     ],
     imports     : [
         RouterModule.forChild(routes),
@@ -31,7 +37,7 @@ const routes = [
 
         FuseSharedModule,
         FuseHighlightModule
-    ],
+    ]
 })
 
 export class ServicesModule

src/app/main/documentation/services/splash-screen/splash-screen.component.ts

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'splash-screen-service-docs',
-    templateUrl: './splash-screen.component.html',
-    styleUrls  : ['./splash-screen.component.scss']
-})
-export class SplashScreenServiceDocsComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-
-    }
-}

src/app/navigation/navigation.ts

@@ -1052,16 +1052,22 @@ export const navigation: FuseNavigation[] = [
                 icon    : 'import_contacts',
                 children: [
                     {
-                        id   : 'config',
+                        id   : 'fuse-config',
-                        title: 'Config',
+                        title: 'Fuse Config',
                         type : 'item',
-                        url  : '/documentation/services/config'
+                        url  : '/documentation/services/fuse-config'
                     },
                     {
-                        id   : 'splash-screen',
+                        id   : 'fuse-loading-bar',
-                        title: 'Splash Screen',
+                        title: 'Fuse Loading Bar',
                         type : 'item',
-                        url  : '/documentation/services/splash-screen'
+                        url  : '/documentation/services/fuse-loading-bar'
+                    },
+                    {
+                        id   : 'fuse-splash-screen',
+                        title: 'Fuse Splash Screen',
+                        type : 'item',
+                        url  : '/documentation/services/fuse-splash-screen'
                     }
                 ]
             }