Users animation.

Author: gnllucena

README.md

@@ -1,3 +1,5 @@
+https://yarnpkg.com/lang/en/docs/install/
+
 make install
 
 make run

src/app/domain/User.ts

@@ -2,6 +2,5 @@ export class User {
   Name: String;
   Email: String;
   Document: String;
-  Birthday: Date;
-  Progress: Number;
+  Birthdate: Date
 }

src/app/domain/card.ts

@@ -0,0 +1,5 @@
+export class Card {
+  Title: String;
+  Description: String;
+  Link: String;
+}

src/app/domain/pagination.ts

@@ -0,0 +1,29 @@
+import { trigger,animate, style, query, transition, stagger, keyframes } from '@angular/animations';
+
+export const ListAnimation = trigger('list-transition', [
+  transition('* <=> *', [
+    query(':enter',
+      [
+        style({ opacity: 0, transform: 'translateY(15px)' }),
+        stagger('120ms',
+          animate('550ms ease-out',
+            style({ 
+              opacity: 1, 
+              transform: 'translateY(0px)' 
+            })
+          )
+        )
+      ],
+      { optional: true }
+    ),
+    query(':leave', 
+      [
+        animate('50ms', 
+          style({ 
+            opacity: 0 
+          }))
+      ],
+      { optional: true}
+    ) 
+  ])
+]);

src/app/modules/animations/list.animation.ts

@@ -7,5 +7,5 @@ export const SlidePanelAnimation = trigger('slide-transition', [
   state('right', style({ 
     transform: 'translateX(-50%)' 
   })),
-  transition('* => *', animate(300))
+  transition('* => *', animate(150))
 ])

src/app/modules/animations/slide-panel.animation.ts

@@ -3,6 +3,8 @@ import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor } fr
 import { Observable, of, throwError } from 'rxjs';
 import { delay, mergeMap, materialize, dematerialize } from 'rxjs/operators';
 import { Jwt } from './../../domain/Jwt';
+import { Card } from './../../domain/card';
+import { User } from './../../domain/User';
 
 @Injectable()
 export class HttpBackendInterceptor implements HttpInterceptor {
@@ -11,7 +13,8 @@ export class HttpBackendInterceptor implements HttpInterceptor {
   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('/error') || 
+        req.url.endsWith('/cards')) {
 
       return of(null).pipe(mergeMap(() => {
         if (req.url.endsWith('/identity') && req.method === 'POST') {
@@ -29,34 +32,37 @@ export class HttpBackendInterceptor implements HttpInterceptor {
           return of(new HttpResponse({ status: 200, body: jwt }));
         }
 
+        if (req.url.endsWith('/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'
+          }
+
+          for (let i = 0; i < 9; i++) {
+            cards.push(card);
+          }
+    
+          return of(new HttpResponse({ status: 200, body: cards }));
+        }
+
         if (req.url.endsWith('/users') && req.method === 'GET') {
-          let users = [
-            {
-              id: 1,
-              email: "cecilharvey@gmail.com",
-              name: "Cecil Harvey"
-            },
-            {
-              id: 2,
-              email: "tidusjecht@gmail.com",
-              name: "Tidus Jecht"
-            },
-            {
-              id: 3,
-              email: "squall.leonhart@gmail.com",
-              name: "Squall Leonhart"
-            },
-            {
-              id: 4,
-              email: "cloudstrife@gmail.com",
-              name: "Cloud Strife"
-            },
-            {
-              id: 5,
-              email: "kaindragon@gmail.com",
-              name: "Kain Dragon"
-            }
-          ];
+          let users: User[] = [];
+          
+          var data = new Date();
+
+          var user: User = {
+            Name: 'Gabriel Lucena',
+            Email: 'gnllucena@gmail.com',
+            Document: '023.437.673-27',
+            Birthdate:  new Date('1991-04-28T12:00:00')
+          }
+
+          for (let i = 0; i < 10; i++) {
+            users.push(user);
+          }
 
           return of(new HttpResponse({ status: 200, body: users }));
         }

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

@@ -3,18 +3,9 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-breadcrumb',
   template: `
-    <div class="row mb-2 ">
-      <div class="col-12">
-        <div class="page-title-box">
-          <div class="page-title-right">
-            <ol class="breadcrumb m-0">
-              <li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
-              <li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
-              <li class="breadcrumb-item active">Form Elements</li>
-            </ol>
-          </div>
-        </div>
-      </div>
+    <div class="small mb-4">
+      <a href="javascript: void(0);">home</a> > 
+      <a href="javascript: void(0);">users</a>
     </div>
   `,
   styles: []

src/app/modules/ui/breadcrumb.component.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { UIModule } from '../../modules/ui/.ui.module';
+import { DotService } from './dot.service';
 
 export const appRoutes: Routes = [
   {
@@ -13,6 +14,9 @@ export const appRoutes: Routes = [
   imports: [
     UIModule,
     RouterModule.forChild(appRoutes)
+  ],
+  providers: [
+    DotService
   ]
 })
 export class DotModule { }

src/app/routes/dot/dot.module.ts

@@ -0,0 +1,16 @@
+import { environment } from './../../../environments/environment';
+
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { Card } from './../../domain/card';
+
+@Injectable()
+export class DotService {
+  constructor(private http: HttpClient) { }
+  
+  get(): Observable<Card[]> {
+    return this.http.get<Card[]>(environment.server + '/cards');
+  }
+}