From 642783785c75c53bb5dff212de9403f2244e4d40 Mon Sep 17 00:00:00 2001 From: Jim Chien Date: Fri, 9 Nov 2018 00:07:30 -0200 Subject: [PATCH 1/2] Add page Discover Pets --- src/app/discover/discover.component.html | 5 +- src/app/discover/discover.module.ts | 8 +- .../filter-list-item.component.html | 36 +++++ .../filter-list-item.component.scss | 7 + .../filter-list-item.component.spec.ts | 25 ++++ .../filter-list-item.component.ts | 15 +++ .../pets-detail/pets-detail.component.html | 3 + .../pets-detail/pets-detail.component.scss | 0 .../pets-detail/pets-detail.component.spec.ts | 25 ++++ .../pets-detail/pets-detail.component.ts | 15 +++ .../pets-list-item.component.html | 125 ++++++++++++++++++ .../pets-list-item.component.scss | 14 ++ .../pets-list-item.component.spec.ts | 25 ++++ .../pets-list-item.component.ts | 15 +++ 14 files changed, 314 insertions(+), 4 deletions(-) create mode 100644 src/app/discover/filter-list-item/filter-list-item.component.html create mode 100644 src/app/discover/filter-list-item/filter-list-item.component.scss create mode 100644 src/app/discover/filter-list-item/filter-list-item.component.spec.ts create mode 100644 src/app/discover/filter-list-item/filter-list-item.component.ts create mode 100644 src/app/discover/pets-detail/pets-detail.component.html create mode 100644 src/app/discover/pets-detail/pets-detail.component.scss create mode 100644 src/app/discover/pets-detail/pets-detail.component.spec.ts create mode 100644 src/app/discover/pets-detail/pets-detail.component.ts create mode 100644 src/app/discover/pets-list-item/pets-list-item.component.html create mode 100644 src/app/discover/pets-list-item/pets-list-item.component.scss create mode 100644 src/app/discover/pets-list-item/pets-list-item.component.spec.ts create mode 100644 src/app/discover/pets-list-item/pets-list-item.component.ts diff --git a/src/app/discover/discover.component.html b/src/app/discover/discover.component.html index 80929c8..6ae1345 100644 --- a/src/app/discover/discover.component.html +++ b/src/app/discover/discover.component.html @@ -1,3 +1,2 @@ -

- discover works! -

+ + \ No newline at end of file diff --git a/src/app/discover/discover.module.ts b/src/app/discover/discover.module.ts index dffbd68..2a8d35b 100644 --- a/src/app/discover/discover.module.ts +++ b/src/app/discover/discover.module.ts @@ -3,6 +3,9 @@ import { CommonModule } from '@angular/common'; import { DiscoverRoutingModule } from './discover-routing.module'; import { DiscoverComponent } from './discover.component'; +import { PetsDetailComponent } from './pets-detail/pets-detail.component'; +import { PetsListItemComponent } from './pets-list-item/pets-list-item.component'; +import { FilterListItemComponent } from './filter-list-item/filter-list-item.component'; @NgModule({ imports: [ @@ -11,7 +14,10 @@ import { DiscoverComponent } from './discover.component'; ], exports: [], declarations: [ - DiscoverComponent + DiscoverComponent, + PetsDetailComponent, + PetsListItemComponent, + FilterListItemComponent ] }) export class DiscoverModule { } diff --git a/src/app/discover/filter-list-item/filter-list-item.component.html b/src/app/discover/filter-list-item/filter-list-item.component.html new file mode 100644 index 0000000..ecad6ff --- /dev/null +++ b/src/app/discover/filter-list-item/filter-list-item.component.html @@ -0,0 +1,36 @@ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/discover/filter-list-item/filter-list-item.component.scss b/src/app/discover/filter-list-item/filter-list-item.component.scss new file mode 100644 index 0000000..0da93ff --- /dev/null +++ b/src/app/discover/filter-list-item/filter-list-item.component.scss @@ -0,0 +1,7 @@ +.filter { + margin: 10px; + + .row .col-sm{ + margin: 5px; + } + } \ No newline at end of file diff --git a/src/app/discover/filter-list-item/filter-list-item.component.spec.ts b/src/app/discover/filter-list-item/filter-list-item.component.spec.ts new file mode 100644 index 0000000..83fcab6 --- /dev/null +++ b/src/app/discover/filter-list-item/filter-list-item.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FilterListItemComponent } from './filter-list-item.component'; + +describe('FilterListItemComponent', () => { + let component: FilterListItemComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FilterListItemComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FilterListItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/discover/filter-list-item/filter-list-item.component.ts b/src/app/discover/filter-list-item/filter-list-item.component.ts new file mode 100644 index 0000000..f992ece --- /dev/null +++ b/src/app/discover/filter-list-item/filter-list-item.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-filter-list-item', + templateUrl: './filter-list-item.component.html', + styleUrls: ['./filter-list-item.component.scss'] +}) +export class FilterListItemComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/discover/pets-detail/pets-detail.component.html b/src/app/discover/pets-detail/pets-detail.component.html new file mode 100644 index 0000000..afbab38 --- /dev/null +++ b/src/app/discover/pets-detail/pets-detail.component.html @@ -0,0 +1,3 @@ +

+ pets-detail works! +

diff --git a/src/app/discover/pets-detail/pets-detail.component.scss b/src/app/discover/pets-detail/pets-detail.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/discover/pets-detail/pets-detail.component.spec.ts b/src/app/discover/pets-detail/pets-detail.component.spec.ts new file mode 100644 index 0000000..382370b --- /dev/null +++ b/src/app/discover/pets-detail/pets-detail.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PetsDetailComponent } from './pets-detail.component'; + +describe('PetsDetailComponent', () => { + let component: PetsDetailComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PetsDetailComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PetsDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/discover/pets-detail/pets-detail.component.ts b/src/app/discover/pets-detail/pets-detail.component.ts new file mode 100644 index 0000000..9871fb2 --- /dev/null +++ b/src/app/discover/pets-detail/pets-detail.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-pets-detail', + templateUrl: './pets-detail.component.html', + styleUrls: ['./pets-detail.component.scss'] +}) +export class PetsDetailComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/discover/pets-list-item/pets-list-item.component.html b/src/app/discover/pets-list-item/pets-list-item.component.html new file mode 100644 index 0000000..364d523 --- /dev/null +++ b/src/app/discover/pets-list-item/pets-list-item.component.html @@ -0,0 +1,125 @@ +
+
+ Card image cap +
+
+
+
Pé de pano
+ Abandonado +
+
+

Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D

+ + informações +
+
+
+ Card image cap +
+
+
+
Cãopeão
+ Adoção +
+
+

Yeahhhhhh!

+ + informações +
+
+
+ Card image cap +
+
+
+
Baby
+ Achado +
+
+

Perdi o caminho de casa. Conhece meu dono? Quer me adotar?

+ + informações +
+
+
+ +
+
+ Card image cap +
+
+
+
Pé de pano
+ Abandonado +
+
+

Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D

+ + informações +
+
+
+ Card image cap +
+
+
+
Cãopeão
+ Adoção +
+
+

Yeahhhhhh!

+ + informações +
+
+
+ Card image cap +
+
+
+
Baby
+ Achado +
+
+

Perdi o caminho de casa. Conhece meu dono? Quer me adotar?

+ + informações +
+
+
+ +
+
+ Card image cap +
+
+
+
Pé de pano
+ Abandonado +
+
+

Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D

+ + informações +
+
+
+ Card image cap +
+
+
+
Cãopeão
+ Adoção +
+
+

Yeahhhhhh!

+ + informações +
+
+
+ Card image cap +
+
+
+
Baby
+ Achado +
+
+

Perdi o caminho de casa. Conhece meu dono? Quer me adotar?

+ + informações +
+
+
\ No newline at end of file diff --git a/src/app/discover/pets-list-item/pets-list-item.component.scss b/src/app/discover/pets-list-item/pets-list-item.component.scss new file mode 100644 index 0000000..3e9773d --- /dev/null +++ b/src/app/discover/pets-list-item/pets-list-item.component.scss @@ -0,0 +1,14 @@ +.card-deck { + margin-bottom: 10px; + + .card { + background-color: #f9f9f9; + border-color: transparent; + } + + .card-img-top { + width: 100%; + height: 15vw; + object-fit: cover; + } +} \ No newline at end of file diff --git a/src/app/discover/pets-list-item/pets-list-item.component.spec.ts b/src/app/discover/pets-list-item/pets-list-item.component.spec.ts new file mode 100644 index 0000000..89a92e1 --- /dev/null +++ b/src/app/discover/pets-list-item/pets-list-item.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PetsListItemComponent } from './pets-list-item.component'; + +describe('PetsListItemComponent', () => { + let component: PetsListItemComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PetsListItemComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PetsListItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/discover/pets-list-item/pets-list-item.component.ts b/src/app/discover/pets-list-item/pets-list-item.component.ts new file mode 100644 index 0000000..5ec117c --- /dev/null +++ b/src/app/discover/pets-list-item/pets-list-item.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-pets-list-item', + templateUrl: './pets-list-item.component.html', + styleUrls: ['./pets-list-item.component.scss'] +}) +export class PetsListItemComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} From 47824776cc181609b160092c999d0d7aee08437d Mon Sep 17 00:00:00 2001 From: Jim Chien Date: Fri, 9 Nov 2018 23:26:12 -0200 Subject: [PATCH 2/2] Refatorando feature/discover --- .../pets-list-item.component.html | 132 ++---------------- .../pets-list-item.component.scss | 26 ++-- .../pets-list-item.component.ts | 73 +++++++++- .../pets-list-item/pets-list-item.options.ts | 8 ++ 4 files changed, 106 insertions(+), 133 deletions(-) create mode 100644 src/app/discover/pets-list-item/pets-list-item.options.ts diff --git a/src/app/discover/pets-list-item/pets-list-item.component.html b/src/app/discover/pets-list-item/pets-list-item.component.html index 364d523..f5f9814 100644 --- a/src/app/discover/pets-list-item/pets-list-item.component.html +++ b/src/app/discover/pets-list-item/pets-list-item.component.html @@ -1,125 +1,17 @@ -
-
- Card image cap -
-
-
-
Pé de pano
- Abandonado +
+
+
+ Card image cap +
+
+
+
{{ pet.name }}
+ {{ pet.isAdoption }} +
+

{{ pet.description }}

+ + informações
-

Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D

- + informações
-
- Card image cap -
-
-
-
Cãopeão
- Adoção -
-
-

Yeahhhhhh!

- + informações -
-
-
- Card image cap -
-
-
-
Baby
- Achado -
-
-

Perdi o caminho de casa. Conhece meu dono? Quer me adotar?

- + informações -
-
-
- -
-
- Card image cap -
-
-
-
Pé de pano
- Abandonado -
-
-

Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D

- + informações -
-
-
- Card image cap -
-
-
-
Cãopeão
- Adoção -
-
-

Yeahhhhhh!

- + informações -
-
-
- Card image cap -
-
-
-
Baby
- Achado -
-
-

Perdi o caminho de casa. Conhece meu dono? Quer me adotar?

- + informações -
-
-
- -
-
- Card image cap -
-
-
-
Pé de pano
- Abandonado -
-
-

Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D

- + informações -
-
-
- Card image cap -
-
-
-
Cãopeão
- Adoção -
-
-

Yeahhhhhh!

- + informações -
-
-
- Card image cap -
-
-
-
Baby
- Achado -
-
-

Perdi o caminho de casa. Conhece meu dono? Quer me adotar?

- + informações -
-
\ No newline at end of file diff --git a/src/app/discover/pets-list-item/pets-list-item.component.scss b/src/app/discover/pets-list-item/pets-list-item.component.scss index 3e9773d..07a1f8c 100644 --- a/src/app/discover/pets-list-item/pets-list-item.component.scss +++ b/src/app/discover/pets-list-item/pets-list-item.component.scss @@ -1,14 +1,18 @@ -.card-deck { +.card-list-pet { margin-bottom: 10px; - .card { - background-color: #f9f9f9; - border-color: transparent; - } - - .card-img-top { - width: 100%; - height: 15vw; - object-fit: cover; - } + .card { + margin-bottom: 15px; + border: 0px; + } + + .card-body { + background-color: #f9f9f9; + border-color: transparent; + } + + .card-img-top { + width: 100%; + height: 15vw; + object-fit: cover; } } \ No newline at end of file diff --git a/src/app/discover/pets-list-item/pets-list-item.component.ts b/src/app/discover/pets-list-item/pets-list-item.component.ts index 5ec117c..87d37e9 100644 --- a/src/app/discover/pets-list-item/pets-list-item.component.ts +++ b/src/app/discover/pets-list-item/pets-list-item.component.ts @@ -1,4 +1,6 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; + +import { PetOptions } from './pets-list-item.options'; @Component({ selector: 'app-pets-list-item', @@ -7,7 +9,74 @@ import { Component, OnInit } from '@angular/core'; }) export class PetsListItemComponent implements OnInit { - constructor() { } + pets: PetOptions[] = []; + + constructor() { + this.pets.push(...[{ + id: 1, + name: 'Pé de pano', + photo: 'https://www.paulickreport.com/wp-content/uploads/2015/08/Happy_horse.jpg', + description: 'Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D', + isAdoption: false, + isLost: true + }, { + id: 2, + name: 'Cãopeão', + photo: 'http://talkingship.com/wp/wp-content/uploads/2013/12/dog-laughing-from-Laugh-It-Out-with-Luisa-Thwaites-443x325.jpg', + description: 'Yeahhhhhh!', + isAdoption: true, + isLost: false + }, { + id: 3, + name: 'Baby', + photo: 'https://www.bestfunnies.com/wp-content/uploads/2012/06/Funny-Pig-48.jpg', + description: 'Perdi o caminho de casa. Conhece meu dono? Quer me adotar?', + isAdoption: false, + isLost: false + }, { + id: 4, + name: 'Balanoalvo', + photo: 'https://www.paulickreport.com/wp-content/uploads/2015/08/Happy_horse.jpg', + description: 'Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D', + isAdoption: false, + isLost: true + }, { + id: 5, + name: 'Cachurros', + photo: 'http://talkingship.com/wp/wp-content/uploads/2013/12/dog-laughing-from-Laugh-It-Out-with-Luisa-Thwaites-443x325.jpg', + description: 'Yeahhhhhh!', + isAdoption: true, + isLost: false + }, { + id: 6, + name: 'Bacon', + photo: 'https://www.bestfunnies.com/wp-content/uploads/2012/06/Funny-Pig-48.jpg', + description: 'Perdi o caminho de casa. Conhece meu dono? Quer me adotar?', + isAdoption: false, + isLost: false + }, { + id: 7, + name: 'Coice', + photo: 'https://www.paulickreport.com/wp-content/uploads/2015/08/Happy_horse.jpg', + description: 'Oi! Fui abandonado e preciso de um novo lar. Sou bem divertido :D', + isAdoption: false, + isLost: true + }, { + id: 8, + name: 'Doggo', + photo: 'http://talkingship.com/wp/wp-content/uploads/2013/12/dog-laughing-from-Laugh-It-Out-with-Luisa-Thwaites-443x325.jpg', + description: 'Yeahhhhhh!', + isAdoption: true, + isLost: false + }, { + id: 9, + name: 'Batata', + photo: 'https://www.bestfunnies.com/wp-content/uploads/2012/06/Funny-Pig-48.jpg', + description: 'Perdi o caminho de casa. Conhece meu dono? Quer me adotar?', + isAdoption: false, + isLost: false + }]); + } ngOnInit() { } diff --git a/src/app/discover/pets-list-item/pets-list-item.options.ts b/src/app/discover/pets-list-item/pets-list-item.options.ts new file mode 100644 index 0000000..04302fe --- /dev/null +++ b/src/app/discover/pets-list-item/pets-list-item.options.ts @@ -0,0 +1,8 @@ +export interface PetOptions { + id: number; + name: string; + photo: string; + description: string; + isAdoption: boolean; + isLost: boolean; +}