Skip to content

Commit 368e52c

Browse files
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!
1 parent e3e8b92 commit 368e52c

26 files changed

+138
-49
lines changed

package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@
1818
"build:ci": "npm run clean && npm run test && npm run build:prod",
1919
"deploy:github-pages": "ng deploy --base-href=/angular-component-library/ --name=\"rogue-elephant\" [email protected]",
2020
"start:proxy:mock:server": "concurrently --kill-others \"npm run mock:server\" \"npm run start:proxy\"",
21-
"package:mock-api": "ng-packagr -p ./src/app/shared/interceptors/mock-api/package.json",
22-
"package:publish:mock-api": "npm publish ./dist/packages/@chapichapi/mock-api --access public"
21+
"package:mock-api": "ng-packagr -p ./src/app/modules/mock-api/package.json",
22+
"package:publish:mock-api": "npm publish ./dist/packages/@chapichapi/mock-api --access public",
23+
"package:loading": "ng-packagr -p ./src/app/modules/loading/package.json",
24+
"package:publish:loading": "npm publish ./dist/packages/@chapichapi/loading --access public"
2325
},
2426
"private": false,
2527
"dependencies": {

src/app/app.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
</mat-nav-list>
1818
</mat-sidenav>
1919
<mat-sidenav-content>
20-
<app-loader></app-loader>
20+
<chapichapi-loader></chapichapi-loader>
2121
<div id="app-main">
2222
<router-outlet></router-outlet>
2323
</div>

src/app/app.component.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
background: #228899;
55
#app-title {
66
font-size: 23px;
7-
letter-spacing: 4px;
8-
position: relative;
7+
letter-spacing: 2px;
8+
font-weight: 100;
99
margin-right: $default-spacing;
1010
}
1111

@@ -15,6 +15,7 @@
1515
color: #fff;
1616
text-decoration: none;
1717
position: relative;
18+
font-weight: 100;
1819

1920
&:before {
2021
content: '';
@@ -27,6 +28,7 @@
2728
}
2829

2930
&.active, &:hover{
31+
font-weight: normal;
3032
&:before {
3133
width: 100%;
3234
}

src/app/app.component.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,16 @@ describe('AppComponent', () => {
2020
expect(app).toBeTruthy();
2121
});
2222

23-
it(`should have as title 'angular-component-library'`, () => {
23+
it(`should have as title 'ACL'`, () => {
2424
const fixture = TestBed.createComponent(AppComponent);
2525
const app = fixture.componentInstance;
26-
expect(app.title).toEqual('angular-component-library');
26+
expect(app.title).toEqual('ACL');
2727
});
2828

2929
it('should render title', () => {
3030
const fixture = TestBed.createComponent(AppComponent);
3131
fixture.detectChanges();
3232
const compiled = fixture.nativeElement;
33-
expect(compiled.querySelector('#app-title').textContent).toContain('angular-component-library');
33+
expect(compiled.querySelector('#app-title').textContent).toContain('ACL');
3434
});
3535
});

src/app/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
66
styleUrls: ['./app.component.scss']
77
})
88
export class AppComponent {
9-
public title = 'angular-component-library';
9+
public title = 'ACL';
1010
public sideNavOpen = false;
1111

1212
public toggleSideNav = () => this.sideNavOpen = !this.sideNavOpen;

src/app/app.module.ts

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,13 @@ import {
2626
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
2727
import { TimeagoModule } from "ngx-timeago";
2828

29-
import { LoaderComponent } from "./shared/loader/loader.component";
30-
import { LoadingService } from "./shared/services/loading.service";
31-
import { LoadingInterceptor } from "./shared/interceptors/loading.interceptor";
3229
import { ApiErrorInterceptor } from "./shared/interceptors/api-error.interceptor";
3330
import { NotificationsService } from "./shared/services/notifications.service";
34-
import { MockApiModule } from "./shared/interceptors/mock-api/mock-api.module";
31+
import { MockApiModule } from "./modules/mock-api/mock-api.module";
3532
import { ChapiChapiCardModule } from './modules/card/card.module';
36-
import { IMockInterceptorData } from './shared/interceptors/mock-api/IMockInterceptorData';
33+
import { IMockInterceptorData } from './modules/mock-api/models/IMockInterceptorData';
3734
import { environment } from 'src/environments/environment';
35+
import { LoadingModule } from './modules/loading/loading.module';
3836

3937
const mockApi : IMockInterceptorData[] = [
4038
{
@@ -55,8 +53,7 @@ const mockApi : IMockInterceptorData[] = [
5553
@NgModule({
5654
declarations: [
5755
AppComponent,
58-
ComponentsComponent,
59-
LoaderComponent,
56+
ComponentsComponent
6057
],
6158
imports: [
6259
BrowserModule,
@@ -79,16 +76,14 @@ const mockApi : IMockInterceptorData[] = [
7976
MatDatepickerModule,
8077
MatNativeDateModule,
8178
MatSnackBarModule,
82-
MatProgressSpinnerModule,
8379
TimeagoModule.forRoot(),
8480
ChapiChapiCardModule,
85-
MockApiModule.forRoot(mockApi, environment.mock)
81+
LoadingModule.forRoot(),
82+
MockApiModule.forRoot(mockApi, environment.mock, 3000)
8683
],
8784
providers: [
88-
LoadingService,
8985
NotificationsService,
9086
{ provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 4500 } },
91-
{ provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true },
9287
{ provide: HTTP_INTERCEPTORS, useClass: ApiErrorInterceptor, multi: true }
9388
],
9489
bootstrap: [AppComponent],

src/app/modules/loading/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# LoadingModule
2+
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.
3+
4+
Simply add the following references:
5+
```
6+
import { LoadingModule } from '@chapichapi/ngx.loading';;
7+
```
8+
9+
And then in the imports section:
10+
```
11+
LoadingModule.forRoot()
12+
```
13+
14+
You can turn off the interceptor if you don't want http calls to automatically show the loader by specifying:
15+
```
16+
LoadingModule.forRoot(false)
17+
```
18+
19+
Then place the loader component inside your app's HTML:
20+
21+
```
22+
<chapichapi-loader></chapichapi-loader>
23+
```

0 commit comments

Comments
 (0)