Filtro e lista de usuário.

gnllucena · gnllucena · commit 2c895d56254a · 2018-10-24T04:20:44.000-03:00
diff --git a/src/app/domain/pagination.ts b/src/app/domain/pagination.ts
@@ -0,0 +1,6 @@
+export class Pagination<T>  {
+  Items: Array<T>;
+  Offset: Number;
+  Limit: Number;
+  Total: Number;
+}
diff --git a/src/app/modules/animations/list.animation.ts b/src/app/modules/animations/list.animation.ts
@@ -18,10 +18,8 @@ export const ListAnimation = trigger('list-transition', [
     ),
     query(':leave', 
       [
-        animate('50ms', 
-          style({ 
-            opacity: 0 
-          }))
+        style({ opacity: 1 }),
+        animate('0.5s', style({ opacity: 0 }))
       ],
       { optional: true}
     ) 
diff --git a/src/app/modules/core/http-backend.interceptor.ts b/src/app/modules/core/http-backend.interceptor.ts
@@ -2,22 +2,23 @@ import { Injectable } from '@angular/core';
 import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
 import { Observable, of, throwError } from 'rxjs';
 import { delay, mergeMap, materialize, dematerialize } from 'rxjs/operators';
-import { Jwt } from './../../domain/Jwt';
+import { Jwt } from '../../domain/jwt';
 import { Card } from './../../domain/card';
-import { User } from './../../domain/User';
+import { User } from '../../domain/user';
+import { Pagination } from 'src/app/domain/pagination';
 
 @Injectable()
 export class HttpBackendInterceptor implements HttpInterceptor {
   constructor() { }
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    if (req.url.endsWith('/identity') || 
-        req.url.endsWith('/users') || 
-        req.url.endsWith('/error') || 
-        req.url.endsWith('/cards')) {
+    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.endsWith('/identity') && req.method === 'POST') {
+        if (req.url.startsWith('http://localhost:5000/identity') && req.method === 'POST') {
           var data = new Date();
           data.setDate(data.getDate() + 1);
           
@@ -32,7 +33,7 @@ export class HttpBackendInterceptor implements HttpInterceptor {
           return of(new HttpResponse({ status: 200, body: jwt }));
         }
   
-        if (req.url.endsWith('/cards') && req.method === 'GET') {
+        if (req.url.startsWith('http://localhost:5000/cards') && req.method === 'GET') {
           let cards: Card[] = [];
           
           var card: Card = {
@@ -48,7 +49,7 @@ export class HttpBackendInterceptor implements HttpInterceptor {
           return of(new HttpResponse({ status: 200, body: cards }));
         }
 
-        if (req.url.endsWith('/users') && req.method === 'GET') {
+        if (req.url.startsWith('http://localhost:5000/users') && req.method === 'GET') {
           let users: User[] = [];
           
           var data = new Date();
@@ -63,11 +64,18 @@ export class HttpBackendInterceptor implements HttpInterceptor {
           for (let i = 0; i < 10; i++) {
             users.push(user);
           }
+
+          let pagination: Pagination<User> = {
+            Items: users,
+            Limit: 10,
+            Offset: 0,
+            Total: 192
+          };
     
-          return of(new HttpResponse({ status: 200, body: users }));
+          return of(new HttpResponse({ status: 200, body: pagination }));
         }
   
-        if (req.url.endsWith('/error') && req.method === 'GET') {
+        if (req.url.startsWith('http://localhost:5000/error') && req.method === 'GET') {
           return throwError({ error: { message: 'Error thrown.' } });
         }
           
diff --git a/src/app/modules/ui/filter.component.ts b/src/app/modules/ui/filter.component.ts
diff --git a/src/app/modules/ui/header.component.ts b/src/app/modules/ui/header.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthenticationService } from './../../services/authentication.service';
-import { Jwt } from './../../domain/Jwt';
+import { Jwt } from '../../domain/jwt';
 
 @Component({
   selector: 'app-header',
diff --git a/src/app/modules/ui/page-crud.component.ts b/src/app/modules/ui/page-crud.component.ts
diff --git a/src/app/modules/ui/panel.component.ts b/src/app/modules/ui/panel.component.ts
diff --git a/src/app/routes/identity/identity-page/identity-page.component.ts b/src/app/routes/identity/identity-page/identity-page.component.ts
@@ -2,7 +2,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { AuthenticationService } from './../../../services/authentication.service';
-import { Jwt } from './../../../domain/Jwt';
+import { Jwt } from '../../../domain/jwt';
 
 @Component({
   selector: 'identity-page',
diff --git a/src/app/routes/users/users-filter/users-filter.component.html b/src/app/routes/users/users-filter/users-filter.component.html
@@ -1,23 +1,22 @@
 <div class="row mb-5">
-
   <div class="col-lg-12">
-    <form novalidate>
+    <form [formGroup]="filters" novalidate>
       <div class="form-row">
         <div class="form-group col-md-3">
           <label for="Name">Name</label>
-          <input id="Name" type="text" class="form-control" placeholder="User's name">
+          <input formControlName="Name" type="text" class="form-control" placeholder="User's name">
         </div>
         <div class="form-group col-md-3">
           <label for="Email">Email</label>
-          <input id="Email" type="text" class="form-control" placeholder="User's email">
+          <input formControlName="Email" type="text" class="form-control" placeholder="User's email">
         </div>
         <div class="form-group col-md-3">
           <label for="Document">Document</label>
-          <input id="Document" type="text" class="form-control" id="Document" placeholder="User's document">
+          <input formControlName="Document" type="text" class="form-control" id="Document" placeholder="User's document">
         </div>
       </div>
       
-      <button class="btn btn-primary" type="submit">Search</button>
+      <button class="btn btn-primary" (click)="filter()">Search</button>
     </form>
   </div>
 </div>
diff --git a/src/app/routes/users/users-filter/users-filter.component.ts b/src/app/routes/users/users-filter/users-filter.component.ts
@@ -1,11 +1,40 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation, OnInit, EventEmitter, Output } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+import { debounceTime } from 'rxjs/operators';
 
 @Component({
   selector: 'users-filter',
   templateUrl: './users-filter.component.html',
   encapsulation: ViewEncapsulation.None
 })
 
-export class UsersFilterComponent {
-  constructor() { }
+export class UsersFilterComponent implements OnInit {
+  @Output() filterEvent: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+  
+  public filters = new FormGroup({
+    Name: new FormControl(),
+    Email: new FormControl(),
+    Document: new FormControl()
+  });
+
+  ngOnInit(): void {
+    this.filters.controls.Name.valueChanges.pipe(
+      debounceTime(500)).subscribe(() => {
+        this.filter();
+      });
+
+    this.filters.controls.Email.valueChanges.pipe(
+      debounceTime(500)).subscribe(() => {
+        this.filter();
+      });
+
+    this.filters.controls.Document.valueChanges.pipe(
+      debounceTime(500)).subscribe(() => {
+        this.filter();
+      });
+  }
+
+  filter(): void {
+    this.filterEvent.emit(this.filters);
+  }
 }
diff --git a/src/app/routes/users/users-list/users-list.component.html b/src/app/routes/users/users-list/users-list.component.html
@@ -1,6 +1,6 @@
-<ng-container *ngIf='users | async as items'>
-  <div [@list-transition]='items.length'>
-    <div *ngFor="let user of items">
+<ng-container *ngIf='pagination | async as pagination'>
+  <div [@list-transition]='pagination.Items.length'>
+    <div *ngFor="let user of pagination.Items">
       <div class="card mb-2" style="padding: 15px;">
         <div class="row justify-content-sm-between align-items-sm-center">
           <div class="col-md-2">
diff --git a/src/app/routes/users/users-list/users-list.component.ts b/src/app/routes/users/users-list/users-list.component.ts
@@ -1,9 +1,11 @@
-import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import { Component, ViewEncapsulation, OnInit, Input } 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 { 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';
 
 @Component({
   selector: 'users-list',
@@ -13,14 +15,26 @@ import { UsersService } from './../users.service';
 })
 
 export class UsersListComponent implements OnInit {
-  public users: Observable<User[]>;
+  @Input() filters: FormGroup;
+  
   public faTrash = faTrash;
   public faEdit = faEdit;
-  
+  public pagination: Observable<Pagination<User>>;
+
   constructor(
     public userService: UsersService) { }
 
   ngOnInit(): void {
-    this.users = this.userService.get();
+    this.list(0, 10);
+  }
+
+  filter(filters: FormGroup) {
+    this.filters = filters;
+
+    this.list(0, 10);
+  }
+
+  list(offset: Number, limit: Number): void {
+    this.pagination = this.userService.get(offset, limit, this.filters);
   }
 }
diff --git a/src/app/routes/users/users-page/users-page.component.html b/src/app/routes/users/users-page/users-page.component.html
@@ -3,10 +3,12 @@ <h2 class="mb-4">Users</h2>
 
   <slide-panel [activePane]="isLeftVisible ? 'left' : 'right'">
     <div left-panel>
-      <users-filter></users-filter>
-      <!-- (onUpdateFilters)="updateFilters($event)"> -->
+      <users-filter #userFilter 
+        (filterEvent)="filter($event)">
+      </users-filter>
     
-      <users-list></users-list>
+      <users-list #userList>
+      </users-list>
         <!-- #listCanal 
           (editEvent)="openEditPanel($event)" 
           (exportList)="applyExportList($event)"> -->
diff --git a/src/app/routes/users/users-page/users-page.component.ts b/src/app/routes/users/users-page/users-page.component.ts
@@ -1,5 +1,8 @@
-import { Component, ViewEncapsulation, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ViewEncapsulation, Input, ChangeDetectionStrategy, ViewChild } from '@angular/core';
 import { AuthenticationService } from './../../../services/authentication.service';
+import { UsersListComponent } from '../users-list/users-list.component';
+import { UsersFilterComponent } from '../users-filter/users-filter.component';
+import { FormGroup } from '@angular/forms';
 
 type PaneType = 'left' | 'right';
 
@@ -13,9 +16,15 @@ export class UsersPageComponent {
   title = 'Users';
   
   @Input() activePane: PaneType = 'left';
-
+  @ViewChild('userFilter') userFilter: UsersFilterComponent;
+  @ViewChild('userList') userList: UsersListComponent;
+  
   public isLeftVisible = true;
   
   constructor(
     private authenticationService: AuthenticationService) { }
+
+    filter(filters: FormGroup) {
+      this.userList.filter(filters);
+    }
 }
diff --git a/src/app/routes/users/users.module.ts b/src/app/routes/users/users.module.ts
@@ -15,6 +15,7 @@ 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 { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 const appRoutes: Routes = [
   { path: '', component: UsersPageComponent, canActivate: [AuthenticationGuard] },
@@ -43,6 +44,8 @@ const appRoutes: Routes = [
     UIModule,
     FontAwesomeModule,
     CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
     RouterModule.forChild(appRoutes)
   ],
   providers: [
diff --git a/src/app/routes/users/users.service.ts b/src/app/routes/users/users.service.ts
@@ -4,13 +4,27 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 import { Observable } from 'rxjs';
-import { User } from './../../domain/User';
+import { User } from '../../domain/user';
+import { Pagination } from 'src/app/domain/pagination';
+import { FormGroup } from '@angular/forms';
 
 @Injectable()
 export class UsersService {
   constructor(private http: HttpClient) { }
   
-  get(): Observable<User[]> {
-    return this.http.get<User[]>(environment.server + '/users');
+  get(offset: Number, limit: Number, filters: FormGroup): Observable<Pagination<User>> {
+    let query = '';
+
+    if (filters) {
+      Object.keys(filters.controls).forEach(element => {
+        if (filters.controls[element].value) {
+          query += '&' + element + '=' + filters.controls[element].value;
+        }
+      });
+    } 
+
+    return this.http.get<Pagination<User>>(
+      environment.server + 
+      '/users?offset=' + offset + '&limit=' + limit + query);
   }
 }
diff --git a/src/app/services/authentication.service.ts b/src/app/services/authentication.service.ts
@@ -5,8 +5,8 @@ import { HttpClient } from '@angular/common/http';
 
 import { Observable, BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { Jwt } from './../domain/Jwt';
-import { User } from './../domain/User';
+import { Jwt } from '../domain/jwt';
+import { User } from '../domain/user';
 
 @Injectable()
 export class AuthenticationService {
diff --git a/src/app/services/http.service.ts b/src/app/services/http.service.ts
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,12 +1,14 @@
 @import "~bootstrap/dist/css/bootstrap.min.css";
 
-
-label {
-  display:block;
+.form-control:focus {
+  border-color: #cccccc;
+  -webkit-box-shadow: none;
+  box-shadow: none;
 }
 
-.icons {
-  padding: 17px;
+.btn:focus, .btn:active {
+  outline: none !important;
+  box-shadow: none;
 }
 
 .card .form-group {
@@ -15,6 +17,7 @@ label {
 
    label {
     margin-bottom: 0;
+    display:block;
    }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -18,10 +18,8 @@ export const ListAnimation = trigger('list-transition', [`
`18`	`18`	`),`
`19`	`19`	`query(':leave',`
`20`	`20`	`[`
`21`		`- animate('50ms',`
`22`		`- style({`
`23`		`- opacity: 0`
`24`		`- }))`
	`21`	`+ style({ opacity: 1 }),`
	`22`	`+ animate('0.5s', style({ opacity: 0 }))`
`25`	`23`	`],`
`26`	`24`	`{ optional: true}`
`27`	`25`	`)`