purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-10-31 12:23:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added a service for the Loading Bar

Browse Source 
Added FuseLoadingBarService docs
Renamed service docs files
This commit is contained in:
Sercan Yemen 2018-07-01 14:02:14 +03:00
parent ae29f1f03d
commit 4d93b6acef
16 changed files with 252 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/@fuse/fuse.module.ts
View File

@ -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,

89
src/@fuse/services/loading-bar.service.ts Normal file
View File

@ -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);
}
}

29
src/app/layout/components/toolbar/toolbar.component.ts
View File

@ -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
this._router.events
.pipe(
filter((event) => event instanceof NavigationStart),
takeUntil(this._unsubscribeAll)
)
.subscribe((event) => {
this.showLoadingBar = true;
});
this._router.events
.pipe(
filter((event) => event instanceof NavigationEnd)
)
.subscribe((event) => {
this.showLoadingBar = false;
// Subscribe to the Fuse loading bar service
this._fuseLoadingBarService.visible
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((visible) => {
this.showLoadingBar = visible;
});
// Subscribe to the config changes

17
src/app/main/documentation/services/config/config.component.ts
View File

@ -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()
{
}
}

4
src/app/main/documentation/services/config/config.component.html → src/app/main/documentation/services/fuse-config/fuse-config.component.html
View File

@ -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 -->

0
src/app/main/documentation/services/config/config.component.scss → src/app/main/documentation/services/fuse-config/fuse-config.component.scss
View File

17
src/app/main/documentation/services/fuse-config/fuse-config.component.ts Normal file
View File

@ -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()
{
}
}

66
src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.html Normal file
View File

@ -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>

0
src/app/main/documentation/services/splash-screen/splash-screen.component.scss → src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.scss
View File

17
src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.ts Normal file
View File

@ -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()
{
}
}

6
src/app/main/documentation/services/splash-screen/splash-screen.component.html → src/app/main/documentation/services/fuse-splash-screen/fuse-splash-screen.component.html
View File

@ -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();

3
src/app/main/documentation/services/fuse-splash-screen/fuse-splash-screen.component.scss Normal file
View File

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

17
src/app/main/documentation/services/fuse-splash-screen/fuse-splash-screen.component.ts Normal file
View File

@ -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()
{
}
}

24
src/app/main/documentation/services/services.module.ts
View File

@ -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 { SplashScreenServiceDocsComponent } from 'app/main/documentation/services/splash-screen/splash-screen.component';
import { FuseConfigServiceDocsComponent } from 'app/main/documentation/services/fuse-config/fuse-config.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',
component: ConfigServiceDocsComponent
path : 'fuse-config',
component: FuseConfigServiceDocsComponent
},
{
path : 'splash-screen',
component: SplashScreenServiceDocsComponent
path : 'fuse-loading-bar',
component: FuseLoadingBarServiceDocsComponent
},
{
path : 'fuse-splash-screen',
component: FuseSplashScreenServiceDocsComponent
}
];
@NgModule({
declarations: [
ConfigServiceDocsComponent,
SplashScreenServiceDocsComponent
FuseConfigServiceDocsComponent,
FuseLoadingBarServiceDocsComponent,
FuseSplashScreenServiceDocsComponent
],
imports : [
RouterModule.forChild(routes),
@ -31,7 +37,7 @@ const routes = [
FuseSharedModule,
FuseHighlightModule
],
]
})
export class ServicesModule

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

@ -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()
{
}
}

18
src/app/navigation/navigation.ts
View File

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