Troca de eventos dos paineis, routing para edição e adição de entidade, http service genérico.

Author: gnllucena

src/app/modules/core/http-backend.interceptor.ts

@@ -12,78 +12,83 @@ export class HttpBackendInterceptor implements HttpInterceptor {
   constructor() { }
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    if (req.url.startsWith('http://localhost:5000/identity') || 
-        req.url.startsWith('http://localhost:5000/users') || 
-        req.url.startsWith('http://localhost:5000/error') || 
-        req.url.startsWith('http://localhost:5000/cards')) {
-
-      return of(null).pipe(mergeMap(() => {
-        if (req.url.startsWith('http://localhost:5000/identity') && req.method === 'POST') {
-          var data = new Date();
-          data.setDate(data.getDate() + 1);
-          
-          let jwt: Jwt = {
-            Token: "eaea23424asdfaefwr52asdfasdf32s",
-            Timeout: data,
-            Username: req.body.Email.split("@")[0],
-            Name: req.body.Email.split("@")[0],
-            Email: req.body.Email
-          };
-    
-          return of(new HttpResponse({ status: 200, body: jwt }));
-        }
+    return of(null).pipe(mergeMap(() => {
+      if (req.url.includes('identity') && req.method === 'POST') {
+        var data = new Date();
+        data.setDate(data.getDate() + 1);
+        
+        let jwt: Jwt = {
+          Token: "eaea23424asdfaefwr52asdfasdf32s",
+          Timeout: data,
+          Username: req.body.Email.split("@")[0],
+          Name: req.body.Email.split("@")[0],
+          Email: req.body.Email
+        };
 
-        if (req.url.startsWith('http://localhost:5000/cards') && req.method === 'GET') {
-          let cards: Card[] = [];
-          
-          var card: Card = {
-            Title: 'Card title',
-            Description: 'Some quick example text to build on the card title and make up the bulk of the card\'s content.',
-            Link: 'Dapibus ac facilisis in'
-          }
+        return of(new HttpResponse({ status: 200, body: jwt }));
+      }
 
-          for (let i = 0; i < 9; i++) {
-            cards.push(card);
-          }
-    
-          return of(new HttpResponse({ status: 200, body: cards }));
+      if (req.url.includes('cards') && req.method === 'GET') {
+        let cards: Card[] = [];
+        
+        var card: Card = {
+          Title: 'Card title',
+          Description: 'Some quick example text to build on the card title and make up the bulk of the card\'s content.',
+          Link: 'Dapibus ac facilisis in'
         }
 
-        if (req.url.startsWith('http://localhost:5000/users') && req.method === 'GET') {
-          let users: User[] = [];
-          
-          var data = new Date();
+        for (let i = 0; i < 9; i++) {
+          cards.push(card);
+        }
+  
+        return of(new HttpResponse({ status: 200, body: cards }));
+      }
 
-          var user: User = {
-            Name: 'Gabriel Lucena',
-            Email: '[email protected]',
-            Document: '023.437.673-27',
-            Birthdate:  new Date('1991-04-28T12:00:00')
-          }
+      if (req.url.includes('users?') && req.method === 'GET') {
+        let users: User[] = [];
+        
+        var data = new Date();
 
-          for (let i = 0; i < 10; i++) {
-            users.push(user);
-          }
+        var user: User = {
+          Name: 'Gabriel Lucena',
+          Email: '[email protected]',
+          Document: '023.437.673-27',
+          Birthdate:  new Date('1991-04-28T12:00:00')
+        }
 
-          let pagination: Pagination<User> = {
-            Items: users,
-            Limit: 10,
-            Offset: 0,
-            Total: 192
-          };
-    
-          return of(new HttpResponse({ status: 200, body: pagination }));
+        for (let i = 0; i < 10; i++) {
+          users.push(user);
         }
+
+        let pagination: Pagination<User> = {
+          Items: users,
+          Limit: 10,
+          Offset: 0,
+          Total: 192
+        };
 
-        if (req.url.startsWith('http://localhost:5000/error') && req.method === 'GET') {
-          return throwError({ error: { message: 'Error thrown.' } });
+        return of(new HttpResponse({ status: 200, body: pagination }));
+      }
+
+      if (req.url.includes('users/') && req.method === 'GET') {
+        var user: User = {
+          Name: 'Gabriel Lucena',
+          Email: '[email protected]',
+          Document: '023.437.673-27',
+          Birthdate:  new Date('1991-04-28T12:00:00')
         }
-          
-        return next.handle(req);      
-      }))
-      .pipe(materialize())
-      .pipe(delay(500))
-      .pipe(dematerialize());
-    }
+
+        return of(new HttpResponse({ status: 200, body: user }));
+      }
+
+      if (req.url.includes('error') && req.method === 'GET') {
+        return throwError({ error: { message: 'Error thrown.' } });
+      }
+        
+      return next.handle(req);      
+    }))
+    .pipe(materialize())
+    .pipe(delay(500))
+    .pipe(dematerialize());
   }
 }

src/app/routes/users/users-add/users-add.component.ts

@@ -1,5 +1,7 @@
 import { Component, ViewEncapsulation, Input } from '@angular/core';
 import { PanelAnimation } from 'src/app/modules/animations/panel.animation';
+import { BehaviorSubject } from 'rxjs';
+import { User } from 'src/app/domain/user';
 
 @Component({
   selector: 'users-add',
@@ -8,7 +10,7 @@ import { PanelAnimation } from 'src/app/modules/animations/panel.animation';
   animations: [ PanelAnimation ],
 })
 export class UsersAddComponent {
-  @Input() visible: boolean;
+  public user = new BehaviorSubject<User>(null);
 
   constructor() { }
 }

src/app/routes/users/users-edit/users-edit.component.html

@@ -1,6 +1,6 @@
-<div [@overlay-transition]="(visible | async) ? 'visible' : 'hidden'" class="overlay" (click)="close()"></div>
+<div [@overlay-transition]="(user | async) ? 'visible' : 'hidden'" class="overlay" (click)="close()"></div>
 
-<div #panel [@panel-transition]="(visible | async)  ? 'visible' : 'hidden'" class="panel">
+<div #panel [@panel-transition]="(user | async)  ? 'visible' : 'hidden'" class="panel">
   <div class="float-left">
     <h2 class="mb-4">Edit a user</h2>
   </div>

src/app/routes/users/users-edit/users-edit.component.ts

@@ -1,33 +1,41 @@
-import { Component, ViewEncapsulation, Renderer2, ViewChild, ElementRef } from '@angular/core';
+import { Component, ViewEncapsulation, Renderer2, ViewChild, ElementRef, Input } from '@angular/core';
 import { faTimes, IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { PanelAnimation } from 'src/app/modules/animations/panel.animation';
 import { OverlayAnimation } from 'src/app/modules/animations/overlay.animation';
 import { BehaviorSubject } from 'rxjs';
+import { Location } from '@angular/common';
+import { Router } from '@angular/router';
+import { User } from 'src/app/domain/user';
 
 @Component({
   selector: 'users-edit',
   templateUrl: './users-edit.component.html',
   encapsulation: ViewEncapsulation.None,
-  animations: [ PanelAnimation, OverlayAnimation ],
+  animations: [ PanelAnimation, OverlayAnimation ]
 })
 export class UsersEditComponent {
-  @ViewChild('panel') panel: ElementRef;
+  @ViewChild('panel') panel: ElementRef; 
 
-  public visible = new BehaviorSubject<Boolean>(false);
+  public user = new BehaviorSubject<User>(null);
   public faTimes: IconDefinition = faTimes;
 
-  constructor(private renderer: Renderer2) {
-    this.visible.subscribe((visible: boolean) => {
-      if (visible) {
-        this.renderer.addClass(document.body, 'overflow');
-        this.renderer.setProperty(this.panel.nativeElement, 'scrollTop', '0');
-      } else {
-        this.renderer.removeClass(document.body, 'overflow'); 
-      }
-    });
+  constructor(private renderer: Renderer2, 
+              private location: Location,
+              private router: Router) {
+
+      this.user.subscribe((user: User) => {
+        if (user) {
+          this.renderer.addClass(document.body, 'overflow');
+          this.renderer.setProperty(this.panel.nativeElement, 'scrollTop', '0');
+          this.location.go(this.router.url + "/edit/");
+        } else {
+          this.renderer.removeClass(document.body, 'overflow'); 
+          this.location.go(this.router.url);
+        }
+      });
   }
 
   close() {
-    this.visible.next(false);
+    this.user.next(null);
   }
 }

src/app/routes/users/users-list/users-list.component.ts

@@ -1,12 +1,12 @@
-import { Component, ViewEncapsulation, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
 import { faTrash, faEdit } from '@fortawesome/free-solid-svg-icons';
 import { ListAnimation } from './../../../modules/animations/list.animation';
 import { User } from '../../../domain/user';
 import { Observable } from 'rxjs';
-import { UsersService } from './../users.service';
 import { Pagination } from 'src/app/domain/pagination';
 import { FormGroup } from '@angular/forms';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { HttpService } from 'src/app/services/http.service';
 
 @Component({
   selector: 'users-list',
@@ -15,20 +15,15 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
   animations: [ ListAnimation ],
 })
 
-export class UsersListComponent implements OnInit {
+export class UsersListComponent {
   @Output() editEvent: EventEmitter<User> = new EventEmitter<User>();
   @Output() deleteEvent: EventEmitter<User> = new EventEmitter<User>();
 
   public faTrash: IconDefinition = faTrash;
   public faEdit: IconDefinition = faEdit;
   public pagination: Observable<Pagination<User>>;
 
-  constructor(
-    public userService: UsersService) { }
-
-  ngOnInit(): void {
-    this.list(0, 10, null);
-  }
+  constructor(public httpService: HttpService<User>) { }
 
   edit(user: User): void {
     this.editEvent.emit(user);
@@ -38,7 +33,9 @@ export class UsersListComponent implements OnInit {
     this.deleteEvent.emit(user);
   }
 
-  list(offset: Number, limit: Number, filters: FormGroup): void {
-    this.pagination = this.userService.get(offset, limit, filters);
+  list(offset: Number, limit: Number, filters: FormGroup): Observable<Pagination<User>> {
+    this.pagination = this.httpService.list('users', offset, limit, filters);
+    
+    return this.pagination;
   }
 }

src/app/routes/users/users-page/users-page.component.ts

@@ -1,50 +1,72 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, OnInit } from '@angular/core';
 import { UsersListComponent } from '../users-list/users-list.component';
 import { UsersFilterComponent } from '../users-filter/users-filter.component';
 import { FormGroup } from '@angular/forms';
 import { UsersAddComponent } from '../users-add/users-add.component';
 import { User } from 'src/app/domain/user';
 import { UsersEditComponent } from '../users-edit/users-edit.component';
 import { ConfirmationModalComponent } from 'src/app/modules/modals/confirmation-modal.component';
+import { Router } from '@angular/router';
+import { HttpService } from 'src/app/services/http.service';
+import { forkJoin } from 'rxjs';
 
 @Component({
   selector: 'users-page',
   templateUrl: './users-page.component.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class UsersPageComponent {
+export class UsersPageComponent implements OnInit {
   @ViewChild('userFilter') userFilter: UsersFilterComponent;
   @ViewChild('userList') userList: UsersListComponent;
   @ViewChild('userAdd') userAdd: UsersAddComponent;
   @ViewChild('userEdit') userEdit: UsersEditComponent;
   @ViewChild('userDelete') userDelete: ConfirmationModalComponent;
 
+  constructor(
+    private router: Router,
+    private httpService: HttpService<User>) { }
+
+  ngOnInit(): void {
+    if (this.router.url.includes('users/')) {
+      let get = this.httpService.get('users', 1);
+      let list = this.userList.list(0, 10, null);
+
+      forkJoin([get, list]).subscribe(results => {
+        this.userEdit.user.next(results[0]);
+      });
+    } else if (this.router.url.includes('new')) {
+      this.userAdd.user.next(new User());
+    } else {
+      this.userList.list(0, 10, null);
+    }
+  }
+
   filter(filters: FormGroup): void {
     this.userList.list(0, 10, filters);
   }
 
   add(): void {
-    this.userEdit.visible.next(true);
+    this.userAdd.user.next(new User());
   }
 
   edit(user: User): void {
-    this.userEdit.visible.next(true);
+    this.userEdit.user.next(user);
   }
 
   delete(user: User): void {
     this.userDelete.visible.next(true);
   }
 
-  applyAdd() {
+  applyAdd(user: User): void {
 
   }
 
-  applyEdit() {
+  applyEdit(user: User): void {
 
   }
 
-  applyDelete() {
+  applyDelete(user: User): void {
 
   }
 }

src/app/routes/users/users.module.ts

@@ -14,24 +14,16 @@ import { UsersFormComponent } from './users-form/users-form.component';
 import { UsersFilterComponent } from './users-filter/users-filter.component';
 import { UsersEditComponent } from './users-edit/users-edit.component';
 import { UsersAddComponent } from './users-add/users-add.component';
-import { UsersService } from './users.service';
-import { CommonModule } from '@angular/common';
+import { CommonModule, PathLocationStrategy, LocationStrategy, Location } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { HttpService } from 'src/app/services/http.service';
 
 const appRoutes: Routes = [
   { path: '', component: UsersPageComponent, canActivate: [AuthenticationGuard] },
+  { path: ':id', component: UsersPageComponent, canActivate: [AuthenticationGuard] },
+  { path: '/new', component: UsersPageComponent, canActivate: [AuthenticationGuard] }
 ];
-
-// users-add -> users.form
-// [{
-//   path: 'team/:id',
-//  component: Team,
-//   children: [{
-//     path: 'user/:name',
-//     component: User
-//   }]
-// }]
-
+  
 @NgModule({ 
   declarations: [
     UsersPageComponent,
@@ -51,7 +43,8 @@ const appRoutes: Routes = [
     RouterModule.forChild(appRoutes)
   ],
   providers: [
-    UsersService
+    HttpService,
+    Location, {provide: LocationStrategy, useClass: PathLocationStrategy }
   ]
 })
 export class UsersModule { }