Feature/loading module (#7)

* created loading module and added simulated delay option to mock api

* Added readme to loading module and some refactoring of mockapi module

* Fixed module forroot optional providers breaking everything :(

* naughty fixed the failing test... I know but you try getting these things done when you've got a 6 month crawling around your feet!

Author: rogue-elephant

package.json

@@ -18,8 +18,10 @@
     "build:ci": "npm run clean && npm run test && npm run build:prod",
     "deploy:github-pages": "ng deploy --base-href=/angular-component-library/ --name=\"rogue-elephant\" [email protected]",
     "start:proxy:mock:server": "concurrently --kill-others \"npm run mock:server\" \"npm run start:proxy\"",
-    "package:mock-api": "ng-packagr -p ./src/app/shared/interceptors/mock-api/package.json",
-    "package:publish:mock-api": "npm publish ./dist/packages/@chapichapi/mock-api --access public"
+    "package:mock-api": "ng-packagr -p ./src/app/modules/mock-api/package.json",
+    "package:publish:mock-api": "npm publish ./dist/packages/@chapichapi/mock-api --access public",
+    "package:loading": "ng-packagr -p ./src/app/modules/loading/package.json",
+    "package:publish:loading": "npm publish ./dist/packages/@chapichapi/loading --access public"
   },
   "private": false,
   "dependencies": {

src/app/app.component.html

@@ -17,7 +17,7 @@
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
-    <app-loader></app-loader>
+    <chapichapi-loader></chapichapi-loader>
     <div id="app-main">
       <router-outlet></router-outlet>
     </div>

src/app/app.component.scss

@@ -4,8 +4,8 @@
   background: #228899;
   #app-title {
     font-size: 23px;
-    letter-spacing: 4px;
-    position: relative;
+    letter-spacing: 2px;
+    font-weight: 100;
     margin-right: $default-spacing;
   }
 
@@ -15,6 +15,7 @@
       color: #fff;
       text-decoration: none;
       position: relative;
+      font-weight: 100;
 
       &:before {
         content: '';
@@ -27,6 +28,7 @@
       }
 
       &.active, &:hover{
+        font-weight: normal;
         &:before {
           width: 100%;
         }

src/app/app.component.spec.ts

@@ -20,16 +20,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'angular-component-library'`, () => {
+  it(`should have as title 'ACL'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('angular-component-library');
+    expect(app.title).toEqual('ACL');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('#app-title').textContent).toContain('angular-component-library');
+    expect(compiled.querySelector('#app-title').textContent).toContain('ACL');
   });
 });

src/app/app.component.ts

@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  public title = 'angular-component-library';
+  public title = 'ACL';
   public sideNavOpen = false;
 
   public toggleSideNav = () => this.sideNavOpen = !this.sideNavOpen;

src/app/app.module.ts

@@ -26,15 +26,13 @@ import {
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { TimeagoModule } from "ngx-timeago";
 
-import { LoaderComponent } from "./shared/loader/loader.component";
-import { LoadingService } from "./shared/services/loading.service";
-import { LoadingInterceptor } from "./shared/interceptors/loading.interceptor";
 import { ApiErrorInterceptor } from "./shared/interceptors/api-error.interceptor";
 import { NotificationsService } from "./shared/services/notifications.service";
-import { MockApiModule } from "./shared/interceptors/mock-api/mock-api.module";
+import { MockApiModule } from "./modules/mock-api/mock-api.module";
 import { ChapiChapiCardModule } from './modules/card/card.module';
-import { IMockInterceptorData } from './shared/interceptors/mock-api/IMockInterceptorData';
+import { IMockInterceptorData } from './modules/mock-api/models/IMockInterceptorData';
 import { environment } from 'src/environments/environment';
+import { LoadingModule } from './modules/loading/loading.module';
 
 const mockApi : IMockInterceptorData[] = [
   {
@@ -55,8 +53,7 @@ const mockApi : IMockInterceptorData[] = [
 @NgModule({
   declarations: [
     AppComponent,
-    ComponentsComponent,
-    LoaderComponent,
+    ComponentsComponent
   ],
   imports: [
     BrowserModule,
@@ -79,16 +76,14 @@ const mockApi : IMockInterceptorData[] = [
     MatDatepickerModule,
     MatNativeDateModule,
     MatSnackBarModule,
-    MatProgressSpinnerModule,
     TimeagoModule.forRoot(),
     ChapiChapiCardModule,
-    MockApiModule.forRoot(mockApi, environment.mock)
+    LoadingModule.forRoot(),
+    MockApiModule.forRoot(mockApi, environment.mock, 3000)
   ],
   providers: [
-    LoadingService,
     NotificationsService,
     { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 4500 } },
-    { provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: ApiErrorInterceptor, multi: true }
   ],
   bootstrap: [AppComponent],

src/app/modules/loading/README.md

@@ -0,0 +1,23 @@
+# LoadingModule
+This package provides a module that can be added to your angular module to intercept API calls and display a loading spinner on the page.
+
+Simply add the following references:
+```
+import { LoadingModule } from '@chapichapi/ngx.loading';;
+```
+
+And then in the imports section:
+```
+LoadingModule.forRoot()
+```
+
+You can turn off the interceptor if you don't want http calls to automatically show the loader by specifying:
+```
+LoadingModule.forRoot(false)
+```
+
+Then place the loader component inside your app's HTML:
+
+```
+<chapichapi-loader></chapichapi-loader>
+```