feat(component): add components and directive to request with states of the api

Author: ramonornela

package.json

@@ -6,14 +6,15 @@
   "typings": "dist/esm/index.d.ts",
   "module": "dist/esm/index.js",
   "scripts": {
-    "build": "npm run clean && npm run build:umd && npm run build:esm",
+    "build": "npm run clean && npm run build:umd && npm run build:esm && npm run copy:sass",
     "build:qa": "npm run lint && npm run test && npm run build",
     "build:esm": "ngc -p tsconfig-esm.json",
     "build:test": "ngc -p tsconfig-test.json",
     "build:umd": "ngc",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "commit": "git-cz",
     "clean": "rimraf ./dist",
+    "copy:sass": "cpx ./src/components/*.scss ./dist/esm/components && cpx ./src/components/*.scss ./dist/umd/components",
     "cover": "nyc report --reporter=lcov npm test",
     "doc": "typedoc --tsconfig tsconfig-esm.json --options typedoc.json src/",
     "gh:release": "node ./scripts/git-release",
@@ -48,6 +49,7 @@
     "codelyzer": "2.0.0-beta.3",
     "commitizen": "^2.8.6",
     "conventional-changelog-cli": "^1.2.0",
+    "cpx": "1.5.0",
     "cz-conventional-changelog": "^1.2.0",
     "fluid-publish": "1.1.0",
     "github": "0.2.4",

src/components/index.ts

@@ -0,0 +1,12 @@
+import { Request } from './request';
+import { StateLoading, StateEmpty, StateError } from './states';
+
+export * from './request';
+export * from './states';
+
+export const COMPONENTS = [
+  Request,
+  StateLoading,
+  StateEmpty,
+  StateError
+]

src/components/request.ts

@@ -0,0 +1,81 @@
+import { Directive, ContentChild, EventEmitter, Input, Output } from '@angular/core';
+import { Http } from '@ramonornela/http';
+import { StateLoading, StateEmpty, StateError } from './states';
+
+@Directive({
+  selector: '[request]'
+})
+export class Request {
+  @Input() url: string;
+  @Input() params: Object;
+  @Input() requestOptions: any;
+  @Input() options: any;
+
+  @Output() loaded = new EventEmitter();
+
+  @ContentChild(StateLoading) loading: any;
+
+  @ContentChild(StateEmpty) noRecords: any;
+
+  @ContentChild(StateError) error: any;
+
+  constructor(
+    private http: Http
+  ) {}
+
+  ngOnInit() {
+    // default options
+    let pluginsOptions = {
+      '*': {
+        'allow': false,
+        'throwsException': false
+      }
+    };
+    this.requestOptions = Object.assign(
+      {},
+      { pluginsOptions },
+      this.options
+    );
+
+    this.request();
+  }
+
+  request() {
+    this.http.request(
+      this.url,
+      this.params,
+      this.requestOptions,
+      this.options
+    ).subscribe((result: any) => {
+
+      this.dismissLoading();
+
+      this.loaded.emit(result);
+
+      if (this.noRecords) {
+        this.noRecords.present();
+      }
+    }, (error) => {
+      this.dismissLoading();
+
+      if (this.error) {
+
+        if (!this.error.idRetry) {
+          this.error.idRetry = this.url;
+        }
+
+        if (!this.error.error) {
+          this.error.error = error;
+        }
+
+        this.error.present();
+      }
+    });
+  }
+
+  private dismissLoading() {
+    if (this.loading) {
+      this.loading.dismiss();  
+    }
+  }
+}

src/components/states.scss

@@ -0,0 +1,25 @@
+loading {
+  text-align: center;
+
+  ion-spinner {
+    width: 100%;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+}
+
+empty {
+  text-align: center;
+}
+
+error {
+  text-align: center;
+
+  .msg-exception {
+    width: 100%;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    font-size: 16px;
+    display: block;
+  }
+}

src/components/states.ts

@@ -0,0 +1,126 @@
+import { Component, Directive, Input, Optional } from '@angular/core';
+import { ViewController } from 'ionic-angular';
+import { Http } from '@ramonornela/http';
+
+@Component({
+  selector: 'loading',
+  template: `
+  <div *ngIf="enabled">
+    <ion-spinner [name]="name" [mode]="mode" [color]="color"></ion-spinner>
+    <div *ngIf="text">{{text}}</div>
+    <ng-content></ng-content>
+  </div>`
+})
+export class StateLoading {
+  enabled: boolean = true;
+
+  @Input() mode: string;
+
+  @Input() color: string;
+
+  @Input() name: string;
+
+  @Input() text: string;
+
+  present() {
+    this.enabled = true;
+  }
+
+  dismiss() {
+    this.enabled = false;
+  }
+}
+
+@Component({
+  selector: 'empty',
+  template: `
+  <div *ngIf="enabled">
+    <ng-content></ng-content>
+  </div>  
+  `
+})
+export class StateEmpty {
+  enabled: boolean = false;
+
+  @Input() variableBind: any;
+
+  constructor(
+    @Optional() private ctrl: ViewController
+  ) {}
+
+  present() {
+    this.enabled = false;
+    let dataBind = this.ctrl._cmp.instance[this.variableBind];
+
+    if (this.ctrl && this.ctrl._cmp && this.variableBind && !dataBind) {
+      this.enabled = true;
+    }
+  }
+
+  dismiss() {
+    this.enabled = false;
+  }
+}
+
+@Component({
+  selector: 'error',
+  template: `
+  <div *ngIf="enabled">
+    <span class="msg-exception">{{msgException}}</span>
+    <button ion-button (click)="retryRequest()">
+      <span>
+        <ng-content></ng-content>
+        {{messageRetry}}
+      </span>
+    </button>
+  </div>`
+})
+export class StateError {
+  enabled: boolean = false;
+
+  private id: string;
+
+  private msgException;
+
+  @Input() messageRetry: string = 'Tentar novamente';
+
+  @Input() messageCallback: Function;
+
+  @Input() error: any;
+
+  constructor(private http: Http) {}
+
+  @Input() 
+  set messageException(message: string) {
+    this.msgException = message;
+  }
+
+  @Input()
+  set idRetry(id: string) {
+    this.id = id;
+  }
+
+  retryRequest() {
+    this.http.retryRequest(this.id);
+  }
+
+  present() {
+    if (!this.msgException) {
+      if (!this.error) {
+        throw new Error('Error is required!');
+      }
+
+      if (typeof this.messageCallback !== 'function') {
+        let messageError = this.messageCallback;
+        throw new Error(`${messageError} is not function`);
+      }
+      this.msgException = this.messageCallback.call(null, this.error);
+    }
+
+    this.enabled = true;
+  }
+
+  dismiss() {
+    this.enabled = false;
+  }
+}

src/module.ts

@@ -1,9 +1,13 @@
 import { NgModule } from '@angular/core';
-import { LoadingController } from 'ionic-angular';
+import { IonicModule, LoadingController } from 'ionic-angular';
 import { HttpPluginsToken } from '@ramonornela/http';
 import { LoadingIonicPlugin, NoConnectionPlugin } from './providers';
+import { COMPONENTS } from './components';
 
 @NgModule({
+  imports: [ IonicModule.forRoot(null) ],
+  exports: [ COMPONENTS ],
+  declarations: [ COMPONENTS ],
   providers: [
     { provide: HttpPluginsToken, useClass: LoadingIonicPlugin, deps: [ LoadingController ], multi: true },
     { provide: HttpPluginsToken, useClass: NoConnectionPlugin, multi: true }