mostrar informacion del usuario

pablo384 · Sep 19, 2018 · 013a23f · 013a23f
1 parent 0cde07d
commit 013a23f
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 5 deletions.
diff --git a/src/app/usuarios/usuario/usuario.component.html b/src/app/usuarios/usuario/usuario.component.html
@@ -1,3 +1,43 @@
-<p>
-  usuario works!
-</p>
+
+<div class="row" *ngIf="loading">
+  <div class="col">
+    <div class="alert alert-info text-center">
+      <i class="fa fa-sync fa-spin fa-2x"></i>
+      <h1>Espere...</h1>
+    </div>
+  </div>
+</div>
+<div class="row" *ngIf="error">
+  <div class="col">
+    <div class="alert alert-danger text-center">
+      <i class="fa fa-times fa-2x"></i>
+      <h1>Error: {{error.status}}</h1>
+      <p>
+        {{error.message}}
+        <br><br>
+        {{error.url}}
+      </p>
+    </div>
+  </div>
+</div>
+<div class="row" *ngIf="usuario && !loading">
+  <div class="col-3">
+    <img [src]="usuario.avatar" class="img-thumbnail" alt="">
+  </div>
+  <div class="col">
+    <ul class="list-group">
+      <li class="list-group-item">
+        <strong>ID</strong>
+        {{usuario.id}}
+      </li>
+      <li class="list-group-item">
+        <strong>Nombre</strong>
+        {{usuario.first_name}}
+      </li>
+      <li class="list-group-item">
+        <strong>Apellido</strong>
+        {{usuario.last_name}}
+      </li>
+    </ul>
+  </div>
+</div>
diff --git a/src/app/usuarios/usuario/usuario.component.ts b/src/app/usuarios/usuario/usuario.component.ts
@@ -1,16 +1,22 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { AppState } from '../../store/app.reducers';
 import { Store } from '@ngrx/store';
 import { CargarUsuario } from '../../store/actions/usuario.actions';
+import { Usuario } from '../../models/usuario.model';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-usuario',
   templateUrl: './usuario.component.html',
   styles: []
 })
-export class UsuarioComponent implements OnInit {
+export class UsuarioComponent implements OnInit, OnDestroy {
 
+  usuario: Usuario;
+  subs: Subscription = new Subscription();
+  loading: boolean;
+  error: any;
   constructor(
     private router: ActivatedRoute,
     private store: Store<AppState>
@@ -25,6 +31,16 @@ export class UsuarioComponent implements OnInit {
 
       }
     );
+    this.subs = this.store.select('usuario').subscribe(
+      user => {
+        this.error = user.error;
+        this.loading = user.loading;
+        this.usuario = user.user;
+      }
+    );
+  }
+  ngOnDestroy() {
+    this.subs.unsubscribe();
   }
 
 }