Skip to content

Commit be0baa4

Browse files
gnllucenagnllucena
committed
Users animation.
1 parent 26ecd8a commit be0baa4

20 files changed

+240
-295
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
https://yarnpkg.com/lang/en/docs/install/
2+
13
make install
24

35
make run

‎src/app/domain/User.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,5 @@ export class User {
22
Name: String;
33
Email: String;
44
Document: String;
5-
Birthday: Date;
6-
Progress: Number;
5+
Birthdate: Date
76
}

‎src/app/domain/card.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export class Card {
2+
Title: String;
3+
Description: String;
4+
Link: String;
5+
}

‎src/app/domain/pagination.ts

Whitespace-only changes.

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

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { trigger,animate, style, query, transition, stagger, keyframes } from '@angular/animations';
2+
3+
export const ListAnimation = trigger('list-transition', [
4+
transition('* <=> *', [
5+
query(':enter',
6+
[
7+
style({ opacity: 0, transform: 'translateY(15px)' }),
8+
stagger('120ms',
9+
animate('550ms ease-out',
10+
style({
11+
opacity: 1,
12+
transform: 'translateY(0px)'
13+
})
14+
)
15+
)
16+
],
17+
{ optional: true }
18+
),
19+
query(':leave',
20+
[
21+
animate('50ms',
22+
style({
23+
opacity: 0
24+
}))
25+
],
26+
{ optional: true}
27+
)
28+
])
29+
]);

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@ export const SlidePanelAnimation = trigger('slide-transition', [
77
state('right', style({
88
transform: 'translateX(-50%)'
99
})),
10-
transition('* => *', animate(300))
10+
transition('* => *', animate(150))
1111
])

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

+34-28
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor } fr
33
import { Observable, of, throwError } from 'rxjs';
44
import { delay, mergeMap, materialize, dematerialize } from 'rxjs/operators';
55
import { Jwt } from './../../domain/Jwt';
6+
import { Card } from './../../domain/card';
7+
import { User } from './../../domain/User';
68

79
@Injectable()
810
export class HttpBackendInterceptor implements HttpInterceptor {
@@ -11,7 +13,8 @@ export class HttpBackendInterceptor implements HttpInterceptor {
1113
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
1214
if (req.url.endsWith('/identity') ||
1315
req.url.endsWith('/users') ||
14-
req.url.endsWith('/error')) {
16+
req.url.endsWith('/error') ||
17+
req.url.endsWith('/cards')) {
1518

1619
return of(null).pipe(mergeMap(() => {
1720
if (req.url.endsWith('/identity') && req.method === 'POST') {
@@ -29,34 +32,37 @@ export class HttpBackendInterceptor implements HttpInterceptor {
2932
return of(new HttpResponse({ status: 200, body: jwt }));
3033
}
3134

35+
if (req.url.endsWith('/cards') && req.method === 'GET') {
36+
let cards: Card[] = [];
37+
38+
var card: Card = {
39+
Title: 'Card title',
40+
Description: 'Some quick example text to build on the card title and make up the bulk of the card\'s content.',
41+
Link: 'Dapibus ac facilisis in'
42+
}
43+
44+
for (let i = 0; i < 9; i++) {
45+
cards.push(card);
46+
}
47+
48+
return of(new HttpResponse({ status: 200, body: cards }));
49+
}
50+
3251
if (req.url.endsWith('/users') && req.method === 'GET') {
33-
let users = [
34-
{
35-
id: 1,
36-
email: "[email protected]",
37-
name: "Cecil Harvey"
38-
},
39-
{
40-
id: 2,
41-
email: "[email protected]",
42-
name: "Tidus Jecht"
43-
},
44-
{
45-
id: 3,
46-
email: "[email protected]",
47-
name: "Squall Leonhart"
48-
},
49-
{
50-
id: 4,
51-
email: "[email protected]",
52-
name: "Cloud Strife"
53-
},
54-
{
55-
id: 5,
56-
email: "[email protected]",
57-
name: "Kain Dragon"
58-
}
59-
];
52+
let users: User[] = [];
53+
54+
var data = new Date();
55+
56+
var user: User = {
57+
Name: 'Gabriel Lucena',
58+
Email: '[email protected]',
59+
Document: '023.437.673-27',
60+
Birthdate: new Date('1991-04-28T12:00:00')
61+
}
62+
63+
for (let i = 0; i < 10; i++) {
64+
users.push(user);
65+
}
6066

6167
return of(new HttpResponse({ status: 200, body: users }));
6268
}

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

+3-12
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,9 @@ import { Component } from '@angular/core';
33
@Component({
44
selector: 'app-breadcrumb',
55
template: `
6-
<div class="row mb-2 ">
7-
<div class="col-12">
8-
<div class="page-title-box">
9-
<div class="page-title-right">
10-
<ol class="breadcrumb m-0">
11-
<li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
12-
<li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
13-
<li class="breadcrumb-item active">Form Elements</li>
14-
</ol>
15-
</div>
16-
</div>
17-
</div>
6+
<div class="small mb-4">
7+
<a href="javascript: void(0);">home</a> >
8+
<a href="javascript: void(0);">users</a>
189
</div>
1910
`,
2011
styles: []

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

+4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { NgModule } from '@angular/core';
22
import { RouterModule, Routes } from '@angular/router';
33
import { UIModule } from '../../modules/ui/.ui.module';
4+
import { DotService } from './dot.service';
45

56
export const appRoutes: Routes = [
67
{
@@ -13,6 +14,9 @@ export const appRoutes: Routes = [
1314
imports: [
1415
UIModule,
1516
RouterModule.forChild(appRoutes)
17+
],
18+
providers: [
19+
DotService
1620
]
1721
})
1822
export class DotModule { }

‎src/app/routes/dot/dot.service.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { environment } from './../../../environments/environment';
2+
3+
import { Injectable } from '@angular/core';
4+
import { HttpClient } from '@angular/common/http';
5+
6+
import { Observable } from 'rxjs';
7+
import { Card } from './../../domain/card';
8+
9+
@Injectable()
10+
export class DotService {
11+
constructor(private http: HttpClient) { }
12+
13+
get(): Observable<Card[]> {
14+
return this.http.get<Card[]>(environment.server + '/cards');
15+
}
16+
}

‎src/app/routes/dot/myself/dot-myself.module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { DotMyselfPageComponent } from './myself-page/dot-myself-page.component'
55

66
import { AuthenticationGuard } from '../../../modules/core/authentication.guard';
77
import { UIModule } from '../../../modules/ui/.ui.module';
8+
import { CommonModule } from '@angular/common';
89

910
const appRoutes: Routes = [
1011
{ path: '', component: DotMyselfPageComponent, canActivate: [AuthenticationGuard] },
@@ -16,6 +17,7 @@ const appRoutes: Routes = [
1617
],
1718
imports: [
1819
UIModule,
20+
CommonModule,
1921
RouterModule.forChild(appRoutes)
2022
]
2123
})

‎src/app/routes/dot/myself/myself-page/dot-myself-page.component.html

+9-101
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,19 @@
11
<div class="container">
22
<h2 class="mb-4">Cards</h2>
3-
4-
<div class="mb-5">
5-
<div class="row mb-4">
6-
<div class="col-lg-4 mb-4 mb-lg-0">
7-
<div class="card" style="width: 18rem;">
3+
4+
<ng-container *ngIf='cards | async as items'>
5+
<div [@list-transition]='items.length' class="row">
6+
<div *ngFor="let card of items" class="col-lg-4 mb-lg-0">
7+
<div class="card mb-4" style="width: 18rem;">
88
<div class="card-body">
9-
<h5 class="card-title">Card title</h5>
10-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
9+
<h5 class="card-title">{{ card.Title }}</h5>
10+
<p class="card-text">{{ card.Description }}</p>
1111
</div>
1212
<ul class="list-group list-group-flush">
13-
<li class="list-group-item">Dapibus ac facilisis in</li>
14-
</ul>
15-
</div>
16-
</div>
17-
<div class="col-lg-4 mb-4 mb-lg-0">
18-
<div class="card" style="width: 18rem;">
19-
<div class="card-body">
20-
<h5 class="card-title">Card title</h5>
21-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
22-
</div>
23-
<ul class="list-group list-group-flush">
24-
<li class="list-group-item">Dapibus ac facilisis in</li>
25-
</ul>
26-
</div>
27-
</div>
28-
<div class="col-lg-4 mb-4 mb-lg-0">
29-
<div class="card" style="width: 18rem;">
30-
<div class="card-body">
31-
<h5 class="card-title">Card title</h5>
32-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
33-
</div>
34-
<ul class="list-group list-group-flush">
35-
<li class="list-group-item">Dapibus ac facilisis in</li>
36-
</ul>
37-
</div>
38-
</div>
39-
</div>
40-
<div class="row mb-4">
41-
<div class="col-lg-4 mb-4 mb-lg-0">
42-
<div class="card" style="width: 18rem;">
43-
<div class="card-body">
44-
<h5 class="card-title">Card title</h5>
45-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
46-
</div>
47-
<ul class="list-group list-group-flush">
48-
<li class="list-group-item">Dapibus ac facilisis in</li>
49-
</ul>
50-
</div>
51-
</div>
52-
<div class="col-lg-4 mb-4 mb-lg-0">
53-
<div class="card" style="width: 18rem;">
54-
<div class="card-body">
55-
<h5 class="card-title">Card title</h5>
56-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
57-
</div>
58-
<ul class="list-group list-group-flush">
59-
<li class="list-group-item">Dapibus ac facilisis in</li>
60-
</ul>
61-
</div>
62-
</div>
63-
<div class="col-lg-4 mb-4 mb-lg-0">
64-
<div class="card" style="width: 18rem;">
65-
<div class="card-body">
66-
<h5 class="card-title">Card title</h5>
67-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
68-
</div>
69-
<ul class="list-group list-group-flush">
70-
<li class="list-group-item">Dapibus ac facilisis in</li>
71-
</ul>
72-
</div>
73-
</div>
74-
</div>
75-
<div class="row mb-4">
76-
<div class="col-lg-4 mb-4 mb-lg-0">
77-
<div class="card" style="width: 18rem;">
78-
<div class="card-body">
79-
<h5 class="card-title">Card title</h5>
80-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
81-
</div>
82-
<ul class="list-group list-group-flush">
83-
<li class="list-group-item">Dapibus ac facilisis in</li>
84-
</ul>
85-
</div>
86-
</div>
87-
<div class="col-lg-4 mb-4 mb-lg-0">
88-
<div class="card" style="width: 18rem;">
89-
<div class="card-body">
90-
<h5 class="card-title">Card title</h5>
91-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
92-
</div>
93-
<ul class="list-group list-group-flush">
94-
<li class="list-group-item">Dapibus ac facilisis in</li>
95-
</ul>
96-
</div>
97-
</div>
98-
<div class="col-lg-4 mb-4 mb-lg-0">
99-
<div class="card" style="width: 18rem;">
100-
<div class="card-body">
101-
<h5 class="card-title">Card title</h5>
102-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
103-
</div>
104-
<ul class="list-group list-group-flush">
105-
<li class="list-group-item">Dapibus ac facilisis in</li>
13+
<li class="list-group-item">{{ card.Link }}</li>
10614
</ul>
10715
</div>
10816
</div>
10917
</div>
110-
</div>
18+
</ng-container>
11119
</div>

‎src/app/routes/dot/myself/myself-page/dot-myself-page.component.ts

+14-15
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
1-
import { Component, ViewEncapsulation } from '@angular/core';
1+
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
22
import { AuthenticationService } from '../../../../services/authentication.service';
3-
import { Jwt } from './../../../../domain/Jwt';
3+
import { DotService } from './../../dot.service';
4+
import { Card } from './../../../../domain/card';
5+
import { ListAnimation } from './../../../../modules/animations/list.animation';
6+
import { Observable } from 'rxjs';
47

58
@Component({
69
selector: 'dot-myself-page',
710
templateUrl: './dot-myself-page.component.html',
8-
encapsulation: ViewEncapsulation.None
11+
encapsulation: ViewEncapsulation.None,
12+
animations: [ ListAnimation ],
913
})
1014

11-
export class DotMyselfPageComponent {
12-
title = 'Myself';
13-
15+
export class DotMyselfPageComponent implements OnInit {
16+
public cards: Observable<Card[]>;
17+
1418
constructor(
15-
public authenticationService: AuthenticationService) { }
16-
17-
public email(): String {
18-
var jwt = this.authenticationService.token() as Jwt;
19-
20-
if (jwt) {
21-
return jwt.Email;
22-
}
19+
public authenticationService: AuthenticationService,
20+
public dotService: DotService) { }
2321

24-
return '';
22+
ngOnInit(): void {
23+
this.cards = this.dotService.get();
2524
}
2625
}

0 commit comments

Comments
 (0)